@realglebivanov/reactive 1.0.0

package/src/nodes/iterable/collection.ts

@@ -0,0 +1,106 @@
+import type { ReactiveNode } from "../reactive";
+import { ReactiveItem } from "./item";
+
+export type Key = string | number | boolean | symbol;
+export type KeyFn<K extends Key, T> = ((key: Key, value: T) => K);
+export type BuildFn<N extends Node, T> = ((key: Key, value: T) => ReactiveNode<N>);
+export type Collection<T> = Array<T> | Map<Key, T>;
+
+export class ReactiveItemCollection<K extends Key, T, N extends ReactiveNode<Node>> {
+    private generationId = 0;
+    private items = new Map<K, ReactiveItem<T, N>>();
+
+    constructor(
+        private keyFn: KeyFn<K, T>,
+        private buildFn: BuildFn<N, T>,
+    ) { }
+
+    deactivate() {
+        for (const item of this.items.values()) 
+            item.deactivate();
+    }
+
+    unmount() {
+        for (const item of this.items.values())
+            item.unmount();
+        this.items.clear();
+        this.generationId = 0;
+    }
+
+    replace(anchor: Node, newItems: Collection<T>) {
+        this.generationId++;
+        let refItem = null;
+
+        for (const [k, value] of newItems.entries()) {
+            const key = this.keyFn(k, value);
+            const item = this.getOrInsert(anchor, refItem, key, value);
+            item.generationId = this.generationId;
+            refItem = item;
+        }
+
+        this.removeStaleItems();
+    }
+
+    replaceKeys(anchor: Node, items: Collection<T>) {
+        for (const [k, value] of items.entries()) {
+            const key = this.keyFn(k, value);
+            const refItem = this.items.get(key);
+
+            if (refItem === undefined) continue;
+
+            this.insertItem(anchor, refItem, key, value);
+            refItem.deactivate();
+            refItem.unmount();
+        }
+    }
+
+    append(anchor: Node, newItems: Collection<T>) {
+        for (const [k, value] of newItems.entries()) {
+            const key = this.keyFn(k, value);
+            this.insertItem(anchor, null, key, value);
+        }
+    }
+
+    remove(items: Collection<T>) {
+        for (const [k, value] of items.entries()) {
+            const key = this.keyFn(k, value);
+            const item = this.items.get(key);
+            if (item === undefined) continue;
+            item.deactivate();
+            item.unmount();
+            this.items.delete(key);
+        }
+    }
+
+    private getOrInsert(anchor: Node, refItem: ReactiveItem<T, N> | null, key: K, value: T) {
+        const item = this.items.get(key);
+
+        if (item === undefined) return this.insertItem(anchor, refItem, key, value);
+        if (item.value === value) return item;
+
+        item.deactivate();
+        item.unmount();
+
+        return this.insertItem(anchor, refItem, key, value);
+    }
+
+    private insertItem(anchor: Node, refItem: ReactiveItem<T, N> | null, key: K, value: T) {
+        const newNode = this.buildFn(key, value);
+        const item = new ReactiveItem(anchor, value, newNode);
+        
+        item.mount(refItem);
+        item.activate(this.generationId);
+        this.items.set(key, item);
+
+        return item;
+    }
+
+    private removeStaleItems() {
+        for (const [key, item] of this.items.entries()) {
+            if (item.generationId === this.generationId) continue;
+            item.deactivate();
+            item.unmount();
+            this.items.delete(key);
+        }
+    }
+}

package/src/nodes/iterable/item.ts

@@ -0,0 +1,35 @@
+import type { ReactiveNode } from "../reactive";
+
+export class ReactiveItem<T, N extends ReactiveNode<Node>> {
+    public generationId?: number;
+
+    constructor(
+        public anchor: Node,
+        public value: T,
+        public node: N
+    ) { }
+
+    mount(refItem: ReactiveItem<T, N> | null) {
+        const parentNode = this.anchor.parentNode;
+        const insertBefore = refItem?.node.nextSibling || null;
+
+        if (parentNode === null) return;
+        if (this.node.parentNode === null) this.node.mount(parentNode);
+
+        parentNode.insertBefore(this.node, insertBefore);
+    }
+
+    activate(generationId: number): void {
+        if (this.generationId === undefined)
+            this.node.activate();
+        this.generationId = generationId;
+    }
+
+    deactivate(): void {
+        this.node.deactivate();
+    }
+
+    unmount(): void {
+        this.node.unmount();
+    }
+}

package/src/nodes/iterable.ts

