feat: add svelte/reactivity/window module

Author: Rich-Harris

.changeset/orange-ducks-obey.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add `svelte/reactivity/window` module

documentation/docs/98-reference/21-svelte-reactivity-window.md

@@ -0,0 +1,15 @@
+---
+title: svelte/reactivity/window
+---
+
+This module exports reactive versions of various `window` properties, which you can use in components and [deriveds]($derived) and [effects]($effect) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners.
+
+```svelte
+<script>
+	import { innerWidth, innerHeight } from 'svelte/reactivity/window';
+</script>
+
+<p>{innerWidth.current}x{innerHeight.current}</p>
+```
+
+> MODULE: svelte/reactivity/window

packages/svelte/package.json

@@ -73,6 +73,10 @@
       "browser": "./src/reactivity/index-client.js",
       "default": "./src/reactivity/index-server.js"
     },
+    "./reactivity/window": {
+      "types": "./types/index.d.ts",
+      "default": "./src/reactivity/window/index.js"
+    },
     "./server": {
       "types": "./types/index.d.ts",
       "default": "./src/server/index.js"

packages/svelte/scripts/generate-types.js

@@ -35,6 +35,7 @@ await createBundle({
 		[`${pkg.name}/legacy`]: `${dir}/src/legacy/legacy-client.js`,
 		[`${pkg.name}/motion`]: `${dir}/src/motion/public.d.ts`,
 		[`${pkg.name}/reactivity`]: `${dir}/src/reactivity/index-client.js`,
+		[`${pkg.name}/reactivity/window`]: `${dir}/src/reactivity/window/index.js`,
 		[`${pkg.name}/server`]: `${dir}/src/server/index.d.ts`,
 		[`${pkg.name}/store`]: `${dir}/src/store/public.d.ts`,
 		[`${pkg.name}/transition`]: `${dir}/src/transition/public.d.ts`,

packages/svelte/src/internal/client/dom/task.js

@@ -1,7 +1,7 @@
 import { run_all } from '../../shared/utils.js';
 
 // Fallback for when requestIdleCallback is not available
-const request_idle_callback =
+export const request_idle_callback =
 	typeof requestIdleCallback === 'undefined'
 		? (/** @type {() => void} */ cb) => setTimeout(cb, 1)
 		: requestIdleCallback;

packages/svelte/src/reactivity/media-query.js

@@ -1,5 +1,5 @@
-import { createSubscriber } from './create-subscriber.js';
 import { on } from '../events/index.js';
+import { ReactiveValue } from './reactive-value.js';
 
 /**
  * Creates a media query and provides a `current` property that reflects whether or not it matches.
@@ -16,26 +16,19 @@ import { on } from '../events/index.js';
  *
  * <h1>{large.current ? 'large screen' : 'small screen'}</h1>
  * ```
+ * @extends {ReactiveValue<boolean>}
  * @since 5.7.0
  */
-export class MediaQuery {
-	#query;
-	#subscribe = createSubscriber((update) => {
-		return on(this.#query, 'change', update);
-	});
-
-	get current() {
-		this.#subscribe();
-
-		return this.#query.matches;
-	}
-
+export class MediaQuery extends ReactiveValue {
 	/**
 	 * @param {string} query A media query string
-	 * @param {boolean} [matches] Fallback value for the server
+	 * @param {boolean} [fallback] Fallback value for the server
 	 */
-	constructor(query, matches) {
-		// For convenience (and because people likely forget them) we add the parentheses; double parentheses are not a problem
-		this.#query = window.matchMedia(`(${query})`);
+	constructor(query, fallback) {
+		const q = window.matchMedia(`(${query})`);
+		super(
+			() => q.matches,
+			(update) => on(q, 'change', update)
+		);
 	}
 }

packages/svelte/src/reactivity/reactive-value.js

@@ -0,0 +1,24 @@
+import { createSubscriber } from './create-subscriber.js';
+
+/**
+ * @template T
+ */
+export class ReactiveValue {
+	#fn;
+	#subscribe;
+
+	/**
+	 *
+	 * @param {() => T} fn
+	 * @param {(update: () => void) => void} onsubscribe
+	 */
+	constructor(fn, onsubscribe) {
+		this.#fn = fn;
+		this.#subscribe = createSubscriber(onsubscribe);
+	}
+
+	get current() {
+		this.#subscribe();
+		return this.#fn();
+	}
+}

packages/svelte/src/reactivity/window/index.js

@@ -0,0 +1,128 @@
+import { BROWSER } from 'esm-env';
+import { on } from '../../events/index.js';
+import { ReactiveValue } from '../reactive-value.js';
+import { get } from '../../internal/client';
+import { set, source } from '../../internal/client/reactivity/sources.js';
+
+/**
+ * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`
+ */
+export const scrollX = new ReactiveValue(
+	BROWSER ? () => window.scrollX : () => undefined,
+	(update) => on(window, 'scroll', update)
+);
+
+/**
+ * `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`
+ */
+export const scrollY = new ReactiveValue(
+	BROWSER ? () => window.scrollY : () => undefined,
+	(update) => on(window, 'scroll', update)
+);
+
+/**
+ * `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`
+ */
+export const innerWidth = new ReactiveValue(
+	BROWSER ? () => window.innerWidth : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`
+ */
+export const innerHeight = new ReactiveValue(
+	BROWSER ? () => window.innerHeight : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`
+ */
+export const outerWidth = new ReactiveValue(
+	BROWSER ? () => window.outerWidth : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`
+ */
+export const outerHeight = new ReactiveValue(
+	BROWSER ? () => window.outerHeight : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `screenLeft.current` is a reactive view of `window.screenLeft`. On the server it is `undefined`
+ */
+export const screenLeft = new ReactiveValue(
+	BROWSER ? () => window.screenLeft : () => undefined,
+	(update) => {
+		let screenLeft = window.screenLeft;
+
+		let frame = requestAnimationFrame(function check() {
+			frame = requestAnimationFrame(check);
+
+			if (screenLeft !== (screenLeft = window.screenLeft)) {
+				update();
+			}
+		});
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}
+);
+
+/**
+ * `screenTop.current` is a reactive view of `window.screenTop`. On the server it is `undefined`
+ */
+export const screenTop = new ReactiveValue(
+	BROWSER ? () => window.screenTop : () => undefined,
+	(update) => {
+		let screenTop = window.screenTop;
+
+		let frame = requestAnimationFrame(function check() {
+			frame = requestAnimationFrame(check);
+
+			if (screenTop !== (screenTop = window.screenTop)) {
+				update();
+			}
+		});
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}
+);
+
+/**
+ * `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
+ */
+export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio {
+	#dpr = source(BROWSER ? window.devicePixelRatio : undefined);
+
+	#update() {
+		const off = on(
+			window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`),
+			'change',
+			() => {
+				set(this.#dpr, window.devicePixelRatio);
+
+				off();
+				this.#update();
+			}
+		);
+	}
+
+	constructor() {
+		this.#update();
+	}
+
+	get current() {
+		get(this.#dpr);
+		return window.devicePixelRatio;
+	}
+})();