store prop names as $$.props, prevent leaky bindings. fixes #2222

src/compile/render-dom/index.ts

@@ -407,6 +407,8 @@ export default function dom(
 		`);
 	}
 
+	const prop_names = `[${props.map(v => JSON.stringify(v.export_name)).join(', ')}]`;
+
 	if (options.customElement) {
 		builder.addBlock(deindent`
 			class ${name} extends @SvelteElement {
@@ -415,7 +417,7 @@ export default function dom(
 
 					${css.code && `this.shadowRoot.innerHTML = \`<style>${escape(css.code, { onlyEscapeAtSymbol: true }).replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 
-					@init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal});
+					@init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names});
 
 					${dev_props_check}
 
@@ -449,7 +451,7 @@ export default function dom(
 				constructor(options) {
 					super(${options.dev && `options`});
 					${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`}
-					@init(this, options, ${definition}, create_fragment, ${not_equal});
+					@init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names});
 
 					${dev_props_check}
 				}

src/internal/Component.js

@@ -5,6 +5,7 @@ import { blankObject } from './utils.js';
 import { children } from './dom.js';
 
 export function bind(component, name, callback) {
+	if (component.$$.props.indexOf(name) === -1) return;
 	component.$$.bound[name] = callback;
 	callback(component.$$.ctx[name]);
 }
@@ -53,7 +54,7 @@ function make_dirty(component, key) {
 	component.$$.dirty[key] = true;
 }
 
-export function init(component, options, instance, create_fragment, not_equal) {
+export function init(component, options, instance, create_fragment, not_equal, prop_names) {
 	const parent_component = current_component;
 	set_current_component(component);
 
@@ -64,6 +65,7 @@ export function init(component, options, instance, create_fragment, not_equal) {
 		ctx: null,
 
 		// state
+		props: prop_names,
 		update: noop,
 		not_equal,
 		bound: blankObject(),

test/runtime/samples/component-binding-non-leaky/Counter.svelte

@@ -0,0 +1,5 @@
+<script>
+	let count = 0;
+</script>
+
+<button on:click='{() => count += 1}'>{count}</button>

test/runtime/samples/component-binding-non-leaky/_config.js

@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<button>0</button>
+		<p>count: undefined</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, undefined);
+		assert.htmlEqual(target.innerHTML, `
+			<button>1</button>
+			<p>count: undefined</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, undefined);
+		assert.htmlEqual(target.innerHTML, `
+			<button>2</button>
+			<p>count: undefined</p>
+		`);
+	}
+};

test/runtime/samples/component-binding-non-leaky/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Counter from './Counter.svelte';
+
+	let x;
+</script>
+
+<Counter bind:count={x}/>
+<p>count: {x}</p>