@esportsplus/reactivity 0.20.0 → 0.20.1

package/build/constants.d.ts

@@ -12,4 +12,5 @@ declare const STATE_DIRTY: number;
 declare const STATE_RECOMPUTING: number;
 declare const STATE_IN_HEAP: number;
 declare const STATE_NOTIFY_MASK: number;
-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 };
+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 };

package/build/constants.js

@@ -1,7 +1,7 @@
-const COMPUTED = Symbol('computed');
-const REACTIVE_ARRAY = Symbol('reactive.array');
-const REACTIVE_OBJECT = Symbol('reactive.object');
-const SIGNAL = Symbol('signal');
+const COMPUTED = Symbol('reactivity.computed');
+const REACTIVE_ARRAY = Symbol('reactivity.reactive.array');
+const REACTIVE_OBJECT = Symbol('reactivity.reactive.object');
+const SIGNAL = Symbol('reactivity.signal');
 const STABILIZER_IDLE = 0;
 const STABILIZER_RESCHEDULE = 1;
 const STABILIZER_RUNNING = 2;
@@ -12,4 +12,5 @@ const STATE_DIRTY = 1 << 1;
 const STATE_RECOMPUTING = 1 << 2;
 const STATE_IN_HEAP = 1 << 3;
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
-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 };
+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 };

package/build/reactive/array.d.ts

