From 837d248257d1c13c8c93e2663e4206dae3c5bba8 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 27 Oct 2018 16:37:50 -0400
Subject: [PATCH] render server bindings

---
 src/compile/render-ssr/handlers/Element.ts    | 10 +++
 test/runtime/index.js                         |  2 +-
 .../_config.js                                | 23 +++++-
 .../samples/binding-input-checkbox/_config.js | 10 ++-
 .../samples/binding-input-number/_config.js   | 41 ++++++-----
 .../binding-input-range-change/_config.js     | 33 +++++----
 .../samples/binding-input-range/_config.js    | 33 +++++----
 .../binding-input-text-contextual/_config.js  | 72 ++++++++++++++-----
 .../_config.js                                | 33 +++++----
 .../_config.js                                | 41 ++++++-----
 .../_config.js                                | 38 ++++++----
 .../_config.js                                | 49 +++++++------
 .../_config.js                                | 44 ++++++++----
 .../binding-input-text-deep/_config.js        | 38 ++++++----
 .../samples/binding-input-text/_config.js     |  5 ++
 .../_config.js                                | 10 +++
 .../binding-select-initial-value/_config.js   | 26 +++++--
 .../runtime/samples/binding-select/_config.js | 36 ++++++----
 .../samples/binding-textarea/_config.js       | 29 ++++----
 .../samples/component-binding-deep/_config.js | 23 +++---
 .../component-binding-each-nested/_config.js  |  7 ++
 .../samples/component-binding-each/_config.js |  7 ++
 .../deconflict-component-refs/_config.js      |  8 +++
 .../_config.js                                |  6 ++
 .../_config.js                                |  6 ++
 .../_config.js                                | 17 +++++
 .../_config.js                                | 18 ++++-
 .../_config.js                                |  8 ++-
 .../spread-component-with-bind/_config.js     |  5 ++
 test/runtime/samples/store-binding/_config.js |  5 ++
 .../store-component-binding-deep/_config.js   |  5 ++
 .../store-component-binding-each/_config.js   | 15 +++-
 .../store-component-binding/_config.js        |  5 ++
 test/server-side-rendering/index.js           |  4 +-
 .../samples/bindings/_expected.html           |  1 +
 .../samples/bindings/main.html                |  8 +++
 36 files changed, 520 insertions(+), 201 deletions(-)
 create mode 100644 test/server-side-rendering/samples/bindings/_expected.html
 create mode 100644 test/server-side-rendering/samples/bindings/main.html

diff --git a/src/compile/render-ssr/handlers/Element.ts b/src/compile/render-ssr/handlers/Element.ts
index 5aec6fb6b5..138203f539 100644
--- a/src/compile/render-ssr/handlers/Element.ts
+++ b/src/compile/render-ssr/handlers/Element.ts
@@ -112,6 +112,16 @@ export default function(node, renderer, options) {
 		});
 	}
 
+	node.bindings.forEach(binding => {
+		const { name, value: { snippet } } = binding;
+
+		if (name === 'group') {
+			// TODO server-render group bindings
+		} else {
+			openingTag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + JSON.stringify(v))) : "")(' + snippet + ')}';
+		}
+	});
+
 	if (addClassAttribute) {
 		openingTag += `\${((v) => v ? ' class="' + v + '"' : '')([${classExpr}].join(' ').trim())}`;
 	}
