From ac287ed9f4bd37d0da03f0e27c738ca6b4672642 Mon Sep 17 00:00:00 2001 From: cudr Date: Sun, 26 May 2019 00:19:23 +0300 Subject: [PATCH 1/2] works correct --- src/compile/render-dom/Block.ts | 2 +- .../render-dom/wrappers/RawMustacheTag.ts | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/compile/render-dom/Block.ts b/src/compile/render-dom/Block.ts index e40b3ceb55f3..8baf6f18d477 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/RawMustacheTag.ts b/src/compile/render-dom/wrappers/RawMustacheTag.ts index eb71e16de9b5..8111e821a20b 100644 --- a/src/compile/render-dom/wrappers/RawMustacheTag.ts +++ b/src/compile/render-dom/wrappers/RawMustacheTag.ts @@ -21,9 +21,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`) @@ -89,7 +98,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); @@ -100,4 +109,4 @@ export default class RawMustacheTagWrapper extends Tag { add_anchor_after(); } } -} \ No newline at end of file +} From 7071ce86f533ff3eade1a3432a07c6e033123ec7 Mon Sep 17 00:00:00 2001 From: cudr Date: Mon, 27 May 2019 12:20:01 +0300 Subject: [PATCH 2/2] add tests --- src/compile/render-dom/wrappers/Head.ts | 4 +-- src/compile/render-dom/wrappers/IfBlock.ts | 25 +++++++++++------- test/runtime/samples/head-if-block/_config.js | 2 +- .../runtime/samples/head-if-block/main.svelte | 2 +- .../samples/head-if-else-block/_config.js | 14 ++++++++++ .../samples/head-if-else-block/main.svelte | 11 ++++++++ .../head-if-else-raw-dynamic/_config.js | 19 ++++++++++++++ .../head-if-else-raw-dynamic/main.svelte | 11 ++++++++ .../samples/head-raw-dynamic/Bar.svelte | 11 ++++++++ .../samples/head-raw-dynamic/Foo.svelte | 7 +++++ .../samples/head-raw-dynamic/_config.js | 26 +++++++++++++++++++ .../samples/head-raw-dynamic/main.svelte | 12 +++++++++ 12 files changed, 130 insertions(+), 14 deletions(-) create mode 100644 test/runtime/samples/head-if-else-block/_config.js create mode 100644 test/runtime/samples/head-if-else-block/main.svelte create mode 100644 test/runtime/samples/head-if-else-raw-dynamic/_config.js create mode 100644 test/runtime/samples/head-if-else-raw-dynamic/main.svelte create mode 100644 test/runtime/samples/head-raw-dynamic/Bar.svelte create mode 100644 test/runtime/samples/head-raw-dynamic/Foo.svelte create mode 100644 test/runtime/samples/head-raw-dynamic/_config.js create mode 100644 test/runtime/samples/head-raw-dynamic/main.svelte diff --git a/src/compile/render-dom/wrappers/Head.ts b/src/compile/render-dom/wrappers/Head.ts index 9eb1369b6ae8..dbd38c1c80ba 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 f3b5c7f2b2ae..67a5c1e424c3 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});`); } -} \ No newline at end of file +} diff --git a/test/runtime/samples/head-if-block/_config.js b/test/runtime/samples/head-if-block/_config.js index 26e1457be7f0..439ed2cb1be6 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 a6b115bf2842..1656278b9ed2 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 000000000000..7665bfe90bfc --- /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 000000000000..a31bdf3330b5 --- /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 000000000000..b6da617cb93c --- /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 000000000000..ca322dad8361 --- /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 000000000000..11e5cb9ee861 --- /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 000000000000..f4fd5741acd9 --- /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 000000000000..61e86727ff19 --- /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 000000000000..69f341ae3630 --- /dev/null +++ b/test/runtime/samples/head-raw-dynamic/main.svelte @@ -0,0 +1,12 @@ + + +{#if condition === 1} + +{:else if condition === 2} + +{/if}