mutts 1.0.2 → 1.0.3

package/src/reactive/array.ts

@@ -0,0 +1,414 @@
+import { Indexable } from '../indexable'
+import { touched } from './change'
+import { makeReactiveEntriesIterator, makeReactiveIterator } from './non-reactive'
+import { reactive } from './proxy'
+import { unwrap } from './proxy-state'
+import { dependant } from './tracking'
+import { prototypeForwarding } from './types'
+
+export const native = Symbol('native')
+const isArray = Array.isArray
+Array.isArray = ((value: any) =>
+	isArray(value) ||
+	// biome-ignore lint/suspicious/useIsArray: We are defining it
+	(value &&
+		typeof value === 'object' &&
+		prototypeForwarding in value &&
+		Array.isArray(value[prototypeForwarding]))) as any
+export class ReactiveBaseArray {
+	declare readonly [native]: any[]
+
+	// Safe array access with negative indices
+	at(index: number): any {
+		const actualIndex = index < 0 ? this[native].length + index : index
+		dependant(this, actualIndex)
+		if (actualIndex < 0 || actualIndex >= this[native].length) return undefined
+		return reactive(this[native][actualIndex])
+	}
+
+	// Immutable versions of mutator methods
+	toReversed(): any[] {
+		dependant(this)
+		return reactive(this[native].toReversed())
+	}
+
+	toSorted(compareFn?: (a: any, b: any) => number): any[] {
+		dependant(this)
+		return reactive(this[native].toSorted(compareFn))
+	}
+
+	toSpliced(start: number, deleteCount?: number, ...items: any[]): any[] {
+		dependant(this)
+		return deleteCount === undefined
+			? this[native].toSpliced(start)
+			: this[native].toSpliced(start, deleteCount, ...items)
+	}
+
+	with(index: number, value: any): any[] {
+		dependant(this)
+		return reactive(this[native].with(index, value))
+	}
+
+	// Iterator methods with reactivity tracking
+	entries() {
+		dependant(this)
+		return makeReactiveEntriesIterator(this[native].entries())
+	}
+
+	keys() {
+		dependant(this, 'length')
+		return this[native].keys()
+	}
+
+	values() {
+		dependant(this)
+		return makeReactiveIterator(this[native].values())
+	}
+
+	[Symbol.iterator]() {
+		dependant(this)
+		const nativeIterator = this[native][Symbol.iterator]()
+		return {
+			next() {
+				const result = nativeIterator.next()
+				if (result.done) {
+					return result
+				}
+				return { value: reactive(result.value), done: false }
+			},
+		}
+	}
+
+	indexOf(searchElement: any, fromIndex?: number): number {
+		dependant(this)
+		const unwrappedSearch = unwrap(searchElement)
+		// Check both wrapped and unwrapped versions since array may contain either
+		const index = this[native].indexOf(unwrappedSearch, fromIndex)
+		if (index !== -1) return index
+		// If not found with unwrapped, try with wrapped (in case array contains wrapped version)
+		return this[native].indexOf(searchElement, fromIndex)
+	}
+
+	lastIndexOf(searchElement: any, fromIndex?: number): number {
+		dependant(this)
+		const unwrappedSearch = unwrap(searchElement)
+		// Check both wrapped and unwrapped versions since array may contain either
+		const index = this[native].lastIndexOf(unwrappedSearch, fromIndex)
+		if (index !== -1) return index
+		// If not found with unwrapped, try with wrapped (in case array contains wrapped version)
+		return this[native].lastIndexOf(searchElement, fromIndex)
+	}
+
+	includes(searchElement: any, fromIndex?: number): boolean {
+		dependant(this)
+		const unwrappedSearch = unwrap(searchElement)
+		// Check both wrapped and unwrapped versions since array may contain either
+		return (
+			this[native].includes(unwrappedSearch, fromIndex) ||
+			this[native].includes(searchElement, fromIndex)
+		)
+	}
+
+	find(predicate: (this: any, value: any, index: number, obj: any[]) => boolean, thisArg?: any): any
+	find(searchElement: any, fromIndex?: number): any
+	find(predicateOrElement: any, thisArg?: any): any {
+		dependant(this)
+		if (typeof predicateOrElement === 'function') {
+			const predicate = predicateOrElement as (
+				this: any,
+				value: any,
+				index: number,
+				obj: any[]
+			) => boolean
+			return reactive(
+				this[native].find(
+					(value, index, array) => predicate.call(thisArg, reactive(value), index, array),
+					thisArg
+				)
+			)
+		}
+		const fromIndex = typeof thisArg === 'number' ? thisArg : undefined
+		const index = this[native].indexOf(predicateOrElement, fromIndex)
+		if (index === -1) return undefined
+		return reactive(this[native][index])
+	}
+
+	findIndex(
+		predicate: (this: any, value: any, index: number, obj: any[]) => boolean,
+		thisArg?: any
+	): number
+	findIndex(searchElement: any, fromIndex?: number): number
+	findIndex(predicateOrElement: any, thisArg?: any): number {
+		dependant(this)
+		if (typeof predicateOrElement === 'function') {
+			const predicate = predicateOrElement as (
+				this: any,
+				value: any,
+				index: number,
+				obj: any[]
+			) => boolean
+			return this[native].findIndex(
+				(value, index, array) => predicate.call(thisArg, reactive(value), index, array),
+				thisArg
+			)
+		}
+		const fromIndex = typeof thisArg === 'number' ? thisArg : undefined
+		return this[native].indexOf(predicateOrElement, fromIndex)
+	}
+
+	flat(): any[] {
+		dependant(this)
+		return reactive(this[native].flat())
+	}
+
+	flatMap(
+		callbackfn: (this: any, value: any, index: number, array: any[]) => any[],
+		thisArg?: any
+	): any[] {
+		dependant(this)
+		return reactive(this[native].flatMap(callbackfn, thisArg))
+	}
+
+	filter(callbackfn: (value: any, index: number, array: any[]) => boolean, thisArg?: any): any[] {
+		dependant(this)
+		return reactive(
+			this[native].filter((item, index, array) => callbackfn(reactive(item), index, array), thisArg)
+		)
+	}
+
+	map(callbackfn: (value: any, index: number, array: any[]) => any, thisArg?: any): any[] {
+		dependant(this)
+		return reactive(
+			this[native].map((item, index, array) => callbackfn(reactive(item), index, array), thisArg)
+		)
+	}
+
+	reduce(
+		callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any,
+		initialValue?: any
+	): any {
+		dependant(this)
+		const result =
+			initialValue === undefined
+				? this[native].reduce(callbackfn as any)
+				: this[native].reduce(callbackfn as any, initialValue)
+		return reactive(result)
+	}
+
+	reduceRight(
+		callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any,
+		initialValue?: any
+	): any {
+		dependant(this)
+		const result =
+			initialValue !== undefined
+				? this[native].reduceRight(callbackfn as any, initialValue)
+				: (this[native] as any).reduceRight(callbackfn as any)
+		return reactive(result)
+	}
+
+	slice(start?: number, end?: number): any[] {
+		for (const i of range(start || 0, end || this[native].length - 1)) dependant(this, i)
+		return start === undefined
+			? this[native].slice()
+			: end === undefined
+				? this[native].slice(start)
+				: this[native].slice(start, end)
+	}
+
+	concat(...items: any[]): any[] {
+		dependant(this)
+		return reactive(this[native].concat(...items))
+	}
+
+	join(separator?: string): string {
+		dependant(this)
+		return this[native].join(separator as any)
+	}
+
+	forEach(callbackfn: (value: any, index: number, array: any[]) => void, thisArg?: any): void {
+		dependant(this)
+		this[native].forEach((value, index, array) => {
+			callbackfn.call(thisArg, reactive(value), index, array)
+		})
+	}
+
+	// TODO: re-implement for fun dependencies? (eg - every only check the first ones until it find some),
+	// no need to make it dependant on indexes after the found one
+	every(callbackfn: (value: any, index: number, array: any[]) => boolean, thisArg?: any): boolean {
+		dependant(this)
+		return this[native].every(
+			(value, index, array) => callbackfn.call(thisArg, reactive(value), index, array),
+			thisArg
+		)
+	}
+
+	some(callbackfn: (value: any, index: number, array: any[]) => boolean, thisArg?: any): boolean {
+		dependant(this)
+		return this[native].some(
+			(value, index, array) => callbackfn.call(thisArg, reactive(value), index, array),
+			thisArg
+		)
+	}
+}
+function* index(i: number, { length = true } = {}): IterableIterator<number | 'length'> {
+	if (length) yield 'length'
+	yield i
+}
+
+function* range(
+	a: number,
+	b: number,
+	{ length = false } = {}
+): IterableIterator<number | 'length'> {
+	const start = Math.min(a, b)
+	const end = Math.max(a, b)
+	if (length) yield 'length'
+	for (let i = start; i <= end; i++) yield i
+}
+/**
+ * Reactive wrapper around JavaScript's Array class with full array method support
+ * Tracks length changes, individual index operations, and collection-wide operations
+ */
+export class ReactiveArray extends Indexable(ReactiveBaseArray, {
+	get(i: number): any {
+		dependant(this, i)
+		return reactive(this[native][i])
+	},
+	set(i: number, value: any) {
+		const added = i >= this[native].length
+		this[native][i] = value
+		touched(this, { type: 'set', prop: i }, index(i, { length: added }))
+	},
+	getLength() {
+		dependant(this, 'length')
+		return this[native].length
+	},
+	setLength(value: number) {
+		const oldLength = this[native].length
+		try {
+			this[native].length = value
+		} finally {
+			touched(this, { type: 'set', prop: 'length' }, range(oldLength, value, { length: true }))
+		}
+	},
+}) {
+	declare length: number
+	constructor(original: any[]) {
+		super()
+		Object.defineProperties(this, {
+			// We have to make it double, as [native] must be `unique symbol` - impossible through import
+			[native]: { value: original },
+			[prototypeForwarding]: { value: original },
+		})
+	}
+
+	push(...items: any[]) {
+		const oldLength = this[native].length
+		try {
+			return this[native].push(...items)
+		} finally {
+			touched(
+				this,
+				{ type: 'bunch', method: 'push' },
+				range(oldLength, oldLength + items.length - 1, { length: true })
+			)
+		}
+	}
+
+	pop() {
+		if (this[native].length === 0) return undefined
+		try {
+			return reactive(this[native].pop())
+		} finally {
+			touched(this, { type: 'bunch', method: 'pop' }, index(this[native].length))
+		}
+	}
+
+	shift() {
+		if (this[native].length === 0) return undefined
+		try {
+			return reactive(this[native].shift())
+		} finally {
+			touched(
+				this,
+				{ type: 'bunch', method: 'shift' },
+				range(0, this[native].length + 1, { length: true })
+			)
+		}
+	}
+
+	unshift(...items: any[]) {
+		try {
+			return this[native].unshift(...items)
+		} finally {
+			touched(
+				this,
+				{ type: 'bunch', method: 'unshift' },
+				range(0, this[native].length - items.length, { length: true })
+			)
+		}
+	}
+
+	splice(start: number, deleteCount?: number, ...items: any[]) {
+		const oldLength = this[native].length
+		if (deleteCount === undefined) deleteCount = oldLength - start
+		try {
+			if (deleteCount === undefined) return reactive(this[native].splice(start))
+			return reactive(this[native].splice(start, deleteCount, ...items))
+		} finally {
+			touched(
+				this,
+				{ type: 'bunch', method: 'splice' },
+				// TODO: edge cases
+				deleteCount === items.length
+					? range(start, start + deleteCount)
+					: range(start, oldLength + Math.max(items.length - deleteCount, 0), {
+							length: true,
+						})
+			)
+		}
+	}
+
+	reverse() {
+		try {
+			return this[native].reverse()
+		} finally {
+			touched(this, { type: 'bunch', method: 'reverse' }, range(0, this[native].length - 1))
+		}
+	}
+
+	sort(compareFn?: (a: any, b: any) => number) {
+		compareFn = compareFn || ((a, b) => a.toString().localeCompare(b.toString()))
+		try {
+			return this[native].sort((a, b) => compareFn(reactive(a), reactive(b))) as any
+		} finally {
+			touched(this, { type: 'bunch', method: 'sort' }, range(0, this[native].length - 1))
+		}
+	}
+
+	fill(value: any, start?: number, end?: number) {
+		try {
+			if (start === undefined) return this[native].fill(value) as any
+			if (end === undefined) return this[native].fill(value, start) as any
+			return this[native].fill(value, start, end) as any
+		} finally {
+			touched(this, { type: 'bunch', method: 'fill' }, range(0, this[native].length - 1))
+		}
+	}
+
+	copyWithin(target: number, start: number, end?: number) {
+		try {
+			if (end === undefined) return this[native].copyWithin(target, start) as any
+			return this[native].copyWithin(target, start, end) as any
+		} finally {
+			touched(
+				this,
+				{ type: 'bunch', method: 'copyWithin' },
+				// TODO: calculate the range properly
+				range(0, this[native].length - 1)
+			)
+		}
+		// Touch all affected indices with a single allProps call
+	}
+}

