oxiui-lib 0.2.0

package/dist/core/elements/Button.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const AbaComponent_js_1 = require("./AbaComponent.js");
+class Button extends (0, AbaComponent_js_1.intrinsic)("button") {
+    constructor(text, props) {
+        super();
+        this.withProps({ content: text !== null && text !== void 0 ? text : props === null || props === void 0 ? void 0 : props.content });
+    }
+    onClick(callback) {
+        this.withProps({ onClick: callback });
+        return this;
+    }
+}
+exports.Button = Button;

package/dist/core/elements/HRow.d.ts

@@ -0,0 +1,4 @@
+import { Stack } from "./Stack.js";
+export declare class HRow extends Stack {
+    constructor();
+}

package/dist/core/elements/HRow.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HRow = void 0;
+const Stack_js_1 = require("./Stack.js");
+class HRow extends Stack_js_1.Stack {
+    constructor() {
+        super();
+        this.horizontal().expand();
+    }
+}
+exports.HRow = HRow;

package/dist/core/elements/InputText.d.ts

@@ -0,0 +1,25 @@
+declare const TextInput_base: {
+    new (props?: import("../types/html.js").InputProps | undefined): {
+        "__#private@#__states": Map<string | symbol, import("../signals.js").Signal<any>>;
+        type: "input";
+        props: import("../types/html.js").InputProps;
+        up?: import("../types/component.js").IComponent<keyof import("../types/html.js").IntrinsicElements>;
+        down: import("../types/component.js").IComponent<keyof import("../types/html.js").IntrinsicElements>[];
+        cursors: Set<string>;
+        index: string;
+        view?: (() => void) | undefined;
+        body(fn?: ((component: /*elided*/ any) => void) | undefined): /*elided*/ any;
+        onAppear(fn: (component: /*elided*/ any) => void): /*elided*/ any;
+        withProps<T extends Partial<import("../types/html.js").InputProps>>(newProps: T): /*elided*/ any;
+        withStyle(style: Partial<CSSStyleDeclaration>): /*elided*/ any;
+        withExtension(extension: (component: /*elided*/ any) => void): /*elided*/ any;
+    };
+};
+export declare class TextInput extends TextInput_base {
+    constructor();
+    value(value: string | number): this;
+    placeholder(text: string): this;
+    required(required?: boolean): this;
+    onChangeText(fn: (value: string) => void): this;
+}
+export {};

package/dist/core/elements/InputText.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const AbaComponent_js_1 = require("./AbaComponent.js");
+class TextInput extends (0, AbaComponent_js_1.intrinsic)("input") {
+    constructor() {
+        super();
+    }
+    value(value) {
+        this.props.value = value;
+        return this;
+    }
+    placeholder(text) {
+        this.props.placeholder = text;
+        return this;
+    }
+    required(required = true) {
+        this.props.required = required;
+        return this;
+    }
+    onChangeText(fn) {
+        this.props.onTextChange = (text) => {
+            fn(text);
+        };
+        return this;
+    }
+}
+exports.TextInput = TextInput;

package/dist/core/elements/Stack.d.ts

@@ -0,0 +1,26 @@
+declare const Stack_base: {
+    new (props?: import("../types/html.js").CommonProps | undefined): {
+        "__#private@#__states": Map<string | symbol, import("../signals.js").Signal<any>>;
+        type: "div";
+        props: import("../types/html.js").CommonProps;
+        up?: import("../types/component.js").IComponent<keyof import("../types/html.js").IntrinsicElements>;
+        down: import("../types/component.js").IComponent<keyof import("../types/html.js").IntrinsicElements>[];
+        cursors: Set<string>;
+        index: string;
+        view?: (() => void) | undefined;
+        body(fn?: ((component: /*elided*/ any) => void) | undefined): /*elided*/ any;
+        onAppear(fn: (component: /*elided*/ any) => void): /*elided*/ any;
+        withProps<T extends Partial<import("../types/html.js").CommonProps>>(newProps: T): /*elided*/ any;
+        withStyle(style: Partial<CSSStyleDeclaration>): /*elided*/ any;
+        withExtension(extension: (component: /*elided*/ any) => void): /*elided*/ any;
+    };
+};
+export declare class Stack extends Stack_base {
+    constructor();
+    verticalAlignment(value: "top" | "center" | "bottom"): this;
+    horizontalAlignment(value: "left" | "center" | "right"): this;
+    expand(): this;
+    horizontal(): this;
+    vertical(): this;
+}
+export {};

