From b5a42e6cf7f753d6ce06cd9d5af930b3cbb37b9e Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 18 Nov 2018 17:50:07 -0500
Subject: [PATCH] update binding syntax

---
 src/compile/nodes/Binding.ts                  | 14 +++----
 .../render-dom/wrappers/Element/Binding.ts    | 24 ++++++------
 src/parse/state/tag.ts                        | 38 +++++++------------
 .../hydration/samples/binding-input/main.html |  2 +-
 test/js/samples/bind-width-height/input.html  |  2 +-
 .../input-without-blowback-guard/input.html   |  2 +-
 .../samples/window-binding-scroll/input.html  |  2 +-
 test/parser/samples/binding/input.html        |  2 +-
 .../samples/error-binding-disabled/input.html |  2 +-
 .../attribute-prefer-expression/main.html     |  4 +-
 .../main.html                                 |  2 +-
 .../samples/binding-indirect/main.html        |  2 +-
 .../main.html                                 |  6 +--
 .../binding-input-checkbox-group/main.html    |  2 +-
 .../samples/binding-input-checkbox/main.html  |  2 +-
 .../samples/binding-input-number/main.html    |  2 +-
 .../binding-input-radio-group/main.html       |  2 +-
 .../binding-input-range-change/main.html      |  2 +-
 .../samples/binding-input-range/main.html     |  2 +-
 .../binding-input-text-contextual/main.html   |  2 +-
 .../samples/binding-input-text/main.html      |  2 +-
 .../binding-input-with-event/main.html        |  2 +-
 .../main.html                                 |  2 +-
 .../samples/binding-select-in-yield/main.html |  2 +-
 .../main.html                                 |  2 +-
 .../binding-select-initial-value/main.html    |  2 +-
 .../samples/binding-select-late/main.html     |  2 +-
 .../samples/binding-select-multiple/main.html |  2 +-
 .../samples/binding-select-optgroup/main.html |  2 +-
 test/runtime/samples/binding-select/main.html |  2 +-
 .../component-binding-blowback-b/main.html    |  4 +-
 .../component-binding-blowback-c/main.html    |  2 +-
 .../ComponentSelector.html                    |  2 +-
 .../component-binding-deep-b/Editor.html      |  2 +-
 .../component-binding-each-object/main.html   |  2 +-
 .../samples/component-binding-each/main.html  |  2 +-
 .../main.html                                 |  2 +-
 .../samples/component-binding/main.html       |  2 +-
 .../deconflict-component-refs/main.html       |  2 +-
 .../main.html                                 |  2 +-
 .../dynamic-component-bindings/Bar.html       |  2 +-
 .../dynamic-component-bindings/Foo.html       |  2 +-
 .../main.html                                 |  2 +-
 .../main.html                                 |  4 +-
 .../samples/flush-before-bindings/main.html   |  2 +-
 .../main.html                                 |  2 +-
 .../Nested.html                               |  2 +-
 .../samples/select-bind-array/main.html       |  2 +-
 .../samples/select-change-handler/main.html   |  2 +-
 .../spread-component-with-bind/main.html      |  2 +-
 .../samples/window-binding-resize/main.html   |  2 +-
 .../samples/bindings/main.html                |  2 +-
 .../component-binding-renamed/main.html       |  2 +-
 .../samples/binding-input-checked/input.html  |  2 +-
 .../binding-input-type-boolean/input.html     |  2 +-
 .../binding-input-type-dynamic/input.html     |  2 +-
 .../input.html                                |  2 +-
 .../window-binding-invalid-width/input.html   |  2 +-
 .../samples/window-binding-invalid/input.html |  2 +-
 59 files changed, 94 insertions(+), 104 deletions(-)

