@esportsplus/reactivity 0.0.2 → 0.0.4

package/build/index.d.ts

@@ -1,4 +1,9 @@
-declare const effect: <T>(value: () => T) => void;
+import { Queue } from './types';
+declare const effect: (queue: Queue) => <T>(value: () => T) => void;
 declare const reactive: <T>(value: T) => T;
-declare const tick: () => void;
-export { effect, reactive, tick };
+declare const _default: {
+    effect: (queue: Queue) => <T>(value: () => T) => void;
+    reactive: <T_1>(value: T_1) => T_1;
+};
+export default _default;
+export { effect, reactive };

package/build/index.js

@@ -1,21 +1,23 @@
 import { CLEAN, CHECK, DIRTY } from './symbols';
 import obj from './obj';
-let index = 0, queue = [], reaction = null, running = false, stack = null;
+let index = 0, reaction = null, stack = null;
 class Reactive {
     effect;
     fn;
     observers = null;
+    queue = null;
     sources = null;
     state;
     value;
     cleanup = null;
-    constructor(_, effect = false) {
+    constructor(_, queue = null, effect = false) {
         this.effect = effect;
         if (typeof _ === 'function') {
             this.fn = _;
             this.state = DIRTY;
             this.value = undefined;
             if (effect) {
+                this.queue = queue;
                 this.update();
             }
         }
@@ -54,7 +56,12 @@ class Reactive {
     mark(state) {
         if (this.state < state) {
             if (this.state === CLEAN && this.effect) {
-                queue.push(this);
+                if (!this.queue) {
+                    throw new Error('Effects cannot be updated without a queue');
+                }
+                this.queue.add(async () => {
+                    await this.get();
+                });
             }
             this.state = state;
             if (!this.observers) {
@@ -153,8 +160,10 @@ class Reactive {
         this.state = CLEAN;
     }
 }
-const effect = (value) => {
-    new Reactive(value, true);
+const effect = (queue) => {
+    return (value) => {
+        new Reactive(value, queue, true);
+    };
 };
 const reactive = (value) => {
     if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
@@ -162,15 +171,5 @@ const reactive = (value) => {
     }
     return new Reactive(value);
 };
-const tick = () => {
-    if (running) {
-        return;
-    }
-    running = true;
-    for (let i = 0, n = queue.length; i < n; i++) {
-        queue[i].get();
-    }
-    queue.length = 0;
-    running = false;
-};
-export { effect, reactive, tick };
+export default { effect, reactive };
+export { effect, reactive };

package/build/obj.d.ts

@@ -1,2 +1,2 @@
-declare const factory: <T>(values: T) => T;
+declare const factory: <T = Record<string, any>>(values: T) => T;
 export default factory;

package/build/obj.js

@@ -1,21 +1,24 @@
 import { reactive } from './index';
+function setup(value) {
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return factory(value);
+    }
+    return reactive(value);
+}
 const factory = (values) => {
     let lazy = {}, properties = {};
     for (let key in values) {
         properties[key] = {
             get() {
                 if (!lazy[key]) {
-                    let value = values[key];
-                    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-                        lazy[key] = factory(value);
-                    }
-                    else {
-                        lazy[key] = reactive(value);
-                    }
+                    lazy[key] = setup(values[key]);
                 }
-                return lazy[key]?.get() || lazy[key];
+                return lazy[key].get();
             },
             set(value) {
+                if (!lazy[key]) {
+                    lazy[key] = setup(values[key]);
+                }
                 lazy[key].set(value);
             }
         };

package/build/types.d.ts

@@ -1,3 +1,6 @@
 import { CLEAN, CHECK, DIRTY } from './symbols';
+type Queue = {
+    add: (fn: () => Promise<void> | void) => void;
+};
 type State = typeof CHECK | typeof CLEAN | typeof DIRTY;
-export { State };
+export { Queue, State };

package/package.json

@@ -15,5 +15,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.2"
+    "version": "0.0.4"
 }

package/src/index.ts

@@ -1,12 +1,10 @@
 import { CLEAN, CHECK, DIRTY } from './symbols';
-import { State } from './types';
+import { Queue, State } from './types';
 import obj from './obj';
 
 
 let index = 0,
-    queue: Reactive<any>[] = [],
     reaction: Reactive<any> | null = null,
-    running: boolean = false,
     stack: Reactive<any>[] | null = null;
 
 
@@ -14,6 +12,7 @@ class Reactive<T> {
     private effect: boolean;
     private fn?: (onCleanup: (fn: VoidFunction) => void) => T;
     private observers: Reactive<any>[] | null = null;
+    private queue: Queue | null = null;
     private sources: Reactive<any>[] | null = null;
     private state: State;
     private value: T;
@@ -22,7 +21,7 @@ class Reactive<T> {
     cleanup: ((old: T) => void)[] | null = null;
 
 
-    constructor(_: ((fn: VoidFunction) => T) | T, effect: boolean = false) {
+    constructor(_: ((fn: VoidFunction) => T) | T, queue: Queue | null = null, effect: boolean = false) {
         this.effect = effect;
 
         if (typeof _ === 'function') {
@@ -31,6 +30,7 @@ class Reactive<T> {
             this.value = undefined as any;
 
             if (effect) {
+                this.queue = queue;
                 this.update();
             }
         }
@@ -63,7 +63,7 @@ class Reactive<T> {
         return this.value;
     }
 
-    set(value: T): void {
+    set(value: T) {
         if (this.observers && this.value !== value) {
             for (let i = 0; i < this.observers.length; i++) {
                 this.observers[i].mark(DIRTY);
@@ -74,11 +74,17 @@ class Reactive<T> {
     }
 
 
-    private mark(state: typeof CHECK | typeof DIRTY): void {
+    private mark(state: typeof CHECK | typeof DIRTY) {
         if (this.state < state) {
             // If previous state was clean we need to update effects
             if (this.state === CLEAN && this.effect) {
-                queue.push(this);
+                if (!this.queue) {
+                    throw new Error('Effects cannot be updated without a queue');
+                }
+
+                this.queue.add(async () => {
+                    await this.get();
+                });
             }
 
             this.state = state;
@@ -94,7 +100,7 @@ class Reactive<T> {
     }
 
     // We don't actually delete sources here because we're replacing the entire array soon
-    private removeParentObservers(): void {
+    private removeParentObservers() {
         if (!this.sources) {
             return;
         }
@@ -108,7 +114,7 @@ class Reactive<T> {
     }
 
     // Update if dirty or if a parent is dirty
-    private sync(): void {
+    private sync() {
         // If we are potentially dirty, see if we have a parent who has actually changed value
         if (this.state === CHECK && this.sources) {
             for (let i = 0, n = this.sources.length; i < n; i++) {
@@ -132,7 +138,7 @@ class Reactive<T> {
         this.state = CLEAN;
     }
 
-    private update(): void {
+    private update() {
         let previous = {
                 index: index,
                 reaction: reaction,
@@ -217,9 +223,10 @@ class Reactive<T> {
 }
 
 
-
-const effect = <T>(value: () => T) => {
-    new Reactive(value, true);
+const effect = (queue: Queue) => {
+    return <T>(value: () => T) => {
+        new Reactive(value, queue, true);
+    };
 };
 
 const reactive = <T>(value: T): T => {
@@ -230,22 +237,6 @@ const reactive = <T>(value: T): T => {
     return new Reactive(value) as T;
 };
 
-const tick = () => {
-    if (running) {
-        return;
-    }
-
-    running = true;
-
-    for (let i = 0, n = queue.length; i < n; i++) {
-        queue[i].get();
-    }
-
-    queue.length = 0;
-    running = false;
-};
-
-
-export { effect, reactive, tick };
-
 
+export default { effect, reactive };
+export { effect, reactive };

package/src/obj.ts

@@ -1,7 +1,21 @@
 import { reactive } from './index';
 
 
-const factory = <T>(values: T) => {
+function setup(value: any) {
+    // if (Array.isArray(value)) {
+    // TODO: Need a solution
+    // }
+    // TODO: Can remove isArray once solution is found ^
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return factory(value);
+    }
+
+    return reactive(value);
+}
+
+
+// TODO: Typecheck on values tro get rid of lazy var
+const factory = <T = Record<string, any>>(values: T) => {
     let lazy: Record<string, any> = {},
         properties: PropertyDescriptorMap = {};
 
@@ -9,23 +23,16 @@ const factory = <T>(values: T) => {
         properties[key] = {
             get() {
                 if (!lazy[key]) {
-                    let value = values[key];
-
-                    // if (Array.isArray(value)) {
-                    // TODO: Need a solution
-                    // }
-                    // TODO: Can remove isArray once solution is found ^
-                    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-                        lazy[key] = factory(value as Record<string, unknown>);
-                    }
-                    else {
-                        lazy[key] = reactive(value);
-                    }
+                    lazy[key] = setup(values[key]);
                 }
 
-                return lazy[key]?.get() || lazy[key];
+                return lazy[key].get();
             },
             set(value: unknown) {
+                if (!lazy[key]) {
+                    lazy[key] = setup(values[key]);
+                }
+
                 lazy[key].set(value);
             }
         };

package/src/types.ts

@@ -1,7 +1,11 @@
 import { CLEAN, CHECK, DIRTY } from './symbols';
 
 
+type Queue = {
+    add: (fn: () => Promise<void> | void) => void;
+};
+
 type State = typeof CHECK | typeof CLEAN | typeof DIRTY;
 
 
-export { State };
+export { Queue, State };