From 780c6803a540407e5eea8f80e038a3fdec36b0d4 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 18 Nov 2018 18:31:20 -0500
Subject: [PATCH] get a few binding tests passing

---
 .../render-dom/wrappers/Element/Binding.ts    | 49 ++++++-----------
 .../render-dom/wrappers/Element/index.ts      | 54 +++++++++----------
 src/compile/render-ssr/handlers/Element.ts    |  2 +-
 .../_config.js                                | 26 ++++-----
 .../samples/binding-input-checkbox/_config.js | 16 +++---
 .../binding-input-range-change/_config.js     |  4 +-
 .../samples/binding-input-range/_config.js    |  4 +-
 .../binding-input-text-contextual/_config.js  |  2 +-
 .../binding-input-text-deep/_config.js        |  4 +-
 .../samples/binding-input-text/_config.js     |  4 +-
 .../samples/binding-textarea/_config.js       |  4 +-
 11 files changed, 72 insertions(+), 97 deletions(-)

diff --git a/src/compile/render-dom/wrappers/Element/Binding.ts b/src/compile/render-dom/wrappers/Element/Binding.ts
index 049bc8d07c..ba3f2a3017 100644
--- a/src/compile/render-dom/wrappers/Element/Binding.ts
+++ b/src/compile/render-dom/wrappers/Element/Binding.ts
@@ -74,8 +74,13 @@ export default class BindingWrapper {
 		let updateConditions: string[] = [];
 
 		const { name } = getObject(this.node.expression.node);
+
 		const { snippet } = this.node.expression;
 
+		// TODO unfortunate code is necessary because we need to use `ctx`
+		// inside the fragment, but not inside the <script>
+		const contextless_snippet = this.parent.renderer.component.source.slice(this.node.expression.node.start, this.node.expression.node.end);
+
 		// special case: if you have e.g. `<input type=checkbox bind:checked=selected.done>`
 		// and `selected` is an object chosen with a <select>, then when `checked` changes,
 		// we need to tell the component to update all the values `selected` might be
@@ -94,7 +99,7 @@ export default class BindingWrapper {
 
 		// view to model
 		const valueFromDom = getValueFromDom(renderer, this.parent, this);
-		const handler = getEventHandler(this, renderer, block, name, snippet, dependencies, valueFromDom);
+		const handler = getEventHandler(this, renderer, block, name, contextless_snippet, dependencies, valueFromDom);
 
 		// model to view
 		let updateDom = getDomUpdater(parent, this, snippet);
@@ -154,7 +159,8 @@ export default class BindingWrapper {
 			initialUpdate: initialUpdate,
 			needsLock: !isReadOnly && needsLock,
 			updateCondition: updateConditions.length ? updateConditions.join(' && ') : undefined,
-			isReadOnlyMediaAttribute: this.isReadOnlyMediaAttribute()
+			isReadOnlyMediaAttribute: this.isReadOnlyMediaAttribute(),
+			dependencies: this.node.expression.dependencies
 		};
 	}
 }
