feat: hydratable and friends

packages/svelte/package.json

@@ -95,6 +95,10 @@
       "types": "./types/index.d.ts",
       "default": "./src/server/index.js"
     },
+    "./client": {
+      "types": "./types/index.d.ts",
+      "default": "./src/client/index.js"
+    },
     "./store": {
       "types": "./types/index.d.ts",
       "worker": "./src/store/index-server.js",
@@ -174,6 +178,7 @@
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
+    "devalue": "^5.4.1",
     "esm-env": "^1.2.1",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",

packages/svelte/scripts/generate-types.js

@@ -45,6 +45,7 @@ await createBundle({
 		[`${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}/client`]: `${dir}/src/client/index.d.ts`,
 		[`${pkg.name}/store`]: `${dir}/src/store/public.d.ts`,
 		[`${pkg.name}/transition`]: `${dir}/src/transition/public.d.ts`,
 		[`${pkg.name}/events`]: `${dir}/src/events/public.d.ts`,

packages/svelte/src/client/index.js

@@ -0,0 +1,4 @@
+export {
+	get_hydratable_value as getHydratableValue,
+	has_hydratable_value as hasHydratableValue
+} from '../internal/client/hydratable.js';

packages/svelte/src/index-client.js

@@ -249,6 +249,7 @@ export {
 	hasContext,
 	setContext
 } from './internal/client/context.js';
+export { hydratable } from './internal/client/hydratable.js';
 export { hydrate, mount, unmount } from './internal/client/render.js';
 export { tick, untrack, settled } from './internal/client/runtime.js';
 export { createRawSnippet } from './internal/client/dom/blocks/snippet.js';

packages/svelte/src/index-server.js

@@ -51,4 +51,6 @@ export {
 	setContext
 } from './internal/server/context.js';
 
+export { hydratable } from './internal/server/hydratable.js';
+
 export { createRawSnippet } from './internal/server/blocks/snippet.js';

packages/svelte/src/internal/client/context.js

@@ -5,7 +5,7 @@ import { active_effect, active_reaction } from './runtime.js';
 import { create_user_effect } from './reactivity/effects.js';
 import { async_mode_flag, legacy_mode_flag } from '../flags/index.js';
 import { FILENAME } from '../../constants.js';
-import { BRANCH_EFFECT, EFFECT_RAN } from './constants.js';
+import { BRANCH_EFFECT } from './constants.js';
 
 /** @type {ComponentContext | null} */
 export let component_context = null;

packages/svelte/src/internal/client/hydratable.js

@@ -0,0 +1,66 @@
+/** @import { Decode, Transport } from '#shared' */
+import { hydrating } from './dom/hydration.js';
+
+/**
+ * @template T
+ * @param {string} key
+ * @param {() => T} fn
+ * @param {Transport<T>} [options]
+ * @returns {T}
+ */
+export function hydratable(key, fn, options) {
+	if (!hydrating) {
+		return fn();
+	}
+	var store = window.__svelte?.h;
+	const val = store?.get(key);
+	if (val === undefined) {
+		// TODO this should really be an error or at least a warning because it would be disastrous to expect
+		// something to be synchronously hydratable and then have it not be
+		return fn();
+	}
+	return decode(val, options?.decode);
+}
+
+/**
+ * @template T
+ * @param {string} key
+ * @param {{ decode?: Decode<T> }} [options]
+ * @returns {T | undefined}
+ */
+export function get_hydratable_value(key, options = {}) {
+	// TODO probably can DRY this out with the above
+	if (!hydrating) {
+		return undefined;
+	}
+
+	var store = window.__svelte?.h;
+	const val = store?.get(key);
+	if (val === undefined) {
+		return undefined;
+	}
+
+	return decode(val, options.decode);
+}
+
+/**
+ * @param {string} key
+ * @returns {boolean}
+ */
+export function has_hydratable_value(key) {
+	if (!hydrating) {
+		return false;
+	}
+	var store = window.__svelte?.h;
+	return store?.has(key) ?? false;
+}
+
+/**
+ * @template T
+ * @param {unknown} val
+ * @param {Decode<T> | undefined} decode
+ * @returns {T}
+ */
+function decode(val, decode) {
+	return (decode ?? ((val) => /** @type {T} */ (val)))(val);
+}

packages/svelte/src/internal/client/reactivity/cache.js

@@ -0,0 +1,75 @@
+/** @import { CacheEntry } from '#shared' */
+import { BaseCacheObserver } from '../../shared/cache-observer.js';
+import { tick } from '../runtime.js';
+import { get_effect_validation_error_code, render_effect } from './effects.js';
+
+/** @typedef {{ count: number, item: any }} Entry */
+/** @type {Map<string, CacheEntry>} */
+const client_cache = new Map();
+
+/**
+ * @template {(...args: any[]) => any} TFn
+ * @param {string} key
+ * @param {TFn} fn
+ * @returns {ReturnType<TFn>}
+ */
+export function cache(key, fn) {
+	const cached = client_cache.has(key);
+	const entry = client_cache.get(key);
+	const maybe_remove = create_remover(key);
+
+	const tracking = get_effect_validation_error_code() === null;
+	if (tracking) {
+		render_effect(() => {
+			if (entry) entry.count++;
+			return () => {
+				const entry = client_cache.get(key);
+				if (!entry) return;
+				entry.count--;
+				maybe_remove(entry);
+			};
+		});
+	}
+
+	if (cached) {
+		return entry?.item;
+	}
+
+	const item = fn();
+	const new_entry = {
+		item,
+		count: tracking ? 1 : 0
+	};
+	client_cache.set(key, new_entry);
+
+	Promise.resolve(item).then(
+		() => maybe_remove(new_entry),
+		() => maybe_remove(new_entry)
+	);
+	return item;
+}
+
+/**
+ * @param {string} key
+ */
+function create_remover(key) {
+	/**
+	 * @param {Entry | undefined} entry
+	 */
+	return (entry) =>
+		tick().then(() => {
+			if (!entry?.count && entry === client_cache.get(key)) {
+				client_cache.delete(key);
+			}
+		});
+}
+
+/**
+ * @template T
+ * @extends BaseCacheObserver<T>
+ */
+export class CacheObserver extends BaseCacheObserver {
+	constructor(prefix = '') {
+		super(() => client_cache, prefix);
+	}
+}

packages/svelte/src/internal/client/reactivity/effects.js

@@ -48,17 +48,28 @@ import { without_reactive_context } from '../dom/elements/bindings/shared.js';
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
  */
 export function validate_effect(rune) {
+	const code = get_effect_validation_error_code();
+	if (code === null) return;
+	e[code](rune);
+}
+
+/**
+ * @returns {'effect_orphan' | 'effect_in_unowned_derived' | 'effect_in_teardown' | null}
+ */
+export function get_effect_validation_error_code() {
 	if (active_effect === null && active_reaction === null) {
-		e.effect_orphan(rune);
+		return 'effect_orphan';
 	}
 
 	if (active_reaction !== null && (active_reaction.f & UNOWNED) !== 0 && active_effect === null) {
-		e.effect_in_unowned_derived();
+		return 'effect_in_unowned_derived';
 	}
 
 	if (is_destroying_effect) {
-		e.effect_in_teardown(rune);
+		return 'effect_in_teardown';
 	}
+
+	return null;
 }
 
 /**

packages/svelte/src/internal/client/reactivity/fetcher.js

@@ -0,0 +1,16 @@
+/** @import { GetRequestInit, Resource } from '#shared' */
+import { cache } from './cache';
+import { fetch_json } from '../../shared/utils.js';
+import { hydratable } from '../hydratable';
+import { resource } from './resource';
+
+/**
+ * @template TReturn
+ * @param {string | URL} url
+ * @param {GetRequestInit} [init]
+ * @returns {Resource<TReturn>}
+ */
+export function fetcher(url, init) {
+	const key = `svelte/fetcher/${typeof url === 'string' ? url : url.toString()}`;
+	return cache(key, () => resource(() => hydratable(key, () => fetch_json(url, init))));
+}