@esportsplus/reactivity 0.20.1 → 0.21.0

package/build/constants.d.ts

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

package/build/constants.js

@@ -12,5 +12,4 @@ const STATE_DIRTY = 1 << 1;
 const STATE_RECOMPUTING = 1 << 2;
 const STATE_IN_HEAP = 1 << 3;
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
-const TYPE = Symbol('reactivity.type');
-export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL, STABILIZER_IDLE, STATE_NOTIFY_MASK, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING, TYPE };
+export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL, STABILIZER_IDLE, STATE_NOTIFY_MASK, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING };

package/build/reactive/array.d.ts

@@ -17,7 +17,9 @@ type Events<T> = {
     shift: {
         item: T;
     };
-    sort: undefined;
+    sort: {
+        order: number[];
+    };
     splice: {
         deleteCount: number;
         items: T[];

package/build/reactive/array.js

@@ -1,5 +1,5 @@
 import { isArray } from '@esportsplus/utilities';
-import { REACTIVE_ARRAY, TYPE } from '../constants.js';
+import { REACTIVE_ARRAY } from '../constants.js';
 import { isReactiveObject } from './object.js';
 class ReactiveArray extends Array {
     listeners = {};
@@ -120,8 +120,32 @@ class ReactiveArray extends Array {
         return item;
     }
     sort(fn) {
+        let before = new Array(this.length);
+        for (let i = 0, n = before.length; i < n; i++) {
+            before[i] = this[i];
+        }
         super.sort(fn);
-        this.dispatch('sort');
+        let buckets = new Map(), cursors = new Map(), order = new Array(this.length);
+        for (let i = 0, n = before.length; i < n; i++) {
+            let value = before[i], list = buckets.get(value);
+            if (!list) {
+                buckets.set(value, [i]);
+            }
+            else {
+                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;
+            }
+            let cursor = cursors.get(value) || 0;
+            order[i] = list[cursor];
+            cursors.set(value, cursor + 1);
+        }
+        this.dispatch('sort', { order });
         return this;
     }
     splice(start, deleteCount = this.length, ...items) {
@@ -143,5 +167,5 @@ class ReactiveArray extends Array {
         return length;
     }
 }
-Object.defineProperty(ReactiveArray.prototype, TYPE, { value: REACTIVE_ARRAY });
+Object.defineProperty(ReactiveArray.prototype, REACTIVE_ARRAY, { value: true });
 export { ReactiveArray };

package/build/reactive/object.js

@@ -1,6 +1,6 @@
 import { defineProperty, isArray, isPromise } from '@esportsplus/utilities';
 import { computed, dispose, effect, read, root, set, signal } from '../system.js';
-import { REACTIVE_OBJECT, TYPE } from '../constants.js';
+import { REACTIVE_OBJECT } from '../constants.js';
 import { ReactiveArray } from './array.js';
 class ReactiveObject {
     disposers = null;
@@ -72,8 +72,8 @@ class ReactiveObject {
         }
     }
 }
-Object.defineProperty(ReactiveObject.prototype, TYPE, { value: REACTIVE_OBJECT });
+Object.defineProperty(ReactiveObject.prototype, REACTIVE_OBJECT, { value: true });
 const isReactiveObject = (value) => {
-    return typeof value === 'object' && value !== null && value[TYPE] === REACTIVE_OBJECT;
+    return typeof value === 'object' && value !== null && value[REACTIVE_OBJECT] === true;
 };
 export { isReactiveObject, ReactiveObject };

package/build/system.js

@@ -1,5 +1,5 @@
 import { isObject } from '@esportsplus/utilities';
-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, TYPE } from './constants.js';
+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';
 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;
 function cleanup(computed) {
     if (!computed.cleanup) {
@@ -219,7 +219,7 @@ function unlink(link) {
     if (prevSub) {
         prevSub.nextSub = nextSub;
     }
-    else if ((dep.subs = nextSub) === null && dep[TYPE] === COMPUTED) {
+    else if ((dep.subs = nextSub) === null && dep.type === COMPUTED) {
         dispose(dep);
     }
     if (linkPool.length < linkPoolMax) {
@@ -233,7 +233,7 @@ 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.type === COMPUTED) {
                 update(dep);
                 if (computed.state & STATE_DIRTY) {
                     break;
@@ -248,7 +248,6 @@ function update(computed) {
 }
 const computed = (fn) => {
     let self = {
-        [TYPE]: COMPUTED,
         cleanup: null,
         deps: null,
         depsTail: null,
@@ -259,6 +258,7 @@ const computed = (fn) => {
         state: STATE_NONE,
         subs: null,
         subsTail: null,
+        type: COMPUTED,
         value: undefined,
     };
     self.prevHeap = self;
@@ -302,10 +302,10 @@ const effect = (fn) => {
     };
 };
 const isComputed = (value) => {
-    return isObject(value) && value[TYPE] === COMPUTED;
+    return isObject(value) && value.type === COMPUTED;
 };
 const isSignal = (value) => {
-    return isObject(value) && value[TYPE] === SIGNAL;
+    return isObject(value) && value.type === SIGNAL;
 };
 const onCleanup = (fn) => {
     let parent = observer || scope;
@@ -327,7 +327,7 @@ const onCleanup = (fn) => {
 const read = (node) => {
     if (observer) {
         link(node, observer);
-        if (node[TYPE] === COMPUTED) {
+        if (node.type === COMPUTED) {
             let height = node.height;
             if (height >= observer.height) {
                 observer.height = height + 1;
@@ -384,9 +384,9 @@ const set = (signal, value) => {
 };
 const signal = (value) => {
     return {
-        [TYPE]: SIGNAL,
         subs: null,
         subsTail: null,
+        type: SIGNAL,
         value,
     };
 };

package/build/types.d.ts

@@ -1,8 +1,7 @@
-import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING, TYPE } from './constants.js';
+import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING } from './constants.js';
 import { ReactiveArray } from './reactive/array.js';
 import { ReactiveObject } from './reactive/object.js';
 interface Computed<T> {
-    [TYPE]: typeof COMPUTED;
     cleanup: VoidFunction | VoidFunction[] | null;
     deps: Link | null;
     depsTail: Link | null;
@@ -13,6 +12,7 @@ interface Computed<T> {
     state: typeof STATE_CHECK | typeof STATE_DIRTY | typeof STATE_IN_HEAP | typeof STATE_NONE | typeof STATE_RECOMPUTING;
     subs: Link | null;
     subsTail: Link | null;
+    type: typeof COMPUTED;
     value: T;
 }
 interface Link {
@@ -24,9 +24,9 @@ interface Link {
     version: number;
 }
 type Signal<T> = {
-    [TYPE]: typeof SIGNAL;
     subs: Link | null;
     subsTail: Link | null;
+    type: typeof SIGNAL;
     value: T;
 };
 export type { Computed, Link, Signal, ReactiveArray, ReactiveObject };

package/build/types.js

@@ -1 +1 @@
-import { TYPE } from './constants.js';
+export {};

package/package.json

@@ -16,7 +16,7 @@
   },
   "type": "module",
   "types": "build/index.d.ts",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/constants.ts

@@ -29,9 +29,6 @@ const STATE_IN_HEAP = 1 << 3;
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
 
 
-const TYPE = Symbol('reactivity.type');
-
-
 export {
     COMPUTED,
     REACTIVE_ARRAY,
@@ -46,6 +43,5 @@ export {
     STATE_DIRTY,
     STATE_IN_HEAP,
     STATE_NONE,
-    STATE_RECOMPUTING,
-    TYPE
+    STATE_RECOMPUTING
 };

package/src/reactive/array.ts

@@ -1,5 +1,5 @@
 import { isArray } from '@esportsplus/utilities';
-import { REACTIVE_ARRAY, TYPE } from '~/constants';
+import { REACTIVE_ARRAY } from '~/constants';
 import { isReactiveObject } from './object';
 
 
@@ -22,7 +22,9 @@ type Events<T> = {
     shift: {
         item: T;
     };
-    sort: undefined;
+    sort: {
+        order: number[];
+    };
     splice: {
         deleteCount: number;
         items: T[];
@@ -200,8 +202,46 @@ class ReactiveArray<T> extends Array<T> {
     }
 
     sort(fn?: (a: T, b: T) => number) {
+        let before = new Array(this.length) as T[];
+
+        for (let i = 0, n = before.length; i < n; i++) {
+            before[i] = this[i];
+        }
+
         super.sort(fn);
-        this.dispatch('sort');
+
+        let buckets = new Map<any, number[]>(),
+            cursors = new Map<any, number>(),
+            order = new Array(this.length);
+
+        for (let i = 0, n = before.length; i < n; i++) {
+            let value = before[i],
+                list = buckets.get(value);
+
+            if (!list) {
+                buckets.set(value, [i]);
+            }
+            else {
+                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;
+            }
+
+            let cursor = cursors.get(value) || 0;
+
+            order[i] = list[cursor];
+            cursors.set(value, cursor + 1);
+        }
+
+        this.dispatch('sort', { order });
 
         return this;
     }
@@ -233,7 +273,7 @@ class ReactiveArray<T> extends Array<T> {
     }
 }
 
-Object.defineProperty(ReactiveArray.prototype, TYPE, { value: REACTIVE_ARRAY });
+Object.defineProperty(ReactiveArray.prototype, REACTIVE_ARRAY, { value: true });
 
 
 export { ReactiveArray };

package/src/reactive/object.ts

@@ -1,7 +1,7 @@
 import { defineProperty, isArray, isPromise } from '@esportsplus/utilities';
 import { computed, dispose, effect, read, root, set, signal } from '~/system';
 import { Computed, Signal } from '~/types';
-import { REACTIVE_OBJECT, TYPE } from '~/constants';
+import { REACTIVE_OBJECT } from '~/constants';
 import { ReactiveArray } from './array';
 
 
@@ -105,11 +105,11 @@ class ReactiveObject<T extends Record<PropertyKey, unknown>> {
     }
 }
 
-Object.defineProperty(ReactiveObject.prototype, TYPE, { value: REACTIVE_OBJECT });
+Object.defineProperty(ReactiveObject.prototype, REACTIVE_OBJECT, { value: true });
 
 
 const isReactiveObject = (value: any): value is ReactiveObject<any> => {
-    return typeof value === 'object' && value !== null && value[TYPE] === REACTIVE_OBJECT;
+    return typeof value === 'object' && value !== null && value[REACTIVE_OBJECT] === true;
 };
 
 

package/src/system.ts

@@ -2,8 +2,7 @@ import { isObject } from '@esportsplus/utilities';
 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,
-    TYPE
+    STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING
 } from './constants';
 import { Computed, Link, Signal } from './types';
 
@@ -322,7 +321,7 @@ function unlink(link: Link): Link | null {
     if (prevSub) {
         prevSub.nextSub = nextSub;
     }
-    else if ((dep.subs = nextSub) === null && dep[TYPE] === COMPUTED) {
+    else if ((dep.subs = nextSub) === null && dep.type === COMPUTED) {
         dispose(dep);
     }
 
@@ -341,7 +340,7 @@ function update<T>(computed: Computed<T>): void {
         for (let link = computed.deps; link; link = link.nextDep) {
             let dep = link.dep;
 
-            if (dep[TYPE] === COMPUTED) {
+            if (dep.type === COMPUTED) {
                 update(dep);
 
                 if (computed.state & STATE_DIRTY) {
@@ -361,7 +360,6 @@ function update<T>(computed: Computed<T>): void {
 
 const computed = <T>(fn: Computed<T>['fn']): Computed<T> => {
     let self: Computed<T> = {
-            [TYPE]: COMPUTED,
             cleanup: null,
             deps: null,
             depsTail: null,
@@ -372,6 +370,7 @@ const computed = <T>(fn: Computed<T>['fn']): Computed<T> => {
             state: STATE_NONE,
             subs: null,
             subsTail: null,
+            type: COMPUTED,
             value: undefined as T,
         };
 
@@ -428,11 +427,11 @@ const effect = <T>(fn: Computed<T>['fn']) => {
 };
 
 const isComputed = (value: unknown): value is Computed<unknown> => {
-    return isObject(value) && value[TYPE] === COMPUTED;
+    return isObject(value) && value.type === COMPUTED;
 };
 
 const isSignal = (value: unknown): value is Signal<unknown> => {
-    return isObject(value) && value[TYPE] === SIGNAL;
+    return isObject(value) && value.type === SIGNAL;
 };
 
 const onCleanup = (fn: VoidFunction): typeof fn => {
@@ -461,7 +460,7 @@ const read = <T>(node: Signal<T> | Computed<T>): T => {
     if (observer) {
         link(node, observer);
 
-        if (node[TYPE] === COMPUTED) {
+        if (node.type === COMPUTED) {
             let height = node.height;
 
             if (height >= observer.height) {
@@ -542,9 +541,9 @@ const set = <T>(signal: Signal<T>, value: T) => {
 
 const signal = <T>(value: T): Signal<T> => {
     return {
-        [TYPE]: SIGNAL,
         subs: null,
         subsTail: null,
+        type: SIGNAL,
         value,
     };
 };

package/src/types.ts

@@ -1,10 +1,9 @@
-import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING, TYPE } from './constants';
+import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING } from './constants';
 import { ReactiveArray } from './reactive/array';
 import { ReactiveObject } from './reactive/object';
 
 
 interface Computed<T> {
-    [TYPE]: typeof COMPUTED;
     cleanup: VoidFunction | VoidFunction[] | null;
     deps: Link | null;
     depsTail: Link | null;
@@ -20,6 +19,7 @@ interface Computed<T> {
         typeof STATE_RECOMPUTING;
     subs: Link | null;
     subsTail: Link | null;
+    type: typeof COMPUTED;
     value: T;
 }
 
@@ -33,9 +33,9 @@ interface Link {
 }
 
 type Signal<T> = {
-    [TYPE]: typeof SIGNAL;
     subs: Link | null;
     subsTail: Link | null;
+    type: typeof SIGNAL;
     value: T;
 };