@@ -213,7 +219,6 @@ function getEventHandler(
 	dependencies: Set<string>,
 	value: string
 ) {
-	const storeDependencies = [...dependencies].filter(prop => prop[0] === '$').map(prop => prop.slice(1));
 	let dependenciesArray = [...dependencies].filter(prop => prop[0] !== '$');
 
 	if (binding.node.isContextual) {
@@ -226,51 +231,27 @@ function getEventHandler(
 		return {
 			usesContext: true,
 			usesState: true,
-			usesStore: storeDependencies.length > 0,
 			mutation: `${head()}${tail} = ${value};`,
-			props: dependenciesArray.map(prop => `${prop}: ctx.${prop}`),
-			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
+			props: dependenciesArray.map(prop => `${prop}: ctx.${prop}`)
 		};
 	}
 
 	if (binding.node.expression.node.type === 'MemberExpression') {
-		// This is a little confusing, and should probably be tidied up
-		// at some point. It addresses a tricky bug (#893), wherein
-		// Svelte tries to `set()` a computed property, which throws an
-		// error in dev mode. a) it's possible that we should be
-		// replacing computations with *their* dependencies, and b)
-		// we should probably populate `component.target.readonly` sooner so
-		// that we don't have to do the `.some()` here
-		dependenciesArray = dependenciesArray.filter(prop => !renderer.component.computations.some(computation => computation.key === prop));
-
 		return {
 			usesContext: false,
 			usesState: true,
-			usesStore: storeDependencies.length > 0,
-			mutation: `${snippet} = ${value}`,
-			props: dependenciesArray.map((prop: string) => `${prop}: ctx.${prop}`),
-			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
+			mutation: `${snippet} = ${value};`,
+			props: dependenciesArray.map((prop: string) => `${prop}: ctx.${prop}`)
 		};
 	}
 
-	let props;
-	let storeProps;
-
-	if (name[0] === '$') {
-		props = [];
-		storeProps = [`${name.slice(1)}: ${value}`];
-	} else {
-		props = [`${name}: ${value}`];
-		storeProps = [];
-	}
+	const props = [`${name}: ${value}`];
 
 	return {
 		usesContext: false,
 		usesState: false,
-		usesStore: false,
-		mutation: null,
-		props,
-		storeProps
+		mutation: `${snippet} = ${value};`,
+		props
 	};
 }
 
@@ -311,5 +292,5 @@ function getValueFromDom(
 	}
 
 	// everything else
-	return `${element.var}.${name}`;
+	return `this.${name}`;
 }
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts
index b091a94a68..dff56bf5b4 100644
--- a/src/compile/render-dom/wrappers/Element/index.ts
+++ b/src/compile/render-dom/wrappers/Element/index.ts
@@ -16,6 +16,7 @@ import StyleAttributeWrapper from './StyleAttribute';
 import { dimensions } from '../../../../utils/patterns';
 import Binding from './Binding';
 import InlineComponentWrapper from '../InlineComponent';
