vasille 1.2.9 → 2.0.0

package/lib/node/node.js

@@ -0,0 +1,1185 @@
+import { Reactive, ReactivePrivate } from "../core/core";
+import { IValue } from "../core/ivalue";
+import { Reference } from "../value/reference";
+import { Expression } from "../value/expression";
+import { AttributeBinding } from "../binding/attribute";
+import { ClassBinding } from "../binding/class";
+import { StyleBinding } from "../binding/style";
+import { internalError, userError } from "../core/errors";
+/**
+ * Represents a Vasille.js node
+ * @class FragmentPrivate
+ * @extends ReactivePrivate
+ */
+export class FragmentPrivate extends ReactivePrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    /**
+     * Pre-initializes the base of a fragment
+     * @param app {App} the app node
+     * @param parent {Fragment} the parent node
+     */
+    preinit(app, parent) {
+        this.app = app;
+        this.parent = parent;
+    }
+    /**
+     * Unlinks all bindings
+     */
+    $destroy() {
+        this.next = null;
+        this.prev = null;
+        super.$destroy();
+    }
+}
+/**
+ * This class is symbolic
+ * @extends Reactive
+ */
+export class Fragment extends Reactive {
+    /**
+     * Constructs a Vasille Node
+     * @param $ {FragmentPrivate}
+     */
+    constructor($) {
+        super();
+        /**
+         * The children list
+         * @type Array
+         */
+        this.$children = [];
+        this.$ = $ || new FragmentPrivate;
+    }
+    /**
+     * Gets the app of node
+     */
+    get app() {
+        return this.$.app;
+    }
+    /**
+     * Prepare to init fragment
+     * @param app {AppNode} app of node
+     * @param parent {Fragment} parent of node
+     * @param data {*} additional data
+     */
+    $preinit(app, parent, data) {
+        const $ = this.$;
+        $.preinit(app, parent);
+    }
+    /**
+     * Initialize node
+     */
+    $init() {
+        this.$createSignals();
+        this.$createWatchers();
+        this.$created();
+        this.$compose();
+        this.$mounted();
+        return this;
+    }
+    /** To be overloaded: created event handler */
+    $created() {
+        // empty
+    }
+    /** To be overloaded: mounted event handler */
+    $mounted() {
+        // empty
+    }
+    /** To be overloaded: ready event handler */
+    $ready() {
+        // empty
+    }
+    /** To be overloaded: signals creation milestone */
+    $createSignals() {
+        // empty
+    }
+    /** To be overloaded: watchers creation milestone */
+    $createWatchers() {
+        // empty
+    }
+    /** To be overloaded: DOM creation milestone */
+    $compose() {
+        // empty
+    }
+    /**
+     * Pushes a node to children immediately
+     * @param node {Fragment} A node to push
+     * @protected
+     */
+    $$pushNode(node) {
+        let lastChild = null;
+        if (this.$children.length) {
+            lastChild = this.$children[this.$children.length - 1];
+        }
+        if (lastChild) {
+            lastChild.$.next = node;
+        }
+        node.$.prev = lastChild;
+        node.$.parent = this;
+        this.$children.push(node);
+    }
+    /**
+     * Find first node in element if so exists
+     * @return {?Element}
+     * @protected
+     */
+    $$findFirstChild() {
+        let first;
+        this.$children.forEach(child => {
+            first = first || child.$$findFirstChild();
+        });
+        return first;
+    }
+    /**
+     * Append a node to end of element
+     * @param node {Node} node to insert
+     */
+    $$appendNode(node) {
+        const $ = this.$;
+        if ($.next) {
+            $.next.$$insertAdjacent(node);
+        }
+        else {
+            $.parent.$$appendNode(node);
+        }
+    }
+    /**
+     * Insert a node as a sibling of this
+     * @param node {Node} node to insert
+     */
+    $$insertAdjacent(node) {
+        const child = this.$$findFirstChild();
+        const $ = this.$;
+        if (child) {
+            $.app.$run.insertBefore(child, node);
+        }
+        else if ($.next) {
+            $.next.$$insertAdjacent(node);
+        }
+        else {
+            $.parent.$$appendNode(node);
+        }
+    }
+    /**
+     * Defines a text fragment
+     * @param text {String | IValue} A text fragment string
+     * @param cb {function (TextNode)} Callback if previous is slot name
+     */
+    $text(text, cb) {
+        const $ = this.$;
+        const node = new TextNode();
+        const textValue = text instanceof IValue ? text : this.$ref(text);
+        node.$preinit($.app, this, textValue);
+        this.$$pushNode(node);
+        if (cb) {
+            $.app.$run.callCallback(() => {
+                cb(node);
+            });
+        }
+        return this;
+    }
+    $debug(text) {
+        const node = new DebugNode();
+        node.$preinit(this.$.app, this, text);
+        this.$$pushNode(node);
+        return this;
+    }
+    $tag(tagName, cb) {
+        const $ = this.$;
+        const node = new Tag();
+        node.$preinit($.app, this, tagName);
+        node.$init();
+        this.$$pushNode(node);
+        $.app.$run.callCallback(() => {
+            if (cb) {
+                cb(node, node.node);
+            }
+            node.$ready();
+        });
+        return this;
+    }
+    /**
+     * Defines a custom element
+     * @param node {Fragment} vasille element to insert
+     * @param callback {function($ : *)}
+     */
+    $create(node, callback) {
+        const $ = this.$;
+        node.$.parent = this;
+        node.$preinit($.app, this);
+        if (callback) {
+            callback(node);
+        }
+        this.$$pushNode(node);
+        node.$init().$ready();
+        return this;
+    }
+    /**
+     * Defines an if node
+     * @param cond {IValue} condition
+     * @param cb {function(Fragment)} callback to run on true
+     * @return {this}
+     */
+    $if(cond, cb) {
+        return this.$switch({ cond, cb });
+    }
+    /**
+     * Defines a if-else node
+     * @param ifCond {IValue} `if` condition
+     * @param ifCb {function(Fragment)} Call-back to create `if` child nodes
+     * @param elseCb {function(Fragment)} Call-back to create `else` child nodes
+     */
+    $if_else(ifCond, ifCb, elseCb) {
+        return this.$switch({ cond: ifCond, cb: ifCb }, { cond: trueIValue, cb: elseCb });
+    }
+    /**
+     * Defines a switch nodes: Will break after first true condition
+     * @param cases {...{ cond : IValue, cb : function(Fragment) }} cases
+     * @return {INode}
+     */
+    $switch(...cases) {
+        const $ = this.$;
+        const node = new SwitchedNode();
+        node.$preinit($.app, this);
+        node.$init();
+        this.$$pushNode(node);
+        node.setCases(cases);
+        node.$ready();
+        return this;
+    }
+    /**
+     * Create a case for switch
+     * @param cond {IValue<boolean>}
+     * @param cb {function(Fragment) : void}
+     * @return {{cond : IValue, cb : (function(Fragment) : void)}}
+     */
+    $case(cond, cb) {
+        return { cond, cb };
+    }
+    /**
+     * @param cb {(function(Fragment) : void)}
+     * @return {{cond : IValue, cb : (function(Fragment) : void)}}
+     */
+    $default(cb) {
+        return { cond: trueIValue, cb };
+    }
+    $destroy() {
+        for (const child of this.$children) {
+            child.$destroy();
+        }
+        this.$children.splice(0);
+        super.$destroy();
+    }
+}
+const trueIValue = new Reference(true);
+/**
+ * The private part of a text node
+ * @class TextNodePrivate
+ * @extends FragmentPrivate
+ */
+export class TextNodePrivate extends FragmentPrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    /**
+     * Pre-initializes a text node
+     * @param app {AppNode} the app node
+     * @param text {IValue}
+     */
+    preinitText(app, parent, text) {
+        super.preinit(app, parent);
+        this.node = document.createTextNode(text.$);
+        this.bindings.add(new Expression((v) => {
+            this.node.replaceData(0, -1, v);
+        }, true, text));
+        this.parent.$$appendNode(this.node);
+    }
+    /**
+     * Clear node data
+     */
+    $destroy() {
+        super.$destroy();
+    }
+}
+/**
+ * Represents a text node
+ * @class TextNode
+ * @extends Fragment
+ */
+export class TextNode extends Fragment {
+    constructor() {
+        super();
+        this.$ = new TextNodePrivate();
+        this.$seal();
+    }
+    $preinit(app, parent, text) {
+        const $ = this.$;
+        if (!text) {
+            throw internalError('wrong TextNode::$preninit call');
+        }
+        $.preinitText(app, parent, text);
+    }
+    $$findFirstChild() {
+        return this.$.node;
+    }
+    $destroy() {
+        this.$.node.remove();
+        this.$.$destroy();
+        super.$destroy();
+    }
+}
+/**
+ * The private part of a base node
+ * @class INodePrivate
+ * @extends FragmentPrivate
+ */
+export class INodePrivate extends FragmentPrivate {
+    constructor() {
+        super();
+        /**
+         * Defines if node is unmounted
+         * @type {boolean}
+         */
+        this.unmounted = false;
+        this.$seal();
+    }
+    $destroy() {
+        super.$destroy();
+    }
+}
+/**
+ * Vasille node which can manipulate an element node
+ * @class INode
+ * @extends Fragment
+ */
+export class INode extends Fragment {
+    /**
+     * Constructs a base node
+     * @param $ {?INodePrivate}
+     */
+    constructor($) {
+        super($ || new INodePrivate);
+        this.$seal();
+    }
+    /**
+     * Get the bound node
+     */
+    get node() {
+        return this.$.node;
+    }
+    /**
+     * Initialize node
+     */
+    $init() {
+        this.$createSignals();
+        this.$createWatchers();
+        this.$createAttrs();
+        this.$createStyle();
+        this.$created();
+        this.$compose();
+        this.$mounted();
+        return this;
+    }
+    /** To be overloaded: attributes creation milestone */
+    $createAttrs() {
+        // empty
+    }
+    /** To be overloaded: $style attributes creation milestone */
+    $createStyle() {
+        // empty
+    }
+    /**
+     * Bind attribute value
+     * @param name {String} name of attribute
+     * @param value {IValue} value
+     */
+    $attr(name, value) {
+        const $ = this.$;
+        const attr = new AttributeBinding(this, name, value);
+        $.bindings.add(attr);
+        return this;
+    }
+    $bindAttr(name, calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+        const $ = this.$;
+        const expr = this.$bind(calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+        $.bindings.add(new AttributeBinding(this, name, expr));
+        return this;
+    }
+    /**
+     * Set attribute value
+     * @param name {string} name of attribute
+     * @param value {string} value
+     */
+    $setAttr(name, value) {
+        this.$.app.$run.setAttribute(this.$.node, name, value);
+        return this;
+    }
+    /**
+     * Adds a CSS class
+     * @param cl {string} Class name
+     */
+    $addClass(cl) {
+        this.$.app.$run.addClass(this.$.node, cl);
+        return this;
+    }
+    /**
+     * Adds some CSS classes
+     * @param cls {...string} classes names
+     */
+    $addClasses(...cls) {
+        cls.forEach(cl => {
+            this.$.app.$run.addClass(this.$.node, cl);
+        });
+        return this;
+    }
+    /**
+     * Bind a CSS class
+     * @param className {IValue}
+     */
+    $bindClass(className) {
+        const $ = this.$;
+        $.bindings.add(new ClassBinding(this, "", className));
+        return this;
+    }
+    /**
+     * Bind a floating class name
+     * @param cond {IValue} condition
+     * @param className {string} class name
+     */
+    $floatingClass(cond, className) {
+        this.$.bindings.add(new ClassBinding(this, className, cond));
+        return this;
+    }
+    /**
+     * Defines a style attribute
+     * @param name {String} name of style attribute
+     * @param value {IValue} value
+     */
+    $style(name, value) {
+        const $ = this.$;
+        if ($.node instanceof HTMLElement) {
+            $.bindings.add(new StyleBinding(this, name, value));
+        }
+        else {
+            throw userError('style can be applied to HTML elements only', 'non-html-element');
+        }
+        return this;
+    }
+    $bindStyle(name, calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+        const $ = this.$;
+        const expr = this.$bind(calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+        if ($.node instanceof HTMLElement) {
+            $.bindings.add(new StyleBinding(this, name, expr));
+        }
+        else {
+            throw userError('style can be applied to HTML elements only', 'non-html-element');
+        }
+        return this;
+    }
+    /**
+     * Sets a style property value
+     * @param prop {string} Property name
+     * @param value {string} Property value
+     */
+    $setStyle(prop, value) {
+        if (this.$.node instanceof HTMLElement) {
+            this.$.app.$run.setStyle(this.$.node, prop, value);
+        }
+        else {
+            throw userError("Style can be setted 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);
+        return this;
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $oncontextmenu(handler, options) {
+        return this.$listen("contextmenu", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onmousedown(handler, options) {
+        return this.$listen("mousedown", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onmouseenter(handler, options) {
+        return this.$listen("mouseenter", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onmouseleave(handler, options) {
+        return this.$listen("mouseleave", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onmousemove(handler, options) {
+        return this.$listen("mousemove", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onmouseout(handler, options) {
+        return this.$listen("mouseout", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onmouseover(handler, options) {
+        return this.$listen("mouseover", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onmouseup(handler, options) {
+        return this.$listen("mouseup", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $onclick(handler, options) {
+        return this.$listen("click", handler, options);
+    }
+    /**
+     * @param handler {function (MouseEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondblclick(handler, options) {
+        return this.$listen("dblclick", handler, options);
+    }
+    /**
+     * @param handler {function (FocusEvent)}
+     * @param options {Object | boolean}
+     */
+    $onblur(handler, options) {
+        return this.$listen("blur", handler, options);
+    }
+    /**
+     * @param handler {function (FocusEvent)}
+     * @param options {Object | boolean}
+     */
+    $onfocus(handler, options) {
+        return this.$listen("focus", handler, options);
+    }
+    /**
+     * @param handler {function (FocusEvent)}
+     * @param options {Object | boolean}
+     */
+    $onfocusin(handler, options) {
+        return this.$listen("focusin", handler, options);
+    }
+    /**
+     * @param handler {function (FocusEvent)}
+     * @param options {Object | boolean}
+     */
+    $onfocusout(handler, options) {
+        return this.$listen("focusout", handler, options);
+    }
+    /**
+     * @param handler {function (KeyboardEvent)}
+     * @param options {Object | boolean}
+     */
+    $onkeydown(handler, options) {
+        return this.$listen("keydown", handler, options);
+    }
+    /**
+     * @param handler {function (KeyboardEvent)}
+     * @param options {Object | boolean}
+     */
+    $onkeyup(handler, options) {
+        return this.$listen("keyup", handler, options);
+    }
+    /**
+     * @param handler {function (KeyboardEvent)}
+     * @param options {Object | boolean}
+     */
+    $onkeypress(handler, options) {
+        return this.$listen("keypress", handler, options);
+    }
+    /**
+     * @param handler {function (TouchEvent)}
+     * @param options {Object | boolean}
+     */
+    $ontouchstart(handler, options) {
+        return this.$listen("touchstart", handler, options);
+    }
+    /**
+     * @param handler {function (TouchEvent)}
+     * @param options {Object | boolean}
+     */
+    $ontouchmove(handler, options) {
+        return this.$listen("touchmove", handler, options);
+    }
+    /**
+     * @param handler {function (TouchEvent)}
+     * @param options {Object | boolean}
+     */
+    $ontouchend(handler, options) {
+        return this.$listen("touchend", handler, options);
+    }
+    /**
+     * @param handler {function (TouchEvent)}
+     * @param options {Object | boolean}
+     */
+    $ontouchcancel(handler, options) {
+        return this.$listen("touchcancel", handler, options);
+    }
+    /**
+     * @param handler {function (WheelEvent)}
+     * @param options {Object | boolean}
+     */
+    $onwheel(handler, options) {
+        return this.$listen("wheel", handler, options);
+    }
+    /**
+     * @param handler {function (ProgressEvent)}
+     * @param options {Object | boolean}
+     */
+    $onabort(handler, options) {
+        return this.$listen("abort", handler, options);
+    }
+    /**
+     * @param handler {function (ProgressEvent)}
+     * @param options {Object | boolean}
+     */
+    $onerror(handler, options) {
+        return this.$listen("error", handler, options);
+    }
+    /**
+     * @param handler {function (ProgressEvent)}
+     * @param options {Object | boolean}
+     */
+    $onload(handler, options) {
+        return this.$listen("load", handler, options);
+    }
+    /**
+     * @param handler {function (ProgressEvent)}
+     * @param options {Object | boolean}
+     */
+    $onloadend(handler, options) {
+        return this.$listen("loadend", handler, options);
+    }
+    /**
+     * @param handler {function (ProgressEvent)}
+     * @param options {Object | boolean}
+     */
+    $onloadstart(handler, options) {
+        return this.$listen("loadstart", handler, options);
+    }
+    /**
+     * @param handler {function (ProgressEvent)}
+     * @param options {Object | boolean}
+     */
+    $onprogress(handler, options) {
+        return this.$listen("progress", handler, options);
+    }
+    /**
+     * @param handler {function (ProgressEvent)}
+     * @param options {Object | boolean}
+     */
+    $ontimeout(handler, options) {
+        return this.$listen("timeout", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondrag(handler, options) {
+        return this.$listen("drag", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondragend(handler, options) {
+        return this.$listen("dragend", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondragenter(handler, options) {
+        return this.$listen("dragenter", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondragexit(handler, options) {
+        return this.$listen("dragexit", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondragleave(handler, options) {
+        return this.$listen("dragleave", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondragover(handler, options) {
+        return this.$listen("dragover", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondragstart(handler, options) {
+        return this.$listen("dragstart", handler, options);
+    }
+    /**
+     * @param handler {function (DragEvent)}
+     * @param options {Object | boolean}
+     */
+    $ondrop(handler, options) {
+        return this.$listen("drop", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointerover(handler, options) {
+        return this.$listen("pointerover", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointerenter(handler, options) {
+        return this.$listen("pointerenter", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointerdown(handler, options) {
+        return this.$listen("pointerdown", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointermove(handler, options) {
+        return this.$listen("pointermove", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointerup(handler, options) {
+        return this.$listen("pointerup", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointercancel(handler, options) {
+        return this.$listen("pointercancel", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointerout(handler, options) {
+        return this.$listen("pointerout", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpointerleave(handler, options) {
+        return this.$listen("pointerleave", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $ongotpointercapture(handler, options) {
+        return this.$listen("gotpointercapture", handler, options);
+    }
+    /**
+     * @param handler {function (PointerEvent)}
+     * @param options {Object | boolean}
+     */
+    $onlostpointercapture(handler, options) {
+        return this.$listen("lostpointercapture", handler, options);
+    }
+    /**
+     * @param handler {function (AnimationEvent)}
+     * @param options {Object | boolean}
+     */
+    $onanimationstart(handler, options) {
+        return this.$listen("animationstart", handler, options);
+    }
+    /**
+     * @param handler {function (AnimationEvent)}
+     * @param options {Object | boolean}
+     */
+    $onanimationend(handler, options) {
+        return this.$listen("animationend", handler, options);
+    }
+    /**
+     * @param handler {function (AnimationEvent)}
+     * @param options {Object | boolean}
+     */
+    $onanimationiteraton(handler, options) {
+        return this.$listen("animationiteration", handler, options);
+    }
+    /**
+     * @param handler {function (ClipboardEvent)}
+     * @param options {Object | boolean}
+     */
+    $onclipboardchange(handler, options) {
+        return this.$listen("clipboardchange", handler, options);
+    }
+    /**
+     * @param handler {function (ClipboardEvent)}
+     * @param options {Object | boolean}
+     */
+    $oncut(handler, options) {
+        return this.$listen("cut", handler, options);
+    }
+    /**
+     * @param handler {function (ClipboardEvent)}
+     * @param options {Object | boolean}
+     */
+    $oncopy(handler, options) {
+        return this.$listen("copy", handler, options);
+    }
+    /**
+     * @param handler {function (ClipboardEvent)}
+     * @param options {Object | boolean}
+     */
+    $onpaste(handler, options) {
+        return this.$listen("paste", handler, options);
+    }
+    $$insertAdjacent(node) {
+        const $ = this.$;
+        $.app.$run.insertBefore($.node, node);
+    }
+    /**
+     * A v-show & ngShow alternative
+     * @param cond {IValue} show condition
+     */
+    $bindShow(cond) {
+        const $ = this.$;
+        const node = $.node;
+        if (node instanceof HTMLElement) {
+            let lastDisplay = node.style.display;
+            const htmlNode = node;
+            return this.$bindAlive(cond, () => {
+                lastDisplay = htmlNode.style.display;
+                htmlNode.style.display = 'none';
+            }, () => {
+                htmlNode.style.display = lastDisplay;
+            });
+        }
+        else {
+            throw userError('the element must be a html element', 'bind-show');
+        }
+    }
+    /**
+     * bind HTML
+     * @param value {IValue}
+     */
+    $html(value) {
+        const $ = this.$;
+        const node = $.node;
+        if (node instanceof HTMLElement) {
+            node.innerHTML = value.$;
+            this.$watch((v) => {
+                node.innerHTML = v;
+            }, value);
+        }
+        else {
+            throw userError("HTML can be bound for HTML nodes only", "dom-error");
+        }
+    }
+}
+/**
+ * Represents an Vasille.js HTML element node
+ * @class Tag
+ * @extends INode
+ */
+export class Tag extends INode {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    $preinit(app, parent, tagName) {
+        if (!tagName || typeof tagName !== "string") {
+            throw internalError('wrong Tag::$preinit call');
+        }
+        const node = document.createElement(tagName);
+        const $ = this.$;
+        $.preinit(app, parent);
+        $.node = node;
+        $.parent.$$appendNode(node);
+    }
+    $$findFirstChild() {
+        return this.$.unmounted ? null : this.$.node;
+    }
+    $$appendNode(node) {
+        const $ = this.$;
+        $.app.$run.appendChild($.node, node);
+    }
+    /**
+     * Mount/Unmount a node
+     * @param cond {IValue} show condition
+     */
+    $bindMount(cond) {
+        const $ = this.$;
+        return this.$bindAlive(cond, () => {
+            $.node.remove();
+            $.unmounted = true;
+        }, () => {
+            if (!$.unmounted)
+                return;
+            if ($.next) {
+                $.next.$$insertAdjacent($.node);
+            }
+            else {
+                $.parent.$$appendNode($.node);
+            }
+            $.unmounted = false;
+        });
+    }
+    /**
+     * Runs GC
+     */
+    $destroy() {
+        this.node.remove();
+        super.$destroy();
+    }
+}
+/**
+ * Represents a vasille extension node
+ * @class Extension
+ * @extends INode
+ */
+export class Extension extends INode {
+    $preinit(app, parent) {
+        if (parent instanceof INode) {
+            const $ = this.$;
+            $.preinit(app, parent);
+            $.node = parent.node;
+        }
+        else {
+            throw internalError("A extension node can be encapsulated only in a tag/extension/component");
+        }
+    }
+    constructor($) {
+        super($);
+        this.$seal();
+    }
+    $destroy() {
+        super.$destroy();
+    }
+}
+/**
+ * Node which cas has just a child
+ * @class Component
+ * @extends Extension
+ */
+export class Component extends Extension {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    $mounted() {
+        super.$mounted();
+        if (this.$children.length !== 1) {
+            throw userError("UserNode must have a child only", "dom-error");
+        }
+        const child = this.$children[0];
+        if (child instanceof Tag || child instanceof Component) {
+            const $ = this.$;
+            $.node = child.node;
+        }
+        else {
+            throw userError("UserNode child must be Tag or Component", "dom-error");
+        }
+    }
+}
+/**
+ * Private part of switch node
+ * @class SwitchedNodePrivate
+ * @extends INodePrivate
+ */
+export class SwitchedNodePrivate extends INodePrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    /**
+     * Runs GC
+     */
+    $destroy() {
+        this.cases.forEach(c => {
+            delete c.cond;
+            delete c.cb;
+        });
+        this.cases.splice(0);
+        super.$destroy();
+    }
+}
+/**
+ * Defines a node witch can switch its children conditionally
+ */
+class SwitchedNode extends Extension {
+    /**
+     * Constructs a switch node and define a sync function
+     */
+    constructor() {
+        super(new SwitchedNodePrivate);
+        this.$.sync = () => {
+            const $ = this.$;
+            let i = 0;
+            for (; i < $.cases.length; i++) {
+                if ($.cases[i].cond.$) {
+                    break;
+                }
+            }
+            if (i === $.index) {
+                return;
+            }
+            if ($.fragment) {
+                $.fragment.$destroy();
+                this.$children.splice(0);
+                $.fragment = null;
+            }
+            if (i !== $.cases.length) {
+                $.index = i;
+                this.createChild($.cases[i].cb);
+            }
+            else {
+                $.index = -1;
+            }
+        };
+        this.$seal();
+    }
+    /**
+     * Set up switch cases
+     * @param cases {{ cond : IValue, cb : function(Fragment) }}
+     */
+    setCases(cases) {
+        const $ = this.$;
+        $.cases = [...cases];
+    }
+    /**
+     * Creates a child node
+     * @param cb {function(Fragment)} Call-back
+     */
+    createChild(cb) {
+        const node = new Fragment();
+        node.$preinit(this.$.app, this);
+        node.$init();
+        node.$ready();
+        this.$.fragment = node;
+        this.$children.push(node);
+        cb(node);
+    }
+    $ready() {
+        const $ = this.$;
+        super.$ready();
+        $.cases.forEach(c => {
+            c.cond.on($.sync);
+        });
+        $.sync();
+    }
+    $destroy() {
+        const $ = this.$;
+        $.cases.forEach(c => {
+            c.cond.off($.sync);
+        });
+        super.$destroy();
+    }
+}
+/**
+ * The private part of a text node
+ */
+export class DebugPrivate extends FragmentPrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    /**
+     * Pre-initializes a text node
+     * @param app {App} the app node
+     * @param parent {Fragment} parent node
+     * @param text {String | IValue}
+     */
+    preinitComment(app, parent, text) {
+        super.preinit(app, parent);
+        this.node = document.createComment(text.$);
+        this.bindings.add(new Expression((v) => {
+            this.node.replaceData(0, -1, v);
+        }, true, text));
+        this.parent.$$appendNode(this.node);
+    }
+    /**
+     * Clear node data
+     */
+    $destroy() {
+        this.node.remove();
+        super.$destroy();
+    }
+}
+/**
+ * Represents a debug node
+ * @class DebugNode
+ * @extends Fragment
+ */
+export class DebugNode extends Fragment {
+    constructor() {
+        super();
+        /**
+         * private data
+         * @type {DebugNode}
+         */
+        this.$ = new DebugPrivate();
+        this.$seal();
+    }
+    $preinit(app, parent, text) {
+        const $ = this.$;
+        if (!text) {
+            throw internalError('wrong DebugNode::$preninit call');
+        }
+        $.preinitComment(app, parent, text);
+    }
+    /**
+     * Runs garbage collector
+     */
+    $destroy() {
+        this.$.$destroy();
+        super.$destroy();
+    }
+}