diff --git a/test/runtime/index.js b/test/runtime/index.js
index c16d5164dd..690bf8c9ab 100644
--- a/test/runtime/index.js
+++ b/test/runtime/index.js
@@ -165,7 +165,7 @@ describe("runtime", () => {
 						});
 					} else {
 						component.destroy();
-						assert.equal(target.innerHTML, "");
+						assert.htmlEqual(target.innerHTML, "");
 					}
 				})
 				.catch(err => {
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 81a1b4fdc1..491ae7f834 100644
--- a/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
+++ b/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
@@ -8,7 +8,28 @@ export default {
 	},
 
 	html: `
-		<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
+		<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>1 completed</p>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input type="checkbox" checked><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>three</p>
+		</div>
 		<p>1 completed</p>
 	`,
 
diff --git a/test/runtime/samples/binding-input-checkbox/_config.js b/test/runtime/samples/binding-input-checkbox/_config.js
index ba943e5d77..c76f36e46b 100644
--- a/test/runtime/samples/binding-input-checkbox/_config.js
+++ b/test/runtime/samples/binding-input-checkbox/_config.js
@@ -3,7 +3,15 @@ export default {
 		foo: true
 	},
 
-	html: `<input type="checkbox">\n<p>true</p>`,
+	html: `
+		<input type="checkbox">
+		<p>true</p>
+	`,
+
+	ssrHtml: `
+		<input type="checkbox" checked>
+		<p>true</p>
+	`,
 
 	test ( assert, component, target, window ) {
 		const input = target.querySelector( 'input' );
diff --git a/test/runtime/samples/binding-input-number/_config.js b/test/runtime/samples/binding-input-number/_config.js
index 66e0df8a35..5563a9da03 100644
--- a/test/runtime/samples/binding-input-number/_config.js
+++ b/test/runtime/samples/binding-input-number/_config.js
@@ -1,43 +1,48 @@
 export default {
 	data: {
-		count: 42
+		count: 42,
 	},
 
 	html: `
-		<input type='number'>
+		<input type=number>
 		<p>number 42</p>
 	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
-		assert.equal( input.value, '42' );
+	ssrHtml: `
+		<input type=number value=42>
+		<p>number 42</p>
+	`,
 
-		const event = new window.Event( 'input' );
+	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 );
+		input.dispatchEvent(event);
 
-		assert.equal( component.get().count, 43 );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(component.get().count, 43);
+		assert.htmlEqual(target.innerHTML, `
 			<input type='number'>
 			<p>number 43</p>
-		` );
+		`);
 
 		component.set({ count: 44 });
-		assert.equal( input.value, '44' );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(input.value, '44');
+		assert.htmlEqual(target.innerHTML, `
 			<input type='number'>
 			<p>number 44</p>
-		` );
+		`);
 
 		// empty string should be treated as undefined
 		input.value = '';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.equal( component.get().count, undefined );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(component.get().count, undefined);
+		assert.htmlEqual(target.innerHTML, `
 			<input type='number'>
 			<p>undefined undefined</p>
-		` );
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-range-change/_config.js b/test/runtime/samples/binding-input-range-change/_config.js
index b76a8cffb4..68b304b2ef 100644
--- a/test/runtime/samples/binding-input-range-change/_config.js
+++ b/test/runtime/samples/binding-input-range-change/_config.js
@@ -1,33 +1,38 @@
 export default {
 	data: {
-		count: 42
+		count: 42,
 	},
 
 	html: `
-		<input type='range'>
+		<input type=range>
 		<p>number 42</p>
 	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
-		assert.equal( input.value, '42' );
+	ssrHtml: `
+		<input type=range value=42>
+		<p>number 42</p>
+	`,
 
-		const event = new window.Event( 'change' );
+	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 );
+		input.dispatchEvent(event);
 
-		assert.equal( component.get().count, 43 );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(component.get().count, 43);
+		assert.htmlEqual(target.innerHTML, `
 			<input type='range'>
 			<p>number 43</p>
-		` );
+		`);
 
 		component.set({ count: 44 });
-		assert.equal( input.value, '44' );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(input.value, '44');
+		assert.htmlEqual(target.innerHTML, `
 			<input type='range'>
 			<p>number 44</p>
-		` );
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-range/_config.js b/test/runtime/samples/binding-input-range/_config.js
index 15c602e7f4..399ac72aa1 100644
--- a/test/runtime/samples/binding-input-range/_config.js
+++ b/test/runtime/samples/binding-input-range/_config.js
@@ -1,33 +1,38 @@
 export default {
 	data: {
-		count: 42
+		count: 42,
 	},
 
 	html: `
-		<input type='range'>
+		<input type=range>
 		<p>number 42</p>
 	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
-		assert.equal( input.value, '42' );
+	ssrHtml: `
+		<input type=range value=42>
+		<p>number 42</p>
+	`,
 
-		const event = new window.Event( 'input' );
+	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 );
+		input.dispatchEvent(event);
 
-		assert.equal( component.get().count, 43 );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(component.get().count, 43);
+		assert.htmlEqual(target.innerHTML, `
 			<input type='range'>
 			<p>number 43</p>
-		` );
+		`);
 
 		component.set({ count: 44 });
-		assert.equal( input.value, '44' );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(input.value, '44');
+		assert.htmlEqual(target.innerHTML, `
 			<input type='range'>
 			<p>number 44</p>
-		` );
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text-contextual/_config.js b/test/runtime/samples/binding-input-text-contextual/_config.js
index a8949510d7..77b370324b 100644
--- a/test/runtime/samples/binding-input-text-contextual/_config.js
+++ b/test/runtime/samples/binding-input-text-contextual/_config.js
@@ -1,29 +1,69 @@
 export default {
 	data: {
-		items: [
-			'one',
-			'two',
-			'three'
-		]
+		items: ['one', 'two', 'three'],
 	},
-	html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
-	test ( assert, component, target, window ) {
-		const inputs = [ ...target.querySelectorAll( 'input' ) ];
+
+	html: `
+		<div>
+			<input><p>one</p>
+		</div>
+		<div>
+			<input><p>two</p>
+		</div>
+		<div>
+			<input><p>three</p>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input value=one><p>one</p>
+		</div>
+		<div>
+			<input value=two><p>two</p>
+		</div>
+		<div>
+			<input value=three><p>three</p>
+		</div>
+	`,
+
+	test(assert, component, target, window) {
+		const inputs = [...target.querySelectorAll('input')];
 		const items = component.get().items;
-		const event = new window.Event( 'input' );
+		const event = new window.Event('input');
 
-		assert.equal( inputs[0].value, 'one' );
+		assert.equal(inputs[0].value, 'one');
 
 		inputs[1].value = 'four';
-		inputs[1].dispatchEvent( event );
+		inputs[1].dispatchEvent(event);
 
-		assert.equal( items[1], 'four' );
-		assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
+		assert.equal(items[1], 'four');
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input><p>one</p>
+			</div>
+			<div>
+				<input><p>four</p>
+			</div>
+			<div>
+				<input><p>three</p>
+			</div>
+		`);
 
 		items[2] = 'five';
 
 		component.set({ items });
