Merge pull request #3811 from sveltejs/gh-3508-alt

Alternative fix for #3508

Author: Rich-Harris

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 });
 	}
 }