From 2b71798dd2479dd9f327f42e44b1795cb39e81d2 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Sun, 27 Oct 2019 14:09:59 -0400
Subject: [PATCH] fix binding to aliased props (#3508)

---
 src/compiler/compile/render_dom/index.ts | 10 +++++++---
 src/runtime/internal/Component.ts        |  7 ++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 72f81cfb05..cacac18b87 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))`;
@@ -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}
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 2d5795eccb..7e9897463e 100644
--- a/src/runtime/internal/Component.ts
+++ b/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(),