@@ -0,0 +1,84 @@
+import { mapObservable, type Observable } from "../observables";
+import { toReactiveNode, type ReactiveNode } from "./reactive";
+import {
+    ReactiveItemCollection,
+    type BuildFn,
+    type Collection,
+    type Key,
+    type KeyFn
+} from "./iterable/collection";
+
+type Source<T> = Collection<T> | Event<T>;
+
+export type Event<T> =
+    { type: "replace", items: Collection<T> } |
+    { type: "remove", items: Collection<T> } |
+    { type: "append", items: Collection<T> } |
+    { type: "replaceKeys", items: Collection<T> };
+
+export const iterable = <K extends Key, T, N extends ReactiveNode<Node>>(
+    { it$, buildFn, keyFn }: {
+        it$: Observable<Source<T>>,
+        buildFn: BuildFn<N, T>,
+        keyFn: KeyFn<K, T>
+    }
+) => new Iterable<K, T, N>(
+    it$,
+    buildFn,
+    keyFn
+).toReactiveNode();
+
+class Iterable<K extends Key, T, N extends ReactiveNode<Node>> {
+    private readonly id = Symbol('Iterable');
+    private it$: Observable<Event<T>>;
+    private items: ReactiveItemCollection<K, T, N>;
+
+    constructor(
+        it$: Observable<Source<T>>,
+        buildFn: BuildFn<N, T>,
+        keyFn: KeyFn<K, T>
+    ) {
+        this.it$ = this.toEventObservable(it$);
+        this.items = new ReactiveItemCollection(keyFn, buildFn);
+    }
+
+    toReactiveNode() {
+        const anchor = document.createComment('Iterable');
+        const updateFn = (event: Event<T>) => {
+            switch (event.type) {
+                case "replace":
+                    return this.items.replace(anchor, event.items);
+                case "replaceKeys":
+                    return this.items.replaceKeys(anchor, event.items);
+                case "append":
+                    return this.items.append(anchor, event.items);
+                case "remove":
+                    return this.items.remove(event.items);
+                default:
+                    return console.warn('Unsupported event type', event);    
+            }
+        };
+
+        return toReactiveNode(anchor, [{
+            mount: (parentNode: Node) => parentNode.appendChild(anchor),
+            activate: () => this.it$.subscribeInit(this.id, updateFn),
+            deactivate: () => {
+                this.it$.unsubscribe(this.id);
+                this.items.deactivate();
+            },
+            unmount: () => {
+                this.items.unmount();
+                anchor.remove();
+            }
+        }]);
+    }
+
+    private toEventObservable(it$: Observable<Source<T>>): Observable<Event<T>> {
+        return mapObservable((source: Source<T>) => {
+            if (source instanceof Array || source instanceof Map) {
+                return { type: "replace", items: source };
+            }
+            return source;
+        }, it$)
+    }
+}

package/src/nodes/reactive.ts

@@ -0,0 +1,97 @@
+import { buildLifecycleHooks, type Lifecycle } from '../lifecycle';
+import type { Observable } from '../observables';
+
+export type ReactiveNode<T extends Node> = Lifecycle & T & ReactiveNodeSetters<T>;
+
+export interface ReactiveNodeSetters<T extends Node> {
+    clk: <R extends ReactiveNode<T>>(cb: EventListenerOrEventListenerObject) => R;
+}
+
+export type TagReactiveNode<K extends keyof HTMLElementTagNameMap> =
+    ReactiveNode<HTMLElementTagNameMap[K]> &
+    TagReactiveNodeSetters<K>;
+
+export interface TagReactiveNodeSetters<K extends keyof HTMLElementTagNameMap> {
+    att: (name: string, value: string) => TagReactiveNode<K>;
+    att$: (name: string, value: Observable<string>) => TagReactiveNode<K>;
+}
+
+export const toTagReactiveNode = <K extends keyof HTMLElementTagNameMap>(
+    node: HTMLElementTagNameMap[K],
+    handlers: Lifecycle[]
+): TagReactiveNode<K> => {
+    const internalHandlers = [...handlers];
+    const tagNodeSetters = buildTagNodeSetters<K>(internalHandlers);
+    const nodeSetters = buildNodeSetters(internalHandlers);
+    const hooks = buildLifecycleHooks(internalHandlers);
+
+    return Object.assign(node, nodeSetters, tagNodeSetters, hooks);
+};
+
+export const toReactiveNode = <T extends Node>(
+    node: T,
+    handlers: Lifecycle[]
+): ReactiveNode<T> => {
+    const internalHandlers = [...handlers];
+    const nodeSetters = buildNodeSetters(internalHandlers);
+    const hooks = buildLifecycleHooks(internalHandlers);
+
+    return Object.assign(node, nodeSetters, hooks);
+};
+
+export const reactiveTextNode = (text: string) => {
+    const textNode = document.createTextNode(text);
+    const hooks = [{
+        mount: (parentNode: Node) => parentNode.appendChild(textNode),
+        activate: () => undefined,
+        deactivate: () => undefined,
+        unmount: () => textNode.remove()
+    }];
+
+    return toReactiveNode(textNode, hooks);
+}
+
+const buildTagNodeSetters = <K extends keyof HTMLElementTagNameMap>(
+    handlers: Lifecycle[]
+) => ({
+    att: function (this: TagReactiveNode<K>, name: string, value: string) {
+        this.setAttribute(name, value);
+        return this;
+    },
+    att$: function (
+        this: TagReactiveNode<K>,
+        name: string,
+        value$: Observable<string>
+    ) {
+        const subscriberId = Symbol(`Attribute: ${name}`)
+
+        handlers.push({
+            mount: (_: Node) => undefined,
+            activate: () => value$.subscribeInit(
+                subscriberId,
+                (value: string) => this.setAttribute(name, value)),
+            deactivate: () => value$.unsubscribe(subscriberId),
+            unmount: () => undefined
+        });
+
+        return this;
+    }
+});
+
+const buildNodeSetters = <T extends Node>(
+    handlers: Lifecycle[]
+) => ({
+    clk: function <R extends ReactiveNode<T>>(
+        this: R,
+        callback: EventListenerOrEventListenerObject
+    ) {
+        handlers.push({
+            mount: (_: Node) => undefined,
+            activate: () => this.addEventListener('click', callback),
+            deactivate: () => this.removeEventListener('click', callback),
+            unmount: () => undefined
+        });
+
+        return this;
+    }
+});

