verstak 0.23.120 → 0.23.122

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

@@ -0,0 +1,27 @@
+import { El, ElKind, ElBuilder, Align, ElCoords, ElArea } from "../core/api.js";
+import { HtmlDriver } from "./HtmlDriver.js";
+export declare function Section<M = unknown, R = void>(builder?: ElBuilder<HTMLElement, M, R>, base?: ElBuilder<HTMLElement, M, R>): El<HTMLElement, M, R>;
+export declare function Table<M = unknown, R = void>(builder?: ElBuilder<HTMLElement, M, R>, base?: ElBuilder<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, builder?: ElBuilder<HTMLElement, void, void>): El<HTMLElement, void, void>;
+export declare function HtmlNote(content: string, builder?: ElBuilder<HTMLElement, void, void>): El<HTMLElement, void, void>;
+export declare function Group<M = unknown, R = void>(builder?: ElBuilder<HTMLElement, M, R>, base?: ElBuilder<HTMLElement, M, R>): El<HTMLElement, M, R>;
+export declare function Fragment<M = unknown, R = void>(builder?: ElBuilder<void, M, R>, base?: ElBuilder<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/{Blocks.js → Elements.js}

@@ -1,4 +1,4 @@
-import { Verstak, BlockKind, Align, CursorCommandDriver, BaseDriver } from "../core/api.js";
+import { Verstak, ElKind, Align, CursorCommandDriver, BaseDriver } from "../core/api.js";
 import { HtmlDriver } from "./HtmlDriver.js";
 export function Section(builder, base) {
     return Verstak.claim(Drivers.section, builder, base);
@@ -15,21 +15,21 @@ export function startNewRow(shiftCursorDown) {
 }
 export function cursor(areaParams) {
     Verstak.claim(Drivers.cursor, {
-        rebuild(b) {
+        update(b) {
             b.area = areaParams;
         },
     });
 }
 export function Note(content, builder) {
     return Verstak.claim(Drivers.note, builder, {
-        rebuild(b) {
+        update(b) {
             b.native.innerText = content;
         }
     });
 }
 export function HtmlNote(content, builder) {
     return Verstak.claim(Drivers.note, builder, {
-        rebuild(b) {
+        update(b) {
             b.native.innerHTML = content;
         }
     });
@@ -41,14 +41,14 @@ export function Fragment(builder, base) {
     return Verstak.claim(BaseDriver.fragment, builder, base);
 }
 export class VerstakHtmlDriver extends HtmlDriver {
-    applyKind(block, value) {
+    applyKind(element, value) {
         const kind = Constants.layouts[value];
-        kind && block.native.setAttribute(Constants.attribute, kind);
-        VerstakDriversByLayout[value](block);
-        super.applyKind(block, value);
+        kind && element.native.setAttribute(Constants.attribute, kind);
+        VerstakDriversByLayout[value](element);
+        super.applyKind(element, value);
     }
-    applyCoords(block, value) {
-        const s = block.native.style;
+    applyCoords(element, value) {
+        const s = element.native.style;
         if (value) {
             const x1 = value.x1 || 1;
             const y1 = value.y1 || 1;
@@ -58,10 +58,10 @@ export class VerstakHtmlDriver extends HtmlDriver {
         }
         else
             s.gridArea = "";
-        super.applyCoords(block, value);
+        super.applyCoords(element, value);
     }
-    applyWidthGrowth(block, value) {
-        const s = block.native.style;
+    applyWidthGrowth(element, value) {
+        const s = element.native.style;
         if (value > 0) {
             s.flexGrow = `${value}`;
             s.flexBasis = "0";
@@ -71,17 +71,17 @@ export class VerstakHtmlDriver extends HtmlDriver {
             s.flexBasis = "";
         }
     }
-    applyMinWidth(block, value) {
-        block.native.style.minWidth = `${value}`;
+    applyMinWidth(element, value) {
+        element.native.style.minWidth = `${value}`;
     }
-    applyMaxWidth(block, value) {
-        block.native.style.maxWidth = `${value}`;
+    applyMaxWidth(element, value) {
+        element.native.style.maxWidth = `${value}`;
     }
-    applyHeightGrowth(block, value) {
-        const bNode = block.node;
+    applyHeightGrowth(element, value) {
+        const bNode = element.node;
         const driver = bNode.driver;
         if (driver.isRow) {
-            const s = block.native.style;
+            const s = element.native.style;
             if (value > 0)
                 s.flexGrow = `${value}`;
             else
@@ -90,19 +90,19 @@ export class VerstakHtmlDriver extends HtmlDriver {
         else {
             const hostDriver = bNode.host.node.driver;
             if (hostDriver.isRow) {
-                driver.applyBlockAlignment(block, Align.ToBounds);
+                driver.applyElementAlignment(element, Align.ToBounds);
                 hostDriver.applyHeightGrowth(bNode.host, value);
             }
         }
     }
-    applyMinHeight(block, value) {
-        block.native.style.minHeight = `${value}`;
+    applyMinHeight(element, value) {
+        element.native.style.minHeight = `${value}`;
     }
-    applyMaxHeight(block, value) {
-        block.native.style.maxHeight = `${value}`;
+    applyMaxHeight(element, value) {
+        element.native.style.maxHeight = `${value}`;
     }
-    applyContentAlignment(block, value) {
-        const s = block.native.style;
+    applyContentAlignment(element, value) {
+        const s = element.native.style;
         if ((value & Align.Default) === 0) {
             const v = AlignToCss[(value >> 2) & 0b11];
             const h = AlignToCss[value & 0b11];
@@ -114,8 +114,8 @@ export class VerstakHtmlDriver extends HtmlDriver {
         else
             s.justifyContent = s.alignContent = s.textAlign = "";
     }
-    applyBlockAlignment(block, value) {
-        const s = block.native.style;
+    applyElementAlignment(element, value) {
+        const s = element.native.style;
         if ((value & Align.Default) === 0) {
             const v = AlignToCss[(value >> 2) & 0b11];
             const h = AlignToCss[value & 0b11];
@@ -125,8 +125,8 @@ export class VerstakHtmlDriver extends HtmlDriver {
         else
             s.alignSelf = s.justifySelf = "";
     }
-    applyContentWrapping(block, value) {
-        const s = block.native.style;
+    applyContentWrapping(element, value) {
+        const s = element.native.style;
         if (value) {
             s.flexFlow = "wrap";
             s.overflow = "";
@@ -140,10 +140,10 @@ export class VerstakHtmlDriver extends HtmlDriver {
             s.whiteSpace = "nowrap";
         }
     }
-    applyOverlayVisible(block, value) {
-        const e = block.native;
+    applyOverlayVisible(element, value) {
+        const e = element.native;
         const s = e.style;
-        const host = HtmlDriver.findEffectiveHtmlBlockHost(block).native;
+        const host = HtmlDriver.findEffectiveHtmlElementHost(element).native;
         if (value === true) {
             const doc = document.body;
             const rect = host.getBoundingClientRect();
@@ -169,66 +169,66 @@ export class VerstakHtmlDriver extends HtmlDriver {
                 s.position = s.display = s.left = s.right = s.top = s.bottom = "";
         }
     }
-    applyStyle(block, secondary, styleName, enabled) {
-        const e = block.native;
+    applyStyle(element, secondary, styleName, enabled) {
+        const native = element.native;
         enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
         if (secondary)
-            e.classList.toggle(styleName, enabled);
+            native.classList.toggle(styleName, enabled);
         else
-            e.className = enabled ? styleName : "";
+            native.className = enabled ? styleName : "";
     }
-    rebuild(block) {
-        if (block.kind <= BlockKind.Table)
+    update(element) {
+        if (element.kind <= ElKind.Table)
             startNewRow();
-        return super.rebuild(block);
+        return super.update(element);
     }
 }
 const Constants = {
-    block: "block",
+    el: "el",
     row: "row",
     layouts: ["section", "table", "note", "group", "", ""],
     attribute: "kind",
 };
 const Drivers = {
-    section: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Section),
-    table: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Table),
-    note: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Note),
-    group: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Group),
-    row: new VerstakHtmlDriver(Constants.row, true, b => b.kind = BlockKind.Row),
+    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),
     cursor: new CursorCommandDriver(),
 };
 const VerstakDriversByLayout = [
-    b => {
-        const s = b.native.style;
+    el => {
+        const s = el.native.style;
         s.display = "flex";
         s.flexDirection = "column";
-        s.alignSelf = b.node.owner.isTable ? "stretch" : "center";
+        s.alignSelf = el.node.owner.isTable ? "stretch" : "center";
         s.textAlign = "initial";
         s.flexShrink = "1";
         s.minWidth = "0";
     },
-    b => {
-        const s = b.native.style;
-        s.alignSelf = b.node.owner.isTable ? "stretch" : "center";
+    el => {
+        const s = el.native.style;
+        s.alignSelf = el.node.owner.isTable ? "stretch" : "center";
         s.display = "grid";
         s.flexBasis = "0";
         s.gridAutoRows = "minmax(min-content, 1fr)";
         s.gridAutoColumns = "minmax(min-content, 1fr)";
         s.textAlign = "initial";
     },
-    b => {
-        const s = b.native.style;
-        s.alignSelf = b.node.owner.isTable ? "stretch" : "center";
+    el => {
+        const s = el.native.style;
+        s.alignSelf = el.node.owner.isTable ? "stretch" : "center";
         s.display = "inline-grid";
         s.flexShrink = "1";
     },
-    b => {
-        const s = b.native.style;
+    el => {
+        const s = el.native.style;
         s.display = "contents";
     },
-    b => {
-        const s = b.native.style;
-        s.display = b.node.owner.isTable ? "none" : "flex";
+    el => {
+        const s = el.native.style;
+        s.display = el.node.owner.isTable ? "none" : "flex";
         s.flexDirection = "row";
     },
 ];

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

@@ -1,28 +1,28 @@
 import { MergeItem } from "reactronic";
-import { Block, BaseDriver } from "../core/api.js";
+import { El, BaseDriver } from "../core/api.js";
 export declare abstract class BaseHtmlDriver<T extends Element, C = unknown> extends BaseDriver<T, C> {
-    create(block: Block<T, unknown, C, void>, b: {
+    create(element: El<T, unknown, C, void>, result: {
         native?: T;
         controller?: C;
     }): void;
-    initialize(block: Block<T, unknown, C, void>): void;
-    finalize(block: Block<T, unknown, C>, isLeader: boolean): boolean;
-    mount(block: Block<T, unknown, C>): void;
-    relocate(block: Block<T, unknown, C>): void;
-    rebuild(block: Block<T, unknown, C>): void | Promise<void>;
+    initialize(element: El<T, unknown, C, void>): void;
+    finalize(element: El<T, unknown, C>, isLeader: boolean): boolean;
+    mount(element: El<T, unknown, C>, nativeHost?: T): void;
+    relocate(element: El<T, unknown, C>): void;
+    update(element: El<T, unknown, C>): void | Promise<void>;
     static get blinkingEffectMarker(): string | undefined;
     static set blinkingEffectMarker(value: string | undefined);
-    static findEffectiveHtmlBlockHost(block: Block<any>): Block<HTMLElement | SVGElement>;
-    static findPrevSiblingHtmlBlock(ties: MergeItem<Block<any>>): MergeItem<Block<HTMLElement | SVGElement>> | 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(block: Block<T, unknown, C, void>, b: {
+    create(element: El<T, unknown, C, void>, result: {
         native?: T | undefined;
         controller?: C | undefined;
     }): void;
 }
 export declare class SvgDriver<T extends SVGElement, C = unknown> extends BaseHtmlDriver<T, C> {
-    create(block: Block<T, unknown, C, void>, b: {
+    create(element: El<T, unknown, C, void>, result: {
         native?: T | undefined;
         controller?: C | undefined;
     }): void;

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

@@ -1,57 +1,57 @@
 import { Rx } from "reactronic";
 import { Verstak, BaseDriver } from "../core/api.js";
 export class BaseHtmlDriver extends BaseDriver {
-    create(block, b) {
-        super.create(block, b);
+    create(element, result) {
+        super.create(element, result);
     }
-    initialize(block) {
-        if (Rx.isLogging && !block.node.driver.isRow)
-            block.native.setAttribute("key", block.node.key);
-        super.initialize(block);
+    initialize(element) {
+        if (Rx.isLogging && !element.node.driver.isRow)
+            element.native.setAttribute("key", element.node.key);
+        super.initialize(element);
     }
-    finalize(block, isLeader) {
+    finalize(element, isLeader) {
         var _a;
-        const e = block.native;
-        if (e) {
-            (_a = e.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(e);
+        const native = element.native;
+        if (native) {
+            (_a = native.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(native);
             if (isLeader)
-                e.remove();
+                native.remove();
         }
-        super.finalize(block, isLeader);
+        super.finalize(element, isLeader);
         return false;
     }
-    mount(block) {
-        const e = block.native;
-        if (e) {
-            const node = block.node;
+    mount(element, nativeHost) {
+        const native = element.native;
+        if (native) {
+            const node = element.node;
             const sequential = node.owner.node.children.isStrict;
-            const nativeParent = BaseHtmlDriver.findEffectiveHtmlBlockHost(block).native;
-            if (nativeParent) {
+            const automaticNativeHost = BaseHtmlDriver.findEffectiveHtmlElementHost(element).native;
+            if (automaticNativeHost) {
                 if (sequential && !node.driver.isRow) {
-                    const after = BaseHtmlDriver.findPrevSiblingHtmlBlock(block.node.ties);
+                    const after = BaseHtmlDriver.findPrevSiblingHtmlElement(element.node.ties);
                     if (after === undefined || after.instance.node.driver.isRow) {
-                        if (nativeParent !== e.parentNode || !e.previousSibling)
-                            nativeParent.prepend(e);
+                        if (automaticNativeHost !== native.parentNode || !native.previousSibling)
+                            automaticNativeHost.prepend(native);
                     }
                     else {
                         const nativeAfter = after.instance.native;
                         if (nativeAfter instanceof Element) {
-                            if (nativeAfter.nextSibling !== e)
-                                nativeParent.insertBefore(e, nativeAfter.nextSibling);
+                            if (nativeAfter.nextSibling !== native)
+                                automaticNativeHost.insertBefore(native, nativeAfter.nextSibling);
                         }
                     }
                 }
                 else
-                    nativeParent.appendChild(e);
+                    automaticNativeHost.appendChild(native);
             }
         }
     }
-    relocate(block) {
+    relocate(element) {
     }
-    rebuild(block) {
-        const result = super.rebuild(block);
+    update(element) {
+        const result = super.update(element);
         if (gBlinkingEffectMarker)
-            blink(block.native, Verstak.currentRebuildPriority, block.node.stamp);
+            blink(element.native, Verstak.currentUpdatePriority, element.node.stamp);
         return result;
     }
     static get blinkingEffectMarker() {
@@ -60,14 +60,14 @@ export class BaseHtmlDriver extends BaseDriver {
     static set blinkingEffectMarker(value) {
         gBlinkingEffectMarker = value;
     }
-    static findEffectiveHtmlBlockHost(block) {
-        let p = block.node.host;
+    static findEffectiveHtmlElementHost(element) {
+        let p = element.node.host;
         while (p.native instanceof HTMLElement === false &&
-            p.native instanceof SVGElement === false && p !== block)
+            p.native instanceof SVGElement === false && p !== element)
             p = p.node.host;
         return p;
     }
-    static findPrevSiblingHtmlBlock(ties) {
+    static findPrevSiblingHtmlElement(ties) {
         let p = ties.prev;
         while (p && !(p.instance.native instanceof HTMLElement) && !(p.instance.native instanceof SVGElement))
             p = p.prev;
@@ -75,24 +75,24 @@ export class BaseHtmlDriver extends BaseDriver {
     }
 }
 export class HtmlDriver extends BaseHtmlDriver {
-    create(block, b) {
-        b.native = document.createElement(block.node.driver.name);
-        super.create(block, b);
+    create(element, result) {
+        result.native = document.createElement(element.node.driver.name);
+        super.create(element, result);
     }
 }
 export class SvgDriver extends BaseHtmlDriver {
-    create(block, b) {
-        b.native = document.createElementNS("http://www.w3.org/2000/svg", block.node.driver.name);
-        super.create(block, b);
+    create(element, result) {
+        result.native = document.createElementNS("http://www.w3.org/2000/svg", element.node.driver.name);
+        super.create(element, result);
     }
 }
-function blink(e, priority, revision) {
-    if (e !== undefined) {
+function blink(element, priority, revision) {
+    if (element !== undefined) {
         const n1 = revision % 2;
         const n2 = 1 >> n1;
         const bem = gBlinkingEffectMarker;
-        e.classList.toggle(`${bem}${priority}${n1}`, true);
-        e.classList.toggle(`${bem}${priority}${n2}`, false);
+        element.classList.toggle(`${bem}${priority}${n1}`, true);
+        element.classList.toggle(`${bem}${priority}${n2}`, false);
     }
 }
 let gBlinkingEffectMarker = undefined;