@esportsplus/reactivity 0.30.2 → 0.31.0

package/build/constants.d.ts

@@ -12,5 +12,6 @@ declare const STATE_CHECK: number;
 declare const STATE_DIRTY: number;
 declare const STATE_RECOMPUTING: number;
 declare const STATE_IN_HEAP: number;
+declare const STATE_COMPUTED: number;
 declare const STATE_NOTIFY_MASK: number;
-export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, PACKAGE_NAME, SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING };
+export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, PACKAGE_NAME, SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING };

package/build/constants.js

@@ -12,5 +12,6 @@ const STATE_CHECK = 1 << 0;
 const STATE_DIRTY = 1 << 1;
 const STATE_RECOMPUTING = 1 << 2;
 const STATE_IN_HEAP = 1 << 3;
+const STATE_COMPUTED = 1 << 4;
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
-export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, PACKAGE_NAME, SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING };
+export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, PACKAGE_NAME, SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING };

package/build/reactive/array.js

@@ -18,10 +18,10 @@ class ReactiveArray extends Array {
         return read(this._length);
     }
     set $length(value) {
-        if (value > super.length) {
+        if (value > this.length) {
             throw Error(`@esportsplus/reactivity: cannot set length to a value larger than the current length, use splice instead.`);
         }
-        this.splice(value, super.length);
+        this.splice(value, this.length);
     }
     $set(i, value) {
         let prev = this[i];
@@ -29,7 +29,7 @@ class ReactiveArray extends Array {
             return;
         }
         this[i] = value;
-        if (i >= super.length) {
+        if (i >= this.length) {
             write(this._length, i + 1);
         }
         this.dispatch('set', { index: i, item: value });
@@ -55,7 +55,7 @@ class ReactiveArray extends Array {
             }
         }
         if (added.length) {
-            write(this._length, super.length);
+            write(this._length, this.length);
             this.dispatch('concat', { items: added });
         }
         return this;
@@ -65,6 +65,7 @@ class ReactiveArray extends Array {
         if (!listeners) {
             return;
         }
+        let dirty = false;
         for (let i = 0, n = listeners.length; i < n; i++) {
             let listener = listeners[i];
             if (listener === null) {
@@ -73,15 +74,19 @@ class ReactiveArray extends Array {
             try {
                 listener(value);
                 if (listener.once !== undefined) {
+                    dirty = true;
                     listeners[i] = null;
                 }
             }
             catch {
+                dirty = true;
                 listeners[i] = null;
             }
         }
-        while (listeners.length && listeners[listeners.length - 1] === null) {
-            listeners.pop();
+        if (dirty) {
+            while (listeners.length && listeners[listeners.length - 1] === null) {
+                listeners.pop();
+            }
         }
     }
     dispose() {
@@ -120,14 +125,14 @@ class ReactiveArray extends Array {
         let item = super.pop();
         if (item !== undefined) {
             dispose(item);
-            write(this._length, super.length);
+            write(this._length, this.length);
             this.dispatch('pop', { item });
         }
         return item;
     }
     push(...items) {
         if (!items.length) {
-            return super.length;
+            return this.length;
         }
         let length = super.push(...items);
         write(this._length, length);
@@ -143,19 +148,19 @@ class ReactiveArray extends Array {
         let item = super.shift();
         if (item !== undefined) {
             dispose(item);
-            write(this._length, super.length);
+            write(this._length, this.length);
             this.dispatch('shift', { item });
         }
         return item;
     }
     sort(fn) {
-        let before = new Array(this.length);
-        for (let i = 0, n = before.length; i < n; i++) {
+        let n = this.length, before = new Array(n);
+        for (let i = 0; i < n; i++) {
             before[i] = this[i];
         }
         super.sort(fn);
-        let buckets = new Map(), cursors = new Map(), order = new Array(this.length);
-        for (let i = 0, n = before.length; i < n; i++) {
+        let buckets = new Map(), order = new Array(n);
+        for (let i = 0; i < n; i++) {
             let value = before[i], list = buckets.get(value);
             if (!list) {
                 buckets.set(value, [i]);
@@ -164,15 +169,12 @@ class ReactiveArray extends Array {
                 list.push(i);
             }
         }
-        for (let i = 0, n = this.length; i < n; i++) {
-            let value = this[i], list = buckets.get(value);
-            if (!list) {
-                order[i] = i;
-                continue;
+        for (let i = 0; i < n; i++) {
+            let list = buckets.get(this[i]);
+            order[i] = list.length === 1 ? list[0] : list[list.length - 1];
+            if (list.length > 1) {
+                list.pop();
             }
-            let cursor = cursors.get(value) || 0;
-            order[i] = list[cursor];
-            cursors.set(value, cursor + 1);
         }
         this.dispatch('sort', { order });
         return this;
@@ -180,7 +182,7 @@ class ReactiveArray extends Array {
     splice(start, deleteCount = this.length, ...items) {
         let removed = super.splice(start, deleteCount, ...items);
         if (items.length > 0 || removed.length > 0) {
-            write(this._length, super.length);
+            write(this._length, this.length);
             for (let i = 0, n = removed.length; i < n; i++) {
                 dispose(removed[i]);
             }

package/build/reactive/object.js

@@ -8,8 +8,9 @@ class ReactiveObject {
         if (data == null) {
             return;
         }
-        for (let key in data) {
-            let value = data[key], type = typeof value;
+        let keys = Object.keys(data);
+        for (let i = 0, n = keys.length; i < n; i++) {
+            let key = keys[i], value = data[key], type = typeof value;
             if (type === 'function') {
                 let node = this[COMPUTED](value);
                 defineProperty(this, key, {
@@ -48,21 +49,19 @@ class ReactiveObject {
         return root(() => {
             let node = computed(value);
             if (isPromise(node.value)) {
-                let factory = node, version = 0;
-                node = signal(undefined);
+                let factory = node, out = signal(undefined), v = 0;
                 (this.disposers ??= []).push(effect(() => {
-                    let id = ++version;
-                    read(factory).then((v) => {
-                        if (id !== version) {
+                    let id = ++v;
+                    read(factory).then((resolved) => {
+                        if (id !== v) {
                             return;
                         }
-                        write(node, v);
+                        write(out, resolved);
                     });
                 }));
+                return out;
             }
-            else {
-                (this.disposers ??= []).push(() => dispose(node));
-            }
+            (this.disposers ??= []).push(() => dispose(node));
             return node;
         });
     }

package/build/system.d.ts

@@ -1,4 +1,5 @@
 import { Computed, Signal } from './types.js';
+declare const asyncComputed: <T>(fn: Computed<Promise<T>>["fn"]) => Signal<T | undefined>;
 declare const computed: <T>(fn: Computed<T>["fn"]) => Computed<T>;
 declare const dispose: <T>(computed: Computed<T>) => void;
 declare const effect: <T>(fn: Computed<T>["fn"]) => () => void;
@@ -12,5 +13,5 @@ declare const root: {
 };
 declare const signal: <T>(value: T) => Signal<T>;
 declare const write: <T>(signal: Signal<T>, value: T) => void;
-export { computed, dispose, effect, isComputed, isSignal, onCleanup, read, root, signal, write };
+export { asyncComputed, computed, dispose, effect, isComputed, isSignal, onCleanup, read, root, signal, write };
 export type { Computed, Signal };

package/build/system.js

@@ -1,6 +1,6 @@
-import { COMPUTED, SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING } from './constants.js';
+import { SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_IN_HEAP, STATE_NOTIFY_MASK, STATE_RECOMPUTING } from './constants.js';
 import { isObject } from '@esportsplus/utilities';
-let depth = 0, heap = new Array(64), heap_i = 0, heap_n = 0, linkPool = [], linkPoolMax = 1000, microtask = queueMicrotask, notified = false, observer = null, scope = null, stabilizer = STABILIZER_IDLE, version = 0;
+let depth = 0, heap = new Array(64), heap_i = 0, heap_n = 0, linkPoolHead = null, microtask = queueMicrotask, notified = false, observer = null, scope = null, stabilizer = STABILIZER_IDLE, version = 0;
 function cleanup(computed) {
     if (!computed.cleanup) {
         return;
@@ -82,9 +82,10 @@ function link(dep, sub) {
         prevSub.sub === sub) {
         return;
     }
-    let pooled = linkPool.pop(), newLink = sub.depsTail =
+    let pooled = linkPoolHead, newLink = sub.depsTail =
         dep.subsTail = pooled
-            ? (pooled.dep = dep,
+            ? (linkPoolHead = pooled.nextDep,
+                pooled.dep = dep,
                 pooled.sub = sub,
                 pooled.nextDep = nextDep,
                 pooled.prevSub = prevSub,
@@ -112,7 +113,7 @@ function link(dep, sub) {
         dep.subs = newLink;
     }
 }
-function notify(computed, newState = STATE_DIRTY) {
+function notify(computed, newState) {
     let state = computed.state;
     if ((state & STATE_NOTIFY_MASK) >= newState) {
         return;
@@ -136,7 +137,7 @@ function recompute(computed, del) {
     let o = observer, ok = true, value;
     observer = computed;
     computed.depsTail = null;
-    computed.state = STATE_RECOMPUTING;
+    computed.state = STATE_COMPUTED | STATE_RECOMPUTING;
     depth++;
     version++;
     try {
@@ -147,7 +148,7 @@ function recompute(computed, del) {
     }
     depth--;
     observer = o;
-    computed.state = STATE_NONE;
+    computed.state = STATE_COMPUTED;
     let depsTail = computed.depsTail, remove = depsTail ? depsTail.nextDep : computed.deps;
     if (remove) {
         do {
@@ -202,6 +203,7 @@ function stabilize() {
     }
     observer = o;
     if (stabilizer === STABILIZER_RESCHEDULE) {
+        stabilizer = STABILIZER_SCHEDULED;
         microtask(stabilize);
     }
     else {
@@ -219,21 +221,20 @@ function unlink(link) {
     if (prevSub) {
         prevSub.nextSub = nextSub;
     }
-    else if ((dep.subs = nextSub) === null && dep.type === COMPUTED) {
+    else if ((dep.subs = nextSub) === null && dep.state & STATE_COMPUTED) {
         dispose(dep);
     }
-    if (linkPool.length < linkPoolMax) {
-        link.dep = link.sub = null;
-        link.nextDep = link.nextSub = link.prevSub = null;
-        linkPool.push(link);
-    }
+    link.dep = link.sub = null;
+    link.nextSub = link.prevSub = null;
+    link.nextDep = linkPoolHead;
+    linkPoolHead = link;
     return nextDep;
 }
 function update(computed) {
     if (computed.state & STATE_CHECK) {
         for (let link = computed.deps; link; link = link.nextDep) {
             let dep = link.dep;
-            if (dep.type === COMPUTED) {
+            if (dep.state & STATE_COMPUTED) {
                 update(dep);
                 if (computed.state & STATE_DIRTY) {
                     break;
@@ -244,8 +245,20 @@ function update(computed) {
     if (computed.state & STATE_DIRTY) {
         recompute(computed, true);
     }
-    computed.state = STATE_NONE;
+    computed.state = STATE_COMPUTED;
 }
+const asyncComputed = (fn) => {
+    let factory = computed(fn), node = signal(undefined), v = 0;
+    onCleanup(effect(() => {
+        let id = ++v;
+        read(factory).then((value) => {
+            if (id === v) {
+                write(node, value);
+            }
+        }, () => { });
+    }));
+    return node;
+};
 const computed = (fn) => {
     let self = {
         cleanup: null,
@@ -255,10 +268,9 @@ const computed = (fn) => {
         height: 0,
         nextHeap: undefined,
         prevHeap: null,
-        state: STATE_NONE,
+        state: STATE_COMPUTED,
         subs: null,
         subsTail: null,
-        type: COMPUTED,
         value: undefined,
     };
     self.prevHeap = self;
@@ -302,7 +314,7 @@ const effect = (fn) => {
     };
 };
 const isComputed = (value) => {
-    return isObject(value) && value.type === COMPUTED;
+    return isObject(value) && !!(value.state & STATE_COMPUTED);
 };
 const isSignal = (value) => {
     return isObject(value) && value.type === SIGNAL;
@@ -327,7 +339,7 @@ const onCleanup = (fn) => {
 const read = (node) => {
     if (observer) {
         link(node, observer);
-        if (node.type === COMPUTED) {
+        if (node.state & STATE_COMPUTED) {
             let height = node.height;
             if (height >= observer.height) {
                 observer.height = height + 1;
@@ -337,7 +349,7 @@ const read = (node) => {
                     notified = true;
                     for (let i = 0; i <= heap_n; i++) {
                         for (let computed = heap[i]; computed !== undefined; computed = computed.nextHeap) {
-                            notify(computed);
+                            notify(computed, STATE_DIRTY);
                         }
                     }
                 }
@@ -352,7 +364,7 @@ const root = (fn) => {
     observer = null;
     root.disposables = 0;
     if (tracking) {
-        scope = self = { cleanup: null };
+        scope = self = { cleanup: null, state: STATE_COMPUTED };
         value = fn(c = () => dispose(self));
     }
     else {
@@ -380,14 +392,14 @@ const write = (signal, value) => {
     if (signal.value === value) {
         return;
     }
-    notified = false;
     signal.value = value;
     if (signal.subs === null) {
         return;
     }
+    notified = false;
     for (let link = signal.subs; link; link = link.nextSub) {
         insertIntoHeap(link.sub);
     }
     schedule();
 };
-export { computed, dispose, effect, isComputed, isSignal, onCleanup, read, root, signal, write };
+export { asyncComputed, computed, dispose, effect, isComputed, isSignal, onCleanup, read, root, signal, write };

package/build/types.d.ts

@@ -1,5 +1,5 @@
 import { ts } from '@esportsplus/typescript';
-import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING } from './constants.js';
+import { SIGNAL } from './constants.js';
 import { ReactiveArray } from './reactive/index.js';
 interface Computed<T> {
     cleanup: VoidFunction | VoidFunction[] | null;
@@ -9,10 +9,9 @@ interface Computed<T> {
     height: number;
     nextHeap: Computed<unknown> | undefined;
     prevHeap: Computed<unknown>;
-    state: typeof STATE_CHECK | typeof STATE_DIRTY | typeof STATE_IN_HEAP | typeof STATE_NONE | typeof STATE_RECOMPUTING;
+    state: number;
     subs: Link | null;
     subsTail: Link | null;
-    type: typeof COMPUTED;
     value: T;
 }
 interface Link {

package/package.json

@@ -6,7 +6,8 @@
   "devDependencies": {
     "@esportsplus/typescript": "^0.29.0",
     "@types/node": "^25.0.9",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "exports": {
     ".": {
@@ -35,7 +36,7 @@
   },
   "type": "module",
   "types": "build/index.d.ts",
-  "version": "0.30.2",
+  "version": "0.31.0",
   "scripts": {
     "build": "tsc",
     "build:test": "pnpm build && vite build --config test/vite.config.ts",

package/src/constants.ts

@@ -26,6 +26,8 @@ const STATE_RECOMPUTING = 1 << 2;
 
 const STATE_IN_HEAP = 1 << 3;
 
+const STATE_COMPUTED = 1 << 4;
+
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
 
 
@@ -35,5 +37,5 @@ export {
     PACKAGE_NAME,
     SIGNAL,
     STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED,
-    STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING
+    STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING
 };

package/src/reactive/array.ts

@@ -69,11 +69,11 @@ class ReactiveArray<T> extends Array<T> {
     }
 
     set $length(value: number) {
-        if (value > super.length) {
+        if (value > this.length) {
             throw Error(`@esportsplus/reactivity: cannot set length to a value larger than the current length, use splice instead.`);
         }
 
-        this.splice(value, super.length);
+        this.splice(value, this.length);
     }
 
 
@@ -86,7 +86,7 @@ class ReactiveArray<T> extends Array<T> {
 
         this[i] = value;
 
-        if (i >= super.length) {
+        if (i >= this.length) {
             write(this._length, i + 1);
         }
 
@@ -121,7 +121,7 @@ class ReactiveArray<T> extends Array<T> {
         }
 
         if (added.length) {
-            write(this._length, super.length);
+            write(this._length, this.length);
             this.dispatch('concat', { items: added });
         }
 
@@ -135,6 +135,8 @@ class ReactiveArray<T> extends Array<T> {
             return;
         }
 
+        let dirty = false;
+
         for (let i = 0, n = listeners.length; i < n; i++) {
             let listener = listeners[i];
 
@@ -146,16 +148,20 @@ class ReactiveArray<T> extends Array<T> {
                 listener(value);
 
                 if (listener.once !== undefined) {
+                    dirty = true;
                     listeners[i] = null;
                 }
             }
             catch {
+                dirty = true;
                 listeners[i] = null;
             }
         }
 
-        while (listeners.length && listeners[listeners.length - 1] === null) {
-            listeners.pop();
+        if (dirty) {
+            while (listeners.length && listeners[listeners.length - 1] === null) {
+                listeners.pop();
+            }
         }
     }
 
@@ -205,7 +211,7 @@ class ReactiveArray<T> extends Array<T> {
 
         if (item !== undefined) {
             dispose(item);
-            write(this._length, super.length);
+            write(this._length, this.length);
 
             this.dispatch('pop', { item });
         }
@@ -215,7 +221,7 @@ class ReactiveArray<T> extends Array<T> {
 
     push(...items: T[]) {
         if (!items.length) {
-            return super.length;
+            return this.length;
         }
 
         let length = super.push(...items);
@@ -238,7 +244,7 @@ class ReactiveArray<T> extends Array<T> {
 
         if (item !== undefined) {
             dispose(item);
-            write(this._length, super.length);
+            write(this._length, this.length);
 
             this.dispatch('shift', { item });
         }
@@ -247,19 +253,19 @@ class ReactiveArray<T> extends Array<T> {
     }
 
     sort(fn?: (a: T, b: T) => number) {
-        let before = new Array(this.length) as T[];
+        let n = this.length,
+            before = new Array(n) as T[];
 
-        for (let i = 0, n = before.length; i < n; i++) {
+        for (let i = 0; i < n; i++) {
             before[i] = this[i];
         }
 
         super.sort(fn);
 
         let buckets = new Map<any, number[]>(),
-            cursors = new Map<any, number>(),
-            order = new Array(this.length);
+            order = new Array(n);
 
-        for (let i = 0, n = before.length; i < n; i++) {
+        for (let i = 0; i < n; i++) {
             let value = before[i],
                 list = buckets.get(value);
 
@@ -271,19 +277,14 @@ class ReactiveArray<T> extends Array<T> {
             }
         }
 
-        for (let i = 0, n = this.length; i < n; i++) {
-            let value = this[i],
-                list = buckets.get(value);
-
-            if (!list) {
-                order[i] = i;
-                continue;
-            }
+        for (let i = 0; i < n; i++) {
+            let list = buckets.get(this[i])!;
 
-            let cursor = cursors.get(value) || 0;
+            order[i] = list.length === 1 ? list[0] : list[list.length - 1];
 
-            order[i] = list[cursor];
-            cursors.set(value, cursor + 1);
+            if (list.length > 1) {
+                list.pop();
+            }
         }
 
         this.dispatch('sort', { order });
@@ -295,7 +296,7 @@ class ReactiveArray<T> extends Array<T> {
         let removed = super.splice(start, deleteCount, ...items);
 
         if (items.length > 0 || removed.length > 0) {
-            write(this._length, super.length);
+            write(this._length, this.length);
 
             for (let i = 0, n = removed.length; i < n; i++) {
                 dispose(removed[i]);

package/src/reactive/object.ts

@@ -14,8 +14,11 @@ class ReactiveObject<T extends Record<PropertyKey, unknown>> {
             return;
         }
 
-        for (let key in data) {
-            let value = data[key as keyof T],
+        let keys = Object.keys(data);
+
+        for (let i = 0, n = keys.length; i < n; i++) {
+            let key = keys[i],
+                value = data[key as keyof T],
                 type = typeof value;
 
             if (type === 'function') {
@@ -69,29 +72,29 @@ class ReactiveObject<T extends Record<PropertyKey, unknown>> {
             let node: Computed<ReturnType<T>> | Signal<ReturnType<T> | undefined> = computed(value);
 
             if (isPromise(node.value)) {
-                let factory = node,
-                    version = 0;
-
-                node = signal<ReturnType<T> | undefined>(undefined);
+                let factory = node as Computed<ReturnType<T>>,
+                    out = signal<ReturnType<T> | undefined>(undefined),
+                    v = 0;
 
                 (this.disposers ??= []).push(
                     effect(() => {
-                        let id = ++version;
+                        let id = ++v;
 
-                        (read(factory) as Promise<ReturnType<T>>).then((v) => {
-                            if (id !== version) {
+                        (read(factory) as Promise<ReturnType<T>>).then((resolved) => {
+                            if (id !== v) {
                                 return;
                             }
 
-                            write(node as Signal<typeof v>, v);
+                            write(out as Signal<typeof resolved>, resolved);
                         });
                     })
-                )
-            }
-            else {
-                (this.disposers ??= []).push(() => dispose(node as Computed<ReturnType<T>>));
+                );
+
+                return out;
             }
 
+            (this.disposers ??= []).push(() => dispose(node as Computed<ReturnType<T>>));
+
             return node;
         });
     }