vasille 2.0.3 → 2.2.0

package/lib/node/node.js

@@ -3,7 +3,7 @@ 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 { StaticClassBinding, DynamicalClassBinding } from "../binding/class";
 import { StyleBinding } from "../binding/style";
 import { internalError, userError } from "../core/errors";
 /**
@@ -14,7 +14,7 @@ import { internalError, userError } from "../core/errors";
 export class FragmentPrivate extends ReactivePrivate {
     constructor() {
         super();
-        this.$seal();
+        this.seal();
     }
     /**
      * Pre-initializes the base of a fragment
@@ -28,10 +28,10 @@ export class FragmentPrivate extends ReactivePrivate {
     /**
      * Unlinks all bindings
      */
-    $destroy() {
+    destroy() {
         this.next = null;
         this.prev = null;
-        super.$destroy();
+        super.destroy();
     }
 }
 /**
@@ -41,16 +41,17 @@ export class FragmentPrivate extends ReactivePrivate {
 export class Fragment extends Reactive {
     /**
      * Constructs a Vasille Node
+     * @param input
      * @param $ {FragmentPrivate}
      */
-    constructor($) {
-        super();
+    constructor(input, $) {
+        super(input, $ || new FragmentPrivate);
         /**
          * The children list
          * @type Array
          */
-        this.$children = [];
-        this.$ = $ || new FragmentPrivate;
+        this.children = new Set;
+        this.lastChild = null;
     }
     /**
      * Gets the app of node
@@ -64,43 +65,16 @@ export class Fragment extends Reactive {
      * @param parent {Fragment} parent of node
      * @param data {*} additional data
      */
-    $preinit(app, parent, 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
+    compose(input) {
+        super.compose(input);
+        input.slot && input.slot(this);
     }
     /** 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() {
+    ready() {
         // empty
     }
     /**
@@ -108,27 +82,23 @@ export class Fragment extends Reactive {
      * @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;
+    pushNode(node) {
+        if (this.lastChild) {
+            this.lastChild.$.next = node;
         }
-        node.$.prev = lastChild;
-        node.$.parent = this;
-        this.$children.push(node);
+        node.$.prev = this.lastChild;
+        this.lastChild = node;
+        this.children.add(node);
     }
     /**
      * Find first node in element if so exists
      * @return {?Element}
      * @protected
      */
-    $$findFirstChild() {
+    findFirstChild() {
         let first;
-        this.$children.forEach(child => {
-            first = first || child.$$findFirstChild();
+        this.children.forEach(child => {
+            first = first || child.findFirstChild();
         });
         return first;
     }
@@ -136,30 +106,30 @@ export class Fragment extends Reactive {
      * Append a node to end of element
      * @param node {Node} node to insert
      */
-    $$appendNode(node) {
+    appendNode(node) {
         const $ = this.$;
         if ($.next) {
-            $.next.$$insertAdjacent(node);
+            $.next.insertAdjacent(node);
         }
         else {
-            $.parent.$$appendNode(node);
+            $.parent.appendNode(node);
         }
     }
     /**
      * Insert a node as a sibling of this
      * @param node {Node} node to insert
      */
-    $$insertAdjacent(node) {
-        const child = this.$$findFirstChild();
+    insertAdjacent(node) {
+        const child = this.findFirstChild();
         const $ = this.$;
         if (child) {
-            $.app.$run.insertBefore(child, node);
+            child.parentElement.insertBefore(node, child);
         }
         else if ($.next) {
-            $.next.$$insertAdjacent(node);
+            $.next.insertAdjacent(node);
         }
         else {
-            $.parent.$$appendNode(node);
+            $.parent.appendNode(node);
         }
     }
     /**
@@ -167,60 +137,49 @@ export class Fragment extends Reactive {
      * @param text {String | IValue} A text fragment string
      * @param cb {function (TextNode)} Callback if previous is slot name
      */
-    $text(text, cb) {
+    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;
+        node.preinit($.app, this, text);
+        this.pushNode(node);
+        cb && cb(node);
     }
-    $debug(text) {
-        if (this.$.app.$debugUi) {
+    debug(text) {
+        if (this.$.app.debugUi) {
             const node = new DebugNode();
-            node.$preinit(this.$.app, this, text);
-            this.$$pushNode(node);
+            node.preinit(this.$.app, this, text);
+            this.pushNode(node);
         }
-        return this;
     }
-    $tag(tagName, cb) {
+    /**
+     * Defines a tag element
+     * @param tagName {String} the tag name
+     * @param input
+     * @param cb {function(Tag, *)} callback
+     */
+    tag(tagName, input, 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;
+        const node = new Tag(input);
+        input.slot = cb || input.slot;
+        node.preinit($.app, this, tagName);
+        node.init();
+        this.pushNode(node);
+        node.ready();
+        return node.node;
     }
     /**
      * Defines a custom element
      * @param node {Fragment} vasille element to insert
      * @param callback {function($ : *)}
-     * @param callback1 {function($ : *)}
      */
-    $create(node, callback, callback1) {
+    create(node, callback) {
         const $ = this.$;
         node.$.parent = this;
-        node.$preinit($.app, this);
-        if (callback) {
-            callback(node);
-        }
-        if (callback1) {
-            callback1(node);
-        }
-        this.$$pushNode(node);
-        node.$init().$ready();
-        return this;
+        node.preinit($.app, this);
+        node.input.slot = callback || node.input.slot;
+        this.pushNode(node);
+        node.init();
+        node.ready();
     }
     /**
      * Defines an if node
@@ -228,32 +187,29 @@ export class Fragment extends Reactive {
      * @param cb {function(Fragment)} callback to run on true
      * @return {this}
      */
-    $if(cond, cb) {
-        return this.$switch({ cond, cb });
+    if(cond, cb) {
+        const node = new SwitchedNode();
+        node.preinit(this.$.app, this);
+        node.init();
+        this.pushNode(node);
+        node.addCase(this.case(cond, cb));
+        node.ready();
     }
-    /**
-     * 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 });
+    else(cb) {
+        if (this.lastChild instanceof SwitchedNode) {
+            this.lastChild.addCase(this.default(cb));
+        }
+        else {
+            throw userError('wrong `else` function use', 'logic-error');
+        }
     }
-    /**
-     * 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;
+    elif(cond, cb) {
+        if (this.lastChild instanceof SwitchedNode) {
+            this.lastChild.addCase(this.case(cond, cb));
+        }
+        else {
+            throw userError('wrong `elif` function use', 'logic-error');
+        }
     }
     /**
      * Create a case for switch
@@ -261,22 +217,48 @@ export class Fragment extends Reactive {
      * @param cb {function(Fragment) : void}
      * @return {{cond : IValue, cb : (function(Fragment) : void)}}
      */
-    $case(cond, cb) {
+    case(cond, cb) {
         return { cond, cb };
     }
     /**
      * @param cb {(function(Fragment) : void)}
      * @return {{cond : IValue, cb : (function(Fragment) : void)}}
      */
-    $default(cb) {
+    default(cb) {
         return { cond: trueIValue, cb };
     }
-    $destroy() {
-        for (const child of this.$children) {
-            child.$destroy();
+    insertBefore(node) {
+        const $ = this.$;
+        node.$.prev = $.prev;
+        node.$.next = this;
+        if ($.prev) {
+            $.prev.$.next = node;
         }
-        this.$children.splice(0);
-        super.$destroy();
+        $.prev = node;
+    }
+    insertAfter(node) {
+        const $ = this.$;
+        node.$.prev = this;
+        node.$.next = $.next;
+        $.next = node;
+    }
+    remove() {
+        const $ = this.$;
+        if ($.next) {
+            $.next.$.prev = $.prev;
+        }
+        if ($.prev) {
+            $.prev.$.next = $.next;
+        }
+    }
+    destroy() {
+        this.children.forEach(child => child.destroy());
+        this.children.clear();
+        this.lastChild = null;
+        if (this.$.parent.lastChild === this) {
+            this.$.parent.lastChild = this.$.prev;
+        }
+        super.destroy();
     }
 }
 const trueIValue = new Reference(true);
@@ -288,26 +270,28 @@ const trueIValue = new Reference(true);
 export class TextNodePrivate extends FragmentPrivate {
     constructor() {
         super();
-        this.$seal();
+        this.seal();
     }
     /**
      * Pre-initializes a text node
      * @param app {AppNode} the app node
+     * @param parent
      * @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);
+        this.node = document.createTextNode(text instanceof IValue ? text.$ : text);
+        if (text instanceof IValue) {
+            this.bindings.add(new Expression((v) => {
+                this.node.replaceData(0, -1, v);
+            }, true, text));
+        }
     }
     /**
      * Clear node data
      */
-    $destroy() {
-        super.$destroy();
+    destroy() {
+        super.destroy();
     }
 }
 /**
@@ -316,25 +300,25 @@ export class TextNodePrivate extends FragmentPrivate {
  * @extends Fragment
  */
 export class TextNode extends Fragment {
-    constructor() {
-        super();
-        this.$ = new TextNodePrivate();
-        this.$seal();
+    constructor($ = new TextNodePrivate()) {
+        super({}, $);
+        this.seal();
     }
-    $preinit(app, parent, text) {
+    preinit(app, parent, text) {
         const $ = this.$;
         if (!text) {
             throw internalError('wrong TextNode::$preninit call');
         }
         $.preinitText(app, parent, text);
+        $.parent.appendNode($.node);
     }
-    $$findFirstChild() {
+    findFirstChild() {
         return this.$.node;
     }
-    $destroy() {
+    destroy() {
         this.$.node.remove();
-        this.$.$destroy();
-        super.$destroy();
+        this.$.destroy();
+        super.destroy();
     }
 }
 /**
@@ -350,10 +334,10 @@ export class INodePrivate extends FragmentPrivate {
          * @type {boolean}
          */
         this.unmounted = false;
-        this.$seal();
+        this.seal();
     }
-    $destroy() {
-        super.$destroy();
+    destroy() {
+        super.destroy();
     }
 }
 /**
@@ -364,11 +348,12 @@ export class INodePrivate extends FragmentPrivate {
 export class INode extends Fragment {
     /**
      * Constructs a base node
+     * @param input
      * @param $ {?INodePrivate}
      */
-    constructor($) {
-        super($ || new INodePrivate);
-        this.$seal();
+    constructor(input, $) {
+        super(input, $ || new INodePrivate);
+        this.seal();
     }
     /**
      * Get the bound node
@@ -376,78 +361,55 @@ export class INode extends Fragment {
     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) {
+    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);
+    setAttr(name, value) {
+        if (typeof value === 'boolean') {
+            if (value) {
+                this.$.node.setAttribute(name, "");
+            }
+        }
+        else {
+            this.$.node.setAttribute(name, `${value}`);
+        }
         return this;
     }
     /**
      * Adds a CSS class
      * @param cl {string} Class name
      */
-    $addClass(cl) {
-        this.$.app.$run.addClass(this.$.node, cl);
+    addClass(cl) {
+        this.$.node.classList.add(cl);
         return this;
     }
     /**
      * Adds some CSS classes
      * @param cls {...string} classes names
      */
-    $addClasses(...cls) {
-        cls.forEach(cl => {
-            this.$.app.$run.addClass(this.$.node, cl);
-        });
+    removeClasse(cl) {
+        this.$.node.classList.remove(cl);
         return this;
     }
     /**
      * Bind a CSS class
      * @param className {IValue}
      */
-    $bindClass(className) {
+    bindClass(className) {
         const $ = this.$;
-        $.bindings.add(new ClassBinding(this, "", className));
+        $.bindings.add(new DynamicalClassBinding(this, className));
         return this;
     }
     /**
@@ -455,8 +417,8 @@ export class INode extends Fragment {
      * @param cond {IValue} condition
      * @param className {string} class name
      */
-    $floatingClass(cond, className) {
-        this.$.bindings.add(new ClassBinding(this, className, cond));
+    floatingClass(cond, className) {
+        this.$.bindings.add(new StaticClassBinding(this, className, cond));
         return this;
     }
     /**
@@ -464,7 +426,7 @@ export class INode extends Fragment {
      * @param name {String} name of style attribute
      * @param value {IValue} value
      */
-    $style(name, value) {
+    style(name, value) {
         const $ = this.$;
         if ($.node instanceof HTMLElement) {
             $.bindings.add(new StyleBinding(this, name, value));
@@ -474,28 +436,17 @@ export class INode extends Fragment {
         }
         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) {
+    setStyle(prop, value) {
         if (this.$.node instanceof HTMLElement) {
-            this.$.app.$run.setStyle(this.$.node, prop, value);
+            this.$.node.style.setProperty(prop, value);
         }
         else {
-            throw userError("Style can be setted for HTML elements only", "non-html-element");
+            throw userError("Style can be set for HTML elements only", "non-html-element");
         }
         return this;
     }
@@ -505,403 +456,24 @@ export class INode extends Fragment {
      * @param handler {function (Event)} Event handler
      * @param options {Object | boolean} addEventListener options
      */
-    $listen(name, handler, 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);
+    insertAdjacent(node) {
+        this.$.node.parentNode.insertBefore(node, this.$.node);
     }
     /**
      * A v-show & ngShow alternative
      * @param cond {IValue} show condition
      */
-    $bindShow(cond) {
+    bindShow(cond) {
         const $ = this.$;
         const node = $.node;
         if (node instanceof HTMLElement) {
             let lastDisplay = node.style.display;
             const htmlNode = node;
-            return this.$bindAlive(cond, () => {
+            return this.bindAlive(cond, () => {
                 lastDisplay = htmlNode.style.display;
                 htmlNode.style.display = 'none';
             }, () => {
@@ -916,19 +488,105 @@ export class INode extends Fragment {
      * bind HTML
      * @param value {IValue}
      */
-    $html(value) {
+    bindDomApi(name, value) {
         const $ = this.$;
         const node = $.node;
         if (node instanceof HTMLElement) {
-            node.innerHTML = value.$;
-            this.$watch((v) => {
-                node.innerHTML = v;
+            node[name] = value.$;
+            this.watch((v) => {
+                node[name] = v;
             }, value);
         }
         else {
             throw userError("HTML can be bound for HTML nodes only", "dom-error");
         }
     }
+    applyOptions(options) {
+        options["v:attr"] && Object.keys(options["v:attr"]).forEach(name => {
+            const value = options["v:attr"][name];
+            if (value instanceof IValue) {
+                this.attr(name, value);
+            }
+            else {
+                this.setAttr(name, value);
+            }
+        });
+        if (options.class) {
+            const handleClass = (name, value) => {
+                if (value instanceof IValue) {
+                    this.floatingClass(value, name);
+                }
+                else if (value && name !== '$') {
+                    this.addClass(name);
+                }
+                else {
+                    this.removeClasse(name);
+                }
+            };
+            if (Array.isArray(options.class)) {
+                options.class.forEach(item => {
+                    if (item instanceof IValue) {
+                        this.bindClass(item);
+                    }
+                    else if (typeof item == "string") {
+                        this.addClass(item);
+                    }
+                    else {
+                        Reflect.ownKeys(item).forEach((name) => {
+                            handleClass(name, item[name]);
+                        });
+                    }
+                });
+            }
+            else {
+                options.class.$.forEach(item => {
+                    this.bindClass(item);
+                });
+                Reflect.ownKeys(options.class).forEach((name) => {
+                    handleClass(name, options.class[name]);
+                });
+            }
+        }
+        options.style && Object.keys(options.style).forEach(name => {
+            const value = options.style[name];
+            if (value instanceof IValue) {
+                this.style(name, value);
+            }
+            else if (typeof value === "string") {
+                this.setStyle(name, value);
+            }
+            else {
+                if (value[0] instanceof IValue) {
+                    this.style(name, this.expr((v) => v + value[1], value[0]));
+                }
+                else {
+                    this.setStyle(name, value[0] + value[1]);
+                }
+            }
+        });
+        options["v:events"] && Object.keys(options["v:events"]).forEach(name => {
+            this.listen(name, options["v:events"][name]);
+        });
+        if (options["v:bind"]) {
+            const inode = this.node;
+            Reflect.ownKeys(options["v:bind"]).forEach((k) => {
+                const value = options["v:bind"][k];
+                if (k === 'value' && (inode instanceof HTMLInputElement || inode instanceof HTMLTextAreaElement)) {
+                    inode.oninput = () => value.$ = inode.value;
+                }
+                else if (k === 'checked' && inode instanceof HTMLInputElement) {
+                    inode.oninput = () => value.$ = inode.checked;
+                }
+                else if (k === 'volume' && inode instanceof HTMLMediaElement) {
+                    inode.onvolumechange = () => value.$ = inode.volume;
+                }
+                this.bindDomApi(k, value);
+            });
+        }
+        options["v:set"] && Object.keys(options["v:set"]).forEach(key => {
+            this.node[key] = options["v:set"][key];
+        });
+    }
 }
 /**
  * Represents an Vasille.js HTML element node
@@ -936,11 +594,11 @@ export class INode extends Fragment {
  * @extends INode
  */
 export class Tag extends INode {
-    constructor() {
-        super();
-        this.$seal();
+    constructor(input) {
+        super(input);
+        this.seal();
     }
-    $preinit(app, parent, tagName) {
+    preinit(app, parent, tagName) {
         if (!tagName || typeof tagName !== "string") {
             throw internalError('wrong Tag::$preinit call');
         }
@@ -948,55 +606,52 @@ export class Tag extends INode {
         const $ = this.$;
         $.preinit(app, parent);
         $.node = node;
-        $.parent.$$appendNode(node);
+        $.parent.appendNode(node);
+    }
+    compose(input) {
+        input.slot && input.slot(this);
     }
-    $$findFirstChild() {
+    findFirstChild() {
         return this.$.unmounted ? null : this.$.node;
     }
-    $$insertAdjacent(node) {
+    insertAdjacent(node) {
         if (this.$.unmounted) {
             if (this.$.next) {
-                this.$.next.$$insertAdjacent(node);
+                this.$.next.insertAdjacent(node);
             }
             else {
-                this.$.parent.$$appendNode(node);
+                this.$.parent.appendNode(node);
             }
         }
         else {
-            super.$$insertAdjacent(node);
+            super.insertAdjacent(node);
         }
     }
-    $$appendNode(node) {
-        const $ = this.$;
-        $.app.$run.appendChild($.node, node);
+    appendNode(node) {
+        this.$.node.appendChild(node);
     }
     /**
      * Mount/Unmount a node
      * @param cond {IValue} show condition
      */
-    $bindMount(cond) {
+    bindMount(cond) {
         const $ = this.$;
-        return this.$bindAlive(cond, () => {
+        this.bindAlive(cond, () => {
             $.node.remove();
             $.unmounted = true;
         }, () => {
-            if (!$.unmounted)
-                return;
-            if ($.next) {
-                $.next.$$insertAdjacent($.node);
-            }
-            else {
-                $.parent.$$appendNode($.node);
+            if ($.unmounted) {
+                this.insertAdjacent($.node);
+                $.unmounted = false;
             }
-            $.unmounted = false;
         });
     }
     /**
      * Runs GC
      */
-    $destroy() {
+    destroy() {
         this.node.remove();
-        super.$destroy();
+        super.destroy();
     }
 }
 /**
@@ -1005,22 +660,22 @@ export class Tag extends INode {
  * @extends INode
  */
 export class Extension extends INode {
-    $preinit(app, parent) {
-        if (parent instanceof INode) {
-            const $ = this.$;
-            $.preinit(app, parent);
-            $.node = parent.node;
+    preinit(app, parent) {
+        const $ = this.$;
+        let it = parent;
+        while (it && !(it instanceof INode)) {
+            it = it.parent;
         }
-        else {
-            throw internalError("A extension node can be encapsulated only in a tag/extension/component");
+        if (it && it instanceof INode) {
+            $.node = it.node;
+        }
+        $.preinit(app, parent);
+        if (!it) {
+            throw userError("A extension node can be encapsulated only in a tag/extension/component", "virtual-dom");
         }
     }
-    constructor($) {
-        super($);
-        this.$seal();
-    }
-    $destroy() {
-        super.$destroy();
+    destroy() {
+        super.destroy();
     }
 }
 /**
@@ -1029,56 +684,60 @@ export class Extension extends INode {
  * @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");
+    ready() {
+        super.ready();
+        if (this.children.size !== 1) {
+            throw userError("Component must have a child only", "dom-error");
         }
-        const child = this.$children[0];
+        const child = this.lastChild;
         if (child instanceof Tag || child instanceof Component) {
             const $ = this.$;
             $.node = child.node;
         }
         else {
-            throw userError("UserNode child must be Tag or Component", "dom-error");
+            throw userError("Component child must be Tag or Component", "dom-error");
         }
     }
+    preinit(app, parent) {
+        this.$.preinit(app, parent);
+    }
 }
 /**
  * Private part of switch node
  * @class SwitchedNodePrivate
  * @extends INodePrivate
  */
-export class SwitchedNodePrivate extends INodePrivate {
+export class SwitchedNodePrivate extends FragmentPrivate {
     constructor() {
         super();
-        this.$seal();
+        /**
+         * Array of possible cases
+         * @type {Array<{cond : IValue<boolean>, cb : function(Fragment)}>}
+         */
+        this.cases = [];
+        this.seal();
     }
     /**
      * Runs GC
      */
-    $destroy() {
+    destroy() {
         this.cases.forEach(c => {
             delete c.cond;
             delete c.cb;
         });
         this.cases.splice(0);
-        super.$destroy();
+        super.destroy();
     }
 }
 /**
  * Defines a node witch can switch its children conditionally
  */
-class SwitchedNode extends Fragment {
+export class SwitchedNode extends Fragment {
     /**
      * Constructs a switch node and define a sync function
      */
     constructor() {
-        super(new SwitchedNodePrivate);
+        super({}, new SwitchedNodePrivate);
         this.$.sync = () => {
             const $ = this.$;
             let i = 0;
@@ -1090,10 +749,10 @@ class SwitchedNode extends Fragment {
             if (i === $.index) {
                 return;
             }
-            if ($.fragment) {
-                $.fragment.$destroy();
-                this.$children.splice(0);
-                $.fragment = null;
+            if (this.lastChild) {
+                this.lastChild.destroy();
+                this.children.clear();
+                this.lastChild = null;
             }
             if (i !== $.cases.length) {
                 $.index = i;
@@ -1103,43 +762,38 @@ class SwitchedNode extends Fragment {
                 $.index = -1;
             }
         };
-        this.$seal();
+        this.seal();
     }
-    /**
-     * Set up switch cases
-     * @param cases {{ cond : IValue, cb : function(Fragment) }}
-     */
-    setCases(cases) {
-        const $ = this.$;
-        $.cases = [...cases];
+    addCase(case_) {
+        this.$.cases.push(case_);
+        case_.cond.on(this.$.sync);
+        this.$.sync();
     }
     /**
      * 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);
+        const node = new Fragment({});
+        node.preinit(this.$.app, this);
+        node.init();
+        this.lastChild = node;
+        this.children.add(node);
         cb(node);
     }
-    $ready() {
+    ready() {
         const $ = this.$;
-        super.$ready();
         $.cases.forEach(c => {
             c.cond.on($.sync);
         });
         $.sync();
     }
-    $destroy() {
+    destroy() {
         const $ = this.$;
         $.cases.forEach(c => {
             c.cond.off($.sync);
         });
-        super.$destroy();
+        super.destroy();
     }
 }
 /**
@@ -1148,7 +802,7 @@ class SwitchedNode extends Fragment {
 export class DebugPrivate extends FragmentPrivate {
     constructor() {
         super();
-        this.$seal();
+        this.seal();
     }
     /**
      * Pre-initializes a text node
@@ -1162,14 +816,14 @@ export class DebugPrivate extends FragmentPrivate {
         this.bindings.add(new Expression((v) => {
             this.node.replaceData(0, -1, v);
         }, true, text));
-        this.parent.$$appendNode(this.node);
+        this.parent.appendNode(this.node);
     }
     /**
      * Clear node data
      */
-    $destroy() {
+    destroy() {
         this.node.remove();
-        super.$destroy();
+        super.destroy();
     }
 }
 /**
@@ -1179,15 +833,15 @@ export class DebugPrivate extends FragmentPrivate {
  */
 export class DebugNode extends Fragment {
     constructor() {
-        super();
+        super({});
         /**
          * private data
          * @type {DebugNode}
          */
         this.$ = new DebugPrivate();
-        this.$seal();
+        this.seal();
     }
-    $preinit(app, parent, text) {
+    preinit(app, parent, text) {
         const $ = this.$;
         if (!text) {
             throw internalError('wrong DebugNode::$preninit call');
@@ -1197,8 +851,8 @@ export class DebugNode extends Fragment {
     /**
      * Runs garbage collector
      */
-    $destroy() {
-        this.$.$destroy();
-        super.$destroy();
+    destroy() {
+        this.$.destroy();
+        super.destroy();
     }
 }