-		assert.equal( inputs[2].value, 'five' );
-		assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
-	}
+		assert.equal(inputs[2].value, 'five');
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input><p>one</p>
+			</div>
+			<div>
+				<input><p>four</p>
+			</div>
+			<div>
+				<input><p>five</p>
+			</div>
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text-deconflicted/_config.js b/test/runtime/samples/binding-input-text-deconflicted/_config.js
index 49007dc883..58c2034c49 100644
--- a/test/runtime/samples/binding-input-text-deconflicted/_config.js
+++ b/test/runtime/samples/binding-input-text-deconflicted/_config.js
@@ -1,8 +1,8 @@
 export default {
 	data: {
 		component: {
-			name: 'world'
-		}
+			name: 'world',
+		},
 	},
 
 	html: `
@@ -10,26 +10,31 @@ export default {
 		<input>
 	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
-		assert.equal( input.value, 'world' );
+	ssrHtml: `
+		<h1>Hello world!</h1>
+		<input value=world>
+	`,
 
-		const event = new window.Event( 'input' );
+	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 );
+		input.dispatchEvent(event);
 
-		assert.equal( input.value, 'everybody' );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(input.value, 'everybody');
+		assert.htmlEqual(target.innerHTML, `
 			<h1>Hello everybody!</h1>
 			<input>
-		` );
+		`);
 
 		component.set({ component: { name: 'goodbye' } });
