[WIP] Separate unmount from destroy

.gitignore

@@ -12,4 +12,5 @@ coverage.lcov
 test/sourcemaps/samples/*/output.js
 test/sourcemaps/samples/*/output.js.map
 _actual.*
+_actual-bundle.*
 src/generators/dom/shared.ts

src/generators/dom/Block.ts

@@ -42,10 +42,10 @@ export default class Block {
 	builders: {
 		create: CodeBuilder;
 		mount: CodeBuilder;
-		update: CodeBuilder;
 		intro: CodeBuilder;
+		update: CodeBuilder;
 		outro: CodeBuilder;
-		detach: CodeBuilder;
+		unmount: CodeBuilder;
 		detachRaw: CodeBuilder;
 		destroy: CodeBuilder;
 	}
@@ -88,10 +88,10 @@ export default class Block {
 		this.builders = {
 			create: new CodeBuilder(),
 			mount: new CodeBuilder(),
-			update: new CodeBuilder(),
 			intro: new CodeBuilder(),
+			update: new CodeBuilder(),
 			outro: new CodeBuilder(),
-			detach: new CodeBuilder(),
+			unmount: new CodeBuilder(),
 			detachRaw: new CodeBuilder(),
 			destroy: new CodeBuilder()
 		};
@@ -130,7 +130,7 @@ export default class Block {
 		}
 
 		if ( isToplevel ) {
-			this.builders.detach.addLine( `${this.generator.helper( 'detachNode' )}( ${name} );` );
+			this.builders.unmount.addLine( `${this.generator.helper( 'detachNode' )}( ${name} );` );
 		}
 	}
 
@@ -200,17 +200,8 @@ export default class Block {
 			this.builders.create.addLine( `${this.autofocus}.focus();` );
 		}
 
-		// minor hack – we need to ensure that any {{{triples}}} are detached
-		// first, so we append normal detach statements to detachRaw
-		this.builders.detachRaw.addBlock( this.builders.detach );
-
-		if ( !this.builders.detachRaw.isEmpty() ) {
-			this.builders.destroy.addBlock( deindent`
-				if ( detach ) {
-					${this.builders.detachRaw}
-				}
-			` );
-		}
+		// minor hack – we need to ensure that any {{{triples}}} are detached first
+		this.builders.unmount.addBlockAtStart( this.builders.detachRaw );
 
 		const properties = new CodeBuilder();
 
@@ -290,11 +281,21 @@ export default class Block {
 			}
 		}
 
+		if ( this.builders.unmount.isEmpty() ) {
+			properties.addBlock( `unmount: ${this.generator.helper('noop')},`);
+		} else {
+			properties.addBlock( deindent`
+				unmount: function () {
+					${this.builders.unmount}
+				},
+			` );
+		}
+
 		if ( this.builders.destroy.isEmpty() ) {
 			properties.addBlock( `destroy: ${this.generator.helper( 'noop' )}` );
 		} else {
 			properties.addBlock( deindent`
-				destroy: function ( detach ) {
+				destroy: function () {
 					${this.builders.destroy}
 				}
 			` );

src/generators/dom/index.ts

@@ -191,7 +191,8 @@ export default function dom ( parsed: Parsed, source: string, options: CompileOp
 			this.fire( 'destroy' );
 			${templateProperties.ondestroy && `${generator.alias( 'template' )}.ondestroy.call( this );`}
 
-			this._fragment.destroy( detach !== false );
+			if ( detach !== false ) this._fragment.unmount();
+			this._fragment.destroy();
 			this._fragment = null;
 
 			this._state = {};

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

@@ -56,7 +56,7 @@ export default function visitComponent ( generator: DomGenerator, block: Block,
 		update: new CodeBuilder()
 	};
 
-	const isToplevel = !state.parentNode;
+	const isTopLevel = !state.parentNode;
 
 	generator.hasComponents = true;
 
@@ -95,7 +95,7 @@ export default function visitComponent ( generator: DomGenerator, block: Block,
 	}
 
 	const componentInitProperties = [
-		`target: ${!isToplevel ? state.parentNode: 'null'}`,
+		`target: ${!isTopLevel ? state.parentNode: 'null'}`,
 		`_root: ${block.component}._root`
 	];
 
@@ -121,6 +121,10 @@ export default function visitComponent ( generator: DomGenerator, block: Block,
 			);
 		}
 
+		block.builders.destroy.addLine(
+			`${yieldFragment}.destroy();`
+		);
+
 		componentInitProperties.push( `_yield: ${yieldFragment}`);
 	}
 
@@ -157,7 +161,7 @@ export default function visitComponent ( generator: DomGenerator, block: Block,
 		});
 	` );
 
-	if ( isToplevel ) {
+	if ( isTopLevel ) {
 		block.builders.mount.addLine( `${name}._fragment.mount( ${block.target}, anchor );` );
 	}
 
@@ -183,7 +187,8 @@ export default function visitComponent ( generator: DomGenerator, block: Block,
 		` );
 	}
 
