diff --git a/src/compile/render-dom/Block.ts b/src/compile/render-dom/Block.ts index 531826edcb..b95a1a8871 100644 --- a/src/compile/render-dom/Block.ts +++ b/src/compile/render-dom/Block.ts @@ -164,7 +164,7 @@ export default class Block { if (parent_node) { this.builders.mount.add_line(`@append(${parent_node}, ${name});`); - if (parent_node === 'document.head') this.builders.destroy.add_line(`@detach(${name});`); + if (parent_node === 'document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`); } else { this.builders.mount.add_line(`@insert(#target, ${name}, anchor);`); if (!no_detach) this.builders.destroy.add_conditional('detaching', `@detach(${name});`); diff --git a/src/compile/render-dom/wrappers/Head.ts b/src/compile/render-dom/wrappers/Head.ts index 9eb1369b6a..dbd38c1c80 100644 --- a/src/compile/render-dom/wrappers/Head.ts +++ b/src/compile/render-dom/wrappers/Head.ts @@ -30,6 +30,6 @@ export default class HeadWrapper extends Wrapper { } render(block: Block, parent_node: string, parent_nodes: string) { - this.fragment.render(block, 'document.head', null); + this.fragment.render(block, 'document.head', 'nodes'); } -} \ No newline at end of file +} diff --git a/src/compile/render-dom/wrappers/IfBlock.ts b/src/compile/render-dom/wrappers/IfBlock.ts index 0d56ea85b2..464d9c0a53 100644 --- a/src/compile/render-dom/wrappers/IfBlock.ts +++ b/src/compile/render-dom/wrappers/IfBlock.ts @@ -154,16 +154,18 @@ export default class IfBlockWrapper extends Wrapper { const vars = { name, anchor, if_name, has_else, has_transitions }; + const detaching = (parent_node && parent_node !== 'document.head') ? '' : 'detaching'; + if (this.node.else) { if (has_outros) { - this.render_compound_with_outros(block, parent_node, parent_nodes, dynamic, vars); + this.render_compound_with_outros(block, parent_node, parent_nodes, dynamic, vars, detaching); block.builders.outro.add_line(`if (${name}) ${name}.o();`); } else { - this.render_compound(block, parent_node, parent_nodes, dynamic, vars); + this.render_compound(block, parent_node, parent_nodes, dynamic, vars, detaching); } } else { - this.render_simple(block, parent_node, parent_nodes, dynamic, vars); + this.render_simple(block, parent_node, parent_nodes, dynamic, vars, detaching); if (has_outros) { block.builders.outro.add_line(`if (${name}) ${name}.o();`); @@ -201,7 +203,8 @@ export default class IfBlockWrapper extends Wrapper { parent_node: string, parent_nodes: string, dynamic, - { name, anchor, has_else, if_name, has_transitions } + { name, anchor, has_else, if_name, has_transitions }, + detaching ) { const select_block_type = this.renderer.component.get_unique_name(`select_block_type`); const current_block_type = block.get_unique_name(`current_block_type`); @@ -254,7 +257,7 @@ export default class IfBlockWrapper extends Wrapper { `); } - block.builders.destroy.add_line(`${if_name}${name}.d(${parent_node ? '' : 'detaching'});`); + block.builders.destroy.add_line(`${if_name}${name}.d(${detaching});`); } // if any of the siblings have outros, we need to keep references to the blocks @@ -264,7 +267,8 @@ export default class IfBlockWrapper extends Wrapper { parent_node: string, parent_nodes: string, dynamic, - { name, anchor, has_else, has_transitions } + { name, anchor, has_else, has_transitions }, + detaching ) { const select_block_type = this.renderer.component.get_unique_name(`select_block_type`); const current_block_type_index = block.get_unique_name(`current_block_type_index`); @@ -375,7 +379,7 @@ export default class IfBlockWrapper extends Wrapper { } block.builders.destroy.add_line(deindent` - ${if_current_block_type_index}${if_blocks}[${current_block_type_index}].d(${parent_node ? '' : 'detaching'}); + ${if_current_block_type_index}${if_blocks}[${current_block_type_index}].d(${detaching}); `); } @@ -384,7 +388,8 @@ export default class IfBlockWrapper extends Wrapper { parent_node: string, parent_nodes: string, dynamic, - { name, anchor, if_name, has_transitions } + { name, anchor, if_name, has_transitions }, + detaching ) { const branch = this.branches[0]; @@ -450,6 +455,6 @@ export default class IfBlockWrapper extends Wrapper { } `); - block.builders.destroy.add_line(`${if_name}${name}.d(${parent_node ? '' : 'detaching'});`); + block.builders.destroy.add_line(`${if_name}${name}.d(${detaching});`); } } diff --git a/src/compile/render-dom/wrappers/RawMustacheTag.ts b/src/compile/render-dom/wrappers/RawMustacheTag.ts index 326852bb18..15a7d41861 100644 --- a/src/compile/render-dom/wrappers/RawMustacheTag.ts +++ b/src/compile/render-dom/wrappers/RawMustacheTag.ts @@ -22,9 +22,18 @@ export default class RawMustacheTagWrapper extends Tag { render(block: Block, parent_node: string, parent_nodes: string) { const name = this.var; + const in_head = parent_node === 'document.head'; + const needs_anchors = !parent_node || in_head; + + // if in head always needs anchors + if (in_head) { + this.prev = null; + this.next = null; + } + // TODO use is_dom_node instead of type === 'Element'? - const needs_anchor_before = this.prev ? this.prev.node.type !== 'Element' : !parent_node; - const needs_anchor_after = this.next ? this.next.node.type !== 'Element' : !parent_node; + const needs_anchor_before = this.prev ? this.prev.node.type !== 'Element' : needs_anchors; + const needs_anchor_after = this.next ? this.next.node.type !== 'Element' : needs_anchors; const anchor_before = needs_anchor_before ? block.get_unique_name(`${name}_before`) @@ -90,7 +99,7 @@ export default class RawMustacheTagWrapper extends Tag { block.builders.mount.add_line(insert(init)); - if (!parent_node) { + if (needs_anchors) { block.builders.destroy.add_conditional('detaching', needs_anchor_before ? `${detach}\n@detach(${anchor_before});` : detach); diff --git a/test/runtime/samples/head-if-block/_config.js b/test/runtime/samples/head-if-block/_config.js index 26e1457be7..439ed2cb1b 100644 --- a/test/runtime/samples/head-if-block/_config.js +++ b/test/runtime/samples/head-if-block/_config.js @@ -9,4 +9,4 @@ export default { component.condition = true; assert.equal(window.document.title, 'woo!!!'); } -}; \ No newline at end of file +}; diff --git a/test/runtime/samples/head-if-block/main.svelte b/test/runtime/samples/head-if-block/main.svelte index a6b115bf28..1656278b9e 100644 --- a/test/runtime/samples/head-if-block/main.svelte +++ b/test/runtime/samples/head-if-block/main.svelte @@ -6,4 +6,4 @@ {#if condition} woo!!! {/if} - \ No newline at end of file + diff --git a/test/runtime/samples/head-if-else-block/_config.js b/test/runtime/samples/head-if-else-block/_config.js new file mode 100644 index 0000000000..7665bfe90b --- /dev/null +++ b/test/runtime/samples/head-if-else-block/_config.js @@ -0,0 +1,14 @@ +export default { + props: { + condition: false + }, + + test({ assert, component, target, window }) { + assert.equal(window.document.title, ''); + assert.equal(Boolean(window.document.getElementById('meta')), true); + + component.condition = true; + assert.equal(window.document.title, 'woo!!!'); + assert.equal(window.document.getElementById('meta'), null); + } +}; diff --git a/test/runtime/samples/head-if-else-block/main.svelte b/test/runtime/samples/head-if-else-block/main.svelte new file mode 100644 index 0000000000..a31bdf3330 --- /dev/null +++ b/test/runtime/samples/head-if-else-block/main.svelte @@ -0,0 +1,11 @@ + + + + {#if condition} + woo!!! + {:else} + + {/if} + diff --git a/test/runtime/samples/head-if-else-raw-dynamic/_config.js b/test/runtime/samples/head-if-else-raw-dynamic/_config.js new file mode 100644 index 0000000000..b6da617cb9 --- /dev/null +++ b/test/runtime/samples/head-if-else-raw-dynamic/_config.js @@ -0,0 +1,19 @@ +const foo = ''; +const bar = ''; + +export default { + props: { + condition: false, + foo, + bar + }, + + test({ assert, component, window }) { + assert.equal(window.document.head.innerHTML.includes(foo), false); + assert.equal(window.document.head.innerHTML.includes(bar), true); + + component.condition = true; + assert.equal(window.document.head.innerHTML.includes(foo), true); + assert.equal(window.document.head.innerHTML.includes(bar), false); + } +}; diff --git a/test/runtime/samples/head-if-else-raw-dynamic/main.svelte b/test/runtime/samples/head-if-else-raw-dynamic/main.svelte new file mode 100644 index 0000000000..ca322dad83 --- /dev/null +++ b/test/runtime/samples/head-if-else-raw-dynamic/main.svelte @@ -0,0 +1,11 @@ + + + + {#if condition} + {@html foo} + {:else} + {@html bar} + {/if} + diff --git a/test/runtime/samples/head-raw-dynamic/Bar.svelte b/test/runtime/samples/head-raw-dynamic/Bar.svelte new file mode 100644 index 0000000000..11e5cb9ee8 --- /dev/null +++ b/test/runtime/samples/head-raw-dynamic/Bar.svelte @@ -0,0 +1,11 @@ + + + + + {#if true} + {@html bar} + {/if} + bar!!! + diff --git a/test/runtime/samples/head-raw-dynamic/Foo.svelte b/test/runtime/samples/head-raw-dynamic/Foo.svelte new file mode 100644 index 0000000000..f4fd5741ac --- /dev/null +++ b/test/runtime/samples/head-raw-dynamic/Foo.svelte @@ -0,0 +1,7 @@ + + + + {@html foo} + diff --git a/test/runtime/samples/head-raw-dynamic/_config.js b/test/runtime/samples/head-raw-dynamic/_config.js new file mode 100644 index 0000000000..61e86727ff --- /dev/null +++ b/test/runtime/samples/head-raw-dynamic/_config.js @@ -0,0 +1,26 @@ +const foo = ''; +const bar = ''; + +export default { + props: { + condition: 1, + foo, + bar + }, + + test({ assert, component, window }) { + assert.equal(window.document.head.innerHTML.includes(foo), true); + + component.condition = false; + assert.equal(window.document.head.innerHTML.includes(foo), false); + + component.condition = 2; + assert.equal(window.document.title, 'bar!!!'); + assert.equal(window.document.head.innerHTML.includes(bar), true); + assert.equal(Boolean(window.document.getElementById('meta')), true); + + component.condition = false; + assert.equal(window.document.head.innerHTML.includes(bar), false); + assert.equal(window.document.getElementById('meta'), null); + } +}; diff --git a/test/runtime/samples/head-raw-dynamic/main.svelte b/test/runtime/samples/head-raw-dynamic/main.svelte new file mode 100644 index 0000000000..69f341ae36 --- /dev/null +++ b/test/runtime/samples/head-raw-dynamic/main.svelte @@ -0,0 +1,12 @@ + + +{#if condition === 1} + +{:else if condition === 2} + +{/if}