@esportsplus/reactivity 0.20.0 → 0.20.2

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;

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

@@ -2,7 +2,6 @@ import { isArray } from '@esportsplus/utilities';
 import { REACTIVE_ARRAY } 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, REACTIVE_ARRAY, { value: true });
 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

@@ -3,12 +3,11 @@ import { computed, dispose, effect, read, root, set, signal } from '../system.js
 import { REACTIVE_OBJECT } 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, REACTIVE_OBJECT, { value: true });
 const isReactiveObject = (value) => {
-    return typeof value === 'object' && value !== null && REACTIVE_OBJECT in value;
+    return typeof value === 'object' && value !== null && value[REACTIVE_OBJECT] === true;
 };
 export { isReactiveObject, ReactiveObject };

package/build/system.js

@@ -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,6 @@ function update(computed) {
 }
 const computed = (fn) => {
     let self = {
-        [COMPUTED]: true,
         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) && 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,9 +384,9 @@ const set = (signal, value) => {
 };
 const signal = (value) => {
     return {
-        [SIGNAL]: true,
         subs: null,
         subsTail: null,
+        type: SIGNAL,
         value,
     };
 };

package/build/types.d.ts

@@ -2,7 +2,6 @@ import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE,
 import { ReactiveArray } from './reactive/array.js';
 import { ReactiveObject } from './reactive/object.js';
 interface Computed<T> {
-    [COMPUTED]: true;
     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> = {
-    [SIGNAL]: true;
     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 { COMPUTED, SIGNAL } from './constants.js';
+export {};

package/package.json

@@ -16,7 +16,7 @@
   },
   "type": "module",
   "types": "build/index.d.ts",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "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;

package/src/reactive/array.ts

@@ -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, REACTIVE_ARRAY, { value: true });
+
 
 export { ReactiveArray };

package/src/reactive/object.ts

@@ -6,18 +6,15 @@ 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, REACTIVE_OBJECT, { value: true });
+
 
 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[REACTIVE_OBJECT] === true;
 };
 
 

package/src/system.ts

@@ -321,7 +321,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 +340,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 +360,6 @@ function update<T>(computed: Computed<T>): void {
 
 const computed = <T>(fn: Computed<T>['fn']): Computed<T> => {
     let self: Computed<T> = {
-            [COMPUTED]: true,
             cleanup: null,
             deps: null,
             depsTail: null,
@@ -371,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,
         };
 
@@ -427,11 +427,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 +460,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,9 +541,9 @@ const set = <T>(signal: Signal<T>, value: T) => {
 
 const signal = <T>(value: T): Signal<T> => {
     return {
-        [SIGNAL]: true,
         subs: null,
         subsTail: null,
+        type: SIGNAL,
         value,
     };
 };

package/src/types.ts

@@ -4,7 +4,6 @@ import { ReactiveObject } from './reactive/object';
 
 
 interface Computed<T> {
-    [COMPUTED]: true;
     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> = {
-    [SIGNAL]: true;
     subs: Link | null;
     subsTail: Link | null;
+    type: typeof SIGNAL;
     value: T;
 };