verstak 0.22.412 → 0.22.500

package/README.md

@@ -3,11 +3,12 @@
 [![NPM Version](https://img.shields.io/npm/v/verstak.svg?style=flat&colorB=success)](https://www.npmjs.com/package/verstak)
 [![Package Size](https://img.shields.io/bundlephobia/minzip/verstak.svg?colorB=success)](https://bundlephobia.com/result?p=verstak)
 
-# **Verstak** - Transactional Reactive Front-End Development Framework
+# **Verstak** - Experimental Front-End Library
 
 Verstak is an experimental JavaScript library that provides
+grid-based layout and
 [transactional reactive](https://blog.nezaboodka.com/post/2019/593-modern-database-should-natively-support-transactionally-reactive-programming)
-facilities and grid-based layout for building front-end applications.
+facilities for building front-end applications.
 
 Transactional reactivity means that state changes are being made in an
 isolated data snapshot and then, once atomically applied, are

package/build/dist/source/core/Block.d.ts

@@ -0,0 +1,62 @@
+import { Monitor, LoggingOptions, Item, CollectionReader } from 'reactronic';
+export declare type Callback<T = unknown> = (impl: T) => void;
+export declare type Render<T = unknown, M = unknown, P = void, R = void> = (impl: T, block: Block<T, M, P, R>) => R;
+export declare type AsyncRender<T = unknown, M = unknown, P = void> = (impl: T, block: Block<T, M, P, Promise<void>>) => Promise<void>;
+export declare const enum Priority {
+    SyncP0 = 0,
+    AsyncP1 = 1,
+    AsyncP2 = 2
+}
+export interface BlockOptions<P = void> {
+    place?: P;
+    triggers?: unknown;
+    priority?: Priority;
+    monitor?: Monitor;
+    throttling?: number;
+    logging?: Partial<LoggingOptions>;
+    shuffle?: boolean;
+}
+export declare abstract class Block<T = unknown, M = unknown, P = void, R = void> {
+    static readonly shortFrameDuration = 16;
+    static readonly longFrameDuration = 300;
+    static currentRenderingPriority: Priority;
+    static frameDuration: number;
+    abstract readonly name: string;
+    abstract readonly factory: BlockFactory<T>;
+    abstract readonly inline: boolean;
+    abstract readonly renderer: Render<T, M, P, R>;
+    abstract readonly wrapper: Render<T, M, P, R> | undefined;
+    abstract readonly options: Readonly<BlockOptions<P>> | undefined;
+    abstract model?: M;
+    abstract readonly level: number;
+    abstract readonly parent: Block;
+    abstract readonly children: CollectionReader<Block>;
+    abstract readonly item: Item<Block> | undefined;
+    abstract readonly stamp: number;
+    abstract readonly impl?: T;
+    render(): R;
+    get isInitialRendering(): boolean;
+    abstract wrapBy(renderer: Render<T, M, P, R> | undefined): this;
+    static root(render: () => void): void;
+    static get current(): Block;
+    static renderChildrenThenDo(action: (error: unknown) => void): void;
+    static forAllBlocksDo<T>(action: (e: T) => void): void;
+    static claim<T = undefined, M = unknown, P = void, R = void>(name: string, inline: boolean, options: BlockOptions<P> | undefined, renderer: Render<T, M, P, R>, factory?: BlockFactory<T>): Block<T, M, P, R>;
+    static getDefaultLoggingOptions(): LoggingOptions | undefined;
+    static setDefaultLoggingOptions(logging?: LoggingOptions): void;
+}
+export declare class BlockFactory<T> {
+    static readonly default: BlockFactory<any>;
+    readonly name: string;
+    readonly strict: boolean;
+    constructor(name: string, strict: boolean);
+    initialize(block: Block<T>, impl: T | undefined): void;
+    finalize(block: Block<T>, isLeader: boolean): boolean;
+    layout(block: Block<T>, strict: boolean): void;
+    render(block: Block<T>): void | Promise<void>;
+}
+export declare class StaticBlockFactory<T> extends BlockFactory<T> {
+    readonly element: T;
+    constructor(name: string, sequential: boolean, element: T);
+    initialize(block: Block<T>, element: T | undefined): void;
+}

package/build/dist/source/core/{RxNode.js → Block.js}

@@ -23,9 +23,9 @@ export var Priority;
     Priority[Priority["AsyncP1"] = 1] = "AsyncP1";
     Priority[Priority["AsyncP2"] = 2] = "AsyncP2";
 })(Priority || (Priority = {}));
-export class RxNode {
+export class Block {
     render() {
-        return this.renderer(this.element, this);
+        return this.renderer(this.impl, this);
     }
     get isInitialRendering() {
         return this.stamp === 2;
@@ -37,109 +37,105 @@ export class RxNode {
     static get current() {
         return gContext.self;
     }
-    static shuffleChildrenRendering(shuffle) {
-        gContext.self.shuffle = shuffle;
-    }
     static renderChildrenThenDo(action) {
         runRenderChildrenThenDo(undefined, action);
     }
-    static forAllNodesDo(action) {
+    static forAllBlocksDo(action) {
         forEachChildRecursively(gSysRoot, action);
     }
-    static claim(name, triggers, inline, renderer, priority, monitor, throttling, logging, factory) {
+    static claim(name, inline, options, renderer, factory) {
+        var _a;
         const parent = gContext.self;
         const children = parent.children;
         const item = children.claim(name);
-        let node;
+        let block;
         if (item) {
-            node = item.self;
-            if (node.factory !== factory && factory !== undefined)
-                throw new Error(`changing node type is not yet supported: "${node.factory.name}" -> "${factory === null || factory === void 0 ? void 0 : factory.name}"`);
-            if (node.inline || !triggersAreEqual(node.triggers, triggers))
-                node.triggers = triggers;
-            node.renderer = renderer;
-            node.priority = priority !== null && priority !== void 0 ? priority : Priority.SyncP0;
+            block = item.self;
+            if (block.factory !== factory && factory !== undefined)
+                throw new Error(`changing block type is not yet supported: "${block.factory.name}" -> "${factory === null || factory === void 0 ? void 0 : factory.name}"`);
+            if (options) {
+                const existingTriggers = (_a = block.options) === null || _a === void 0 ? void 0 : _a.triggers;
+                if (triggersAreEqual(options.triggers, existingTriggers))
+                    options.triggers = existingTriggers;
+            }
+            block.options = options;
+            block.renderer = renderer;
         }
         else {
-            node = new RxNodeImpl(name, factory !== null && factory !== void 0 ? factory : NodeFactory.default, inline !== null && inline !== void 0 ? inline : false, parent, triggers, renderer, undefined, priority, monitor, throttling, logging);
-            node.item = children.add(node);
-            RxNodeImpl.grandCount++;
-            if (!node.inline)
-                RxNodeImpl.disposableCount++;
+            block = new VerstakBlock(name, factory !== null && factory !== void 0 ? factory : BlockFactory.default, inline !== null && inline !== void 0 ? inline : false, parent, options, renderer, undefined);
+            block.item = children.add(block);
+            VerstakBlock.grandCount++;
+            if (!block.inline)
+                VerstakBlock.disposableCount++;
         }
-        return node;
+        return block;
     }
     static getDefaultLoggingOptions() {
-        return RxNodeImpl.logging;
+        return VerstakBlock.logging;
     }
     static setDefaultLoggingOptions(logging) {
-        RxNodeImpl.logging = logging;
+        VerstakBlock.logging = logging;
     }
 }
-RxNode.currentRenderingPriority = Priority.SyncP0;
-RxNode.shortFrameDuration = 16;
-RxNode.longFrameDuration = 300;
-RxNode.frameDuration = RxNode.longFrameDuration;
+Block.shortFrameDuration = 16;
+Block.longFrameDuration = 300;
+Block.currentRenderingPriority = Priority.SyncP0;
+Block.frameDuration = Block.longFrameDuration;
 const NOP = () => { };
-export class NodeFactory {
+export class BlockFactory {
     constructor(name, strict) {
         this.name = name;
         this.strict = strict;
     }
-    initialize(node, element) {
-        const impl = node;
-        impl.element = element;
+    initialize(block, impl) {
+        const b = block;
+        b.impl = impl;
     }
-    finalize(node, isLeader) {
-        const impl = node;
-        impl.element = undefined;
+    finalize(block, isLeader) {
+        const b = block;
+        b.impl = undefined;
         return isLeader;
     }
-    arrange(node, strict) {
+    layout(block, strict) {
     }
-    render(node) {
+    render(block) {
         let result;
-        if (node.wrapper)
-            result = node.wrapper(node.element, node);
+        if (block.wrapper)
+            result = block.wrapper(block.impl, block);
         else
-            result = node.render();
+            result = block.render();
         return result;
     }
 }
-NodeFactory.default = new NodeFactory('default', false);
-export class StaticNodeFactory extends NodeFactory {
+BlockFactory.default = new BlockFactory('default', false);
+export class StaticBlockFactory extends BlockFactory {
     constructor(name, sequential, element) {
         super(name, sequential);
         this.element = element;
     }
-    initialize(node, element) {
-        super.initialize(node, this.element);
+    initialize(block, element) {
+        super.initialize(block, this.element);
     }
 }
-function getNodeName(node) {
-    return node.stamp >= 0 ? node.name : undefined;
+function getBlockName(block) {
+    return block.stamp >= 0 ? block.name : undefined;
 }
-class RxNodeImpl extends RxNode {
-    constructor(name, factory, inline, parent, triggers, renderer, wrapper, priority, monitor, throttling, logging) {
+class VerstakBlock extends Block {
+    constructor(name, factory, inline, parent, options, renderer, wrapper) {
         super();
         this.name = name;
         this.factory = factory;
         this.inline = inline;
-        this.triggers = triggers;
+        this.options = options;
         this.renderer = renderer;
         this.wrapper = wrapper;
-        this.monitor = monitor;
-        this.throttling = throttling !== null && throttling !== void 0 ? throttling : -1;
-        this.logging = logging !== null && logging !== void 0 ? logging : RxNodeImpl.logging;
-        this.priority = priority !== null && priority !== void 0 ? priority : Priority.SyncP0;
-        this.shuffle = false;
         this.model = undefined;
         this.level = parent.level + 1;
         this.parent = parent;
-        this.children = new Collection(factory.strict, getNodeName);
+        this.children = new Collection(factory.strict, getBlockName);
         this.item = undefined;
         this.stamp = 0;
-        this.element = undefined;
+        this.impl = undefined;
     }
     autorender(_triggers) {
         runRender(this.item);
@@ -149,9 +145,9 @@ class RxNodeImpl extends RxNode {
         return this;
     }
 }
-RxNodeImpl.grandCount = 0;
-RxNodeImpl.disposableCount = 0;
-RxNodeImpl.logging = undefined;
+VerstakBlock.grandCount = 0;
+VerstakBlock.disposableCount = 0;
+VerstakBlock.logging = undefined;
 __decorate([
     reactive,
     options({
@@ -162,11 +158,12 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], RxNodeImpl.prototype, "autorender", null);
+], VerstakBlock.prototype, "autorender", null);
 function runRenderChildrenThenDo(error, action) {
+    var _a, _b;
     const context = gContext;
-    const node = context.self;
-    const children = node.children;
+    const block = context.self;
+    const children = block.children;
     if (children.isMergeInProgress) {
         let promised = undefined;
         try {
@@ -181,21 +178,15 @@ function runRenderChildrenThenDo(error, action) {
                 for (const child of children.items()) {
                     if (Transaction.isCanceled)
                         break;
+                    isMoved = checkIsMoved(isMoved, child, children, strict);
                     const x = child.self;
-                    if (x.element) {
-                        if (isMoved) {
-                            children.markAsMoved(child);
-                            isMoved = false;
-                        }
-                    }
-                    else if (strict && children.isMoved(child))
-                        isMoved = true;
-                    if (x.priority === Priority.SyncP0)
+                    const priority = (_b = (_a = x.options) === null || _a === void 0 ? void 0 : _a.priority) !== null && _b !== void 0 ? _b : Priority.SyncP0;
+                    if (priority === Priority.SyncP0)
                         prepareThenRunRender(child, children.isMoved(child), strict);
-                    else if (x.priority === Priority.AsyncP1)
-                        p1 = push(p1, child);
+                    else if (priority === Priority.AsyncP1)
+                        p1 = push(child, p1);
                     else
-                        p2 = push(p2, child);
+                        p2 = push(child, p2);
                 }
                 if (!Transaction.isCanceled && (p1 !== undefined || p2 !== undefined))
                     promised = startIncrementalRendering(context, children, p1, p2).then(() => action(error), e => action(e));
@@ -207,6 +198,17 @@ function runRenderChildrenThenDo(error, action) {
         }
     }
 }
+function checkIsMoved(isMoved, child, children, strict) {
+    if (child.self.impl) {
+        if (isMoved) {
+            children.markAsMoved(child);
+            isMoved = false;
+        }
+    }
+    else if (strict && children.isMoved(child))
+        isMoved = true;
+    return isMoved;
+}
 function startIncrementalRendering(parent, allChildren, priority1, priority2) {
     return __awaiter(this, void 0, void 0, function* () {
         const stamp = parent.self.stamp;
@@ -217,80 +219,83 @@ function startIncrementalRendering(parent, allChildren, priority1, priority2) {
     });
 }
 function renderIncrementally(parent, stamp, allChildren, items, priority) {
+    var _a;
     return __awaiter(this, void 0, void 0, function* () {
         yield Transaction.requestNextFrame();
-        const node = parent.self;
-        if (!Transaction.isCanceled || !Transaction.isFrameOver(1, RxNode.shortFrameDuration / 3)) {
-            let outerPriority = RxNode.currentRenderingPriority;
-            RxNode.currentRenderingPriority = priority;
+        const block = parent.self;
+        if (!Transaction.isCanceled || !Transaction.isFrameOver(1, Block.shortFrameDuration / 3)) {
+            let outerPriority = Block.currentRenderingPriority;
+            Block.currentRenderingPriority = priority;
             try {
-                const strict = node.children.strict;
-                if (node.shuffle)
+                const strict = block.children.strict;
+                if ((_a = block.options) === null || _a === void 0 ? void 0 : _a.shuffle)
                     shuffle(items);
-                const frameDurationLimit = priority === Priority.AsyncP2 ? RxNode.shortFrameDuration : Infinity;
-                let frameDuration = Math.min(frameDurationLimit, Math.max(RxNode.frameDuration / 4, RxNode.shortFrameDuration));
+                const frameDurationLimit = priority === Priority.AsyncP2 ? Block.shortFrameDuration : Infinity;
+                let frameDuration = Math.min(frameDurationLimit, Math.max(Block.frameDuration / 4, Block.shortFrameDuration));
                 for (const child of items) {
                     prepareThenRunRender(child, allChildren.isMoved(child), strict);
                     if (Transaction.isFrameOver(1, frameDuration)) {
-                        RxNode.currentRenderingPriority = outerPriority;
+                        Block.currentRenderingPriority = outerPriority;
                         yield Transaction.requestNextFrame(0);
-                        outerPriority = RxNode.currentRenderingPriority;
-                        RxNode.currentRenderingPriority = priority;
-                        frameDuration = Math.min(4 * frameDuration, Math.min(frameDurationLimit, RxNode.frameDuration));
+                        outerPriority = Block.currentRenderingPriority;
+                        Block.currentRenderingPriority = priority;
+                        frameDuration = Math.min(4 * frameDuration, Math.min(frameDurationLimit, Block.frameDuration));
                     }
-                    if (Transaction.isCanceled && Transaction.isFrameOver(1, RxNode.shortFrameDuration / 3))
+                    if (Transaction.isCanceled && Transaction.isFrameOver(1, Block.shortFrameDuration / 3))
                         break;
                 }
             }
             finally {
-                RxNode.currentRenderingPriority = outerPriority;
+                Block.currentRenderingPriority = outerPriority;
             }
         }
     });
 }
 function prepareThenRunRender(item, moved, strict) {
-    const node = item.self;
-    if (node.stamp >= 0) {
+    var _a;
+    const block = item.self;
+    if (block.stamp >= 0) {
         prepareRender(item, moved, strict);
-        if (node.inline)
+        if (block.inline)
             runRender(item);
         else
-            nonreactive(node.autorender, node.triggers);
+            nonreactive(block.autorender, (_a = block.options) === null || _a === void 0 ? void 0 : _a.triggers);
     }
 }
 function prepareRender(item, moved, strict) {
     var _a, _b, _c;
-    const node = item.self;
-    const factory = node.factory;
-    if (node.stamp === 0) {
-        node.stamp = 1;
-        if (!node.inline) {
+    const block = item.self;
+    const factory = block.factory;
+    if (block.stamp === 0) {
+        block.stamp = 1;
+        if (!block.inline) {
             Transaction.outside(() => {
+                var _a, _b, _c;
                 if (Rx.isLogging)
-                    Rx.setLoggingHint(node, node.name);
-                Rx.getController(node.autorender).configure({
-                    order: node.level,
-                    monitor: node.monitor,
-                    throttling: node.throttling,
-                    logging: node.logging,
+                    Rx.setLoggingHint(block, block.name);
+                Rx.getController(block.autorender).configure({
+                    order: block.level,
+                    monitor: (_a = block.options) === null || _a === void 0 ? void 0 : _a.monitor,
+                    throttling: (_b = block.options) === null || _b === void 0 ? void 0 : _b.throttling,
+                    logging: (_c = block.options) === null || _c === void 0 ? void 0 : _c.logging,
                 });
             });
         }
-        (_a = factory.initialize) === null || _a === void 0 ? void 0 : _a.call(factory, node, undefined);
-        (_b = factory.arrange) === null || _b === void 0 ? void 0 : _b.call(factory, node, strict);
+        (_a = factory.initialize) === null || _a === void 0 ? void 0 : _a.call(factory, block, undefined);
+        (_b = factory.layout) === null || _b === void 0 ? void 0 : _b.call(factory, block, strict);
     }
     else if (moved)
-        (_c = factory.arrange) === null || _c === void 0 ? void 0 : _c.call(factory, node, strict);
+        (_c = factory.layout) === null || _c === void 0 ? void 0 : _c.call(factory, block, strict);
 }
 function runRender(item) {
-    const node = item.self;
-    if (node.stamp >= 0) {
+    const block = item.self;
+    if (block.stamp >= 0) {
         runUnder(item, () => {
             let result = undefined;
             try {
-                node.stamp++;
-                node.children.beginMerge();
-                result = node.factory.render(node);
+                block.stamp++;
+                block.children.beginMerge();
+                result = block.factory.render(block);
                 if (result instanceof Promise)
                     result.then(v => { runRenderChildrenThenDo(undefined, NOP); return v; }, e => { console.log(e); runRenderChildrenThenDo(e !== null && e !== void 0 ? e : new Error('unknown error'), NOP); });
                 else
@@ -298,18 +303,18 @@ function runRender(item) {
             }
             catch (e) {
                 runRenderChildrenThenDo(e, NOP);
-                console.log(`Rendering failed: ${node.name}`);
+                console.log(`Rendering failed: ${block.name}`);
                 console.log(`${e}`);
             }
         });
     }
 }
 function runFinalize(item, isLeader) {
-    const node = item.self;
-    if (node.stamp >= 0) {
-        node.stamp = ~node.stamp;
-        const childrenAreLeaders = node.factory.finalize(node, isLeader);
-        if (!node.inline) {
+    const block = item.self;
+    if (block.stamp >= 0) {
+        block.stamp = ~block.stamp;
+        const childrenAreLeaders = block.factory.finalize(block, isLeader);
+        if (!block.inline) {
             item.aux = undefined;
             const last = gLastToDispose;
             if (last)
@@ -321,9 +326,9 @@ function runFinalize(item, isLeader) {
                     void runDisposalLoop().then(NOP, error => console.log(error));
                 });
         }
-        for (const item of node.children.items())
+        for (const item of block.children.items())
             runFinalize(item, childrenAreLeaders);
-        RxNodeImpl.grandCount--;
+        VerstakBlock.grandCount--;
     }
 }
 function runDisposalLoop() {
@@ -335,16 +340,16 @@ function runDisposalLoop() {
                 yield Transaction.requestNextFrame();
             Rx.dispose(item.self);
             item = item.aux;
-            RxNodeImpl.disposableCount--;
+            VerstakBlock.disposableCount--;
         }
         gFirstToDispose = gLastToDispose = undefined;
     });
 }
 function forEachChildRecursively(item, action) {
-    const node = item.self;
-    const e = node.element;
-    e && action(e);
-    for (const item of node.children.items())
+    const block = item.self;
+    const impl = block.impl;
+    impl && action(impl);
+    for (const item of block.children.items())
         forEachChildRecursively(item, action);
 }
 function wrap(func) {
@@ -382,7 +387,7 @@ function triggersAreEqual(a1, a2) {
     }
     return result;
 }
-function push(array, item) {
+function push(item, array) {
     if (array == undefined)
         array = new Array();
     array.push(item);
@@ -413,7 +418,7 @@ function defaultReject(error) {
     throw error;
 }
 Promise.prototype.then = reactronicDomHookedThen;
-const gSysRoot = Collection.createItem(new RxNodeImpl('SYSTEM', new StaticNodeFactory('SYSTEM', false, null), false, { level: 0 }, undefined, NOP));
+const gSysRoot = Collection.createItem(new VerstakBlock('SYSTEM', new StaticBlockFactory('SYSTEM', false, null), false, { level: 0 }, undefined, NOP));
 gSysRoot.self.item = gSysRoot;
 Object.defineProperty(gSysRoot, 'parent', {
     value: gSysRoot,

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

@@ -1,4 +1,3 @@
-import { Monitor, LoggingOptions } from 'reactronic';
-import { RxNode, Render, NodeFactory, Priority } from './RxNode';
-export declare function Reaction<E = undefined, M = unknown, R = void>(name: string, triggers: unknown, renderer: Render<E, M, R>, priority?: Priority, monitor?: Monitor, throttling?: number, logging?: Partial<LoggingOptions>, factory?: NodeFactory<E>): RxNode<E, M, R>;
-export declare function Inline<E = undefined, M = unknown, R = void>(name: string, renderer: Render<E, M, R>, priority?: Priority, factory?: NodeFactory<E>): RxNode<E, M, R>;
+import { Block, Render, BlockFactory, BlockOptions } from './Block';
+export declare function Reaction<T = undefined, M = unknown, P = void, R = void>(name: string, options: BlockOptions<P> | undefined, renderer: Render<T, M, P, R>, factory?: BlockFactory<T>): Block<T, M, P, R>;
+export declare function Inline<T = undefined, M = unknown, P = void, R = void>(name: string, options: BlockOptions<P> | undefined, renderer: Render<T, M, P, R>, factory?: BlockFactory<T>): Block<T, M, P, R>;

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

@@ -1,7 +1,7 @@
-import { RxNode } from './RxNode';
-export function Reaction(name, triggers, renderer, priority, monitor, throttling, logging, factory) {
-    return RxNode.claim(name, triggers, false, renderer, priority, monitor, throttling, logging, factory);
+import { Block } from './Block';
+export function Reaction(name, options, renderer, factory) {
+    return Block.claim(name, false, options, renderer, factory);
 }
-export function Inline(name, renderer, priority, factory) {
-    return RxNode.claim(name, undefined, true, renderer, priority, undefined, undefined, undefined, factory);
+export function Inline(name, options, renderer, factory) {
+    return Block.claim(name, true, options, renderer, factory);
 }

package/build/dist/source/core/Layout.d.ts

@@ -0,0 +1,27 @@
+export interface Place {
+    lineBegin?: boolean;
+    area?: string;
+    columns?: number;
+    rows?: number;
+    cursorRight?: boolean;
+    cursorDown?: boolean;
+}
+export interface CellRange {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+export declare class Layout {
+    private maxColumnCount;
+    private maxRowCount;
+    private actualColumnCount;
+    private actualRowCount;
+    private columnCursor;
+    private rowCursor;
+    private newRowCursor;
+    reset(maxColumnCount: number, maxRowCount: number): void;
+    claim(p: Place, result: CellRange): CellRange;
+    static parseCellRange(text: string, result: CellRange): CellRange;
+    static emitCellRange(value: CellRange): string;
+}