-		assert.equal( input.value, 'goodbye' );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(input.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
 			<h1>Hello goodbye!</h1>
 			<input>
-		` );
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js b/test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
index de74cba3c4..9656d5e1d6 100644
--- a/test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
+++ b/test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
@@ -4,8 +4,8 @@ export default {
 		obj: {
 			foo: 'a',
 			bar: 'b',
-			baz: 'c'
-		}
+			baz: 'c',
+		},
 	},
 
 	html: `
@@ -13,43 +13,48 @@ export default {
 		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
 	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
-		const event = new window.Event( 'input' );
+	ssrHtml: `
+		<input value=b>
+		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
+	`,
 
-		assert.equal( input.value, 'b' );
+	test(assert, component, target, window) {
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		assert.equal(input.value, 'b');
 
 		// edit bar
 		input.value = 'e';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.htmlEqual( target.innerHTML, `
+		assert.htmlEqual(target.innerHTML, `
 			<input>
 			<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
-		` );
+		`);
 
 		// edit baz
 		component.set({ prop: 'baz' });
-		assert.equal( input.value, 'c' );
+		assert.equal(input.value, 'c');
 
 		input.value = 'f';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.htmlEqual( target.innerHTML, `
+		assert.htmlEqual(target.innerHTML, `
 			<input>
 			<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
-		` );
+		`);
 
 		// edit foo
 		component.set({ prop: 'foo' });
-		assert.equal( input.value, 'a' );
+		assert.equal(input.value, 'a');
 
 		input.value = 'd';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.htmlEqual( target.innerHTML, `
+		assert.htmlEqual(target.innerHTML, `
 			<input>
 			<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
-		` );
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text-deep-computed/_config.js b/test/runtime/samples/binding-input-text-deep-computed/_config.js
index 33cc605a61..3f314197b8 100644
--- a/test/runtime/samples/binding-input-text-deep-computed/_config.js
+++ b/test/runtime/samples/binding-input-text-deep-computed/_config.js
@@ -2,29 +2,43 @@ export default {
 	data: {
 		prop: 'name',
 		user: {
-			name: 'alice'
-		}
+			name: 'alice',
+		},
 	},
 
-	html: `<input>\n<p>hello alice</p>`,
+	html: `
+		<input>
+		<p>hello alice</p>
+	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
+	ssrHtml: `
+		<input value=alice>
+		<p>hello alice</p>
+	`,
 
-		assert.equal( input.value, 'alice' );
+	test(assert, component, target, window) {
+		const input = target.querySelector('input');
 
-		const event = new window.Event( 'input' );
+		assert.equal(input.value, 'alice');
+
+		const event = new window.Event('input');
 
 		input.value = 'bob';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello bob</p>
+		`);
 
 		const user = component.get().user;
 		user.name = 'carol';
 
 		component.set({ user });
-		assert.equal( input.value, 'carol' );
-		assert.equal( target.innerHTML, `<input>\n<p>hello carol</p>` );
-	}
+		assert.equal(input.value, 'carol');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello carol</p>
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js b/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
index 5a16a691bf..f6401134c2 100644
--- a/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
+++ b/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
@@ -1,11 +1,13 @@
 export default {
 	data: {
 		prop: 'bar',
-		objects: [{
-			foo: 'a',
-			bar: 'b',
-			baz: 'c'
-		}]
+		objects: [
+			{
+				foo: 'a',
+				bar: 'b',
+				baz: 'c',
+			},
+		],
 	},
 
 	html: `
@@ -13,43 +15,48 @@ export default {
 		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
 	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
-		const event = new window.Event( 'input' );
+	ssrHtml: `
+		<input value=b>
+		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
+	`,
 
-		assert.equal( input.value, 'b' );
+	test(assert, component, target, window) {
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		assert.equal(input.value, 'b');
 
 		// edit bar
 		input.value = 'e';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.htmlEqual( target.innerHTML, `
+		assert.htmlEqual(target.innerHTML, `
 			<input>
 			<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
-		` );
+		`);
 
 		// edit baz
 		component.set({ prop: 'baz' });
-		assert.equal( input.value, 'c' );
+		assert.equal(input.value, 'c');
 
 		input.value = 'f';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.htmlEqual( target.innerHTML, `
+		assert.htmlEqual(target.innerHTML, `
 			<input>
 			<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
-		` );
+		`);
 
 		// edit foo
 		component.set({ prop: 'foo' });
-		assert.equal( input.value, 'a' );
+		assert.equal(input.value, 'a');
 
 		input.value = 'd';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.htmlEqual( target.innerHTML, `
+		assert.htmlEqual(target.innerHTML, `
 			<input>
 			<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
-		` );
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text-deep-contextual/_config.js b/test/runtime/samples/binding-input-text-deep-contextual/_config.js
index 8cf72df956..0ca5c10e2c 100644
--- a/test/runtime/samples/binding-input-text-deep-contextual/_config.js
+++ b/test/runtime/samples/binding-input-text-deep-contextual/_config.js
@@ -3,27 +3,47 @@ export default {
 		items: [
 			{ description: 'one' },
 			{ description: 'two' },
-			{ description: 'three' }
-		]
+			{ description: 'three' },
+		],
 	},
-	html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
-	test ( assert, component, target, window ) {
-		const inputs = [ ...target.querySelectorAll( 'input' ) ];
 
-		assert.equal( inputs[0].value, 'one' );
+	html: `
+		<div><input><p>one</p></div>
+		<div><input><p>two</p></div>
+		<div><input><p>three</p></div>
+	`,
 
-		const event = new window.Event( 'input' );
+	ssrHtml: `
+		<div><input value=one><p>one</p></div>
+		<div><input value=two><p>two</p></div>
+		<div><input value=three><p>three</p></div>
+	`,
+
+	test(assert, component, target, window) {
+		const inputs = [...target.querySelectorAll('input')];
+
+		assert.equal(inputs[0].value, 'one');
+
+		const event = new window.Event('input');
 
 		inputs[1].value = 'four';
-		inputs[1].dispatchEvent( event );
+		inputs[1].dispatchEvent(event);
 
-		assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
+		assert.htmlEqual(target.innerHTML, `
+			<div><input><p>one</p></div>
+			<div><input><p>four</p></div>
+			<div><input><p>three</p></div>
+		`);
 
 		const items = component.get().items;
 		items[2].description = 'five';
 
 		component.set({ items });
-		assert.equal( inputs[2].value, 'five' );
-		assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
-	}
+		assert.equal(inputs[2].value, 'five');
+		assert.htmlEqual(target.innerHTML, `
+			<div><input><p>one</p></div>
+			<div><input><p>four</p></div>
+			<div><input><p>five</p></div>
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text-deep/_config.js b/test/runtime/samples/binding-input-text-deep/_config.js
index f1abe383a6..886ed528e5 100644
--- a/test/runtime/samples/binding-input-text-deep/_config.js
+++ b/test/runtime/samples/binding-input-text-deep/_config.js
@@ -1,29 +1,43 @@
 export default {
 	data: {
 		user: {
-			name: 'alice'
-		}
+			name: 'alice',
+		},
 	},
 
-	html: `<input>\n<p>hello alice</p>`,
+	html: `
+		<input>
+		<p>hello alice</p>
+	`,
 
-	test ( assert, component, target, window ) {
-		const input = target.querySelector( 'input' );
+	ssrHtml: `
+		<input value=alice>
+		<p>hello alice</p>
+	`,
 
-		assert.equal( input.value, 'alice' );
+	test(assert, component, target, window) {
+		const input = target.querySelector('input');
 
-		const event = new window.Event( 'input' );
+		assert.equal(input.value, 'alice');
+
+		const event = new window.Event('input');
 
 		input.value = 'bob';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello bob</p>
+		`);
 
 		const user = component.get().user;
 		user.name = 'carol';
 
 		component.set({ user });
-		assert.equal( input.value, 'carol' );
-		assert.equal( target.innerHTML, `<input>\n<p>hello carol</p>` );
-	}
+		assert.equal(input.value, 'carol');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello carol</p>
+		`);
+	},
 };
diff --git a/test/runtime/samples/binding-input-text/_config.js b/test/runtime/samples/binding-input-text/_config.js
index 2c54fc8c32..c7c53e3fe9 100644
--- a/test/runtime/samples/binding-input-text/_config.js
+++ b/test/runtime/samples/binding-input-text/_config.js
@@ -8,6 +8,11 @@ export default {
 		<p>hello world</p>
 	`,
 
+	ssrHtml: `
+		<input value="world">
+		<p>hello world</p>
+	`,
+
 	test(assert, component, target, window) {
 		const input = target.querySelector('input');
 		assert.equal(input.value, 'world');
diff --git a/test/runtime/samples/binding-select-implicit-option-value/_config.js b/test/runtime/samples/binding-select-implicit-option-value/_config.js
index 1ab8de20aa..3a5098b76d 100644
--- a/test/runtime/samples/binding-select-implicit-option-value/_config.js
+++ b/test/runtime/samples/binding-select-implicit-option-value/_config.js
@@ -14,6 +14,16 @@ export default {
 		<p>foo: 2</p>
 	`,
 
+	ssrHtml: `
+		<select value=2>
+			<option value='1'>1</option>
+			<option value='2'>2</option>
+			<option value='3'>3</option>
+		</select>
+
+		<p>foo: 2</p>
+	`,
+
 	test(assert, component, target, window) {
 		const select = target.querySelector('select');
 		const options = [...target.querySelectorAll('option')];
diff --git a/test/runtime/samples/binding-select-initial-value/_config.js b/test/runtime/samples/binding-select-initial-value/_config.js
index 7338af165f..4f25aec6e7 100644
--- a/test/runtime/samples/binding-select-initial-value/_config.js
+++ b/test/runtime/samples/binding-select-initial-value/_config.js
@@ -11,17 +11,29 @@ export default {
 		<p>selected: b</p>
 	`,
 
+	ssrHtml: `
+		<p>selected: b</p>
+
+		<select value=b>
+			<option value='a'>a</option>
+			<option value='b'>b</option>
+			<option value='c'>c</option>
+		</select>
+
+		<p>selected: b</p>
+	`,
+
 	data: {
-		selected: 'b'
+		selected: 'b',
 	},
 
-	test ( assert, component, target ) {
-		const select = target.querySelector( 'select' );
-		const options = [ ...target.querySelectorAll( 'option' ) ];
+	test(assert, component, target) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
 
-		assert.equal( select.value, 'b' );
-		assert.ok( options[1].selected );
+		assert.equal(select.value, 'b');
+		assert.ok(options[1].selected);
 
 		component.destroy();
-	}
+	},
 };
diff --git a/test/runtime/samples/binding-select/_config.js b/test/runtime/samples/binding-select/_config.js
index f40f51a6f0..7b81425266 100644
--- a/test/runtime/samples/binding-select/_config.js
+++ b/test/runtime/samples/binding-select/_config.js
@@ -11,24 +11,36 @@ export default {
 		<p>selected: one</p>
 	`,
 
+	ssrHtml: `
+		<p>selected: one</p>
+
+		<select value=one>
+			<option value='one'>one</option>
+			<option value='two'>two</option>
+			<option value='three'>three</option>
+		</select>
+
+		<p>selected: one</p>
+	`,
+
 	data: {
-		selected: 'one'
+		selected: 'one',
 	},
 
-	test ( assert, component, target, window ) {
-		const select = target.querySelector( 'select' );
-		const options = [ ...target.querySelectorAll( 'option' ) ];
+	test(assert, component, target, window) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
 
-		assert.deepEqual( options, select.options );
-		assert.equal( component.get().selected, 'one' );
+		assert.deepEqual(options, select.options);
+		assert.equal(component.get().selected, 'one');
 
-		const change = new window.Event( 'change' );
+		const change = new window.Event('change');
 
 		options[1].selected = true;
-		select.dispatchEvent( change );
+		select.dispatchEvent(change);
 
-		assert.equal( component.get().selected, 'two' );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(component.get().selected, 'two');
+		assert.htmlEqual(target.innerHTML, `
 			<p>selected: two</p>
 
 			<select>
@@ -38,8 +50,8 @@ export default {
 			</select>
 
 			<p>selected: two</p>
-		` );
+		`);
 
 		component.set({ selected: 'three' });
-	}
+	},
 };
diff --git a/test/runtime/samples/binding-textarea/_config.js b/test/runtime/samples/binding-textarea/_config.js
index 3ba2735c90..742c05e4f5 100644
--- a/test/runtime/samples/binding-textarea/_config.js
+++ b/test/runtime/samples/binding-textarea/_config.js
@@ -1,6 +1,6 @@
 export default {
 	data: {
-		value: 'some text'
+		value: 'some text',
 	},
 
 	html: `
@@ -8,25 +8,30 @@ export default {
 		<p>some text</p>
 	`,
 
-	test ( assert, component, target, window ) {
-		const textarea = target.querySelector( 'textarea' );
-		assert.equal( textarea.value, 'some text' );
+	ssrHtml: `
+		<textarea value="some text"></textarea>
+		<p>some text</p>
+	`,
 
-		const event = new window.Event( 'input' );
+	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 );
+		textarea.dispatchEvent(event);
 
-		assert.htmlEqual( target.innerHTML, `
+		assert.htmlEqual(target.innerHTML, `
 			<textarea></textarea>
 			<p>hello</p>
-		` );
+		`);
 
 		component.set({ value: 'goodbye' });
-		assert.equal( textarea.value, 'goodbye' );
-		assert.htmlEqual( target.innerHTML, `
+		assert.equal(textarea.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
 			<textarea></textarea>
 			<p>goodbye</p>
-		` );
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/component-binding-deep/_config.js b/test/runtime/samples/component-binding-deep/_config.js
index 65591dc24d..4538d8a126 100644
--- a/test/runtime/samples/component-binding-deep/_config.js
+++ b/test/runtime/samples/component-binding-deep/_config.js
@@ -4,19 +4,22 @@ export default {
 		<p>foo</p>
 	`,
 
-	test ( assert, component, target, window ) {
-		const event = new window.MouseEvent( 'input' );
-		const input = target.querySelector( 'input' );
+	ssrHtml: `
+		<input value=foo>
+		<p>foo</p>
+	`,
+
+	test(assert, component, target, window) {
+		const event = new window.MouseEvent('input');
+		const input = target.querySelector('input');
 
 		input.value = 'blah';
-		input.dispatchEvent( event );
+		input.dispatchEvent(event);
 
-		assert.deepEqual( component.get().deep, { name: 'blah' } );
-		assert.htmlEqual( target.innerHTML, `
+		assert.deepEqual(component.get().deep, { name: 'blah' });
+		assert.htmlEqual(target.innerHTML, `
 			<input>
 			<p>blah</p>
-		` );
-
-		component.destroy();
-	}
+		`);
+	},
 };
diff --git a/test/runtime/samples/component-binding-each-nested/_config.js b/test/runtime/samples/component-binding-each-nested/_config.js
index 83bd81dbcb..d160a03b1d 100644
--- a/test/runtime/samples/component-binding-each-nested/_config.js
+++ b/test/runtime/samples/component-binding-each-nested/_config.js
@@ -4,6 +4,13 @@ export default {
 		<p>foo, bar, baz</p>
 	`,
 
+	ssrHtml: `
+		<input value=foo>
+		<input value=bar>
+		<input value=baz>
+		<p>foo, bar, baz</p>
+	`,
+
 	test ( assert, component, target, window ) {
 		const event = new window.MouseEvent( 'input' );
 		const inputs = target.querySelectorAll( 'input' );
diff --git a/test/runtime/samples/component-binding-each/_config.js b/test/runtime/samples/component-binding-each/_config.js
index 4ab071a286..cdcd03e756 100644
--- a/test/runtime/samples/component-binding-each/_config.js
+++ b/test/runtime/samples/component-binding-each/_config.js
@@ -4,6 +4,13 @@ export default {
 		<p>foo, bar, baz</p>
 	`,
 
+	ssrHtml: `
+		<input value=foo>
+		<input value=bar>
+		<input value=baz>
+		<p>foo, bar, baz</p>
+	`,
+
 	test ( assert, component, target, window ) {
 		const event = new window.MouseEvent( 'input' );
 		const inputs = target.querySelectorAll( 'input' );
diff --git a/test/runtime/samples/deconflict-component-refs/_config.js b/test/runtime/samples/deconflict-component-refs/_config.js
index 213abd245c..45f01e43e0 100644
--- a/test/runtime/samples/deconflict-component-refs/_config.js
+++ b/test/runtime/samples/deconflict-component-refs/_config.js
@@ -7,6 +7,14 @@ export default {
 		</ul>
 	`,
 
+	ssrHtml: `
+		<ul>
+			<li><input value=foo></li>
+			<li>bar</li>
+			<li>baz</li>
+		</ul>
+	`,
+
 	data: {
 		components: [
 			{ name: 'foo', edit: true },
diff --git a/test/runtime/samples/each-block-deconflict-name-context/_config.js b/test/runtime/samples/each-block-deconflict-name-context/_config.js
index c4b9deb32e..86abd4ef39 100644
--- a/test/runtime/samples/each-block-deconflict-name-context/_config.js
+++ b/test/runtime/samples/each-block-deconflict-name-context/_config.js
@@ -11,6 +11,12 @@ export default {
 		<input>
 	`,
 
+	ssrHtml: `
+		<input value=x>
+		<input value=y>
+		<input value=z>
+	`,
+
 	test(assert, component, target, window) {
 		const inputs = target.querySelectorAll('input');
 
diff --git a/test/runtime/samples/each-block-destructured-object-binding/_config.js b/test/runtime/samples/each-block-destructured-object-binding/_config.js
index 42fba9d8b8..52b23c8499 100644
--- a/test/runtime/samples/each-block-destructured-object-binding/_config.js
+++ b/test/runtime/samples/each-block-destructured-object-binding/_config.js
@@ -9,6 +9,12 @@ export default {
 		<p>Doctor Who</p>
 	`,
 
+	ssrHtml: `
+		<input value=Doctor>
+		<input value=Who>
+		<p>Doctor Who</p>
+	`,
+
 	test(assert, component, target, window) {
 		const inputs = target.querySelectorAll('input');
 
diff --git a/test/runtime/samples/globals-not-overwritten-by-bindings/_config.js b/test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
index cf15f47d9d..4965976df0 100644
--- a/test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
+++ b/test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
@@ -16,6 +16,23 @@ export default {
 		</div>
 	`,
 
+	ssrHtml: `
+		<div class="todo done">
+			<input type="checkbox" checked>
+			<input type="text" value="Buy some milk">
+		</div>
+
+		<div class="todo done">
+			<input type="checkbox" checked>
+			<input type="text" value="Do the laundry">
+		</div>
+
+		<div class="todo ">
+			<input type="checkbox">
+			<input type="text" value="Find life's true purpose">
+		</div>
+	`,
+
 	data: {
 		todos: {
 			first: {
diff --git a/test/runtime/samples/if-block-no-outro-else-with-outro/_config.js b/test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
index 1e8ec0a9fa..60adf28e39 100644
--- a/test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
+++ b/test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
@@ -1,10 +1,24 @@
 export default {
 	nestedTransitions: true,
 
-	html: '<div>A wild component appears</div><p>x</p><input type="text">',
+	html: `
+		<div>A wild component appears</div>
+		<p>x</p>
+		<input type=text>
+	`,
+
+	ssrHtml: `
+		<div>A wild component appears</div>
+		<p>x</p>
+		<input type=text value=x>
+	`,
 
 	test(assert, component, target) {
 		component.set({ x: 'y' });
-		assert.htmlEqual(target.innerHTML, '<div>A wild component appears</div><p>y</p><input type="text">');
+		assert.htmlEqual(target.innerHTML, `
+			<div>A wild component appears</div>
+			<p>y</p>
+			<input type=text>
+		`);
 	},
 };
diff --git a/test/runtime/samples/observe-binding-ignores-unchanged/_config.js b/test/runtime/samples/observe-binding-ignores-unchanged/_config.js
index 04fee0d94e..7163e8e4ae 100644
--- a/test/runtime/samples/observe-binding-ignores-unchanged/_config.js
+++ b/test/runtime/samples/observe-binding-ignores-unchanged/_config.js
@@ -1,6 +1,12 @@
 export default {
 	html: `
-		<input type='number'>
+		<input type=number>
+		<p>field1: 1</p>
+		<p>field2: 2</p>
+	`,
+
+	ssrHtml: `
+		<input type=number value=1>
 		<p>field1: 1</p>
 		<p>field2: 2</p>
 	`,
diff --git a/test/runtime/samples/spread-component-with-bind/_config.js b/test/runtime/samples/spread-component-with-bind/_config.js
index 12a400b755..06476712af 100644
--- a/test/runtime/samples/spread-component-with-bind/_config.js
+++ b/test/runtime/samples/spread-component-with-bind/_config.js
@@ -4,6 +4,11 @@ export default {
 		<input>
 	`,
 
+	ssrHtml: `
+		<p>foo</p>
+		<input value=foo>
+	`,
+
 	test (assert, component, target, window) {
 		const input = target.querySelector('input');
 
diff --git a/test/runtime/samples/store-binding/_config.js b/test/runtime/samples/store-binding/_config.js
index 7839a9e3ea..1b257f47e5 100644
--- a/test/runtime/samples/store-binding/_config.js
+++ b/test/runtime/samples/store-binding/_config.js
@@ -12,6 +12,11 @@ export default {
 		<input>
 	`,
 
+	ssrHtml: `
+		<h1>Hello world!</h1>
+		<input value=world>
+	`,
+
 	test(assert, component, target, window) {
 		const input = target.querySelector('input');
 		const event = new window.Event('input');
diff --git a/test/runtime/samples/store-component-binding-deep/_config.js b/test/runtime/samples/store-component-binding-deep/_config.js
index e5f0b43156..39c48445a6 100644
--- a/test/runtime/samples/store-component-binding-deep/_config.js
+++ b/test/runtime/samples/store-component-binding-deep/_config.js
@@ -14,6 +14,11 @@ export default {
 		<input>
 	`,
 
+	ssrHtml: `
+		<h1>Hello world!</h1>
+		<input value=world>
+	`,
+
 	test(assert, component, target, window) {
 		const input = target.querySelector('input');
 		const event = new window.Event('input');
diff --git a/test/runtime/samples/store-component-binding-each/_config.js b/test/runtime/samples/store-component-binding-each/_config.js
index 84977b9b3b..32aa44bee4 100644
--- a/test/runtime/samples/store-component-binding-each/_config.js
+++ b/test/runtime/samples/store-component-binding-each/_config.js
@@ -8,7 +8,16 @@ export default {
 	store,
 
 	html: `
-		<input><input><input>
+		<input>
+		<input>
+		<input>
+		<p>foo, bar, baz</p>
+	`,
+
+	ssrHtml: `
+		<input value=foo>
+		<input value=bar>
+		<input value=baz>
 		<p>foo, bar, baz</p>
 	`,
 
@@ -21,7 +30,9 @@ export default {
 
 		assert.deepEqual(store.get().a, ['blah', 'bar', 'baz']);
 		assert.htmlEqual(target.innerHTML, `
-			<input><input><input>
+			<input>
+			<input>
+			<input>
 			<p>blah, bar, baz</p>
 		`);
 
diff --git a/test/runtime/samples/store-component-binding/_config.js b/test/runtime/samples/store-component-binding/_config.js
index 12b0fcbfb4..57ee8a63d1 100644
--- a/test/runtime/samples/store-component-binding/_config.js
+++ b/test/runtime/samples/store-component-binding/_config.js
@@ -12,6 +12,11 @@ export default {
 		<input>
 	`,
 
+	ssrHtml: `
+		<h1>Hello world!</h1>
+		<input value=world>
+	`,
+
 	test(assert, component, target, window) {
 		const input = target.querySelector('input');
 		const event = new window.Event('input');
diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
index 1a63ea372c..5cd51488c1 100644
--- a/test/server-side-rendering/index.js
+++ b/test/server-side-rendering/index.js
@@ -120,7 +120,9 @@ describe("ssr", () => {
 					store: (config.store !== true) && config.store
 				});
 
-				if (config.html) {
+				if (config.ssrHtml) {
+					assert.htmlEqual(html, config.ssrHtml);
+				} else if (config.html) {
 					assert.htmlEqual(html, config.html);
 				}
 			} catch (err) {
diff --git a/test/server-side-rendering/samples/bindings/_expected.html b/test/server-side-rendering/samples/bindings/_expected.html
new file mode 100644
index 0000000000..fd3487caa7
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings/_expected.html
@@ -0,0 +1 @@
+<input value='bar'>
\ 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
new file mode 100644
index 0000000000..6a08ab5706
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings/main.html
@@ -0,0 +1,8 @@
+<input bind:value=foo >
+ <script>
+	export default {
+		data() {
+			return { foo: 'bar' };
+		}
+	};
+</script>
\ No newline at end of file