tidy up, dedupe a bit

src/generators/dom/Block.ts

@@ -124,8 +124,7 @@ export default class Block {
 		name: string,
 		renderStatement: string,
 		claimStatement: string,
-		parentNode: string,
+		parentNode: string
-		needsIdentifier = false
 	) {
 		const isToplevel = !parentNode;
 

src/generators/dom/visitors/EachBlock.ts

@@ -57,8 +57,7 @@ export default function visitEachBlock(
 			anchor,
 			`@createComment()`,
 			`@createComment()`,
-			state.parentNode,
+			state.parentNode
-			true
 		);
 	} else if (node.next) {
 		node.next.usedAsAnchor = true;
@@ -172,8 +171,7 @@ function keyed(
 			node._block.first,
 			`@createComment()`,
 			`@createComment()`,
-			null,
+			null
-			true
 		);
 	}
 

src/generators/dom/visitors/IfBlock.ts

@@ -119,8 +119,7 @@ export default function visitIfBlock(
 			anchor,
 			`@createComment()`,
 			`@createComment()`,
-			state.parentNode,
+			state.parentNode
-			true
 		);
 	} else if (node.next) {
 		node.next.usedAsAnchor = true;

src/generators/dom/visitors/MustacheTag.ts

@@ -1,4 +1,5 @@
 import deindent from '../../../utils/deindent';
+import visitTag from './shared/Tag';
 import { DomGenerator } from '../index';
 import Block from '../Block';
 import { Node } from '../../../interfaces';
@@ -10,47 +11,21 @@ export default function visitMustacheTag(
 	state: State,
 	node: Node
 ) {
-	const { dependencies, indexes, snippet } = block.contextualise(node.expression);
+	const { name } = node._state;
 
-	const hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
+	const { init } = visitTag(
-
+		generator,
-	const shouldCache = (
+		block,
-		node.expression.type !== 'Identifier' ||
+		state,
-		block.contexts.has(node.expression.name) ||
+		node,
-		hasChangeableIndex
+		name,
+		value => `${name}.data = ${value};`
 	);
 
-	const name = node._state.name;
-	const value = shouldCache && block.getUniqueName(`${name}_value`);
-	const init = shouldCache ? `${value} = ${snippet}` : snippet;
-
-	if (shouldCache) block.addVariable(value);
-
 	block.addElement(
 		name,
 		`@createText( ${init} )`,
-		generator.hydratable
+		`@claimText( ${state.parentNodes}, ${init} )`,
-			? `@claimText( ${state.parentNodes}, ${init} )`
+		state.parentNode
-			: '',
-		state.parentNode,
-		true
-	);
-
-	if (dependencies.length || hasChangeableIndex) {
-		const changedCheck = (
-			( block.hasOutroMethod ? `#outroing || ` : '' ) +
-			dependencies.map(dependency => `'${dependency}' in changed`).join(' || ')
 	);
-
-		const updateCachedValue = `${value} !== ( ${value} = ${snippet} )`;
-
-		const condition = shouldCache ?
-			( dependencies.length ? `( ${changedCheck} ) && ${updateCachedValue}` : updateCachedValue ) :
-			changedCheck;
-
-		block.builders.update.addConditionalLine(
-			condition,
-			`${name}.data = ${shouldCache ? value : snippet};`
-		);
-	}
 }

src/generators/dom/visitors/RawMustacheTag.ts

@@ -1,4 +1,6 @@
 import deindent from '../../../utils/deindent';
+import addUpdateBlock from './shared/addUpdateBlock';
+import visitTag from './shared/Tag';
 import { DomGenerator } from '../index';
 import Block from '../Block';
 import { Node } from '../../../interfaces';
@@ -14,60 +16,34 @@ export default function visitRawMustacheTag(
 	const before = node._state.name;
 	const after = block.getUniqueName(`${name}_after`);
 
-	const { dependencies, indexes, snippet } = block.contextualise(node.expression);
+	const { init } = visitTag(
-
+		generator,
-	const hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
+		block,
-
+		state,
-	const shouldCache = (
+		node,
-		node.expression.type !== 'Identifier' ||
+		name,
-		block.contexts.has(node.expression.name) ||
+		value => deindent`
-		hasChangeableIndex
+			@detachBetween( ${before}, ${after} );
+			${before}.insertAdjacentHTML( 'afterend', ${value} );
+		`
 	);
 
-	const value = shouldCache && block.getUniqueName(`${name}_value`);
-	const init = shouldCache ? `${value} = ${snippet}` : snippet;
-	if (shouldCache) block.addVariable(value);
-
 	// we would have used comments here, but the `insertAdjacentHTML` api only
 	// exists for `Element`s.
 	block.addElement(
 		before,
 		`@createElement( 'noscript' )`,
 		`@createElement( 'noscript' )`,
-		state.parentNode,
+		state.parentNode
-		true
 	);
+
 	block.addElement(
 		after,
 		`@createElement( 'noscript' )`,
 		`@createElement( 'noscript' )`,
-		state.parentNode,
+		state.parentNode
-		true
 	);
 
-	const isToplevel = !state.parentNode;
-
 	block.builders.mount.addLine(`${before}.insertAdjacentHTML( 'afterend', ${init} );`);
 	block.builders.detachRaw.addBlock(`@detachBetween( ${before}, ${after} );`);
-
-	if (dependencies.length || hasChangeableIndex) {
-		const changedCheck = (
-			( block.hasOutroMethod ? `#outroing || ` : '' ) +
-			dependencies.map(dependency => `'${dependency}' in changed`).join(' || ')
-		);
-
-		const updateCachedValue = `${value} !== ( ${value} = ${snippet} )`;
-
-		const condition = shouldCache ?
-			( dependencies.length ? `( ${changedCheck} ) && ${updateCachedValue}` : updateCachedValue ) :
-			changedCheck;
-
-		block.builders.update.addConditionalLine(
-			condition,
-			deindent`
-				@detachBetween( ${before}, ${after} );
-				${before}.insertAdjacentHTML( 'afterend', ${shouldCache ? value : snippet} );
-			`
-		);
-	}
 }

src/generators/dom/visitors/Text.ts

@@ -14,10 +14,7 @@ export default function visitText(
 	block.addElement(
 		node._state.name,
 		`@createText( ${stringify(node.data)} )`,
-		generator.hydratable
+		`@claimText( ${state.parentNodes}, ${stringify(node.data)} )`,
-			? `@claimText( ${state.parentNodes}, ${stringify(node.data)} )`
+		state.parentNode
-			: '',
-		state.parentNode,
-		node.usedAsAnchor
 	);
 }

src/generators/dom/visitors/shared/Tag.ts

@@ -0,0 +1,49 @@
+import deindent from '../../../../utils/deindent';
+import { DomGenerator } from '../../index';
+import Block from '../../Block';
+import { Node } from '../../../../interfaces';
+import { State } from '../../interfaces';
+
+export default function visitTag(
+	generator: DomGenerator,
+	block: Block,
+	state: State,
+	node: Node,
+	name: string,
+	update: (value: string) => string
+) {
+	const { dependencies, indexes, snippet } = block.contextualise(node.expression);
+
+	const hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
+
+	const shouldCache = (
+		node.expression.type !== 'Identifier' ||
+		block.contexts.has(node.expression.name) ||
+		hasChangeableIndex
+	);
+
+	const value = shouldCache && block.getUniqueName(`${name}_value`);
+	const init = shouldCache ? value : snippet;
+
+	if (shouldCache) block.addVariable(value, snippet);
+
+	if (dependencies.length || hasChangeableIndex) {
+		const changedCheck = (
+			( block.hasOutroMethod ? `#outroing || ` : '' ) +
+			dependencies.map(dependency => `'${dependency}' in changed`).join(' || ')
+		);
+
+		const updateCachedValue = `${value} !== ( ${value} = ${snippet} )`;
+
+		const condition = shouldCache ?
+			( dependencies.length ? `( ${changedCheck} ) && ${updateCachedValue}` : updateCachedValue ) :
+			changedCheck;
+
+		block.builders.update.addConditionalLine(
+			condition,
+			update(shouldCache ? value : snippet)
+		);
+	}
+
+	return { init };
+}

test/js/samples/each-block-changed-check/expected-bundle.js

@@ -248,7 +248,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function create_each_block ( state, each_block_value, comment, i, component ) {
-	var div, strong, text, text_1, span, text_2_value, text_2, text_3, text_4_value, text_4, text_5, text_6, raw_value, raw_before, raw_after;
+	var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before, raw_after;
 
 	return {
 		create: function () {
@@ -257,9 +257,9 @@ function create_each_block ( state, each_block_value, comment, i, component ) {
 			text = createText( i );
 			text_1 = createText( "\n\n\t\t" );
 			span = createElement( 'span' );
-			text_2 = createText( text_2_value = comment.author );
+			text_2 = createText( text_2_value );
 			text_3 = createText( " wrote " );
-			text_4 = createText( text_4_value = state.elapsed(comment.time, state.time) );
+			text_4 = createText( text_4_value );
 			text_5 = createText( " ago:" );
 			text_6 = createText( "\n\n\t\t" );
 			raw_before = createElement( 'noscript' );
@@ -285,7 +285,7 @@ function create_each_block ( state, each_block_value, comment, i, component ) {
 			appendNode( text_6, div );
 			appendNode( raw_before, div );
 			appendNode( raw_after, div );
-			raw_before.insertAdjacentHTML( 'afterend', raw_value = comment.html );
+			raw_before.insertAdjacentHTML( 'afterend', raw_value );
 		},
 
 		update: function ( changed, state, each_block_value, comment, i ) {

test/js/samples/each-block-changed-check/expected.js

@@ -74,7 +74,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function create_each_block ( state, each_block_value, comment, i, component ) {
-	var div, strong, text, text_1, span, text_2_value, text_2, text_3, text_4_value, text_4, text_5, text_6, raw_value, raw_before, raw_after;
+	var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before, raw_after;
 
 	return {
 		create: function () {
@@ -83,9 +83,9 @@ function create_each_block ( state, each_block_value, comment, i, component ) {
 			text = createText( i );
 			text_1 = createText( "\n\n\t\t" );
 			span = createElement( 'span' );
-			text_2 = createText( text_2_value = comment.author );
+			text_2 = createText( text_2_value );
 			text_3 = createText( " wrote " );
-			text_4 = createText( text_4_value = state.elapsed(comment.time, state.time) );
+			text_4 = createText( text_4_value );
 			text_5 = createText( " ago:" );
 			text_6 = createText( "\n\n\t\t" );
 			raw_before = createElement( 'noscript' );
@@ -111,7 +111,7 @@ function create_each_block ( state, each_block_value, comment, i, component ) {
 			appendNode( text_6, div );
 			appendNode( raw_before, div );
 			appendNode( raw_after, div );
-			raw_before.insertAdjacentHTML( 'afterend', raw_value = comment.html );
+			raw_before.insertAdjacentHTML( 'afterend', raw_value );
 		},
 
 		update: function ( changed, state, each_block_value, comment, i ) {