vasille 1.2.9 → 2.0.3

package/lib/node.js

@@ -1,2155 +0,0 @@
-// 
-import { AttributeBinding, attributify }                               from "./attribute.js";
-import { Binding, Expression }                                         from "./bind.js";
-import { classify }                                                    from "./class.js";
-import { Executor, InstantExecutor }                                   from "./executor.js";
-import { VasilleNode, VasilleNodePrivate }                             from "./interfaces/core.js";
-import { internalError, notFound, typeError, userError, wrongBinding } from "./interfaces/errors.js";
-import { IBind }                                                       from "./interfaces/ibind.js";
-import { Callable, checkType }                                         from "./interfaces/idefinition.js";
-import { IValue }                                                      from "./interfaces/ivalue.js";
-import { vassilify }                                                   from "./models.js";
-import { StyleBinding, stylify }                                       from "./style.js";
-import { Pointer, Reference }                                          from "./value.js";
-
-
-
-/**
- * The private part of a text node
- */
-export class TextNodePrivate extends VasilleNodePrivate {
-    /**
-     * Contains the text of node as Reference
-     * @type {IValue}
-     */
-    value;
-
-    /**
-     * User defined handler to handle text change
-     * @type {Function}
-     */
-    handler;
-
-    constructor () {
-        super ();
-
-        this.seal();
-    }
-
-    /**
-     * Pre-initializes a text node
-     * @param app {App} the app node
-     * @param rt {INode} The root node
-     * @param ts {INode} The this node
-     * @param before {?VasilleNode} node to paste after
-     * @param text {String | IValue}
-     */
-    preinitText (
-        app,
-        rt,
-        ts,
-        before,
-        text
-    ) {
-        super.preinit(app, rt, ts, before);
-
-        let value = text instanceof IValue ? text : new Reference(text);
-        let node = document.createTextNode(value.$);
-
-        this.value = value;
-        this.handler = function (v) {
-            node.replaceData(0, -1, v.$);
-        }.bind(null, value);
-
-        value.on(this.handler);
-        this.encapsulate(node);
-
-        ts.$$appendChild(node, before);
-    }
-
-    /**
-     * Clear node data
-     */
-    $destroy () {
-        //$FlowFixMe
-        this.value = null;
-        //$FlowFixMe
-        this.handler = null;
-
-        super.$destroy();
-    }
-}
-
-/**
- * Represents a text node
- */
-export class TextNode extends VasilleNode {
-    /**
-     * private data
-     * @type {TextNodePrivate}
-     */
-    $ = new TextNodePrivate();
-
-    /**
-     * Pointer to text node
-     * @type {Text}
-     */
-    node;
-
-    /**
-     * Constructs a text node
-     */
-    constructor () {
-        super();
-
-        this.seal();
-    }
-
-    /**
-     * Pre-initializes a text node
-     * @param app {App} the app node
-     * @param rt {INode} The root node
-     * @param ts {INode} The this node
-     * @param before {?VasilleNode} node to paste after
-     * @param text {String | IValue}
-     */
-    $$preinitText (app, rt, ts, before, text) {
-        this.$.preinitText(app, rt, ts, before, text);
-        this.node = this.$.text;
-    }
-
-    /**
-     * Runs garbage collector
-     */
-    $destroy () {
-        this.$.$destroy();
-        this.$ = null;
-        //$FlowFixMe
-        this.node = null;
-
-        super.$destroy();
-    }
-}
-
-
-/**
- * The private part of a base node
- */
-export class BaseNodePrivate extends VasilleNodePrivate {
-    /**
-     * The building active state
-     * @type {boolean}
-     */
-    building;
-
-    /**
-     * Represents style bindings
-     * @type {Set<Binding>}
-     */
-    class = new Set;
-
-    /**
-     * Represents a list of user-defined bindings
-     * @type {Set<IValue>}
-     */
-    watch = new Set;
-
-    /**
-     * List of user defined signals
-     * @type {Map<string, {args : Array<Function>, handlers : Array<Function>}>}
-     */
-    signal = new Map;
-
-    /**
-     * List of references
-     * @type {Map<String, INode|Set<INode>>}
-     */
-    refs = new Map;
-
-    /**
-     * List of $slots
-     * @type {Map<String, INode>}
-     */
-    slots = new Map;
-
-    /**
-     * Defined the frozen state of component
-     * @type {boolean}
-     */
-    frozen = false;
-
-    /**
-     * Defines if node is unmounted
-     * @type {boolean}
-     */
-    unmounted = false;
-
-    /**
-     * Handle to run on component destroy
-     * @type {Function}
-     */
-    onDestroy;
-
-    /**
-     * Defines a HTML class for all html nodes
-     * @type {string}
-     */
-    metaClass;
-
-    /**
-     * Defines a container for CSS rule in creation time
-     * @type {Array<{scoped : string, unscoped : string, rules : {[p : string] : string}}>}
-     */
-    metaStyle;
-
-    /**
-     * Get the current root (ts on building, rt on filling)
-     * @type {INode}
-     */
-    get rt () {
-        return !this.building && super.root instanceof INode ? super.root : this.ts;
-    }
-
-    constructor () {
-        super ();
-        this.seal();
-    }
-
-    /**
-     * Garbage collection
-     */
-    $destroy () {
-        for (let c of this.class) {
-            c.$destroy();
-        }
-        this.class.clear();
-        //$FlowFixMe
-        this.class = null;
-
-        for (let w of this.watch) {
-            w.$destroy();
-        }
-        this.watch.clear();
-        //$FlowFixMe
-        this.watch = null;
-
-        this.signal.clear();
-        //$FlowFixMe
-        this.signal = null;
-
-        for (let ref of this.refs) {
-            if (ref instanceof Set) {
-                ref.clear();
-            }
-        }
-        this.refs.clear();
-        //$FlowFixMe
-        this.refs = null;
-
-        this.slots.clear();
-        //$FlowFixMe
-        this.slots = null;
-
-        if (this.onDestroy) {
-            this.onDestroy();
-        }
-
-        super.$destroy();
-    }
-}
-
-/**
- * Represents an Vasille.js node which can contains children
- * @extends VasilleNode
- */
-export class INode extends VasilleNode {
-    /**
-     * The children list
-     * @type {Array<VasilleNode>}
-     */
-    $children = [];
-
-    /**
-     * Constructs a base node
-     * @param $ {?BaseNodePrivate}
-     */
-    constructor ($) {
-        super($ || new BaseNodePrivate);
-
-        this.seal();
-    }
-
-    /**
-     * Pre-initializes a base node which can contain children
-     * @param app {App} the app node
-     * @param rt {INode} The root node
-     * @param ts {INode} The this node
-     * @param before {?VasilleNode} node to paste after it
-     * @param node {HTMLElement | Text | Comment} The encapsulated node
-     */
-    $$preinitNode (
-        app,
-        rt,
-        ts,
-        before,
-        node
-    ) {
-        this.$.preinit(app, rt, ts, before);
-        this.$.encapsulate(node);
-
-        ts.$$appendChild(node, before);
-    }
-
-    /**
-     * Start component building
-     */
-    $$startBuilding () {
-        this.$.slots.set("default", this);
-        this.$.building = true;
-    }
-
-    /**
-     * Stop component building
-     */
-    $$stopBuilding () {
-        this.$.building = false;
-        this.$mounted();
-    }
-
-    /**
-     * Initialize node
-     */
-    $init () {
-        this.$$startBuilding();
-
-        this.$createAttrs();
-        this.$createStyle();
-        this.$createSignals();
-        this.$createWatchers();
-
-        this.$created();
-        this.$createDom();
-
-        this.$$stopBuilding();
-    }
-
-    /**
-     * Assigns value to this property is such exists and is a IValue
-     * @param ts {Object} pointer to this
-     * @param prop {string} property name
-     * @param value {*} value to assign
-     */
-    $$unsafeAssign (ts, prop, value) {
-        let field = ts[prop];
-
-        if (!field || !(
-            field instanceof IValue
-        )) {
-            throw notFound("no such property: " + prop);
-        }
-        if (!field.type) {
-            throw userError(`field ${prop} is private`, "private-field");
-        }
-
-        if (field instanceof Pointer && field.value instanceof Reference && value instanceof IValue) {
-            field.$ = value;
-        }
-
-        if (value instanceof IValue) {
-            ts[prop] = value;
-        }
-        else {
-            field.$ = value;
-        }
-    }
-
-    /** To be overloaded: created event handler */
-    $created () {
-    }
-
-    /** To be overloaded: mounted event handler */
-    $mounted () {
-    }
-
-    /** To be overloaded: ready event handler */
-    $ready () {
-    }
-
-    /** To be overloaded: attributes creation milestone */
-    $createAttrs () {
-    }
-
-    /**
-     * Runs garbage collector
-     */
-    $destroy () {
-        let $ = this.$;
-
-        if ($.root instanceof INode) {
-            for (let it of $.root.$.refs) {
-                let ref = it[1];
-
-                if (ref === this) {
-                    $.root.$.refs.delete(it[0]);
-                }
-                else if (ref instanceof Set && ref.has(this)) {
-                    ref.delete(this);
-                }
-            }
-        }
-
-        for (let child of this.$children) {
-            child.$destroy();
-        }
-
-        $.$destroy();
-        this.$ = null;
-        this.$children.splice(0);
-        //$FlowFixMe
-        this.$children = null;
-
-        super.$destroy();
-    }
-
-    /** To be overloaded: $style attributes creation milestone */
-    $createStyle () {
-    }
-
-    /** To be overloaded: signals creation milestone */
-    $createSignals () {
-    }
-
-    /** To be overloaded: watchers creation milestone */
-    $createWatchers () {
-    }
-
-    /** To be overloaded: DOM creation milestone */
-    $createDom () {
-    }
-
-    /** To be overloaded: CSS creation milestone */
-    $createCss () {
-    }
-
-    /**
-     * create a private field
-     * @param value {*}
-     * @return {IValue<*>}
-     */
-    $ref (value) {
-        let ret = vassilify(value);
-        this.$.watch.add(ret);
-        return ret;
-    }
-
-    /**
-     * creates a public field
-     * @param type {Function}
-     * @param value {*}
-     * @return {Reference}
-     */
-    $prop (type, value = null) {
-        if (!checkType(value, type) || value instanceof IValue) {
-            throw typeError("wrong initial public field value");
-        }
-
-        let ret = vassilify(value);
-        if (ret instanceof Reference) {
-            ret.type = type;
-            this.$.watch.add(ret);
-            return ret;
-        }
-        else {
-            throw internalError("Something goes wrong :(");
-        }
-    }
-
-    /**
-     * creates a pointer
-     * @param type {Function}
-     * @return {Pointer}
-     */
-    $pointer (type) {
-        let ref = new Reference();
-        let pointer = new Pointer(ref);
-
-        ref.type = type;
-        this.$.watch.add(ref);
-        this.$.watch.add(pointer);
-
-        return pointer;
-    }
-
-    /**
-     * Gets a attribute value
-     * @param name {string} Attribute name
-     * @return {IValue<string>}
-     */
-    $attr (name) {
-        return this.$.attr(name);
-    }
-
-    /**
-     * Defines a attribute
-     * @param name {String} The name of attribute
-     * @param value {String | IValue | Callable} A $$value or a $$value getter
-     * @return {INode} A pointer to this
-     */
-    $defAttr (name, value) {
-        if (value instanceof Callable) {
-            this.$.$attrs[name] = attributify(this.$.rt, this, name, null, value);
-        }
-        else {
-            this.$.$attrs[name] = attributify(this.$.rt, this, name, value);
-        }
-        return this;
-    }
-
-    /**
-     * Defines a set of attributes
-     * @param obj {Object<String, String | IValue>} A set attributes
-     * @return {INode} A pointer to this
-     */
-    $defAttrs (obj) {
-        for (let i in obj) {
-            this.$.$attrs[i] = attributify(this.$.rt, this, i, obj[i]);
-        }
-        return this;
-    }
-
-    /**
-     * Creates and binds a multivalued binding to attribute
-     * @param name {String} The name of attribute
-     * @param calculator {Function} Binding calculator (must return a value)
-     * @param values {...IValue} Values to bind
-     * @return {INode} A pointer to this
-     */
-    $bindAttr (
-        name,
-        calculator,
-        ...values
-    ) {
-        this.$.$attrs[name] = new AttributeBinding(
-            this.$.rt,
-            this,
-            name,
-            calculator,
-            ...values
-        );
-        return this;
-    }
-
-    /**
-     * Sets a attribute value
-     * @param name {string} Name of attribute
-     * @param value {string} Reference of attribute
-     * @return {INode} A pointer to this
-     */
-    $setAttr (
-        name,
-        value
-    ) {
-        this.$.app.$run.setAttribute(this.$.el, name, value);
-        return this;
-    }
-
-    /**
-     * Sets value of some attributes
-     * @param data {Object<string, string>} Names and values of attributes
-     * @return {INode} A pointer to this
-     */
-    $setAttrs (
-        data
-    ) {
-        for (let i in data) {
-            this.$.app.$run.setAttribute(this.$.el, i, data[i]);
-        }
-        return this;
-    }
-
-    /**
-     * Adds a CSS class
-     * @param cl {string} Class name
-     * @return {INode} A pointer to this
-     */
-    $addClass (cl) {
-        this.$.el.classList.add(cl);
-        return this;
-    }
-
-    /**
-     * Adds some CSS classes
-     * @param cl {...string} Classes names
-     * @return {INode} A pointer to this
-     */
-    $addClasses (...cl) {
-        this.$.el.classList.add(...cl);
-        return this;
-    }
-
-    /**
-     * Bind a CSS class
-     * @param cl {?string}
-     * @param value {string | IValue | null}
-     * @param func {?Callable}
-     * @return {INode}
-     */
-    $bindClass (
-        cl,
-        value = null,
-        func                                 = null
-    ) {
-        this.$.class.add(classify(this.$.rt, this, cl || "", value, func));
-        return this;
-    }
-
-    /**
-     * Gets a style attribute value
-     * @param name {string} Name of style attribute
-     * @return {IValue}
-     */
-    $style (name) {
-        return this.$.style(name);
-    }
-
-    /**
-     * Defines a style attribute
-     * @param name {String} The name of style attribute
-     * @param value {String | IValue | Callable} A value or a value getter
-     * @return {this} A pointer to this
-     */
-    $defStyle (name, value) {
-        if (value instanceof Callable) {
-            this.$.$style[name] = stylify(this.$.rt, this, name, null, value);
-        }
-        else {
-            this.$.$style[name] = stylify(this.$.rt, this, name, value);
-        }
-        return this;
-    }
-
-    /**
-     * Defines a set of style attributes
-     * @param obj {Object<String, String | IValue>} A set of style attributes
-     * @return {this} A pointer to this
-     */
-    $defStyles (obj) {
-        for (let i in obj) {
-            this.$.$style[i] = stylify(this.$.rt, this, i, obj[i]);
-        }
-        return this;
-    }
-
-    /**
-     * Creates and binds a calculator to a style attribute
-     * @param name {String} Name of style attribute
-     * @param calculator {Function} A calculator for style value
-     * @param values {...IValue} Values to bind
-     * @return {this} A pointer to this
-     */
-    $bindStyle (
-        name,
-        calculator,
-        ...values
-    ) {
-        this.$.$style[name] = new StyleBinding(
-            this.$.rt,
-            this,
-            name,
-            calculator,
-            ...values
-        );
-        return this;
-    }
-
-    /**
-     * Sets a style property value
-     * @param prop {string} Property name
-     * @param value {string} Property value
-     * @return {INode}
-     */
-    $setStyle (
-        prop,
-        value
-    ) {
-        this.$.app.$run.setStyle(this.$.el, prop, value);
-        return this;
-    }
-
-    /**
-     * Sets some style property value
-     * @param data {Object<string, string>} Names and value of properties
-     * @return {INode}
-     */
-    $setStyles (
-        data
-    ) {
-        for (let i in data) {
-            this.$.app.$run.setStyle(this.$.el, i, data[i]);
-        }
-        return this;
-    }
-
-    /**
-     * Defines a signal
-     * @param name {string} Signal name
-     * @param types {...Function} Arguments types
-     */
-    $defSignal (name, ...types) {
-        this.$.signal.set(name, { args : types, handlers : [] });
-    }
-
-    /**
-     * Add a handler for a signal
-     * @param name {string} Signal name
-     * @param func {Function} Handler
-     */
-    $on (name, func) {
-        let signal = this.$.signal.get(name);
-
-        if (!signal) {
-            throw notFound("no such signal: " + name);
-        }
-
-        signal.handlers.push(func);
-    }
-
-    /**
-     * Emit a signal
-     * @param name {string} Signal name
-     * @param args {...*} Signal arguments
-     */
-    $emit (name, ...args) {
-        let signal = this.$.signal.get(name);
-
-        if (!signal) {
-            throw notFound("no such signal: " + name);
-        }
-
-        let compatible = args.length === signal.args.length;
-
-        if (compatible && this.$.app.$debug) {
-            for (let i = 0; i < args.length; i++) {
-                if (!checkType(args[i], signal.args[i])) {
-                    compatible = false;
-                }
-            }
-        }
-
-        if (!compatible) {
-            throw typeError("incompatible signals arguments");
-        }
-
-        for (let handler of signal.handlers) {
-            try {
-                handler(...args);
-            }
-            catch (e) {
-                console.error(`Vasille.js: Handler throw exception at ${this.constructor.name}::${name}: `, e);
-            }
-        }
-    }
-
-    /**
-     * Add a listener for an event
-     * @param name {string} Event name
-     * @param handler {function (Event)} Event handler
-     * @param options {Object | boolean} addEventListener options
-     * @return {this}
-     */
-    $listen (name, handler, options) {
-        this.$.el.addEventListener(name, handler, options || {});
-        return this;
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $oncontextmenu (handler, options) {
-        this.$listen("contextmenu", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onmousedown (handler, options) {
-        this.$listen("mousedown", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onmouseenter (handler, options) {
-        this.$listen("mouseenter", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onmouseleave (handler, options) {
-        this.$listen("mouseleave", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onmousemove (handler, options) {
-        this.$listen("mousemove", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onmouseout (handler, options) {
-        this.$listen("mouseout", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onmouseover (handler, options) {
-        this.$listen("mouseover", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onmouseup (handler, options) {
-        this.$listen("mouseup", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $onclick (handler, options) {
-        this.$listen("click", handler, options);
-    }
-
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondblclick (handler, options) {
-        this.$listen("dblclick", handler, options);
-    }
-
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    $onblur (handler, options) {
-        this.$listen("blur", handler, options);
-    }
-
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    $onfocus (handler, options) {
-        this.$listen("focus", handler, options);
-    }
-
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    $onfocusin (handler, options) {
-        this.$listen("focusin", handler, options);
-    }
-
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    $onfocusout (handler, options) {
-        this.$listen("focusout", handler, options);
-    }
-
-    /**
-     * @param handler {function (KeyboardEvent)}
-     * @param options {Object | boolean}
-     */
-    $onkeydown (handler, options) {
-        this.$listen("keydown", handler, options);
-    }
-
-    /**
-     * @param handler {function (KeyboardEvent)}
-     * @param options {Object | boolean}
-     */
-    $onkeyup (handler, options) {
-        this.$listen("keyup", handler, options);
-    }
-
-    /**
-     * @param handler {function (KeyboardEvent)}
-     * @param options {Object | boolean}
-     */
-    $onkeypress (handler, options) {
-        this.$listen("keypress", handler, options);
-    }
-
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    $ontouchstart (handler, options) {
-        this.$listen("touchstart", handler, options);
-    }
-
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    $ontouchmove (handler, options) {
-        this.$listen("touchmove", handler, options);
-    }
-
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    $ontouchend (handler, options) {
-        this.$listen("touchend", handler, options);
-    }
-
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    $ontouchcancel (handler, options) {
-        this.$listen("touchcancel", handler, options);
-    }
-
-    /**
-     * @param handler {function (WheelEvent)}
-     * @param options {Object | boolean}
-     */
-    $onwheel (handler, options) {
-        this.$listen("wheel", handler, options);
-    }
-
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    $onabort (handler, options) {
-        this.$listen("abort", handler, options);
-    }
-
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    $onerror (handler, options) {
-        this.$listen("error", handler, options);
-    }
-
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    $onload (handler, options) {
-        this.$listen("load", handler, options);
-    }
-
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    $onloadend (handler, options) {
-        this.$listen("loadend", handler, options);
-    }
-
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    $onloadstart (handler, options) {
-        this.$listen("loadstart", handler, options);
-    }
-
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    $onprogress (handler, options) {
-        this.$listen("progress", handler, options);
-    }
-
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    $ontimeout (handler, options) {
-        this.$listen("timeout", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondrag (handler, options) {
-        this.$listen("drag", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondragend (handler, options) {
-        this.$listen("dragend", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondragenter (handler, options) {
-        this.$listen("dragenter", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondragexit (handler, options) {
-        this.$listen("dragexit", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondragleave (handler, options) {
-        this.$listen("dragleave", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondragover (handler, options) {
-        this.$listen("dragover", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondragstart (handler, options) {
-        this.$listen("dragstart", handler, options);
-    }
-
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    $ondrop (handler, options) {
-        this.$listen("drop", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointerover (handler, options) {
-        this.$listen("pointerover", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointerenter (handler, options) {
-        this.$listen("pointerenter", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointerdown (handler, options) {
-        this.$listen("pointerdown", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointermove (handler, options) {
-        this.$listen("pointermove", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointerup (handler, options) {
-        this.$listen("pointerup", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointercancel (handler, options) {
-        this.$listen("pointercancel", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointerout (handler, options) {
-        this.$listen("pointerout", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpointerleave (handler, options) {
-        this.$listen("pointerleave", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $ongotpointercapture (handler, options) {
-        this.$listen("gotpointercapture", handler, options);
-    }
-
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    $onlostpointercapture (handler, options) {
-        this.$listen("lostpointercapture", handler, options);
-    }
-
-    /**
-     * @param handler {function (AnimationEvent)}
-     * @param options {Object | boolean}
-     */
-    $onanimationstart (handler, options) {
-        this.$listen("animationstart", handler, options);
-    }
-
-    /**
-     * @param handler {function (AnimationEvent)}
-     * @param options {Object | boolean}
-     */
-    $onanimationend (handler, options) {
-        this.$listen("animationend", handler, options);
-    }
-
-    /**
-     * @param handler {function (AnimationEvent)}
-     * @param options {Object | boolean}
-     */
-    $onanimationiteraton (handler, options) {
-        this.$listen("animationiteration", handler, options);
-    }
-
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    $onclipboardchange (handler, options) {
-        this.$listen("clipboardchange", handler, options);
-    }
-
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    $oncut (handler, options) {
-        this.$listen("cut", handler, options);
-    }
-
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    $oncopy (handler, options) {
-        this.$listen("copy", handler, options);
-    }
-
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    $onpaste (handler, options) {
-        this.$listen("paste", handler, options);
-    }
-
-    /**
-     * Defines a watcher
-     * @param func {function} Function to run on value change
-     * @param vars {...IValue} Values to listen
-     */
-    $watch (func, ...vars) {
-        if (vars.length === 0) {
-            throw wrongBinding("a watcher must be bound to a value at last");
-        }
-
-        this.$.watch.add(new Expression(func, vars, !this.$.frozen));
-    }
-
-    /**
-     * Creates a bind expression
-     * @param f {Function} function to alc expression value
-     * @param args {...IValue} value sto bind
-     * @return {IBind}
-     */
-    $bind (f, ...args) {
-        let res;
-
-        if (args.length === 0) {
-            throw wrongBinding("no values to bind");
-        }
-        else {
-            res = new Expression(f, args, !this.$.frozen);
-        }
-
-        this.$.watch.add(res);
-        return res;
-    }
-
-    $runOnDestroy (f) {
-        (this.$).onDestroy = f;
-    }
-
-    /**
-     * Register current node as named slot
-     * @param name {String} The name of slot
-     */
-    $makeSlot (name) {
-        if (this.$.rt instanceof INode) {
-            this.$.rt.$.slots.set(name, this);
-        }
-        return this;
-    }
-
-    /**
-     * Gets a slot by name
-     * @param name {string} Name of slot
-     * @return {INode}
-     */
-    $slot (name) {
-        let node = this.$.slots.get(name);
-
-        if (node instanceof INode) {
-            return node;
-        }
-
-        throw notFound("no such slot: " + name);
-    }
-
-    /**
-     * Pushes a node to children immediately
-     * @param node {VasilleNode} A node to push
-     * @private
-     */
-    $$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 core node in shadow element if so exists
-     * @param node {Extension} Node to iterate
-     * @return {?CoreEl}
-     */
-    $$findFirstChild (node) {
-        for (let child of node.$children) {
-            if (child.$.unmounted) continue;
-
-            if (child instanceof Extension) {
-                let first = this.$$findFirstChild(child);
-
-                if (first) {
-                    return first;
-                }
-            }
-            else if (child instanceof Tag || child instanceof TextNode) {
-                return child.$.$el;
-            }
-        }
-    }
-
-    /**
-     * Append a child in correct parent (to be overwritten)
-     * @param node {HTMLElement | Text | Comment} A node to push
-     * @param before {VasilleNode} node to paste after
-     * @private
-     */
-    $$appendChild (node, before) {
-        let $ = this.$;
-        before = before || $.next;
-
-        while (before && before.$.unmounted) {
-            before = before.$.next;
-        }
-
-        // If we are inserting before a element node
-        if (before instanceof Tag) {
-            $.app.$run.insertBefore($.el, node, before.$.el);
-            return;
-        }
-
-        // If we are inserting before a shadow node
-        if (before instanceof Extension) {
-            let beforeNode = this.$$findFirstChild(before);
-
-            if (beforeNode) {
-                $.app.$run.insertBefore($.el, node, beforeNode);
-                return;
-            }
-        }
-
-        // If we are inserting in a shadow node or uninitiated element node
-        if (
-            (this instanceof Extension && !($.parent instanceof App)) ||
-            (this instanceof Tag && (!$.el || $.el === node))) {
-            $.parent.$$appendChild(node, $.next);
-            return;
-        }
-
-        // If we have no more variants
-        $.app.$run.appendChild($.el, node);
-    }
-
-    /**
-     * Disable/Enable reactivity of component with feedback
-     * @param cond {IValue} show condition
-     * @param onOff {Function} on show feedback
-     * @param onOn {Function} on hide feedback
-     */
-    $bindFreeze (cond, onOff, onOn) {
-        let $ = this.$;
-
-        if ($.watch.has(cond)) {
-            throw wrongBinding(":show must be bound to an external component");
-        }
-
-        let expr = null;
-
-        expr = new Expression((cond) => {
-            $.frozen = !cond;
-
-            if (cond) {
-                onOn?.();
-                for (let watcher of $.watch) {
-                    if (watcher instanceof IBind) {
-                        watcher.link();
-                    }
-                }
-            }
-            else {
-                onOff?.();
-                for (let watcher of $.watch) {
-                    if (watcher instanceof IBind && watcher !== expr) {
-                        watcher.unlink();
-                    }
-                }
-            }
-        }, [cond]);
-
-        $.watch.add(expr);
-        return this;
-    }
-
-    /**
-     * A v-show & ngShow alternative
-     * @param cond {IValue} show condition
-     */
-    $bindShow (cond) {
-        let $ = this.$;
-        let lastDisplay = $.el.style.display;
-
-        return this.$bindFreeze(cond, () => {
-            lastDisplay = $.el.style.display;
-            $.el.style.display = 'none';
-        }, () => {
-            $.el.style.display = lastDisplay;
-        });
-    }
-
-    /**
-     * Mount/Unmount a node
-     * @param cond {IValue} show condition
-     */
-    $bindMount (cond) {
-        let $ = this.$;
-
-        return this.$bindFreeze(cond, () => {
-            $.unmounted = true;
-        }, () => {
-            $.unmounted = false;
-        });
-    }
-
-    /**
-     * Enable/Disable reactivity o component
-     * @param cond {IValue} show condition
-     */
-    $bindAlive (cond) {
-        return this.$bindFreeze(cond);
-    }
-
-    /**
-     * Defines a text fragment
-     * @param text {String | IValue} A text fragment string
-     * @param cb {?function (TextNode)} Callback if previous is slot name
-     * @return {INode} A pointer to this
-     */
-    $defText (
-        text,
-        cb
-    ) {
-        let $ = this.$;
-        let default_ = $.slots.get("default");
-
-        if (default_ && default_ !== this && !$.building) {
-            default_.$defText(text, cb);
-            return this;
-        }
-
-        let node = new TextNode();
-
-        node.$$preinitText($.app, $.rt, this, null, text);
-        this.$$pushNode(node);
-
-        if (cb) {
-            $.app.$run.callCallback(() => {
-                cb(node);
-            });
-        }
-        return this;
-    }
-
-    /**
-     * Defines a tag element
-     * @param tagName {String} is the tag name
-     * @param cb {function(Tag, *)} Callback if previous is slot name
-     * @return {INode} A pointer to this
-     */
-    $defTag (
-        tagName,
-        cb
-    ) {
-        let $ = this.$;
-        let default_ = $.slots.get("default");
-
-        if (default_ && default_ !== this && !$.building) {
-            default_.$defTag(tagName, cb);
-            return this;
-        }
-        let node = new Tag();
-
-        node.$.parent = this;
-        node.$$preinitElementNode($.app, $.rt, this, null, tagName);
-        node.$init();
-        this.$$pushNode(node);
-
-        $.app.$run.callCallback(() => {
-            if (cb) {
-                cb(node);
-            }
-            node.$ready();
-        });
-        return this;
-    }
-
-    /**
-     * Defines a custom element
-     * @param node {*} Custom element constructor
-     * @param props {function(INode)} List of properties values
-     * @param cb {?function(INode, *)} Callback if previous is slot name
-     * @return {INode} A pointer to this
-     */
-    $defElement (
-        node,
-        props,
-        cb
-    ) {
-        let $ = this.$;
-        let default_ = $.slots.get("default");
-
-        if (default_ && default_ !== this && !$.building) {
-            default_.$defElement(node, props, cb);
-            return this;
-        }
-
-        if (node instanceof VasilleNode) {
-            node.$.parent = this;
-        }
-
-        if (node instanceof Extension) {
-            node.$$preinitShadow($.app, $.rt, this, null);
-        }
-        else if (node instanceof Tag || node instanceof TextNode) {
-            node.$.preinit($.app, $.rt, this, null);
-        }
-
-        this.$$callPropsCallback(node, props);
-
-        if (node instanceof VasilleNode) {
-            this.$$pushNode(node);
-        }
-
-        $.app.$run.callCallback(() => {
-            if (cb) {
-                cb(node);
-            }
-
-            if (node instanceof INode) {
-                node.$ready();
-            }
-        });
-
-        return this;
-    }
-
-    /**
-     * Calls callback function to create properties
-     * @param node {INode}
-     * @param props {function(INode)}
-     * @return {*}
-     */
-    $$callPropsCallback (node, props) {
-        if (node instanceof INode) {
-            let obj = {
-                $bind : function (...args) {
-                    return node.$bind(...args);
-                }
-            };
-
-            for (let i in node) {
-                if (node.hasOwnProperty(i)) {
-                    Object.defineProperty(obj, i, {
-                        configurable : false,
-                        enumerable   : false,
-                        set (value) {
-                            node.$$unsafeAssign(node, i, value);
-                        },
-                        get () {
-                            return (node)[i];
-                        }
-                    });
-                }
-            }
-
-            //$FlowFixMe[incompatible-call]
-            props(obj);
-            node.$init();
-        }
-    }
-
-    /**
-     * Defines a repeater node
-     * @param nodeT {RepeatNode} A repeat node object
-     * @param props {function(INode)} Send data to repeat node
-     * @param cb {function(RepeatNodeItem, *)} Call-back to create child nodes
-     * @return {INode}
-     */
-    $defRepeater (
-        nodeT,
-        props,
-        cb
-    ) {
-        let $ = this.$;
-        let default_ = $.slots.get("default");
-
-        if (default_ && default_ !== this && !$.building) {
-            default_.$defRepeater(nodeT, props, cb);
-            return this;
-        }
-
-        //$FlowFixMe[incompatible-type]
-        let node = nodeT;
-
-        node.$.parent = this;
-        node.$$preinitShadow($.app, this.$.rt, this, null);
-        this.$$callPropsCallback(nodeT, props);
-        this.$$pushNode(node);
-        node.setCallback(cb);
-        $.app.$run.callCallback(() => {
-            node.$ready();
-        });
-
-        return this;
-    }
-
-    /**
-     * Defines a if node
-     * @param cond {* | IValue<*>} condition
-     * @param cb {function(RepeatNodeItem, ?number)} Call-back to create child nodes
-     * @return {this}
-     */
-    $defIf (
-        cond,
-        cb
-    ) {
-        return this.$defSwitch({ cond, cb });
-    }
-
-    /**
-     * Defines a if-else node
-     * @param ifCond {* | IValue<*>} `if` condition
-     * @param ifCb {function(RepeatNodeItem, ?number)} Call-back to create `if` child nodes
-     * @param elseCb {function(RepeatNodeItem, ?number)} Call-back to create `else` child nodes
-     * @return {this}
-     */
-    $defIfElse (
-        ifCond,
-        ifCb,
-        elseCb
-    ) {
-        return this.$defSwitch({ cond : ifCond, cb : ifCb }, { cond : true, cb : elseCb });
-    }
-
-    /**
-     * Defines a switch nodes: Will break after first true condition
-     * @param cases {...{ cond : IValue<boolean> | boolean, cb : function(RepeatNodeItem, ?number) }}
-     * @return {INode}
-     */
-    $defSwitch (
-        ...cases
-    ) {
-        let $ = this.$;
-        let default_ = $.slots.get("default");
-
-        if (default_ && default_ !== this && !$.building) {
-            default_.$defSwitch(...cases);
-            return this;
-        }
-
-        let node = new SwitchedNode();
-
-        node.$.parent = this;
-        node.$$preinitShadow($.app, this.$.rt, this, null);
-        node.$init();
-        this.$$pushNode(node);
-        node.setCases(cases);
-        $.app.$run.callCallback(() => {
-            node.$ready();
-        });
-
-        return this;
-    }
-
-    /**
-     * @param cond {IValue<boolean> | boolean}
-     * @param cb {(function(RepeatNodeItem, ?number) : void)}
-     * @return {{cond : (IValue<boolean>|boolean), cb : (function(RepeatNodeItem, ?number) : void)}}
-     */
-    $case (cond, cb)
- {
-        return {cond, cb};
-    }
-
-    /**
-     * @param cb {(function(RepeatNodeItem, ?number) : void)}
-     * @return {{cond : boolean, cb : (function(RepeatNodeItem, ?number) : void)}}
-     */
-    $default (cb)
- {
-        return {cond: true, cb};
-    }
-
-    /**
-     * bind HTML
-     * @param value {IValue<string>}
-     */
-    $bindHTML (value) {
-        let $ = this.$;
-
-        $.el.innerHTML = value.$;
-        this.$watch((v) => {
-            $.el.innerHTML = v;
-        }, value);
-    }
-
-    /**
-     * collect identifiers of created rules packs
-     * @type {Set<string>}
-     */
-    static cssRules = new Set;
-
-    /**
-     * @param class_ {string} set class which will be used to scope style
-     */
-    $setMetaClass (class_) {
-        (this.$).metaClass = class_;
-    }
-
-    /**
-     * Scope a selector to current component
-     * @param selector {string} selector to scope
-     * @return {string}
-     */
-    $scope (selector) {
-        return selector + '.' + (this.$).metaClass;
-    }
-
-    /**
-     * Defines a local CSS rule
-     * @param scoped {string} selector to scope
-     * @param rules {Object<string, string>} css rules
-     */
-    $local (scoped, rules) {
-        (this.$).metaStyle.push({scoped, rules});
-    }
-
-    /**
-     * Defines a hybrid rule
-     * @param scoped {string} selector to scope
-     * @param unscoped {string} selector to append unscoped
-     * @param rules {Object<string, string>} css rules
-     */
-    $hybrid (scoped, unscoped, rules) {
-        (this.$).metaStyle.push({scoped, unscoped, rules});
-    }
-
-    /**
-     * Make style tag for component
-     */
-    $$makeStyleTag () {
-        let $ = this.$;
-
-        if (!$.metaClass || INode.cssRules.has($.metaClass)) {
-            return;
-        }
-
-        $.metaStyle = [];
-        this.$createCss();
-
-        let content = '';
-        let suffix = $.app.$debug ? '\n' : '';
-
-        for (let pack of $.metaStyle) {
-            content += this.$scope(pack.scoped) + ' ' + (pack.unscoped || '') + '{' + suffix;
-
-            for (let i in pack.rules) {
-                content += i + ':' + pack.rules[i] + ';' + suffix;
-            }
-
-            content += '}' + suffix;
-        }
-
-        let style = document.createElement('style');
-        style.classList.add($.metaClass);
-        style.innerHTML = content;
-        document.head?.appendChild(style);
-        INode.cssRules.add($.metaClass);
-    }
-}
-
-/**
- * Represents an Vasille.js HTML element node
- */
-export class Tag extends INode {
-
-    /**
-     * HTML node created by this TagNode
-     * @type {HTMLElement}
-     */
-    $node;
-    
-    constructor () {
-        super ();
-        this.seal();
-    }
-
-    /**
-     * Constructs a element node
-     * @param app {App} the app node
-     * @param rt {INode} The root node
-     * @param ts {INode} The this node
-     * @param before {VasilleNode} Node to insert before it
-     * @param tagName {String} Name of HTML tag
-     */
-    $$preinitElementNode (
-        app,
-        rt,
-        ts,
-        before,
-        tagName
-    ) {
-        this.$node = document.createElement(tagName);
-        this.$$preinitNode(app, rt, ts, before, this.$node);
-    }
-
-    /**
-     * Runs GC
-     */
-    $destroy () {
-        super.$destroy();
-        this.$node.remove();
-        //$FlowFixMe
-        this.$node = null;
-    }
-}
-
-/**
- * Represents a Vasille.js shadow node
- */
-export class Extension extends INode {
-    /**
-     * Pre-initialize a shadow node
-     * @param app {App} the app node
-     * @param rt {INode} The root node
-     * @param ts {INode} The this node
-     * @param before {VasilleNode} node to paste after it
-     */
-    $$preinitShadow (
-        app,
-        rt,
-        ts,
-        before
-    ) {
-        this.$.preinit(app, rt, ts, before);
-
-        try {
-            this.$.encapsulate(ts.$.el);
-        }
-        catch (e) {
-            throw internalError("A extension node can be encapsulated in a tag or extension node only");
-        }
-    }
-
-    constructor ($) {
-        super ($);
-        this.seal();
-    }
-
-    /**
-     * Runs GC
-     */
-    $destroy () {
-        super.$destroy();
-    }
-}
-
-/**
- * Defines a node which cas has just a child (TagNode | Component)
- */
-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");
-        }
-        let child = this.$children[0];
-
-        if (child instanceof Tag || child instanceof Component) {
-            let $ = this.$;
-
-            $.encapsulate(child.$.el);
-            if ($.app.$debug) {
-                //$FlowFixMe
-                $.el.vasille = $.el.vasille || this;
-            }
-        }
-        else {
-            throw userError("UserNode child must be TagNode or UserNode", "dom-error");
-        }
-    }
-}
-
-
-/**
- * Defines a abstract node, which represents a dynamical part of application
- */
-export class RepeatNodeItem extends Extension {
-    /**
-     * node identifier
-     * @type {*}
-     */
-    $id;
-
-    /**
-     * Constructs a repeat node item
-     * @param id {*}
-     */
-    constructor (id) {
-        super();
-        this.$id = id;
-        this.seal();
-    }
-
-    /**
-     * Destroy all children
-     */
-    $destroy () {
-        this.$id = null;
-        super.$destroy();
-    }
-}
-
-/**
- * Private part of switch node
- */
-export class SwitchedNodePrivate extends BaseNodePrivate {
-    /**
-     * Index of current true condition
-     * @type {number}
-     */
-    index = -1;
-
-    /**
-     * The unique child which can be absent
-     * @type {Extension}
-     */
-    node;
-
-    /**
-     * Array of possible casses
-     * @type {Array<{cond : IValue<boolean>, cb : function(RepeatNodeItem, ?number)}>}
-     */
-    cases;
-
-    /**
-     * A function which sync index and content, will be bounded to each condition
-     * @type {Function}
-     */
-    sync;
-
-    constructor () {
-        super ();
-        this.seal();
-    }
-
-    /**
-     * Runs GC
-     */
-    $destroy () {
-        //$FlowFixMe
-        this.index = null;
-        //$FlowFixMe
-        this.node = null;
-
-        for (let c of this.cases) {
-            //$FlowFixMe
-            delete c.cond;
-            //$FlowFixMe
-            delete c.cb;
-        }
-        this.cases.splice(0);
-        //$FlowFixMe
-        this.cases = null;
-        //$FlowFixMe
-        this.sync = null;
-
-        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 = () => {
-            let $ = this.$;
-            let i = 0;
-
-            for (; i < $.cases.length; i++) {
-                if ($.cases[i].cond.$) {
-                    break;
-                }
-            }
-
-            if (i === $.index) {
-                return;
-            }
-
-            if ($.node) {
-                $.node.$destroy();
-                this.$children.splice(this.$children.indexOf($.node), 1);
-                //$FlowFixMe
-                $.node = null;
-            }
-
-            if (i !== $.cases.length) {
-                $.index = i;
-                this.createChild(i, $.cases[i].cb);
-            }
-            else {
-                $.index = -1;
-            }
-        };
-
-        this.seal();
-    };
-
-    /**
-     * Set up switch cases
-     * @param cases {{ cond : IValue | boolean, cb : function(RepeatNodeItem, ?number) }}
-     */
-    setCases (cases) {
-        let $ = this.$;
-        $.cases = [];
-
-        for (let case_ of cases) {
-            $.cases.push({ cond : vassilify(case_.cond), cb : case_.cb });
-        }
-    }
-
-    /**
-     * Creates a child node
-     * @param id {*} id of node
-     * @param cb {function(RepeatNodeItem, *)} Call-back
-     */
-    createChild (id, cb) {
-        let node = new RepeatNodeItem(id);
-
-        node.$.parent = this;
-        node.$$preinitShadow(this.$.app, this.$.rt, this);
-
-        node.$init();
-        cb(node, id);
-        node.$ready();
-
-        this.$.node = node;
-        this.$children.push(node);
-    };
-
-    /**
-     * Prepare shadow node
-     * @param app {App} App node
-     * @param rt {INode} Root node
-     * @param ts {INode} This node
-     * @param before {VasilleNode} The next node
-     */
-    $$preinitShadow (app, rt, ts, before) {
-        super.$$preinitShadow(app, rt, ts, before);
-        this.$.encapsulate(ts.$.el);
-    }
-
-
-
-    /**
-     * Run then the node is ready
-     */
-    $ready () {
-        let $ = this.$;
-
-        super.$ready();
-
-        for (let c of $.cases) {
-            c.cond.on($.sync);
-        }
-
-        $.sync();
-    }
-
-    /**
-     * Unbind and clear dynamical nodes
-     */
-    $destroy () {
-        let $ = this.$;
-
-        for (let c of $.cases) {
-            c.cond.off($.sync);
-        }
-
-        super.$destroy();
-    }
-}
-
-/**
- * Represents a Vasille.js application node
- */
-export class App extends INode {
-    /**
-     * The debug state of application, if true will output debug data
-     * @type {boolean}
-     */
-    $debug = false;
-
-    /**
-     * Executor is use to optimize the page creation/update
-     * @type {Executor}
-     */
-    $run;
-
-    /**
-     * Constructs a app node
-     * @param node {HTMLElement} The root of application
-     * @param meta {?{debug : boolean}} Application properties
-     */
-    constructor (node, meta) {
-        super();
-
-        this.$run = new InstantExecutor();
-        this.$.encapsulate(node);
-        this.$.preinit(this, this, this, this);
-
-        if (meta?.debug instanceof Boolean) {
-            this.$debug = meta.debug;
-        }
-
-        this.seal();
-    }
-
-    /**
-     * @param props {function($ : any) : void}
-     */
-    $create (props) {
-        // $FlowFixMe
-        this.$$callPropsCallback(this, props);
-    }
-
-    $mounted () {
-        super.$mounted();
-
-        if (this.$debug) {
-            //$FlowFixMe
-            (this.$).el.vasille = this;
-        }
-    }
-
-    $destroy () {
-        //$FlowFixMe
-        this.$run = null;
-        super.$destroy();
-    }
-}
-
-//# sourceMappingURL=node.js.map