WIP

trueadm · trueadm · commit 37a8b2567608 · 2024-11-26T22:41:05.000Z
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
@@ -391,3 +391,5 @@ declare function $inspect<T extends any[]>(
  * https://svelte.dev/docs/svelte/$host
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
+
+declare function $link<T>(fn: () => T): T;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -142,6 +142,41 @@ export function CallExpression(node, context) {
 			}
 
 			break;
+
+		case '$link': {
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
+			const mutation = node.arguments[0];
+
+			for (let i = context.path.length - 1; i >= 0; i--) {
+				const node = context.path[i];
+				const declarator = context.path.at(i - 1);
+
+				if (
+					node.type === 'CallExpression' &&
+					get_rune(node, context.state.scope) === '$state' &&
+					declarator?.type === 'VariableDeclarator' &&
+					declarator.id.type === 'Identifier' &&
+					mutation.type === 'ArrowFunctionExpression'
+				) {
+					const binding = context.state.scope.get(declarator.id.name);
+					if (binding) {
+						binding.linked = true;
+					}
+					node.metadata ??= {
+						links: []
+					};
+					node.metadata.links.push({ path: context.path.slice(i), mutation });
+					break;
+				}
+				if (node.type !== 'Property' && node.type !== 'ObjectExpression') {
+					throw new Error('Bad usage of $link');
+				}
+			}
+
+			break;
+		}
 	}
 
 	if (context.state.render_tag) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
