diff --git a/.changeset/khaki-guests-switch.md b/.changeset/khaki-guests-switch.md new file mode 100644 index 000000000000..f32e71084bef --- /dev/null +++ b/.changeset/khaki-guests-switch.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: correctly handle ssr for `reactivity/window` diff --git a/packages/svelte/src/reactivity/window/index.js b/packages/svelte/src/reactivity/window/index.js index 16e8b7b87b9a..8c50a5c440df 100644 --- a/packages/svelte/src/reactivity/window/index.js +++ b/packages/svelte/src/reactivity/window/index.js @@ -124,7 +124,7 @@ export const online = new ReactiveValue( * `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`. * Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level, * on Firefox and Safari it won't. - * @type {{ get current(): number }} + * @type {{ get current(): number | undefined }} * @since 5.11.0 */ export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio { @@ -144,11 +144,13 @@ export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio { } constructor() { - this.#update(); + if (BROWSER) { + this.#update(); + } } get current() { get(this.#dpr); - return window.devicePixelRatio; + return BROWSER ? window.devicePixelRatio : undefined; } })(); diff --git a/packages/svelte/tests/server-side-rendering/samples/reactivity-window/_expected.html b/packages/svelte/tests/server-side-rendering/samples/reactivity-window/_expected.html new file mode 100644 index 000000000000..ee65cb76c7d7 --- /dev/null +++ b/packages/svelte/tests/server-side-rendering/samples/reactivity-window/_expected.html @@ -0,0 +1 @@ +

devicePixelRatio:

innerHeight:

innerWidth:

online:

outerHeight:

outerWidth:

screenLeft:

screenTop:

scrollX:

scrollY:

\ No newline at end of file diff --git a/packages/svelte/tests/server-side-rendering/samples/reactivity-window/main.svelte b/packages/svelte/tests/server-side-rendering/samples/reactivity-window/main.svelte new file mode 100644 index 000000000000..e84e41bf637b --- /dev/null +++ b/packages/svelte/tests/server-side-rendering/samples/reactivity-window/main.svelte @@ -0,0 +1,14 @@ + + +

devicePixelRatio: {devicePixelRatio.current}

+

innerHeight: {innerHeight.current}

+

innerWidth: {innerWidth.current}

+

online: {online.current}

+

outerHeight: {outerHeight.current}

+

outerWidth: {outerWidth.current}

+

screenLeft: {screenLeft.current}

+

screenTop: {screenTop.current}

+

scrollX: {scrollX.current}

+

scrollY: {scrollY.current}

\ No newline at end of file diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 206f9931f50c..435476d7033a 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2015,7 +2015,7 @@ declare module 'svelte/reactivity/window' { * @since 5.11.0 */ export const devicePixelRatio: { - get current(): number; + get current(): number | undefined; }; class ReactiveValue {