Merge branch 'gh-3508' of https://github.com/Conduitry/svelte into Conduitry-gh-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

@@ -426,10 +426,14 @@ export default function dom(
 	}
 
 	const prop_names = x`[]`;
+	const renamed_prop_names = [];
 
 	// TODO find a more idiomatic way of doing this
 	props.forEach(v => {
 		(prop_names as any).elements.push({ type: 'Literal', value: v.export_name });
+		if (v.name !== v.export_name) {
+			renamed_prop_names.push(p`${v.export_name}: "${v.name}"`);
+		}
 	});
 
 	if (options.customElement) {
@@ -440,7 +444,7 @@ export default function dom(
 
 					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 
-					@init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names});
+					@init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names}, ${renamed_prop_names.length > 0 && x`{ ${renamed_prop_names} }`});
 
 					${dev_props_check}
 
@@ -492,7 +496,7 @@ export default function dom(
 				constructor(options) {
 					super(${options.dev && `options`});
 					${should_add_css && b`if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}
-					@init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names});
+					@init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names}, ${renamed_prop_names.length > 0 && x`{ ${renamed_prop_names} }`});
 					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
 
 					${dev_props_check}

src/runtime/internal/Component.ts

@@ -13,6 +13,7 @@ interface T$$ {
 	callbacks: any;
 	after_update: any[];
 	props: any;
+	renamed_props: any;
 	fragment: null|any;
 	not_equal: any;
 	before_update: any[];
@@ -23,6 +24,9 @@ interface T$$ {
 
 export function bind(component, name, callback) {
 	if (component.$$.props.indexOf(name) === -1) return;
+	if (component.$$.renamed_props && name in component.$$.renamed_props) {
+		name = component.$$.renamed_props[name];
+	}
 	component.$$.bound[name] = callback;
 	callback(component.$$.ctx[name]);
 }
@@ -70,7 +74,7 @@ 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, prop_names, renamed_props) {
 	const parent_component = current_component;
 	set_current_component(component);
 
@@ -82,6 +86,7 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 		// state
 		props: prop_names,
+		renamed_props,
 		update: noop,
 		not_equal,
 		bound: blank_object(),

test/runtime/samples/component-binding-aliased/Widget.svelte

@@ -0,0 +1,4 @@
+<script>
+	let foo = 42;
+	export { foo as bar };
+</script>

test/runtime/samples/component-binding-aliased/_config.js

@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div>42</div>
+	`
+};

test/runtime/samples/component-binding-aliased/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Widget from './Widget.svelte';
+	let bar;
+</script>
+
+<Widget bind:bar/>
+
+<div>{bar}</div>