createStartStopNotifier

Author: dummdidumm

packages/svelte/src/reactivity/index-server.js

@@ -14,3 +14,10 @@ export class MediaQuery {
 		this.current = matches;
 	}
 }
+
+/**
+ * @param {any} _
+ */
+export function createStartStopNotifier(_) {
+	return () => {};
+}

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

@@ -1,42 +1,20 @@
-import { get, tick } from '../internal/client/runtime.js';
+import { get } from '../internal/client/runtime.js';
 import { set, source } from '../internal/client/reactivity/sources.js';
-import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
+import { effect_tracking } from '../internal/client/reactivity/effects.js';
+import { createStartStopNotifier } from './start-stop-notifier.js';
 
 /**
  * Creates a media query and provides a `current` property that reflects whether or not it matches.
  */
 export class MediaQuery {
 	#version = source(0);
-	#subscribers = 0;
 	#query;
-	/** @type {any} */
-	#listener;
+	#notify;
 
 	get current() {
 		if (effect_tracking()) {
 			get(this.#version);
-
-			render_effect(() => {
-				if (this.#subscribers === 0) {
-					this.#listener = () => set(this.#version, this.#version.v + 1);
-					this.#query.addEventListener('change', this.#listener);
-				}
-
-				this.#subscribers += 1;
-
-				return () => {
-					tick().then(() => {
-						// Only count down after timeout, else we would reach 0 before our own render effect reruns,
-						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
-						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
-						this.#subscribers -= 1;
-
-						if (this.#subscribers === 0) {
-							this.#query.removeEventListener('change', this.#listener);
-						}
-					});
-				};
-			});
+			this.#notify();
 		}
 
 		return this.#query.matches;
@@ -48,5 +26,10 @@ export class MediaQuery {
 	 */
 	constructor(query, matches) {
 		this.#query = window.matchMedia(query);
+		this.#notify = createStartStopNotifier(() => {
+			const listener = () => set(this.#version, this.#version.v + 1);
+			this.#query.addEventListener('change', listener);
+			return () => this.#query.removeEventListener('change', listener);
+		});
 	}
 }

packages/svelte/src/reactivity/start-stop-notifier.js

@@ -0,0 +1,40 @@
+import { tick, untrack } from '../internal/client/runtime.js';
+import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
+
+/**
+ * Returns a function that, when invoked in a reactive context, calls the `start` function once,
+ * and calls the `stop` function returned from `start` when all reactive contexts it's called in
+ * are destroyed. This is useful for creating a notifier that starts and stops when the
+ * "subscriber" count goes from 0 to 1 and back to 0.
+ * @param {() => () => void} start
+ */
+export function createStartStopNotifier(start) {
+	let subscribers = 0;
+	/** @type {() => void} */
+	let stop;
+
+	return () => {
+		if (effect_tracking()) {
+			render_effect(() => {
+				if (subscribers === 0) {
+					stop = untrack(start);
+				}
+
+				subscribers += 1;
+
+				return () => {
+					tick().then(() => {
+						// Only count down after timeout, else we would reach 0 before our own render effect reruns,
+						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
+						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
+						subscribers -= 1;
+
+						if (subscribers === 0) {
+							stop();
+						}
+					});
+				};
+			});
+		}
+	};
+}

packages/svelte/src/store/index-client.js

@@ -1,14 +1,14 @@
 /** @import { Readable, Writable } from './public.js' */
-import { noop } from '../internal/shared/utils.js';
 import {
 	effect_root,
 	effect_tracking,
 	render_effect
 } from '../internal/client/reactivity/effects.js';
 import { source } from '../internal/client/reactivity/sources.js';
-import { get as get_source, tick } from '../internal/client/runtime.js';
+import { get as get_source } from '../internal/client/runtime.js';
 import { increment } from '../reactivity/utils.js';
 import { get, writable } from './shared/index.js';
+import { createStartStopNotifier } from '../reactivity/start-stop-notifier.js';
 
 export { derived, get, readable, readonly, writable } from './shared/index.js';
 
@@ -110,42 +110,24 @@ export function toStore(get, set) {
 export function fromStore(store) {
 	let value = /** @type {V} */ (undefined);
 	let version = source(0);
-	let subscribers = 0;
 
-	let unsubscribe = noop;
+	const notify = createStartStopNotifier(() => {
+		let ran = false;
+
+		const unsubscribe = store.subscribe((v) => {
+			value = v;
+			if (ran) increment(version);
+		});
+
+		ran = true;
+
+		return unsubscribe;
+	});
 
 	function current() {
 		if (effect_tracking()) {
 			get_source(version);
-
-			render_effect(() => {
-				if (subscribers === 0) {
-					let ran = false;
-
-					unsubscribe = store.subscribe((v) => {
-						value = v;
-						if (ran) increment(version);
-					});
-
-					ran = true;
-				}
-
-				subscribers += 1;
-
-				return () => {
-					tick().then(() => {
-						// Only count down after timeout, else we would reach 0 before our own render effect reruns,
-						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
-						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
-						subscribers -= 1;
-
-						if (subscribers === 0) {
-							unsubscribe();
-						}
-					});
-				};
-			});
-
+			notify();
 			return value;
 		}
 

packages/svelte/types/index.d.ts

@@ -1726,12 +1726,15 @@ declare module 'svelte/reactivity' {
 		#private;
 	}
 	/**
-	 * Creates a media query and provides a `matches` property that reflects its current state.
+	 * Creates a media query and provides a `current` property that reflects whether or not it matches.
 	 */
 	export class MediaQuery {
-		
-		constructor(query: string);
-		get matches(): boolean;
+		/**
+		 * @param query A media query string (don't forget the braces)
+		 * @param matches Fallback value for the server
+		 */
+		constructor(query: string, matches?: boolean | undefined);
+		get current(): boolean;
 		#private;
 	}