vasille 3.0.2 → 3.1.0

package/lib/node/node.js

@@ -1,25 +1,18 @@
-import { Reactive } from "../core/core";
-import { IValue } from "../core/ivalue";
-import { Reference } from "../value/reference";
-import { Expression } from "../value/expression";
-import { AttributeBinding } from "../binding/attribute";
-import { StaticClassBinding, DynamicalClassBinding } from "../binding/class";
-import { stringifyStyleValue, StyleBinding } from "../binding/style";
-import { internalError, userError } from "../core/errors";
-import { config } from "../core/config";
+import { Reactive } from "../core/core.js";
+import { IValue } from "../core/ivalue.js";
+import { SetModel } from "../models/set-model.js";
+import { Reference } from "../value/reference.js";
+import { userError } from "../core/errors.js";
 /**
  * This class is symbolic
  * @extends Reactive
  */
 export class Root extends Reactive {
-    constructor() {
-        super(...arguments);
-        /**
-         * The children list
-         * @type Array
-         */
-        this.children = new Set();
+    constructor(input, runner) {
+        super(input);
         this.lastChild = undefined;
+        this.runner = runner;
+        this.children = runner.debugUi ? new SetModel() : new Set();
     }
     /**
      * Pushes a node to children immediately
@@ -38,9 +31,12 @@ export class Root extends Reactive {
      */
     findFirstChild() {
         let first;
-        this.children.forEach(child => {
-            first = first || child.findFirstChild();
-        });
+        for (const child of this.children) {
+            first = child.findFirstChild();
+            if (first) {
+                break;
+            }
+        }
         return first;
     }
     /**
@@ -49,16 +45,14 @@ export class Root extends Reactive {
      * @param cb {function (TextNode)} Callback if previous is slot name
      */
     text(text) {
-        const node = new TextNode({ text });
+        const node = this.runner.textNode(text);
         this.pushNode(node);
         node.compose();
     }
     debug(text) {
-        if (config.debugUi) {
-            const node = new DebugNode({ text });
-            this.pushNode(node);
-            node.compose();
-        }
+        const node = this.runner.debugNode(text);
+        this.pushNode(node);
+        node.compose();
     }
     /**
      * Defines a tag element
@@ -67,8 +61,7 @@ export class Root extends Reactive {
      * @param cb {function(Tag, *)} callback
      */
     tag(tagName, input, cb) {
-        const tag = new Tag(input, tagName);
-        input.slot = cb || input.slot;
+        const tag = this.runner.tag(tagName, input, cb);
         this.pushNode(tag);
         tag.compose();
     }
@@ -80,7 +73,7 @@ export class Root extends Reactive {
     create(node, callback) {
         this.pushNode(node);
         node.compose();
-        callback === null || callback === void 0 ? void 0 : callback(node);
+        callback?.(node);
     }
     /**
      * Defines an if node
@@ -89,7 +82,7 @@ export class Root extends Reactive {
      * @return {this}
      */
     if(cond, cb) {
-        const node = new SwitchedNode();
+        const node = new SwitchedNode(this.runner);
         this.pushNode(node);
         node.addCase(this.case(cond, cb));
     }
@@ -133,8 +126,8 @@ export class Root extends Reactive {
     }
 }
 export class Fragment extends Root {
-    constructor(input, name) {
-        super(input);
+    constructor(input, runner, name) {
+        super(input, runner);
         this.name = name;
     }
     /**
@@ -150,7 +143,7 @@ export class Fragment extends Root {
         super.pushNode(node);
     }
     /**
-     * Append a node to end of element
+     * Append a node to the end of element
      * @param node {Node} node to insert
      */
     appendNode(node) {
@@ -168,10 +161,7 @@ export class Fragment extends Root {
     insertAdjacent(node) {
         const child = this.findFirstChild();
         if (child) {
-            const parent = child.parentElement;
-            if (parent) {
-                child.parentElement.insertBefore(node, child);
-            }
+            this.runner.insertBefore(node, child);
         }
         else if (this.next) {
             this.next.insertAdjacent(node);
@@ -204,6 +194,7 @@ export class Fragment extends Root {
         if (this.prev) {
             this.prev.next = this.next;
         }
+        this.parent.children.delete(this);
     }
     destroy() {
         if (this.parent.lastChild === this) {
@@ -219,26 +210,14 @@ const trueIValue = new Reference(true);
  * @extends Fragment
  */
 export class TextNode extends Fragment {
-    constructor(input) {
-        super(input, ":text");
+    constructor(input, runner) {
+        super(input, runner, ":text");
     }
-    compose() {
-        var _a, _b;
+    destroy() {
         const text = this.input.text;
-        this.node = document.createTextNode((_b = (_a = (text instanceof IValue ? text.$ : text)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "");
-        if (text instanceof IValue) {
-            this.register(new Expression((v) => {
-                var _a;
-                this.node.replaceData(0, -1, (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : "");
-            }, text));
+        if (text instanceof IValue && this.handler) {
+            text.off(this.handler);
         }
-        this.parent.appendNode(this.node);
-    }
-    findFirstChild() {
-        return this.node;
-    }
-    destroy() {
-        this.node.remove();
         super.destroy();
     }
 }
@@ -248,220 +227,11 @@ export class TextNode extends Fragment {
  * @extends Fragment
  */
 export class INode extends Fragment {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines if node is unmounted
-         * @type {boolean}
-         */
-        this.unmounted = false;
-    }
     get element() {
         return this.node;
     }
-    /**
-     * Bind attribute value
-     * @param name {String} name of attribute
-     * @param value {IValue} value
-     */
-    attr(name, value) {
-        this.register(new AttributeBinding(this, name, value));
-    }
-    /**
-     * Set attribute value
-     * @param name {string} name of attribute
-     * @param value {string} value
-     */
-    setAttr(name, value) {
-        if (typeof value === "boolean") {
-            if (value) {
-                this.node.setAttribute(name, "");
-            }
-        }
-        else if (value !== null && value !== undefined) {
-            this.node.setAttribute(name, `${value}`);
-        }
-        return this;
-    }
-    /**
-     * Adds a CSS class
-     * @param cl {string} Class name
-     */
-    addClass(cl) {
-        this.node.classList.add(cl);
-    }
-    /**
-     * Adds some CSS classes
-     * @param cl {string} classes names
-     */
-    removeClass(cl) {
-        this.node.classList.remove(cl);
-    }
-    /**
-     * Bind a CSS class
-     * @param className {IValue}
-     */
-    bindClass(className) {
-        this.register(new DynamicalClassBinding(this, className));
-    }
-    /**
-     * Bind a floating class name
-     * @param cond {IValue} condition
-     * @param className {string} class name
-     */
-    floatingClass(cond, className) {
-        this.register(new StaticClassBinding(this, className, cond));
-    }
-    /**
-     * Defines a style attribute
-     * @param name {String} name of style attribute
-     * @param value {IValue} value
-     */
-    style(name, value) {
-        if (this.node instanceof HTMLElement) {
-            this.register(new StyleBinding(this, name, value));
-        }
-        else {
-            throw userError("style can be applied to HTML elements only", "non-html-element");
-        }
-    }
-    /**
-     * Sets a style property value
-     * @param prop {string} Property name
-     * @param value {string} Property value
-     */
-    setStyle(prop, value) {
-        if (this.node instanceof HTMLElement) {
-            this.node.style.setProperty(prop, stringifyStyleValue(value));
-        }
-        else {
-            throw userError("Style can be set for HTML elements only", "non-html-element");
-        }
-        return this;
-    }
-    /**
-     * Add a listener for an event
-     * @param name {string} Event name
-     * @param handler {function (Event)} Event handler
-     * @param options {Object | boolean} addEventListener options
-     */
-    listen(name, handler, options) {
-        this.node.addEventListener(name, handler, options);
-    }
     insertAdjacent(node) {
-        const parent = this.node.parentNode;
-        if (parent) {
-            parent.insertBefore(node, this.node);
-        }
-    }
-    /**
-     * A v-show & ngShow alternative
-     * @param cond {IValue} show condition
-     */
-    bindShow(cond) {
-        const node = this.node;
-        if (node instanceof HTMLElement) {
-            let lastDisplay = node.style.display;
-            const htmlNode = node;
-            this.register(new Expression(cond => {
-                if (cond) {
-                    if (htmlNode.style.display === "none") {
-                        htmlNode.style.display = lastDisplay;
-                    }
-                }
-                else {
-                    if (htmlNode.style.display !== "none") {
-                        lastDisplay = htmlNode.style.display;
-                        htmlNode.style.display = "none";
-                    }
-                }
-            }, cond));
-        }
-        else {
-            throw userError("the element must be a html element", "bind-show");
-        }
-    }
-    /**
-     * bind HTML
-     * @param value {IValue}
-     */
-    bindDomApi(name, value) {
-        const node = this.node;
-        if (node instanceof HTMLElement) {
-            node[name] = value.$;
-            this.watch((v) => {
-                node[name] = v;
-            }, value);
-        }
-        else {
-            throw userError("HTML can be bound for HTML nodes only", "dom-error");
-        }
-    }
-    applyAttrs(attrs) {
-        for (const name in attrs) {
-            const value = attrs[name];
-            if (value instanceof IValue) {
-                this.attr(name, value);
-            }
-            else {
-                this.setAttr(name, value);
-            }
-        }
-    }
-    applyStyle(style) {
-        for (const name in style) {
-            const value = style[name];
-            if (value instanceof IValue) {
-                this.style(name, value);
-            }
-            else {
-                this.setStyle(name, value);
-            }
-        }
-    }
-    applyBind(bind) {
-        const inode = this.node;
-        for (const k in bind) {
-            const value = bind[k];
-            if (!(value instanceof IValue)) {
-                inode[k] = value;
-                return;
-            }
-            this.bindDomApi(k, value);
-        }
-    }
-    applyOptions(options) {
-        options.attr && this.applyAttrs(options.attr);
-        options.class &&
-            options.class.forEach(item => {
-                if (item instanceof IValue) {
-                    this.bindClass(item);
-                }
-                else if (typeof item == "string") {
-                    this.addClass(item);
-                }
-                else {
-                    for (const name in item) {
-                        const value = item[name];
-                        if (value instanceof IValue) {
-                            this.floatingClass(value, name);
-                        }
-                        else if (value && name !== "$") {
-                            this.addClass(name);
-                        }
-                        else {
-                            this.removeClass(name);
-                        }
-                    }
-                }
-            });
-        options.style && this.applyStyle(options.style);
-        if (options.events) {
-            for (const name of Object.keys(options.events)) {
-                this.listen(name, options.events[name]);
-            }
-        }
-        options.bind && this.applyBind(options.bind);
+        this.runner.insertBefore(node, this.node);
     }
 }
 /**
@@ -470,88 +240,14 @@ export class INode extends Fragment {
  * @extends INode
  */
 export class Tag extends INode {
-    constructor(input, tagName) {
-        super(input, tagName);
-    }
-    compose() {
-        var _a, _b, _c, _d;
-        if (!this.name) {
-            throw internalError("wrong Tag constructor call");
-        }
-        const node = document.createElement(this.name);
-        this.node = node;
-        this.applyOptions(this.input);
-        this.parent.appendNode(node);
-        (_b = (_a = this.input).callback) === null || _b === void 0 ? void 0 : _b.call(_a, this.node);
-        (_d = (_c = this.input).slot) === null || _d === void 0 ? void 0 : _d.call(_c, this);
+    constructor(input, runner, tagName) {
+        super(input, runner, tagName);
     }
     findFirstChild() {
-        return this.unmounted ? undefined : this.node;
-    }
-    insertAdjacent(node) {
-        if (this.unmounted) {
-            if (this.next) {
-                this.next.insertAdjacent(node);
-            }
-            else {
-                this.parent.appendNode(node);
-            }
-        }
-        else {
-            super.insertAdjacent(node);
-        }
+        return this.node;
     }
     appendNode(node) {
-        this.node.appendChild(node);
-    }
-    extent(options) {
-        this.applyOptions(options);
-    }
-    /**
-     * Mount/Unmount a node
-     * @param cond {IValue} show condition
-     */
-    bindMount(cond) {
-        this.register(new Expression(cond => {
-            if (cond) {
-                if (this.unmounted) {
-                    this.insertAdjacent(this.node);
-                    this.unmounted = false;
-                }
-            }
-            else {
-                if (!this.unmounted) {
-                    this.node.remove();
-                    this.unmounted = true;
-                }
-            }
-        }, cond));
-    }
-    /**
-     * Runs GC
-     */
-    destroy() {
-        this.node.remove();
-        super.destroy();
-    }
-}
-/**
- * Represents a vasille extension node
- * @class Extension
- * @extends INode
- */
-export class Extension extends Fragment {
-    tag(tagName, input) {
-        var _a;
-        let parent = this.parent;
-        const target = tagName.toLowerCase();
-        while (parent instanceof Fragment && !(parent instanceof Tag)) {
-            parent = parent.parent;
-        }
-        if (parent instanceof Tag && parent.element.tagName.toLowerCase() === target) {
-            parent.extent(input);
-            (_a = input.slot) === null || _a === void 0 ? void 0 : _a.call(input, parent);
-        }
+        this.runner.appendChild(this.node, node);
     }
 }
 /**
@@ -561,8 +257,8 @@ export class SwitchedNode extends Fragment {
     /**
      * Constructs a switch node and define a sync function
      */
-    constructor() {
-        super({}, ":switch");
+    constructor(runner) {
+        super({}, runner, ":switch");
         /**
          * Array of possible cases
          * @type {Array<{cond : IValue<unknown>, cb : function(Fragment)}>}
@@ -602,7 +298,7 @@ export class SwitchedNode extends Fragment {
      * @param cb {function(Fragment)} Call-back
      */
     createChild(cb) {
-        const node = new Fragment({}, ":case");
+        const node = new Fragment({}, this.runner, ":case");
         node.parent = this;
         this.lastChild = node;
         this.children.add(node);
@@ -622,24 +318,13 @@ export class SwitchedNode extends Fragment {
  * @extends Fragment
  */
 export class DebugNode extends Fragment {
-    constructor(input) {
-        super(input, ":debug");
-    }
-    compose() {
-        var _a, _b;
-        const text = this.input.text;
-        this.node = document.createComment((_b = (_a = text.$) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "");
-        this.register(new Expression((v) => {
-            var _a;
-            this.node.replaceData(0, -1, (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : "");
-        }, text));
-        this.parent.appendNode(this.node);
+    constructor(input, runner) {
+        super(input, runner, ":debug");
     }
-    /**
-     * Runs garbage collector
-     */
     destroy() {
-        this.node.remove();
+        if (this.handler) {
+            this.input.text.off(this.handler);
+        }
         super.destroy();
     }
 }

package/lib/node/watch.js

@@ -1,22 +1,21 @@
-import { Fragment } from "./node";
+import { Fragment } from "./node.js";
 /**
  * Watch Node
  * @class Watch
  * @extends Fragment
  */
 export class Watch extends Fragment {
-    constructor(input) {
-        super(input, ":watch");
+    constructor(input, runner) {
+        super(input, runner, ":watch");
     }
     compose() {
         this.watch(value => {
-            var _a, _b;
             this.children.forEach(child => {
                 child.destroy();
             });
             this.children.clear();
             this.lastChild = undefined;
-            (_b = (_a = this.input).slot) === null || _b === void 0 ? void 0 : _b.call(_a, this, value);
-        }, this.input.model);
+            this.input.slot?.(this, value);
+        }, [this.input.model]);
     }
 }

package/lib/{binding → runner/web/binding}/attribute.js

@@ -1,4 +1,4 @@
-import { Binding } from "./binding";
+import { Binding } from "./binding.js";
 /**
  * Represents an Attribute binding description
  * @class AttributeBinding

package/lib/{binding → runner/web/binding}/binding.js

@@ -1,4 +1,4 @@
-import { Destroyable } from "../core/destroyable";
+import { Destroyable } from "../../../core/destroyable.js";
 /**
  * Describe a common binding logic
  * @class Binding

package/lib/{binding → runner/web/binding}/class.js

@@ -1,4 +1,4 @@
-import { Binding } from "./binding";
+import { Binding } from "./binding.js";
 function addClass(node, cl) {
     node.element.classList.add(cl);
 }

package/lib/{binding → runner/web/binding}/style.js

@@ -1,4 +1,4 @@
-import { Binding } from "./binding";
+import { Binding } from "./binding.js";
 export function stringifyStyleValue(value) {
     if (value instanceof Array) {
         return value.map(item => `${item}px`).join(" ");