verstak 0.23.105 → 0.23.107

package/build/dist/source/core/VBlock.js

@@ -19,22 +19,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { reactive, nonreactive, Transaction, options, Reentrance, Rx, Collection, ObservableObject, raw } from "reactronic";
 import { getCallerInfo } from "./Utils";
 import { emitLetters, equalCellRanges } from "./CellRange";
-import { Cursor, Align } from "./Cursor";
+import { Cursor, Align, TableCursor } from "./Cursor";
 export var Priority;
 (function (Priority) {
     Priority[Priority["Realtime"] = 0] = "Realtime";
     Priority[Priority["Normal"] = 1] = "Normal";
     Priority[Priority["Background"] = 2] = "Background";
 })(Priority || (Priority = {}));
-export function Fragment(body, base) {
-    return VBlock.claim(AbstractDriver.fragment, body, base);
+export function Fragment(builder, base) {
+    return VBlock.claim(Driver.fragment, builder, base);
 }
 export class VBlock {
     get isInitialRendering() {
         return this.stamp === 2;
     }
     static root(render) {
-        gSysRoot.instance.body.render = render;
+        gSysRoot.instance.builder.render = render;
         triggerRendering(gSysRoot);
     }
     static get current() {
@@ -46,18 +46,18 @@ export class VBlock {
     static runForAllBlocks(action) {
         forEachChildRecursively(gSysRoot, action);
     }
-    static claim(driver, body, base) {
+    static claim(driver, builder, base) {
         var _a;
         let result;
         const owner = gCurrent.instance;
         const children = owner.children;
         let ex = undefined;
-        if (body)
-            body.base = base;
+        if (builder)
+            builder.base = base;
         else
-            body = base !== null && base !== void 0 ? base : {};
-        let key = body.key;
-        if (driver.isLine) {
+            builder = base !== null && base !== void 0 ? base : {};
+        let key = builder.key;
+        if (driver.isRow) {
             const last = children.lastClaimedItem();
             if (((_a = last === null || last === void 0 ? void 0 : last.instance) === null || _a === void 0 ? void 0 : _a.driver) === driver)
                 ex = last;
@@ -67,16 +67,16 @@ export class VBlock {
             result = ex.instance;
             if (result.driver !== driver && driver !== undefined)
                 throw new Error(`changing block driver is not yet supported: "${result.driver.name}" -> "${driver === null || driver === void 0 ? void 0 : driver.name}"`);
-            const exTriggers = result.body.triggers;
-            if (triggersAreEqual(body.triggers, exTriggers))
-                body.triggers = exTriggers;
-            result.body = body;
+            const exTriggers = result.builder.triggers;
+            if (triggersAreEqual(builder.triggers, exTriggers))
+                builder.triggers = exTriggers;
+            result.builder = builder;
         }
         else {
-            result = new VBlockImpl(key || VBlock.generateKey(owner), driver, owner, body);
+            result = new VBlockImpl(key || VBlock.generateKey(owner), driver, owner, builder);
             result.item = children.add(result);
             VBlockImpl.grandCount++;
-            if (isReaction(body))
+            if (isReaction(builder))
                 VBlockImpl.disposableCount++;
         }
         return result;
@@ -102,103 +102,118 @@ VBlock.shortFrameDuration = 16;
 VBlock.longFrameDuration = 300;
 VBlock.currentRenderingPriority = Priority.Realtime;
 VBlock.frameDuration = VBlock.longFrameDuration;
-export var LayoutKind;
-(function (LayoutKind) {
-    LayoutKind[LayoutKind["Block"] = 0] = "Block";
-    LayoutKind[LayoutKind["Grid"] = 1] = "Grid";
-    LayoutKind[LayoutKind["Line"] = 2] = "Line";
-    LayoutKind[LayoutKind["Fragment"] = 3] = "Fragment";
-    LayoutKind[LayoutKind["Text"] = 4] = "Text";
-})(LayoutKind || (LayoutKind = {}));
-const createDefaultCursor = () => new Cursor();
-export class AbstractDriver {
-    get isSequential() { return (this.layout & 1) === 0; }
-    get isAuxiliary() { return (this.layout & 2) === 2; }
-    get isBlock() { return this.layout === LayoutKind.Block; }
-    get isGrid() { return this.layout === LayoutKind.Grid; }
-    get isLine() { return this.layout === LayoutKind.Line; }
-    constructor(name, layout, createCursor) {
+export var Layout;
+(function (Layout) {
+    Layout[Layout["Section"] = 0] = "Section";
+    Layout[Layout["Table"] = 1] = "Table";
+    Layout[Layout["Row"] = 2] = "Row";
+    Layout[Layout["Group"] = 3] = "Group";
+    Layout[Layout["Note"] = 4] = "Note";
+})(Layout || (Layout = {}));
+export class Driver {
+    constructor(name, isRow, preset) {
         this.name = name;
-        this.layout = layout;
-        this.createCursor = createCursor !== null && createCursor !== void 0 ? createCursor : createDefaultCursor;
+        this.isRow = isRow;
+        this.preset = preset;
     }
-    initialize(block, native) {
+    create(block, b) {
+    }
+    claim(block) {
         const b = block;
-        b.native = native;
-        invokeInitializeChain(b, b.body);
+        invokeClaim(b, b.builder);
+    }
+    initialize(block) {
+        var _a;
+        const b = block;
+        (_a = this.preset) === null || _a === void 0 ? void 0 : _a.call(this, b);
+        invokeInitialize(b, b.builder);
     }
     deploy(block) {
     }
     render(block) {
-        invokeRenderChain(block, block.body);
+        invokeRender(block, block.builder);
     }
     finalize(block, isLeader) {
         const b = block;
-        invokeFinalizeChain(b, b.body);
-        b.native = null;
+        invokeFinalize(b, b.builder);
         return isLeader;
     }
-    applyCellRange(block, cellRange) {
+    applyChildrenLayout(block, value) {
+        const b = block;
+        if (value === Layout.Table)
+            b.cursor = new TableCursor();
+        else
+            b.cursor = new Cursor();
+    }
+    applyCellRange(block, value) {
     }
-    applyWidthGrowth(block, widthGrowth) {
+    applyWidthGrowth(block, value) {
     }
-    applyMinWidth(block, minWidth) {
+    applyMinWidth(block, value) {
     }
-    applyMaxWidth(block, maxWidth) {
+    applyMaxWidth(block, value) {
     }
-    applyHeightGrowth(block, heightGrowth) {
+    applyHeightGrowth(block, value) {
     }
-    applyMinHeight(block, minHeight) {
+    applyMinHeight(block, value) {
     }
-    applyMaxHeight(block, maxHeight) {
+    applyMaxHeight(block, value) {
     }
-    applyContentAlignment(block, contentAlignment) {
+    applyContentAlignment(block, value) {
     }
-    applyFrameAlignment(block, frameAlignment) {
+    applyBlockAlignment(block, value) {
     }
-    applyContentWrapping(block, contentWrapping) {
+    applyContentWrapping(block, value) {
     }
-    applyOverlayVisible(block, overlayVisible) {
+    applyOverlayVisible(block, value) {
     }
-    applyStyling(block, secondary, styleName, enabled) {
+    applyStyle(block, secondary, styleName, enabled) {
     }
 }
-AbstractDriver.fragment = new AbstractDriver("fragment", LayoutKind.Fragment);
-function isReaction(body) {
+Driver.fragment = new Driver("fragment", false, b => b.childrenLayout = Layout.Group);
+function isReaction(builder) {
     var _a;
-    return (_a = body === null || body === void 0 ? void 0 : body.reaction) !== null && _a !== void 0 ? _a : ((body === null || body === void 0 ? void 0 : body.base) ? isReaction(body === null || body === void 0 ? void 0 : body.base) : false);
+    return (_a = builder === null || builder === void 0 ? void 0 : builder.reaction) !== null && _a !== void 0 ? _a : ((builder === null || builder === void 0 ? void 0 : builder.base) ? isReaction(builder === null || builder === void 0 ? void 0 : builder.base) : false);
+}
+function invokeClaim(block, builder) {
+    const claim = builder.claim;
+    const base = builder.base;
+    if (claim)
+        claim(block, base ? () => invokeClaim(block, base) : NOP);
+    else if (base)
+        invokeClaim(block, base);
 }
-function invokeInitializeChain(block, body) {
-    const initialize = body.initialize;
-    const base = body.base;
+function invokeInitialize(block, builder) {
+    const initialize = builder.initialize;
+    const base = builder.base;
     if (initialize)
-        initialize(block, base ? () => invokeInitializeChain(block, base) : NOP);
+        initialize(block, base ? () => invokeInitialize(block, base) : NOP);
     else if (base)
-        invokeInitializeChain(block, base);
+        invokeInitialize(block, base);
 }
-function invokeRenderChain(block, body) {
-    const render = body.render;
-    const base = body.base;
+function invokeRender(block, builder) {
+    const render = builder.render;
+    const base = builder.base;
     if (render)
-        render(block, base ? () => invokeRenderChain(block, base) : NOP);
+        render(block, base ? () => invokeRender(block, base) : NOP);
     else if (base)
-        invokeRenderChain(block, base);
+        invokeRender(block, base);
 }
-function invokeFinalizeChain(block, body) {
-    const finalize = body.finalize;
-    const base = body.base;
+function invokeFinalize(block, builder) {
+    const finalize = builder.finalize;
+    const base = builder.base;
     if (finalize)
-        finalize(block, base ? () => invokeFinalizeChain(block, base) : NOP);
+        finalize(block, base ? () => invokeFinalize(block, base) : NOP);
     else if (base)
-        invokeFinalizeChain(block, base);
+        invokeFinalize(block, base);
 }
-export class StaticDriver extends AbstractDriver {
-    constructor(element, name, layout, createCursor) {
-        super(name, layout, createCursor);
+export class StaticDriver extends Driver {
+    constructor(element, name, isRow, preset) {
+        super(name, isRow, preset);
         this.element = element;
     }
-    initialize(block, element) {
-        super.initialize(block, this.element);
+    create(block, b) {
+        b.native = this.element;
     }
 }
 export class ContextVariable {
@@ -235,14 +250,14 @@ __decorate([
     __metadata("design:type", ContextVariable)
 ], VBlockContext.prototype, "variable", void 0);
 class VBlockImpl extends VBlock {
-    constructor(key, driver, owner, body) {
+    constructor(key, driver, owner, builder) {
         super();
         this.key = key;
         this.driver = driver;
-        this.body = body;
+        this.builder = builder;
         this.model = undefined;
-        this.assignedCells = undefined;
-        this.assignedStyle = false;
+        this.appliedChildrenLayout = Layout.Row;
+        this.appliedPlacement = undefined;
         this.appliedCellRange = Cursor.UndefinedCellRange;
         this.appliedWidthGrowth = 0;
         this.appliedMinWidth = "";
@@ -251,41 +266,54 @@ class VBlockImpl extends VBlock {
         this.appliedMinHeight = "";
         this.appliedMaxHeight = "";
         this.appliedContentAlignment = Align.Default;
-        this.appliedFrameAlignment = Align.Default;
+        this.appliedBlockAlignment = Align.Default;
         this.appliedContentWrapping = false;
         this.appliedOverlayVisible = undefined;
+        this.wasStyleApplied = false;
         this.childrenShuffling = false;
         this.renderingPriority = Priority.Realtime;
         this.level = owner.level + 1;
         this.host = owner;
-        this.children = new Collection(driver.isSequential, getBlockKey);
+        this.children = new Collection(getBlockKey, this.isSequential);
         this.numerator = 0;
         this.item = undefined;
         this.stamp = 0;
         this.native = undefined;
-        this.cursor = driver.createCursor();
+        this.controller = undefined;
+        this.cursor = new Cursor();
         this.outer = owner.context ? owner : owner.outer;
         this.context = undefined;
     }
+    render(_triggers) {
+        renderNow(this.item);
+    }
+    get isSequential() { return (this.childrenLayout & 1) === 0; }
+    get isAuxiliary() { return (this.childrenLayout & 2) === 2; }
+    get isSection() { return this.childrenLayout === Layout.Section; }
+    get isTable() { return this.childrenLayout === Layout.Table; }
     get isMoved() {
         let owner = this.host;
-        if (owner.driver.isLine)
+        if (owner.driver.isRow)
             owner = owner.host;
         return owner.children.isMoved(this.item);
     }
-    render(_triggers) {
-        renderNow(this.item);
+    get childrenLayout() { return this.appliedChildrenLayout; }
+    set childrenLayout(value) {
+        if (value !== this.appliedChildrenLayout || this.stamp < 2) {
+            this.driver.applyChildrenLayout(this, value);
+            this.appliedChildrenLayout = value;
+        }
     }
-    get cells() { return this.assignedCells; }
-    set cells(value) {
-        if (this.assignedCells !== undefined)
+    get placement() { return this.appliedPlacement; }
+    set placement(value) {
+        if (this.appliedPlacement !== undefined)
             throw new Error("cells can be assigned only once during rendering");
         const cellRange = this.host.cursor.onwards(value);
         if (!equalCellRanges(cellRange, this.appliedCellRange)) {
             this.driver.applyCellRange(this, cellRange);
             this.appliedCellRange = cellRange;
         }
-        this.assignedCells = value !== null && value !== void 0 ? value : {};
+        this.appliedPlacement = value !== null && value !== void 0 ? value : {};
     }
     get widthGrowth() { return this.appliedWidthGrowth; }
     set widthGrowth(value) {
@@ -336,11 +364,11 @@ class VBlockImpl extends VBlock {
             this.appliedContentAlignment = value;
         }
     }
-    get frameAlignment() { return this.appliedFrameAlignment; }
-    set frameAlignment(value) {
-        if (value !== this.appliedFrameAlignment) {
-            this.driver.applyFrameAlignment(this, value);
-            this.appliedFrameAlignment = value;
+    get blockAlignment() { return this.appliedBlockAlignment; }
+    set blockAlignment(value) {
+        if (value !== this.appliedBlockAlignment) {
+            this.driver.applyBlockAlignment(this, value);
+            this.appliedBlockAlignment = value;
         }
     }
     get contentWrapping() { return this.appliedContentWrapping; }
@@ -358,11 +386,11 @@ class VBlockImpl extends VBlock {
         }
     }
     style(styleName, enabled) {
-        this.driver.applyStyling(this, this.assignedStyle, styleName, enabled);
-        this.assignedStyle = true;
+        this.driver.applyStyle(this, this.wasStyleApplied, styleName, enabled);
+        this.wasStyleApplied = true;
     }
     configureReactronic(options) {
-        if (this.stamp !== 1 || !isReaction(this.body))
+        if (this.stamp !== 1 || !isReaction(this.builder))
             throw new Error("reactronic can be configured only for reacting blocks and only inside initialize");
         return Rx.getController(this.render).configure(options);
     }
@@ -428,24 +456,23 @@ function runRenderNestedTreesThenDo(error, action) {
         let promised = undefined;
         try {
             children.endMerge(error);
-            for (const item of children.removedItems(true)) {
+            for (const item of children.removedItems(true))
                 triggerFinalization(item, true, true);
-            }
             if (!error) {
-                const ownerIsBlock = owner.driver.isBlock;
-                const sequential = children.strict;
+                const ownerIsSection = owner.isSection;
+                const sequential = children.isStrict;
                 const cursor = owner.cursor;
                 let p1 = undefined;
                 let p2 = undefined;
                 let redeploy = false;
-                let partHost = owner;
+                let hostingRow = owner;
                 cursor.reset();
                 for (const item of children.items()) {
                     if (Transaction.isCanceled)
                         break;
                     const block = item.instance;
-                    const driver = block.driver;
-                    const host = driver.isLine ? owner : partHost;
+                    const isRow = block.driver.isRow;
+                    const host = isRow ? owner : hostingRow;
                     const p = (_a = block.renderingPriority) !== null && _a !== void 0 ? _a : Priority.Realtime;
                     redeploy = markToRedeployIfNecessary(redeploy, host, item, children, sequential);
                     if (p === Priority.Realtime)
@@ -454,8 +481,8 @@ function runRenderNestedTreesThenDo(error, action) {
                         p1 = push(item, p1);
                     else
                         p2 = push(item, p2);
-                    if (ownerIsBlock && driver.isLine)
-                        partHost = block;
+                    if (ownerIsSection && isRow)
+                        hostingRow = block;
                 }
                 if (!Transaction.isCanceled && (p1 !== undefined || p2 !== undefined))
                     promised = startIncrementalRendering(current, children, p1, p2).then(() => action(error), e => action(e));
@@ -523,7 +550,7 @@ function renderIncrementally(owner, stamp, allChildren, items, priority) {
 function triggerRendering(item) {
     const block = item.instance;
     if (block.stamp >= 0) {
-        if (isReaction(block.body)) {
+        if (isReaction(block.builder)) {
             if (block.stamp === 0) {
                 Transaction.outside(() => {
                     if (Rx.isLogging)
@@ -533,7 +560,7 @@ function triggerRendering(item) {
                     });
                 });
             }
-            nonreactive(block.render, block.body.triggers);
+            nonreactive(block.render, block.builder.triggers);
         }
         else
             renderNow(item);
@@ -543,11 +570,14 @@ function redeployIfNecessary(block) {
     const driver = block.driver;
     if (block.stamp === 0) {
         block.stamp = 1;
-        driver.initialize(block, undefined);
-        driver.deploy(block);
+        nonreactive(() => {
+            driver.create(block, block);
+            driver.initialize(block);
+            driver.deploy(block);
+        });
     }
     else if (block.isMoved)
-        driver.deploy(block);
+        nonreactive(() => driver.deploy(block));
 }
 function renderNow(item) {
     const block = item.instance;
@@ -558,14 +588,15 @@ function renderNow(item) {
                 redeployIfNecessary(block);
                 block.stamp++;
                 block.numerator = 0;
-                block.assignedCells = undefined;
-                block.assignedStyle = false;
+                block.appliedPlacement = undefined;
+                block.wasStyleApplied = false;
                 block.children.beginMerge();
-                result = block.driver.render(block);
-                if (block.driver.isLine)
-                    block.host.cursor.lineFeed();
-                else if (block.assignedCells === undefined)
-                    block.cells = undefined;
+                const driver = block.driver;
+                result = driver.render(block);
+                if (driver.isRow)
+                    block.host.cursor.rowBreak();
+                else if (block.appliedPlacement === undefined)
+                    block.placement = undefined;
                 if (result instanceof Promise)
                     result.then(v => { runRenderNestedTreesThenDo(undefined, NOP); return v; }, e => { console.log(e); runRenderNestedTreesThenDo(e !== null && e !== void 0 ? e : new Error("unknown error"), NOP); });
                 else
@@ -582,11 +613,14 @@ function renderNow(item) {
 function triggerFinalization(item, isLeader, individual) {
     const block = item.instance;
     if (block.stamp >= 0) {
-        if (individual && block.key !== block.body.key && !block.driver.isLine)
+        const driver = block.driver;
+        if (individual && block.key !== block.builder.key && !driver.isRow)
             console.log(`WARNING: it is recommended to assign explicit key for conditionally rendered block in order to avoid unexpected side effects: ${block.key}`);
         block.stamp = ~block.stamp;
-        const childrenAreLeaders = block.driver.finalize(block, isLeader);
-        if (isReaction(block.body)) {
+        const childrenAreLeaders = nonreactive(() => driver.finalize(block, isLeader));
+        block.native = null;
+        block.controller = null;
+        if (isReaction(block.builder)) {
             item.aux = undefined;
             const last = gLastToDispose;
             if (last)
@@ -691,7 +725,7 @@ function defaultReject(error) {
 }
 Promise.prototype.then = reactronicDomHookedThen;
 const NOP = (...args) => { };
-const gSysDriver = new StaticDriver(null, "SYSTEM", LayoutKind.Fragment);
+const gSysDriver = new StaticDriver(null, "SYSTEM", false, b => b.childrenLayout = Layout.Group);
 const gSysRoot = Collection.createItem(new VBlockImpl(gSysDriver.name, gSysDriver, { level: 0 }, { reaction: true, render: NOP }));
 gSysRoot.instance.item = gSysRoot;
 Object.defineProperty(gSysRoot.instance, "host", {

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

@@ -1,24 +1,25 @@
-import { VBlock, BlockBody, Align, CellRange } from "../core/api";
+import { VBlock, Layout, BlockBuilder, Align, CellRange } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export declare function Block<M = unknown, R = void>(body?: BlockBody<HTMLElement, M, R>, base?: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare function PlainText(content: string, body?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
-export declare function HtmlText(content: string, body?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
-export declare function Grid<M = unknown, R = void>(body?: BlockBody<HTMLElement, M, R>, base?: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare function line<T = void>(body: (block: void) => T): void;
-export declare function lineFeed(noCoalescing?: boolean, key?: string): VBlock<HTMLElement>;
-export declare function Group<M = unknown, R = void>(body?: BlockBody<HTMLElement, M, R>, base?: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare class VerstakDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    applyCellRange(block: VBlock<T>, cellRange: CellRange | undefined): void;
-    applyWidthGrowth(block: VBlock<T>, widthGrowth: number): void;
-    applyMinWidth(block: VBlock<T>, minWidth: string): void;
-    applyMaxWidth(block: VBlock<T>, maxWidth: string): void;
-    applyHeightGrowth(block: VBlock<T>, heightGrowth: number): void;
-    applyMinHeight(block: VBlock<T>, minHeight: string): void;
-    applyMaxHeight(block: VBlock<T>, maxHeight: string): void;
-    applyContentAlignment(block: VBlock<T>, contentAlign: Align): void;
-    applyFrameAlignment(block: VBlock<T>, frameAlign: Align): void;
-    applyContentWrapping(block: VBlock<T>, contentWrapping: boolean): void;
-    applyOverlayVisible(block: VBlock<T>, overlayVisible: boolean | undefined): void;
-    applyStyling(block: VBlock<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
+export declare function VSection<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare function VTable<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare function row<T = void>(builder?: (block: void) => T, key?: string): void;
+export declare function fromNewRow(key?: string): void;
+export declare function VNote(content: string, builder?: BlockBuilder<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
+export declare function VHtmlNote(content: string, builder?: BlockBuilder<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
+export declare function VGroup<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare class VerstakHtmlDriver<T extends HTMLElement> extends HtmlDriver<T> {
+    applyChildrenLayout(block: VBlock<T, any, any>, value: Layout): void;
+    applyCellRange(block: VBlock<T>, value: CellRange | undefined): void;
+    applyWidthGrowth(block: VBlock<T>, value: number): void;
+    applyMinWidth(block: VBlock<T>, value: string): void;
+    applyMaxWidth(block: VBlock<T>, value: string): void;
+    applyHeightGrowth(block: VBlock<T>, value: number): void;
+    applyMinHeight(block: VBlock<T>, value: string): void;
+    applyMaxHeight(block: VBlock<T>, value: string): void;
+    applyContentAlignment(block: VBlock<T>, value: Align): void;
+    applyBlockAlignment(block: VBlock<T>, value: Align): void;
+    applyContentWrapping(block: VBlock<T>, value: boolean): void;
+    applyOverlayVisible(block: VBlock<T>, value: boolean | undefined): void;
+    applyStyle(block: VBlock<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
     render(block: VBlock<T>): void | Promise<void>;
 }