ctrl-fx 0.0.1 → 0.1.0

package/dist/internal/cmpmgr.js

@@ -0,0 +1,561 @@
+import { componentPath } from ".";
+import { foldNode } from "../dom";
+import { getId } from "../dom/attrs";
+import {} from "../dom/components";
+import { nodeId } from "../dom/nodeid";
+import { eq, exhaustivenessCheck } from "../utils";
+import { EventManager } from "./eventmgr";
+import { TaskRegistry } from "./taskreg";
+import { closestComponentPath, componentNode, detach, internalElementNode, internalTextNode, rootNode, updateAttrs, updateProps, updateText, viewNode, } from "./vdom";
+let mountCount = 0;
+export function manageComponent(component, mountId, window, interpreter, styleRegistry) {
+    const mountNode = window.document.getElementById(mountId);
+    if (!mountNode) {
+        throw new Error(`Cannot attach component tree. Root node with id ${mountId} not found`);
+    }
+    const mgr = new ComponentManager(component, mountNode, window, interpreter, styleRegistry);
+    return {
+        dispatchEffect: (effect) => mgr.dispatchEffect(effect),
+    };
+}
+export class ComponentManager {
+    constructor(component, mountNode, window, interpreter, styleRegistry, onRootEvent) {
+        Object.defineProperty(this, "rootCompPath", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "components", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "removedComponents", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "addedComponents", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "interpreter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "window", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "document", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "eventManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "taskRegistry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new TaskRegistry()
+        });
+        Object.defineProperty(this, "styleRegistry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onRootEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.window = window;
+        this.document = this.window.document;
+        this.interpreter = interpreter;
+        this.styleRegistry = styleRegistry;
+        this.onRootEvent = onRootEvent;
+        this.eventManager = new EventManager(this.window, (effect, node, onResult) => {
+            const componentPath = closestComponentPath(node);
+            if (componentPath) {
+                this.runEffect(effect, componentPath, onResult);
+            }
+        });
+        const rootCompPath = componentPath(nodeId(`__root_component:${++mountCount}`));
+        this.rootCompPath = rootCompPath;
+        const compNode = componentNode(component, rootCompPath.nodeId);
+        const root = rootNode(mountNode);
+        root.append(compNode);
+        this.components[componentPath(compNode.nodeId, undefined).format()] =
+            compNode;
+        this.injectComponentCss(component);
+        const initStateEffect = component.initialState(component.params);
+        this.runEffect(initStateEffect, rootCompPath, (state) => {
+            this.renderComponent(rootCompPath, state);
+        });
+    }
+    injectComponentCss(component) {
+        if (!component.css)
+            return;
+        const css = typeof component.css === "function"
+            ? component.css(component.params)
+            : component.css;
+        this.styleRegistry.injectStyle(css);
+    }
+    getRootState() {
+        return (this.components[this.rootCompPath.format()]?.state ?? {
+            _type: "Uninitialized",
+        });
+    }
+    dispatchEffect(effect) {
+        this.runEffect(effect, this.rootCompPath, () => { });
+    }
+    destroy() {
+        this.taskRegistry.cancelAll();
+    }
+    runEffect(effect, componentPath, f) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+        this.interpreter(effect, {
+            onComplete: f,
+            onFireEvent: (event) => {
+                const component = this.components[componentPath.format()];
+                if (component) {
+                    const parentCompPath = componentPath.parentComponentPath;
+                    if (parentCompPath) {
+                        component.componentEventListeners.forEach((listener) => {
+                            const effect = listener(event);
+                            this.runEffect(effect, parentCompPath, () => { });
+                        });
+                    }
+                    else {
+                        this.onRootEvent?.(event);
+                    }
+                }
+            },
+            getState: () => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return that.components[componentPath.format()].state.value;
+            },
+            setState: (state) => {
+                that.renderComponent(componentPath, state);
+            },
+        }, this.taskRegistry);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    renderComponent(componentPath, state) {
+        const component = this.components[componentPath.format()];
+        if (!component) {
+            return;
+        }
+        // if state hasn't changed, nothing to do
+        if (component.state._type === "Ready" && eq(component.state.value, state)) {
+            return;
+        }
+        component.state = { _type: "Ready", value: state };
+        const newNodeGroup = component.component.view(state, component.component.params);
+        component.containerListeners = newNodeGroup.containerListeners;
+        this.eventManager.setContainerListeners(component);
+        const oldNodes = component.firstChild;
+        this.compareNodeSequences(oldNodes, newNodeGroup.nodes, component, componentPath);
+        const added = this.addedComponents.splice(0);
+        added.forEach((childPath) => {
+            const cNode = this.components[childPath.format()];
+            if (cNode) {
+                const initEffect = cNode.component.initialState(cNode.component.params);
+                this.runEffect(initEffect, childPath, (state) => {
+                    this.renderComponent(childPath, state);
+                });
+            }
+        });
+    }
+    compareNodeSequences(oldNodes, newNodes, parent, ancestorComponentPath) {
+        const mutNewNodes = [...newNodes];
+        while (mutNewNodes.length > 0) {
+            const newNode = mutNewNodes.shift();
+            const correspondingOldNode = this.findCorrespondingOldNode(newNode, oldNodes, ancestorComponentPath);
+            if (correspondingOldNode) {
+                if (correspondingOldNode !== oldNodes) {
+                    oldNodes?.before(correspondingOldNode);
+                }
+                this.compareNodes(correspondingOldNode, newNode, ancestorComponentPath);
+                oldNodes = correspondingOldNode.nextSibling;
+            }
+            else {
+                const newInternalNode = this.convertNodeToInternalNode(newNode, ancestorComponentPath);
+                if (oldNodes) {
+                    oldNodes.before(newInternalNode);
+                }
+                else {
+                    parent.append(newInternalNode);
+                }
+            }
+        }
+        let oldNode = oldNodes;
+        while (oldNode) {
+            const next = oldNode.nextSibling;
+            this.removeNode(oldNode, ancestorComponentPath);
+            oldNode = next;
+        }
+    }
+    removeNode(oldNode, ancestorComponentPath) {
+        detach(oldNode);
+        // TODO: event listeners
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+        function removeNodeRecords(node, ancestorComponentPath) {
+            switch (node._type) {
+                case "InternalTextNode":
+                    return;
+                case "InternalElementNode": {
+                    that.eventManager.setElementListeners(node);
+                    return;
+                }
+                case "ViewNode": {
+                    that.eventManager.setContainerListeners(node);
+                    return;
+                }
+                case "ComponentNode": {
+                    that.eventManager.setContainerListeners(node);
+                    const compPath = componentPath(node.nodeId, ancestorComponentPath).format();
+                    delete that.components[compPath];
+                    that.removedComponents[compPath] = node;
+                    return;
+                }
+            }
+        }
+        foldTree(oldNode, ancestorComponentPath, undefined, (node, ancestorComponentId) => {
+            removeNodeRecords(node, ancestorComponentId);
+        });
+    }
+    compareNodes(oldNode, newNode, ancestorComponentPath) {
+        const parent = oldNode.parent;
+        const removeOldAndAddNew = () => {
+            const nextSibling = oldNode.nextSibling;
+            this.removeNode(oldNode, ancestorComponentPath);
+            const newInternalNode = this.convertNodeToInternalNode(newNode, ancestorComponentPath);
+            if (nextSibling) {
+                nextSibling.after(newInternalNode);
+            }
+            else if (parent) {
+                parent.append(newInternalNode);
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+        foldNode(newNode, {
+            onText(text) {
+                if (oldNode._type !== "InternalTextNode") {
+                    removeOldAndAddNew();
+                    return;
+                }
+                updateText(oldNode, text);
+            },
+            onVoidElement(elem) {
+                if (oldNode._type !== "InternalElementNode" ||
+                    oldNode.tag !== elem.tag) {
+                    removeOldAndAddNew();
+                    return;
+                }
+                updateAttrs(oldNode, elem.attrs);
+                updateProps(oldNode, elem.props);
+                if (oldNode.eventListeners.length > 0 ||
+                    elem.eventListeners.length > 0) {
+                    oldNode.eventListeners = elem.eventListeners;
+                    that.eventManager.setElementListeners(oldNode);
+                }
+            },
+            onNonVoidElement(elem) {
+                if (oldNode._type !== "InternalElementNode" ||
+                    oldNode.tag !== elem.tag) {
+                    removeOldAndAddNew();
+                    return;
+                }
+                updateAttrs(oldNode, elem.attrs);
+                updateProps(oldNode, elem.props);
+                if (oldNode.eventListeners.length > 0) {
+                    oldNode.eventListeners = elem.eventListeners;
+                    that.eventManager.setElementListeners(oldNode);
+                }
+                that.compareNodeSequences(oldNode.firstChild, elem.children, oldNode, ancestorComponentPath);
+            },
+            onView(view) {
+                if (oldNode._type !== "ViewNode" || !oldNode.nodeId.eq(view.nodeId)) {
+                    removeOldAndAddNew();
+                    return;
+                }
+                if (eq(oldNode.params, view.params)) {
+                    return;
+                }
+                const newNodeGroup = view.nodes(view.params);
+                oldNode.params = view.params;
+                oldNode.containerListeners = newNodeGroup.containerListeners;
+                that.eventManager.setContainerListeners(oldNode);
+                that.compareNodeSequences(oldNode.firstChild, newNodeGroup.nodes, oldNode, ancestorComponentPath);
+            },
+            onComponent(comp) {
+                if (oldNode._type !== "ComponentNode" ||
+                    !oldNode.nodeId.eq(comp.nodeId)) {
+                    removeOldAndAddNew();
+                    return;
+                }
+                if (oldNode.state._type === "Ready") {
+                    if (oldNode.componentEventListeners.length > 0 ||
+                        comp.componentEventListeners.length > 0) {
+                        oldNode.componentEventListeners = comp.componentEventListeners;
+                        that.eventManager.setContainerListeners(oldNode);
+                    }
+                    if (eq(oldNode.component.params, comp.component.params)) {
+                        oldNode.component = comp.component;
+                    }
+                    else {
+                        that.injectComponentCss(comp.component);
+                        const newNodeGroup = comp.component.view(oldNode.state.value, comp.component.params);
+                        oldNode.containerListeners = newNodeGroup.containerListeners;
+                        that.eventManager.setContainerListeners(oldNode);
+                        oldNode.component = comp.component;
+                        that.compareNodeSequences(oldNode.firstChild, newNodeGroup.nodes, oldNode, componentPath(comp.nodeId, ancestorComponentPath));
+                    }
+                }
+                else {
+                    oldNode.component = comp.component;
+                }
+            },
+        });
+    }
+    convertNodeToInternalNode(node, ancestorComponentId) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+        return foldNode(node, {
+            onText(text) {
+                return internalTextNode(that.document, text);
+            },
+            onVoidElement(elem) {
+                const internalElem = internalElementNode(that.document, elem.tag, elem.nodeId, elem.attrs, elem.eventListeners, elem.props);
+                if (elem.eventListeners.length > 0) {
+                    that.eventManager.setElementListeners(internalElem);
+                }
+                return internalElem;
+            },
+            onNonVoidElement(elem) {
+                const internalElement = internalElementNode(that.document, elem.tag, elem.nodeId, elem.attrs, elem.eventListeners, elem.props);
+                if (elem.eventListeners.length > 0) {
+                    that.eventManager.setElementListeners(internalElement);
+                }
+                elem.children.forEach((childNode) => {
+                    internalElement.append(that.convertNodeToInternalNode(childNode, ancestorComponentId));
+                });
+                return internalElement;
+            },
+            onView(view) {
+                const vNode = viewNode(view);
+                const nodeGroup = view.nodes(view.params);
+                vNode.params = view.params;
+                vNode.containerListeners = nodeGroup.containerListeners;
+                nodeGroup.nodes.forEach((childNode) => {
+                    vNode.append(that.convertNodeToInternalNode(childNode, ancestorComponentId));
+                });
+                that.eventManager.setContainerListeners(vNode);
+                return vNode;
+            },
+            onComponent(comp) {
+                const compId = componentPath(comp.nodeId, ancestorComponentId).format();
+                const existingComp = that.components[compId];
+                if (existingComp) {
+                    detach(existingComp);
+                    that.compareNodes(existingComp, comp, ancestorComponentId);
+                    return existingComp;
+                }
+                const cNode = componentNode(comp.component, comp.nodeId);
+                if (comp.componentEventListeners.length > 0) {
+                    cNode.componentEventListeners = comp.componentEventListeners;
+                    that.eventManager.setContainerListeners(cNode);
+                }
+                that.injectComponentCss(comp.component);
+                that.components[compId] = cNode;
+                that.addedComponents.push(componentPath(comp.nodeId, ancestorComponentId));
+                return cNode;
+            },
+        });
+    }
+    //   private compareNodes(
+    //     oldNode: InternalNode,
+    //     newNode: Node<unknown, unknown>,
+    //     parent: RealElement,
+    //     prevSibling: RealNode | null,
+    //     ancestorComponentId: ComponentId
+    //   ): RealNode | null {
+    //     if (typeof (newNode) === 'string') {
+    //       if (oldNode._type === 'InternalTextNode') {
+    //         if (oldNode.text !== newNode) {
+    //           oldNode.realNode.nodeValue = newNode
+    //         }
+    //         return oldNode.realNode
+    //       }
+    //       this.removeNode(oldNode)
+    //       return this.addNode1(newNode, parent, prevSibling, ancestorComponentId)
+    //     }
+    //     switch (newNode._type) {
+    //       case 'Element': {
+    //         if (
+    //           oldNode._type === 'InternalElementNode' &&
+    //           newNode.tag === oldNode.tag
+    //         ) {
+    //           this.compareElements(oldNode, newNode)
+    //           return oldNode.realNode
+    //         } else {
+    //           this.removeNode(oldNode)
+    //           return this.addNode1(newNode, parent, prevSibling, ancestorComponentId)
+    //         }
+    //       }
+    //       case 'Component': {
+    //         return todo()
+    //       }
+    //       case 'View': {
+    //         return todo()
+    //       }
+    //     }
+    //   }
+    /**
+     * Return an old node that can be compared to `newNode`.
+     *
+     * If the old node represent the same node as `newNode`, return it.
+     *
+     * If the same node isn't found, return the first node if it is `comparable`,
+     * otherwise return undefined. (We don't move nodes if they are comparable but
+     * not the same).
+     */
+    findCorrespondingOldNode(newNode, oldNodes, ancestorComponentPath) {
+        if (typeof newNode !== "string" && newNode._type === "Component") {
+            const registeredComponent = this.components[componentPath(newNode.nodeId, ancestorComponentPath).format()];
+            if (registeredComponent) {
+                return registeredComponent;
+            }
+        }
+        let next = oldNodes;
+        while (next) {
+            if (getNodesRelationship(next, newNode) === "same") {
+                return next;
+            }
+            next = next.nextSibling;
+        }
+        if (oldNodes) {
+            if (getNodesRelationship(oldNodes, newNode) === "comparable") {
+                return oldNodes;
+            }
+        }
+        return undefined;
+    }
+}
+//   private removeNode(_node: InternalNode): void {
+//   }
+//   private compareElements(
+//     _oldNode: InternalElementNode,
+//     _newNode: Element<unknown, unknown>
+//   ): void { }
+// }
+function getNodesRelationship(oldNode, newNode) {
+    if (typeof newNode === "string") {
+        return oldNode._type === "InternalTextNode" ? "comparable" : "unrelated";
+    }
+    if (oldNode._type === "InternalTextNode") {
+        return "unrelated";
+    }
+    switch (newNode._type) {
+        case "Element": {
+            if (oldNode._type === "InternalElementNode") {
+                if (newNode.nodeId) {
+                    if (oldNode.nodeId) {
+                        return newNode.nodeId.eq(oldNode.nodeId) ? "same" : "unrelated";
+                    }
+                }
+                else if (oldNode.nodeId) {
+                    return "unrelated";
+                }
+                const oldId = getId(oldNode.attrs);
+                const newId = getId(newNode.attrs);
+                if (newId) {
+                    if (oldId) {
+                        return oldId === newId ? "same" : "unrelated";
+                    }
+                    else {
+                        return "unrelated";
+                    }
+                }
+                else if (oldId) {
+                    return "unrelated";
+                }
+                return oldNode.tag === newNode.tag ? "comparable" : "unrelated";
+            }
+            else {
+                return "unrelated";
+            }
+        }
+        case "View":
+            if (oldNode._type === "ViewNode") {
+                return newNode.nodeId.eq(oldNode.nodeId) ? "same" : "unrelated";
+            }
+            else {
+                return "unrelated";
+            }
+        case "Component":
+            if (oldNode._type === "ComponentNode") {
+                return newNode.nodeId.eq(oldNode.nodeId) ? "same" : "unrelated";
+            }
+            else {
+                return "unrelated";
+            }
+    }
+}
+export function foldTree(root, ancestorComponentPath, init, f) {
+    let acc = init;
+    function visit(n, ancestorComponentPath, moveThroushSiblings) {
+        acc = f(n, ancestorComponentPath, acc);
+        switch (n._type) {
+            case "InternalTextNode": {
+                break;
+            }
+            case "InternalElementNode":
+            case "ViewNode": {
+                if (n.firstChild) {
+                    visit(n.firstChild, ancestorComponentPath, true);
+                }
+                break;
+            }
+            case "ComponentNode": {
+                if (n.firstChild) {
+                    visit(n.firstChild, componentPath(n.nodeId, ancestorComponentPath), true);
+                }
+                break;
+            }
+            default: {
+                exhaustivenessCheck(n);
+            }
+        }
+        if (moveThroushSiblings) {
+            let next = n.nextSibling;
+            while (next) {
+                visit(next, ancestorComponentPath, false);
+                next = next.nextSibling;
+            }
+        }
+    }
+    visit(root, ancestorComponentPath, false);
+    return acc;
+}