package/src/nodes/template.ts

@@ -0,0 +1,95 @@
+import type { Observable } from "../observables";
+import { toReactiveNode } from "./reactive";
+
+type PartialTextNode = {
+    staticNodes: Text[],
+    dynamicNode: {
+        node: Text,
+        observerId: symbol,
+        observable: Observable<string>
+    } | undefined
+};
+
+type Hole = Observable<string> | string;
+
+export const template = (
+    strings: TemplateStringsArray,
+    ...holes: Hole[]
+) => new Template(strings, holes).toReactiveNode();
+
+class Template {
+    constructor(
+        private strings: TemplateStringsArray,
+        private holes: Hole[]
+    ) { }
+
+    toReactiveNode() {
+        const nodes = this.buildNodes();
+        const commentNode = document.createComment('Template');
+
+        return toReactiveNode(commentNode, [{
+            mount: (parentNode: Node) => this.appendNodes(parentNode, nodes),
+            activate: () => {
+                for (const node of nodes) this.attachObservable(node);
+            },
+            deactivate: () => {
+                for (const node of nodes) this.detachObservable(node);
+            },
+            unmount: () => this.removeNodes(nodes),
+        }]);
+    }
+
+    private buildNodes() {
+        return this.strings.map((staticPart, i) => {
+            const hole = this.holes[i];
+            const partialTextNode: PartialTextNode = {
+                staticNodes: [document.createTextNode(staticPart)],
+                dynamicNode: undefined
+            };
+
+            if (typeof hole === 'string') {
+                partialTextNode.staticNodes.push(document.createTextNode(hole));
+            } else if (typeof hole === 'object' && hole !== null) {
+                partialTextNode.dynamicNode = {
+                    node: document.createTextNode(''),
+                    observerId: Symbol(`Template${i}`),
+                    observable: hole
+                };
+            }
+
+            return partialTextNode;
+        });
+    }
+
+    private appendNodes(parentNode: Node, nodes: PartialTextNode[]) {
+        for (const { staticNodes, dynamicNode } of nodes) {
+            for (const staticNode of staticNodes)
+                parentNode.appendChild(staticNode);
+            if (dynamicNode !== undefined) 
+                parentNode.appendChild(dynamicNode.node);
+        }
+    };
+
+    private attachObservable(partialTextNode: PartialTextNode) {
+        if (partialTextNode === undefined) return;
+        if (partialTextNode.dynamicNode === undefined) return;
+
+        const { node, observerId, observable } = partialTextNode.dynamicNode;
+
+        observable.subscribeInit(observerId, (value) => node.data = value);
+    };
+
+    private removeNodes(nodes: PartialTextNode[]) {
+        for (const { staticNodes, dynamicNode } of nodes) {
+            for (const staticNode of staticNodes)
+                staticNode.remove();
+            if (dynamicNode !== undefined) dynamicNode.node.remove();
+        }
+    };
+
+    private detachObservable(node: PartialTextNode) {
+        if (node.dynamicNode === undefined) return;
+        const { observerId, observable } = node.dynamicNode;
+        observable.unsubscribe(observerId);
+    };
+}