diff --git a/src/compile/nodes/Binding.ts b/src/compile/nodes/Binding.ts
index 1d8aa911e1..ffd729431f 100644
--- a/src/compile/nodes/Binding.ts
+++ b/src/compile/nodes/Binding.ts
@@ -4,7 +4,7 @@ import Expression from './shared/Expression';
 
 export default class Binding extends Node {
 	name: string;
-	value: Expression;
+	expression: Expression;
 	isContextual: boolean;
 	usesContext: boolean;
 	obj: string;
@@ -14,18 +14,18 @@ export default class Binding extends Node {
 		super(component, parent, scope, info);
 
 		this.name = info.name;
-		this.value = new Expression(component, this, scope, info.value);
+		this.expression = new Expression(component, this, scope, info.expression);
 
 		let obj;
 		let prop;
 
-		const { name } = getObject(this.value.node);
+		const { name } = getObject(this.expression.node);
 		this.isContextual = scope.names.has(name);
 
-		if (this.value.node.type === 'MemberExpression') {
-			prop = `[✂${this.value.node.property.start}-${this.value.node.property.end}✂]`;
-			if (!this.value.node.computed) prop = `'${prop}'`;
-			obj = `[✂${this.value.node.object.start}-${this.value.node.object.end}✂]`;
+		if (this.expression.node.type === 'MemberExpression') {
+			prop = `[✂${this.expression.node.property.start}-${this.expression.node.property.end}✂]`;
+			if (!this.expression.node.computed) prop = `'${prop}'`;
+			obj = `[✂${this.expression.node.object.start}-${this.expression.node.object.end}✂]`;
 
 			this.usesContext = true;
 		} else {
diff --git a/src/compile/render-dom/wrappers/Element/Binding.ts b/src/compile/render-dom/wrappers/Element/Binding.ts
index 89c1674965..049bc8d07c 100644
--- a/src/compile/render-dom/wrappers/Element/Binding.ts
+++ b/src/compile/render-dom/wrappers/Element/Binding.ts
@@ -31,7 +31,7 @@ export default class BindingWrapper {
 		this.node = node;
 		this.parent = parent;
 
-		const { dependencies } = this.node.value;
+		const { dependencies } = this.node.expression;
 
 		block.addDependencies(dependencies);
 
@@ -46,7 +46,7 @@ export default class BindingWrapper {
 		if (node.isContextual) {
 			// we need to ensure that the each block creates a context including
 			// the list and the index, if they're not otherwise referenced
-			const { name } = getObject(this.node.value.node);
+			const { name } = getObject(this.node.expression.node);
 			const eachBlock = block.contextOwners.get(name);
 
 			eachBlock.hasBinding = true;
@@ -73,17 +73,17 @@ export default class BindingWrapper {
 
 		let updateConditions: string[] = [];
 
-		const { name } = getObject(this.node.value.node);
-		const { snippet } = this.node.value;
+		const { name } = getObject(this.node.expression.node);
+		const { snippet } = this.node.expression;
 
 		// 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
 		// pointing to
 		// TODO should this happen in preprocess?
-		const dependencies = new Set(this.node.value.dependencies);
+		const dependencies = new Set(this.node.expression.dependencies);
 
-		this.node.value.dependencies.forEach((prop: string) => {
+		this.node.expression.dependencies.forEach((prop: string) => {
 			const indirectDependencies = renderer.component.indirectDependencies.get(prop);
 			if (indirectDependencies) {
 				indirectDependencies.forEach(indirectDependency => {
@@ -102,7 +102,7 @@ export default class BindingWrapper {
 
 		// special cases
 		if (this.node.name === 'group') {
-			const bindingGroup = getBindingGroup(renderer, this.node.value.node);
+			const bindingGroup = getBindingGroup(renderer, this.node.expression.node);
 
 			block.builders.hydrate.addLine(
 				`(#component.$$bindingGroups[${bindingGroup}] || (#component.$$bindingGroups[${bindingGroup}] = [])).push(${parent.var});`
@@ -135,7 +135,7 @@ export default class BindingWrapper {
 			updateDom = null;
 		}
 
-		const dependencyArray = [...this.node.value.dependencies]
+		const dependencyArray = [...this.node.expression.dependencies]
 
 		if (dependencyArray.length === 1) {
 			updateConditions.push(`changed.${dependencyArray[0]}`)
@@ -217,8 +217,8 @@ function getEventHandler(
 	let dependenciesArray = [...dependencies].filter(prop => prop[0] !== '$');
 
 	if (binding.node.isContextual) {
-		const tail = binding.node.value.node.type === 'MemberExpression'
-			? getTailSnippet(binding.node.value.node)
+		const tail = binding.node.expression.node.type === 'MemberExpression'
+			? getTailSnippet(binding.node.expression.node)
 			: '';
 
 		const head = block.bindings.get(name);
@@ -233,7 +233,7 @@ function getEventHandler(
 		};
 	}
 
-	if (binding.node.value.node.type === 'MemberExpression') {
+	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
@@ -293,7 +293,7 @@ function getValueFromDom(
 
 	// <input type='checkbox' bind:group='foo'>
 	if (name === 'group') {
-		const bindingGroup = getBindingGroup(renderer, binding.node.value.node);
+		const bindingGroup = getBindingGroup(renderer, binding.node.expression.node);
 		if (type === 'checkbox') {
 			return `@getBindingGroupValue(#component.$$bindingGroups[${bindingGroup}])`;
 		}
diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts
index 8464fe5eef..c3973e0b77 100644
--- a/src/parse/state/tag.ts
+++ b/src/parse/state/tag.ts
@@ -388,23 +388,9 @@ function readAttribute(parser: Parser, uniqueNames: Set<string>) {
 	const colon_index = name.indexOf(':');
 	const type = colon_index !== 1 && get_directive_type(name.slice(0, colon_index));
 
-	let value;
-
-	if (parser.eat('=')) {
-		if (type === 'Binding') {
-			// TODO should this be a special case? tbh this whole thing
-			// could use a lil refactoring probably
-			const quote = parser.read(/['"']/);
-			const expression = readExpression(parser);
-			value = [{ type: 'MustacheTag', start: expression.start, end: expression.end, expression }];
-
-			if (quote) parser.eat(quote, true);
-		} else {
-			value = readAttributeValue(parser);
-		}
-	} else {
-		value = true;
-	}
+	const value = parser.eat('=')
+		? readAttributeValue(parser)
+		: true;
 
 	const end = parser.index;
 
@@ -415,21 +401,25 @@ function readAttribute(parser: Parser, uniqueNames: Set<string>) {
 			start,
 			end,
 			type,
-			name: directive_name
+			name: directive_name,
+			expression: value[0] && value[0].expression
 		};
 
-		if (type === 'Binding') {
-			directive.value = value[0] && value[0].expression;
-		} else {
-			directive.expression = value[0] && value[0].expression;
-		}
-
 		if (type === 'Transition') {
 			const direction = name.slice(0, colon_index);
 			directive.intro = direction === 'in' || direction === 'transition';
 			directive.outro = direction === 'out' || direction === 'transition';
 		}
 
+		if (!directive.expression && (type === 'Binding' || type === 'Class')) {
+			directive.expression = {
+				start: directive.start + colon_index + 1,
+				end: directive.end,
+				type: 'Identifier',
+				name: directive.name
+			};
+		}
+
 		return directive;
 	}
 
diff --git a/test/hydration/samples/binding-input/main.html b/test/hydration/samples/binding-input/main.html
index 12c7b9ea43..e521cf7f9e 100644
--- a/test/hydration/samples/binding-input/main.html
+++ b/test/hydration/samples/binding-input/main.html
@@ -1,2 +1,2 @@
-<input bind:value='name'>
+<input bind:value={name}>
 <p>Hello {name}!</p>
\ No newline at end of file
diff --git a/test/js/samples/bind-width-height/input.html b/test/js/samples/bind-width-height/input.html
index c48fe356d0..5c53d688ba 100644
--- a/test/js/samples/bind-width-height/input.html
+++ b/test/js/samples/bind-width-height/input.html
@@ -1,3 +1,3 @@
-<div bind:offsetWidth=w bind:offsetHeight=h>
+<div bind:offsetWidth={w} bind:offsetHeight={h}>
 	some content
 </div>
\ No newline at end of file
diff --git a/test/js/samples/input-without-blowback-guard/input.html b/test/js/samples/input-without-blowback-guard/input.html
index ae28ef4f7d..991c5e33ab 100644
--- a/test/js/samples/input-without-blowback-guard/input.html
+++ b/test/js/samples/input-without-blowback-guard/input.html
@@ -1 +1 @@
-<input type='checkbox' bind:checked='foo'>
\ No newline at end of file
+<input type='checkbox' bind:checked={foo}>
\ No newline at end of file
diff --git a/test/js/samples/window-binding-scroll/input.html b/test/js/samples/window-binding-scroll/input.html
index f2f6e2c91c..2dc1aeffeb 100644
--- a/test/js/samples/window-binding-scroll/input.html
+++ b/test/js/samples/window-binding-scroll/input.html
@@ -1,3 +1,3 @@
-<svelte:window bind:scrollY=y/>
+<svelte:window bind:scrollY={y}/>
 
 <p>scrolled to {y}</p>
\ No newline at end of file
diff --git a/test/parser/samples/binding/input.html b/test/parser/samples/binding/input.html
index 3af20a9ced..d0a0feab8d 100644
--- a/test/parser/samples/binding/input.html
+++ b/test/parser/samples/binding/input.html
@@ -1 +1 @@
-<input bind:value='name'>
\ No newline at end of file
+<input bind:value={name}>
\ No newline at end of file
diff --git a/test/parser/samples/error-binding-disabled/input.html b/test/parser/samples/error-binding-disabled/input.html
index 3af20a9ced..d0a0feab8d 100644
--- a/test/parser/samples/error-binding-disabled/input.html
+++ b/test/parser/samples/error-binding-disabled/input.html
@@ -1 +1 @@
-<input bind:value='name'>
\ No newline at end of file
+<input bind:value={name}>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-prefer-expression/main.html b/test/runtime/samples/attribute-prefer-expression/main.html
index 8c46350fa2..2dd12ded4f 100644
--- a/test/runtime/samples/attribute-prefer-expression/main.html
+++ b/test/runtime/samples/attribute-prefer-expression/main.html
@@ -1,2 +1,2 @@
-<input type='radio' bind:group='foo' value='{false}'>
-<input type='radio' bind:group='foo' value='{true}'>
\ No newline at end of file
+<input type='radio' bind:group={foo} value='{false}'>
+<input type='radio' bind:group={foo} value='{true}'>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html b/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html
index 1e32886de4..929dc42545 100644
--- a/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html
+++ b/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html
@@ -1,2 +1,2 @@
-<audio bind:currentTime='t' bind:duration='d' bind:paused bind:volume='v'
+<audio bind:currentTime={t} bind:duration={d} bind:paused bind:volume={v}
 	src='music.mp3'></audio>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-indirect/main.html b/test/runtime/samples/binding-indirect/main.html
index df37840b43..306a260880 100644
--- a/test/runtime/samples/binding-indirect/main.html
+++ b/test/runtime/samples/binding-indirect/main.html
@@ -1,4 +1,4 @@
-<select bind:value='selected'>
+<select bind:value={selected}>
 	{#each tasks as task}
 		<option value='{task}'>{task.description}</option>
 	{/each}
diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html
index 09a664d795..1eb5f04ccb 100644
--- a/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html
+++ b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html
@@ -1,13 +1,13 @@
 <label>
-	<input type="checkbox" value="{values[0]}" bind:group='selected' /> {values[0].name}
+	<input type="checkbox" value="{values[0]}" bind:group={selected} /> {values[0].name}
 </label>
 
 <label>
-	<input type="checkbox" value="{values[1]}" bind:group='selected' /> {values[1].name}
+	<input type="checkbox" value="{values[1]}" bind:group={selected} /> {values[1].name}
 </label>
 
 <label>
-	<input type="checkbox" value="{values[2]}" bind:group='selected' /> {values[2].name}
+	<input type="checkbox" value="{values[2]}" bind:group={selected} /> {values[2].name}
 </label>
 
 <p>{selected.map( function ( value ) { return value.name; }).join( ', ' ) }</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox-group/main.html b/test/runtime/samples/binding-input-checkbox-group/main.html
index 4637f48a99..bb9bb0abc3 100644
--- a/test/runtime/samples/binding-input-checkbox-group/main.html
+++ b/test/runtime/samples/binding-input-checkbox-group/main.html
@@ -1,6 +1,6 @@
 {#each values as value}
 	<label>
-		<input type="checkbox" value="{value}" bind:group='selected' /> {value.name}
+		<input type="checkbox" value="{value}" bind:group={selected} /> {value.name}
 	</label>
 {/each}
 
diff --git a/test/runtime/samples/binding-input-checkbox/main.html b/test/runtime/samples/binding-input-checkbox/main.html
index 2a5c3bbf8c..4adfcdf8b8 100644
--- a/test/runtime/samples/binding-input-checkbox/main.html
+++ b/test/runtime/samples/binding-input-checkbox/main.html
@@ -1,2 +1,2 @@
-<input type='checkbox' bind:checked='foo'>
+<input type='checkbox' bind:checked={foo}>
 <p>{foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-number/main.html b/test/runtime/samples/binding-input-number/main.html
index b10a7107bd..3e0edea1c5 100644
--- a/test/runtime/samples/binding-input-number/main.html
+++ b/test/runtime/samples/binding-input-number/main.html
@@ -1,2 +1,2 @@
-<input type='number' bind:value='count'>
+<input type='number' bind:value={count}>
 <p>{typeof count} {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-radio-group/main.html b/test/runtime/samples/binding-input-radio-group/main.html
index 8a5794ff01..cd13f1f3ae 100644
--- a/test/runtime/samples/binding-input-radio-group/main.html
+++ b/test/runtime/samples/binding-input-radio-group/main.html
@@ -1,6 +1,6 @@
 {#each values as value}
 	<label>
-		<input type="radio" value="{value}" bind:group='selected' /> {value.name}
+		<input type="radio" value="{value}" bind:group={selected} /> {value.name}
 	</label>
 {/each}
 
diff --git a/test/runtime/samples/binding-input-range-change/main.html b/test/runtime/samples/binding-input-range-change/main.html
index afa2446da1..bf74042e21 100644
--- a/test/runtime/samples/binding-input-range-change/main.html
+++ b/test/runtime/samples/binding-input-range-change/main.html
@@ -1,2 +1,2 @@
-<input type='range' bind:value='count'>
+<input type='range' bind:value={count}>
 <p>{typeof count} {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-range/main.html b/test/runtime/samples/binding-input-range/main.html
index afa2446da1..bf74042e21 100644
--- a/test/runtime/samples/binding-input-range/main.html
+++ b/test/runtime/samples/binding-input-range/main.html
@@ -1,2 +1,2 @@
-<input type='range' bind:value='count'>
+<input type='range' bind:value={count}>
 <p>{typeof count} {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-contextual/main.html b/test/runtime/samples/binding-input-text-contextual/main.html
index 085be21813..6b6b57a353 100644
--- a/test/runtime/samples/binding-input-text-contextual/main.html
+++ b/test/runtime/samples/binding-input-text-contextual/main.html
@@ -1,3 +1,3 @@
 {#each items as item}
-	<div><input bind:value='item'><p>{item}</p></div>
+	<div><input bind:value={item}><p>{item}</p></div>
 {/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text/main.html b/test/runtime/samples/binding-input-text/main.html
index d89284cb89..733af3474c 100644
--- a/test/runtime/samples/binding-input-text/main.html
+++ b/test/runtime/samples/binding-input-text/main.html
@@ -1,2 +1,2 @@
-<input bind:value='name'>
+<input bind:value={name}>
 <p>hello {name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-with-event/main.html b/test/runtime/samples/binding-input-with-event/main.html
index fd294c5029..8f7ed26f25 100644
--- a/test/runtime/samples/binding-input-with-event/main.html
+++ b/test/runtime/samples/binding-input-with-event/main.html
@@ -1 +1 @@
-<input bind:value='a' on:input='{() => b = 0}'>
\ No newline at end of file
+<input bind:value={a} on:input='{() => b = 0}'>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-implicit-option-value/main.html b/test/runtime/samples/binding-select-implicit-option-value/main.html
index 3fffa9256a..c743caebdb 100644
--- a/test/runtime/samples/binding-select-implicit-option-value/main.html
+++ b/test/runtime/samples/binding-select-implicit-option-value/main.html
@@ -1,4 +1,4 @@
-<select bind:value='foo'>
+<select bind:value={foo}>
 	{#each values as v}
 		<option>{v}</option>
 	{/each}
diff --git a/test/runtime/samples/binding-select-in-yield/main.html b/test/runtime/samples/binding-select-in-yield/main.html
index 24dd3d47e7..97528da19b 100644
--- a/test/runtime/samples/binding-select-in-yield/main.html
+++ b/test/runtime/samples/binding-select-in-yield/main.html
@@ -7,7 +7,7 @@
 
 <Modal ref:modal>
 	<span>{letter}</span>
-	<select bind:value='letter'>
+	<select bind:value={letter}>
 		{#each letters as letter}
 			<option value="{letter}">{letter}</option>
 		{/each}
diff --git a/test/runtime/samples/binding-select-initial-value-undefined/main.html b/test/runtime/samples/binding-select-initial-value-undefined/main.html
index 0f7f90fed7..1e4b70df6f 100644
--- a/test/runtime/samples/binding-select-initial-value-undefined/main.html
+++ b/test/runtime/samples/binding-select-initial-value-undefined/main.html
@@ -1,6 +1,6 @@
 <p>selected: {selected}</p>
 
-<select bind:value='selected'>
+<select bind:value={selected}>
 	<option>a</option>
 	<option>b</option>
 	<option>c</option>
diff --git a/test/runtime/samples/binding-select-initial-value/main.html b/test/runtime/samples/binding-select-initial-value/main.html
index 0f7f90fed7..1e4b70df6f 100644
--- a/test/runtime/samples/binding-select-initial-value/main.html
+++ b/test/runtime/samples/binding-select-initial-value/main.html
@@ -1,6 +1,6 @@
 <p>selected: {selected}</p>
 
-<select bind:value='selected'>
+<select bind:value={selected}>
 	<option>a</option>
 	<option>b</option>
 	<option>c</option>
diff --git a/test/runtime/samples/binding-select-late/main.html b/test/runtime/samples/binding-select-late/main.html
index 83a9381a3d..6c1d2973a2 100644
--- a/test/runtime/samples/binding-select-late/main.html
+++ b/test/runtime/samples/binding-select-late/main.html
@@ -1,4 +1,4 @@
-<select bind:value='selected'>
+<select bind:value={selected}>
 	{#each items as item}
 		<option>{item}</option>
 	{/each}
diff --git a/test/runtime/samples/binding-select-multiple/main.html b/test/runtime/samples/binding-select-multiple/main.html
index 4fcc4de029..e97c988c4c 100644
--- a/test/runtime/samples/binding-select-multiple/main.html
+++ b/test/runtime/samples/binding-select-multiple/main.html
@@ -1,4 +1,4 @@
-<select multiple bind:value='selected'>
+<select multiple bind:value={selected}>
 	<option>one</option>
 	<option>two</option>
 	<option>three</option>
diff --git a/test/runtime/samples/binding-select-optgroup/main.html b/test/runtime/samples/binding-select-optgroup/main.html
index c0df0cf8f6..0a4ef44eb0 100644
--- a/test/runtime/samples/binding-select-optgroup/main.html
+++ b/test/runtime/samples/binding-select-optgroup/main.html
@@ -1,6 +1,6 @@
 <h1>Hello {name}!</h1>
 
-<select bind:value="name">
+<select bind:value={name}>
 	<option value="Harry">Harry</option>
 	<optgroup label="Group">
 		<option value="World">World</option>
diff --git a/test/runtime/samples/binding-select/main.html b/test/runtime/samples/binding-select/main.html
index 690c2b3624..caa1a5b3a7 100644
--- a/test/runtime/samples/binding-select/main.html
+++ b/test/runtime/samples/binding-select/main.html
@@ -1,6 +1,6 @@
 <p>selected: {selected}</p>
 
-<select bind:value='selected'>
+<select bind:value={selected}>
 	<option>one</option>
 	<option>two</option>
 	<option>three</option>
diff --git a/test/runtime/samples/component-binding-blowback-b/main.html b/test/runtime/samples/component-binding-blowback-b/main.html
index 892686bc8d..b76e639d1d 100644
--- a/test/runtime/samples/component-binding-blowback-b/main.html
+++ b/test/runtime/samples/component-binding-blowback-b/main.html
@@ -1,6 +1,6 @@
 <script>
 	import Nested from './Nested.html';
-	
+
 	export let count;
 	export let idToValue = Object.create(null);
 
@@ -11,7 +11,7 @@
 	}
 </script>
 
-<input type='number' bind:value='count'>
+<input type='number' bind:value={count}>
 
 <ol>
 	{#each ids as id}
diff --git a/test/runtime/samples/component-binding-blowback-c/main.html b/test/runtime/samples/component-binding-blowback-c/main.html
index 111b6dc108..a6623fa334 100644
--- a/test/runtime/samples/component-binding-blowback-c/main.html
+++ b/test/runtime/samples/component-binding-blowback-c/main.html
@@ -12,7 +12,7 @@
 	}
 </script>
 
-<input type='number' bind:value='count'>
+<input type='number' bind:value={count}>
 
 <ol>
 	{#each ids as object (object.id)}
diff --git a/test/runtime/samples/component-binding-deep-b/ComponentSelector.html b/test/runtime/samples/component-binding-deep-b/ComponentSelector.html
index 513985e332..0edb702f10 100644
--- a/test/runtime/samples/component-binding-deep-b/ComponentSelector.html
+++ b/test/runtime/samples/component-binding-deep-b/ComponentSelector.html
@@ -1,4 +1,4 @@
-<select bind:value='selectedComponent'>
+<select bind:value={selectedComponent}>
 	{#each components as component}
 		<option value='{component}'>{component.name}.html</option>
 	{/each}
diff --git a/test/runtime/samples/component-binding-deep-b/Editor.html b/test/runtime/samples/component-binding-deep-b/Editor.html
index 34ed70114b..cd3b080a99 100644
--- a/test/runtime/samples/component-binding-deep-b/Editor.html
+++ b/test/runtime/samples/component-binding-deep-b/Editor.html
@@ -1 +1 @@
-<textarea bind:value='code'></textarea>
\ No newline at end of file
+<textarea bind:value={code}></textarea>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each-object/main.html b/test/runtime/samples/component-binding-each-object/main.html
index 913ad554f7..1efb284666 100644
--- a/test/runtime/samples/component-binding-each-object/main.html
+++ b/test/runtime/samples/component-binding-each-object/main.html
@@ -5,5 +5,5 @@
 </script>
 
 {#each a as x}
-	<Widget bind:value='x'/>
+	<Widget bind:value={x}/>
 {/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each/main.html b/test/runtime/samples/component-binding-each/main.html
index 42fcbd658d..bb03ad531d 100644
--- a/test/runtime/samples/component-binding-each/main.html
+++ b/test/runtime/samples/component-binding-each/main.html
@@ -5,7 +5,7 @@
 </script>
 
 {#each a as x}
-	<Widget bind:value='x'/>
+	<Widget bind:value={x}/>
 {/each}
 
 <p>{a.join(', ')}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child/main.html b/test/runtime/samples/component-binding-parent-supercedes-child/main.html
index 4f85c10c84..c874b270d0 100644
--- a/test/runtime/samples/component-binding-parent-supercedes-child/main.html
+++ b/test/runtime/samples/component-binding-parent-supercedes-child/main.html
@@ -4,5 +4,5 @@
 	export let x = 10;
 </script>
 
-<Counter bind:count='x'/>
+<Counter bind:count={x}/>
 <p>count: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding/main.html b/test/runtime/samples/component-binding/main.html
index bd97c1d183..5639d47eb1 100644
--- a/test/runtime/samples/component-binding/main.html
+++ b/test/runtime/samples/component-binding/main.html
@@ -4,5 +4,5 @@
 	export let x;
 </script>
 
-<Counter bind:count='x'/>
+<Counter bind:count={x}/>
 <p>count: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-component-refs/main.html b/test/runtime/samples/deconflict-component-refs/main.html
index 73a1af75c9..b1ef0bf2e3 100644
--- a/test/runtime/samples/deconflict-component-refs/main.html
+++ b/test/runtime/samples/deconflict-component-refs/main.html
@@ -2,7 +2,7 @@
 	{#each components as component}
 		<li>
 			{#if component.edit}
-				<input ref:name bind:value=component.name />
+				<input ref:name bind:value={component}.name />
 			{:else}
 				{component.name}
 			{/if}
diff --git a/test/runtime/samples/dev-warning-readonly-window-binding/main.html b/test/runtime/samples/dev-warning-readonly-window-binding/main.html
index 87b0403ee3..bd2d50d388 100644
--- a/test/runtime/samples/dev-warning-readonly-window-binding/main.html
+++ b/test/runtime/samples/dev-warning-readonly-window-binding/main.html
@@ -1 +1 @@
-<svelte:window bind:innerWidth='width'/>
\ No newline at end of file
+<svelte:window bind:innerWidth={width}/>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings/Bar.html b/test/runtime/samples/dynamic-component-bindings/Bar.html
index f609d76ebe..71e6fd8acc 100644
--- a/test/runtime/samples/dynamic-component-bindings/Bar.html
+++ b/test/runtime/samples/dynamic-component-bindings/Bar.html
@@ -1,2 +1,2 @@
 <p>bar</p>
-<input type='checkbox' bind:checked='z'>
\ No newline at end of file
+<input type='checkbox' bind:checked={z}>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings/Foo.html b/test/runtime/samples/dynamic-component-bindings/Foo.html
index cae76b0573..01faecfa49 100644
--- a/test/runtime/samples/dynamic-component-bindings/Foo.html
+++ b/test/runtime/samples/dynamic-component-bindings/Foo.html
@@ -1,2 +1,2 @@
 <p>foo</p>
-<input bind:value='y'>
\ No newline at end of file
+<input bind:value={y}>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-deconflict-name-context/main.html b/test/runtime/samples/each-block-deconflict-name-context/main.html
index 2e634cfc01..391e42ecd0 100644
--- a/test/runtime/samples/each-block-deconflict-name-context/main.html
+++ b/test/runtime/samples/each-block-deconflict-name-context/main.html
@@ -1,3 +1,3 @@
 {#each foo.bar as bar}
-	<input bind:value='bar'>
+	<input bind:value={bar}>
 {/each}
diff --git a/test/runtime/samples/each-block-destructured-object-binding/main.html b/test/runtime/samples/each-block-destructured-object-binding/main.html
index 049387bc3d..dcdd7c0f6b 100644
--- a/test/runtime/samples/each-block-destructured-object-binding/main.html
+++ b/test/runtime/samples/each-block-destructured-object-binding/main.html
@@ -1,5 +1,5 @@
 {#each people as { name: { first: f, last: l } } }
-	<input bind:value=f>
-	<input bind:value=l>
+	<input bind:value={f}>
+	<input bind:value={l}>
 	<p>{f} {l}</p>
 {/each}
diff --git a/test/runtime/samples/flush-before-bindings/main.html b/test/runtime/samples/flush-before-bindings/main.html
index a7afa99462..8d2428704f 100644
--- a/test/runtime/samples/flush-before-bindings/main.html
+++ b/test/runtime/samples/flush-before-bindings/main.html
@@ -15,4 +15,4 @@
 	});
 </script>
 
-<Nested bind:visibleThings="visibleThings" />
\ No newline at end of file
+<Nested bind:visibleThings={visibleThings} />
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-no-outro-else-with-outro/main.html b/test/runtime/samples/if-block-no-outro-else-with-outro/main.html
index d881addce0..2007bf2ea2 100644
--- a/test/runtime/samples/if-block-no-outro-else-with-outro/main.html
+++ b/test/runtime/samples/if-block-no-outro-else-with-outro/main.html
@@ -10,5 +10,5 @@
 {:else}
 	<Widget/>
 	<p>{x}</p>
-	<input type="text" bind:value=x />
+	<input type="text" bind:value={x} />
 {/if}
\ No newline at end of file
diff --git a/test/runtime/samples/observe-binding-ignores-unchanged/Nested.html b/test/runtime/samples/observe-binding-ignores-unchanged/Nested.html
index 8f7559a778..d116d67878 100644
--- a/test/runtime/samples/observe-binding-ignores-unchanged/Nested.html
+++ b/test/runtime/samples/observe-binding-ignores-unchanged/Nested.html
@@ -1 +1 @@
-<input type="number" bind:value="field1">
\ No newline at end of file
+<input type="number" bind:value={field1}>
\ No newline at end of file
diff --git a/test/runtime/samples/select-bind-array/main.html b/test/runtime/samples/select-bind-array/main.html
index 67c1dfdb91..a863eec89e 100644
--- a/test/runtime/samples/select-bind-array/main.html
+++ b/test/runtime/samples/select-bind-array/main.html
@@ -1,4 +1,4 @@
-<select bind:value="foo">
+<select bind:value={foo}>
 	{#each items as item}
 		<option value='{item.id}'>{item.id}</option>
 	{/each}
diff --git a/test/runtime/samples/select-change-handler/main.html b/test/runtime/samples/select-change-handler/main.html
index eef7dc3dfa..436752176a 100644
--- a/test/runtime/samples/select-change-handler/main.html
+++ b/test/runtime/samples/select-change-handler/main.html
@@ -8,7 +8,7 @@
 	}
 </script>
 
-<select bind:value="selected" on:change="{() => updateLastChangedTo(selected)}">
+<select bind:value={selected} on:change="{() => updateLastChangedTo(selected)}">
 	{#each options as option}
 		<option value="{option.id}">{option.id}</option>
 	{/each}
diff --git a/test/runtime/samples/spread-component-with-bind/main.html b/test/runtime/samples/spread-component-with-bind/main.html
index 7b63a385c4..e4c81624fd 100644
--- a/test/runtime/samples/spread-component-with-bind/main.html
+++ b/test/runtime/samples/spread-component-with-bind/main.html
@@ -5,4 +5,4 @@
 	export let x = 'foo';
 </script>
 
-<svelte:component this={Widget} {...props} bind:value="x" />
\ No newline at end of file
+<svelte:component this={Widget} {...props} bind:value={x} />
\ No newline at end of file
diff --git a/test/runtime/samples/window-binding-resize/main.html b/test/runtime/samples/window-binding-resize/main.html
index 54a1762eb8..e156772be7 100644
--- a/test/runtime/samples/window-binding-resize/main.html
+++ b/test/runtime/samples/window-binding-resize/main.html
@@ -1,3 +1,3 @@
-<svelte:window bind:innerWidth='width' bind:innerHeight='height'/>
+<svelte:window bind:innerWidth={width} bind:innerHeight={height}/>
 
 <div>{width}x{height}</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/bindings/main.html b/test/server-side-rendering/samples/bindings/main.html
index 20c43fc39c..c1ba2ed02a 100644
--- a/test/server-side-rendering/samples/bindings/main.html
+++ b/test/server-side-rendering/samples/bindings/main.html
@@ -2,4 +2,4 @@
 	export let foo = 'bar';
 </script>
 
-<input bind:value=foo >
\ No newline at end of file
+<input bind:value={foo} >
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/component-binding-renamed/main.html b/test/server-side-rendering/samples/component-binding-renamed/main.html
index 857c2acc65..3140dcd978 100644
--- a/test/server-side-rendering/samples/component-binding-renamed/main.html
+++ b/test/server-side-rendering/samples/component-binding-renamed/main.html
@@ -5,4 +5,4 @@
 	export let x;
 </script>
 
-{y}<Foo bind:y='x'/>{y}
+{y}<Foo bind:y={x}/>{y}
diff --git a/test/validator/samples/binding-input-checked/input.html b/test/validator/samples/binding-input-checked/input.html
index 9990d3c596..13fc0b0faa 100644
--- a/test/validator/samples/binding-input-checked/input.html
+++ b/test/validator/samples/binding-input-checked/input.html
@@ -1 +1 @@
-<input bind:checked='foo'>
\ No newline at end of file
+<input bind:checked={foo}>
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-type-boolean/input.html b/test/validator/samples/binding-input-type-boolean/input.html
index 6277fd7484..2b3ae3263d 100644
--- a/test/validator/samples/binding-input-type-boolean/input.html
+++ b/test/validator/samples/binding-input-type-boolean/input.html
@@ -1 +1 @@
-<input bind:value='foo' type>
\ No newline at end of file
+<input bind:value={foo} type>
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-type-dynamic/input.html b/test/validator/samples/binding-input-type-dynamic/input.html
index ae6223e05a..9ead3ba20f 100644
--- a/test/validator/samples/binding-input-type-dynamic/input.html
+++ b/test/validator/samples/binding-input-type-dynamic/input.html
@@ -1 +1 @@
-<input bind:value='foo' type='{inputType}'>
\ No newline at end of file
+<input bind:value={foo} type='{inputType}'>
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid-innerwidth/input.html b/test/validator/samples/window-binding-invalid-innerwidth/input.html
index 13c3d3ec97..72b5e36cf1 100644
--- a/test/validator/samples/window-binding-invalid-innerwidth/input.html
+++ b/test/validator/samples/window-binding-invalid-innerwidth/input.html
@@ -1 +1 @@
-<svelte:window bind:innerwidth='w'/>
\ No newline at end of file
+<svelte:window bind:innerwidth={w}/>
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid-width/input.html b/test/validator/samples/window-binding-invalid-width/input.html
index f464dd0b6f..88dcd5aa02 100644
--- a/test/validator/samples/window-binding-invalid-width/input.html
+++ b/test/validator/samples/window-binding-invalid-width/input.html
@@ -1 +1 @@
-<svelte:window bind:width='w'/>
\ No newline at end of file
+<svelte:window bind:width={w}/>
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid/input.html b/test/validator/samples/window-binding-invalid/input.html
index 439a198126..6ee989b7f3 100644
--- a/test/validator/samples/window-binding-invalid/input.html
+++ b/test/validator/samples/window-binding-invalid/input.html
@@ -1 +1 @@
-<svelte:window bind:potato='foo'/>
\ No newline at end of file
+<svelte:window bind:potato={foo}/>
\ No newline at end of file