fix: correctly handle ssr for reactivity/window (#14681)

Author: paoloricciuti

.changeset/khaki-guests-switch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly handle ssr for `reactivity/window`

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;
 	}
 })();

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><!--]-->

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>

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> {