@esportsplus/reactivity 0.0.1

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/build/index.d.ts

@@ -0,0 +1,20 @@
+declare class Reactive<T> {
+    private effect;
+    private fn?;
+    private observers;
+    private sources;
+    private state;
+    private value;
+    cleanup: ((old: T) => void)[] | null;
+    constructor(_: ((fn: VoidFunction) => T) | T, effect?: boolean);
+    get(): T;
+    set(value: T): void;
+    private mark;
+    private removeParentObservers;
+    private sync;
+    private update;
+}
+declare const effect: <T>(value: () => T) => Reactive<T>;
+declare const reactive: <T>(value: T) => {};
+declare const tick: () => void;
+export { effect, reactive, tick };

package/build/index.js

@@ -0,0 +1,176 @@
+import { CLEAN, CHECK, DIRTY } from './symbols';
+import obj from './obj';
+let index = 0, queue = [], reaction = null, running = false, stack = null;
+class Reactive {
+    effect;
+    fn;
+    observers = null;
+    sources = null;
+    state;
+    value;
+    cleanup = null;
+    constructor(_, effect = false) {
+        this.effect = effect;
+        if (typeof _ === 'function') {
+            this.fn = _;
+            this.state = DIRTY;
+            this.value = undefined;
+            if (effect) {
+                this.update();
+            }
+        }
+        else {
+            this.state = CLEAN;
+            this.value = _;
+        }
+    }
+    get() {
+        if (reaction) {
+            if (!stack && reaction.sources && reaction.sources[index] == this) {
+                index++;
+            }
+            else {
+                if (!stack) {
+                    stack = [this];
+                }
+                else {
+                    stack.push(this);
+                }
+            }
+        }
+        if (this.fn) {
+            this.sync();
+        }
+        return this.value;
+    }
+    set(value) {
+        if (this.observers && this.value !== value) {
+            for (let i = 0; i < this.observers.length; i++) {
+                this.observers[i].mark(DIRTY);
+            }
+        }
+        this.value = value;
+    }
+    mark(state) {
+        if (this.state < state) {
+            if (this.state === CLEAN && this.effect) {
+                queue.push(this);
+            }
+            this.state = state;
+            if (!this.observers) {
+                return;
+            }
+            for (let i = 0; i < this.observers.length; i++) {
+                this.observers[i].mark(CHECK);
+            }
+        }
+    }
+    removeParentObservers() {
+        if (!this.sources) {
+            return;
+        }
+        for (let i = index; i < this.sources.length; i++) {
+            let source = this.sources[i];
+            source.observers[source.observers.findIndex((v) => v === this)] = source.observers[source.observers.length - 1];
+            source.observers.pop();
+        }
+    }
+    sync() {
+        if (this.state === CHECK && this.sources) {
+            for (let i = 0, n = this.sources.length; i < n; i++) {
+                this.sources[i].sync();
+                if (this.state === DIRTY) {
+                    break;
+                }
+            }
+        }
+        if (this.state === DIRTY) {
+            this.update();
+        }
+        this.state = CLEAN;
+    }
+    update() {
+        let previous = {
+            index: index,
+            reaction: reaction,
+            stack: stack,
+            value: this.value
+        };
+        index = 0;
+        reaction = this;
+        stack = [];
+        try {
+            if (this.cleanup) {
+                for (let i = 0, n = this.cleanup.length; i < n; i++) {
+                    this.cleanup[i](this.value);
+                }
+                this.cleanup.length = 0;
+            }
+            this.value = this.fn((fn) => {
+                if (!this.cleanup) {
+                    this.cleanup = [fn];
+                }
+                else {
+                    this.cleanup.push(fn);
+                }
+            });
+            if (stack.length) {
+                this.removeParentObservers();
+                if (this.sources && index > 0) {
+                    this.sources.length = index + stack.length;
+                    for (let i = 0; i < stack.length; i++) {
+                        this.sources[index + i] = stack[i];
+                    }
+                }
+                else {
+                    this.sources = stack;
+                }
+                for (let i = index; i < this.sources.length; i++) {
+                    let source = this.sources[i];
+                    if (!source.observers) {
+                        source.observers = [this];
+                    }
+                    else {
+                        source.observers.push(this);
+                    }
+                }
+            }
+            else if (this.sources && index < this.sources.length) {
+                this.removeParentObservers();
+                this.sources.length = index;
+            }
+        }
+        finally {
+            index = previous.index;
+            reaction = previous.reaction;
+            stack = previous.stack;
+        }
+        if (this.observers && previous.value !== this.value) {
+            for (let i = 0; i < this.observers.length; i++) {
+                this.observers[i].state = DIRTY;
+            }
+        }
+        this.state = CLEAN;
+    }
+}
+const effect = (value) => {
+    return new Reactive(value, true);
+};
+const reactive = (value) => {
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return obj(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 };

package/build/obj.d.ts

@@ -0,0 +1,2 @@
+declare const factory: (values: Record<string, unknown>) => {};
+export default factory;

package/build/obj.js

@@ -0,0 +1,25 @@
+import { reactive } from './index';
+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);
+                    }
+                }
+                return lazy[key]?.get() || lazy[key];
+            },
+            set(value) {
+                lazy[key].set(value);
+            }
+        };
+    }
+    return Object.defineProperties({}, properties);
+};
+export default factory;

