Merge 27099b6b67 into 6641684bcf

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 (!parentNode) {
-
-		if (isToplevel) {
 			this.builders.unmount.addLine(`@detachNode(${name});`);
 		}
 	}
@@ -174,14 +170,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();
@@ -215,6 +203,7 @@ export default class Block {
 		if (this.first) {
 			properties.addBlock(`first: null,`);
 			this.builders.hydrate.addLine(`this.first = ${this.first};`);
+			this.builders.mount.addLineAtStart(`@insert(#target, anchor, ${this.first});`);
 		}
 
 		if (this.builders.create.isEmpty()) {

src/generators/dom/index.ts

@@ -14,6 +14,7 @@ import Generator from '../Generator';
 import Stylesheet from '../../css/Stylesheet';
 import preprocess from './preprocess';
 import Block from './Block';
+import mountChildren from './mountChildren';
 import { test } from '../../config';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
 
@@ -104,6 +105,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();
@@ -156,7 +159,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);
 			}
 		`);
 	}

src/generators/dom/mountChildren.ts

@@ -0,0 +1,44 @@
+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();
+
+	let consecutiveNodes: string[] = [];
+
+	function flush() {
+		if (consecutiveNodes.length === 0) return;
+
+		if (parentNode) {
+			builder.addLine(`@append(${parentNode}, ${consecutiveNodes.join(', ')});`);
+		} else {
+			builder.addLine(`@insert(#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)) {
+				builder.addBlock(child.mountStatement);
+			} else {
+				builder.addLine(child.mountStatement);
+			}
+		} else {
+			if (child.shouldSkip) return;
+			if (child.type === 'Element' && child.name === ':Window') return;
+
+			consecutiveNodes.push(child.var);
+		}
+	});
+
+	flush();
+
+	return builder;
+}

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';
@@ -49,6 +50,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();
@@ -222,7 +225,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'});`
 	);
 

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';
@@ -80,11 +81,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`;
 
@@ -127,14 +128,23 @@ export default function visitEachBlock(
 		`);
 	}
 
+	// TODO do this elsewhere?
+	if (needsAnchor) node.mountStatement += '\n\n' + (
+		state.parentNode ? `@append(${state.parentNode}, ${anchor});` : `@insert(#target, anchor, ${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));
 	}
 }
 
@@ -165,6 +175,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
@@ -210,13 +222,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 = isDomNode(node.parent, generator) ? node.parent.var : `${anchor}.parentNode`;
@@ -397,11 +409,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 allDependencies = new Set(node._block.dependencies);
 	const { dependencies } = node.metadata;

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';
@@ -71,16 +72,10 @@ export default function visitElement(
 		`);
 	}
 
-	if (parentNode) {
+	// TODO this is kinda messy — this is a hack to prevent the mount statement
-		block.builders.mount.addLine(
+	// going in the usual place
-			`@appendNode(${name}, ${parentNode});`
+	if (node.slotted) {
-		);
+		node.mountStatement = `@append(${parentNode}, ${node.var});`;
-	} else {
-		block.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
-
-		// TODO we eventually need to consider what happens to elements
-		// that belong to the same outgroup as an outroing element...
-		block.builders.unmount.addLine(`@detachNode(${name});`);
 	}
 
 	// add CSS encapsulation attribute
@@ -271,6 +266,8 @@ export default function visitElement(
 			);
 		});
 
+		block.builders.mount.addBlock(mountChildren(node, node.var));
+
 		if (initialProps.length) {
 			block.builders.hydrate.addBlock(deindent`
 				${name}._svelte = {

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';
@@ -70,6 +71,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(
@@ -129,6 +132,11 @@ export default function visitIfBlock(
 			`@createComment()`,
 			state.parentNode
 		);
+
+		// TODO do this elsewhere?
+		node.mountStatement += '\n\n' + (
+			state.parentNode ? `@append(${state.parentNode}, ${anchor})` : `@insert(#target, anchor, ${anchor})`
+		);
 	}
 }
 
