@esportsplus/reactivity 0.0.2 → 0.0.5

package/build/index.d.ts

@@ -1,4 +1,29 @@
-declare const effect: <T>(value: () => T) => void;
-declare const reactive: <T>(value: T) => T;
-declare const tick: () => void;
-export { effect, reactive, tick };
+import { Queue } from './types';
+type Infer<T> = T extends (...args: any[]) => any ? Infer<ReturnType<T>> : T extends Record<string, any> ? {
+    [K in keyof T]: Infer<T[K]>;
+} : Reactive<T>;
+declare class Reactive<T> {
+    private effect;
+    private fn?;
+    private observers;
+    private queue;
+    private sources;
+    private state;
+    private value;
+    cleanup: ((old: T) => void)[] | null;
+    constructor(input: ((fn: VoidFunction) => T) | T, queue?: Queue | null, effect?: boolean);
+    get(): T;
+    set(value: T): void;
+    private mark;
+    private removeParentObservers;
+    private sync;
+    private update;
+}
+declare const effect: (queue: Queue) => <T>(value: () => T) => void;
+declare const reactive: <T>(value: T) => Infer<T>;
+declare const _default: {
+    effect: (queue: Queue) => <T>(value: () => T) => void;
+    reactive: <T_1>(value: T_1) => Infer<T_1>;
+};
+export default _default;
+export { effect, reactive };

package/build/index.js

@@ -1,27 +1,29 @@
 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(input, queue = null, effect = false) {
         this.effect = effect;
-        if (typeof _ === 'function') {
-            this.fn = _;
+        if (typeof input === 'function') {
+            this.fn = input;
             this.state = DIRTY;
             this.value = undefined;
             if (effect) {
+                this.queue = queue;
                 this.update();
             }
         }
         else {
             this.state = CLEAN;
-            this.value = _;
+            this.value = input;
         }
     }
     get() {
@@ -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,24 +160,20 @@ 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) => {
+    let v;
     if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-        return obj(value);
-    }
-    return new Reactive(value);
-};
-const tick = () => {
-    if (running) {
-        return;
+        v = obj(value);
     }
-    running = true;
-    for (let i = 0, n = queue.length; i < n; i++) {
-        queue[i].get();
+    else {
+        v = new Reactive(value);
     }
-    queue.length = 0;
-    running = false;
+    return v;
 };
-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 extends Record<string, any>>(values: 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

@@ -2,8 +2,8 @@
     "author": "ICJR",
     "description": "Reactivity",
     "devDependencies": {
-        "tsc-alias": "^1.8.1",
-        "typescript": "^4.9.3"
+        "tsc-alias": "^1.8.2",
+        "typescript": "^4.9.4"
     },
     "main": "./build/index.js",
     "name": "@esportsplus/reactivity",
@@ -15,5 +15,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.2"
+    "version": "0.0.5"
 }

package/src/index.ts

@@ -1,12 +1,19 @@
 import { CLEAN, CHECK, DIRTY } from './symbols';
-import { State } from './types';
+import { Queue, State } from './types';
 import obj from './obj';
 
 
+type Infer<T> =
+    T extends (...args: any[]) => any
+        ? Infer<ReturnType<T>>
+        : T extends Record<string, any>
+            ? { [K in keyof T]: Infer<T[K]> }
+            // Requires class type
+            : Reactive<T>;
+
+
 let index = 0,
-    queue: Reactive<any>[] = [],
     reaction: Reactive<any> | null = null,
-    running: boolean = false,
     stack: Reactive<any>[] | null = null;
 
 
@@ -14,6 +21,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,21 +30,22 @@ class Reactive<T> {
     cleanup: ((old: T) => void)[] | null = null;
 
 
-    constructor(_: ((fn: VoidFunction) => T) | T, effect: boolean = false) {
+    constructor(input: ((fn: VoidFunction) => T) | T, queue: Queue | null = null, effect: boolean = false) {
         this.effect = effect;
 
-        if (typeof _ === 'function') {
-            this.fn = _ as (onCleanup: (fn: VoidFunction) => void) => T;
+        if (typeof input === 'function') {
+            this.fn = input as (onCleanup: (fn: VoidFunction) => void) => T;
             this.state = DIRTY;
             this.value = undefined as any;
 
             if (effect) {
+                this.queue = queue;
                 this.update();
             }
         }
         else {
             this.state = CLEAN;
-            this.value = _;
+            this.value = input;
         }
     }
 
@@ -63,7 +72,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 +83,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 +109,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 +123,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 +147,7 @@ class Reactive<T> {
         this.state = CLEAN;
     }
 
-    private update(): void {
+    private update() {
         let previous = {
                 index: index,
                 reaction: reaction,
@@ -217,35 +232,25 @@ 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 => {
-    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-        return obj(value);
-    }
-
-    return new Reactive(value) as T;
-};
+const reactive = <T>(value: T) => {
+    let v;
 
-const tick = () => {
-    if (running) {
-        return;
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        v = obj(value);
     }
-
-    running = true;
-
-    for (let i = 0, n = queue.length; i < n; i++) {
-        queue[i].get();
+    else {
+        v = new Reactive(value);
     }
 
-    queue.length = 0;
-    running = false;
+    return v as Infer<T>;
 };
 
 
-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: unknown) {
+    // 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 extends Record<string, any>>(values: T) => {
     let lazy: Record<string, any> = {},
         properties: PropertyDescriptorMap = {};
 
@@ -9,29 +23,22 @@ 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);
             }
         };
     }
 
-    return Object.defineProperties({}, properties) as T;
+    return Object.defineProperties({}, properties);
 };
 
 

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 };