package/build/symbols.d.ts

@@ -0,0 +1,4 @@
+declare const CLEAN = 0;
+declare const CHECK = 1;
+declare const DIRTY = 2;
+export { CLEAN, CHECK, DIRTY };

package/build/symbols.js

@@ -0,0 +1,4 @@
+const CLEAN = 0;
+const CHECK = 1;
+const DIRTY = 2;
+export { CLEAN, CHECK, DIRTY };

package/build/types.d.ts

@@ -0,0 +1,3 @@
+import { CLEAN, CHECK, DIRTY } from './symbols';
+type State = typeof CHECK | typeof CLEAN | typeof DIRTY;
+export { State };

package/build/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,19 @@
+{
+    "author": "ICJR",
+    "description": "Reactivity",
+    "devDependencies": {
+        "tsc-alias": "^1.8.1",
+        "typescript": "^4.9.3"
+    },
+    "main": "./build/index.js",
+    "name": "@esportsplus/reactivity",
+    "private": false,
+    "scripts": {
+        "build": "tsc && tsc-alias",
+        "-": "-",
+        "prepare": "npm run build",
+        "prepublishOnly": "npm run build"
+    },
+    "types": "./build/index.d.ts",
+    "version": "0.0.1"
+}

package/src/index.ts

@@ -0,0 +1,251 @@
+import { CLEAN, CHECK, DIRTY } from './symbols';
+import { 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;
+
+
+class Reactive<T> {
+    private effect: boolean;
+    private fn?: (onCleanup: (fn: VoidFunction) => void) => T;
+    private observers: Reactive<any>[] | null = null;
+    private sources: Reactive<any>[] | null = null;
+    private state: State;
+    private value: T;
+
+
+    cleanup: ((old: T) => void)[] | null = null;
+
+
+    constructor(_: ((fn: VoidFunction) => T) | T, effect: boolean = false) {
+        this.effect = effect;
+
+        if (typeof _ === 'function') {
+            this.fn = _ as (onCleanup: (fn: VoidFunction) => void) => T;
+            this.state = DIRTY;
+            this.value = undefined as any;
+
+            if (effect) {
+                this.update();
+            }
+        }
+        else {
+            this.state = CLEAN;
+            this.value = _;
+        }
+    }
+
+
+    get(): T {
+        if (reaction) {
+            if (!stack && reaction.sources && reaction.sources[index] == this) {
+                index++;
+            }
+            else {
+                if (!stack) {
+                    stack = [this];
+                }
+                else {
+                    stack.push(this);
+                }
+            }
+        }
+
+        if (this.fn) {
+            this.sync();
+        }
+
+        return this.value;
+    }
+
+    set(value: T): void {
+        if (this.observers && this.value !== value) {
+            for (let i = 0; i < this.observers.length; i++) {
+                this.observers[i].mark(DIRTY);
+            }
+        }
+
+        this.value = value;
+    }
+
+
+    private mark(state: typeof CHECK | typeof DIRTY): void {
+        if (this.state < state) {
+            // If previous state was clean we need to update effects
+            if (this.state === CLEAN && this.effect) {
+                queue.push(this);
+            }
+
+            this.state = state;
+
+            if (!this.observers) {
+                return;
+            }
+
+            for (let i = 0; i < this.observers.length; i++) {
+                this.observers[i].mark(CHECK);
+            }
+        }
+    }
+
+    // We don't actually delete sources here because we're replacing the entire array soon
+    private removeParentObservers(): void {
+        if (!this.sources) {
+            return;
+        }
+
+        for (let i = index; i < this.sources.length; i++) {
+            let source = this.sources[i];
+
+            source.observers![ source.observers!.findIndex((v) => v === this) ] = source.observers![source.observers!.length - 1];
+            source.observers!.pop();
+        }
+    }
+
+    // Update if dirty or if a parent is dirty
+    private sync(): void {
+        // 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++) {
+                this.sources[i].sync();
+
+                // Stop the loop here so we won't trigger updates on other parents unnecessarily
+                // If our computation changes to no longer use some sources, we don't
+                // want to update() a source we used last time, but now don't use.
+                if ((this.state as State) === DIRTY) {
+                    break;
+                }
+            }
+        }
+
+        // If we were already dirty or marked dirty by the step above, update.
+        if (this.state === DIRTY) {
+            this.update();
+        }
+
+        // By now, we're clean
+        this.state = CLEAN;
+    }
+
+    private update(): void {
+        let previous = {
+                index: index,
+                reaction: reaction,
+                stack: stack,
+                value: this.value
+            };
+
+        index = 0;
+        reaction = this;
+        stack = [];
+
+        try {
+            if (this.cleanup) {
+                for (let i = 0, n = this.cleanup.length; i < n; i++) {
+                    this.cleanup[i]( this.value );
+                }
+
+                this.cleanup.length = 0;
+            }
+
+            this.value = this.fn!(
+                (fn: VoidFunction) => {
+                    if (!this.cleanup) {
+                        this.cleanup = [fn];
+                    }
+                    else {
+                        this.cleanup.push(fn);
+                    }
+                }
+            );
+
+            // If sources have changed, update source & observer links
+            if (stack.length) {
+                // Remove all old sources' observers links to us
+                this.removeParentObservers();
+
+                // Update source up links
+                if (this.sources && index > 0) {
+                    this.sources.length = index + stack.length;
+
+                    for (let i = 0; i < stack.length; i++) {
+                        this.sources[index + i] = stack[i];
+                    }
+                }
+                else {
+                    this.sources = stack;
+                }
+
+                // Add ourselves to the end of the parent observers array
+                for (let i = index; i < this.sources.length; i++) {
+                    let source = this.sources[i];
+
+                    if (!source.observers) {
+                        source.observers = [this];
+                    }
+                    else {
+                        source.observers.push( this );
+                    }
+                }
+            }
+            // Remove all old sources' observers links to us
+            else if (this.sources && index < this.sources.length) {
+                this.removeParentObservers();
+                this.sources.length = index;
+            }
+        }
+        finally {
+            index = previous.index;
+            reaction = previous.reaction;
+            stack = previous.stack;
+        }
+
+        // Handle diamond depenendencies if we're the parent of a diamond.
+        if (this.observers && previous.value !== this.value) {
+            for (let i = 0; i < this.observers.length; i++) {
+                this.observers[i].state = DIRTY;
+            }
+        }
+
+        this.state = CLEAN;
+    }
+}
+
+
+
+const effect = <T>(value: () => T) => {
+    return new Reactive(value, true);
+};
+
+const reactive = <T>(value: T) => {
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return obj(value as Record<string, unknown>);
+    }
+
+    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 };
+
+

