From 7f709cef10c27d2965e11c054f3e68ed7fd4ce65 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 20 Sep 2017 18:14:31 -0400 Subject: [PATCH 1/3] refactor mounting logic --- src/generators/dom/Block.ts | 15 ++-------- src/generators/dom/index.ts | 3 ++ src/generators/dom/mountChildren.ts | 30 +++++++++++++++++++ src/generators/dom/visitors/Component.ts | 5 +++- src/generators/dom/visitors/EachBlock.ts | 24 +++++++++++---- .../dom/visitors/Element/Element.ts | 13 ++++---- src/generators/dom/visitors/IfBlock.ts | 15 ++++++++-- src/generators/dom/visitors/RawMustacheTag.ts | 28 +++++++++-------- src/generators/dom/visitors/Slot.ts | 26 ++++++---------- src/utils/CodeBuilder.ts | 28 ++++++++++++++--- 10 files changed, 124 insertions(+), 63 deletions(-) create mode 100644 src/generators/dom/mountChildren.ts diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts index 6b696b5ad5..50cbf204f9 100644 --- a/src/generators/dom/Block.ts +++ b/src/generators/dom/Block.ts @@ -130,15 +130,11 @@ export default class Block { claimStatement: string, parentNode: string ) { - const isToplevel = !parentNode; - this.addVariable(name); this.builders.create.addLine(`${name} = ${renderStatement};`); this.builders.claim.addLine(`${name} = ${claimStatement};`); - this.mount(name, parentNode); - - if (isToplevel) { + if (!parentNode) { this.builders.unmount.addLine(`@detachNode(${name});`); } } @@ -182,14 +178,6 @@ export default class Block { ); } - mount(name: string, parentNode: string) { - if (parentNode) { - this.builders.mount.addLine(`@appendNode(${name}, ${parentNode});`); - } else { - this.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`); - } - } - toString() { let introing; const hasIntros = !this.builders.intro.isEmpty(); @@ -223,6 +211,7 @@ export default class Block { if (this.first) { properties.addBlock(`first: null,`); this.builders.hydrate.addLine(`this.first = ${this.first};`); + this.builders.mount.addLineAtStart(`@insertNode(${this.first}, #target, anchor);`); } if (this.builders.create.isEmpty()) { diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index bccfa3288b..7250341607 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -13,6 +13,7 @@ import Generator from '../Generator'; import Stylesheet from '../../css/Stylesheet'; import preprocess from './preprocess'; import Block from './Block'; +import mountChildren from './mountChildren'; import { version } from '../../../package.json'; import { Parsed, CompileOptions, Node } from '../../interfaces'; @@ -105,6 +106,8 @@ export default function dom( visit(generator, block, state, node, [], []); }); + block.builders.mount.addBlock(mountChildren(parsed.html)); + const builder = new CodeBuilder(); const computationBuilder = new CodeBuilder(); const computationDeps = new Set(); diff --git a/src/generators/dom/mountChildren.ts b/src/generators/dom/mountChildren.ts new file mode 100644 index 0000000000..5ec66cfa37 --- /dev/null +++ b/src/generators/dom/mountChildren.ts @@ -0,0 +1,30 @@ +import CodeBuilder from '../../utils/CodeBuilder'; +import { Node } from '../../interfaces'; +import Block from './Block'; + +export default function mountChildren(node: Node, parentNode?: string) { + const builder = new CodeBuilder(); + + node.children.forEach((child: Node) => { + if (child.mountStatement) { + // TODO determining whether to use line or block should probably + // happen inside CodeBuilder + if (/\n/.test(child.mountStatement)) { + builder.addBlock(child.mountStatement); + } else { + builder.addLine(child.mountStatement); + } + } else { + if (child.shouldSkip) return; + if (child.type === 'Element' && child.name === ':Window') return; + + if (parentNode) { + builder.addLine(`@appendNode(${child.var}, ${parentNode});`); + } else { + builder.addLine(`@insertNode(${child.var}, #target, anchor);`); + } + } + }); + + return builder; +} \ No newline at end of file diff --git a/src/generators/dom/visitors/Component.ts b/src/generators/dom/visitors/Component.ts index 1a06ebadec..854924379f 100644 --- a/src/generators/dom/visitors/Component.ts +++ b/src/generators/dom/visitors/Component.ts @@ -3,6 +3,7 @@ import CodeBuilder from '../../../utils/CodeBuilder'; import visit from '../visit'; import { DomGenerator } from '../index'; import Block from '../Block'; +import mountChildren from '../mountChildren'; import getTailSnippet from '../../../utils/getTailSnippet'; import getObject from '../../../utils/getObject'; import getExpressionPrecedence from '../../../utils/getExpressionPrecedence'; @@ -60,6 +61,8 @@ export default function visitComponent( node.children.forEach((child: Node) => { visit(generator, block, node._state, child, elementStack, componentStack.concat(node)); }); + + block.builders.mount.addBlock(mountChildren(node, node._state.parentNode)); } const allContexts = new Set(); @@ -233,7 +236,7 @@ export default function visitComponent( `${name}._fragment.l( ${state.parentNodes} );` ); - block.builders.mount.addLine( + node.mountStatement = ( `${name}._mount(${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'});` ); diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts index a9259adf06..8cc688e838 100644 --- a/src/generators/dom/visitors/EachBlock.ts +++ b/src/generators/dom/visitors/EachBlock.ts @@ -2,6 +2,7 @@ import deindent from '../../../utils/deindent'; import visit from '../visit'; import { DomGenerator } from '../index'; import Block from '../Block'; +import mountChildren from '../mountChildren'; import isDomNode from './shared/isDomNode'; import { Node } from '../../../interfaces'; import { State } from '../interfaces'; @@ -79,11 +80,11 @@ export default function visitEachBlock( } `); - block.builders.mount.addBlock(deindent` + node.mountStatement += '\n\n' + deindent` if (${each_block_else}) { ${each_block_else}.${mountOrIntro}(${state.parentNode || '#target'}, null); } - `); + `; const parentNode = state.parentNode || `${anchor}.parentNode`; @@ -126,14 +127,23 @@ export default function visitEachBlock( `); } + // TODO do this elsewhere? + if (needsAnchor) node.mountStatement += '\n\n' + ( + state.parentNode ? `@appendNode(${anchor}, ${state.parentNode});` : `@insertNode(${anchor}, #target, anchor);` + ); + node.children.forEach((child: Node) => { visit(generator, node._block, node._state, child, elementStack, componentStack); }); + node._block.builders.mount.addBlock(mountChildren(node)); + if (node.else) { node.else.children.forEach((child: Node) => { visit(generator, node.else._block, node.else._state, child, elementStack, componentStack); }); + + node.else._block.builders.mount.addBlock(mountChildren(node.else)); } } @@ -164,6 +174,8 @@ function keyed( block.addVariable(head); block.addVariable(last); + let first; + if (node.children[0] && node.children[0].type === 'Element' && !generator.components.has(node.children[0].name)) { // TODO or text/tag/raw node._block.first = node.children[0]._state.parentNode; // TODO this is highly confusing @@ -209,13 +221,13 @@ function keyed( } `); - block.builders.mount.addBlock(deindent` + node.mountStatement = deindent` var ${iteration} = ${head}; while (${iteration}) { ${iteration}.${mountOrIntro}(${targetNode}, ${anchorNode}); ${iteration} = ${iteration}.next; } - `); + `; const dynamic = node._block.hasUpdateMethod; const parentNode = state.parentNode || `${anchor}.parentNode`; @@ -396,11 +408,11 @@ function unkeyed( } `); - block.builders.mount.addBlock(deindent` + node.mountStatement = deindent` for (var #i = 0; #i < ${iterations}.length; #i += 1) { ${iterations}[#i].${mountOrIntro}(${targetNode}, ${anchorNode}); } - `); + `; const dependencies = block.findDependencies(node.expression); const allDependencies = new Set(node._block.dependencies); diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts index 8b42d40a18..5c067b8b44 100644 --- a/src/generators/dom/visitors/Element/Element.ts +++ b/src/generators/dom/visitors/Element/Element.ts @@ -13,6 +13,7 @@ import isVoidElementName from '../../../../utils/isVoidElementName'; import addTransitions from './addTransitions'; import { DomGenerator } from '../../index'; import Block from '../../Block'; +import mountChildren from '../../mountChildren'; import { Node } from '../../../../interfaces'; import { State } from '../../interfaces'; import reservedNames from '../../../../utils/reservedNames'; @@ -86,12 +87,10 @@ export default function visitElement( `); } - if (parentNode) { - block.builders.mount.addLine( - `@appendNode(${name}, ${parentNode});` - ); - } else { - block.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`); + // TODO this is kinda messy — this is a hack to prevent the mount statement + // going in the usual place + if (node.slotted) { + node.mountStatement = `@appendNode(${node.var}, ${parentNode});`; } // add CSS encapsulation attribute @@ -216,6 +215,8 @@ export default function visitElement( node.children.forEach((child: Node) => { visit(generator, block, childState, child, elementStack.concat(node), componentStack); }); + + block.builders.mount.addBlock(mountChildren(node, node.var)); } if (node.lateUpdate) { diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts index 6c939a698e..acaa14397f 100644 --- a/src/generators/dom/visitors/IfBlock.ts +++ b/src/generators/dom/visitors/IfBlock.ts @@ -2,6 +2,7 @@ import deindent from '../../../utils/deindent'; import visit from '../visit'; import { DomGenerator } from '../index'; import Block from '../Block'; +import mountChildren from '../mountChildren'; import isDomNode from './shared/isDomNode'; import { Node } from '../../../interfaces'; import { State } from '../interfaces'; @@ -68,6 +69,8 @@ function visitChildren( node.children.forEach((child: Node) => { visit(generator, node._block, node._state, child, elementStack, componentStack); }); + + node._block.builders.mount.addBlock(mountChildren(node)); } export default function visitIfBlock( @@ -127,6 +130,11 @@ export default function visitIfBlock( `@createComment()`, state.parentNode ); + + // TODO do this elsewhere? + node.mountStatement += '\n\n' + ( + state.parentNode ? `@appendNode(${anchor}, ${state.parentNode})` : `@insertNode(${anchor}, #target, anchor)` + ); } } @@ -148,7 +156,7 @@ function simple( const targetNode = state.parentNode || '#target'; const anchorNode = state.parentNode ? 'null' : 'anchor'; - block.builders.mount.addLine( + node.mountStatement = ( `if (${name}) ${name}.${mountOrIntro}(${targetNode}, ${anchorNode});` ); @@ -251,7 +259,8 @@ function compound( const targetNode = state.parentNode || '#target'; const anchorNode = state.parentNode ? 'null' : 'anchor'; - block.builders.mount.addLine( + + node.mountStatement = ( `${if_name}${name}.${mountOrIntro}(${targetNode}, ${anchorNode});` ); @@ -350,7 +359,7 @@ function compoundWithOutros( const targetNode = state.parentNode || '#target'; const anchorNode = state.parentNode ? 'null' : 'anchor'; - block.builders.mount.addLine( + node.mountStatement = ( `${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${targetNode}, ${anchorNode});` ); diff --git a/src/generators/dom/visitors/RawMustacheTag.ts b/src/generators/dom/visitors/RawMustacheTag.ts index a6df2c07be..b6583f9ac0 100644 --- a/src/generators/dom/visitors/RawMustacheTag.ts +++ b/src/generators/dom/visitors/RawMustacheTag.ts @@ -55,8 +55,8 @@ export default function visitRawMustacheTag( ` ); - // we would have used comments here, but the `insertAdjacentHTML` api only - // exists for `Element`s. + let mountStatements: string[] = []; + if (needsAnchorBefore) { block.addElement( anchorBefore, @@ -64,6 +64,10 @@ export default function visitRawMustacheTag( `@createElement('noscript')`, state.parentNode ); + + mountStatements.push( + state.parentNode ? `@appendNode(${anchorBefore}, ${state.parentNode});` : `@insertNode(${anchorBefore}, #target, anchor);` + ); } function addAnchorAfter() { @@ -73,19 +77,17 @@ export default function visitRawMustacheTag( `@createElement('noscript')`, state.parentNode ); - } - if (needsAnchorAfter && anchorBefore === 'null') { - // anchorAfter needs to be in the DOM before we - // insert the HTML... - addAnchorAfter(); + mountStatements.push( + state.parentNode ? `@appendNode(${anchorAfter}, ${state.parentNode});` : `@insertNode(${anchorAfter}, #target, anchor);` + ); } - block.builders.mount.addLine(insert(init)); - block.builders.detachRaw.addBlock(detach); + if (needsAnchorAfter && anchorBefore === 'null') addAnchorAfter(); + mountStatements.push(insert(init)); + if (needsAnchorAfter && anchorBefore !== 'null') addAnchorAfter(); - if (needsAnchorAfter && anchorBefore !== 'null') { - // ...otherwise it should go afterwards - addAnchorAfter(); - } + node.mountStatement = mountStatements.join('\n'); + + block.builders.detachRaw.addBlock(detach); } \ No newline at end of file diff --git a/src/generators/dom/visitors/Slot.ts b/src/generators/dom/visitors/Slot.ts index ef3651e1bf..a72f6e68d7 100644 --- a/src/generators/dom/visitors/Slot.ts +++ b/src/generators/dom/visitors/Slot.ts @@ -2,6 +2,7 @@ import { DomGenerator } from '../index'; import deindent from '../../../utils/deindent'; import visit from '../visit'; import Block from '../Block'; +import mountChildren from '../mountChildren'; import getStaticAttributeValue from '../../../utils/getStaticAttributeValue'; import { Node } from '../../../interfaces'; import { State } from '../interfaces'; @@ -34,39 +35,30 @@ export default function visitSlot( if (needsAnchorBefore) block.addVariable(anchorBefore); if (needsAnchorAfter) block.addVariable(anchorAfter); - block.builders.create.pushCondition(`!${content_name}`); - block.builders.hydrate.pushCondition(`!${content_name}`); - block.builders.mount.pushCondition(`!${content_name}`); - block.builders.unmount.pushCondition(`!${content_name}`); - block.builders.destroy.pushCondition(`!${content_name}`); - node.children.forEach((child: Node) => { visit(generator, block, state, child, elementStack, componentStack); }); - block.builders.create.popCondition(); - block.builders.hydrate.popCondition(); - block.builders.mount.popCondition(); - block.builders.unmount.popCondition(); - block.builders.destroy.popCondition(); - - // TODO can we use an else here? if (state.parentNode) { - block.builders.mount.addBlock(deindent` + node.mountStatement = deindent` if (${content_name}) { ${needsAnchorBefore && `@appendNode(${anchorBefore} || (${anchorBefore} = @createComment()), ${state.parentNode});`} @appendNode(${content_name}, ${state.parentNode}); ${needsAnchorAfter && `@appendNode(${anchorAfter} || (${anchorAfter} = @createComment()), ${state.parentNode});`} + } else { + ${mountChildren(node, state.parentNode)} } - `); + `; } else { - block.builders.mount.addBlock(deindent` + node.mountStatement = deindent` if (${content_name}) { ${needsAnchorBefore && `@insertNode(${anchorBefore} || (${anchorBefore} = @createComment()), #target, anchor);`} @insertNode(${content_name}, #target, anchor); ${needsAnchorAfter && `@insertNode(${anchorAfter} || (${anchorAfter} = @createComment()), #target, anchor);`} + } else { + ${mountChildren(node, state.parentNode)} } - `); + `; } // if the slot is unmounted, move nodes back into the document fragment, diff --git a/src/utils/CodeBuilder.ts b/src/utils/CodeBuilder.ts index 5d0477ce68..2b5911c4a7 100644 --- a/src/utils/CodeBuilder.ts +++ b/src/utils/CodeBuilder.ts @@ -51,7 +51,12 @@ export default class CodeBuilder { this.last = ChunkType.Block; } - addLine(line: string) { + addLine(line: string | CodeBuilder) { + if (line instanceof CodeBuilder) { + if (!line.isEmpty()) this.addLine(line.toString()); + return; + } + this.reifyConditions(); if (this.lastCondition) { @@ -71,7 +76,12 @@ export default class CodeBuilder { if (!this.first) this.first = ChunkType.Line; } - addLineAtStart(line: string) { + addLineAtStart(line: string | CodeBuilder) { + if (line instanceof CodeBuilder) { + if (!line.isEmpty()) this.addLineAtStart(line.toString()); + return; + } + this.reifyConditions(); if (this.first === ChunkType.Block) { @@ -86,7 +96,12 @@ export default class CodeBuilder { if (!this.last) this.last = ChunkType.Line; } - addBlock(block: string) { + addBlock(block: string | CodeBuilder) { + if (block instanceof CodeBuilder) { + if (!block.isEmpty()) this.addBlock(block.toString()); + return; + } + this.reifyConditions(); if (this.indent) block = block.replace(/^/gm, `${this.indent}`); @@ -106,7 +121,12 @@ export default class CodeBuilder { if (!this.first) this.first = ChunkType.Block; } - addBlockAtStart(block: string) { + addBlockAtStart(block: string | CodeBuilder) { + if (block instanceof CodeBuilder) { + if (!block.isEmpty()) this.addBlockAtStart(block.toString()); + return; + } + this.reifyConditions(); if (this.result) { From 1a92b76a4a9759a169c9dce53961a5abf43d66e1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 20 Sep 2017 18:23:46 -0400 Subject: [PATCH 2/3] insert consecutive nodes in one go --- src/generators/dom/Block.ts | 2 +- src/generators/dom/index.ts | 2 +- src/generators/dom/mountChildren.ts | 32 +++++++++++-- src/generators/dom/visitors/EachBlock.ts | 2 +- .../dom/visitors/Element/Element.ts | 2 +- src/generators/dom/visitors/IfBlock.ts | 2 +- src/generators/dom/visitors/RawMustacheTag.ts | 4 +- src/generators/dom/visitors/Slot.ts | 12 ++--- src/shared/dom.js | 21 ++++++++ .../expected-bundle.js | 15 +++--- .../expected.js | 9 ++-- .../css-media-query/expected-bundle.js | 12 ++--- test/js/samples/css-media-query/expected.js | 6 +-- .../expected-bundle.js | 6 +-- .../css-shadow-dom-keyframes/expected.js | 4 +- .../expected-bundle.js | 46 +++++++++++------- .../each-block-changed-check/expected.js | 28 +++++------ .../event-handlers-custom/expected-bundle.js | 6 +-- .../samples/event-handlers-custom/expected.js | 4 +- .../if-block-no-update/expected-bundle.js | 11 +++-- .../js/samples/if-block-no-update/expected.js | 9 ++-- .../if-block-simple/expected-bundle.js | 9 ++-- test/js/samples/if-block-simple/expected.js | 7 +-- .../expected-bundle.js | 6 +-- .../expected.js | 4 +- .../expected-bundle.js | 6 +-- .../inline-style-optimized-url/expected.js | 4 +- .../inline-style-optimized/expected-bundle.js | 6 +-- .../inline-style-optimized/expected.js | 4 +- .../expected-bundle.js | 10 ++-- .../inline-style-unoptimized/expected.js | 6 +-- .../expected-bundle.js | 8 ++-- .../input-without-blowback-guard/expected.js | 6 +-- .../legacy-input-type/expected-bundle.js | 6 +-- test/js/samples/legacy-input-type/expected.js | 4 +- .../legacy-quote-class/expected-bundle.js | 6 +-- .../js/samples/legacy-quote-class/expected.js | 4 +- .../samples/media-bindings/expected-bundle.js | 6 +-- test/js/samples/media-bindings/expected.js | 4 +- .../non-imported-component/expected-bundle.js | 6 +-- .../non-imported-component/expected.js | 4 +- .../expected-bundle.js | 48 +++++++++++-------- .../use-elements-as-anchors/expected.js | 30 ++++++------ 43 files changed, 246 insertions(+), 183 deletions(-) diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts index 50cbf204f9..63de646fde 100644 --- a/src/generators/dom/Block.ts +++ b/src/generators/dom/Block.ts @@ -211,7 +211,7 @@ export default class Block { if (this.first) { properties.addBlock(`first: null,`); this.builders.hydrate.addLine(`this.first = ${this.first};`); - this.builders.mount.addLineAtStart(`@insertNode(${this.first}, #target, anchor);`); + this.builders.mount.addLineAtStart(`@insert(#target, anchor, ${this.first});`); } if (this.builders.create.isEmpty()) { diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 7250341607..646425d981 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -160,7 +160,7 @@ export default function dom( var style = @createElement("style"); style.id = '${generator.stylesheet.id}-style'; style.textContent = ${styles}; - @appendNode(style, document.head); + @append(document.head, style); } `); } diff --git a/src/generators/dom/mountChildren.ts b/src/generators/dom/mountChildren.ts index 5ec66cfa37..ba39d10403 100644 --- a/src/generators/dom/mountChildren.ts +++ b/src/generators/dom/mountChildren.ts @@ -5,8 +5,32 @@ import Block from './Block'; export default function mountChildren(node: Node, parentNode?: string) { const builder = new CodeBuilder(); + let consecutiveNodes: string[] = []; + + function flush() { + if (consecutiveNodes.length === 0) return; + + if (parentNode) { + if (consecutiveNodes.length === 1) { + builder.addLine(`@append(${parentNode}, ${consecutiveNodes[0]});`); + } else { + builder.addLine(`@appendAll(${parentNode}, [${consecutiveNodes.join(', ')}]);`); + } + } else { + if (consecutiveNodes.length === 1) { + builder.addLine(`@insert(#target, anchor, ${consecutiveNodes[0]});`); + } else { + builder.addLine(`@insertAll(#target, anchor, [${consecutiveNodes.join(', ')}]);`); + } + } + + consecutiveNodes = []; + } + node.children.forEach((child: Node) => { if (child.mountStatement) { + flush(); + // TODO determining whether to use line or block should probably // happen inside CodeBuilder if (/\n/.test(child.mountStatement)) { @@ -18,13 +42,11 @@ export default function mountChildren(node: Node, parentNode?: string) { if (child.shouldSkip) return; if (child.type === 'Element' && child.name === ':Window') return; - if (parentNode) { - builder.addLine(`@appendNode(${child.var}, ${parentNode});`); - } else { - builder.addLine(`@insertNode(${child.var}, #target, anchor);`); - } + consecutiveNodes.push(child.var); } }); + flush(); + return builder; } \ No newline at end of file diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts index 8cc688e838..4dba5068ee 100644 --- a/src/generators/dom/visitors/EachBlock.ts +++ b/src/generators/dom/visitors/EachBlock.ts @@ -129,7 +129,7 @@ export default function visitEachBlock( // TODO do this elsewhere? if (needsAnchor) node.mountStatement += '\n\n' + ( - state.parentNode ? `@appendNode(${anchor}, ${state.parentNode});` : `@insertNode(${anchor}, #target, anchor);` + state.parentNode ? `@append(${state.parentNode}, ${anchor});` : `@insert(#target, anchor, ${anchor});` ); node.children.forEach((child: Node) => { diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts index 5c067b8b44..0c523e1b8f 100644 --- a/src/generators/dom/visitors/Element/Element.ts +++ b/src/generators/dom/visitors/Element/Element.ts @@ -90,7 +90,7 @@ export default function visitElement( // TODO this is kinda messy — this is a hack to prevent the mount statement // going in the usual place if (node.slotted) { - node.mountStatement = `@appendNode(${node.var}, ${parentNode});`; + node.mountStatement = `@append(${parentNode}, ${node.var});`; } // add CSS encapsulation attribute diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts index acaa14397f..81c75b23a7 100644 --- a/src/generators/dom/visitors/IfBlock.ts +++ b/src/generators/dom/visitors/IfBlock.ts @@ -133,7 +133,7 @@ export default function visitIfBlock( // TODO do this elsewhere? node.mountStatement += '\n\n' + ( - state.parentNode ? `@appendNode(${anchor}, ${state.parentNode})` : `@insertNode(${anchor}, #target, anchor)` + state.parentNode ? `@append(${state.parentNode}, ${anchor})` : `@insert(#target, anchor, ${anchor})` ); } } diff --git a/src/generators/dom/visitors/RawMustacheTag.ts b/src/generators/dom/visitors/RawMustacheTag.ts index b6583f9ac0..9a9b61f888 100644 --- a/src/generators/dom/visitors/RawMustacheTag.ts +++ b/src/generators/dom/visitors/RawMustacheTag.ts @@ -66,7 +66,7 @@ export default function visitRawMustacheTag( ); mountStatements.push( - state.parentNode ? `@appendNode(${anchorBefore}, ${state.parentNode});` : `@insertNode(${anchorBefore}, #target, anchor);` + state.parentNode ? `@append(${state.parentNode}, ${anchorBefore});` : `@insert(#target, anchor, ${anchorBefore});` ); } @@ -79,7 +79,7 @@ export default function visitRawMustacheTag( ); mountStatements.push( - state.parentNode ? `@appendNode(${anchorAfter}, ${state.parentNode});` : `@insertNode(${anchorAfter}, #target, anchor);` + state.parentNode ? `@append(${state.parentNode}, ${anchorAfter});` : `@insert(#target, anchor, ${anchorAfter});` ); } diff --git a/src/generators/dom/visitors/Slot.ts b/src/generators/dom/visitors/Slot.ts index a72f6e68d7..c97a88d1c1 100644 --- a/src/generators/dom/visitors/Slot.ts +++ b/src/generators/dom/visitors/Slot.ts @@ -42,9 +42,9 @@ export default function visitSlot( if (state.parentNode) { node.mountStatement = deindent` if (${content_name}) { - ${needsAnchorBefore && `@appendNode(${anchorBefore} || (${anchorBefore} = @createComment()), ${state.parentNode});`} - @appendNode(${content_name}, ${state.parentNode}); - ${needsAnchorAfter && `@appendNode(${anchorAfter} || (${anchorAfter} = @createComment()), ${state.parentNode});`} + ${needsAnchorBefore && `@append(${state.parentNode}, ${anchorBefore} || (${anchorBefore} = @createComment()));`} + @append(${state.parentNode}, ${content_name}); + ${needsAnchorAfter && `@append(${state.parentNode}, ${anchorAfter} || (${anchorAfter} = @createComment()));`} } else { ${mountChildren(node, state.parentNode)} } @@ -52,9 +52,9 @@ export default function visitSlot( } else { node.mountStatement = deindent` if (${content_name}) { - ${needsAnchorBefore && `@insertNode(${anchorBefore} || (${anchorBefore} = @createComment()), #target, anchor);`} - @insertNode(${content_name}, #target, anchor); - ${needsAnchorAfter && `@insertNode(${anchorAfter} || (${anchorAfter} = @createComment()), #target, anchor);`} + ${needsAnchorBefore && `@insert(#target, anchor, ${anchorBefore} || (${anchorBefore} = @createComment()));`} + @insert(#target, anchor, ${content_name}); + ${needsAnchorAfter && `@insert(#target, anchor, ${anchorAfter} || (${anchorAfter} = @createComment()));`} } else { ${mountChildren(node, state.parentNode)} } diff --git a/src/shared/dom.js b/src/shared/dom.js index 29cf58e12c..e6754975c5 100644 --- a/src/shared/dom.js +++ b/src/shared/dom.js @@ -1,7 +1,28 @@ +export function append(parent, child) { + parent.appendChild(child); +} + +export function appendAll(parent, children) { + for (var i = 0; i < children.length; i += 1) { + parent.appendChild(children[i]); + } +} + +// TODO remove export function appendNode(node, target) { target.appendChild(node); } +export function insert(parent, next, child) { + parent.insertBefore(child, next); +} + +export function insertAll(parent, next, children) { + for (var i = 0; i < children.length; i += 1) { + parent.insertBefore(children[i], next); + } +} + export function insertNode(node, target, anchor) { target.insertBefore(node, anchor); } diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js index af3a60b888..ea2c075c72 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -13,12 +13,12 @@ function assign(target) { return target; } -function appendNode(node, target) { - target.appendChild(node); +function append(parent, child) { + parent.appendChild(child); } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -202,7 +202,7 @@ function add_css() { var style = createElement("style"); style.id = 'svelte-3590263702-style'; style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}"; - appendNode(style, document.head); + append(document.head, style); } function create_main_fragment(state, component) { @@ -220,8 +220,9 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); - appendNode(text, p); + append(p, text); + + insert(target, anchor, p); }, p: function update(changed, state) { diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 0ad2ccd29e..8570f9b86f 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { appendNode, assign, createElement, createText, detachNode, init, insertNode, noop, proto, setAttribute } from "svelte/shared.js"; +import { append, assign, createElement, createText, detachNode, init, insert, noop, proto, setAttribute } from "svelte/shared.js"; function data() { return { foo: 42 } @@ -13,7 +13,7 @@ function add_css() { var style = createElement("style"); style.id = 'svelte-3590263702-style'; style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}"; - appendNode(style, document.head); + append(document.head, style); } function create_main_fragment(state, component) { @@ -31,8 +31,9 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); - appendNode(text, p); + append(p, text); + + insert(target, anchor, p); }, p: function update(changed, state) { diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js index 862f721ebc..7e21043b5d 100644 --- a/test/js/samples/css-media-query/expected-bundle.js +++ b/test/js/samples/css-media-query/expected-bundle.js @@ -13,12 +13,12 @@ function assign(target) { return target; } -function appendNode(node, target) { - target.appendChild(node); +function append(parent, child) { + parent.appendChild(child); } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -194,7 +194,7 @@ function add_css() { var style = createElement("style"); style.id = 'svelte-2363328337-style'; style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}"; - appendNode(style, document.head); + append(document.head, style); } function create_main_fragment(state, component) { @@ -211,7 +211,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: noop, diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index 5b77893900..0fcf96eaaf 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { appendNode, assign, createElement, detachNode, init, insertNode, noop, proto, setAttribute } from "svelte/shared.js"; +import { append, assign, createElement, detachNode, init, insert, noop, proto, setAttribute } from "svelte/shared.js"; function encapsulateStyles(node) { setAttribute(node, "svelte-2363328337", ""); @@ -9,7 +9,7 @@ function add_css() { var style = createElement("style"); style.id = 'svelte-2363328337-style'; style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}"; - appendNode(style, document.head); + append(document.head, style); } function create_main_fragment(state, component) { @@ -26,7 +26,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: noop, diff --git a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js index 4c8fad71f7..e45b0faa15 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -188,7 +188,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: noop, diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index c004ec7df6..54fe34c63b 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { assign, createElement, detachNode, init, insert, noop, proto } from "svelte/shared.js"; function create_main_fragment(state, component) { var div; @@ -11,7 +11,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: noop, 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 33bd98ba74..9033bcc787 100644 --- a/test/js/samples/each-block-changed-check/expected-bundle.js +++ b/test/js/samples/each-block-changed-check/expected-bundle.js @@ -13,12 +13,24 @@ function assign(target) { return target; } -function appendNode(node, target) { - target.appendChild(node); +function append(parent, child) { + parent.appendChild(child); } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function appendAll(parent, children) { + for (var i = 0; i < children.length; i += 1) { + parent.appendChild(children[i]); + } +} + +function insert(parent, next, child) { + parent.insertBefore(child, next); +} + +function insertAll(parent, next, children) { + for (var i = 0; i < children.length; i += 1) { + parent.insertBefore(children[i], next); + } } function detachNode(node) { @@ -221,13 +233,13 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { + append(p, text_1); + for (var i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(target, anchor); } - insertNode(text, target, anchor); - insertNode(p, target, anchor); - appendNode(text_1, p); + insertAll(target, anchor, [text, p]); }, p: function update(changed, state) { @@ -297,18 +309,16 @@ function create_each_block(state, comments, comment, i, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); - appendNode(strong, div); - appendNode(text, strong); - appendNode(text_1, div); - appendNode(span, div); - appendNode(text_2, span); - appendNode(text_3, span); - appendNode(text_4, span); - appendNode(text_5, span); - appendNode(text_6, div); - appendNode(raw_before, div); + append(strong, text); + + appendAll(span, [text_2, text_3, text_4, text_5]); + + appendAll(div, [strong, text_1, span, text_6]); + + append(div, raw_before); raw_before.insertAdjacentHTML("afterend", raw_value); + + insert(target, anchor, div); }, p: function update(changed, state, comments, 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 37c12c1acd..fafbc74a2f 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { append, appendAll, assign, createElement, createText, destroyEach, detachAfter, detachNode, init, insert, insertAll, noop, proto } from "svelte/shared.js"; function create_main_fragment(state, component) { var text, p, text_1; @@ -24,13 +24,13 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { + append(p, text_1); + for (var i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(target, anchor); } - insertNode(text, target, anchor); - insertNode(p, target, anchor); - appendNode(text_1, p); + insertAll(target, anchor, [text, p]); }, p: function update(changed, state) { @@ -100,18 +100,16 @@ function create_each_block(state, comments, comment, i, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); - appendNode(strong, div); - appendNode(text, strong); - appendNode(text_1, div); - appendNode(span, div); - appendNode(text_2, span); - appendNode(text_3, span); - appendNode(text_4, span); - appendNode(text_5, span); - appendNode(text_6, div); - appendNode(raw_before, div); + append(strong, text); + + appendAll(span, [text_2, text_3, text_4, text_5]); + + appendAll(div, [strong, text_1, span, text_6]); + + append(div, raw_before); raw_before.insertAdjacentHTML("afterend", raw_value); + + insert(target, anchor, div); }, p: function update(changed, state, comments, comment, i) { diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js index a712f5b742..daa862c46b 100644 --- a/test/js/samples/event-handlers-custom/expected-bundle.js +++ b/test/js/samples/event-handlers-custom/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -206,7 +206,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(button, target, anchor); + insert(target, anchor, button); }, p: noop, diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js index 3739ada3a6..fd771891a5 100644 --- a/test/js/samples/event-handlers-custom/expected.js +++ b/test/js/samples/event-handlers-custom/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { assign, createElement, detachNode, init, insert, noop, proto } from "svelte/shared.js"; function foo( node, callback ) { // code goes here @@ -29,7 +29,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(button, target, anchor); + insert(target, anchor, button); }, p: noop, diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js index f68dbd24e3..f850184972 100644 --- a/test/js/samples/if-block-no-update/expected-bundle.js +++ b/test/js/samples/if-block-no-update/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -196,7 +196,8 @@ function create_main_fragment(state, component) { m: function mount(target, anchor) { if_block.m(target, anchor); - insertNode(if_block_anchor, target, anchor); + + insert(target, anchor, if_block_anchor); }, p: function update(changed, state) { @@ -231,7 +232,7 @@ function create_if_block(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -253,7 +254,7 @@ function create_if_block_1(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index 6a0a4456c5..f7aaa3a445 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createComment, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { assign, createComment, createElement, detachNode, init, insert, noop, proto } from "svelte/shared.js"; function create_main_fragment(state, component) { var if_block_anchor; @@ -15,7 +15,8 @@ function create_main_fragment(state, component) { m: function mount(target, anchor) { if_block.m(target, anchor); - insertNode(if_block_anchor, target, anchor); + + insert(target, anchor, if_block_anchor) }, p: function update(changed, state) { @@ -50,7 +51,7 @@ function create_if_block(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -72,7 +73,7 @@ function create_if_block_1(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js index 9c99dd0275..726f40fb5f 100644 --- a/test/js/samples/if-block-simple/expected-bundle.js +++ b/test/js/samples/if-block-simple/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -195,7 +195,8 @@ function create_main_fragment(state, component) { m: function mount(target, anchor) { if (if_block) if_block.m(target, anchor); - insertNode(if_block_anchor, target, anchor); + + insert(target, anchor, if_block_anchor); }, p: function update(changed, state) { @@ -234,7 +235,7 @@ function create_if_block(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index 9bfd8e211d..a7da883000 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createComment, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { assign, createComment, createElement, detachNode, init, insert, noop, proto } from "svelte/shared.js"; function create_main_fragment(state, component) { var if_block_anchor; @@ -14,7 +14,8 @@ function create_main_fragment(state, component) { m: function mount(target, anchor) { if (if_block) if_block.m(target, anchor); - insertNode(if_block_anchor, target, anchor); + + insert(target, anchor, if_block_anchor) }, p: function update(changed, state) { @@ -53,7 +54,7 @@ function create_if_block(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { diff --git a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js index 80998f97b2..a30f2d5ccf 100644 --- a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js +++ b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -197,7 +197,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: function update(changed, state) { diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js index a92f5d3053..94e2b0d6e7 100644 --- a/test/js/samples/inline-style-optimized-multiple/expected.js +++ b/test/js/samples/inline-style-optimized-multiple/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createElement, detachNode, init, insertNode, noop, proto, setStyle } from "svelte/shared.js"; +import { assign, createElement, detachNode, init, insert, noop, proto, setStyle } from "svelte/shared.js"; function create_main_fragment(state, component) { var div; @@ -16,7 +16,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: function update(changed, state) { diff --git a/test/js/samples/inline-style-optimized-url/expected-bundle.js b/test/js/samples/inline-style-optimized-url/expected-bundle.js index 236aaee071..637450cf01 100644 --- a/test/js/samples/inline-style-optimized-url/expected-bundle.js +++ b/test/js/samples/inline-style-optimized-url/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -196,7 +196,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: function update(changed, state) { diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js index e10acd8dd8..2125564ba8 100644 --- a/test/js/samples/inline-style-optimized-url/expected.js +++ b/test/js/samples/inline-style-optimized-url/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createElement, detachNode, init, insertNode, noop, proto, setStyle } from "svelte/shared.js"; +import { assign, createElement, detachNode, init, insert, noop, proto, setStyle } from "svelte/shared.js"; function create_main_fragment(state, component) { var div; @@ -15,7 +15,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: function update(changed, state) { diff --git a/test/js/samples/inline-style-optimized/expected-bundle.js b/test/js/samples/inline-style-optimized/expected-bundle.js index f8084094be..a68762755b 100644 --- a/test/js/samples/inline-style-optimized/expected-bundle.js +++ b/test/js/samples/inline-style-optimized/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -196,7 +196,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: function update(changed, state) { diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js index e9d42fec07..55c8e6a0e7 100644 --- a/test/js/samples/inline-style-optimized/expected.js +++ b/test/js/samples/inline-style-optimized/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createElement, detachNode, init, insertNode, noop, proto, setStyle } from "svelte/shared.js"; +import { assign, createElement, detachNode, init, insert, noop, proto, setStyle } from "svelte/shared.js"; function create_main_fragment(state, component) { var div; @@ -15,7 +15,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: function update(changed, state) { diff --git a/test/js/samples/inline-style-unoptimized/expected-bundle.js b/test/js/samples/inline-style-unoptimized/expected-bundle.js index d0b2a2dcfe..d86f482934 100644 --- a/test/js/samples/inline-style-unoptimized/expected-bundle.js +++ b/test/js/samples/inline-style-unoptimized/expected-bundle.js @@ -13,8 +13,10 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insertAll(parent, next, children) { + for (var i = 0; i < children.length; i += 1) { + parent.insertBefore(children[i], next); + } } function detachNode(node) { @@ -199,9 +201,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); - insertNode(text, target, anchor); - insertNode(div_1, target, anchor); + insertAll(target, anchor, [div, text, div_1]); }, p: function update(changed, state) { diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js index b2b4f5ad53..45794da65d 100644 --- a/test/js/samples/inline-style-unoptimized/expected.js +++ b/test/js/samples/inline-style-unoptimized/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createElement, createText, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { assign, createElement, createText, detachNode, init, insertAll, noop, proto } from "svelte/shared.js"; function create_main_fragment(state, component) { var div, text, div_1, div_1_style_value; @@ -18,9 +18,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); - insertNode(text, target, anchor); - insertNode(div_1, target, anchor); + insertAll(target, anchor, [div, text, div_1]); }, p: function update(changed, state) { diff --git a/test/js/samples/input-without-blowback-guard/expected-bundle.js b/test/js/samples/input-without-blowback-guard/expected-bundle.js index 792342604d..1d81ccf594 100644 --- a/test/js/samples/input-without-blowback-guard/expected-bundle.js +++ b/test/js/samples/input-without-blowback-guard/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -205,9 +205,9 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(input, target, anchor); - input.checked = state.foo; + + insert(target, anchor, input); }, p: function update(changed, state) { diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js index f9ae72b1bd..404d04a5e2 100644 --- a/test/js/samples/input-without-blowback-guard/expected.js +++ b/test/js/samples/input-without-blowback-guard/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { addListener, assign, createElement, detachNode, init, insertNode, proto, removeListener } from "svelte/shared.js"; +import { addListener, assign, createElement, detachNode, init, insert, proto, removeListener } from "svelte/shared.js"; function create_main_fragment(state, component) { var input; @@ -20,9 +20,9 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(input, target, anchor); - input.checked = state.foo; + + insert(target, anchor, input); }, p: function update(changed, state) { diff --git a/test/js/samples/legacy-input-type/expected-bundle.js b/test/js/samples/legacy-input-type/expected-bundle.js index 26f30cf194..2d8ca35854 100644 --- a/test/js/samples/legacy-input-type/expected-bundle.js +++ b/test/js/samples/legacy-input-type/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -198,7 +198,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(input, target, anchor); + insert(target, anchor, input); }, p: noop, diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js index 5309c86cfd..445215eff5 100644 --- a/test/js/samples/legacy-input-type/expected.js +++ b/test/js/samples/legacy-input-type/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, createElement, detachNode, init, insertNode, noop, proto, setInputType } from "svelte/shared.js"; +import { assign, createElement, detachNode, init, insert, noop, proto, setInputType } from "svelte/shared.js"; function create_main_fragment(state, component) { var input; @@ -15,7 +15,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(input, target, anchor); + insert(target, anchor, input); }, p: noop, diff --git a/test/js/samples/legacy-quote-class/expected-bundle.js b/test/js/samples/legacy-quote-class/expected-bundle.js index 3be6136b4a..6f6fc44d2c 100644 --- a/test/js/samples/legacy-quote-class/expected-bundle.js +++ b/test/js/samples/legacy-quote-class/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -223,7 +223,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: noop, diff --git a/test/js/samples/legacy-quote-class/expected.js b/test/js/samples/legacy-quote-class/expected.js index 82eebe600c..adbee28704 100644 --- a/test/js/samples/legacy-quote-class/expected.js +++ b/test/js/samples/legacy-quote-class/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, children, claimElement, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { assign, children, claimElement, createElement, detachNode, init, insert, noop, proto } from "svelte/shared.js"; function create_main_fragment(state, component) { var div; @@ -23,7 +23,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); + insert(target, anchor, div); }, p: noop, diff --git a/test/js/samples/media-bindings/expected-bundle.js b/test/js/samples/media-bindings/expected-bundle.js index 820db0a4fe..8101b19469 100644 --- a/test/js/samples/media-bindings/expected-bundle.js +++ b/test/js/samples/media-bindings/expected-bundle.js @@ -13,8 +13,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -270,7 +270,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(audio, target, anchor); + insert(target, anchor, audio); }, p: function update(changed, state) { diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index 832826ffd5..ada2cc66a5 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { addListener, assign, callAll, createElement, detachNode, init, insertNode, proto, removeListener, timeRangesToArray } from "svelte/shared.js"; +import { addListener, assign, callAll, createElement, detachNode, init, insert, proto, removeListener, timeRangesToArray } from "svelte/shared.js"; function create_main_fragment(state, component) { var audio, audio_updating = false, audio_animationframe, audio_paused_value = true; @@ -77,7 +77,7 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(audio, target, anchor); + insert(target, anchor, audio); }, p: function update(changed, state) { diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js index 0aefe73b06..3227ccb55f 100644 --- a/test/js/samples/non-imported-component/expected-bundle.js +++ b/test/js/samples/non-imported-component/expected-bundle.js @@ -15,8 +15,8 @@ function assign(target) { return target; } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function insert(parent, next, child) { + parent.insertBefore(child, next); } function detachNode(node) { @@ -200,7 +200,7 @@ function create_main_fragment(state, component) { m: function mount(target, anchor) { imported._mount(target, anchor); - insertNode(text, target, anchor); + insert(target, anchor, text); nonimported._mount(target, anchor); }, diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index 1f07457149..e442f30083 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { assign, callAll, createText, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { assign, callAll, createText, detachNode, init, insert, noop, proto } from "svelte/shared.js"; import Imported from 'Imported.html'; @@ -24,7 +24,7 @@ function create_main_fragment(state, component) { m: function mount(target, anchor) { imported._mount(target, anchor); - insertNode(text, target, anchor); + insert(target, anchor, text); nonimported._mount(target, anchor); }, diff --git a/test/js/samples/use-elements-as-anchors/expected-bundle.js b/test/js/samples/use-elements-as-anchors/expected-bundle.js index 92e3f9bbd3..a673a37a36 100644 --- a/test/js/samples/use-elements-as-anchors/expected-bundle.js +++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js @@ -13,12 +13,24 @@ function assign(target) { return target; } -function appendNode(node, target) { - target.appendChild(node); +function append(parent, child) { + parent.appendChild(child); } -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); +function appendAll(parent, children) { + for (var i = 0; i < children.length; i += 1) { + parent.appendChild(children[i]); + } +} + +function insert(parent, next, child) { + parent.insertBefore(child, next); +} + +function insertAll(parent, next, children) { + for (var i = 0; i < children.length; i += 1) { + parent.insertBefore(children[i], next); + } } function detachNode(node) { @@ -225,21 +237,19 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); if (if_block) if_block.m(div, null); - appendNode(text, div); - appendNode(p, div); - appendNode(text_2, div); + appendAll(div, [text, p, text_2]); if (if_block_1) if_block_1.m(div, null); - appendNode(text_3, div); + append(div, text_3); if (if_block_2) if_block_2.m(div, null); - appendNode(text_4, div); - appendNode(p_1, div); - appendNode(text_6, div); + appendAll(div, [text_4, p_1, text_6]); if (if_block_3) if_block_3.m(div, null); - insertNode(text_8, target, anchor); + + insertAll(target, anchor, [div, text_8]); + if (if_block_4) if_block_4.m(target, anchor); - insertNode(if_block_4_anchor, target, anchor); + + insert(target, anchor, if_block_4_anchor); }, p: function update(changed, state) { @@ -336,7 +346,7 @@ function create_if_block(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -358,7 +368,7 @@ function create_if_block_1(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -380,7 +390,7 @@ function create_if_block_2(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -402,7 +412,7 @@ function create_if_block_3(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -424,7 +434,7 @@ function create_if_block_4(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index f23b9ec205..1fde7125e7 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { appendNode, assign, createComment, createElement, createText, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; +import { append, appendAll, assign, createComment, createElement, createText, detachNode, init, insert, insertAll, noop, proto } from "svelte/shared.js"; function create_main_fragment(state, component) { var div, text, p, text_2, text_3, text_4, p_1, text_6, text_8, if_block_4_anchor; @@ -36,21 +36,19 @@ function create_main_fragment(state, component) { }, m: function mount(target, anchor) { - insertNode(div, target, anchor); if (if_block) if_block.m(div, null); - appendNode(text, div); - appendNode(p, div); - appendNode(text_2, div); + appendAll(div, [text, p, text_2]); if (if_block_1) if_block_1.m(div, null); - appendNode(text_3, div); + append(div, text_3); if (if_block_2) if_block_2.m(div, null); - appendNode(text_4, div); - appendNode(p_1, div); - appendNode(text_6, div); + appendAll(div, [text_4, p_1, text_6]); if (if_block_3) if_block_3.m(div, null); - insertNode(text_8, target, anchor); + + insertAll(target, anchor, [div, text_8]); + if (if_block_4) if_block_4.m(target, anchor); - insertNode(if_block_4_anchor, target, anchor); + + insert(target, anchor, if_block_4_anchor) }, p: function update(changed, state) { @@ -147,7 +145,7 @@ function create_if_block(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -169,7 +167,7 @@ function create_if_block_1(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -191,7 +189,7 @@ function create_if_block_2(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -213,7 +211,7 @@ function create_if_block_3(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { @@ -235,7 +233,7 @@ function create_if_block_4(state, component) { }, m: function mount(target, anchor) { - insertNode(p, target, anchor); + insert(target, anchor, p); }, u: function unmount() { From 54af7fc6208e9c90e8d2f6f4009925d9d1aa7751 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 20 Sep 2017 20:35:51 -0400 Subject: [PATCH 3/3] unify append/appendAll --- src/generators/dom/mountChildren.ts | 12 ++---------- src/shared/dom.js | 29 ++++++----------------------- 2 files changed, 8 insertions(+), 33 deletions(-) diff --git a/src/generators/dom/mountChildren.ts b/src/generators/dom/mountChildren.ts index ba39d10403..3e032a5282 100644 --- a/src/generators/dom/mountChildren.ts +++ b/src/generators/dom/mountChildren.ts @@ -11,17 +11,9 @@ export default function mountChildren(node: Node, parentNode?: string) { if (consecutiveNodes.length === 0) return; if (parentNode) { - if (consecutiveNodes.length === 1) { - builder.addLine(`@append(${parentNode}, ${consecutiveNodes[0]});`); - } else { - builder.addLine(`@appendAll(${parentNode}, [${consecutiveNodes.join(', ')}]);`); - } + builder.addLine(`@append(${parentNode}, ${consecutiveNodes.join(', ')});`); } else { - if (consecutiveNodes.length === 1) { - builder.addLine(`@insert(#target, anchor, ${consecutiveNodes[0]});`); - } else { - builder.addLine(`@insertAll(#target, anchor, [${consecutiveNodes.join(', ')}]);`); - } + builder.addLine(`@insert(#target, anchor, ${consecutiveNodes.join(', ')});`); } consecutiveNodes = []; diff --git a/src/shared/dom.js b/src/shared/dom.js index e6754975c5..2d0f672dd4 100644 --- a/src/shared/dom.js +++ b/src/shared/dom.js @@ -1,32 +1,15 @@ -export function append(parent, child) { - parent.appendChild(child); -} - -export function appendAll(parent, children) { - for (var i = 0; i < children.length; i += 1) { - parent.appendChild(children[i]); +export function append(parent) { + for (var i = 1; i < arguments.length; i += 1) { + parent.appendChild(arguments[i]); } } -// TODO remove -export function appendNode(node, target) { - target.appendChild(node); -} - -export function insert(parent, next, child) { - parent.insertBefore(child, next); -} - -export function insertAll(parent, next, children) { - for (var i = 0; i < children.length; i += 1) { - parent.insertBefore(children[i], next); +export function insert(parent, next) { + for (var i = 2; i < arguments.length; i += 1) { + parent.insertBefore(arguments[i], next); } } -export function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); -} - export function detachNode(node) { node.parentNode.removeChild(node); }