@@ -1,4 +1,3 @@
-import { REACTIVE_ARRAY } from '../constants.js';
 type Events<T> = {
     clear: undefined;
     concat: {
@@ -34,7 +33,6 @@ type Listener<V> = {
 };
 type Listeners = Record<string, (Listener<any> | null)[]>;
 declare class ReactiveArray<T> extends Array<T> {
-    [REACTIVE_ARRAY]: boolean;
     listeners: Listeners;
     constructor(...items: T[]);
     clear(): void;
@@ -48,7 +46,7 @@ declare class ReactiveArray<T> extends Array<T> {
     push(...items: T[]): number;
     reverse(): this;
     shift(): T | undefined;
-    sort(fn: (a: T, b: T) => number): this;
+    sort(fn?: (a: T, b: T) => number): this;
     splice(start: number, deleteCount?: number, ...items: T[]): T[];
     unshift(...items: T[]): number;
 }

package/build/reactive/array.js

@@ -1,8 +1,7 @@
 import { isArray } from '@esportsplus/utilities';
-import { REACTIVE_ARRAY } from '../constants.js';
+import { REACTIVE_ARRAY, TYPE } from '../constants.js';
 import { isReactiveObject } from './object.js';
 class ReactiveArray extends Array {
-    [REACTIVE_ARRAY] = true;
     listeners = {};
     constructor(...items) {
         super(...items);
@@ -18,14 +17,15 @@ class ReactiveArray extends Array {
             if (isArray(item)) {
                 for (let j = 0, o = item.length; j < o; j++) {
                     added.push(item[j]);
+                    super.push(item[j]);
                 }
             }
             else {
                 added.push(item);
+                super.push(item);
             }
         }
         if (added.length) {
-            super.push(...added);
             this.dispatch('concat', { items: added });
         }
         return this;
@@ -50,10 +50,14 @@ class ReactiveArray extends Array {
                 listeners[i] = null;
             }
         }
+        while (listeners.length && listeners[listeners.length - 1] === null) {
+            listeners.pop();
+        }
     }
     dispose() {
         let item;
-        while (item = super.pop()) {
+        while (this.length) {
+            item = super.pop();
             if (isReactiveObject(item)) {
                 item.dispose();
             }
@@ -76,6 +80,9 @@ class ReactiveArray extends Array {
                 }
             }
             listeners[hole] = listener;
+            while (listeners.length && listeners[listeners.length - 1] === null) {
+                listeners.pop();
+            }
         }
     }
     once(event, listener) {
@@ -136,4 +143,5 @@ class ReactiveArray extends Array {
         return length;
     }
 }
+Object.defineProperty(ReactiveArray.prototype, TYPE, { value: REACTIVE_ARRAY });
 export { ReactiveArray };

package/build/reactive/object.d.ts

@@ -1,6 +1,4 @@
-import { REACTIVE_OBJECT } from '../constants.js';
 declare class ReactiveObject<T extends Record<PropertyKey, unknown>> {
-    [REACTIVE_OBJECT]: boolean;
     private disposers;
     constructor(data: T);
     dispose(): void;

package/build/reactive/object.js

@@ -1,14 +1,13 @@
 import { defineProperty, isArray, isPromise } from '@esportsplus/utilities';
 import { computed, dispose, effect, read, root, set, signal } from '../system.js';
-import { REACTIVE_OBJECT } from '../constants.js';
+import { REACTIVE_OBJECT, TYPE } from '../constants.js';
 import { ReactiveArray } from './array.js';
 class ReactiveObject {
-    [REACTIVE_OBJECT] = true;
     disposers = null;
     constructor(data) {
-        let keys = Object.keys(data), key;
-        while (key = keys.pop()) {
-            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;
                 defineProperty(this, key, {
@@ -73,7 +72,8 @@ class ReactiveObject {
         }
     }
 }
+Object.defineProperty(ReactiveObject.prototype, TYPE, { value: REACTIVE_OBJECT });
 const isReactiveObject = (value) => {
-    return typeof value === 'object' && value !== null && REACTIVE_OBJECT in value;
+    return typeof value === 'object' && value !== null && value[TYPE] === REACTIVE_OBJECT;
 };
 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 } 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, TYPE } 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 && 'fn' in dep) {
+    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 ('fn' in dep) {
+            if (dep[TYPE] === COMPUTED) {
                 update(dep);
                 if (computed.state & STATE_DIRTY) {
                     break;
@@ -248,7 +248,7 @@ function update(computed) {
 }
 const computed = (fn) => {
     let self = {
-        [COMPUTED]: true,
+        [TYPE]: COMPUTED,
         cleanup: null,
         deps: null,
         depsTail: null,
@@ -302,10 +302,10 @@ const effect = (fn) => {
     };
 };
 const isComputed = (value) => {
-    return isObject(value) && COMPUTED in value;
+    return isObject(value) && value[TYPE] === COMPUTED;
 };
 const isSignal = (value) => {
-    return isObject(value) && SIGNAL in value;
+    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 ('fn' in node) {
+        if (node[TYPE] === COMPUTED) {
             let height = node.height;
             if (height >= observer.height) {
                 observer.height = height + 1;
@@ -384,7 +384,7 @@ const set = (signal, value) => {
 };
 const signal = (value) => {
     return {
-        [SIGNAL]: true,
+        [TYPE]: SIGNAL,
         subs: null,
         subsTail: null,
         value,

package/build/types.d.ts

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

package/build/types.js

@@ -1 +1 @@
-import { COMPUTED, SIGNAL } from './constants.js';
+import { TYPE } from './constants.js';

package/package.json

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

package/src/constants.ts

@@ -1,10 +1,10 @@
-const COMPUTED = Symbol('computed');
+const COMPUTED = Symbol('reactivity.computed');
 
-const REACTIVE_ARRAY = Symbol('reactive.array');
+const REACTIVE_ARRAY = Symbol('reactivity.reactive.array');
 
-const REACTIVE_OBJECT = Symbol('reactive.object');
+const REACTIVE_OBJECT = Symbol('reactivity.reactive.object');
 
-const SIGNAL = Symbol('signal');
+const SIGNAL = Symbol('reactivity.signal');
 
 
 const STABILIZER_IDLE = 0;
@@ -29,6 +29,9 @@ const STATE_IN_HEAP = 1 << 3;
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
 
 
+const TYPE = Symbol('reactivity.type');
+
+
 export {
     COMPUTED,
     REACTIVE_ARRAY,
@@ -43,5 +46,6 @@ export {
     STATE_DIRTY,
     STATE_IN_HEAP,
     STATE_NONE,
-    STATE_RECOMPUTING
+    STATE_RECOMPUTING,
+    TYPE
 };

package/src/reactive/array.ts

@@ -1,5 +1,5 @@
 import { isArray } from '@esportsplus/utilities';
-import { REACTIVE_ARRAY } from '~/constants';
+import { REACTIVE_ARRAY, TYPE } from '~/constants';
 import { isReactiveObject } from './object';
 
 
@@ -42,7 +42,6 @@ type Listeners = Record<string, (Listener<any> | null)[]>;
 
 
 class ReactiveArray<T> extends Array<T> {
-    [REACTIVE_ARRAY] = true;
     listeners: Listeners = {};
 
 
@@ -67,15 +66,16 @@ class ReactiveArray<T> extends Array<T> {
             if (isArray(item)) {
                 for (let j = 0, o = item.length; j < o; j++) {
                     added.push(item[j]);
+                    super.push(item[j]);
                 }
             }
             else {
                 added.push(item as T);
+                super.push(item as T);
             }
         }
 
         if (added.length) {
-            super.push(...added);
             this.dispatch('concat', { items: added });
         }
 
@@ -107,12 +107,18 @@ class ReactiveArray<T> extends Array<T> {
                 listeners[i] = null;
             }
         }
+
+        while (listeners.length && listeners[listeners.length - 1] === null) {
+            listeners.pop();
+        }
     }
 
     dispose() {
         let item;
 
-        while (item = super.pop()) {
+        while (this.length) {
+            item = super.pop();
+
             if (isReactiveObject(item)) {
                 item.dispose();
             }
@@ -140,6 +146,10 @@ class ReactiveArray<T> extends Array<T> {
             }
 
             listeners[hole] = listener;
+
+            while (listeners.length && listeners[listeners.length - 1] === null) {
+                listeners.pop();
+            }
         }
     }
 
@@ -189,7 +199,7 @@ class ReactiveArray<T> extends Array<T> {
         return item;
     }
 
-    sort(fn: (a: T, b: T) => number) {
+    sort(fn?: (a: T, b: T) => number) {
         super.sort(fn);
         this.dispatch('sort');
 
@@ -223,5 +233,7 @@ class ReactiveArray<T> extends Array<T> {
     }
 }
 
+Object.defineProperty(ReactiveArray.prototype, TYPE, { value: REACTIVE_ARRAY });
+
 
 export { ReactiveArray };

package/src/reactive/object.ts

@@ -1,23 +1,20 @@
 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 } from '~/constants';
+import { REACTIVE_OBJECT, TYPE } from '~/constants';
 import { ReactiveArray } from './array';
 
 
 class ReactiveObject<T extends Record<PropertyKey, unknown>> {
-    [REACTIVE_OBJECT] = true;
-
-
     private disposers: VoidFunction[] | null = null;
 
 
     constructor(data: T) {
-        let keys = Object.keys(data),
-            key: keyof T | undefined;
+        let keys = Object.keys(data);
 
-        while (key = keys.pop()) {
-            let value = data[key],
+        for (let i = 0, n = keys.length; i < n; ++i) {
+            let key: keyof T | undefined = keys[i],
+                value = data[key],
                 type = typeof value;
 
             if (type === 'function') {
@@ -108,9 +105,11 @@ class ReactiveObject<T extends Record<PropertyKey, unknown>> {
     }
 }
 
+Object.defineProperty(ReactiveObject.prototype, TYPE, { value: REACTIVE_OBJECT });
+
 
 const isReactiveObject = (value: any): value is ReactiveObject<any> => {
-    return typeof value === 'object' && value !== null && REACTIVE_OBJECT in value;
+    return typeof value === 'object' && value !== null && value[TYPE] === REACTIVE_OBJECT;
 };
 
 

package/src/system.ts

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

package/src/types.ts

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