package/src/observables/dedup.observable.ts

@@ -0,0 +1,65 @@
+import type { Observable, Observer } from ".";
+
+export const dedupObservable = <T>(
+    innerObservable: Observable<T>,
+    compareEqualFn: CompareEqualFn<T> = (a, b) => a == b,
+    cloneFn: CloneFn<T> = (a) => a
+) => new DedupObservable(innerObservable, compareEqualFn, cloneFn);
+
+type CompareEqualFn<T> = (a: T, b: T) => boolean;
+type CloneFn<T> = (a: T) => T;
+
+class DedupObservable<T> implements Observable<T> {
+    private id = Symbol('DedupObservable');
+    private currentValue: T | undefined = undefined;
+    private isInitialized = false;
+    private observers = new Map();
+
+    constructor(
+        private innerObservable: Observable<T>,
+        private compareEqualFn: CompareEqualFn<T>,
+        private cloneFn: CloneFn<T>
+    ) { }
+
+    unsubscribeAll() {
+        this.observers.clear();
+        this.innerUnubscribe();
+    }
+
+    unsubscribe(id: symbol) {
+        this.observers.delete(id);
+        this.innerUnubscribe();
+    }
+
+    subscribe(id: symbol, observer: Observer<T>) {
+        this.observers.set(id, observer);
+        this.innerSubscribe();
+    }
+
+    subscribeInit(id: symbol, observer: Observer<T>) {
+        this.subscribe(id, observer);
+    }
+
+    private innerSubscribe() {
+        if (this.observers.size !== 1) return;
+        this.innerObservable.subscribeInit(
+            this.id, this.updateValue.bind(this));
+    };
+
+    private updateValue(value: T) {
+        if (this.isInitialized && this.compareEqualFn(this.currentValue as T, value)) 
+            return;
+
+        this.currentValue = this.cloneFn(value), this.isInitialized = true;
+
+        for (const observer of this.observers.values())
+            observer(this.currentValue);
+    }
+
+    private innerUnubscribe() {
+        if (this.observers.size !== 0) return;
+        this.currentValue = undefined;
+        this.isInitialized = false;
+        this.innerObservable.unsubscribe(this.id);
+    };
+}

package/src/observables/index.ts

@@ -0,0 +1,18 @@
+export type Observer<T> = (value: T) => void;
+export type UpdateFn<T> = (value: T) => T;
+
+export interface Observable<T> {
+    unsubscribeAll(): void;
+    unsubscribe(id: symbol): void;
+    subscribe(id: symbol, observer: Observer<T>): void;
+    subscribeInit(id: symbol, observer: Observer<T>): void;
+}
+
+export interface Updatable<T> {
+    update(updateFn: UpdateFn<T>): void;
+}
+
+export * from "./value.observable";
+export * from "./map.observable";
+export * from "./dedup.observable";
+export * from "./scoped.observable";

package/src/observables/map.observable.ts

@@ -0,0 +1,80 @@
+import type { Observable, Observer } from ".";
+
+type ObservableValue<O extends Observable<any>> =
+    O extends Observable<infer T> ? T : never;
+
+type Values<
+    Observables extends readonly Observable<any>[]
+> = { [K in keyof Observables]: ObservableValue<Observables[K]> };
+
+export const mapObservable = <
+    Observables extends readonly Observable<any>[],
+    R
+>(
+    mapFn: (...values: Values<Observables>) => R,
+    ...observables: Observables
+): MapObservable<Observables, R> =>
+    new MapObservable(mapFn, observables);
+
+class MapObservable<Observables extends readonly Observable<any>[], R> implements Observable<R> {
+    private observers = new Map<symbol, Observer<R>>();
+    private initializedIndices = new Set<keyof Observables>();
+
+    private ids!: { [_K in keyof Observables]: symbol };
+    private currentValues!: Partial<Values<Observables>>;
+
+    constructor(
+        private mapFn: (...values: Values<Observables>) => R,
+        private observables: Observables
+    ) {
+        this.ids = observables.map((_) => Symbol(`MapObservable`)) as
+            { [_K in keyof Observables]: symbol };
+        this.currentValues = [] as Partial<Values<Observables>>;
+    }
+
+    unsubscribeAll() {
+        this.observers.clear();
+        this.innerUnubscribe();
+    }
+
+    unsubscribe(id: symbol) {
+        this.observers.delete(id);
+        this.innerUnubscribe();
+    }
+
+    subscribe(id: symbol, observer: Observer<R>) {
+        this.observers.set(id, observer);
+        this.innerSubscribe();
+    }
+
+    subscribeInit(id: symbol, observer: Observer<R>) {
+        this.subscribe(id, observer);
+    }
+
+    private notifyObservers(i: keyof Observables) {
+        return (newValue: Values<Observables>[keyof Observables]) => {
+            this.currentValues[i] = newValue;
+            this.initializedIndices.add(i);
+
+            if (this.initializedIndices.size === this.currentValues.length)
+                for (const observer of this.observers.values())
+                    observer(this.mapFn(...this.currentValues as Values<Observables>));
+        };
+    }
+
+    private innerSubscribe() {
+        if (this.observers.size !== 1) return;
+        for (const [i, observable] of this.observables.entries()) {
+            observable.subscribeInit(
+                this.ids[i as keyof Observables],
+                this.notifyObservers(i));
+        }
+    };
+
+    private innerUnubscribe() {
+        if (this.observers.size !== 0) return;
+        for (const [i, observable] of this.observables.entries()) {
+            observable.unsubscribe(this.ids[i as keyof Observables]);
+        }
+    };
+}