@@ -33,6 +33,10 @@ export function CallExpression(node, context) {
 		case '$inspect':
 		case '$inspect().with':
 			return transform_inspect_rune(node, context);
+
+		case '$link': {
+			return b.id('undefined');
+		}
 	}
 
 	if (
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -125,16 +125,43 @@ export function VariableDeclaration(node, context) {
 					if (rune === '$state' && should_proxy(value, context.state.scope)) {
 						value = b.call('$.proxy', value);
 					}
-					if (is_state_source(binding, context.state.analysis)) {
+					if (is_state_source(binding, context.state.analysis) || binding.linked) {
 						value = b.call('$.state', value);
 					}
 					return value;
 				};
 
 				if (declarator.id.type === 'Identifier') {
-					declarations.push(
-						b.declarator(declarator.id, create_state_declarator(declarator.id, value))
+					const state_declaration = b.declarator(
+						declarator.id,
+						create_state_declarator(declarator.id, value)
 					);
+
+					if (declarator.init?.type === 'CallExpression' && declarator.init.metadata?.links) {
+						const links = declarator.init.metadata.links;
+
+						declarations.push(
+							b.declarator(
+								declarator.id,
+								b.call(
+									'$.derived_linked',
+									b.thunk(
+										b.block([
+											{ ...node, declarations: [state_declaration] },
+											...links.map((link) =>
+												b.stmt(
+													b.call('$.link', /** @type {Expression} */ (context.visit(link.mutation)))
+												)
+											),
+											b.return(b.call('$.get', declarator.id))
+										])
+									)
+								)
+							)
+						);
+					} else {
+						declarations.push(state_declaration);
+					}
 				} else {
 					const tmp = context.state.scope.generate('tmp');
 					const paths = extract_paths(declarator.id);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -48,6 +48,10 @@ export function add_state_transformers(context) {
 					);
 				}
 			};
+		} else if (binding.linked) {
+			context.state.transform[name] = {
+				read: get_value
+			};
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
@@ -98,4 +98,10 @@ declare module 'estree' {
 			scope: Scope;
 		};
 	}
+
+	interface SimpleCallExpression {
+		metadata?: {
+			links: Array<{ path: SvelteNode[]; mutation: ArrowFunctionExpression }>;
+		};
+	}
 }
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
@@ -297,6 +297,7 @@ export interface Binding {
 	references: { node: Identifier; path: SvelteNode[] }[];
 	mutated: boolean;
 	reassigned: boolean;
+	linked: boolean;
 	/** `true` if mutated _or_ reassigned */
 	updated: boolean;
 	scope: Scope;
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
@@ -19,6 +19,7 @@ export const LEGACY_DERIVED_PROP = 1 << 16;
 export const INSPECT_EFFECT = 1 << 17;
 export const HEAD_EFFECT = 1 << 18;
 export const EFFECT_HAS_DERIVED = 1 << 19;
+export const DERIVED_LINKED = 1 << 20;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const STATE_SYMBOL_METADATA = Symbol('$state metadata');
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
@@ -92,7 +92,7 @@ export {
 	template_with_script,
 	text
 } from './dom/template.js';
-export { derived, derived_safe_equal } from './reactivity/deriveds.js';
+export { derived, derived_linked, link, derived_safe_equal } from './reactivity/deriveds.js';
 export {
 	effect_tracking,
 	effect_root,
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -3,6 +3,7 @@ import { DEV } from 'esm-env';
 import {
 	CLEAN,
 	DERIVED,
+	DERIVED_LINKED,
 	DESTROYED,
 	DIRTY,
 	EFFECT_HAS_DERIVED,
@@ -18,7 +19,8 @@ import {
 	update_reaction,
 	increment_version,
 	set_active_effect,
-	component_context
+	component_context,
+	get
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
@@ -31,8 +33,8 @@ import { inspect_effects, set_inspect_effects } from './sources.js';
  * @returns {Derived<V>}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function derived(fn) {
-	var flags = DERIVED | DIRTY;
+export function derived(fn, _flags = 0) {
+	var flags = DERIVED | DIRTY | _flags;
 
 	if (active_effect === null) {
 		flags |= UNOWNED;
@@ -68,6 +70,22 @@ export function derived(fn) {
 	return signal;
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ */
+export function derived_linked(fn) {
+	return derived(fn, DERIVED_LINKED);
+}
+
+/**
+ * @param {() => void} fn
+ */
+export function link(fn) {
+	const p = derived(fn);
+	get(p);
+}
+
 /**
  * @template V
  * @param {() => V} fn
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -29,7 +29,8 @@ import {
 	INSPECT_EFFECT,
 	UNOWNED,
 	MAYBE_DIRTY,
-	BLOCK_EFFECT
+	BLOCK_EFFECT,
+	DERIVED_LINKED
 } from '../constants.js';
 import * as e from '../errors.js';
 import { legacy_mode_flag } from '../../flags/index.js';
@@ -143,7 +144,10 @@ export function set(source, value) {
 		// we allow the mutation.
 		(derived_sources === null || !derived_sources.includes(source))
 	) {
-		e.state_unsafe_mutation();
+		var derived = /** @type {Derived} */ (active_reaction);
+		if (derived.parent === null || (derived.parent.f & DERIVED_LINKED) === 0) {
+			e.state_unsafe_mutation();
+		}
 	}
 
 	return internal_set(source, value);
@@ -244,6 +248,11 @@ function mark_reactions(signal, status) {
 		if ((flags & (CLEAN | UNOWNED)) !== 0) {
 			if ((flags & DERIVED) !== 0) {
 				mark_reactions(/** @type {Derived} */ (reaction), MAYBE_DIRTY);
+
+				var parent = /** @type {Derived} */ (reaction).parent;
+				if (parent !== null && (parent.f & DERIVED_LINKED) !== 0) {
+					mark_reactions(/** @type {Derived} */ (parent), MAYBE_DIRTY);
+				}
 			} else {
 				schedule_effect(/** @type {Effect} */ (reaction));
 			}
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
@@ -24,7 +24,8 @@ import {
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
 	LEGACY_DERIVED_PROP,
-	DISCONNECTED
+	DISCONNECTED,
+	DERIVED_LINKED
 } from './constants.js';
 import { flush_tasks } from './dom/task.js';
 import { add_owner } from './dev/ownership.js';
@@ -175,6 +176,19 @@ export function is_runes() {
 export function check_dirtiness(reaction) {
 	var flags = reaction.f;
 
+	if ((flags & DERIVED_LINKED) !== 0) {
+		var children = /** @type {Derived} */ (reaction).children;
+		if (children !== null) {
+			for (let i = 0; i < children.length; i++) {
+				var child = children[i];
+				if ((child.f & DERIVED) !== 0) {
+					get(/** @type {Derived} */ (child));
+				}
+			}
+			return false;
+		}
+	}
+
 	if ((flags & DIRTY) !== 0) {
 		return true;
 	}
@@ -737,7 +751,7 @@ export function get(signal) {
 	}
 
 	// Register the dependency on the current reaction signal.
-	if (active_reaction !== null) {
+	if (active_reaction !== null && (active_reaction.f & DERIVED_LINKED) === 0) {
 		if (derived_sources !== null && derived_sources.includes(signal)) {
 			e.state_unsafe_local_read();
 		}
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
@@ -427,7 +427,8 @@ const RUNES = /** @type {const} */ ([
 	'$effect.root',
 	'$inspect',
 	'$inspect().with',
-	'$host'
+	'$host',
+	'$link'
 ]);
 
 /**
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
@@ -2706,4 +2706,6 @@ declare function $inspect<T extends any[]>(
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
 
+declare function $link<T>(fn: () => T): T;
+
 //# sourceMappingURL=index.d.ts.map

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,10 @@ export function add_state_transformers(context) {`
`48`	`48`	`);`
`49`	`49`	`}`
`50`	`50`	`};`
	`51`	`+ } else if (binding.linked) {`
	`52`	`+ context.state.transform[name] = {`
	`53`	`+ read: get_value`
	`54`	`+ };`
`51`	`55`	`}`
`52`	`56`	`}`
`53`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -98,4 +98,10 @@ declare module 'estree' {`
`98`	`98`	`scope: Scope;`
`99`	`99`	`};`
`100`	`100`	`}`
	`101`	`+`
	`102`	`+ interface SimpleCallExpression {`
	`103`	`+ metadata?: {`
	`104`	`+ links: Array<{ path: SvelteNode[]; mutation: ArrowFunctionExpression }>;`
	`105`	`+ };`
	`106`	`+ }`
`101`	`107`	`}`