fix: correctly handle ssr for reactivity/window

sveltejs · Dec 11, 2024 · a424a56 · a424a56
1 parent 1d7f0fe
commit a424a56
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/.changeset/khaki-guests-switch.md 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
@@ -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
@@ -0,0 +1 @@
+<!--[--><p>devicePixelRatio: </p> <p>innerHeight: </p> <p>innerWidth: </p> <p>online: </p> <p>outerHeight: </p> <p>outerWidth: </p> <p>screenLeft: </p> <p>screenTop: </p> <p>scrollX: </p> <p>scrollY: </p><!--]-->
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
@@ -0,0 +1,14 @@
+<script>
+	import { devicePixelRatio, innerHeight, innerWidth, online, outerHeight, outerWidth, screenLeft, screenTop, scrollX, scrollY } from "svelte/reactivity/window";
+</script>
+
+<p>devicePixelRatio: {devicePixelRatio.current}</p>
+<p>innerHeight: {innerHeight.current}</p>
+<p>innerWidth: {innerWidth.current}</p>
+<p>online: {online.current}</p>
+<p>outerHeight: {outerHeight.current}</p>
+<p>outerWidth: {outerWidth.current}</p>
+<p>screenLeft: {screenLeft.current}</p>
+<p>screenTop: {screenTop.current}</p>
+<p>scrollX: {scrollX.current}</p>
+<p>scrollY: {scrollY.current}</p>
diff --git 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<T> {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!--[--><p>devicePixelRatio: </p> <p>innerHeight: </p> <p>innerWidth: </p> <p>online: </p> <p>outerHeight: </p> <p>outerWidth: </p> <p>screenLeft: </p> <p>screenTop: </p> <p>scrollX: </p> <p>scrollY: </p><!--]-->