Alternative fix for #3508

CHANGELOG.md

@@ -10,6 +10,7 @@ Also:
 * Fix edge cases in matching selectors against elements ([#1710](https://github.com/sveltejs/svelte/issues/1710))
 * Fix several bugs related to interaction of `{...spread}` attributes with other features ([#2721](https://github.com/sveltejs/svelte/issues/2721), [#2916](https://github.com/sveltejs/svelte/issues/2916), [#3421](https://github.com/sveltejs/svelte/issues/3421), [#3681](https://github.com/sveltejs/svelte/issues/3681), [#3764](https://github.com/sveltejs/svelte/issues/3764), [#3790](https://github.com/sveltejs/svelte/issues/3790))
 * Allow exiting a reactive block early with `break $` ([#2828](https://github.com/sveltejs/svelte/issues/2828))
+* Fix binding to props that have been renamed with `export { ... as ... }` ([#3508](https://github.com/sveltejs/svelte/issues/3508))
 * Fix application of style scoping class in cases of ambiguity ([#3544](https://github.com/sveltejs/svelte/issues/3544))
 * Check attributes have changed before setting them to avoid image flicker ([#3579](https://github.com/sveltejs/svelte/pull/3579))
 * Fix generating malformed code for `{@debug}` tags with no dependencies ([#3588](https://github.com/sveltejs/svelte/issues/3588))

src/compiler/compile/render_dom/index.ts

@@ -7,7 +7,7 @@ import add_to_set from '../utils/add_to_set';
 import { extract_names } from '../utils/scope';
 import { invalidate } from '../utils/invalidate';
 import Block from './Block';
-import { ClassDeclaration, FunctionExpression, Node, Statement } from 'estree';
+import { ClassDeclaration, FunctionExpression, Node, Statement, ObjectExpression } from 'estree';
 
 export default function dom(
 	component: Component,
@@ -223,7 +223,7 @@ export default function dom(
 
 		component.rewrite_props(({ name, reassigned, export_name }) => {
 			const value = `$${name}`;
-			
+
 			const insert = (reassigned || export_name)
 				? b`${`$$subscribe_${name}`}()`
 				: b`@component_subscribe($$self, ${name}, #value => $$invalidate('${value}', ${value} = #value))`;
@@ -425,12 +425,9 @@ export default function dom(
 		`);
 	}
 
-	const prop_names = x`[]`;
-
-	// TODO find a more idiomatic way of doing this
-	props.forEach(v => {
-		(prop_names as any).elements.push({ type: 'Literal', value: v.export_name });
-	});
+	const prop_names = x`{
+		${props.map(v => p`${v.export_name}: ${v.export_name === v.name ? 0 : x`"${v.name}"`}}`)}
+	}` as ObjectExpression;
 
 	if (options.customElement) {
 		const declaration = b`

src/runtime/internal/Component.ts

@@ -1,6 +1,6 @@
 import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
 import { current_component, set_current_component } from './lifecycle';
-import { blank_object, is_function, run, run_all, noop } from './utils';
+import { blank_object, is_function, run, run_all, noop, has_prop } from './utils';
 import { children } from './dom';
 import { transition_in } from './transitions';
 
@@ -12,7 +12,7 @@ interface T$$ {
 	update: () => void;
 	callbacks: any;
 	after_update: any[];
-	props: any;
+	props: Record<string, 0 | string>;
 	fragment: null|any;
 	not_equal: any;
 	before_update: any[];
@@ -22,9 +22,11 @@ interface T$$ {
 }
 
 export function bind(component, name, callback) {
-	if (component.$$.props.indexOf(name) === -1) return;
-	component.$$.bound[name] = callback;
-	callback(component.$$.ctx[name]);
+	if (has_prop(component.$$.props, name)) {
+		name = component.$$.props[name] || name;
+		component.$$.bound[name] = callback;
+		callback(component.$$.ctx[name]);
+	}
 }
 
 export function mount_component(component, target, anchor) {
@@ -70,18 +72,18 @@ function make_dirty(component, key) {
 	component.$$.dirty[key] = true;
 }
 
-export function init(component, options, instance, create_fragment, not_equal, prop_names) {
+export function init(component, options, instance, create_fragment, not_equal, props) {
 	const parent_component = current_component;
 	set_current_component(component);
 
-	const props = options.props || {};
+	const prop_values = options.props || {};
 
 	const $$: T$$ = component.$$ = {
 		fragment: null,
 		ctx: null,
 
 		// state
-		props: prop_names,
+		props,
 		update: noop,
 		not_equal,
 		bound: blank_object(),
@@ -101,14 +103,14 @@ export function init(component, options, instance, create_fragment, not_equal, p
 	let ready = false;
 
 	$$.ctx = instance
-		? instance(component, props, (key, ret, value = ret) => {
+		? instance(component, prop_values, (key, ret, value = ret) => {
 			if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) {
 				if ($$.bound[key]) $$.bound[key](value);
 				if (ready) make_dirty(component, key);
 			}
 			return ret;
 		})
-		: props;
+		: prop_values;
 
 	$$.update();
 	ready = true;

src/runtime/internal/dom.ts

@@ -1,3 +1,5 @@
+import { has_prop } from "./utils";
+
 export function append(target: Node, node: Node) {
 	target.appendChild(node);
 }
@@ -29,7 +31,7 @@ export function object_without_properties<T, K extends keyof T>(obj: T, exclude:
 	const target = {} as Pick<T, Exclude<keyof T, K>>;
 	for (const k in obj) {
 		if (
-			Object.prototype.hasOwnProperty.call(obj, k)
+			has_prop(obj, k)
 			// @ts-ignore
 			&& exclude.indexOf(k) === -1
 		) {

src/runtime/internal/utils.ts

@@ -105,3 +105,5 @@ export function set_store_value(store, ret, value = ret) {
 	store.set(value);
 	return ret;
 }
+
+export const has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);

test/js/samples/action-custom-event-handler/expected.js

@@ -39,7 +39,7 @@ function handleFoo(bar) {
 }
 
 function foo(node, callback) {
-
+	
 }
 
 function instance($$self, $$props, $$invalidate) {
@@ -56,7 +56,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["bar"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { bar: 0 });
 	}
 }
 

test/js/samples/action/expected.js

@@ -52,7 +52,7 @@ function link(node) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, create_fragment, safe_not_equal, []);
+		init(this, options, null, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/bind-online/expected.js

@@ -42,7 +42,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/bind-open/expected.js

@@ -58,7 +58,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["open"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { open: 0 });
 	}
 }
 

test/js/samples/bind-width-height/expected.js

@@ -56,7 +56,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["w", "h"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { w: 0, h: 0 });
 	}
 }
 

test/js/samples/capture-inject-dev-only/expected.js

@@ -68,7 +68,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/collapses-text-around-comments/expected.js

@@ -58,7 +58,7 @@ class Component extends SvelteComponent {
 	constructor(options) {
 		super();
 		if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
-		init(this, options, instance, create_fragment, safe_not_equal, ["foo"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
 	}
 }
 

test/js/samples/component-static-array/expected.js

@@ -45,7 +45,7 @@ function instance($$self) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/component-static-immutable/expected.js

@@ -45,7 +45,7 @@ function instance($$self) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, not_equal, []);
+		init(this, options, instance, create_fragment, not_equal, {});
 	}
 }
 

test/js/samples/component-static-immutable2/expected.js

@@ -45,7 +45,7 @@ function instance($$self) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, not_equal, []);
+		init(this, options, instance, create_fragment, not_equal, {});
 	}
 }
 

test/js/samples/component-static-var/expected.js

@@ -91,7 +91,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/component-static/expected.js

@@ -45,7 +45,7 @@ function instance($$self) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/component-store-access-invalidate/expected.js

@@ -48,7 +48,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/component-store-file-invalidate/expected.js

@@ -34,7 +34,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["increment"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { increment: 0 });
 	}
 
 	get increment() {

test/js/samples/component-store-reassign-invalidate/expected.js

@@ -67,7 +67,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/computed-collapsed-if/expected.js

@@ -32,7 +32,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["x", "a", "b"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { x: 0, a: 0, b: 0 });
 	}
 
 	get a() {

test/js/samples/css-media-query/expected.js

@@ -41,7 +41,7 @@ class Component extends SvelteComponent {
 	constructor(options) {
 		super();
 		if (!document.getElementById("svelte-1slhpfn-style")) add_css();
-		init(this, options, null, create_fragment, safe_not_equal, []);
+		init(this, options, null, create_fragment, safe_not_equal, {});
 	}
 }
 

test/js/samples/css-shadow-dom-keyframes/expected.js

@@ -33,7 +33,7 @@ class Component extends SvelteElement {
 	constructor(options) {
 		super();
 		this.shadowRoot.innerHTML = `<style>div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}</style>`;
-		init(this, { target: this.shadowRoot }, null, create_fragment, safe_not_equal, []);
+		init(this, { target: this.shadowRoot }, null, create_fragment, safe_not_equal, {});
 
 		if (options) {
 			if (options.target) {

test/js/samples/data-attribute/expected.js

@@ -56,7 +56,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["bar"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { bar: 0 });
 	}
 }
 

test/js/samples/debug-empty/expected.js

@@ -92,7 +92,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, instance, create_fragment, safe_not_equal, ["name"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { name: 0 });
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -192,7 +192,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, instance, create_fragment, safe_not_equal, ["things", "foo", "bar", "baz"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { things: 0, foo: 0, bar: 0, baz: 0 });
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,

test/js/samples/debug-foo/expected.js

@@ -186,7 +186,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, instance, create_fragment, safe_not_equal, ["things", "foo"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { things: 0, foo: 0 });
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,

test/js/samples/debug-hoisted/expected.js

@@ -64,7 +64,7 @@ function instance($$self) {
 class Component extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, instance, create_fragment, safe_not_equal, []);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,

test/js/samples/debug-no-dependencies/expected.js

@@ -132,7 +132,7 @@ function create_fragment(ctx) {
 class Component extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, null, create_fragment, safe_not_equal, []);
+		init(this, options, null, create_fragment, safe_not_equal, {});
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,

test/js/samples/deconflict-builtins/expected.js

@@ -112,7 +112,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["createElement"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { createElement: 0 });
 	}
 }
 

test/js/samples/deconflict-globals/expected.js

@@ -29,7 +29,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["foo"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
 	}
 }
 

test/js/samples/dev-warning-missing-data-computed/expected.js

@@ -96,7 +96,7 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, instance, create_fragment, safe_not_equal, ["foo"]);
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,

test/js/samples/dont-invalidate-this/expected.js

@@ -38,7 +38,7 @@ function make_uppercase() {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, create_fragment, safe_not_equal, []);
+		init(this, options, null, create_fragment, safe_not_equal, {});
 	}
 }