@realglebivanov/reactive 1.0.0

package/src/reactive/array.ts

@@ -0,0 +1,63 @@
+import { observable, type Observable, type Updatable } from "../observables";
+import type { Event } from "../nodes";
+
+type Source<T> = Observable<Event<T>> & Updatable<Event<T>>;
+
+export class ReactiveArray<T> {
+    private observables: WeakRef<Source<T>>[] = [];
+
+    constructor(private items: T[] = []) { }
+
+    get observable$(): Source<T> {
+        const obs$ = observable<Event<T>>({ type: "replace", items: this.items });
+        this.observables.push(new WeakRef(obs$));
+        return obs$;
+    };
+
+    push(...items: T[]) {
+        this.items.push(...items);
+        this.emit({ type: "append", items: items })
+    }
+
+    pop(): T | undefined {
+        if (this.items.length === 0) return undefined;
+
+        const index = this.items.length - 1;
+        const value = this.items.pop() as T;
+
+        this.emit({ type: "remove", items: new Map().set(index, value) });
+
+        return value;
+    }
+
+    remove(indices: number[]) {
+        if (indices.length == 0) return;
+        const eventItems = new Map();
+        for (const idx of indices) {
+            if (!(idx in this.items)) continue;
+            eventItems.set(idx, this.items[idx]);
+            delete this.items[idx];
+        }
+        this.emit({ type: "remove", items: eventItems });
+    }
+
+    replace(items: T[]) {
+        this.items = items;
+        this.emit({ type: "replace", items: items });
+    }
+
+    replaceKeys(items: Map<number, T>) {
+        for (const [idx, value] of items.entries()) {
+            if (!(idx in this.items)) continue;
+            this.items[idx] = value;
+        }
+
+        this.emit({ type: "replaceKeys", items: items })
+    }
+
+    private emit(event: Event<T>) {
+        const updateFn = (_: Event<T>) => event;
+        for (const obs$ of this.observables)
+            obs$.deref()?.update(updateFn);
+    }
+}

package/src/reactive/index.ts

@@ -0,0 +1 @@
+export * from './array';

package/src/router.ts

@@ -0,0 +1,82 @@
+import { toReactiveNode, type ReactiveNode } from "./nodes";
+import { microtaskRunner } from "./task";
+
+type RouteKey<T extends RouteCollection<Node>> = keyof T & string;
+type Route<T extends RouteCollection<Node>> = T[RouteKey<T>];
+type RouteCollection<N extends Node> = Record<string, ReactiveNode<N>>;
+type RouterOpts<T extends RouteCollection<Node>> = {
+    notFoundRoute: RouteKey<T>;
+};
+
+export const router = <
+    T extends RouteCollection<Node>
+>(routes: T, opts: RouterOpts<T>): ReactiveNode<Comment> => 
+    new Router<T>(routes, opts).toReactiveNode();
+
+class Router<T extends RouteCollection<Node>> {
+    private anchor: Comment | undefined;
+    private currentRoute: Route<T> | undefined;
+    private hashChangeListener = () => this.syncHash();
+
+    constructor(
+        private routes: T,
+        private opts: RouterOpts<T>
+    ) { }
+
+    toReactiveNode() {
+        const anchor = document.createComment('Router');
+
+        return toReactiveNode(anchor, [{
+            mount: (parentNode: HTMLElement) => {
+                if (this.anchor !== undefined)
+                    return console.warn("Router is already active");
+                this.anchor = anchor;
+                parentNode.appendChild(anchor);
+            },
+            activate: () => {
+                this.syncHash();
+                window.addEventListener("hashchange", this.hashChangeListener);
+            },
+            deactivate: () => {
+                window.removeEventListener("hashchange", this.hashChangeListener);
+                this.currentRoute?.deactivate();         
+            },
+            unmount: () => {
+                this.currentRoute?.unmount();
+                this.currentRoute = undefined;  
+                anchor.remove();
+            }
+        }]);
+    }
+
+    private syncHash() {
+        const newRoute = this.getNewRoute();
+
+        if (newRoute === this.currentRoute || newRoute === undefined) return;
+
+        this.currentRoute?.deactivate();
+        this.currentRoute?.unmount();
+        this.currentRoute = newRoute;
+
+        microtaskRunner(() => {
+            const parentElement = this.anchor?.parentElement;
+            if (parentElement === null || parentElement === undefined) return;
+            newRoute.mount(parentElement);
+            newRoute.activate();
+        });
+    }
+
+    private getNewRoute(): Route<T> | undefined {
+        const hashLocation = location.hash.slice(1) || "/";
+
+        const routeKey: RouteKey<T> = this.isRouteKey(hashLocation)
+            ? hashLocation
+            : this.opts.notFoundRoute;
+
+        return this.routes[routeKey];
+    }
+
+    private isRouteKey(key: string): key is RouteKey<T> {
+        return key in this.routes;
+    }
+}

