diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts index e0b723d6dd80..3869994ae436 100644 --- a/src/compiler/compile/render_dom/wrappers/Head.ts +++ b/src/compiler/compile/render_dom/wrappers/Head.ts @@ -36,7 +36,7 @@ export default class HeadWrapper extends Wrapper { let nodes; if (this.renderer.options.hydratable && this.fragment.nodes.length) { nodes = block.get_unique_name('head_nodes'); - block.chunks.claim.push(b`const ${nodes} = @query_selector_all('[data-svelte="${this.node.id}"]', @_document.head);`); + block.chunks.claim.push(b`const ${nodes} = @head_selector('${this.node.id}', @_document.head);`); } this.fragment.render(block, x`@_document.head` as unknown as Identifier, nodes); diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts index 7f7672349ed6..2af0343b2aef 100644 --- a/src/compiler/compile/render_ssr/handlers/Element.ts +++ b/src/compiler/compile/render_ssr/handlers/Element.ts @@ -157,10 +157,6 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio } }); - if (options.hydratable && options.head_id) { - renderer.add_string(` data-svelte="${options.head_id}"`); - } - renderer.add_string('>'); if (node_contents !== undefined) { diff --git a/src/compiler/compile/render_ssr/handlers/Head.ts b/src/compiler/compile/render_ssr/handlers/Head.ts index cf1e6bd555bb..f4bb3fa118e7 100644 --- a/src/compiler/compile/render_ssr/handlers/Head.ts +++ b/src/compiler/compile/render_ssr/handlers/Head.ts @@ -12,5 +12,5 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions) renderer.render(node.children, head_options); const result = renderer.pop(); - renderer.add_expression(x`$$result.head += ${result}, ""`); + renderer.add_expression(x`$$result.head += '' + ${result} + '', ""`); } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 072506629c18..37d920c6f528 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -640,6 +640,27 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray; } +export function head_selector(nodeId: string, head: HTMLElement) { + const result = []; + let started = 0; + + for (const node of head.childNodes) { + if (node.nodeType === 8 /* comment node */) { + const comment = node.textContent.trim(); + if (comment === `HEAD_${nodeId}_END`) { + started -= 1; + result.push(node); + } else if (comment === `HEAD_${nodeId}_START`) { + started += 1; + result.push(node); + } + } else if (started > 0) { + result.push(node); + } + } + return result; +} + export class HtmlTag { private is_svg = false; // parent for creating node diff --git a/test/hydration/samples/head-html-and-component/HeadNested.svelte b/test/hydration/samples/head-html-and-component/HeadNested.svelte new file mode 100644 index 000000000000..33bbdd1fd104 --- /dev/null +++ b/test/hydration/samples/head-html-and-component/HeadNested.svelte @@ -0,0 +1,2 @@ +{@html ''} + diff --git a/test/hydration/samples/head-html-and-component/Nested.svelte b/test/hydration/samples/head-html-and-component/Nested.svelte new file mode 100644 index 000000000000..28f5371910c5 --- /dev/null +++ b/test/hydration/samples/head-html-and-component/Nested.svelte @@ -0,0 +1,5 @@ + + + {@html ''} + + diff --git a/test/hydration/samples/head-html-and-component/_after.html b/test/hydration/samples/head-html-and-component/_after.html new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/test/hydration/samples/head-html-and-component/_after_head.html b/test/hydration/samples/head-html-and-component/_after_head.html new file mode 100644 index 000000000000..d7f94eda1b6b --- /dev/null +++ b/test/hydration/samples/head-html-and-component/_after_head.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/hydration/samples/head-html-and-component/_before.html b/test/hydration/samples/head-html-and-component/_before.html new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/test/hydration/samples/head-html-and-component/_before_head.html b/test/hydration/samples/head-html-and-component/_before_head.html new file mode 100644 index 000000000000..da265f414d23 --- /dev/null +++ b/test/hydration/samples/head-html-and-component/_before_head.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/test/hydration/samples/head-html-and-component/main.svelte b/test/hydration/samples/head-html-and-component/main.svelte new file mode 100644 index 000000000000..188ecace6bb4 --- /dev/null +++ b/test/hydration/samples/head-html-and-component/main.svelte @@ -0,0 +1,12 @@ + + + + {@html ''} + + + + + diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html index be7a01ba4ff7..bdd08c32f5fd 100644 --- a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html +++ b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html @@ -1,4 +1,6 @@ Some Title - - - + + + + + diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html index 107753cdd0e5..bdd08c32f5fd 100644 --- a/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html +++ b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html @@ -1,4 +1,6 @@ Some Title - - - \ No newline at end of file + + + + + diff --git a/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte b/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte new file mode 100644 index 000000000000..33bbdd1fd104 --- /dev/null +++ b/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte @@ -0,0 +1,2 @@ +{@html ''} + diff --git a/test/server-side-rendering/samples/head-html-and-component/Nested.svelte b/test/server-side-rendering/samples/head-html-and-component/Nested.svelte new file mode 100644 index 000000000000..28f5371910c5 --- /dev/null +++ b/test/server-side-rendering/samples/head-html-and-component/Nested.svelte @@ -0,0 +1,5 @@ + + + {@html ''} + + diff --git a/test/server-side-rendering/samples/head-html-and-component/_expected-head.html b/test/server-side-rendering/samples/head-html-and-component/_expected-head.html new file mode 100644 index 000000000000..da265f414d23 --- /dev/null +++ b/test/server-side-rendering/samples/head-html-and-component/_expected-head.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/test/server-side-rendering/samples/head-html-and-component/_expected.html b/test/server-side-rendering/samples/head-html-and-component/_expected.html new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/test/server-side-rendering/samples/head-html-and-component/main.svelte b/test/server-side-rendering/samples/head-html-and-component/main.svelte new file mode 100644 index 000000000000..188ecace6bb4 --- /dev/null +++ b/test/server-side-rendering/samples/head-html-and-component/main.svelte @@ -0,0 +1,12 @@ + + + + {@html ''} + + + + + diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html index 107753cdd0e5..bdd08c32f5fd 100644 --- a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html +++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html @@ -1,4 +1,6 @@ Some Title - - - \ No newline at end of file + + + + +