package/src/obj.ts

@@ -0,0 +1,38 @@
+import { reactive } from './index';
+
+
+const factory = (values: Record<string, unknown>) => {
+    let lazy: Record<string, any> = {},
+        properties: PropertyDescriptorMap = {};
+
+    for (let key in values) {
+        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);
+                    }
+                }
+
+                return lazy[key]?.get() || lazy[key];
+            },
+            set(value: unknown) {
+                lazy[key].set(value);
+            }
+        };
+    }
+
+    return Object.defineProperties({}, properties);
+};
+
+
+export default factory;

package/src/symbols.ts

@@ -0,0 +1,8 @@
+const CLEAN = 0;
+
+const CHECK = 1;
+
+const DIRTY = 2;
+
+
+export { CLEAN, CHECK, DIRTY };

package/src/types.ts

@@ -0,0 +1,7 @@
+import { CLEAN, CHECK, DIRTY } from './symbols';
+
+
+type State = typeof CHECK | typeof CLEAN | typeof DIRTY;
+
+
+export { State };

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "alwaysStrict": true,
+        "baseUrl": "src",
+        "declaration": true,
+        "declarationDir": "./build",
+        "lib": ["dom", "esnext"],
+        "module": "esnext",
+        "moduleResolution": "nodenext",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "outDir": "./build",
+        "paths": {
+            "~/*": ["*"]
+        },
+        "removeComments": true,
+        "resolveJsonModule": true,
+        "strict": true,
+        "target": "esnext"
+    },
+    "exclude": ["node_modules"],
+    "include": ["src"]
+}