From 1bc675da508e355789f3eae187e4a393dbbf4e54 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 25 Feb 2018 10:36:54 -0500 Subject: [PATCH 1/5] fix a couple of TODOs --- src/generators/Generator.ts | 8 +------- src/generators/dom/Block.ts | 9 +++------ src/parse/state/tag.ts | 6 +++++- src/shared/index.js | 4 ++++ src/validate/html/index.ts | 21 +++++++++++---------- 5 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts index cac7858c19..6aac05286d 100644 --- a/src/generators/Generator.ts +++ b/src/generators/Generator.ts @@ -168,7 +168,7 @@ export default class Generator { if (options.customElement === true) { this.customElement = { tag: this.tag, - props: this.props // TODO autofill this in + props: this.props } } else { this.customElement = options.customElement; @@ -752,12 +752,6 @@ export default class Generator { if (node.type === 'Element' && (node.name === ':Component' || node.name === ':Self' || generator.components.has(node.name))) { node.type = 'Component'; Object.setPrototypeOf(node, nodes.Component.prototype); - } else if (node.name === ':Window') { // TODO do this in parse? - node.type = 'Window'; - Object.setPrototypeOf(node, nodes.Window.prototype); - } else if (node.name === ':Head') { // TODO do this in parse? - node.type = 'Head'; - Object.setPrototypeOf(node, nodes.Head.prototype); } else if (node.type === 'Element' && node.name === 'title' && parentIsHead(parent)) { // TODO do this in parse? node.type = 'Title'; Object.setPrototypeOf(node, nodes.Title.prototype); diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts index 0d786752dc..e393313e87 100644 --- a/src/generators/dom/Block.ts +++ b/src/generators/dom/Block.ts @@ -308,22 +308,19 @@ export default class Block { if (this.hasOutroMethod) { if (hasOutros) { properties.addBlock(deindent` - o: function outro(${this.alias('outrocallback')}) { + o: function outro(#outrocallback) { if (${outroing}) return; ${outroing} = true; ${hasIntros && `${introing} = false;`} - var ${this.alias('outros')} = ${this.outros}; + var #outros = ${this.outros}; ${this.builders.outro} }, `); } else { - // TODO should this be a helper? properties.addBlock(deindent` - o: function outro(outrocallback) { - outrocallback(); - }, + o: @run, `); } } diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts index 57e2b1bbb9..b24fa31ae3 100644 --- a/src/parse/state/tag.ts +++ b/src/parse/state/tag.ts @@ -109,10 +109,14 @@ export default function tag(parser: Parser) { } } + const type = metaTags.has(name) + ? name.slice(1) + : 'Element'; // TODO in v2, capitalised name means 'Component' + const element: Node = { start, end: null, // filled in later - type: 'Element', + type, name, attributes: [], children: [], diff --git a/src/shared/index.js b/src/shared/index.js index d9d6475e64..839f9a4e54 100644 --- a/src/shared/index.js +++ b/src/shared/index.js @@ -138,6 +138,10 @@ export function onDev(eventName, handler) { return on.call(this, eventName, handler); } +export function run(fn) { + fn(); +} + export function set(newState) { this._set(assign({}, newState)); if (this.root._lock) return; diff --git a/src/validate/html/index.ts b/src/validate/html/index.ts index 9ae50baca1..680b8b729b 100644 --- a/src/validate/html/index.ts +++ b/src/validate/html/index.ts @@ -7,11 +7,6 @@ import flattenReference from '../../utils/flattenReference'; import { Validator } from '../index'; import { Node } from '../../interfaces'; -const meta = new Map([ - [':Window', validateWindow], - [':Head', validateHead] -]); - function isEmptyBlock(node: Node) { if (!/Block$/.test(node.type) || !node.children) return false; if (node.children.length > 1) return false; @@ -26,11 +21,15 @@ export default function validateHtml(validator: Validator, html: Node) { const elementStack: Node[] = []; function visit(node: Node) { - if (node.type === 'Element') { - if (meta.has(node.name)) { - return meta.get(node.name)(validator, node, refs, refCallees); - } + if (node.type === 'Window') { + validateWindow(validator, node, refs, refCallees); + } + else if (node.type === 'Head') { + validateHead(validator, node, refs, refCallees); + } + + else if (node.type === 'Element') { const isComponent = node.name === ':Self' || node.name === ':Component' || @@ -49,7 +48,9 @@ export default function validateHtml(validator: Validator, html: Node) { if (!isComponent) { a11y(validator, node, elementStack); } - } else if (node.type === 'EachBlock') { + } + + else if (node.type === 'EachBlock') { if (validator.helpers.has(node.context)) { let c = node.expression.end; From c6bba03f1da00fd4982ff3de38d59e90eb1ebb3b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 25 Feb 2018 10:48:06 -0500 Subject: [PATCH 2/5] use external is-reference library --- src/generators/Generator.ts | 2 +- src/generators/dom/index.ts | 2 +- src/utils/isReference.ts | 34 -------------------- src/validate/js/utils/usesThisOrArguments.ts | 2 +- 4 files changed, 3 insertions(+), 37 deletions(-) delete mode 100644 src/utils/isReference.ts diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts index 6aac05286d..294c7fd8fa 100644 --- a/src/generators/Generator.ts +++ b/src/generators/Generator.ts @@ -1,10 +1,10 @@ import MagicString, { Bundle } from 'magic-string'; +import isReference from 'is-reference'; import { walk, childKeys } from 'estree-walker'; import { getLocator } from 'locate-character'; import deindent from '../utils/deindent'; import CodeBuilder from '../utils/CodeBuilder'; import getCodeFrame from '../utils/getCodeFrame'; -import isReference from '../utils/isReference'; import flattenReference from '../utils/flattenReference'; import reservedNames from '../utils/reservedNames'; import namespaces from '../utils/namespaces'; diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 1d25c4bcfc..90d94ce384 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -1,7 +1,7 @@ import MagicString from 'magic-string'; +import isReference from 'is-reference'; import { parseExpressionAt } from 'acorn'; import annotateWithScopes from '../../utils/annotateWithScopes'; -import isReference from '../../utils/isReference'; import { walk } from 'estree-walker'; import deindent from '../../utils/deindent'; import { stringify, escape } from '../../utils/stringify'; diff --git a/src/utils/isReference.ts b/src/utils/isReference.ts deleted file mode 100644 index 9a5f3688fb..0000000000 --- a/src/utils/isReference.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Node } from '../interfaces'; - -export default function isReference(node: Node, parent: Node): boolean { - if (node.type === 'MemberExpression') { - return !node.computed && isReference(node.object, node); - } - - if (node.type === 'Identifier') { - // the only time we could have an identifier node without a parent is - // if it's the entire body of a function without a block statement – - // i.e. an arrow function expression like `a => a` - if (!parent) return true; - - // TODO is this right? - if ( - parent.type === 'MemberExpression' || - parent.type === 'MethodDefinition' - ) { - return parent.computed || node === parent.object; - } - - // disregard the `bar` in `{ bar: foo }`, but keep it in `{ [bar]: foo }` - if (parent.type === 'Property') - return parent.computed || node === parent.value; - - // disregard the `bar` in `class Foo { bar () {...} }` - if (parent.type === 'MethodDefinition') return false; - - // disregard the `bar` in `export { foo as bar }` - if (parent.type === 'ExportSpecifier' && node !== parent.local) return; - - return true; - } -} diff --git a/src/validate/js/utils/usesThisOrArguments.ts b/src/validate/js/utils/usesThisOrArguments.ts index 958594a9eb..b727ed387b 100644 --- a/src/validate/js/utils/usesThisOrArguments.ts +++ b/src/validate/js/utils/usesThisOrArguments.ts @@ -1,5 +1,5 @@ import { walk } from 'estree-walker'; -import isReference from '../../../utils/isReference'; +import isReference from 'is-reference'; import { Node } from '../../../interfaces'; export default function usesThisOrArguments(node: Node) { From da155878a8dd7c4eff2c6b9105c2c4cca86c458f Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 25 Feb 2018 10:56:50 -0500 Subject: [PATCH 3/5] refactor IfBlock slightly --- src/generators/nodes/IfBlock.ts | 588 +++++++++++++++----------------- 1 file changed, 280 insertions(+), 308 deletions(-) diff --git a/src/generators/nodes/IfBlock.ts b/src/generators/nodes/IfBlock.ts index 17cd92bc29..8441bff714 100644 --- a/src/generators/nodes/IfBlock.ts +++ b/src/generators/nodes/IfBlock.ts @@ -101,7 +101,7 @@ export default class IfBlock extends Node { ? block.getUniqueName(`${name}_anchor`) : (this.next && this.next.var) || 'null'; - const branches = getBranches(this.generator, block, parentNode, parentNodes, this); + const branches = this.getBranches(block, parentNode, parentNodes, this); const hasElse = isElseBranch(branches[branches.length - 1]); const if_name = hasElse ? '' : `if (${name}) `; @@ -113,21 +113,12 @@ export default class IfBlock extends Node { if (this.else) { if (hasOutros) { - compoundWithOutros( - this.generator, - block, - parentNode, - parentNodes, - this, - branches, - dynamic, - vars - ); + this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars); } else { - compound(this.generator, block, parentNode, parentNodes, this, branches, dynamic, vars); + this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars); } } else { - simple(this.generator, block, parentNode, parentNodes, this, branches[0], dynamic, vars); + this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars); } block.builders.create.addLine(`${if_name}${name}.c();`); @@ -147,353 +138,334 @@ export default class IfBlock extends Node { ); } } -} - + buildCompound( + block: Block, + parentNode: string, + parentNodes: string, + branches, + dynamic, + { name, anchor, hasElse, if_name } + ) { + const select_block_type = this.generator.getUniqueName(`select_block_type`); + const current_block_type = block.getUniqueName(`current_block_type`); + const current_block_type_and = hasElse ? '' : `${current_block_type} && `; + + this.generator.blocks.push(deindent` + function ${select_block_type}(state) { + ${branches + .map(({ condition, block }) => `${condition ? `if (${condition}) ` : ''}return ${block};`) + .join('\n')} + } + `); + block.builders.init.addBlock(deindent` + var ${current_block_type} = ${select_block_type}(state); + var ${name} = ${current_block_type_and}${current_block_type}(#component, state); + `); + const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm'; -// TODO move all this into the class + const initialMountNode = parentNode || '#target'; + const anchorNode = parentNode ? 'null' : 'anchor'; + block.builders.mount.addLine( + `${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` + ); -function getBranches( - generator: DomGenerator, - block: Block, - parentNode: string, - parentNodes: string, - node: Node -) { - block.contextualise(node.expression); // TODO remove + const updateMountNode = this.getUpdateMountNode(anchor); - const branches = [ - { - condition: node.metadata.snippet, - block: node.block.name, - hasUpdateMethod: node.block.hasUpdateMethod, - hasIntroMethod: node.block.hasIntroMethod, - hasOutroMethod: node.block.hasOutroMethod, - }, - ]; + const changeBlock = deindent` + ${hasElse + ? deindent` + ${name}.u(); + ${name}.d(); + ` + : deindent` + if (${name}) { + ${name}.u(); + ${name}.d(); + }`} + ${name} = ${current_block_type_and}${current_block_type}(#component, state); + ${if_name}${name}.c(); + ${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); + `; - visitChildren(generator, block, node); + if (dynamic) { + block.builders.update.addBlock(deindent` + if (${current_block_type} === (${current_block_type} = ${select_block_type}(state)) && ${name}) { + ${name}.p(changed, state); + } else { + ${changeBlock} + } + `); + } else { + block.builders.update.addBlock(deindent` + if (${current_block_type} !== (${current_block_type} = ${select_block_type}(state))) { + ${changeBlock} + } + `); + } - if (isElseIf(node.else)) { - branches.push( - ...getBranches(generator, block, parentNode, parentNodes, node.else.children[0]) - ); - } else { - branches.push({ - condition: null, - block: node.else ? node.else.block.name : null, - hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false, - hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false, - hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false, - }); + block.builders.unmount.addLine(`${if_name}${name}.u();`); - if (node.else) { - visitChildren(generator, block, node.else); - } + block.builders.destroy.addLine(`${if_name}${name}.d();`); } - return branches; -} + // if any of the siblings have outros, we need to keep references to the blocks + // (TODO does this only apply to bidi transitions?) + buildCompoundWithOutros( + block: Block, + parentNode: string, + parentNodes: string, + branches, + dynamic, + { name, anchor, hasElse } + ) { + const select_block_type = block.getUniqueName(`select_block_type`); + const current_block_type_index = block.getUniqueName(`current_block_type_index`); + const previous_block_index = block.getUniqueName(`previous_block_index`); + const if_block_creators = block.getUniqueName(`if_block_creators`); + const if_blocks = block.getUniqueName(`if_blocks`); -function visitChildren( - generator: DomGenerator, - block: Block, - node: Node -) { - node.children.forEach((child: Node) => { - child.build(node.block, null, 'nodes'); - }); -} + const if_current_block_type_index = hasElse + ? '' + : `if (~${current_block_type_index}) `; + block.addVariable(current_block_type_index); + block.addVariable(name); + block.builders.init.addBlock(deindent` + var ${if_block_creators} = [ + ${branches.map(branch => branch.block).join(',\n')} + ]; -function simple( - generator: DomGenerator, - block: Block, - parentNode: string, - parentNodes: string, - node: Node, - branch, - dynamic, - { name, anchor, if_name } -) { - block.builders.init.addBlock(deindent` - var ${name} = (${branch.condition}) && ${branch.block}(#component, state); - `); + var ${if_blocks} = []; - const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm'; - const initialMountNode = parentNode || '#target'; - const anchorNode = parentNode ? 'null' : 'anchor'; + function ${select_block_type}(state) { + ${branches + .map(({ condition, block }, i) => `${condition ? `if (${condition}) ` : ''}return ${block ? i : -1};`) + .join('\n')} + } + `); - block.builders.mount.addLine( - `if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` - ); + if (hasElse) { + block.builders.init.addBlock(deindent` + ${current_block_type_index} = ${select_block_type}(state); + ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, state); + `); + } else { + block.builders.init.addBlock(deindent` + if (~(${current_block_type_index} = ${select_block_type}(state))) { + ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, state); + } + `); + } - const updateMountNode = node.getUpdateMountNode(anchor); + const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm'; + const initialMountNode = parentNode || '#target'; + const anchorNode = parentNode ? 'null' : 'anchor'; - const enter = dynamic - ? branch.hasIntroMethod + block.builders.mount.addLine( + `${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});` + ); + + const updateMountNode = this.getUpdateMountNode(anchor); + + const destroyOldBlock = deindent` + ${name}.o(function() { + ${if_blocks}[ ${previous_block_index} ].u(); + ${if_blocks}[ ${previous_block_index} ].d(); + ${if_blocks}[ ${previous_block_index} ] = null; + }); + `; + + const createNewBlock = deindent` + ${name} = ${if_blocks}[${current_block_type_index}]; + if (!${name}) { + ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, state); + ${name}.c(); + } + ${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); + `; + + const changeBlock = hasElse ? deindent` - if (${name}) { - ${name}.p(changed, state); - } else { - ${name} = ${branch.block}(#component, state); - if (${name}) ${name}.c(); - } + ${destroyOldBlock} - ${name}.i(${updateMountNode}, ${anchor}); + ${createNewBlock} ` : deindent` if (${name}) { - ${name}.p(changed, state); - } else { - ${name} = ${branch.block}(#component, state); - ${name}.c(); - ${name}.m(${updateMountNode}, ${anchor}); + ${destroyOldBlock} } - ` - : branch.hasIntroMethod - ? deindent` - if (!${name}) { - ${name} = ${branch.block}(#component, state); - ${name}.c(); - } - ${name}.i(${updateMountNode}, ${anchor}); - ` - : deindent` - if (!${name}) { - ${name} = ${branch.block}(#component, state); - ${name}.c(); - ${name}.m(${updateMountNode}, ${anchor}); + + if (~${current_block_type_index}) { + ${createNewBlock} + } else { + ${name} = null; } `; - // no `p()` here — we don't want to update outroing nodes, - // as that will typically result in glitching - const exit = branch.hasOutroMethod - ? deindent` - ${name}.o(function() { - ${name}.u(); - ${name}.d(); - ${name} = null; - }); - ` - : deindent` - ${name}.u(); - ${name}.d(); - ${name} = null; - `; - - block.builders.update.addBlock(deindent` - if (${branch.condition}) { - ${enter} - } else if (${name}) { - ${exit} + if (dynamic) { + block.builders.update.addBlock(deindent` + var ${previous_block_index} = ${current_block_type_index}; + ${current_block_type_index} = ${select_block_type}(state); + if (${current_block_type_index} === ${previous_block_index}) { + ${if_current_block_type_index}${if_blocks}[${current_block_type_index}].p(changed, state); + } else { + ${changeBlock} + } + `); + } else { + block.builders.update.addBlock(deindent` + var ${previous_block_index} = ${current_block_type_index}; + ${current_block_type_index} = ${select_block_type}(state); + if (${current_block_type_index} !== ${previous_block_index}) { + ${changeBlock} + } + `); } - `); - block.builders.unmount.addLine(`${if_name}${name}.u();`); - - block.builders.destroy.addLine(`${if_name}${name}.d();`); -} + block.builders.destroy.addLine(deindent` + ${if_current_block_type_index}{ + ${if_blocks}[${current_block_type_index}].u(); + ${if_blocks}[${current_block_type_index}].d(); + } + `); + } -function compound( - generator: DomGenerator, - block: Block, - parentNode: string, + buildSimple( + block: Block, + parentNode: string, parentNodes: string, - node: Node, - branches, - dynamic, - { name, anchor, hasElse, if_name } -) { - const select_block_type = generator.getUniqueName(`select_block_type`); - const current_block_type = block.getUniqueName(`current_block_type`); - const current_block_type_and = hasElse ? '' : `${current_block_type} && `; - - generator.blocks.push(deindent` - function ${select_block_type}(state) { - ${branches - .map(({ condition, block }) => `${condition ? `if (${condition}) ` : ''}return ${block};`) - .join('\n')} - } - `); - - block.builders.init.addBlock(deindent` - var ${current_block_type} = ${select_block_type}(state); - var ${name} = ${current_block_type_and}${current_block_type}(#component, state); - `); - - const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm'; + branch, + dynamic, + { name, anchor, if_name } + ) { + block.builders.init.addBlock(deindent` + var ${name} = (${branch.condition}) && ${branch.block}(#component, state); + `); - const initialMountNode = parentNode || '#target'; - const anchorNode = parentNode ? 'null' : 'anchor'; - block.builders.mount.addLine( - `${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` - ); + const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm'; + const initialMountNode = parentNode || '#target'; + const anchorNode = parentNode ? 'null' : 'anchor'; - const updateMountNode = node.getUpdateMountNode(anchor); + block.builders.mount.addLine( + `if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` + ); - const changeBlock = deindent` - ${hasElse + const updateMountNode = this.getUpdateMountNode(anchor); + + const enter = dynamic + ? branch.hasIntroMethod + ? deindent` + if (${name}) { + ${name}.p(changed, state); + } else { + ${name} = ${branch.block}(#component, state); + if (${name}) ${name}.c(); + } + + ${name}.i(${updateMountNode}, ${anchor}); + ` + : deindent` + if (${name}) { + ${name}.p(changed, state); + } else { + ${name} = ${branch.block}(#component, state); + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + } + ` + : branch.hasIntroMethod + ? deindent` + if (!${name}) { + ${name} = ${branch.block}(#component, state); + ${name}.c(); + } + ${name}.i(${updateMountNode}, ${anchor}); + ` + : deindent` + if (!${name}) { + ${name} = ${branch.block}(#component, state); + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + } + `; + + // no `p()` here — we don't want to update outroing nodes, + // as that will typically result in glitching + const exit = branch.hasOutroMethod ? deindent` - ${name}.u(); - ${name}.d(); - ` - : deindent` - if (${name}) { + ${name}.o(function() { ${name}.u(); ${name}.d(); - }`} - ${name} = ${current_block_type_and}${current_block_type}(#component, state); - ${if_name}${name}.c(); - ${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); - `; + ${name} = null; + }); + ` + : deindent` + ${name}.u(); + ${name}.d(); + ${name} = null; + `; - if (dynamic) { block.builders.update.addBlock(deindent` - if (${current_block_type} === (${current_block_type} = ${select_block_type}(state)) && ${name}) { - ${name}.p(changed, state); - } else { - ${changeBlock} + if (${branch.condition}) { + ${enter} + } else if (${name}) { + ${exit} } `); - } else { - block.builders.update.addBlock(deindent` - if (${current_block_type} !== (${current_block_type} = ${select_block_type}(state))) { - ${changeBlock} - } - `); - } - block.builders.unmount.addLine(`${if_name}${name}.u();`); + block.builders.unmount.addLine(`${if_name}${name}.u();`); - block.builders.destroy.addLine(`${if_name}${name}.d();`); -} + block.builders.destroy.addLine(`${if_name}${name}.d();`); + } -// if any of the siblings have outros, we need to keep references to the blocks -// (TODO does this only apply to bidi transitions?) -function compoundWithOutros( - generator: DomGenerator, - block: Block, - parentNode: string, - parentNodes: string, - node: Node, - branches, - dynamic, - { name, anchor, hasElse } -) { - const select_block_type = block.getUniqueName(`select_block_type`); - const current_block_type_index = block.getUniqueName(`current_block_type_index`); - const previous_block_index = block.getUniqueName(`previous_block_index`); - const if_block_creators = block.getUniqueName(`if_block_creators`); - const if_blocks = block.getUniqueName(`if_blocks`); - - const if_current_block_type_index = hasElse - ? '' - : `if (~${current_block_type_index}) `; - - block.addVariable(current_block_type_index); - block.addVariable(name); - - block.builders.init.addBlock(deindent` - var ${if_block_creators} = [ - ${branches.map(branch => branch.block).join(',\n')} + getBranches( + block: Block, + parentNode: string, + parentNodes: string, + node: Node + ) { + block.contextualise(node.expression); // TODO remove + + const branches = [ + { + condition: node.metadata.snippet, + block: node.block.name, + hasUpdateMethod: node.block.hasUpdateMethod, + hasIntroMethod: node.block.hasIntroMethod, + hasOutroMethod: node.block.hasOutroMethod, + }, ]; - var ${if_blocks} = []; + this.visitChildren(block, node); - function ${select_block_type}(state) { - ${branches - .map(({ condition, block }, i) => `${condition ? `if (${condition}) ` : ''}return ${block ? i : -1};`) - .join('\n')} - } - `); + if (isElseIf(node.else)) { + branches.push( + ...this.getBranches(block, parentNode, parentNodes, node.else.children[0]) + ); + } else { + branches.push({ + condition: null, + block: node.else ? node.else.block.name : null, + hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false, + hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false, + hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false, + }); - if (hasElse) { - block.builders.init.addBlock(deindent` - ${current_block_type_index} = ${select_block_type}(state); - ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, state); - `); - } else { - block.builders.init.addBlock(deindent` - if (~(${current_block_type_index} = ${select_block_type}(state))) { - ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, state); + if (node.else) { + this.visitChildren(block, node.else); } - `); - } - - const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm'; - const initialMountNode = parentNode || '#target'; - const anchorNode = parentNode ? 'null' : 'anchor'; - - block.builders.mount.addLine( - `${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});` - ); - - const updateMountNode = node.getUpdateMountNode(anchor); - - const destroyOldBlock = deindent` - ${name}.o(function() { - ${if_blocks}[ ${previous_block_index} ].u(); - ${if_blocks}[ ${previous_block_index} ].d(); - ${if_blocks}[ ${previous_block_index} ] = null; - }); - `; - - const createNewBlock = deindent` - ${name} = ${if_blocks}[${current_block_type_index}]; - if (!${name}) { - ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, state); - ${name}.c(); } - ${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); - `; - const changeBlock = hasElse - ? deindent` - ${destroyOldBlock} - - ${createNewBlock} - ` - : deindent` - if (${name}) { - ${destroyOldBlock} - } - - if (~${current_block_type_index}) { - ${createNewBlock} - } else { - ${name} = null; - } - `; - - if (dynamic) { - block.builders.update.addBlock(deindent` - var ${previous_block_index} = ${current_block_type_index}; - ${current_block_type_index} = ${select_block_type}(state); - if (${current_block_type_index} === ${previous_block_index}) { - ${if_current_block_type_index}${if_blocks}[${current_block_type_index}].p(changed, state); - } else { - ${changeBlock} - } - `); - } else { - block.builders.update.addBlock(deindent` - var ${previous_block_index} = ${current_block_type_index}; - ${current_block_type_index} = ${select_block_type}(state); - if (${current_block_type_index} !== ${previous_block_index}) { - ${changeBlock} - } - `); + return branches; } - block.builders.destroy.addLine(deindent` - ${if_current_block_type_index}{ - ${if_blocks}[${current_block_type_index}].u(); - ${if_blocks}[${current_block_type_index}].d(); - } - `); + visitChildren(block: Block, node: Node) { + node.children.forEach((child: Node) => { + child.build(node.block, null, 'nodes'); + }); + } } \ No newline at end of file From 7638964fc064389d1a02d54889f3f9194ac6aaa3 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 25 Feb 2018 11:13:02 -0500 Subject: [PATCH 4/5] use else instead of if (!previousCondition) where possible --- src/generators/nodes/Slot.ts | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/generators/nodes/Slot.ts b/src/generators/nodes/Slot.ts index 2a2251448d..dcb1f9ef8c 100644 --- a/src/generators/nodes/Slot.ts +++ b/src/generators/nodes/Slot.ts @@ -9,7 +9,7 @@ import Block from '../dom/Block'; export default class Slot extends Element { type: 'Element'; name: string; - attributes: Attribute[]; // TODO have more specific Attribute type + attributes: Attribute[]; children: Node[]; init( @@ -54,6 +54,9 @@ export default class Slot extends Element { if (needsAnchorBefore) block.addVariable(anchorBefore); if (needsAnchorAfter) block.addVariable(anchorAfter); + let mountBefore = block.builders.mount.toString(); + let unmountBefore = block.builders.unmount.toString(); + block.builders.create.pushCondition(`!${content_name}`); block.builders.hydrate.pushCondition(`!${content_name}`); block.builders.mount.pushCondition(`!${content_name}`); @@ -72,10 +75,13 @@ export default class Slot extends Element { block.builders.unmount.popCondition(); block.builders.destroy.popCondition(); - // TODO can we use an else here? + const mountLeadin = block.builders.mount.toString() !== mountBefore + ? `else` + : `if (${content_name})`; + if (parentNode) { block.builders.mount.addBlock(deindent` - if (${content_name}) { + ${mountLeadin} { ${needsAnchorBefore && `@appendNode(${anchorBefore} || (${anchorBefore} = @createComment()), ${parentNode});`} @appendNode(${content_name}, ${parentNode}); ${needsAnchorAfter && `@appendNode(${anchorAfter} || (${anchorAfter} = @createComment()), ${parentNode});`} @@ -83,7 +89,7 @@ export default class Slot extends Element { `); } else { block.builders.mount.addBlock(deindent` - if (${content_name}) { + ${mountLeadin} { ${needsAnchorBefore && `@insertNode(${anchorBefore} || (${anchorBefore} = @createComment()), #target, anchor);`} @insertNode(${content_name}, #target, anchor); ${needsAnchorAfter && `@insertNode(${anchorAfter} || (${anchorAfter} = @createComment()), #target, anchor);`} @@ -95,28 +101,31 @@ export default class Slot extends Element { // so that it can be reinserted later // TODO so that this can work with public API, component._slotted should // be all fragments, derived from options.slots. Not === options.slots - // TODO can we use an else here? + const unmountLeadin = block.builders.unmount.toString() !== unmountBefore + ? `else` + : `if (${content_name})`; + if (anchorBefore === 'null' && anchorAfter === 'null') { block.builders.unmount.addBlock(deindent` - if (${content_name}) { + ${unmountLeadin} { @reinsertChildren(${parentNode}, ${content_name}); } `); } else if (anchorBefore === 'null') { block.builders.unmount.addBlock(deindent` - if (${content_name}) { + ${unmountLeadin} { @reinsertBefore(${anchorAfter}, ${content_name}); } `); } else if (anchorAfter === 'null') { block.builders.unmount.addBlock(deindent` - if (${content_name}) { + ${unmountLeadin} { @reinsertAfter(${anchorBefore}, ${content_name}); } `); } else { block.builders.unmount.addBlock(deindent` - if (${content_name}) { + ${unmountLeadin} { @reinsertBetween(${anchorBefore}, ${anchorAfter}, ${content_name}); @detachNode(${anchorBefore}); @detachNode(${anchorAfter}); From f8d6d999304999508ec4f2025f6f6815c9a7544f Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 25 Feb 2018 11:20:13 -0500 Subject: [PATCH 5/5] implement remount on individual nodes --- src/generators/nodes/Component.ts | 34 ++++---------------------- src/generators/nodes/EachBlock.ts | 5 ++++ src/generators/nodes/Element.ts | 9 +++++++ src/generators/nodes/MustacheTag.ts | 4 +++ src/generators/nodes/RawMustacheTag.ts | 4 +++ src/generators/nodes/Text.ts | 4 +++ src/generators/nodes/shared/Node.ts | 4 +++ 7 files changed, 35 insertions(+), 29 deletions(-) diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts index d2cf47e22d..566b1c83a1 100644 --- a/src/generators/nodes/Component.ts +++ b/src/generators/nodes/Component.ts @@ -320,7 +320,7 @@ export default class Component extends Node { ${name} = new ${switch_vars.value}(${switch_vars.props}(state)); ${name}._fragment.c(); - ${this.children.map(child => remount(generator, child, name))} + ${this.children.map(child => child.remount(name))} ${name}._mount(${updateMountNode}, ${anchor}); ${eventHandlers.map(handler => deindent` @@ -398,6 +398,10 @@ export default class Component extends Node { `); } } + + remount(name: string) { + return `${this.var}._mount(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`; + } } function mungeAttribute(attribute: Node, block: Block): Attribute { @@ -547,32 +551,4 @@ function isComputed(node: Node) { } return false; -} - -function remount(generator: DomGenerator, node: Node, name: string) { - // TODO make this a method of the nodes - - if (node.type === 'Component') { - return `${node.var}._mount(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`; - } - - if (node.type === 'Element') { - const slot = node.attributes.find(attribute => attribute.name === 'slot'); - if (slot) { - return `@appendNode(${node.var}, ${name}._slotted.${node.getStaticAttributeValue('slot')});`; - } - - return `@appendNode(${node.var}, ${name}._slotted${generator.legacy ? `["default"]` : `.default`});`; - } - - if (node.type === 'Text' || node.type === 'MustacheTag' || node.type === 'RawMustacheTag') { - return `@appendNode(${node.var}, ${name}._slotted${generator.legacy ? `["default"]` : `.default`});`; - } - - if (node.type === 'EachBlock') { - // TODO consider keyed blocks - return `for (var #i = 0; #i < ${node.iterations}.length; #i += 1) ${node.iterations}[#i].m(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`; - } - - return `${node.var}.m(${name}._slotted${generator.legacy ? `["default"]` : `.default`}, null);`; } \ No newline at end of file diff --git a/src/generators/nodes/EachBlock.ts b/src/generators/nodes/EachBlock.ts index 11a8a0c632..97671c37b0 100644 --- a/src/generators/nodes/EachBlock.ts +++ b/src/generators/nodes/EachBlock.ts @@ -594,4 +594,9 @@ export default class EachBlock extends Node { block.builders.destroy.addBlock(`@destroyEach(${iterations});`); } + + remount(name: string) { + // TODO consider keyed blocks + return `for (var #i = 0; #i < ${this.iterations}.length; #i += 1) ${this.iterations}[#i].m(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`; + } } diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts index 13f8ccff5c..2a75f1fc36 100644 --- a/src/generators/nodes/Element.ts +++ b/src/generators/nodes/Element.ts @@ -671,6 +671,15 @@ export default class Element extends Node { isMediaNode() { return this.name === 'audio' || this.name === 'video'; } + + remount(name: string) { + const slot = this.attributes.find(attribute => attribute.name === 'slot'); + if (slot) { + return `@appendNode(${this.var}, ${name}._slotted.${this.getStaticAttributeValue('slot')});`; + } + + return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`; + } } function getRenderStatement( diff --git a/src/generators/nodes/MustacheTag.ts b/src/generators/nodes/MustacheTag.ts index 21b3b30df2..7960f06949 100644 --- a/src/generators/nodes/MustacheTag.ts +++ b/src/generators/nodes/MustacheTag.ts @@ -26,4 +26,8 @@ export default class MustacheTag extends Tag { parentNode ); } + + remount(name: string) { + return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`; + } } \ No newline at end of file diff --git a/src/generators/nodes/RawMustacheTag.ts b/src/generators/nodes/RawMustacheTag.ts index 6e9e5e664e..0d01135fa7 100644 --- a/src/generators/nodes/RawMustacheTag.ts +++ b/src/generators/nodes/RawMustacheTag.ts @@ -89,4 +89,8 @@ export default class RawMustacheTag extends Tag { addAnchorAfter(); } } + + remount(name: string) { + return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`; + } } \ No newline at end of file diff --git a/src/generators/nodes/Text.ts b/src/generators/nodes/Text.ts index b0e5a823c2..c1e401a665 100644 --- a/src/generators/nodes/Text.ts +++ b/src/generators/nodes/Text.ts @@ -58,4 +58,8 @@ export default class Text extends Node { parentNode ); } + + remount(name: string) { + return `@appendNode(${this.var}, ${name}._slotted${this.generator.legacy ? `["default"]` : `.default`});`; + } } \ No newline at end of file diff --git a/src/generators/nodes/shared/Node.ts b/src/generators/nodes/shared/Node.ts index 3461ddd6f2..1dad916983 100644 --- a/src/generators/nodes/shared/Node.ts +++ b/src/generators/nodes/shared/Node.ts @@ -161,4 +161,8 @@ export default class Node { getUpdateMountNode(anchor: string) { return this.parent.isDomNode() ? this.parent.var : `${anchor}.parentNode`; } + + remount(name: string) { + return `${this.var}.m(${name}._slotted${this.generator.legacy ? `["default"]` : `.default`}, null);`; + } } \ No newline at end of file