Merge pull request #2880 from cudr/head_html_fix

repair dynamic {@html} in head
pull/2882/head
Rich Harris 5 years ago committed by GitHub
commit e291893fa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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});`);

@ -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');
}
}
}

@ -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});`);
}
}

@ -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);

@ -9,4 +9,4 @@ export default {
component.condition = true;
assert.equal(window.document.title, 'woo!!!');
}
};
};

@ -6,4 +6,4 @@
{#if condition}
<title>woo!!!</title>
{/if}
</svelte:head>
</svelte:head>

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

@ -0,0 +1,11 @@
<script>
export let condition;
</script>
<svelte:head>
{#if condition}
<title>woo!!!</title>
{:else}
<meta id="meta" name="title" content="woo!!!"/>
{/if}
</svelte:head>

@ -0,0 +1,19 @@
const foo = '<script type="application/json">{ "foo": "true" }</script>';
const bar = '<script type="application/json">{ "bar": "true" }</script>';
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);
}
};

@ -0,0 +1,11 @@
<script>
export let condition, foo, bar;
</script>
<svelte:head>
{#if condition}
{@html foo}
{:else}
{@html bar}
{/if}
</svelte:head>

@ -0,0 +1,11 @@
<script>
export let bar;
</script>
<svelte:head>
<meta id="meta" name="title" content="bar!!!"/>
{#if true}
{@html bar}
{/if}
<title>bar!!!</title>
</svelte:head>

@ -0,0 +1,7 @@
<script>
export let foo;
</script>
<svelte:head>
{@html foo}
</svelte:head>

@ -0,0 +1,26 @@
const foo = '<script type="application/json">{ "foo": "true" }</script>';
const bar = '<script type="application/json">{ "bar": "true" }</script>';
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);
}
};

@ -0,0 +1,12 @@
<script>
import Foo from './Foo.svelte';
import Bar from './Bar.svelte';
export let condition, foo, bar;
</script>
{#if condition === 1}
<Foo {foo} />
{:else if condition === 2}
<Bar {bar} />
{/if}
Loading…
Cancel
Save