@sveltejs/kit 2.60.0 → 2.61.0

package/src/runtime/app/server/remote/query.js

@@ -14,6 +14,7 @@ import {
 import { handle_error_and_jsonify } from '../../../server/utils.js';
 import { HttpError, SvelteKitError } from '@sveltejs/kit/internal';
 import { noop } from '../../../../utils/functions.js';
+import { SharedIterator } from '../../../../utils/shared-iterator.js';
 
 /**
  * Creates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.
@@ -153,24 +154,6 @@ function live(validate_or_fn, maybe_fn) {
 	const run = (event, state, get_input) =>
 		run_remote_generator(event, state, false, get_input, fn, __.name);
 
-	/**
-	 * @param {any} generator
-	 * @returns {Promise<any>}
-	 */
-	const first_value = async (generator) => {
-		try {
-			const { value, done } = await generator.next();
-
-			if (done) {
-				throw new Error(`query.live '${__.name}' did not yield a value`);
-			}
-
-			return value;
-		} finally {
-			await generator.return(undefined);
-		}
-	};
-
 	/** @type {RemoteQueryLiveInternals} */
 	const __ = {
 		type: 'query_live',
@@ -181,8 +164,8 @@ function live(validate_or_fn, maybe_fn) {
 		bind(payload, validated_arg) {
 			const { event, state } = get_request_store();
 
-			return create_live_query_resource(__, payload, state, () =>
-				first_value(run(event, state, () => validated_arg))
+			return create_live_query_resource(__, payload, state, event.request.signal, () =>
+				run(event, state, () => validated_arg)
 			);
 		}
 	};
@@ -198,8 +181,8 @@ function live(validate_or_fn, maybe_fn) {
 		const { event, state } = get_request_store();
 		const payload = stringify_remote_arg(arg, state.transport);
 
-		return create_live_query_resource(__, payload, state, () =>
-			first_value(run(event, state, () => validate(arg)))
+		return create_live_query_resource(__, payload, state, event.request.signal, () =>
+			run(event, state, () => validate(arg))
 		);
 	};
 
@@ -250,9 +233,6 @@ function batch(validate_or_fn, maybe_fn) {
 	/** @type {(arg?: any) => MaybePromise<Input>} */
 	const validate = create_validator(validate_or_fn, maybe_fn);
 
-	/** @type {Map<string, { get_validated: () => MaybePromise<any>, resolvers: Array<{resolve: (value: any) => void, reject: (error: any) => void}> }>} */
-	let batching = new Map();
-
 	/**
 	 * Enqueues a single call into the current batch (creating one if necessary)
 	 * and returns a promise that resolves with the result for this entry.
@@ -265,23 +245,29 @@ function batch(validate_or_fn, maybe_fn) {
 		const { event, state } = get_request_store();
 
 		return new Promise((resolve, reject) => {
-			const entry = batching.get(payload);
+			const batches = (state.remote.batches ??=
+				/** @type {NonNullable<typeof state.remote.batches>} */ (new Map()));
+			let batched = batches.get(__.id);
+			if (!batched) {
+				batched = new Map();
+				batches.set(__.id, batched);
+			}
+			const entry = batched.get(payload);
 
 			if (entry) {
 				entry.resolvers.push({ resolve, reject });
 				return;
 			}
 
-			batching.set(payload, {
+			batched.set(payload, {
 				get_validated,
 				resolvers: [{ resolve, reject }]
 			});
 
-			if (batching.size > 1) return;
+			if (batched.size > 1) return;
 
 			setTimeout(async () => {
-				const batched = batching;
-				batching = new Map();
+				batches.delete(__.id);
 				const entries = Array.from(batched.values());
 
 				try {
@@ -445,21 +431,17 @@ function create_query_resource(__, payload, state, fn) {
 			const value = is_immediate_refresh ? get_promise() : fn();
 			return update_refresh_value(refresh_context, value, is_immediate_refresh);
 		},
-		run() {
-			// potential TODO: if we want to be able to run queries at the top level of modules / outside of the request context, we could technically remove
-			// the requirement that `state` is defined, but that's kind of an annoying change to make, so we're going to wait on that until we have any sort of
-			// concrete use case.
-			if (!state.is_in_universal_load) {
-				throw new Error(
-					'On the server, .run() can only be called in universal `load` functions. Anywhere else, just await the query directly'
-				);
-			}
-			return get_response(__, payload, state, fn);
-		},
 		/** @param {any} value */
 		set(value) {
 			return update_refresh_value(get_refresh_context(__, 'set', payload), value);
 		},
+		// TODO 3.0 remove this
+		// @ts-expect-error This method no longer exists
+		run() {
+			throw new Error(
+				`\`myQuery().run()\` has been removed — please replace it with \`myQuery()\`. See https://github.com/sveltejs/kit/pull/15779 for more details`
+			);
+		},
 		/** @type {Promise<any>['then']} */
 		then(onfulfilled, onrejected) {
 			return get_promise().then(onfulfilled, onrejected);
@@ -477,13 +459,21 @@ function create_query_resource(__, payload, state, fn) {
  * @param {RemoteQueryLiveInternals} __
  * @param {string} payload — the stringified raw argument (i.e. the cache key the client will use)
  * @param {RequestState} state
- * @param {() => Promise<any>} get_first_value
+ * @param {AbortSignal} signal — the request signal; aborts in-flight iteration when the client disconnects
+ * @param {() => AsyncGenerator<any, void, void>} get_generator
  * @returns {RemoteLiveQuery<any>}
  */
-function create_live_query_resource(__, payload, state, get_first_value) {
+function create_live_query_resource(__, payload, state, signal, get_generator) {
 	/** @type {Promise<any> | null} */
 	let promise = null;
 
+	const get_first_value = async () => {
+		for await (const value of get_generator()) {
+			return value;
+		}
+		throw new Error(`query.live '${__.name}' did not yield a value`);
+	};
+
 	const get_promise = () => {
 		return (promise ??= get_response(__, payload, state, get_first_value));
 	};
@@ -537,19 +527,96 @@ function create_live_query_resource(__, payload, state, get_first_value) {
 			reconnects.set(create_remote_key(__.id, payload), get_promise());
 			return Promise.resolve();
 		},
+		/** @ts-expect-error This method no longer exists */
 		run() {
-			throw new Error('Cannot call .run() on a live query on the server');
+			throw new Error(
+				'`.run()` has been removed from live queries. Use `for await (const value of liveQuery())` instead.'
+			);
 		},
 		/** @type {Promise<any>['then']} */
 		then(onfulfilled, onrejected) {
 			return get_promise().then(onfulfilled, onrejected);
 		},
+		[Symbol.asyncIterator]() {
+			const key = create_remote_key(__.id, payload);
+			const cache = (state.remote.live_iterators ??= new Map());
+			let cached = cache.get(key);
+			if (!cached) {
+				cached = create_shared_live_iterator(signal, get_generator);
+				cache.set(key, cached);
+			}
+			return cached.subscribe();
+		},
 		get [Symbol.toStringTag]() {
 			return 'LiveQueryResource';
 		}
 	};
 }
 
+/**
+ * Wraps a lazily-created live-query generator so that multiple `for await`
+ * consumers within the same request share one underlying iteration. The first
+ * subscriber starts the generator; values are broadcast to all subscribers
+ * via a `SharedIterator`. When the last subscriber unsubscribes, the generator
+ * is closed via `generator.return(undefined)`.
+ *
+ * If `signal` aborts (typically because the client has disconnected), the
+ * pump is torn down and any in-flight `next()` calls on consumer iterators
+ * resolve with `{ done: true }`, so suspended `for await` loops unwind
+ * cleanly rather than leaking.
+ *
+ * @param {AbortSignal} signal
+ * @param {() => AsyncGenerator<any, void, void>} get_generator
+ */
+function create_shared_live_iterator(signal, get_generator) {
+	return new SharedIterator((instance) => {
+		// Don't bother starting the pump if the request has already been
+		// aborted between cache creation and first subscription.
+		if (signal.aborted) {
+			instance.done();
+			return noop;
+		}
+
+		const generator = get_generator();
+
+		// Set to `true` when we deliberately close the generator (because every
+		// subscriber has unsubscribed, or the request was aborted). The pump's
+		// `generator.next()` will reject as a result; we use this flag to swallow that
+		// abort error rather than surfacing it through `instance.fail()`.
+		let aborted = false;
+
+		const close = () => {
+			aborted = true;
+			void generator.return().catch(noop);
+		};
+
+		// On request abort, tear down the pump and notify subscribers. `done()` is
+		// used (rather than `fail()`) because an aborted request is a normal
+		// termination — there's no error to surface to user code that's already
+		// been disconnected from the client.
+		signal.addEventListener('abort', () => (close(), instance.done()), { once: true });
+
+		void (async () => {
+			try {
+				while (true) {
+					const result = await generator.next();
+					if (result.done) {
+						instance.done();
+						return;
+					}
+					instance.push(result.value);
+				}
+			} catch (error) {
+				if (!aborted) instance.fail(error);
+			} finally {
+				close();
+			}
+		})();
+
+		return close;
+	});
+}
+
 // Add batch as a property to the query function
 Object.defineProperty(query, 'batch', { value: batch, enumerable: true });
 Object.defineProperty(query, 'live', { value: live, enumerable: true });

package/src/runtime/client/client.js

@@ -1,5 +1,6 @@
-/** @import { RemoteQueryCacheEntry } from './remote-functions/query.svelte.js' */
-/** @import { RemoteLiveQueryCacheEntry } from './remote-functions/query-live.svelte.js' */
+/** @import { CacheEntry } from './remote-functions/cache.svelte.js' */
+/** @import { Query } from './remote-functions/query/instance.svelte.js' */
+/** @import { LiveQuery } from './remote-functions/query-live/instance.svelte.js' */
 import { BROWSER, DEV } from 'esm-env';
 import * as svelte from 'svelte';
 import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
@@ -302,13 +303,13 @@ const preload_tokens = new Set();
 export let pending_invalidate;
 
 /**
- * @type {Map<string, Map<string, RemoteQueryCacheEntry<any>>>}
+ * @type {Map<string, Map<string, CacheEntry<Query<any>>>>}
  * A map of query id -> payload -> query internals for all active queries.
  */
 export const query_map = new Map();
 
 /**
- * @type {Map<string, Map<string, RemoteLiveQueryCacheEntry<any>>>}
+ * @type {Map<string, Map<string, CacheEntry<LiveQuery<any>>>>}
  * A map of id -> payload -> live query internals for all active queries.
  */
 export const live_query_map = new Map();
@@ -658,7 +659,8 @@ async function _preload_code(url) {
  * @param {boolean} hydrate
  */
 async function initialize(result, target, hydrate) {
-	if (DEV && result.state.error && document.querySelector('vite-error-overlay')) return;
+	if (__SVELTEKIT_DEV__ && result.state.error && document.querySelector('vite-error-overlay'))
+		return;
 
 	/** @type {import('@sveltejs/kit').NavigationEvent} */
 	const nav = {
@@ -672,8 +674,11 @@ async function initialize(result, target, hydrate) {
 		nav
 	};
 
-	const style = document.querySelector('style[data-sveltekit]');
-	if (style) style.remove();
+	// Removes the style node we used to avoid FOUC during development
+	if (__SVELTEKIT_DEV__) {
+		const style = document.querySelector('style[data-sveltekit]');
+		if (style) style.remove();
+	}
 
 	update(/** @type {import('@sveltejs/kit').Page} */ (result.props.page));
 
@@ -2621,7 +2626,7 @@ function _start_router() {
 	});
 
 	// @ts-expect-error this isn't supported everywhere yet
-	if (!navigator.connection?.saveData) {
+	if (!navigator.connection?.saveData && !/2g/.test(navigator.connection?.effectiveType)) {
 		setup_preload();
 	}
 

package/src/runtime/client/remote-functions/cache.svelte.js

@@ -0,0 +1,157 @@
+import { tick } from 'svelte';
+import { once } from '../../../utils/functions.js';
+
+/**
+ * @template R
+ * @typedef {object} CacheEntry
+ * @property {number} proxy_count The number of live proxy instances referencing this
+ *   entry. The entry is eligible for eviction when this hits zero.
+ * @property {R} resource The actual reactive resource (Query or LiveQuery).
+ * @property {() => void} cleanup Tears down the `$effect.root` that owns the resource.
+ *   Run when the entry is evicted.
+ */
+
+/**
+ * @template R
+ * @typedef {{ entry: CacheEntry<R>, id: string, payload: string }} ProxyFinalizerToken
+ */
+
+/**
+ * Cache controller bound to a specific cache map and resource teardown function. Owns the
+ * eviction scheduling and FinalizationRegistry for its cache.
+ *
+ * Methods are defined as arrow-function class fields so they can be destructured and
+ * re-exported without losing their `this` binding.
+ *
+ * @template R
+ */
+export class CacheController {
+	/** @type {Map<string, Map<string, CacheEntry<R>>>} */
+	#cache_map;
+
+	/** @type {((resource: R) => void) | undefined} */
+	#destroy_resource;
+
+	/**
+	 * The held value points at the cache entry the proxy is contributing to. When the
+	 * proxy is GC'd, we decrement that entry's `proxy_count` and schedule a deferred
+	 * eviction check.
+	 *
+	 * @type {FinalizationRegistry<ProxyFinalizerToken<R>>}
+	 */
+	#proxy_finalizer = new FinalizationRegistry(({ entry, id, payload }) => {
+		this.deref(entry, id, payload);
+	});
+
+	/**
+	 * @param {Map<string, Map<string, CacheEntry<R>>>} cache_map
+	 * @param {(resource: R) => void} [destroy_resource] Optional teardown hook called on
+	 *   the resource itself before the cache entry's `$effect.root` cleanup runs. Used by
+	 *   live queries to detach event listeners and abort connections.
+	 */
+	constructor(cache_map, destroy_resource) {
+		this.#cache_map = cache_map;
+		this.#destroy_resource = destroy_resource;
+	}
+
+	/**
+	 * Get-or-create the cache entry for `(id, payload)`. The resource is constructed
+	 * inside an `$effect.root`, the cleanup of which is stored on the entry.
+	 *
+	 * @param {string} id
+	 * @param {string} payload
+	 * @param {() => R} create_resource
+	 * @returns {CacheEntry<R>}
+	 */
+	ensure_entry = (id, payload, create_resource) => {
+		let entries = this.#cache_map.get(id);
+
+		if (!entries) {
+			entries = new Map();
+			this.#cache_map.set(id, entries);
+		}
+
+		let entry = entries.get(payload);
+
+		if (!entry) {
+			const c = /** @type {CacheEntry<R>} */ ({
+				proxy_count: 0,
+				resource: /** @type {R} */ (/** @type {unknown} */ (null)),
+				cleanup: /** @type {() => void} */ (/** @type {unknown} */ (null))
+			});
+
+			c.cleanup = $effect.root(() => {
+				c.resource = create_resource();
+			});
+
+			entry = c;
+			entries.set(payload, entry);
+		}
+
+		return entry;
+	};
+
+	/**
+	 * Register a reference to a resource cache entry using an anchor object with the FinalizationRegistry.
+	 * When the anchor object is garbage collected, the held value's `entry.proxy_count` is decremented
+	 * and a deferred eviction check is scheduled for `(id, payload)`.
+	 *
+	 * @param {object} anchor
+	 * @param {CacheEntry<R>} entry
+	 * @param {string} id
+	 * @param {string} payload
+	 */
+	ref = (anchor, entry, id, payload) => {
+		entry.proxy_count++;
+		this.#proxy_finalizer.register(anchor, { entry, id, payload });
+	};
+
+	/**
+	 * Manually reference this cache entry. Danger: This entry will never be cleaned up unless the returned callback is called.
+	 *
+	 * @param {CacheEntry<R>} entry
+	 * @param {string} id
+	 * @param {string} payload
+	 */
+	manual_ref = (entry, id, payload) => {
+		entry.proxy_count++;
+		return once(() => this.deref(entry, id, payload));
+	};
+
+	/**
+	 * Dereference this cache entry. If the entry's `proxy_count` hits zero, schedule a deferred eviction check.
+	 *
+	 * @param {CacheEntry<R>} entry
+	 * @param {string} id
+	 * @param {string} payload
+	 */
+	deref = (entry, id, payload) => {
+		entry.proxy_count--;
+		void tick().then(() => {
+			const entry = this.#cache_map.get(id)?.get(payload);
+			if (!entry || entry.proxy_count > 0) return;
+			this.#evict(id, payload);
+		});
+	};
+
+	/**
+	 * Tear down the cache entry for `(id, payload)` if it exists. Runs the optional
+	 * resource teardown and the entry's `$effect.root` cleanup, then removes the entry
+	 * from the cache map.
+	 *
+	 * @param {string} id
+	 * @param {string} payload
+	 */
+	#evict = (id, payload) => {
+		const entries = this.#cache_map.get(id);
+		const entry = entries?.get(payload);
+		if (!entry) return;
+
+		this.#destroy_resource?.(entry.resource);
+		entry.cleanup();
+		entries?.delete(payload);
+		if (entries && entries.size === 0) {
+			this.#cache_map.delete(id);
+		}
+	};
+}