mutts 1.0.5 → 1.0.7

package/src/reactive/array.ts

@@ -1,72 +1,125 @@
-import { Indexable } from '../indexable'
+import { FoolProof } from '../utils'
 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) ||
-	(value &&
-		typeof value === 'object' &&
-		prototypeForwarding in value &&
-		Array.isArray(value[prototypeForwarding]))) as any
-export class ReactiveBaseArray {
-	readonly [native]!: any[]
 
+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
+}
+export abstract class Indexer extends Array {
+	get(i: number): any {
+		dependant(this, i)
+		return reactive(this[i])
+	}
+	set(i: number, value: any) {
+		const added = i >= this.length
+		this[i] = value
+		touched(this, { type: 'set', prop: i }, index(i, { length: added }))
+	}
+	getLength() {
+		dependant(this, 'length')
+		return this.length
+	}
+	setLength(value: number) {
+		const oldLength = this.length
+		try {
+			this.length = value
+		} finally {
+			touched(this, { type: 'set', prop: 'length' }, range(oldLength, value, { length: true }))
+		}
+	}
+}
+const indexLess = { get: FoolProof.get, set: FoolProof.set }
+Object.assign(FoolProof, {
+	get(obj: any, prop: any, receiver: any) {
+		if (obj instanceof Array && typeof prop === 'string') {
+			if (prop === 'length') return Indexer.prototype.getLength.call(obj)
+			const index = parseInt(prop)
+			if (!Number.isNaN(index)) return Indexer.prototype.get.call(obj, index)
+		}
+		return indexLess.get(obj, prop, receiver)
+	},
+	set(obj: any, prop: any, value: any, receiver: any) {
+		if (obj instanceof Array && typeof prop === 'string') {
+			if (prop === 'length') return Indexer.prototype.setLength.call(obj, value)
+			const index = parseInt(prop)
+			if (!Number.isNaN(index)) return Indexer.prototype.set.call(obj, index, value)
+		}
+		return indexLess.set(obj, prop, value, receiver)
+	},
+})
+
+export abstract class ReactiveArray extends Array {
+	toJSON() {
+		return this
+	}
+	get [Symbol.toStringTag]() {
+		return 'ReactiveArray'
+	}
 	// Safe array access with negative indices
 	at(index: number): any {
-		const actualIndex = index < 0 ? this[native].length + index : index
+		const actualIndex = index < 0 ? this.length + index : index
 		dependant(this, actualIndex)
-		if (actualIndex < 0 || actualIndex >= this[native].length) return undefined
-		return reactive(this[native][actualIndex])
+		if (actualIndex < 0 || actualIndex >= this.length) return undefined
+		return reactive(this[actualIndex])
 	}
 
 	// Immutable versions of mutator methods
 	toReversed(): any[] {
 		dependant(this)
-		return reactive(this[native].toReversed())
+		return reactive(this.toReversed())
 	}
 
 	toSorted(compareFn?: (a: any, b: any) => number): any[] {
 		dependant(this)
-		return reactive(this[native].toSorted(compareFn))
+		return reactive(this.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)
+			? this.toSpliced(start)
+			: this.toSpliced(start, deleteCount, ...items)
 	}
 
 	with(index: number, value: any): any[] {
 		dependant(this)
-		return reactive(this[native].with(index, value))
+		return reactive(this.with(index, value))
 	}
 
 	// Iterator methods with reactivity tracking
 	entries() {
 		dependant(this)
-		return makeReactiveEntriesIterator(this[native].entries())
+		return makeReactiveEntriesIterator(this.entries())
 	}
 
 	keys() {
 		dependant(this, 'length')
-		return this[native].keys()
+		return this.keys()
 	}
 
 	values() {
 		dependant(this)
-		return makeReactiveIterator(this[native].values())
+		return makeReactiveIterator(this.values())
 	}
 
-	[Symbol.iterator]() {
+	[Symbol.iterator](): ArrayIterator<any> {
 		dependant(this)
-		const nativeIterator = this[native][Symbol.iterator]()
+		const nativeIterator = this[Symbol.iterator]()
 		return {
 			next() {
 				const result = nativeIterator.next()
@@ -75,37 +128,38 @@ export class ReactiveBaseArray {
 				}
 				return { value: reactive(result.value), done: false }
 			},
-		}
+			[Symbol.iterator]() {
+				return this
+			},
+			[Symbol.dispose]() {},
+		} as any
 	}
 
 	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)
