verstak 0.23.124 → 0.24.104

package/build/dist/source/{core/Utils.js → html/ElUtils.js}

@@ -1,3 +1,17 @@
+export function objectHasMember(obj, member) {
+    return obj === Object(obj) && !Array.isArray(obj) && member in obj;
+}
+export function emitLetters(n) {
+    if (n < 0)
+        throw new Error(`emitLetters: argument (${n}) should not be negative or zero`);
+    let result = "";
+    while (n >= 0) {
+        const r = n % 26;
+        n = Math.floor(n / 26) - 1;
+        result = String.fromCharCode(65 + r) + result;
+    }
+    return result;
+}
 export function parseElCoords(text, result) {
     let i = 0;
     let value = 0;
@@ -134,17 +148,6 @@ export function emitElCoords(value) {
     const p2 = emitCellPosition(value.x2, value.y2);
     return `${p1}${p2 !== "" ? `:${p2}` : ""}`;
 }
-export function emitLetters(n) {
-    if (n < 0)
-        throw new Error(`emitLetters: argument (${n}) should not be negative or zero`);
-    let result = "";
-    while (n >= 0) {
-        const r = n % 26;
-        n = Math.floor(n / 26) - 1;
-        result = String.fromCharCode(65 + r) + result;
-    }
-    return result;
-}
 export function emitCellPosition(x, y) {
     let result = "";
     if (x > 0 && y > 0)
@@ -174,38 +177,3 @@ function isCapitalLetter(ch) {
 function isLowercaseLetter(ch) {
     return 97 <= ch && ch <= 122;
 }
-export function objectHasMember(obj, member) {
-    return obj === Object(obj) && !Array.isArray(obj) && member in obj;
-}
-export function getCallerInfo(prefix) {
-    const restore = Error.stackTraceLimit = 20;
-    const error = new Error();
-    const stack = error.stack || "";
-    Error.stackTraceLimit = restore;
-    const lines = stack.split("\n");
-    let i = lines.findIndex(x => x.indexOf(".specify") >= 0);
-    i = i >= 0 ? i + 2 : 5;
-    let caller = extractFunctionAndLocation(lines[i]);
-    let location = caller;
-    if (caller.func.endsWith(".update")) {
-        i = i - 1;
-        caller = extractFunctionAndLocation(lines[i]);
-        location = extractFunctionAndLocation(lines[i + 1]);
-    }
-    else {
-        while (!caller.func && i > 0) {
-            i = i - 1;
-            caller = extractFunctionAndLocation(lines[i]);
-        }
-        location = extractFunctionAndLocation(lines[i + 1]);
-    }
-    const result = `${prefix}·${caller.func}@${location.file}`;
-    return result;
-}
-function extractFunctionAndLocation(s) {
-    const match = s.match(/(?:\s*at\s+)?(?:(\S+)\s\()?(?:.*?)([^\/\(\):]+)(?:(:|\d)*\)?)$/);
-    return {
-        func: (match === null || match === void 0 ? void 0 : match[1]) || "",
-        file: (match === null || match === void 0 ? void 0 : match[2]) || "",
-    };
-}

package/build/dist/source/html/Elements.d.ts

@@ -1,27 +1,15 @@
-import { El, ElKind, RxNodeSpec, Align, ElCoords, ElArea } from "../core/api.js";
+import { RxNodeDecl } from "reactronic";
+import { El, ElArea } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-export declare function Section<M = unknown, R = void>(spec?: RxNodeSpec<El<HTMLElement, M, R>>, base?: RxNodeSpec<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
-export declare function Table<M = unknown, R = void>(spec?: RxNodeSpec<El<HTMLElement, M, R>>, base?: RxNodeSpec<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
+export declare function Section<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M, R>>, preset?: RxNodeDecl<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
+export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M, R>>, preset?: RxNodeDecl<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
 export declare function startNewRow(shiftCursorDown?: number): void;
 export declare function cursor(areaParams: ElArea): void;
-export declare function Note(content: string, spec?: RxNodeSpec<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
-export declare function HtmlNote(content: string, spec?: RxNodeSpec<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
-export declare function Group<M = unknown, R = void>(spec?: RxNodeSpec<El<HTMLElement, M, R>>, base?: RxNodeSpec<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
-export declare function Fragment<M = unknown, R = void>(spec?: RxNodeSpec<El<void, M, R>>, base?: RxNodeSpec<El<void, M, R>>): El<void, M, R>;
+export declare function Note(content: string, declaration?: RxNodeDecl<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
+export declare function HtmlNote(content: string, declaration?: RxNodeDecl<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
+export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M, R>>, preset?: RxNodeDecl<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
+export declare function Fragment<M = unknown, R = void>(declaration?: RxNodeDecl<El<void, M, R>>, preset?: RxNodeDecl<El<void, M, R>>): El<void, M, R>;
 export declare class VerstakHtmlDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    applyKind(element: El<T, any, any>, value: ElKind): void;
-    applyCoords(element: El<T>, value: ElCoords | undefined): void;
-    applyWidthGrowth(element: El<T>, value: number): void;
-    applyMinWidth(element: El<T>, value: string): void;
-    applyMaxWidth(element: El<T>, value: string): void;
-    applyHeightGrowth(element: El<T>, value: number): void;
-    applyMinHeight(element: El<T>, value: string): void;
-    applyMaxHeight(element: El<T>, value: string): void;
-    applyContentAlignment(element: El<T>, value: Align): void;
-    applyElementAlignment(element: El<T>, value: Align): void;
-    applyContentWrapping(element: El<T>, value: boolean): void;
-    applyOverlayVisible(element: El<T>, value: boolean | undefined): void;
-    applyStyle(element: El<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
     update(element: El<T>): void | Promise<void>;
 }

package/build/dist/source/html/Elements.js

@@ -1,236 +1,58 @@
-import { Verstak, ElKind, Align, CursorCommandDriver, BaseDriver } from "../core/api.js";
+import { RxTree } from "reactronic";
+import { Constants, CursorCommandDriver, ElKind } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-export function Section(spec, base) {
-    return Verstak.specify(Drivers.section, spec, base);
+export function Section(declaration, preset) {
+    return RxTree.declare(Drivers.section, declaration, preset);
 }
-export function Table(spec, base) {
-    return Verstak.specify(Drivers.table, spec, base);
+export function Table(declaration, preset) {
+    return RxTree.declare(Drivers.table, declaration, preset);
 }
 export function row(builder, shiftCursorDown) {
     startNewRow(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
 export function startNewRow(shiftCursorDown) {
-    Verstak.specify(Drivers.row);
+    RxTree.declare(Drivers.partition);
 }
 export function cursor(areaParams) {
-    Verstak.specify(Drivers.cursor, {
+    RxTree.declare(Drivers.cursor, {
         update(b) {
             b.area = areaParams;
         },
     });
 }
-export function Note(content, spec) {
-    return Verstak.specify(Drivers.note, spec, {
+export function Note(content, declaration) {
+    return RxTree.declare(Drivers.note, declaration, {
         update(b) {
             b.native.innerText = content;
         }
     });
 }
-export function HtmlNote(content, spec) {
-    return Verstak.specify(Drivers.note, spec, {
+export function HtmlNote(content, declaration) {
+    return RxTree.declare(Drivers.note, declaration, {
         update(b) {
             b.native.innerHTML = content;
         }
     });
 }
-export function Group(spec, base) {
-    return Verstak.specify(Drivers.group, spec, base);
+export function Group(declaration, preset) {
+    return RxTree.declare(Drivers.group, declaration, preset);
 }
-export function Fragment(spec, base) {
-    return Verstak.specify(BaseDriver.fragment, spec, base);
+export function Fragment(declaration, preset) {
+    return RxTree.declare(HtmlDriver.group, declaration, preset);
 }
 export class VerstakHtmlDriver extends HtmlDriver {
-    applyKind(element, value) {
-        const kind = Constants.layouts[value];
-        kind && element.native.setAttribute(Constants.attribute, kind);
-        VerstakDriversByLayout[value](element);
-        super.applyKind(element, value);
-    }
-    applyCoords(element, value) {
-        const s = element.native.style;
-        if (value) {
-            const x1 = value.x1 || 1;
-            const y1 = value.y1 || 1;
-            const x2 = value.x2 || x1;
-            const y2 = value.y2 || y1;
-            s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
-        }
-        else
-            s.gridArea = "";
-        super.applyCoords(element, value);
-    }
-    applyWidthGrowth(element, value) {
-        const s = element.native.style;
-        if (value > 0) {
-            s.flexGrow = `${value}`;
-            s.flexBasis = "0";
-        }
-        else {
-            s.flexGrow = "";
-            s.flexBasis = "";
-        }
-    }
-    applyMinWidth(element, value) {
-        element.native.style.minWidth = `${value}`;
-    }
-    applyMaxWidth(element, value) {
-        element.native.style.maxWidth = `${value}`;
-    }
-    applyHeightGrowth(element, value) {
-        const bNode = element.node;
-        const driver = bNode.driver;
-        if (driver.isSeparator) {
-            const s = element.native.style;
-            if (value > 0)
-                s.flexGrow = `${value}`;
-            else
-                s.flexGrow = "";
-        }
-        else {
-            const hostDriver = bNode.host.driver;
-            if (hostDriver.isSeparator) {
-                driver.applyElementAlignment(element, Align.ToBounds);
-                hostDriver.applyHeightGrowth(bNode.host.slot.instance, value);
-            }
-        }
-    }
-    applyMinHeight(element, value) {
-        element.native.style.minHeight = `${value}`;
-    }
-    applyMaxHeight(element, value) {
-        element.native.style.maxHeight = `${value}`;
-    }
-    applyContentAlignment(element, value) {
-        const s = element.native.style;
-        if ((value & Align.Default) === 0) {
-            const v = AlignToCss[(value >> 2) & 0b11];
-            const h = AlignToCss[value & 0b11];
-            const t = TextAlignCss[value & 0b11];
-            s.justifyContent = v;
-            s.alignItems = h;
-            s.textAlign = t;
-        }
-        else
-            s.justifyContent = s.alignContent = s.textAlign = "";
-    }
-    applyElementAlignment(element, value) {
-        const s = element.native.style;
-        if ((value & Align.Default) === 0) {
-            const v = AlignToCss[(value >> 2) & 0b11];
-            const h = AlignToCss[value & 0b11];
-            s.alignSelf = v;
-            s.justifySelf = h;
-        }
-        else
-            s.alignSelf = s.justifySelf = "";
-    }
-    applyContentWrapping(element, value) {
-        const s = element.native.style;
-        if (value) {
-            s.flexFlow = "wrap";
-            s.overflow = "";
-            s.textOverflow = "";
-            s.whiteSpace = "";
-        }
-        else {
-            s.flexFlow = "";
-            s.overflow = "hidden";
-            s.textOverflow = "ellipsis";
-            s.whiteSpace = "nowrap";
-        }
-    }
-    applyOverlayVisible(element, value) {
-        const e = element.native;
-        const s = e.style;
-        const host = HtmlDriver.findEffectiveHtmlElementHost(element).native;
-        if (value === true) {
-            const doc = document.body;
-            const rect = host.getBoundingClientRect();
-            if (doc.offsetWidth - rect.left > rect.right)
-                s.left = "0", s.right = "";
-            else
-                s.left = "", s.right = "0";
-            if (doc.clientHeight - rect.top > rect.bottom)
-                s.top = "100%", s.bottom = "";
-            else
-                s.top = "", s.bottom = "100%";
-            s.display = "";
-            s.position = "absolute";
-            s.minWidth = "100%";
-            s.boxSizing = "border-box";
-            host.style.position = "relative";
-        }
-        else {
-            host.style.position = "";
-            if (value === false)
-                s.display = "none";
-            else
-                s.position = s.display = s.left = s.right = s.top = s.bottom = "";
-        }
-    }
-    applyStyle(element, secondary, styleName, enabled) {
-        const native = element.native;
-        enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
-        if (secondary)
-            native.classList.toggle(styleName, enabled);
-        else
-            native.className = enabled ? styleName : "";
-    }
     update(element) {
-        if (element.kind <= ElKind.Table)
+        if (element.kind === ElKind.Section)
             startNewRow();
         return super.update(element);
     }
 }
-const Constants = {
-    el: "el",
-    row: "row",
-    layouts: ["section", "table", "note", "group", "", ""],
-    attribute: "kind",
-};
 const Drivers = {
-    section: new VerstakHtmlDriver(Constants.el, false, el => el.kind = ElKind.Section),
-    table: new VerstakHtmlDriver(Constants.el, false, el => el.kind = ElKind.Table),
-    note: new VerstakHtmlDriver(Constants.el, false, el => el.kind = ElKind.Note),
-    group: new VerstakHtmlDriver(Constants.el, false, el => el.kind = ElKind.Group),
-    row: new VerstakHtmlDriver(Constants.row, true, el => el.kind = ElKind.Row),
+    section: new VerstakHtmlDriver(Constants.element, false, el => el.kind = ElKind.Section),
+    table: new VerstakHtmlDriver(Constants.element, false, el => el.kind = ElKind.Table),
+    note: new VerstakHtmlDriver(Constants.element, false, el => el.kind = ElKind.Note),
+    group: new VerstakHtmlDriver(Constants.element, false, el => el.kind = ElKind.Group),
+    partition: new VerstakHtmlDriver(Constants.partition, true, el => el.kind = ElKind.Part),
     cursor: new CursorCommandDriver(),
 };
-const VerstakDriversByLayout = [
-    el => {
-        const s = el.native.style;
-        s.display = "flex";
-        s.flexDirection = "column";
-        s.alignSelf = el.node.owner.slot.instance.isTable ? "stretch" : "center";
-        s.textAlign = "initial";
-        s.flexShrink = "1";
-        s.minWidth = "0";
-    },
-    el => {
-        const s = el.native.style;
-        s.alignSelf = el.node.owner.slot.instance.isTable ? "stretch" : "center";
-        s.display = "grid";
-        s.flexBasis = "0";
-        s.gridAutoRows = "minmax(min-content, 1fr)";
-        s.gridAutoColumns = "minmax(min-content, 1fr)";
-        s.textAlign = "initial";
-    },
-    el => {
-        const s = el.native.style;
-        s.alignSelf = el.node.owner.slot.instance.isTable ? "stretch" : "center";
-        s.display = "inline-grid";
-        s.flexShrink = "1";
-    },
-    el => {
-        const s = el.native.style;
-        s.display = "contents";
-    },
-    el => {
-        const s = el.native.style;
-        s.display = el.node.owner.slot.instance.isTable ? "none" : "flex";
-        s.flexDirection = "row";
-    },
-];
-const AlignToCss = ["stretch", "start", "center", "end"];
-const TextAlignCss = ["justify", "left", "center", "right"];

package/build/dist/source/html/HtmlDriver.d.ts

@@ -1,20 +1,23 @@
-import { MergeItem } from "reactronic";
-import { El, BaseDriver } from "../core/api.js";
-export declare abstract class BaseHtmlDriver<T extends Element, C = unknown> extends BaseDriver<T, C> {
-    create(element: El<T, unknown, C, void>): void;
-    initialize(element: El<T, unknown, C, void>): void;
-    finalize(element: El<T, unknown, C>, isLeader: boolean): boolean;
-    mount(element: El<T, unknown, C>): void;
-    relocate(element: El<T, unknown, C>): void;
-    update(element: El<T, unknown, C>): void | Promise<void>;
+import { SimpleDelegate } from "reactronic";
+import { El, ElDriver } from "./El.js";
+export declare class VerstakDriver<T extends Element, M = unknown, C = unknown> extends ElDriver<T, M, C> {
+    initialize(element: El<T, M, C>): void;
+    finalize(element: El<T, M, C>, isLeader: boolean): boolean;
+    mount(element: El<T, M, C>): void;
+    relocate(element: El<T, M, C>): void;
+    update(element: El<T, M, C>): void | Promise<void>;
     static get blinkingEffectMarker(): string | undefined;
     static set blinkingEffectMarker(value: string | undefined);
-    static findEffectiveHtmlElementHost(element: El<any>): El<HTMLElement | SVGElement>;
-    static findPrevSiblingHtmlElement(ties: MergeItem<El<any>>): MergeItem<El<HTMLElement | SVGElement>> | undefined;
 }
-export declare class HtmlDriver<T extends HTMLElement, C = unknown> extends BaseHtmlDriver<T, C> {
-    create(element: El<T, unknown, C, void>): void;
+export declare class StaticDriver<T extends HTMLElement> extends VerstakDriver<T> {
+    readonly native: T;
+    constructor(native: T, name: string, isRow: boolean, predefine?: SimpleDelegate<El<T>>);
+    assign(element: El<T>): void;
 }
-export declare class SvgDriver<T extends SVGElement, C = unknown> extends BaseHtmlDriver<T, C> {
-    create(element: El<T, unknown, C, void>): void;
+export declare class HtmlDriver<T extends HTMLElement, M = any, C = any> extends VerstakDriver<T, M, C> {
+    static readonly group: HtmlDriver<any, any, any>;
+    assign(element: El<T, any, C, void>): void;
+}
+export declare class SvgDriver<T extends SVGElement, M = any, C = any> extends VerstakDriver<T, M, C> {
+    assign(element: El<T, any, C, void>): void;
 }

package/build/dist/source/html/HtmlDriver.js

@@ -1,12 +1,9 @@
-import { Rx } from "reactronic";
-import { Verstak, BaseDriver } from "../core/api.js";
-export class BaseHtmlDriver extends BaseDriver {
-    create(element) {
-        super.create(element);
-    }
+import { Rx, RxTree } from "reactronic";
+import { Constants, ElDriver, ElImpl, ElKind } from "./El.js";
+export class VerstakDriver extends ElDriver {
     initialize(element) {
-        if (Rx.isLogging && !element.node.driver.isSeparator)
-            element.native.setAttribute("key", element.node.key);
+        if (Rx.isLogging && !element.node.driver.isPartitionSeparator)
+            element.native.setAttribute(Constants.keyAttrName, element.node.key);
         super.initialize(element);
     }
     finalize(element, isLeader) {
@@ -25,16 +22,17 @@ export class BaseHtmlDriver extends BaseDriver {
         if (native) {
             const node = element.node;
             const sequential = node.owner.children.isStrict;
-            const automaticNativeHost = BaseHtmlDriver.findEffectiveHtmlElementHost(element).native;
+            const automaticHost = RxTree.findMatchingHost(node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
+            const automaticNativeHost = automaticHost === null || automaticHost === void 0 ? void 0 : automaticHost.element.native;
             if (automaticNativeHost) {
-                if (sequential && !node.driver.isSeparator) {
-                    const after = BaseHtmlDriver.findPrevSiblingHtmlElement(element.node.slot);
-                    if (after === undefined || after.instance.node.driver.isSeparator) {
+                if (sequential && !node.driver.isPartitionSeparator) {
+                    const after = RxTree.findMatchingPrevSibling(element.node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
+                    if (after === undefined || after.driver.isPartitionSeparator) {
                         if (automaticNativeHost !== native.parentNode || !native.previousSibling)
                             automaticNativeHost.prepend(native);
                     }
                     else {
-                        const nativeAfter = after.instance.native;
+                        const nativeAfter = after.element.native;
                         if (nativeAfter instanceof Element) {
                             if (nativeAfter.nextSibling !== native)
                                 automaticNativeHost.insertBefore(native, nativeAfter.nextSibling);
@@ -50,8 +48,13 @@ export class BaseHtmlDriver extends BaseDriver {
     }
     update(element) {
         const result = super.update(element);
+        if (element.area === undefined) {
+            const oel = element.node.owner.element;
+            if (oel instanceof ElImpl && oel.isTable)
+                element.area = undefined;
+        }
         if (gBlinkingEffectMarker)
-            blink(element.native, Verstak.currentUpdatePriority, element.node.stamp);
+            blink(element.native, RxTree.currentUpdatePriority, element.node.stamp);
         return result;
     }
     static get blinkingEffectMarker() {
@@ -60,30 +63,27 @@ export class BaseHtmlDriver extends BaseDriver {
     static set blinkingEffectMarker(value) {
         gBlinkingEffectMarker = value;
     }
-    static findEffectiveHtmlElementHost(element) {
-        let p = element.node.host;
-        while (p.slot.instance.native instanceof HTMLElement === false &&
-            p.slot.instance.native instanceof SVGElement === false && p !== element.node)
-            p = p.host;
-        return p.slot.instance;
+}
+export class StaticDriver extends VerstakDriver {
+    constructor(native, name, isRow, predefine) {
+        super(name, isRow, predefine);
+        this.native = native;
     }
-    static findPrevSiblingHtmlElement(ties) {
-        let p = ties.prev;
-        while (p && !(p.instance.native instanceof HTMLElement) && !(p.instance.native instanceof SVGElement))
-            p = p.prev;
-        return p;
+    assign(element) {
+        element.native = this.native;
     }
 }
-export class HtmlDriver extends BaseHtmlDriver {
-    create(element) {
+export class HtmlDriver extends VerstakDriver {
+    assign(element) {
         element.native = document.createElement(element.node.driver.name);
-        super.create(element);
+        super.assign(element);
     }
 }
-export class SvgDriver extends BaseHtmlDriver {
-    create(element) {
+HtmlDriver.group = new HtmlDriver("group", false, el => el.kind = ElKind.Group);
+export class SvgDriver extends VerstakDriver {
+    assign(element) {
         element.native = document.createElementNS("http://www.w3.org/2000/svg", element.node.driver.name);
-        super.create(element);
+        super.assign(element);
     }
 }
 function blink(element, priority, revision) {