-	block.builders.destroy.addLine( `${name}.destroy( ${isToplevel ? 'detach' : 'false'} );` );
+	if ( isTopLevel ) block.builders.unmount.addLine( `${name}._fragment.unmount();` );
+	block.builders.destroy.addLine( `${name}.destroy( false );` );
 
 	block.builders.create.addBlock( local.create );
 	if ( !local.update.isEmpty() ) block.builders.update.addBlock( local.update );

src/generators/dom/visitors/EachBlock.ts

@@ -64,15 +64,17 @@ export default function visitEachBlock ( generator: DomGenerator, block: Block,
 					${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
 					${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				} else if ( ${each_block_else} ) {
-					${each_block_else}.destroy( true );
+					${each_block_else}.unmount();
+					${each_block_else}.destroy();
 					${each_block_else} = null;
 				}
 			` );
 		} else {
 			block.builders.update.addBlock( deindent`
 				if ( ${each_block_value}.length ) {
 					if ( ${each_block_else} ) {
-						${each_block_else}.destroy( true );
+						${each_block_else}.unmount();
+						${each_block_else}.destroy();
 						${each_block_else} = null;
 					}
 				} else if ( !${each_block_else} ) {
@@ -82,11 +84,12 @@ export default function visitEachBlock ( generator: DomGenerator, block: Block,
 			` );
 		}
 
+		block.builders.unmount.addLine(
+			`if ( ${each_block_else} ) ${each_block_else}.unmount()`
+		);
 
 		block.builders.destroy.addBlock( deindent`
-			if ( ${each_block_else} ) {
-				${each_block_else}.destroy( ${isToplevel ? 'detach' : 'false'} );
-			}
+			if ( ${each_block_else} ) ${each_block_else}.destroy( false );
 		` );
 	}
 
@@ -154,7 +157,8 @@ function keyed ( generator: DomGenerator, block: Block, state: State, node: Node
 		block.builders.create.addBlock( deindent`
 			function ${fn} ( iteration ) {
 				iteration.outro( function () {
-					iteration.destroy( true );
+					iteration.unmount();
+					iteration.destroy();
 					${lookup}[iteration.key] = null;
 				});
 			}
@@ -176,7 +180,8 @@ function keyed ( generator: DomGenerator, block: Block, state: State, node: Node
 		const fn = block.getUniqueName( `${each_block}_destroy` );
 		block.builders.create.addBlock( deindent`
 			function ${fn} ( iteration ) {
-				iteration.destroy( true );
+				iteration.unmount();
+				iteration.destroy();
 				${lookup}[iteration.key] = null;
 			}
 		` );
@@ -262,10 +267,20 @@ function keyed ( generator: DomGenerator, block: Block, state: State, node: Node
 		${head} = ${lookup}[${each_block_value}[0] && ${each_block_value}[0].${node.key}];
 	` );
 
+	if ( !state.parentNode ) {
+		block.builders.unmount.addBlock( deindent`
+			var ${iteration} = ${head};
+			while ( ${iteration} ) {
+				${iteration}.unmount();
+				${iteration} = ${iteration}.next;
+			}
+		` );
+	}
+
 	block.builders.destroy.addBlock( deindent`
 		var ${iteration} = ${head};
 		while ( ${iteration} ) {
-			${iteration}.destroy( ${state.parentNode ? 'false' : 'detach'} );
+			${iteration}.destroy( false );
 			${iteration} = ${iteration}.next;
 		}
 	` );
@@ -334,7 +349,8 @@ function unkeyed ( generator: DomGenerator, block: Block, state: State, node: No
 				function ${outro} ( i ) {
 					if ( ${iterations}[i] ) {
 						${iterations}[i].outro( function () {
-							${iterations}[i].destroy( true );
+							${iterations}[i].unmount();
+							${iterations}[i].destroy();
 							${iterations}[i] = null;
 						});
 					}
@@ -343,7 +359,10 @@ function unkeyed ( generator: DomGenerator, block: Block, state: State, node: No
 				for ( ; ${i} < ${iterations}.length; ${i} += 1 ) ${outro}( ${i} );
 			` :
 			deindent`
-				${generator.helper( 'destroyEach' )}( ${iterations}, true, ${each_block_value}.length );
+				for ( ; ${i} < ${iterations}.length; ${i} += 1 ) {
+					${iterations}[${i}].unmount();
+					${iterations}[${i}].destroy();
+				}
 				${iterations}.length = ${each_block_value}.length;
 			`;
 
@@ -360,7 +379,13 @@ function unkeyed ( generator: DomGenerator, block: Block, state: State, node: No
 		` );
 	}
 
+	block.builders.unmount.addBlock( deindent`
+		for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
+			${iterations}[${i}].unmount();
+		}
+	` );
+
 	block.builders.destroy.addBlock(
-		`${generator.helper( 'destroyEach' )}( ${iterations}, ${state.parentNode ? 'false' : 'detach'}, 0 );`
+		`${generator.helper( 'destroyEach' )}( ${iterations}, false, 0 );`
 	);
 }

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

@@ -103,7 +103,7 @@ export default function visitElement ( generator: DomGenerator, block: Block, st
 	if ( !state.parentNode ) {
 		// TODO we eventually need to consider what happens to elements
 		// that belong to the same outgroup as an outroing element...
-		block.builders.detach.addLine( `${generator.helper( 'detachNode' )}( ${name} );` );
+		block.builders.unmount.addLine( `${generator.helper( 'detachNode' )}( ${name} );` );
 	}
 
 	if ( node.name !== 'select' ) {

src/generators/dom/visitors/IfBlock.ts

@@ -135,12 +135,14 @@ function simple ( generator: DomGenerator, block: Block, state: State, node: Nod
 	const exit = branch.hasOutroMethod ?
 		deindent`
 			${name}.outro( function () {
-				${name}.destroy( true );
+				${name}.unmount();
+				${name}.destroy();
 				${name} = null;
 			});
 		` :
 		deindent`
-			${name}.destroy( true );
+			${name}.unmount();
+			${name}.destroy();
 			${name} = null;
 		`;
 
@@ -152,8 +154,12 @@ function simple ( generator: DomGenerator, block: Block, state: State, node: Nod
 		}
 	` );
 
+	block.builders.unmount.addLine(
+		`${if_name}${name}.unmount();`
+	);
+
 	block.builders.destroy.addLine(
-		`${if_name}${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );`
+		`${if_name}${name}.destroy();`
 	);
 }
 
@@ -185,7 +191,10 @@ function compound ( generator: DomGenerator, block: Block, state: State, node: N
 	const parentNode = state.parentNode || `${anchor}.parentNode`;
 
 	const changeBlock = deindent`
-		${if_name}${name}.destroy( true );
+		${if_name}{
+			${name}.unmount();
+			${name}.destroy();
+		}
 		${name} = ${current_block_and}${current_block}( ${params}, ${block.component} );
 		${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
 	`;
@@ -207,7 +216,10 @@ function compound ( generator: DomGenerator, block: Block, state: State, node: N
 	}
 
 	block.builders.destroy.addLine(
-		`${if_name}${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );`
+		`${if_name}{
+			${name}.unmount();
+			${name}.destroy();
+		}`
 	);
 }
 
@@ -265,7 +277,8 @@ function compoundWithOutros ( generator: DomGenerator, block: Block, state: Stat
 
 	const destroyOldBlock = deindent`
 		${name}.outro( function () {
-			${if_blocks}[ ${previous_block_index} ].destroy( true );
+			${if_blocks}[ ${previous_block_index} ].unmount();
+			${if_blocks}[ ${previous_block_index} ].destroy();
 			${if_blocks}[ ${previous_block_index} ] = null;
 		});
 	`;
@@ -313,7 +326,10 @@ function compoundWithOutros ( generator: DomGenerator, block: Block, state: Stat
 		` );
 	}
 
-	block.builders.destroy.addLine(
-		`${if_current_block_index}${if_blocks}[ ${current_block_index} ].destroy( ${state.parentNode ? 'false' : 'detach'} );`
-	);
+	block.builders.destroy.addLine( deindent`
+		${if_current_block_index}{
+			${if_blocks}[ ${current_block_index} ].unmount();
+			${if_blocks}[ ${current_block_index} ].destroy();
+		}
+	` );
 }

src/generators/dom/visitors/YieldTag.ts

@@ -10,6 +10,6 @@ export default function visitYieldTag ( generator: DomGenerator, block: Block, s
 	);
 
 	block.builders.destroy.addLine(
-		`if ( ${block.component}._yield ) ${block.component}._yield.destroy( detach );`
+		`if ( ${block.component}._yield ) ${block.component}._yield.unmount();`
 	);
 }

src/shared/dom.js

@@ -16,6 +16,7 @@ export function detachBetween ( before, after ) {
 	}
 }
 
+// TODO this is out of date
 export function destroyEach ( iterations, detach, start ) {
 	for ( var i = start; i < iterations.length; i += 1 ) {
 		if ( iterations[i] ) iterations[i].destroy( detach );

test/js/index.js

@@ -34,11 +34,6 @@ describe( 'js', () => {
 			const expected = fs.readFileSync( `${dir}/expected.js`, 'utf-8' );
 			const expectedBundle = fs.readFileSync( `${dir}/expected-bundle.js`, 'utf-8' );
 
-			assert.equal(
-				actual.trim().replace( /^\s+$/gm, '' ),
-				expected.trim().replace( /^\s+$/gm, '' )
-			);
-
 			return rollup({
 				entry: `${dir}/_actual.js`,
 				plugins: [{
@@ -52,6 +47,11 @@ describe( 'js', () => {
 				const actualBundle = bundle.generate({ format: 'es' }).code;
 				fs.writeFileSync( `${dir}/_actual-bundle.js`, actualBundle );
 
+				assert.equal(
+					actual.trim().replace( /^\s+$/gm, '' ),
+					expected.trim().replace( /^\s+$/gm, '' )
+				);
+
 				assert.equal(
 					actualBundle.trim().replace( /^\s+$/gm, '' ),
 					expectedBundle.trim().replace( /^\s+$/gm, '' )