Binding to an aliased property results in null value

[WHenderson]

Describe the bug
If a component exports a property using an alias such as export { alias as name }, then binding to that property will fail.

To Reproduce
https://svelte.dev/repl/e694e7e20f044deabaf55ff659a1e41e?version=3.9.2

Expected behavior
Expected that binding to an alias would be consistent with binding to an unaliased export.

[damianpumar]

Hi @WHenderson, I fixed this issue here: #3573

[damianpumar]

Hi @Conduitry any news about that?

Thanks!

[Conduitry]

It might be possible to optimize this a little more in the common case of no aliased props, but one way to handle this seems to be to make the final prop_names array argument to init() instead be an object mapping prop names to internal context key names. Then the bind() function that's called in the parent component to set up binding can do the lookup instead of using the same name as the prop.

[Conduitry]

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 72f81cfb..a5d990cf 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -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,7 @@ 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.name}"`)} }`;
 
 	if (options.customElement) {
 		const declaration = b`
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 2d5795ec..b2898de6 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -22,9 +22,10 @@ interface T$$ {
 }
 
 export function bind(component, name, callback) {
-	if (component.$$.props.indexOf(name) === -1) return;
-	component.$$.bound[name] = callback;
-	callback(component.$$.ctx[name]);
+	if (name in component.$$.props) {
+		component.$$.bound[component.$$.props[name]] = callback;
+		callback(component.$$.ctx[component.$$.props[name]]);
+	}
 }
 
 export function mount_component(component, target, anchor) {