package/src/tag.ts

@@ -0,0 +1,62 @@
+import {
+    reactiveTextNode,
+    toTagReactiveNode,
+    type ReactiveNode,
+    type TagReactiveNode
+} from './nodes/reactive';
+
+export type InputChild<
+    T extends Node,
+    K extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap
+> = TagReactiveNode<K> | ReactiveNode<T> | string;
+
+export const tag = <
+    K extends keyof HTMLElementTagNameMap
+>(name: K, ...inputChildren: InputChild<Node>[]): TagReactiveNode<K> => {
+    const node = document.createElement(name);
+    const children: ReactiveNode<Node>[] = [];
+
+    for (const child of inputChildren) {
+        if (typeof (child) === 'string') {
+            children.push(reactiveTextNode(child));
+        } else if (child instanceof Node) {
+            children.push(child);
+        } else {
+            throw new Error('Unsupported child type');
+        }
+    }
+
+    return toTagReactiveNode<K>(node, [{
+        mount: (parentNode: Node) => {
+            parentNode.appendChild(node);
+            for (const child of children) child.mount(node);
+        },
+        activate: () => {
+            for (const child of children) child.activate();
+        },
+        deactivate: () => {
+            for (const child of children) child.deactivate();
+        },
+        unmount: () => {
+            for (const child of children) child.unmount();
+            node.remove();
+        }
+    }]);
+}
+
+export const tags = {
+    img: (src: string) => tag('img').att('src', src),
+    input: (type: string) => tag('input').att('type', type),
+    canvas: <T extends InputChild<Node>[]>(...children: T) => tag('canvas', ...children),
+    button: <T extends InputChild<Node>[]>(...children: T) => tag('button', ...children),
+    h1: <T extends InputChild<Node>[]>(...children: T) => tag('h1', ...children),
+    h2: <T extends InputChild<Node>[]>(...children: T) => tag('h2', ...children),
+    h3: <T extends InputChild<Node>[]>(...children: T) => tag('h3', ...children),
+    p: <T extends InputChild<Node>[]>(...children: T) => tag('p', ...children),
+    a: <T extends InputChild<Node>[]>(...children: T) => tag('a', ...children),
+    div: <T extends InputChild<Node>[]>(...children: T) => tag('div', ...children),
+    ul: <T extends InputChild<Node>[]>(...children: T) => tag('ul', ...children),
+    li: <T extends InputChild<Node>[]>(...children: T) => tag('li', ...children),
+    span: <T extends InputChild<Node>[]>(...children: T) => tag('span', ...children),
+    select: <T extends InputChild<Node>[]>(...children: T) => tag('select', ...children)
+};

package/src/task.ts

@@ -0,0 +1,36 @@
+export type Task = () => void;
+export type TaskRunner = (task: Task) => void;
+
+export const buildDedupMicrotaskRunner = (): TaskRunner => {
+    const tasks = new Set<Task>();
+    const enqueue = () => queueMicrotask(() => {
+        const run = Array.from(tasks);
+        tasks.clear();
+        for (const task of run) task();
+    });
+
+    return (task: Task) => {
+        if (tasks.has(task)) return;
+        tasks.add(task);
+        if (tasks.size > 1) return;
+        enqueue();
+    };
+};
+
+export const dedupMicrotaskRunner = buildDedupMicrotaskRunner();
+
+export const buildMicrotaskRunner = (): TaskRunner => {
+    const tasks: Task[] = [];
+    const enqueue = () => queueMicrotask(() => {
+        const run = tasks.toReversed();
+        tasks.length = 0;
+        for (const task of run) task();
+    });
+
+    return (task: Task) => {
+        tasks.push(task);
+        if (tasks.length == 1) enqueue();
+    };
+};
+
+export const microtaskRunner = buildMicrotaskRunner();

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "moduleResolution": "bundler",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "esnext",
+    "target": "es2015",
+    "types": [],
+    "lib": ["dom", "ES2023"],
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  }
+}

package/tsup.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+    example: "src/example.ts",
+  },
+  tsconfig: "tsconfig.json",
+
+  format: ["esm"],
+  target: "es2018",
+  platform: "browser",
+
+  dts: true,
+  minify: true,
+  sourcemap: true,
+  clean: true,
+
+  treeshake: true,
+  publicDir: './public'
+});