events, bindings, if block fixes

src/generators/dom/visitors/Component/Component.ts

@@ -185,12 +185,6 @@ export default function visitComponent(
 		});
 	`);
 
-	if (isTopLevel) {
-		block.builders.mount.addLine(
-			`${name}._fragment.mount( ${block.target}, anchor );`
-		);
-	}
-
 	if (local.dynamicAttributes.length) {
 		const updates = local.dynamicAttributes.map(attribute => {
 			if (attribute.dependencies.length) {

src/generators/dom/visitors/Element/Binding.ts

@@ -91,7 +91,7 @@ export default function visitBinding(
 		`;
 
 		generator.hasComplexBindings = true;
-		block.builders.create.addBlock(
+		block.builders.hydrate.addBlock(
 			`if ( !('${name}' in state) ) ${block.component}._bindings.push( ${handler} );`
 		);
 	} else if (attribute.name === 'group') {
@@ -107,7 +107,7 @@ export default function visitBinding(
 			? `~${snippet}.indexOf( ${state.parentNode}.__value )`
 			: `${state.parentNode}.__value === ${snippet}`;
 
-		block.builders.create.addLine(
+		block.builders.hydrate.addLine(
 			`${block.component}._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
 		);
 
@@ -118,7 +118,7 @@ export default function visitBinding(
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	} else if (node.name === 'audio' || node.name === 'video') {
 		generator.hasComplexBindings = true;
-		block.builders.create.addBlock(
+		block.builders.hydrate.addBlock(
 			`${block.component}._bindings.push( ${handler} );`
 		);
 
@@ -144,13 +144,15 @@ export default function visitBinding(
 		}
 	}
 
-	block.builders.create.addBlock(deindent`
+	block.builders.init.addBlock(deindent`
 		function ${handler} () {
 			${lock} = true;
 			${setter}
 			${lock} = false;
 		}
+	`);
 
+	block.builders.hydrate.addBlock(deindent`
 		${generator.helper(
 			'addListener'
 		)}( ${state.parentNode}, '${eventName}', ${handler} );

src/generators/dom/visitors/Element/EventHandler.ts

@@ -68,36 +68,38 @@ export default function visitEventHandler(
 		[✂${attribute.expression.start}-${attribute.expression.end}✂];
 	`;
 
-	const handler = isCustomEvent
+	if (isCustomEvent) {
-		? deindent`
+		block.addVariable(handlerName);
-			var ${handlerName} = ${generator.alias(
+
+		block.builders.hydrate.addBlock(deindent`
+			${handlerName} = ${generator.alias(
 				'template'
 			)}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
 				${handlerBody}
 			});
-		`
+		`);
-		: deindent`
+
+		block.builders.destroy.addLine(deindent`
+			${handlerName}.teardown();
+		`);
+	} else {
+		const handler = deindent`
 			function ${handlerName} ( event ) {
 				${handlerBody}
 			}
 		`;
 
-	if (shouldHoist) {
+		if (shouldHoist) {
-		generator.blocks.push(
+			generator.blocks.push(
-			<Block>{
+				<Block>{
-				render: () => handler,
+					render: () => handler,
-			}
+				}
-		);
+			);
-	} else {
+		} else {
-		block.builders.create.addBlock(handler);
+			block.builders.init.addBlock(handler);
-	}
+		}
 
-	if (isCustomEvent) {
+		block.builders.hydrate.addLine(deindent`
-		block.builders.destroy.addLine(deindent`
-			${handlerName}.teardown();
-		`);
-	} else {
-		block.builders.create.addLine(deindent`
 			${generator.helper(
 				'addListener'
 			)}( ${state.parentNode}, '${name}', ${handlerName} );

src/generators/dom/visitors/IfBlock.ts

@@ -106,11 +106,11 @@ export default function visitIfBlock(
 	}
 
 	block.builders.create.addLine(
-		`${name}.create();`
+		`${if_name}${name}.create();`
 	);
 
 	block.builders.claim.addLine(
-		`${name}.claim( ${state.parentNodes} );`
+		`${if_name}${name}.claim( ${state.parentNodes} );`
 	);
 
 	if (node.needsAnchor) {
@@ -145,7 +145,7 @@ function simple(
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.mount.addLine(
-		`if ( ${name} ) ${name}.${mountOrIntro}( ${block.target}, anchor );`
+		`if ( ${name} ) ${name}.${mountOrIntro}( ${targetNode}, ${anchorNode} );`
 	);
 
 	const parentNode = state.parentNode || `${anchor}.parentNode`;
@@ -166,6 +166,7 @@ function simple(
 					${name}.update( changed, ${params} );
 				} else {
 					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name}.create();
 					${name}.mount( ${parentNode}, ${anchor} );
 				}
 			`
@@ -177,6 +178,7 @@ function simple(
 			: deindent`
 				if ( !${name} ) {
 					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name}.create();
 					${name}.mount( ${parentNode}, ${anchor} );
 				}
 			`;
@@ -248,11 +250,18 @@ function compound(
 	const parentNode = state.parentNode || `${anchor}.parentNode`;
 
 	const changeBlock = deindent`
-		${if_name}{
+		${hasElse ?
-			${name}.unmount();
+			deindent`
-			${name}.destroy();
+				${name}.unmount();
-		}
+				${name}.destroy();
+			` :
+			deindent`
+				if ( ${name} ) {
+					${name}.unmount();
+					${name}.destroy();
+				}`}
 		${name} = ${current_block_and}${current_block}( ${params}, ${block.component} );
+		${if_name}${name}.create();
 		${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
 	`;
 

test/hydration/index.js

@@ -82,7 +82,7 @@ describe.only('hydration', () => {
 					assert.htmlEqual(target.innerHTML, fs.readFileSync(`${cwd}/_after.html`, 'utf-8'));
 
 					if (config.test) {
-						config.test(assert, target, snapshot, component);
+						config.test(assert, target, snapshot, component, window);
 					} else {
 						component.destroy();
 						assert.equal(target.innerHTML, '');

test/hydration/samples/binding-input/_after.html

@@ -0,0 +1,2 @@
+<input>
+<p>Hello world!</p>

test/hydration/samples/binding-input/_before.html

@@ -0,0 +1,2 @@
+<input>
+<p>Hello world!</p>

test/hydration/samples/binding-input/_config.js

@@ -0,0 +1,29 @@
+export default {
+	data: {
+		name: 'world'
+	},
+
+	snapshot(target) {
+		return {
+			input: target.querySelector('input'),
+			p: target.querySelector('p')
+		};
+	},
+
+	test(assert, target, snapshot, component, window) {
+		const input = target.querySelector('input');
+		const p = target.querySelector('p');
+
+		assert.equal(input, snapshot.input);
+		assert.equal(p, snapshot.p);
+
+		input.value = 'everybody';
+		input.dispatchEvent(new window.Event('input'));
+
+		assert.equal(component.get('name'), 'everybody');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>Hello everybody!</p>
+		`);
+	}
+};

test/hydration/samples/binding-input/main.html

@@ -0,0 +1,2 @@
+<input bind:value='name'>
+<p>Hello {{name}}!</p>

test/hydration/samples/event-handler/_after.html

@@ -0,0 +1 @@
+<button>click me</button>

test/hydration/samples/event-handler/_before.html

@@ -0,0 +1 @@
+<button>click me</button>

test/hydration/samples/event-handler/_config.js

@@ -0,0 +1,26 @@
+export default {
+	data: {
+		clicked: false
+	},
+
+	snapshot(target) {
+		const button = target.querySelector('button');
+
+		return {
+			button
+		};
+	},
+
+	test(assert, target, snapshot, component, window) {
+		const button = target.querySelector('button');
+		assert.equal(button, snapshot.button);
+
+		button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.ok(component.get('clicked'));
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<p>clicked!</p>
+		`);
+	}
+};

test/hydration/samples/event-handler/main.html

@@ -0,0 +1,5 @@
+<button on:click='set({ clicked: true })'>click me</button>
+
+{{#if clicked}}
+	<p>clicked!</p>
+{{/if}}

test/hydration/samples/if-block-anchor/_after.html

@@ -0,0 +1,4 @@
+<div>
+	<p>foo!</p>
+	<p>bar!</p>
+</div>

test/hydration/samples/if-block-anchor/_before.html

@@ -0,0 +1,4 @@
+<div>
+	<p>foo!</p>
+	<p>bar!</p>
+</div>

test/hydration/samples/if-block-anchor/_config.js

@@ -0,0 +1,26 @@
+export default {
+	data: {
+		foo: true,
+		bar: true
+	},
+
+	snapshot(target) {
+		const div = target.querySelector('div');
+		const ps = target.querySelectorAll('p');
+
+		return {
+			div,
+			p0: ps[0],
+			p1: ps[1]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+		const ps = target.querySelectorAll('p');
+
+		assert.equal(div, snapshot.div);
+		assert.equal(ps[0], snapshot.p0);
+		assert.equal(ps[1], snapshot.p1);
+	}
+};

test/hydration/samples/if-block-anchor/main.html

@@ -0,0 +1,9 @@
+<div>
+	{{#if foo}}
+		<p>foo!</p>
+	{{/if}}
+
+	{{#if bar}}
+		<p>bar!</p>
+	{{/if}}
+</div>

test/hydration/samples/if-block-false/_after.html

@@ -0,0 +1,2 @@
+<p>before</p>
+<p>after</p>

test/hydration/samples/if-block-false/_before.html

@@ -0,0 +1,2 @@
+<p>before</p>
+<p>after</p>

test/hydration/samples/if-block-false/_config.js

@@ -0,0 +1,19 @@
+export default {
+	data: {
+		foo: false
+	},
+
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+	}
+};

test/hydration/samples/if-block-false/main.html

@@ -0,0 +1,5 @@
+<p>before</p>
+{{#if foo}}
+	<p>foo!</p>
+{{/if}}
+<p>after</p>

test/hydration/samples/if-block-update/_after.html

@@ -0,0 +1 @@
+<p>foo!</p>

test/hydration/samples/if-block-update/_before.html

@@ -0,0 +1 @@
+<p>foo!</p>

test/hydration/samples/if-block-update/_config.js

@@ -0,0 +1,23 @@
+export default {
+	data: {
+		foo: true,
+		bar: false
+	},
+
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p
+		};
+	},
+
+	test(assert, target, snapshot, component) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+
+		component.set({ foo: false, bar: true });
+		assert.htmlEqual(target.innerHTML, `<p>bar!</p>`);
+	}
+};

test/hydration/samples/if-block-update/main.html

@@ -0,0 +1,7 @@
+{{#if foo}}
+	<p>foo!</p>
+{{/if}}
+
+{{#if bar}}
+	<p>bar!</p>
+{{/if}}