mutts 1.0.7 → 1.0.9

package/src/reactive/buffer.ts

@@ -1,9 +1,90 @@
 import { FoolProof } from '../utils'
+import { cleanedBy } from '.'
 import { effect, untracked } from './effects'
-import { cleanedBy, cleanup } from './interface'
 import { memoize } from './memoize'
 import { reactive } from './proxy'
-import type { ScopedCallback } from './types'
+import type { cleanup, EffectAccess, EffectCleanup, EffectCloser, ScopedCallback } from './types'
+
+/**
+ * Reactively attends to each entry of a collection or each key yielded by an
+ * enumeration callback. For each key, an inner effect runs the callback. When a
+ * key disappears, its inner effect is disposed. The callback may return a cleanup
+ * (like a regular effect closer).
+ *
+ * Accepts arrays, records, Maps, Sets, or a raw `() => Iterable<Key>` callback.
+ *
+ * @example
+ * ```typescript
+ * // Record shorthand
+ * attend(record, (key) => { console.log(key, record[key]) })
+ *
+ * // Array shorthand
+ * attend(array, (index) => { console.log(index, array[index]) })
+ *
+ * // Raw enumeration callback
+ * attend(() => Object.keys(record), (key) => { ... })
+ * ```
+ */
+export function attend<T>(
+	source: readonly T[],
+	callback: (index: number) => EffectCloser | void
+): ScopedCallback
+export function attend<K, V>(
+	source: Map<K, V>,
+	callback: (key: K) => EffectCloser | void
+): ScopedCallback
+export function attend<T>(
+	source: Set<T>,
+	callback: (value: T) => EffectCloser | void
+): ScopedCallback
+export function attend<S extends Record<PropertyKey, any>>(
+	source: S,
+	callback: (key: keyof S & string) => EffectCloser | void
+): ScopedCallback
+export function attend<Key>(
+	enumerate: () => Iterable<Key>,
+	callback: (key: Key) => EffectCloser | void
+): ScopedCallback
+export function attend(
+	source: any,
+	callback: (key: any) => EffectCloser | void
+): ScopedCallback {
+	const enumerate: () => Iterable<any> =
+		typeof source === 'function'
+			? source
+			: Array.isArray(source)
+				? () => Array.from({ length: source.length }, (_, i) => i)
+				: source instanceof Map
+					? () => source.keys()
+					: source instanceof Set
+						? () => source.values()
+						: () => Object.keys(source)
+
+	const keyEffects = new Map<any, ScopedCallback>()
+
+	const outer = effect(({ ascend }) => {
+		const keys = new Set<any>()
+		for (const key of enumerate()) keys.add(key)
+
+		for (const key of keys) {
+			if (keyEffects.has(key)) continue
+			keyEffects.set(key, ascend(() => effect(() => callback(key))))
+		}
+
+		for (const key of Array.from(keyEffects.keys())) {
+			if (!keys.has(key)) {
+				keyEffects.get(key)!()
+				keyEffects.delete(key)
+			}
+		}
+	})
+
+	return () => {
+		outer()
+		for (const stop of keyEffects.values()) stop()
+		keyEffects.clear()
+	}
+}
 
 /**
  * Result of a reactive scan, which is a reactive array of accumulated values
@@ -15,22 +96,22 @@ export type ScanResult<Output> = readonly Output[] & { [cleanup]: ScopedCallback
  * Perform a reactive scan over an array of items.
  *
  * This implementation is highly optimized for performance and fine-grained reactivity:
- * - **Incremental Updates**: Changes to an item only trigger re-computation from that 
+ * - **Incremental Updates**: Changes to an item only trigger re-computation from that
  *   point onwards in the result chain.
- * - **Move Optimization**: If items are moved within the array, their accumulated 
+ * - **Move Optimization**: If items are moved within the array, their accumulated
  *   values are reused as long as their predecessor remains the same.
- * - **Duplicate Support**: Correctly handles multiple occurrences of the same object 
+ * - **Duplicate Support**: Correctly handles multiple occurrences of the same object
  *   instance using an internal occurrence tracking mechanism.
- * - **Memory Efficient**: Uses `WeakMap` for caching intermediates, which are 
+ * - **Memory Efficient**: Uses `WeakMap` for caching intermediates, which are
  *   automatically cleared when source items are garbage collected.
  *
  * @example
  * ```typescript
  * const source = reactive([{ val: 1 }, { val: 2 }, { val: 3 }])
  * const sum = scan(source, (acc, item) => acc + item.val, 0)
- * 
+ *
  * expect([...sum]).toEqual([1, 3, 6])
- * 
+ *
  * // Modifying an item only re-computes subsequent sums
  * source[1].val = 10
  * expect([...sum]).toEqual([1, 11, 14])
@@ -48,16 +129,19 @@ export function scan<Input extends object, Output>(
 ): ScanResult<Output> {
 	const observedSource = reactive(source)
 	const result = reactive([] as Output[])
-	
+
 	// Track effects for each index to dispose them when the array shrinks
-	const indexEffects = new Map<number, ScopedCallback>()
+	const indexEffects = new Map<number, EffectCleanup>()
 	// Mapping from index to its current intermediate object
 	const indexToIntermediate = reactive([] as Intermediate[])
 	const intermediaries = new WeakMap<Input, Intermediate[]>()
 
 	class Intermediate {
 		public prev: Intermediate | undefined
-		constructor(public val: Input, prev: Intermediate | undefined) {
+		constructor(
+			public val: Input,
+			prev: Intermediate | undefined
+		) {
 			this.prev = prev
 		}
 
@@ -83,12 +167,14 @@ export function scan<Input extends object, Output>(
 	const mainEffect = effect(function scanMainEffect({ ascend }) {
 		const length = observedSource.length
 		const occurrenceCount = new Map<Input, number>()
-		let prev: Intermediate | undefined = undefined
+		let prev: Intermediate | undefined
 
 		for (let i = 0; i < length; i++) {
 			const val = FoolProof.get(observedSource as any, i, observedSource) as Input
-			
-			if (!(val && (typeof val === 'object' || typeof val === 'function' || typeof val === 'symbol'))) {
+
+			if (
+				!(val && (typeof val === 'object' || typeof val === 'function' || typeof val === 'symbol'))
+			) {
 				throw new Error('scan: items must be objects (WeakKey) for intermediate caching')
 			}
 
@@ -106,7 +192,7 @@ export function scan<Input extends object, Output>(
 				intermediate = reactive(new Intermediate(val, prev))
 				list[count] = intermediate
 			} else {
-				// Update the link. 
+				// Update the link.
 				if (untracked(() => intermediate.prev) !== prev) {
 					intermediate.prev = prev
 				}
@@ -141,7 +227,7 @@ export function scan<Input extends object, Output>(
 		for (const index of Array.from(indexEffects.keys())) {
 			if (index >= length) disposeIndex(index)
 		}
-		
+
 		// Ensure result length matches source length
 		untracked(() => {
 			if (result.length !== length) {
@@ -150,19 +236,93 @@ export function scan<Input extends object, Output>(
 		})
 	})
 
-	return cleanedBy(result, () => {
+	return cleanedBy(result, (() => {
 		mainEffect()
 		for (const stop of indexEffects.values()) stop()
 		indexEffects.clear()
-	}) as ScanResult<Output>
+	}) as EffectCleanup) as ScanResult<Output>
 }
 
-export function resolve<Output>(cb: () => Output[]): Output[] & { [cleanup]: ScopedCallback } {
-	const result = reactive([] as Output[])
-	return cleanedBy(result, effect(() => {
-		const source = cb()
-		if (result.length !== source.length) result.length = source.length
-		for (let i = 0; i < source.length; i++)
-			if (result[i] !== source[i]) result[i] = source[i]
-	}))
-}
+/**
+ * Lifts a callback that returns an array into a reactive array that automatically
+ * synchronizes with the source array returned by the callback.
+ *
+ * The returned reactive array will update whenever the callback's dependencies change,
+ * efficiently syncing only the elements that differ from the previous result.
+ *
+ * @example
+ * ```typescript
+ * const items = reactive([1, 2, 3])
+ * const doubled = lift(() => items.map(x => x * 2))
+ *
+ * console.log([...doubled]) // [2, 4, 6]
+ *
+ * items.push(4)
+ * console.log([...doubled]) // [2, 4, 6, 8]
+ * ```
+ *
+ * @param cb Callback function that returns an array
+ * @returns A reactive array synchronized with the callback's result, with a [cleanup] property to stop tracking
+ */
+export function lift<Output extends any[]>(
+	cb: (access: EffectAccess) => Output
+): Output & { [cleanup]: ScopedCallback }
+
+/**
+ * Lifts a callback that returns an object into a reactive object that automatically
+ * synchronizes with the source object returned by the callback.
+ *
+ * The returned reactive object will update whenever the callback's dependencies change,
+ * efficiently syncing only the properties that differ from the previous result using
+ * Object.assign(). Properties that no longer exist in the source are automatically removed.
+ *
+ * @example
+ * ```typescript
+ * const user = reactive({ name: 'John', age: 30 })
+ * const profile = lift(() => ({
+ *   displayName: user.name.toUpperCase(),
+ *   isAdult: user.age >= 18,
+ *   description: `${user.name} is ${user.age} years old`
+ * }))
+ *
+ * console.log(profile.displayName) // JOHN
+ * console.log(profile.isAdult) // true
+ *
+ * user.name = 'Jane'
+ * console.log(profile.displayName) // JANE
+ * console.log(profile.description) // Jane is 30 years old
+ * ```
+ *
+ * @param cb Callback function that returns an object
+ * @returns A reactive object synchronized with the callback's result, with a [cleanup] property to stop tracking
+ */
+export function lift<Output extends object>(
+	cb: (access: EffectAccess) => Output
+): Output & { [cleanup]: ScopedCallback }
+export function lift<Output extends any[] | object>(
+	cb: (access: EffectAccess) => Output
+): Output & { [cleanup]: ScopedCallback } {
+	let result: Output
+	const liftCleanup = effect((access) => {
+		const source = cb(access)
+		if (!source || typeof source !== 'object')
+			throw new Error('lift callback must return an array or object')
+		if (!result) {
+			if (Array.isArray(source)) {
+				result = reactive([]) as Output
+			} else {
+				result = reactive({}) as Output
+			}
+		}
+		if (Array.isArray(source) && Array.isArray(result)) {
+			if (result.length !== source.length) result.length = source.length
+			for (let i = 0; i < source.length; i++) if (result[i] !== source[i]) result[i] = source[i]
+		} else if (!Array.isArray(source) && !Array.isArray(result)) {
+			Object.assign(result, source)
+			for (const key of Object.keys(result)) if (!(key in source)) delete result[key]
+		} else {
+			throw new Error('lift callback must return the same type as the previous result')
+		}
+	})
+	return cleanedBy(result as Output, liftCleanup)
+}