+		const index = this.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)
+		return this.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)
+		const index = this.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)
+		return this.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)
-		)
+		return this.includes(unwrappedSearch, fromIndex) || this.includes(searchElement, fromIndex)
 	}
 
 	find(predicate: (this: any, value: any, index: number, obj: any[]) => boolean, thisArg?: any): any
@@ -120,16 +174,16 @@ export class ReactiveBaseArray {
 				obj: any[]
 			) => boolean
 			return reactive(
-				this[native].find(
+				this.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)
+		const index = this.indexOf(predicateOrElement, fromIndex)
 		if (index === -1) return undefined
-		return reactive(this[native][index])
+		return reactive(this[index])
 	}
 
 	findIndex(
@@ -146,18 +200,18 @@ export class ReactiveBaseArray {
 				index: number,
 				obj: any[]
 			) => boolean
-			return this[native].findIndex(
+			return this.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)
+		return this.indexOf(predicateOrElement, fromIndex)
 	}
 
-	flat(): any[] {
+	flat(depth?: number): any[] {
 		dependant(this)
-		return reactive(this[native].flat())
+		return reactive(depth === undefined ? this.flat() : this.flat(depth))
 	}
 
 	flatMap(
@@ -165,20 +219,25 @@ export class ReactiveBaseArray {
 		thisArg?: any
 	): any[] {
 		dependant(this)
-		return reactive(this[native].flatMap(callbackfn, thisArg))
+		return reactive(
+			this.flatMap(
+				(item, index, array) => callbackfn.call(thisArg, reactive(item), index, array),
+				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)
+			this.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)
+			this.map((item, index, array) => callbackfn(reactive(item), index, array), thisArg)
 		)
 	}
 
@@ -189,8 +248,8 @@ export class ReactiveBaseArray {
 		dependant(this)
 		const result =
 			initialValue === undefined
-				? this[native].reduce(callbackfn as any)
-				: this[native].reduce(callbackfn as any, initialValue)
+				? this.reduce(callbackfn as any)
+				: this.reduce(callbackfn as any, initialValue)
 		return reactive(result)
 	}
 
@@ -201,110 +260,63 @@ export class ReactiveBaseArray {
 		dependant(this)
 		const result =
 			initialValue !== undefined
-				? this[native].reduceRight(callbackfn as any, initialValue)
-				: (this[native] as any).reduceRight(callbackfn as any)
+				? this.reduceRight(callbackfn as any, initialValue)
+				: (this 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)
+		for (const i of range(start || 0, end || this.length - 1)) dependant(this, i)
 		return start === undefined
-			? this[native].slice()
+			? this.slice()
 			: end === undefined
-				? this[native].slice(start)
-				: this[native].slice(start, end)
+				? this.slice(start)
+				: this.slice(start, end)
 	}
 
 	concat(...items: any[]): any[] {
 		dependant(this)
-		return reactive(this[native].concat(...items))
+		return reactive(this.concat(...items))
 	}
 
 	join(separator?: string): string {
 		dependant(this)
-		return this[native].join(separator as any)
+		return this.join(separator as any)
 	}
 
 	forEach(callbackfn: (value: any, index: number, array: any[]) => void, thisArg?: any): void {
 		dependant(this)
-		this[native].forEach((value, index, array) => {
+		this.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<S>(
+		predicate: (value: any, index: number, array: any[]) => value is S,
+		thisArg?: any
+	): this is S[]
+	every(callbackfn: (value: any, index: number, array: any[]) => boolean, thisArg?: any): boolean
 	every(callbackfn: (value: any, index: number, array: any[]) => boolean, thisArg?: any): boolean {
 		dependant(this)
-		return this[native].every(
+		return this.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(
+		return this.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 }))
-		}
-	},
-}) {
-	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 },
-		})
-	}
-
+	// Side-effectful
 	push(...items: any[]) {
-		const oldLength = this[native].length
+		const oldLength = this.length
 		try {
-			return this[native].push(...items)
+			return this.push(...items)
 		} finally {
 			touched(
 				this,
@@ -315,45 +327,41 @@ export class ReactiveArray extends Indexable(ReactiveBaseArray, {
 	}
 
 	pop() {
-		if (this[native].length === 0) return undefined
+		if (this.length === 0) return undefined
 		try {
-			return reactive(this[native].pop())
+			return reactive(this.pop())
 		} finally {
-			touched(this, { type: 'bunch', method: 'pop' }, index(this[native].length))
+			touched(this, { type: 'bunch', method: 'pop' }, index(this.length))
 		}
 	}
 
 	shift() {
-		if (this[native].length === 0) return undefined
+		if (this.length === 0) return undefined
 		try {
-			return reactive(this[native].shift())
+			return reactive(this.shift())
 		} finally {
-			touched(
-				this,
-				{ type: 'bunch', method: 'shift' },
-				range(0, this[native].length + 1, { length: true })
-			)
+			touched(this, { type: 'bunch', method: 'shift' }, range(0, this.length + 1, { length: true }))
 		}
 	}
 
 	unshift(...items: any[]) {
 		try {
-			return this[native].unshift(...items)
+			return this.unshift(...items)
 		} finally {
 			touched(
 				this,
 				{ type: 'bunch', method: 'unshift' },
-				range(0, this[native].length - items.length, { length: true })
+				range(0, this.length - items.length, { length: true })
 			)
 		}
 	}
 
 	splice(start: number, deleteCount?: number, ...items: any[]) {
-		const oldLength = this[native].length
+		const oldLength = this.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))
+			if (deleteCount === undefined) return reactive(this.splice(start))
+			return reactive(this.splice(start, deleteCount, ...items))
 		} finally {
 			touched(
 				this,
@@ -362,49 +370,49 @@ export class ReactiveArray extends Indexable(ReactiveBaseArray, {
 				deleteCount === items.length
 					? range(start, start + deleteCount)
 					: range(start, oldLength + Math.max(items.length - deleteCount, 0), {
-						length: true,
-					})
+							length: true,
+						})
 			)
 		}
 	}
 
 	reverse() {
 		try {
-			return this[native].reverse()
+			return this.reverse()
 		} finally {
-			touched(this, { type: 'bunch', method: 'reverse' }, range(0, this[native].length - 1))
+			touched(this, { type: 'bunch', method: 'reverse' }, range(0, this.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
+			return this.sort((a, b) => compareFn(reactive(a), reactive(b))) as any
 		} finally {
-			touched(this, { type: 'bunch', method: 'sort' }, range(0, this[native].length - 1))
+			touched(this, { type: 'bunch', method: 'sort' }, range(0, this.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
+			if (start === undefined) return this.fill(value) as any
+			if (end === undefined) return this.fill(value, start) as any
+			return this.fill(value, start, end) as any
 		} finally {
-			touched(this, { type: 'bunch', method: 'fill' }, range(0, this[native].length - 1))
+			touched(this, { type: 'bunch', method: 'fill' }, range(0, this.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
+			if (end === undefined) return this.copyWithin(target, start) as any
+			return this.copyWithin(target, start, end) as any
 		} finally {
 			touched(
 				this,
 				{ type: 'bunch', method: 'copyWithin' },
 				// TODO: calculate the range properly
-				range(0, this[native].length - 1)
+				range(0, this.length - 1)
 			)
 		}
 		// Touch all affected indices with a single allProps call

package/src/reactive/buffer.ts

@@ -0,0 +1,168 @@
+import { FoolProof } from '../utils'
+import { effect, untracked } from './effects'
+import { cleanedBy, cleanup } from './interface'
+import { memoize } from './memoize'
+import { reactive } from './proxy'
+import type { ScopedCallback } from './types'
+
+/**
+ * Result of a reactive scan, which is a reactive array of accumulated values
+ * with an attached cleanup function.
+ */
+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 
+ *   point onwards in the result chain.
+ * - **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 
+ *   instance using an internal occurrence tracking mechanism.
+ * - **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])
+ * ```
+ *
+ * @param source The source array of objects (will be made reactive)
+ * @param callback The accumulator function called with (accumulator, currentItem)
+ * @param initialValue The starting value for the accumulation
+ * @returns A reactive array of accumulated values, with a [cleanup] property to stop the tracking
+ */
+export function scan<Input extends object, Output>(
+	source: readonly Input[],
+	callback: (acc: Output, val: Input) => Output,
+	initialValue: 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>()
+	// 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) {
+			this.prev = prev
+		}
+
+		@memoize
+		get acc(): Output {
+			const prevAcc = this.prev ? this.prev.acc : initialValue
+			return callback(prevAcc, this.val)
+		}
+	}
+
+	function disposeIndex(index: number) {
+		const stop = indexEffects.get(index)
+		if (stop) {
+			stop()
+			indexEffects.delete(index)
+			untracked(() => {
+				Reflect.deleteProperty(indexToIntermediate as any, index)
+				Reflect.deleteProperty(result as any, index)
+			})
+		}
+	}
+
+	const mainEffect = effect(function scanMainEffect({ ascend }) {
+		const length = observedSource.length
+		const occurrenceCount = new Map<Input, number>()
+		let prev: Intermediate | undefined = 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'))) {
+				throw new Error('scan: items must be objects (WeakKey) for intermediate caching')
+			}
+
+			const count = occurrenceCount.get(val) ?? 0
+			occurrenceCount.set(val, count + 1)
+
+			let list = intermediaries.get(val)
+			if (!list) {
+				list = []
+				intermediaries.set(val, list)
+			}
+
+			let intermediate = list[count]
+			if (!intermediate) {
+				intermediate = reactive(new Intermediate(val, prev))
+				list[count] = intermediate
+			} else {
+				// Update the link. 
+				if (untracked(() => intermediate.prev) !== prev) {
+					intermediate.prev = prev
+				}
+			}
+
+			// Update the reactive mapping for this index
+			if (indexToIntermediate[i] !== intermediate) {
+				indexToIntermediate[i] = intermediate
+			}
+
+			// If we don't have an effect for this index yet, create one
+			if (!indexEffects.has(i)) {
+				ascend(() => {
+					const index = i
+					const stop = effect(function scanIndexSyncEffect() {
+						const inter = indexToIntermediate[index]
+						if (inter) {
+							const accValue = inter.acc
+							untracked(() => {
+								result[index] = accValue
+							})
+						}
+					})
+					indexEffects.set(index, stop)
+				})
+			}
+
+			prev = intermediate
+		}
+
+		// Cleanup trailing indices
+		for (const index of Array.from(indexEffects.keys())) {
+			if (index >= length) disposeIndex(index)
+		}
+		
+		// Ensure result length matches source length
+		untracked(() => {
+			if (result.length !== length) {
+				FoolProof.set(result as any, 'length', length, result)
+			}
+		})
+	})
+
+	return cleanedBy(result, () => {
+		mainEffect()
+		for (const stop of indexEffects.values()) stop()
+		indexEffects.clear()
+	}) 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]
+	}))
+}