package/dist/core/elements/Stack.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+const AbaComponent_js_1 = require("./AbaComponent.js");
+class Stack extends (0, AbaComponent_js_1.intrinsic)("div") {
+    constructor() {
+        super();
+        this.withStyle({
+            display: "flex",
+        });
+    }
+    verticalAlignment(value) {
+        return this.withStyle({
+            alignItems: value === "top"
+                ? "flex-start"
+                : value === "center"
+                    ? "center"
+                    : "flex-end",
+        });
+    }
+    horizontalAlignment(value) {
+        return this.withStyle({
+            justifyContent: value === "left"
+                ? "flex-start"
+                : value === "center"
+                    ? "center"
+                    : "flex-end",
+        });
+    }
+    expand() {
+        return this.withStyle({ flex: "1" });
+    }
+    horizontal() {
+        return this.withStyle({ flexDirection: "row" });
+    }
+    vertical() {
+        return this.withStyle({ flexDirection: "column" });
+    }
+}
+exports.Stack = Stack;

package/dist/core/elements/Text.d.ts

@@ -0,0 +1,40 @@
+import type { SemanticText } from "../types/html.js";
+declare const Text_base: {
+    new (props?: {
+        type: keyof SemanticText;
+        props: import("../types/html.js").CommonProps;
+    } | undefined): {
+        "__#private@#__states": Map<string | symbol, import("../signals.js").Signal<any>>;
+        type: "semanticText";
+        props: {
+            type: keyof SemanticText;
+            props: import("../types/html.js").CommonProps;
+        };
+        up?: import("../types/component.js").IComponent<keyof import("../types/html.js").IntrinsicElements>;
+        down: import("../types/component.js").IComponent<keyof import("../types/html.js").IntrinsicElements>[];
+        cursors: Set<string>;
+        index: string;
+        view?: (() => void) | undefined;
+        body(fn?: ((component: /*elided*/ any) => void) | undefined): /*elided*/ any;
+        onAppear(fn: (component: /*elided*/ any) => void): /*elided*/ any;
+        withProps<T extends Partial<{
+            type: keyof SemanticText;
+            props: import("../types/html.js").CommonProps;
+        }>>(newProps: T): /*elided*/ any;
+        withStyle(style: string | Partial<CSSStyleDeclaration>): /*elided*/ any;
+        withExtension(extension: (component: /*elided*/ any) => void): /*elided*/ any;
+    };
+};
+export declare class Text extends Text_base {
+    constructor(text: string | number | (() => string | number));
+    withStyle(style: string | Partial<CSSStyleDeclaration>): this;
+    private setType;
+    asTitle(): this;
+    asSubtitle(): this;
+    asH3(): this;
+    asH4(): this;
+    asH5(): this;
+    asBody(): this;
+    asParagraph(): this;
+}
+export {};

package/dist/core/elements/Text.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+const AbaComponent_js_1 = require("./AbaComponent.js");
+class Text extends (0, AbaComponent_js_1.intrinsic)("semanticText") {
+    constructor(text) {
+        super();
+        this.props = {
+            type: "span",
+            props: {
+                content: text
+            }
+        };
+    }
+    withStyle(style) {
+        this.props.props.style = style;
+        return this;
+    }
+    setType(type) {
+        this.props.type = type;
+        return this;
+    }
+    asTitle() {
+        return this.setType("h1");
+    }
+    asSubtitle() {
+        return this.setType("h2");
+    }
+    asH3() {
+        return this.setType("h3");
+    }
+    asH4() {
+        return this.setType("h4");
+    }
+    asH5() {
+        return this.setType("h5");
+    }
+    asBody() {
+        return this.setType("body");
+    }
+    asParagraph() {
+        return this.setType("p");
+    }
+}
+exports.Text = Text;

package/dist/core/elements/VRow.d.ts

@@ -0,0 +1,4 @@
+import { Stack } from "./Stack.js";
+export declare class VRow extends Stack {
+    constructor();
+}

package/dist/core/elements/VRow.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VRow = void 0;
+const Stack_js_1 = require("./Stack.js");
+class VRow extends Stack_js_1.Stack {
+    constructor() {
+        super();
+        this.vertical().expand();
+    }
+}
+exports.VRow = VRow;