package/src/reactive/change.ts

@@ -1,10 +1,10 @@
-import { recordTriggerLink } from './debug'
+import { recordTriggerLink } from '../../debug/debug'
 import { bubbleUpChange, objectsWithDeepWatchers } from './deep-watch-state'
 import { getActiveEffect, isRunning } from './effect-context'
-import { batch, effectTrackers, hasBatched, opaqueEffects, recordActivation } from './effects'
+import { batch, hasBatched, recordActivation } from './effects'
 import { unwrap } from './proxy-state'
-import { watchers } from './registry'
-import { allProps, type Evolution, options, type ScopedCallback, type State } from './types'
+import { getEffectNode, watchers } from './registry'
+import { allProps, type EffectTrigger, type Evolution, optionCall, type State } from './types'
 
 const states = new WeakMap<object, State>()
 
@@ -34,31 +34,28 @@ export function getState(obj: any) {
 export function collectEffects(
 	obj: any,
 	evolution: Evolution,
-	effects: Set<ScopedCallback>,
-	objectWatchers: Map<any, Set<ScopedCallback>>,
+	effects: Set<EffectTrigger>,
+	objectWatchers: Map<any, Set<EffectTrigger>>,
 	...keyChains: Iterable<any>[]
 ) {
 	const sourceEffect = getActiveEffect()
 	for (const keys of keyChains)
 		for (const key of keys) {
 			const deps = objectWatchers.get(key)
+			// console.log(`[DEBUG] collectEffects: checking ${String(key)}. Found deps: ${deps ? deps.size : 'none'}`)
 			if (deps)
 				for (const effect of deps) {
+					// console.log(`[DEBUG] collectEffects: found dependency ${effect.name || 'anonymous'} for ${String(key)}`)
 					const runningChain = isRunning(effect)
 					if (runningChain) {
-						options.skipRunningEffect(effect)
+						optionCall('skipRunningEffect', effect)
 						continue
 					}
 					if (!effects.has(effect)) {
 						effects.add(effect)
 						if (!hasBatched(effect)) recordActivation(effect, obj, evolution, key)
 					}
-					const trackers = effectTrackers.get(effect)
 					recordTriggerLink(sourceEffect, effect, obj, key, evolution)
-					if (trackers) {
-						for (const tracker of trackers) tracker(obj, evolution, key)
-						trackers.delete(effect)
-					}
 				}
 		}
 }
@@ -85,10 +82,10 @@ export function touched(obj: any, evolution: Evolution, props?: Iterable<any>) {
 	const objectWatchers = watchers.get(obj)
 	if (objectWatchers) {
 		// Note: we have to collect effects to remove duplicates in the specific case when no batch is running
-		const effects = new Set<ScopedCallback>()
+		const effects = new Set<EffectTrigger>()
 		if (props) collectEffects(obj, evolution, effects, objectWatchers, [allProps], props)
 		else collectEffects(obj, evolution, effects, objectWatchers, objectWatchers.keys())
-		options.touched(obj, evolution, props as any[] | undefined, effects)
+		optionCall('touched', obj, evolution, props as any[] | undefined, effects)
 		batch(Array.from(effects))
 	}
 
@@ -110,29 +107,25 @@ export function touchedOpaque(obj: any, evolution: Evolution, prop: any) {
 	const deps = objectWatchers.get(prop)
 	if (!deps) return
 
-	const effects = new Set<ScopedCallback>()
+	const effects = new Set<EffectTrigger>()
 	const sourceEffect = getActiveEffect()
 
 	for (const effect of deps) {
-		if (!opaqueEffects.has(effect)) continue
+		const node = getEffectNode(effect)
+		if (!node.isOpaque) continue
 
 		const runningChain = isRunning(effect)
 		if (runningChain) {
-			options.skipRunningEffect(effect)
+			optionCall('skipRunningEffect', effect)
 			continue
 		}
 		effects.add(effect)
 		recordActivation(effect, obj, evolution, prop)
-		const trackers = effectTrackers.get(effect)
 		recordTriggerLink(sourceEffect, effect, obj, prop, evolution)
-		if (trackers) {
-			for (const tracker of trackers) tracker(obj, evolution, prop)
-			trackers.delete(effect)
-		}
 	}
 
 	if (effects.size > 0) {
-		options.touched(obj, evolution, [prop], effects)
+		optionCall('touched', obj, evolution, [prop], effects)
 		batch(Array.from(effects))
 	}
 }

package/src/reactive/deep-touch.ts

@@ -3,8 +3,8 @@ import { bubbleUpChange, objectsWithDeepWatchers } from './deep-watch-state'
 import { batch } from './effects'
 import { isNonReactive } from './non-reactive-state'
 import { unwrap } from './proxy-state'
-import { effectParent, watchers } from './registry'
-import { allProps, type Evolution, options, type ScopedCallback } from './types'
+import { getEffectNode, watchers } from './registry'
+import { allProps, type EffectCleanup, type EffectTrigger, type Evolution, optionCall, options } from './types'
 
 function isObject(value: any): value is object {
 	return typeof value === 'object' && value !== null
@@ -196,31 +196,35 @@ function diffObjectProperties(
 /**
  * Checks if an effect or any of its ancestors is in the allowed set
  */
-function hasAncestorInSet(effect: ScopedCallback, allowedSet: Set<ScopedCallback>): boolean {
-	let current: ScopedCallback | undefined = effect
-	const visited = new WeakSet<ScopedCallback>()
+function hasAncestorInSet(
+	effect: EffectTrigger | EffectCleanup,
+	allowedSet: Set<EffectTrigger | EffectCleanup>
+): boolean {
+	let current: EffectTrigger | EffectCleanup | undefined = effect
+	const visited = new WeakSet<EffectTrigger | EffectCleanup>()
 	while (current && !visited.has(current)) {
 		visited.add(current)
 		if (allowedSet.has(current)) return true
-		current = effectParent.get(current)
+		const node = getEffectNode(current as EffectTrigger)
+		current = node.parent
 	}
 	return false
 }
 
 export function dispatchNotifications(notifications: PendingNotification[]) {
 	if (!notifications.length) return
-	const combinedEffects = new Set<ScopedCallback>()
+	const combinedEffects = new Set<EffectTrigger>()
 
 	// Extract origin from first notification (all should have the same origin from a single deep touch)
 	const origin = notifications[0]?.origin
-	let allowedEffects: Set<ScopedCallback> | undefined
+	let allowedEffects: Set<EffectTrigger> | undefined
 
 	// If origin exists, compute allowed effects (those that depend on origin.obj[origin.prop])
 	if (origin) {
-		allowedEffects = new Set<ScopedCallback>()
+		allowedEffects = new Set<EffectTrigger>()
 		const originWatchers = watchers.get(origin.obj)
 		if (originWatchers) {
-			const originEffects = new Set<ScopedCallback>()
+			const originEffects = new Set<EffectTrigger>()
 			collectEffects(
 				origin.obj,
 				{ type: 'set', prop: origin.prop },
@@ -240,16 +244,17 @@ export function dispatchNotifications(notifications: PendingNotification[]) {
 		const obj = unwrap(target)
 		addState(obj, evolution)
 		const objectWatchers = watchers.get(obj)
-		let currentEffects: Set<ScopedCallback> | undefined
+		let currentEffects: Set<EffectTrigger> | undefined
 		const propsArray = [prop]
 		if (objectWatchers) {
-			currentEffects = new Set<ScopedCallback>()
+			// console.log(`[DEBUG] dispatchNotifications: processing ${obj.constructor.name} (has watchers)`)
+			currentEffects = new Set<EffectTrigger>()
 			collectEffects(obj, evolution, currentEffects, objectWatchers, [allProps], propsArray)
 
 			// Filter effects by ancestor chain if origin exists
 			// Include effects that either directly depend on origin or have an ancestor that does
 			if (origin && allowedEffects) {
-				const filteredEffects = new Set<ScopedCallback>()
+				const filteredEffects = new Set<EffectTrigger>()
 				for (const effect of currentEffects) {
 					// Check if effect itself is allowed OR has an ancestor that is allowed
 					if (allowedEffects.has(effect) || hasAncestorInSet(effect, allowedEffects)) {
@@ -261,7 +266,7 @@ export function dispatchNotifications(notifications: PendingNotification[]) {
 
 			for (const effect of currentEffects) combinedEffects.add(effect)
 		}
-		options.touched(obj, evolution, propsArray, currentEffects)
+		optionCall('touched', obj, evolution, propsArray, currentEffects)
 		if (objectsWithDeepWatchers.has(obj)) bubbleUpChange(obj, evolution)
 	}
 	if (combinedEffects.size) batch([...combinedEffects])

package/src/reactive/deep-watch-state.ts

@@ -1,5 +1,5 @@
 import { batch } from './effects'
-import type { Evolution, ScopedCallback } from './types'
+import type { EffectTrigger, Evolution } from './types'
 
 // Track which objects contain which other objects (back-references)
 export const objectParents = new WeakMap<object, Set<{ parent: object; prop: PropertyKey }>>()
@@ -8,10 +8,10 @@ export const objectParents = new WeakMap<object, Set<{ parent: object; prop: Pro
 export const objectsWithDeepWatchers = new WeakSet<object>()
 
 // Track deep watchers per object
-export const deepWatchers = new WeakMap<object, Set<ScopedCallback>>()
+export const deepWatchers = new WeakMap<object, Set<EffectTrigger>>()
 
 // Track which effects are doing deep watching
-export const effectToDeepWatchedObjects = new WeakMap<ScopedCallback, Set<object>>()
+export const effectToDeepWatchedObjects = new WeakMap<EffectTrigger, Set<object>>()
 
 /**
  * Add a back-reference from child to parent

package/src/reactive/deep-watch.ts

@@ -7,7 +7,7 @@ import { effect } from './effects'
 import { isNonReactive } from './non-reactive-state'
 import { reactive, unwrap } from './proxy'
 import { markWithRoot } from './registry'
-import { options, type ScopedCallback } from './types'
+import { type EffectCleanup, type EffectTrigger, options } from './types'
 
 function isObject(value: any): value is object {
 	return typeof value === 'object' && value !== null
@@ -42,11 +42,14 @@ export function deepWatch<T extends object>(
 	target: T,
 	callback: (value: T) => void,
 	{ immediate = false } = {}
-): (() => void) | undefined {
+): EffectCleanup | undefined {
 	if (target === null || target === undefined) return undefined
 	if (typeof target !== 'object') throw new Error('Target of deep watching must be an object')
-	// Create a wrapper callback that matches ScopedCallback signature
-	const wrappedCallback: ScopedCallback = markWithRoot(() => callback(target), callback)
+	// Create a wrapper callback that matches EffectTrigger signature
+	const wrappedCallback: EffectTrigger = markWithRoot(
+		(() => callback(target)) as EffectTrigger,
+		callback
+	)
 
 	// Use the existing effect system to register dependencies
 	return effect(() => {

package/src/reactive/describe.ts

@@ -0,0 +1,39 @@
+import { attend } from './buffer'
+import { touched1 } from './change'
+import { cleanedBy } from './effect-context'
+import { reactive } from './proxy'
+
+/**
+ * Reactively defines properties on a target object based on a descriptors record.
+ * 
+ * It tracks the keys of the descriptors record and defines/updates/removes 
+ * properties on the target object as they change.
+ *
+ * @param descriptors - A reactive record of property descriptors.
+ * @param target - The object to define properties on (defaults to a new object).
+ * @returns The target object with reactive property definitions.
+ */
+export function describe<T extends object>(
+	descriptors: Record<PropertyKey, PropertyDescriptor>,
+	target: T = Object.create(null) as T
+): T {
+	descriptors = reactive(descriptors)
+
+	const stop = attend(
+		() => Reflect.ownKeys(descriptors),
+		(key) => {
+			const desc = (descriptors as any)[key]
+			if (desc) {
+				Object.defineProperty(target, key, {
+					enumerable: true,
+					...desc,
+					configurable: true,
+				})
+				touched1(target, { type: 'set', prop: key }, key)
+			}
+			return () => Reflect.deleteProperty(target, key)
+		}
+	)
+
+	return cleanedBy(target, stop)
+}

package/src/reactive/effect-context.ts

@@ -1,18 +1,83 @@
 import { tag } from '../utils'
 import { asyncZone, ZoneAggregator, ZoneHistory } from '../zone'
+import { effect, untracked } from './effects'
 import { getRoot } from './registry'
-import { type ScopedCallback } from './types'
+import {
+	cleanup,
+	type EffectAccess,
+	type EffectTrigger,
+	type ScopedCallback,
+	stopped,
+} from './types'
 
-export const effectHistory = tag(new ZoneHistory<ScopedCallback>(), 'effectHistory')
-tag(effectHistory.present, 'effectHistory.present')
+export const effectHistory = tag('effectHistory', new ZoneHistory<EffectTrigger>())
+tag('effectHistory.present', effectHistory.present)
 asyncZone.add(effectHistory)
-export const effectAggregator = tag(new ZoneAggregator(effectHistory.present), 'effectAggregator')
 
-export function isRunning(effect: ScopedCallback): boolean {
+/**
+ * Aggregator for zones that need to be tracked along effects.
+ * ie. in each effect, the active zone of the given zoning will be the one active at effect's definition
+ */
+export const effectAggregator = tag('effectAggregator', new ZoneAggregator(effectHistory.present))
+
+export function isRunning(effect: EffectTrigger): boolean {
 	const root = getRoot(effect)
 	return effectHistory.some((e) => getRoot(e) === root)
 }
 
 export function getActiveEffect() {
 	return effectHistory.present.active
-}
+}
+
+/**
+ * ADD a cleanup function to an object using the cleanup symbol.
+ * The cleanup function will be called when the object needs to be disposed.
+ *
+ * Note: most of the time, you don't need to use this function directly.
+ * The main use if for the cleanup function to be stored with the object, as GC calls the cleanup function when the *function* is garbage collected.
+ *
+ * @param obj - The object to attach the cleanup function to
+ * @param cleanupFn - The cleanup function to attach
+ * @returns The object with the cleanup function attached
+ */
+export function cleanedBy<T extends object>(obj: T, cleanupFn: ScopedCallback) {
+	const oldCleanup = obj[cleanup]
+	return Object.defineProperty(obj, cleanup, {
+		value: oldCleanup
+			? Object.defineProperties(
+					() => {
+						oldCleanup()
+						cleanupFn()
+					},
+					{
+						[stopped]: { get: () => oldCleanup[stopped] || cleanupFn[stopped] },
+					}
+				)
+			: cleanupFn,
+		writable: false,
+		enumerable: false,
+		configurable: true,
+	}) as T & { [cleanup]: ScopedCallback }
+}
+
+//#region greedy caching
+
+/**
+ * Creates a derived value that automatically recomputes when dependencies change
+ * @param compute - Function that computes the derived value
+ * @returns Object with value and cleanup function
+ */
+export function derived<T>(compute: (dep: EffectAccess) => T): {
+	value: T
+	[cleanup]: ScopedCallback
+} {
+	const rv = { value: undefined as unknown as T }
+	return cleanedBy(
+		rv,
+		untracked(() =>
+			effect(function derivedEffect(access) {
+				rv.value = compute(access)
+			})
+		)
+	)
+}