From b6bf735a23b36927d7f3b2414bc0555db5d5c567 Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Thu, 13 Feb 2025 23:09:56 +0100 Subject: [PATCH] fix: correctly ssr component in `svelte:head` with `$props.id()` or `css='injected'` (#15291) --- .changeset/thirty-feet-tap.md | 5 +++++ packages/svelte/src/internal/server/index.js | 9 ++++++--- packages/svelte/src/internal/server/types.d.ts | 2 ++ .../samples/head-component-props-id/HeadNested.svelte | 5 +++++ .../samples/head-component-props-id/_config.js | 3 +++ .../samples/head-component-props-id/main.svelte | 8 ++++++++ 6 files changed, 29 insertions(+), 3 deletions(-) create mode 100644 .changeset/thirty-feet-tap.md create mode 100644 packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte create mode 100644 packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js create mode 100644 packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte diff --git a/.changeset/thirty-feet-tap.md b/.changeset/thirty-feet-tap.md new file mode 100644 index 0000000000..5f7e589064 --- /dev/null +++ b/.changeset/thirty-feet-tap.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: correctly ssr component in `svelte:head` with `$props.id()` or `css='injected'` diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js index c4e5d318dc..728f2ebc2a 100644 --- a/packages/svelte/src/internal/server/index.js +++ b/packages/svelte/src/internal/server/index.js @@ -34,7 +34,9 @@ export function copy_payload({ out, css, head, uid }) { css: new Set(css), head: { title: head.title, - out: head.out + out: head.out, + css: new Set(head.css), + uid: head.uid }, uid }; @@ -99,12 +101,13 @@ function props_id_generator() { * @returns {RenderOutput} */ export function render(component, options = {}) { + const uid = options.uid ?? props_id_generator(); /** @type {Payload} */ const payload = { out: '', css: new Set(), - head: { title: '', out: '' }, - uid: options.uid ?? props_id_generator() + head: { title: '', out: '', css: new Set(), uid }, + uid }; const prev_on_destroy = on_destroy; diff --git a/packages/svelte/src/internal/server/types.d.ts b/packages/svelte/src/internal/server/types.d.ts index 8a241deecd..2fffdbbdf0 100644 --- a/packages/svelte/src/internal/server/types.d.ts +++ b/packages/svelte/src/internal/server/types.d.ts @@ -17,6 +17,8 @@ export interface Payload { head: { title: string; out: string; + uid: () => string; + css: Set<{ hash: string; code: string }>; }; /** Function that generates a unique ID */ uid: () => string; diff --git a/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte new file mode 100644 index 0000000000..0784208798 --- /dev/null +++ b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js new file mode 100644 index 0000000000..f47bee71df --- /dev/null +++ b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js @@ -0,0 +1,3 @@ +import { test } from '../../test'; + +export default test({}); diff --git a/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte new file mode 100644 index 0000000000..e32b40e9ed --- /dev/null +++ b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte @@ -0,0 +1,8 @@ + + + + + +