package/dist/internal/dbmgr.d.ts

@@ -0,0 +1,11 @@
+import { type DbName, type DbVersion, type ObjectStore } from '../db';
+import type { DbEffect } from '../db/effects';
+import { type DbError } from '../db/errors';
+import type { DbSetupEffect } from '../db/setup';
+import { type Result } from '../utils/result';
+export declare class DbManager {
+    private openDatabases;
+    open(db: DbName, version: DbVersion, setup: (oldVersion: DbVersion) => DbSetupEffect<void>, callback: (result: Result<void, DbError>) => void): void;
+    runTransaction(db: DbName, objectStores: readonly ObjectStore[], mode: 'readonly' | 'readwrite', effect: DbEffect<void>, callback: (result: Result<void, DbError>) => void): void;
+}
+//# sourceMappingURL=dbmgr.d.ts.map

package/dist/internal/dbmgr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dbmgr.d.ts","sourceRoot":"","sources":["../../src/internal/dbmgr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,eAAe,CAAA;AAC1D,OAAO,EAIL,KAAK,OAAO,EACb,MAAM,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,aAAa,EAAoB,MAAM,aAAa,CAAA;AAGlE,OAAO,EAAoB,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAE/D,qBAAa,SAAS;IACpB,OAAO,CAAC,aAAa,CAAiC;IAEtD,IAAI,CACF,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,CAAC,UAAU,EAAE,SAAS,KAAK,aAAa,CAAC,IAAI,CAAC,EACrD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,IAAI,GAChD,IAAI;IA4DP,cAAc,CACZ,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,WAAW,EAAE,EACpC,IAAI,EAAE,UAAU,GAAG,WAAW,EAC9B,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,EACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,IAAI,GAChD,IAAI;CAoCR"}