msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: preserve renderer type in copy() during SSR (#18616)

Browse Source 
Fixes #18404

`<svelte:head>` combined with two or more components that each use `bind:` on a child component's prop corrupts a renderer's `.type` during SSR, misplacing the head hydration marker in `<body>` instead of `<head>`.

Reason: `copy()` (`packages/svelte/src/internal/server/renderer.js`) rebuilds via `new Renderer(this.global, this.#parent)`. That constructor defaults `.type` from the *parent's* current type, not from `this.type`. To fix it we therefore reassign it (like already do for the boundary elsewhere)
pull/18537/merge
Nathan Asdarjian 4 weeks ago committed by GitHub
parent 9c2494b134
commit ee1249b43c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/hydration-head-renderer-type.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: don't corrupt renderer type during SSR's legacy `bind:` retry loop

1
packages/svelte/src/internal/server/renderer.js
Unescape View File

@ -451,6 +451,7 @@ export class Renderer {
*/ */
copy() { copy() {
const copy = new Renderer(this.global, this.#parent); const copy = new Renderer(this.global, this.#parent);
copy.type = this.type;
copy.#out = this.#out.map((item) => (item instanceof Renderer ? item.copy() : item)); copy.#out = this.#out.map((item) => (item instanceof Renderer ? item.copy() : item));
copy.promise = this.promise; copy.promise = this.promise;
return copy; return copy;

3
packages/svelte/tests/server-side-rendering/samples/head-with-multiple-binding-components/Foo.svelte
Unescape View File

@ -0,0 +1,3 @@
<script>
let { bar = $bindable() } = $props();
</script>

6
packages/svelte/tests/server-side-rendering/samples/head-with-multiple-binding-components/Wrapper.svelte
Unescape View File

@ -0,0 +1,6 @@
<script>
import Foo from './Foo.svelte';
let bar = $state();
</script>
<Foo bind:bar />

0
packages/svelte/tests/server-side-rendering/samples/head-with-multiple-binding-components/_expected.html
Unescape View File

4
packages/svelte/tests/server-side-rendering/samples/head-with-multiple-binding-components/_expected_head.html
Unescape View File

@ -0,0 +1,4 @@
<!--ssr:0-->
<link rel="canonical" href="/test">
<meta name="description" content="test">
<!--ssr:0-->

12
packages/svelte/tests/server-side-rendering/samples/head-with-multiple-binding-components/main.svelte
Unescape View File

@ -0,0 +1,12 @@
<script>
import Wrapper from './Wrapper.svelte';
</script>
<svelte:head>
<link rel="canonical" href="/test" />
<meta name="description" content="test" />
</svelte:head>
<Wrapper />
<Wrapper />
<Wrapper />
Write Preview
Loading…
Cancel
Save