package/dist/core/elements/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./AbaComponent.js";
+export * from "./AbaStateFull.js";
+export * from "./Animation.js";
+export * from "./Button.js";
+export * from "./HRow.js";
+export * from "./VRow.js";
+export * from "./InputText.js";
+export * from "./Stack.js";
+export * from "./Text.js";
+export * from "./ui.js";

package/dist/core/elements/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AbaComponent.js"), exports);
+__exportStar(require("./AbaStateFull.js"), exports);
+__exportStar(require("./Animation.js"), exports);
+__exportStar(require("./Button.js"), exports);
+__exportStar(require("./HRow.js"), exports);
+__exportStar(require("./VRow.js"), exports);
+__exportStar(require("./InputText.js"), exports);
+__exportStar(require("./Stack.js"), exports);
+__exportStar(require("./Text.js"), exports);
+__exportStar(require("./ui.js"), exports);

package/dist/core/elements/ui.d.ts

@@ -0,0 +1 @@
+export declare function createStyle<T extends Record<string, Partial<CSSStyleDeclaration>>>(style: T): T;

package/dist/core/elements/ui.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStyle = createStyle;
+function createStyle(style) {
+    return style;
+}

package/dist/core/renderer.d.ts

@@ -0,0 +1,3 @@
+export declare function getGlobalCursor(): number;
+export declare function nextCursor(): number;
+export declare function resetCursor(): void;

package/dist/core/renderer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGlobalCursor = getGlobalCursor;
+exports.nextCursor = nextCursor;
+exports.resetCursor = resetCursor;
+let globalCursor = 0;
+function getGlobalCursor() {
+    return globalCursor;
+}
+function nextCursor() {
+    return globalCursor++;
+}
+function resetCursor() {
+    globalCursor = 0;
+}

package/dist/core/renderers/html.d.ts

@@ -0,0 +1,22 @@
+import type { IComponent } from "../types/component.js";
+import { type IntrinsicElements } from "../types/html.js";
+export declare class HTMLRenderer {
+    private rootBody;
+    private oldRoot?;
+    private nodeMap;
+    constructor(rootId?: string);
+    render(stateId: string, readers: Set<string>, tree: IComponent<keyof IntrinsicElements>): void;
+    private findByIndex;
+    private findAllByState;
+    private structureChanged;
+    private cloneTree;
+    private renderNode;
+    private renderTextNode;
+    private replaceRoot;
+    private replaceNode;
+    private getTopMost;
+    private applyProps;
+    private applyCommonProps;
+    private applyStyle;
+    private applyInputProps;
+}