package/src/observables/scoped.observable.ts

@@ -0,0 +1,49 @@
+import type { Observable, Observer, Updatable, UpdateFn } from ".";
+
+export const scopedObservable = <T extends Observable<any>>(
+    innerObservable: T
+) => new ScopedObservable<T>(innerObservable);
+
+type Value<O extends Observable<any>> =
+    O extends Observable<infer T> ? T : never;
+
+export class ScopedObservable<T extends Observable<any>> implements Observable<Value<T>> {
+    private aliases = new Map<symbol, symbol>();
+
+    constructor(
+        private innerObservable: T
+    ) { }
+
+    unsubscribeAll() {
+        for (const alias of this.aliases.values())
+            this.innerObservable.unsubscribe(alias);
+        this.aliases.clear();
+    }
+
+    unsubscribe(id: symbol) {
+        const alias = this.aliases.get(id);
+        if (alias === undefined) return;
+        this.aliases.delete(id);
+        this.innerObservable.unsubscribe(alias);
+    }
+
+    subscribe(id: symbol, observer: Observer<Value<T>>) {
+        const alias = Symbol('ScopedObservable');
+        this.aliases.set(id, alias);
+        this.innerObservable.subscribe(alias, observer);
+    }
+
+    subscribeInit(id: symbol, observer: Observer<Value<T>>) {
+        const alias = Symbol('ScopedObservable');
+        this.aliases.set(id, alias);
+        this.innerObservable.subscribeInit(alias, observer);
+    }
+
+    update(
+        this: ScopedObservable<Updatable<Value<T>> & Observable<Value<T>>>,
+        updateFn: UpdateFn<Value<T>>
+    ): void {
+        if ('update' in this.innerObservable)
+            (this.innerObservable as Updatable<Value<T>>).update(updateFn);
+    }
+}

package/src/observables/value.observable.ts

@@ -0,0 +1,50 @@
+import type { Observable, Observer, Updatable, UpdateFn } from ".";
+import { dedupMicrotaskRunner, type TaskRunner } from "../task";
+
+export const observable = <T>(
+    value: T,
+    opts: { microtaskRunner: TaskRunner } = { microtaskRunner: dedupMicrotaskRunner }
+): ValueObservable<T> => new ValueObservable(value, opts);
+
+class ValueObservable<T> implements Observable<T>, Updatable<T> {
+    private readonly observers = new Map<symbol, Observer<T>>();
+
+    constructor(
+        private value: T,
+        private opts: { microtaskRunner: TaskRunner }
+    ) { }
+
+    unsubscribeAll() {
+        this.observers.clear();
+    }
+    unsubscribe(id: symbol) {
+        this.observers.delete(id);
+    }
+    subscribe(id: symbol, observer: Observer<T>) {
+        if (this.observers.has(id))
+            console.warn("Duplicate observer id", id);
+        this.observers.set(id, observer);
+    }
+    subscribeInit(id: symbol, observer: Observer<T>) {
+        this.subscribe(id, observer);
+        this.notify(id, observer);
+    }
+    update(updateFn: UpdateFn<T>) {
+        this.value = updateFn(this.value);
+        this.opts.microtaskRunner(this.notifyAll.bind(this));
+    }
+
+    private notify(id: symbol, observer: Observer<T>) {
+        try {
+            if (this.observers.get(id) === observer) observer(this.value);
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    private notifyAll() {
+        for (const [id, observer] of this.observers.entries())
+            this.notify(id, observer);
+    };
+}
+