+import addToSet from '../../../../utils/addToSet';
 
 const events = [
 	{
@@ -438,7 +439,11 @@ export default class ElementWrapper extends Wrapper {
 
 			const needsLock = group.bindings.some(binding => binding.needsLock);
 
+			const deps = new Set();
+
 			group.bindings.forEach(binding => {
+				addToSet(deps, binding.dependencies);
+
 				if (!binding.updateDom) return;
 
 				const updateConditions = needsLock ? [`!${lock}`] : [];
@@ -449,21 +454,8 @@ export default class ElementWrapper extends Wrapper {
 				);
 			});
 
-			const usesStore = group.bindings.some(binding => binding.handler.usesStore);
 			const mutations = group.bindings.map(binding => binding.handler.mutation).filter(Boolean).join('\n');
 
-			const props = new Set();
-			const storeProps = new Set();
-			group.bindings.forEach(binding => {
-				binding.handler.props.forEach(prop => {
-					props.add(prop);
-				});
-
-				binding.handler.storeProps.forEach(prop => {
-					storeProps.add(prop);
-				});
-			}); // TODO use stringifyProps here, once indenting is fixed
-
 			// media bindings — awkward special case. The native timeupdate events
 			// fire too infrequently, so we need to take matters into our
 			// own hands
@@ -473,21 +465,23 @@ export default class ElementWrapper extends Wrapper {
 				block.addVariable(animation_frame);
 			}
 
-			block.builders.init.addBlock(deindent`
-				function ${handler}() {
-					${
-						animation_frame && deindent`
-							cancelAnimationFrame(${animation_frame});
-							if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`
+			// TODO figure out how to handle locks
+
+			this.renderer.component.event_handlers.push({
+				name: handler,
+				body: deindent`
+					function ${handler}() {
+						${
+							animation_frame && deindent`
+								cancelAnimationFrame(${animation_frame});
+								if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`
+						}
+						${mutations.length > 0 && mutations}
+						${Array.from(deps).map(dep => `$$make_dirty('${dep}');`)}
+						console.log('changed');
 					}
-					${usesStore && `var $ = #component.store.get();`}
-					${needsLock && `${lock} = true;`}
-					${mutations.length > 0 && mutations}
-					${props.size > 0 && `#component.set({ ${Array.from(props).join(', ')} });`}
-					${storeProps.size > 0 && `#component.store.set({ ${Array.from(storeProps).join(', ')} });`}
-					${needsLock && `${lock} = false;`}
-				}
-			`);
+				`
+			});
 
 			group.events.forEach(name => {
 				if (name === 'resize') {
@@ -496,7 +490,7 @@ export default class ElementWrapper extends Wrapper {
 					block.addVariable(resize_listener);
 
 					block.builders.mount.addLine(
-						`${resize_listener} = @addResizeListener(${this.var}, ${handler});`
+						`${resize_listener} = @addResizeListener(${this.var}, ctx.${handler});`
 					);
 
 					block.builders.destroy.addLine(
@@ -504,11 +498,11 @@ export default class ElementWrapper extends Wrapper {
 					);
 				} else {
 					block.builders.hydrate.addLine(
-						`@addListener(${this.var}, "${name}", ${handler});`
+						`@addListener(${this.var}, "${name}", ctx.${handler});`
 					);
 
 					block.builders.destroy.addLine(
-						`@removeListener(${this.var}, "${name}", ${handler});`
+						`@removeListener(${this.var}, "${name}", ctx.${handler});`
 					);
 				}
 			});
diff --git a/src/compile/render-ssr/handlers/Element.ts b/src/compile/render-ssr/handlers/Element.ts
index d7bc823be2..b1f8dfb628 100644
--- a/src/compile/render-ssr/handlers/Element.ts
+++ b/src/compile/render-ssr/handlers/Element.ts
@@ -121,7 +121,7 @@ export default function(node, renderer, options) {
 	}
 
 	node.bindings.forEach(binding => {
-		const { name, value: { snippet } } = binding;
+		const { name, expression: { snippet } } = binding;
 
 		if (name === 'group') {
 			// TODO server-render group bindings
diff --git a/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js b/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
index 916e6fa2e6..5651e222c5 100644
--- a/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
+++ b/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
@@ -33,32 +33,32 @@ export default {
 		<p>1 completed</p>
 	`,
 
-	test ( assert, component, target, window ) {
-		const inputs = [ ...target.querySelectorAll( 'input' ) ];
+	async test(assert, component, target, window) {
+		const inputs = [ ...target.querySelectorAll('input') ];
 
-		assert.ok( inputs[0].checked );
-		assert.ok( !inputs[1].checked );
-		assert.ok( !inputs[2].checked );
+		assert.ok(inputs[0].checked);
+		assert.ok(!inputs[1].checked);
+		assert.ok(!inputs[2].checked);
 
-		const event = new window.Event( 'change' );
+		const event = new window.Event('change');
 
 		inputs[1].checked = true;
-		inputs[1].dispatchEvent( event );
+		await inputs[1].dispatchEvent(event);
 
-		assert.equal( component.numCompleted, 2 );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(component.numCompleted, 2);
+		assert.htmlEqual(target.innerHTML, `
 			<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
 			<p>2 completed</p>
-		` );
+		`);
 
 		const items = component.items;
 		items[2].completed = true;
 
 		component.items = items;
-		assert.ok( inputs[2].checked );
-		assert.htmlEqual( target.innerHTML, `
+		assert.ok(inputs[2].checked);
+		assert.htmlEqual(target.innerHTML, `
 			<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
 			<p>3 completed</p>
-		` );
+		`);
 	}
 };
diff --git a/test/runtime/samples/binding-input-checkbox/_config.js b/test/runtime/samples/binding-input-checkbox/_config.js
index 022e532eee..abe4c8879b 100644
--- a/test/runtime/samples/binding-input-checkbox/_config.js
+++ b/test/runtime/samples/binding-input-checkbox/_config.js
@@ -13,19 +13,19 @@ export default {
 		<p>true</p>
 	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
-		assert.equal( input.checked, true );
+	async test(assert, component, target, window) {
+		const input = target.querySelector('input');
+		assert.equal(input.checked, true);
 
-		const event = new window.Event( 'change' );
+		const event = new window.Event('change');
 
 		input.checked = false;
-		input.dispatchEvent( event );
+		await input.dispatchEvent(event);
 
-		assert.equal( target.innerHTML, `<input type="checkbox">\n<p>false</p>` );
+		assert.equal(target.innerHTML, `<input type="checkbox">\n<p>false</p>`);
 
 		component.foo = true;
-		assert.equal( input.checked, true );
-		assert.equal( target.innerHTML, `<input type="checkbox">\n<p>true</p>` );
+		assert.equal(input.checked, true);
+		assert.equal(target.innerHTML, `<input type="checkbox">\n<p>true</p>`);
 	}
 };
diff --git a/test/runtime/samples/binding-input-range-change/_config.js b/test/runtime/samples/binding-input-range-change/_config.js
index e061993aa9..092df852e9 100644
--- a/test/runtime/samples/binding-input-range-change/_config.js
+++ b/test/runtime/samples/binding-input-range-change/_config.js
@@ -13,14 +13,14 @@ export default {
 		<p>number 42</p>
 	`,
 
-	test(assert, component, target, window) {
+	async test(assert, component, target, window) {
 		const input = target.querySelector('input');
 		assert.equal(input.value, '42');
 
 		const event = new window.Event('change');
 
 		input.value = '43';
-		input.dispatchEvent(event);
+		await input.dispatchEvent(event);
 
 		assert.equal(component.count, 43);
 		assert.htmlEqual(target.innerHTML, `
diff --git a/test/runtime/samples/binding-input-range/_config.js b/test/runtime/samples/binding-input-range/_config.js
index 135c199e50..3ef0f00c8a 100644
--- a/test/runtime/samples/binding-input-range/_config.js
+++ b/test/runtime/samples/binding-input-range/_config.js
@@ -13,14 +13,14 @@ export default {
 		<p>number 42</p>
 	`,
 
-	test(assert, component, target, window) {
+	async test(assert, component, target, window) {
 		const input = target.querySelector('input');
 		assert.equal(input.value, '42');
 
 		const event = new window.Event('input');
 
 		input.value = '43';
-		input.dispatchEvent(event);
+		await input.dispatchEvent(event);
 
 		assert.equal(component.count, 43);
 		assert.htmlEqual(target.innerHTML, `
diff --git a/test/runtime/samples/binding-input-text-contextual/_config.js b/test/runtime/samples/binding-input-text-contextual/_config.js
index fb4cf2eb62..56888ee805 100644
--- a/test/runtime/samples/binding-input-text-contextual/_config.js
+++ b/test/runtime/samples/binding-input-text-contextual/_config.js
@@ -27,7 +27,7 @@ export default {
 		</div>
 	`,
 
-	test(assert, component, target, window) {
+	async test(assert, component, target, window) {
 		const inputs = [...target.querySelectorAll('input')];
 		const items = component.items;
 		const event = new window.Event('input');
diff --git a/test/runtime/samples/binding-input-text-deep/_config.js b/test/runtime/samples/binding-input-text-deep/_config.js
index d15ac40839..6f54f3c9dd 100644
--- a/test/runtime/samples/binding-input-text-deep/_config.js
+++ b/test/runtime/samples/binding-input-text-deep/_config.js
@@ -15,7 +15,7 @@ export default {
 		<p>hello alice</p>
 	`,
 
-	test(assert, component, target, window) {
+	async test(assert, component, target, window) {
 		const input = target.querySelector('input');
 
 		assert.equal(input.value, 'alice');
@@ -23,7 +23,7 @@ export default {
 		const event = new window.Event('input');
 
 		input.value = 'bob';
-		input.dispatchEvent(event);
+		await input.dispatchEvent(event);
 
 		assert.htmlEqual(target.innerHTML, `
 			<input>
diff --git a/test/runtime/samples/binding-input-text/_config.js b/test/runtime/samples/binding-input-text/_config.js
index 90c0ad9cb3..2e70626958 100644
--- a/test/runtime/samples/binding-input-text/_config.js
+++ b/test/runtime/samples/binding-input-text/_config.js
@@ -13,14 +13,14 @@ export default {
 		<p>hello world</p>
 	`,
 
-	test(assert, component, target, window) {
+	async test(assert, component, target, window) {
 		const input = target.querySelector('input');
 		assert.equal(input.value, 'world');
 
 		const event = new window.Event('input');
 
 		input.value = 'everybody';
-		input.dispatchEvent(event);
+		await input.dispatchEvent(event);
 
 		assert.htmlEqual(target.innerHTML, `
 			<input>
diff --git a/test/runtime/samples/binding-textarea/_config.js b/test/runtime/samples/binding-textarea/_config.js
index b798adadf2..d4eee0011c 100644
--- a/test/runtime/samples/binding-textarea/_config.js
+++ b/test/runtime/samples/binding-textarea/_config.js
@@ -13,14 +13,14 @@ export default {
 		<p>some text</p>
 	`,
 
-	test(assert, component, target, window) {
+	async test(assert, component, target, window) {
 		const textarea = target.querySelector('textarea');
 		assert.equal(textarea.value, 'some text');
 
 		const event = new window.Event('input');
 
 		textarea.value = 'hello';
-		textarea.dispatchEvent(event);
+		await textarea.dispatchEvent(event);
 
 		assert.htmlEqual(target.innerHTML, `
 			<textarea></textarea>