package/src/reactive/change.ts

@@ -0,0 +1,134 @@
+import { recordTriggerLink } from './debug'
+import { bubbleUpChange, objectsWithDeepWatchers } from './deep-watch-state'
+import { getActiveEffect, isRunning } from './effect-context'
+import { batch, effectTrackers, opaqueEffects } from './effects'
+import { unwrap } from './proxy-state'
+import { watchers } from './tracking'
+import { allProps, type Evolution, options, type ScopedCallback, type State } from './types'
+
+const states = new WeakMap<object, State>()
+
+export function addState(obj: any, evolution: Evolution) {
+	obj = unwrap(obj)
+	const next = {}
+	const state = getState(obj)
+	if (state) Object.assign(state, { evolution, next })
+	states.set(obj, next)
+}
+
+/**
+ * Gets the current state of a reactive object for evolution tracking
+ * @param obj - The reactive object
+ * @returns The current state object
+ */
+export function getState(obj: any) {
+	obj = unwrap(obj)
+	let state = states.get(obj)
+	if (!state) {
+		state = {}
+		states.set(obj, state)
+	}
+	return state
+}
+
+export function collectEffects(
+	obj: any,
+	evolution: Evolution,
+	effects: Set<ScopedCallback>,
+	objectWatchers: Map<any, Set<ScopedCallback>>,
+	...keyChains: Iterable<any>[]
+) {
+	const sourceEffect = getActiveEffect()
+	for (const keys of keyChains)
+		for (const key of keys) {
+			const deps = objectWatchers.get(key)
+			if (deps)
+				for (const effect of deps) {
+					const runningChain = isRunning(effect)
+					if (runningChain) {
+						options.skipRunningEffect(effect, runningChain as any)
+						continue
+					}
+					effects.add(effect)
+					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)
+					}
+				}
+		}
+}
+
+/**
+ * Triggers effects for a single property change
+ * @param obj - The object that changed
+ * @param evolution - The type of change
+ * @param prop - The property that changed
+ */
+export function touched1(obj: any, evolution: Evolution, prop: any) {
+	touched(obj, evolution, [prop])
+}
+
+/**
+ * Triggers effects for property changes
+ * @param obj - The object that changed
+ * @param evolution - The type of change
+ * @param props - The properties that changed
+ */
+export function touched(obj: any, evolution: Evolution, props?: Iterable<any>) {
+	obj = unwrap(obj)
+	addState(obj, evolution)
+	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>()
+		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)
+		batch(Array.from(effects))
+	}
+
+	// Bubble up changes if this object has deep watchers
+	if (objectsWithDeepWatchers.has(obj)) {
+		bubbleUpChange(obj, evolution)
+	}
+}
+
+/**
+ * Triggers only opaque effects for property changes
+ * Used by deep-touch to ensure opaque listeners are notified even when deep optimization is active
+ */
+export function touchedOpaque(obj: any, evolution: Evolution, prop: any) {
+	obj = unwrap(obj)
+	const objectWatchers = watchers.get(obj)
+	if (!objectWatchers) return
+
+	const deps = objectWatchers.get(prop)
+	if (!deps) return
+
+	const effects = new Set<ScopedCallback>()
+	const sourceEffect = getActiveEffect()
+
+	for (const effect of deps) {
+		if (!opaqueEffects.has(effect)) continue
+
+		const runningChain = isRunning(effect)
+		if (runningChain) {
+			options.skipRunningEffect(effect, runningChain as any)
+			continue
+		}
+		effects.add(effect)
+		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)
+		batch(Array.from(effects))
+	}
+}