From f31c206b73517e7d21bca031980651e293c4793b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 14 Aug 2017 12:24:39 -0400 Subject: [PATCH] tidy up, dedupe a bit --- src/generators/dom/Block.ts | 3 +- src/generators/dom/visitors/EachBlock.ts | 6 +- src/generators/dom/visitors/IfBlock.ts | 3 +- src/generators/dom/visitors/MustacheTag.ts | 47 ++++------------ src/generators/dom/visitors/RawMustacheTag.ts | 56 ++++++------------- src/generators/dom/visitors/Text.ts | 7 +-- src/generators/dom/visitors/shared/Tag.ts | 49 ++++++++++++++++ .../expected-bundle.js | 8 +-- .../each-block-changed-check/expected.js | 8 +-- 9 files changed, 90 insertions(+), 97 deletions(-) create mode 100644 src/generators/dom/visitors/shared/Tag.ts diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts index bf38aebc74..0cfce0924a 100644 --- a/src/generators/dom/Block.ts +++ b/src/generators/dom/Block.ts @@ -124,8 +124,7 @@ export default class Block { name: string, renderStatement: string, claimStatement: string, - parentNode: string, - needsIdentifier = false + parentNode: string ) { const isToplevel = !parentNode; diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts index 2ad8117c36..f6b2a07210 100644 --- a/src/generators/dom/visitors/EachBlock.ts +++ b/src/generators/dom/visitors/EachBlock.ts @@ -57,8 +57,7 @@ export default function visitEachBlock( anchor, `@createComment()`, `@createComment()`, - state.parentNode, - true + state.parentNode ); } else if (node.next) { node.next.usedAsAnchor = true; @@ -172,8 +171,7 @@ function keyed( node._block.first, `@createComment()`, `@createComment()`, - null, - true + null ); } diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts index dfb6b3bfcd..193edd872b 100644 --- a/src/generators/dom/visitors/IfBlock.ts +++ b/src/generators/dom/visitors/IfBlock.ts @@ -119,8 +119,7 @@ export default function visitIfBlock( anchor, `@createComment()`, `@createComment()`, - state.parentNode, - true + state.parentNode ); } else if (node.next) { node.next.usedAsAnchor = true; diff --git a/src/generators/dom/visitors/MustacheTag.ts b/src/generators/dom/visitors/MustacheTag.ts index 91575e58d0..3c03c51167 100644 --- a/src/generators/dom/visitors/MustacheTag.ts +++ b/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 shouldCache = ( - node.expression.type !== 'Identifier' || - block.contexts.has(node.expression.name) || - hasChangeableIndex + const { init } = visitTag( + generator, + block, + state, + node, + 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} )` - : '', - state.parentNode, - true + `@claimText( ${state.parentNodes}, ${init} )`, + state.parentNode ); - - 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};` - ); - } } diff --git a/src/generators/dom/visitors/RawMustacheTag.ts b/src/generators/dom/visitors/RawMustacheTag.ts index 624e424983..02facfcd24 100644 --- a/src/generators/dom/visitors/RawMustacheTag.ts +++ b/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 hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index)); - - const shouldCache = ( - node.expression.type !== 'Identifier' || - block.contexts.has(node.expression.name) || - hasChangeableIndex + const { init } = visitTag( + generator, + block, + state, + node, + name, + value => deindent` + @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, - true + state.parentNode ); + block.addElement( after, `@createElement( 'noscript' )`, `@createElement( 'noscript' )`, - state.parentNode, - true + state.parentNode ); - 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} ); - ` - ); - } -} +} \ No newline at end of file diff --git a/src/generators/dom/visitors/Text.ts b/src/generators/dom/visitors/Text.ts index 49135a129e..796bf9e309 100644 --- a/src/generators/dom/visitors/Text.ts +++ b/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)} )` - : '', - state.parentNode, - node.usedAsAnchor + `@claimText( ${state.parentNodes}, ${stringify(node.data)} )`, + state.parentNode ); } diff --git a/src/generators/dom/visitors/shared/Tag.ts b/src/generators/dom/visitors/shared/Tag.ts new file mode 100644 index 0000000000..63185d60c5 --- /dev/null +++ b/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 }; +} diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js index b9f5b5b766..15410339ef 100644 --- a/test/js/samples/each-block-changed-check/expected-bundle.js +++ b/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 ) { diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 18ba61d59a..07feca6020 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/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 ) {