package/dist/core/renderers/html.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLRenderer = void 0;
+class HTMLRenderer {
+    constructor(rootId = "app") {
+        this.nodeMap = new Map();
+        const el = document.getElementById(rootId);
+        if (!el)
+            throw new Error(`Root element #${rootId} not found`);
+        this.rootBody = el;
+    }
+    render(stateId, readers, tree) {
+        if (!this.oldRoot) {
+            this.oldRoot = this.cloneTree(tree);
+            this.replaceRoot(this.oldRoot);
+            return;
+        }
+        const affected = this.findAllByState(this.oldRoot, stateId);
+        const topMost = this.getTopMost(Array.from(affected).map((n) => n.index));
+        for (const index of topMost) {
+            const newNode = this.findByIndex(tree, index);
+            const oldNode = this.findByIndex(this.oldRoot, index);
+            if (newNode && oldNode && this.structureChanged(oldNode, newNode)) {
+                this.replaceNode(index, newNode);
+                this.oldRoot = this.cloneTree(tree);
+                this.nodeMap.forEach((e, k) => {
+                    // clean map
+                    if (!this.findByIndex(this.oldRoot, k)) {
+                        this.nodeMap.delete(k);
+                    }
+                });
+                return;
+            }
+        }
+        for (const id of readers) {
+            const compNode = this.findByIndex(tree, id);
+            if (!compNode)
+                continue;
+            const domNode = this.nodeMap.get(id);
+            if (!domNode)
+                continue;
+            this.applyProps(domNode, compNode);
+        }
+        console.log(this.nodeMap);
+    }
+    findByIndex(node, index) {
+        if (node.index === index)
+            return node;
+        for (const child of node.down) {
+            const found = this.findByIndex(child, index);
+            if (found)
+                return found;
+        }
+        return undefined;
+    }
+    findAllByState(node, index, acc = new Set()) {
+        var _a;
+        if ((_a = node.cursors) === null || _a === void 0 ? void 0 : _a.has(index)) {
+            acc.add(node);
+        }
+        for (const child of node.down) {
+            this.findAllByState(child, index, acc);
+        }
+        return acc;
+    }
+    structureChanged(prev, next) {
+        if (!prev)
+            return true;
+        if (prev.type !== next.type)
+            return true;
+        if (prev.down.length !== next.down.length)
+            return true;
+        for (let i = 0; i < next.down.length; i++) {
+            if (next.down[i] !== undefined) {
+                if (this.structureChanged(prev.down[i], next.down[i])) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    cloneTree(node) {
+        return {
+            type: node.type,
+            index: node.index,
+            cursors: new Set(node.cursors),
+            down: node.down.map((n) => this.cloneTree(n)),
+            props: node.props,
+        };
+    }
+    renderNode(node) {
+        if (node.type === 'semanticText')
+            return this.renderTextNode(node);
+        const element = document.createElement(node.type);
+        element.setAttribute("id", node.index);
+        this.nodeMap.set(node.index, element);
+        this.applyProps(element, node);
+        for (const child of node.down) {
+            element.appendChild(this.renderNode(child));
+        }
+        return element;
+    }
+    renderTextNode(node) {
+        const props = node.props;
+        const element = document.createElement(props.type);
+        element.setAttribute("id", node.index);
+        this.nodeMap.set(node.index, element);
+        this.applyProps(element, node);
+        for (const child of node.down) {
+            element.appendChild(this.renderNode(child));
+        }
+        return element;
+    }
+    replaceRoot(component) {
+        const fragment = document.createDocumentFragment();
+        for (const child of component.down) {
+            fragment.appendChild(this.renderNode(child));
+        }
+        this.rootBody.replaceChildren(fragment);
+    }
+    replaceNode(index, node) {
+        if (index === '0')
+            this.replaceRoot(node);
+        const oldNode = this.findByIndex(this.oldRoot, index);
+        if (!oldNode)
+            return;
+        const domNode = this.nodeMap.get(oldNode.index);
+        if (!domNode)
+            return;
+        const newDom = this.renderNode(node);
+        domNode.replaceWith(newDom);
+    }
+    getTopMost(indices) {
+        const sorted = indices.sort((a, b) => a.length - b.length);
+        const result = [];
+        for (const value of sorted) {
+            const isChild = result.some((parent) => value.startsWith(parent + "."));
+            if (!isChild)
+                result.push(value);
+        }
+        return result;
+    }
+    applyProps(element, node) {
+        if (!node.props)
+            return;
+        const props = node.type === "semanticText"
+            ? node.props.props
+            : node.props;
+        this.applyCommonProps(element, props);
+        if (node.type === "input") {
+            this.applyInputProps(element, props);
+        }
+    }
+    applyCommonProps(element, props) {
+        var _a, _b, _c, _d, _e, _f;
+        if (props.content !== undefined) {
+            const value = typeof props.content === "function"
+                ? props.content()
+                : props.content;
+            element.textContent = String(value);
+        }
+        this.applyStyle(element, props.style);
+        if (props.id)
+            element.id = props.id;
+        if (props.class)
+            element.className = props.class;
+        if (props.title)
+            element.title = props.title;
+        if (props.hidden !== undefined)
+            element.hidden = props.hidden;
+        element.onclick = (_a = props.onClick) !== null && _a !== void 0 ? _a : null;
+        element.onchange = (_b = props.onChange) !== null && _b !== void 0 ? _b : null;
+        element.onfocus = (_c = props.onFocus) !== null && _c !== void 0 ? _c : null;
+        element.onblur = (_d = props.onBlur) !== null && _d !== void 0 ? _d : null;
+        element.onkeydown = (_e = props.onKeyDown) !== null && _e !== void 0 ? _e : null;
+        element.onkeyup = (_f = props.onKeyUp) !== null && _f !== void 0 ? _f : null;
+        element.oninput = (ev) => { var _a, _b; return (_b = (_a = props.onInput) === null || _a === void 0 ? void 0 : _a.call(props, ev)) !== null && _b !== void 0 ? _b : null; };
+    }
+    applyStyle(element, style) {
+        if (!style)
+            return;
+        if (typeof style === "string") {
+            element.setAttribute("style", style);
+        }
+        else {
+            Object.assign(element.style, style);
+        }
+    }
+    applyInputProps(element, props) {
+        if (props.value !== undefined) {
+            element.value = String(props.value);
+        }
+        element.oninput = (ev) => {
+            var _a, _b;
+            const input = ev.target;
+            (_a = props.onTextChange) === null || _a === void 0 ? void 0 : _a.call(props, input.value);
+            (_b = props.onInput) === null || _b === void 0 ? void 0 : _b.call(props, ev);
+        };
+    }
+}
+exports.HTMLRenderer = HTMLRenderer;

package/dist/core/scheduler.d.ts

@@ -0,0 +1,10 @@
+import type { DivContainer } from "./elements/AbaStateFull";
+import type { IComponent } from "./types/component";
+import type { IntrinsicElements } from "./types/html";
+type RenderCallback = (stateId: string, readers: Set<string>, root: IComponent<keyof IntrinsicElements>) => void;
+export declare function initScheduler(App: new () => DivContainer, renderer: RenderCallback): void;
+export declare function scheduleEffect(fn: () => void): void;
+export declare function rerender(stateId: string, readers: Set<string>): void;
+export declare function startImmediateMode(): void;
+export declare function stopImmediateMode(): void;
+export {};

package/dist/core/scheduler.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initScheduler = initScheduler;
+exports.scheduleEffect = scheduleEffect;
+exports.rerender = rerender;
+exports.startImmediateMode = startImmediateMode;
+exports.stopImmediateMode = stopImmediateMode;
+const renderer_1 = require("./renderer");
+let running = false;
+let app = null;
+let renderCallback = null;
+const postRenderQueue = [];
+const resetTree = () => {
+    if (app === null || app === void 0 ? void 0 : app.down) {
+        app.down = [];
+    }
+};
+function initScheduler(App, renderer) {
+    app = new App();
+    renderCallback = renderer;
+    performRender("", new Set());
+}
+function scheduleEffect(fn) {
+    postRenderQueue.push(fn);
+}
+function findByIndex(node, index) {
+    if (node.index === index)
+        return node;
+    for (const child of node.down) {
+        const found = findByIndex(child, index);
+        if (found)
+            return found;
+    }
+    return null;
+}
+function clearCursors(node) {
+    var _a;
+    if (!node)
+        return;
+    (_a = node.cursors) === null || _a === void 0 ? void 0 : _a.clear();
+    for (const child of node.down) {
+        clearCursors(child);
+    }
+}
+function performRender(stateId, readers) {
+    if (!app || !renderCallback)
+        return;
+    console.clear();
+    resetTree();
+    (0, renderer_1.resetCursor)();
+    app.body();
+    renderCallback(stateId, readers, app);
+    postRenderQueue.forEach((fn) => fn());
+    postRenderQueue.length = 0;
+    clearCursors(app);
+}
+function rerender(stateId, readers) {
+    if (!renderCallback || !app)
+        return;
+    if (running)
+        return;
+    const validComponents = new Set();
+    readers.forEach((id) => {
+        if (findByIndex(app, id)) {
+            validComponents.add(id);
+        }
+    });
+    running = true;
+    setTimeout(() => {
+        running = false;
+        performRender(stateId, validComponents);
+    }, 0);
+}
+let immediateRunning = false;
+let frameId = null;
+function startImmediateMode() {
+    if (!app || !renderCallback)
+        return;
+    if (immediateRunning)
+        return;
+    immediateRunning = true;
+    const loop = () => {
+        if (!immediateRunning || !app)
+            return;
+        resetTree();
+        (0, renderer_1.resetCursor)();
+        app.body();
+        renderCallback === null || renderCallback === void 0 ? void 0 : renderCallback("", new Set(), app);
+        postRenderQueue.forEach((fn) => fn());
+        postRenderQueue.length = 0;
+        clearCursors(app);
+        frameId = requestAnimationFrame(loop);
+    };
+    frameId = requestAnimationFrame(loop);
+}
+function stopImmediateMode() {
+    immediateRunning = false;
+    if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+    }
+}