@@ -149,7 +157,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});`
 	);
 
@@ -349,7 +358,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});`
 	);
 

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
+	let mountStatements: string[] = [];
-	// exists for `Element`s.
+
 	if (needsAnchorBefore) {
 		block.addElement(
 			anchorBefore,
@@ -64,6 +64,10 @@ export default function visitRawMustacheTag(
 			`@createElement('noscript')`,
 			state.parentNode
 		);
+
+		mountStatements.push(
+			state.parentNode ? `@append(${state.parentNode}, ${anchorBefore});` : `@insert(#target, anchor, ${anchorBefore});`
+		);
 	}
 
 	function addAnchorAfter() {
@@ -73,19 +77,17 @@ export default function visitRawMustacheTag(
 			`@createElement('noscript')`,
 			state.parentNode
 		);
-	}
 
-	if (needsAnchorAfter && anchorBefore === 'null') {
+		mountStatements.push(
-		// anchorAfter needs to be in the DOM before we
+			state.parentNode ? `@append(${state.parentNode}, ${anchorAfter});` : `@insert(#target, anchor, ${anchorAfter});`
-		// insert the HTML...
+		);
-		addAnchorAfter();
 	}
 
-	block.builders.mount.addLine(insert(init));
+	if (needsAnchorAfter && anchorBefore === 'null') addAnchorAfter();
-	block.builders.detachRaw.addBlock(detach);
+	mountStatements.push(insert(init));
+	if (needsAnchorAfter && anchorBefore !== 'null') addAnchorAfter();
 
-	if (needsAnchorAfter && anchorBefore !== 'null') {
+	node.mountStatement = mountStatements.join('\n');
-		// ...otherwise it should go afterwards
+
-		addAnchorAfter();
+	block.builders.detachRaw.addBlock(detach);
-	}
 }

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});`}
+				${needsAnchorBefore && `@append(${state.parentNode}, ${anchorBefore} || (${anchorBefore} = @createComment()));`}
-				@appendNode(${content_name}, ${state.parentNode});
+				@append(${state.parentNode}, ${content_name});
-				${needsAnchorAfter && `@appendNode(${anchorAfter} || (${anchorAfter} = @createComment()), ${state.parentNode});`}
+				${needsAnchorAfter && `@append(${state.parentNode}, ${anchorAfter} || (${anchorAfter} = @createComment()));`}
+			} else {
+				${mountChildren(node, state.parentNode)}
 			}
-		`);
+		`;
 	} else {
-		block.builders.mount.addBlock(deindent`
+		node.mountStatement = deindent`
 			if (${content_name}) {
-				${needsAnchorBefore && `@insertNode(${anchorBefore} || (${anchorBefore} = @createComment()), #target, anchor);`}
+				${needsAnchorBefore && `@insert(#target, anchor, ${anchorBefore} || (${anchorBefore} = @createComment()));`}
-				@insertNode(${content_name}, #target, anchor);
+				@insert(#target, anchor, ${content_name});
-				${needsAnchorAfter && `@insertNode(${anchorAfter} || (${anchorAfter} = @createComment()), #target, anchor);`}
+				${needsAnchorAfter && `@insert(#target, anchor, ${anchorAfter} || (${anchorAfter} = @createComment()));`}
+			} else {
+				${mountChildren(node, state.parentNode)}
 			}
-		`);
+		`;
 	}
 
 	// if the slot is unmounted, move nodes back into the document fragment,

src/shared/dom.js

@@ -1,9 +1,13 @@
-export function appendNode(node, target) {
+export function append(parent) {
-	target.appendChild(node);
+	for (var i = 1; i < arguments.length; i += 1) {
+		parent.appendChild(arguments[i]);
+	}
 }
 
-export function insertNode(node, target, anchor) {
+export function insert(parent, next) {
-	target.insertBefore(node, anchor);
+	for (var i = 2; i < arguments.length; i += 1) {
+		parent.insertBefore(arguments[i], next);
+	}
 }
 
 export function detachNode(node) {

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) {

test/js/samples/collapses-text-around-comments/expected-bundle.js

@@ -13,12 +13,12 @@ function assign(target) {
 	return target;
 }
 
-function appendNode(node, target) {
+function append(parent, child) {
-	target.appendChild(node);
+	parent.appendChild(child);
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -205,7 +205,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) {
@@ -223,8 +223,9 @@ function create_main_fragment(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			append(p, text);
-			appendNode(text, p);
+
+			insert(target, anchor, p);
 		},
 
 		p: function update(changed, state) {

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);
+			append(p, text);
-			appendNode(text, p);
+
+			insert(target, anchor, p);
 		},
 
 		p: function update(changed, state) {

test/js/samples/css-media-query/expected-bundle.js

@@ -13,12 +13,12 @@ function assign(target) {
 	return target;
 }
 
-function appendNode(node, target) {
+function append(parent, child) {
-	target.appendChild(node);
+	parent.appendChild(child);
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -197,7 +197,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) {
@@ -214,7 +214,7 @@ function create_main_fragment(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(div, target, anchor);
+			insert(target, anchor, div);
 		},
 
 		p: noop,

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,

test/js/samples/css-shadow-dom-keyframes/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -191,7 +191,7 @@ function create_main_fragment(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(div, target, anchor);
+			insert(target, anchor, div);
 		},
 
 		p: noop,

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,

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

@@ -13,12 +13,24 @@ function assign(target) {
 	return target;
 }
 
-function appendNode(node, target) {
+function append(parent, child) {
-	target.appendChild(node);
+	parent.appendChild(child);
 }
 
-function insertNode(node, target, anchor) {
+function appendAll(parent, children) {
-	target.insertBefore(node, anchor);
+	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) {
@@ -224,13 +236,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);
+			insertAll(target, anchor, [text, p]);
-			insertNode(p, target, anchor);
-			appendNode(text_1, p);
 		},
 
 		p: function update(changed, state) {
@@ -300,18 +312,16 @@ function create_each_block(state, comments, comment, i, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(div, target, anchor);
+			append(strong, text);
-			appendNode(strong, div);
+
-			appendNode(text, strong);
+			appendAll(span, [text_2, text_3, text_4, text_5]);
-			appendNode(text_1, div);
+
-			appendNode(span, div);
+			appendAll(div, [strong, text_1, span, text_6]);
-			appendNode(text_2, span);
+
-			appendNode(text_3, span);
+			append(div, raw_before);
-			appendNode(text_4, span);
-			appendNode(text_5, span);
-			appendNode(text_6, div);
-			appendNode(raw_before, div);
 			raw_before.insertAdjacentHTML("afterend", raw_value);
+
+			insert(target, anchor, div);
 		},
 
 		p: function update(changed, state, comments, comment, i) {

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);
+			insertAll(target, anchor, [text, p]);
-			insertNode(p, target, anchor);
-			appendNode(text_1, 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);
+			append(strong, text);
-			appendNode(strong, div);
+
-			appendNode(text, strong);
+			appendAll(span, [text_2, text_3, text_4, text_5]);
-			appendNode(text_1, div);
+
-			appendNode(span, div);
+			appendAll(div, [strong, text_1, span, text_6]);
-			appendNode(text_2, span);
+
-			appendNode(text_3, span);
+			append(div, raw_before);
-			appendNode(text_4, span);
-			appendNode(text_5, span);
-			appendNode(text_6, div);
-			appendNode(raw_before, div);
 			raw_before.insertAdjacentHTML("afterend", raw_value);
+
+			insert(target, anchor, div);
 		},
 
 		p: function update(changed, state, comments, comment, i) {

test/js/samples/event-handlers-custom/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -209,7 +209,7 @@ function create_main_fragment(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(button, target, anchor);
+			insert(target, anchor, button);
 		},
 
 		p: noop,

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,

test/js/samples/if-block-no-update/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -199,7 +199,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) {
@@ -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() {
@@ -256,7 +257,7 @@ function create_if_block_1(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			insert(target, anchor, p);
 		},
 
 		u: function unmount() {

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() {

test/js/samples/if-block-simple/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -198,7 +198,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) {
@@ -237,7 +238,7 @@ function create_if_block(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			insert(target, anchor, p);
 		},
 
 		u: function unmount() {

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() {

test/js/samples/inline-style-optimized-multiple/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -200,7 +200,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) {

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) {

test/js/samples/inline-style-optimized-url/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -199,7 +199,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) {

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) {

test/js/samples/inline-style-optimized/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -199,7 +199,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) {

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) {

test/js/samples/inline-style-unoptimized/expected-bundle.js

@@ -13,8 +13,10 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insertAll(parent, next, children) {
-	target.insertBefore(node, anchor);
+	for (var i = 0; i < children.length; i += 1) {
+		parent.insertBefore(children[i], next);
+	}
 }
 
 function detachNode(node) {
@@ -202,9 +204,7 @@ function create_main_fragment(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(div, target, anchor);
+			insertAll(target, anchor, [div, text, div_1]);
-			insertNode(text, target, anchor);
-			insertNode(div_1, target, anchor);
 		},
 
 		p: function update(changed, state) {

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);
+			insertAll(target, anchor, [div, text, div_1]);
-			insertNode(text, target, anchor);
-			insertNode(div_1, target, anchor);
 		},
 
 		p: function update(changed, state) {

test/js/samples/input-without-blowback-guard/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -208,9 +208,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) {

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) {

test/js/samples/legacy-input-type/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -201,7 +201,7 @@ function create_main_fragment(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(input, target, anchor);
+			insert(target, anchor, input);
 		},
 
 		p: noop,

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,

test/js/samples/legacy-quote-class/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -226,7 +226,7 @@ function create_main_fragment(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(div, target, anchor);
+			insert(target, anchor, div);
 		},
 
 		p: noop,

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,

test/js/samples/media-bindings/expected-bundle.js

@@ -13,8 +13,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -246,7 +246,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) {

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_is_paused = true, audio_updating = false, audio_animationframe;
@@ -50,7 +50,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) {

test/js/samples/non-imported-component/expected-bundle.js

@@ -15,8 +15,8 @@ function assign(target) {
 	return target;
 }
 
-function insertNode(node, target, anchor) {
+function insert(parent, next, child) {
-	target.insertBefore(node, anchor);
+	parent.insertBefore(child, next);
 }
 
 function detachNode(node) {
@@ -203,7 +203,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);
 		},
 

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);
 		},
 

test/js/samples/use-elements-as-anchors/expected-bundle.js

@@ -13,12 +13,24 @@ function assign(target) {
 	return target;
 }
 
-function appendNode(node, target) {
+function append(parent, child) {
-	target.appendChild(node);
+	parent.appendChild(child);
 }
 
-function insertNode(node, target, anchor) {
+function appendAll(parent, children) {
-	target.insertBefore(node, anchor);
+	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) {
@@ -228,21 +240,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);
+			appendAll(div, [text, p, text_2]);
-			appendNode(p, div);
-			appendNode(text_2, div);
 			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);
+			appendAll(div, [text_4, p_1, text_6]);
-			appendNode(p_1, div);
-			appendNode(text_6, div);
 			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) {
@@ -339,7 +349,7 @@ function create_if_block(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			insert(target, anchor, p);
 		},
 
 		u: function unmount() {
@@ -361,7 +371,7 @@ function create_if_block_1(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			insert(target, anchor, p);
 		},
 
 		u: function unmount() {
@@ -383,7 +393,7 @@ function create_if_block_2(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			insert(target, anchor, p);
 		},
 
 		u: function unmount() {
@@ -405,7 +415,7 @@ function create_if_block_3(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			insert(target, anchor, p);
 		},
 
 		u: function unmount() {
@@ -427,7 +437,7 @@ function create_if_block_4(state, component) {
 		},
 
 		m: function mount(target, anchor) {
-			insertNode(p, target, anchor);
+			insert(target, anchor, p);
 		},
 
 		u: function unmount() {

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);
+			appendAll(div, [text, p, text_2]);
-			appendNode(p, div);
-			appendNode(text_2, div);
 			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);
+			appendAll(div, [text_4, p_1, text_6]);
-			appendNode(p_1, div);
-			appendNode(text_6, div);
 			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() {