vasille 2.0.3 → 2.2.0

package/cdn/es5.js

@@ -12,6 +12,14 @@ var __spreadArray = function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 
+var __assign = function(o1, o2) {
+    for (let i in o2) {
+        o1[i] = o2[i];
+    }
+
+    return o1;
+}
+
 var Set = window.Set || /** @class */ (function (_super) {
     __extends(Set, _super);
     function Set(set) {
@@ -165,6 +173,42 @@ var Map = window.Map || /** @class */ (function (_super) {
 
     return Map;
 }(Array));
+
+window.Reflect = window.Reflect || {
+    has: function (obj, p) {
+        for (var i in obj) {
+            if (i == p) return true;
+        }
+        return false;
+    },
+    ownKeys: function (obj) {
+        let ret = [];
+
+        for (var i in obj) {
+            if (obj.hasOwnProperty(i)) {
+                ret.push(i);
+            }
+        }
+
+        return ret;
+    }
+}
+
+window.Proxy = window.Proxy || function (obj) {
+    return obj;
+};
+// ./lib-es5/v/index.js
+
+var v = __assign(__assign({ ref: function (value) {
+        return current.ref(value);
+    }, expr: expr, of: valueOf, sv: setValue, alwaysFalse: new Reference(false), app: app, component: component, fragment: fragment, extension: extension, text: text, tag: tag, create: create }, vx), { merge: merge, destructor: function () {
+        return current.destroy.bind(current);
+    }, runOnDestroy: function (callback) {
+        current.runOnDestroy(callback);
+    } });
+
+window.v = v;
+
 // ./lib-es5/models/model.js
 
 
@@ -321,13 +365,14 @@ var ObjectModel = /** @class */ (function (_super) {
     function ObjectModel(obj) {
         if (obj === void 0) { obj = {}; }
         var _this = this; _super.call(this);
+        _this.container = Object.create(null);
         Object.defineProperty(_this, 'listener', {
             value: new Listener,
             writable: false,
             configurable: false
         });
         for (var i in obj) {
-            Object.defineProperty(_this, i, {
+            Object.defineProperty(_this.container, i, {
                 value: obj[i],
                 configurable: true,
                 writable: true,
@@ -343,8 +388,7 @@ var ObjectModel = /** @class */ (function (_super) {
      * @return {*}
      */
     ObjectModel.prototype.get = function (key) {
-        var ts = this;
-        return ts[key];
+        return this.container[key];
     };
     /**
      * Sets an object property value
@@ -353,21 +397,19 @@ var ObjectModel = /** @class */ (function (_super) {
      * @return {ObjectModel} a pointer to this
      */
     ObjectModel.prototype.set = function (key, v) {
-        var ts = this;
-        // eslint-disable-next-line no-prototype-builtins
-        if (ts.hasOwnProperty(key)) {
-            this.listener.emitRemoved(key, ts[key]);
-            ts[key] = v;
+        if (Reflect.has(this.container, key)) {
+            this.listener.emitRemoved(key, this.container[key]);
+            this.container[key] = v;
         }
         else {
-            Object.defineProperty(ts, key, {
+            Object.defineProperty(this.container, key, {
                 value: v,
                 configurable: true,
                 writable: true,
                 enumerable: true
             });
         }
-        this.listener.emitAdded(key, ts[key]);
+        this.listener.emitAdded(key, this.container[key]);
         return this;
     };
     /**
@@ -375,12 +417,28 @@ var ObjectModel = /** @class */ (function (_super) {
      * @param key {string} property name
      */
     ObjectModel.prototype.delete = function (key) {
-        var ts = this;
-        if (ts[key]) {
-            this.listener.emitRemoved(key, ts[key]);
-            delete ts[key];
+        if (this.container[key]) {
+            this.listener.emitRemoved(key, this.container[key]);
+            delete this.container[key];
         }
     };
+    ObjectModel.prototype.proxy = function () {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var ts = this;
+        return new Proxy(this.container, {
+            get: function (target, p) {
+                return ts.get(p);
+            },
+            set: function (target, p, value) {
+                ts.set(p, value);
+                return true;
+            },
+            deleteProperty: function (target, p) {
+                ts.delete(p);
+                return true;
+            }
+        });
+    };
     ObjectModel.prototype.enableReactivity = function () {
         this.listener.enableReactivity();
     };
@@ -564,6 +622,15 @@ var ArrayModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    // proxy
+    ArrayModel.prototype.proxy = function () {
+        return new Proxy(this, {
+            set: function (target, p, value) {
+                target.splice(parseInt(p), 1, value);
+                return true;
+            }
+        });
+    };
     Object.defineProperty(ArrayModel.prototype, "last", {
         /* Array members */
         /**
@@ -774,6 +841,287 @@ var ArrayModel = /** @class */ (function (_super) {
 
 window.ArrayModel = ArrayModel;
 
+// ./lib-es5/functional/merge.js
+function merge(main) {
+    var targets = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        targets[_i - 1] = arguments[_i];
+    }
+    function refactorClass(obj) {
+        if (Array.isArray(obj.class)) {
+            var out_1 = {
+                $: []
+            };
+            obj.class.forEach(function (item) {
+                if (item instanceof IValue) {
+                    out_1.$.push(item);
+                }
+                else if (typeof item === 'string') {
+                    out_1[item] = true;
+                }
+                else if (typeof item === 'object') {
+                    Object.assign(out_1, item);
+                }
+            });
+            obj.class = out_1;
+        }
+    }
+    refactorClass(main);
+    targets.forEach(function (target) {
+        Reflect.ownKeys(target).forEach(function (prop) {
+            var _a;
+            if (!Reflect.has(main, prop)) {
+                main[prop] = target[prop];
+            }
+            else if (typeof main[prop] === 'object' && typeof target[prop] === 'object') {
+                if (prop === 'class') {
+                    refactorClass(target);
+                }
+                if (prop === '$' && Array.isArray(main[prop]) && Array.isArray(target[prop])) {
+                    (_a = main.$).push.apply(_a, target.$);
+                }
+                else {
+                    merge(main[prop], target[prop]);
+                }
+            }
+        });
+    });
+}
+
+window.merge = merge;
+
+// ./lib-es5/functional/stack.js
+function app(renderer) {
+    return function (node, opts) {
+        return new App(node, opts).runFunctional(renderer, opts);
+    };
+}
+function component(renderer) {
+    return function (opts, callback) {
+        var component = new Component(opts);
+        if (!(current instanceof Fragment))
+            throw userError('missing parent node', 'out-of-context');
+        var ret;
+        if (callback)
+            opts.slot = callback;
+        current.create(component, function (node) {
+            ret = node.runFunctional(renderer, opts);
+        });
+        return ret;
+    };
+}
+function fragment(renderer) {
+    return function (opts, callback) {
+        var frag = new Fragment(opts);
+        if (!(current instanceof Fragment))
+            throw userError('missing parent node', 'out-of-context');
+        if (callback)
+            opts.slot = callback;
+        current.create(frag);
+        return frag.runFunctional(renderer, opts);
+    };
+}
+function extension(renderer) {
+    return function (opts, callback) {
+        var ext = new Extension(opts);
+        if (!(current instanceof Fragment))
+            throw userError('missing parent node', 'out-of-context');
+        if (callback)
+            opts.slot = callback;
+        current.create(ext);
+        return ext.runFunctional(renderer, opts);
+    };
+}
+function tag(name, opts, callback) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    return {
+        node: current.tag(name, opts, function (node) {
+            callback && node.runFunctional(callback);
+        })
+    };
+}
+function create(node, callback) {
+    if (!(current instanceof Fragment))
+        throw userError('missing current node', 'out-of-context');
+    current.create(node, function (node) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        callback && node.runFunctional.apply(node, __spreadArray([callback], args, false));
+    });
+    return node;
+}
+var vx = {
+    if: function (condition, callback) {
+        if (current instanceof Fragment) {
+            current.if(condition, function (node) { return node.runFunctional(callback); });
+        }
+        else {
+            throw userError("wrong use of `v.if` function", "logic-error");
+        }
+    },
+    else: function (callback) {
+        if (current instanceof Fragment) {
+            current.else(function (node) { return node.runFunctional(callback); });
+        }
+        else {
+            throw userError("wrong use of `v.else` function", "logic-error");
+        }
+    },
+    elif: function (condition, callback) {
+        if (current instanceof Fragment) {
+            current.elif(condition, function (node) { return node.runFunctional(callback); });
+        }
+        else {
+            throw userError("wrong use of `v.elif` function", "logic-error");
+        }
+    },
+    for: function (model, callback) {
+        if (model instanceof ArrayModel) {
+            // for arrays T & K are the same type
+            create(new ArrayView({ model: model }), callback);
+        }
+        else if (model instanceof MapModel) {
+            create(new MapView({ model: model }), callback);
+        }
+        else if (model instanceof SetModel) {
+            // for sets T & K are the same type
+            create(new SetView({ model: model }), callback);
+        }
+        else if (model instanceof ObjectModel) {
+            // for objects K is always string
+            create(new ObjectView({ model: model }), callback);
+        }
+        else {
+            throw userError("wrong use of `v.for` function", 'wrong-model');
+        }
+    },
+    watch: function (model, callback) {
+        var opts = { model: model };
+        create(new Watch(opts), callback);
+    },
+    nextTick: function (callback) {
+        var node = current;
+        window.setTimeout(function () {
+            node.runFunctional(callback);
+        }, 0);
+    }
+};
+
+window.app = app;
+window.component = component;
+window.fragment = fragment;
+window.extension = extension;
+window.tag = tag;
+window.create = create;
+window.vx = vx;
+
+// ./lib-es5/functional/models.js
+function arrayModel(arr) {
+    if (arr === void 0) { arr = []; }
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new ArrayModel(arr)).proxy();
+}
+function mapModel(map) {
+    if (map === void 0) { map = []; }
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new MapModel(map));
+}
+function setModel(arr) {
+    if (arr === void 0) { arr = []; }
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new SetModel(arr));
+}
+function objectModel(obj) {
+    if (obj === void 0) { obj = {}; }
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new ObjectModel(obj));
+}
+
+window.arrayModel = arrayModel;
+window.mapModel = mapModel;
+window.setModel = setModel;
+window.objectModel = objectModel;
+
+// ./lib-es5/functional/options.js
+
+
+
+// ./lib-es5/functional/reactivity.js
+function ref(value) {
+    var ref = current.ref(value);
+    return [ref, function (value) { return ref.$ = value; }];
+}
+function mirror(value) {
+    return current.mirror(value);
+}
+function forward(value) {
+    return current.forward(value);
+}
+function point(value) {
+    return current.point(value);
+}
+function expr(func) {
+    var values = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        values[_i - 1] = arguments[_i];
+    }
+    return current.expr.apply(current, __spreadArray([func], values, false));
+}
+function watch(func) {
+    var values = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        values[_i - 1] = arguments[_i];
+    }
+    current.watch.apply(current, __spreadArray([func], values, false));
+}
+function valueOf(value) {
+    return value.$;
+}
+function setValue(ref, value) {
+    if (ref instanceof Pointer && value instanceof IValue) {
+        ref.point(value);
+    }
+    else {
+        ref.$ = value instanceof IValue ? value.$ : value;
+    }
+}
+
+window.ref = ref;
+window.mirror = mirror;
+window.forward = forward;
+window.point = point;
+window.expr = expr;
+window.watch = watch;
+window.valueOf = valueOf;
+window.setValue = setValue;
+
+// ./lib-es5/functional/components.js
+function text(text) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    ;
+    current.text(text);
+}
+function debug(text) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    current.debug(text);
+}
+function predefine(slot, predefined) {
+    return slot || predefined;
+}
+
+window.text = text;
+window.debug = debug;
+window.predefine = predefine;
+
 // ./lib-es5/core/signal.js
 /**
  * Signal is an event generator
@@ -1104,7 +1452,7 @@ var Destroyable = /** @class */ (function () {
      * Make object fields non configurable
      * @protected
      */
-    Destroyable.prototype.$seal = function () {
+    Destroyable.prototype.seal = function () {
         var _this = this;
         var $ = this;
         Object.keys($).forEach(function (i) {
@@ -1137,7 +1485,7 @@ var Destroyable = /** @class */ (function () {
     /**
      * Garbage collector method
      */
-    Destroyable.prototype.$destroy = function () {
+    Destroyable.prototype.destroy = function () {
         // nothing here
     };
     return Destroyable;
@@ -1147,6 +1495,26 @@ var Destroyable = /** @class */ (function () {
 window.Destroyable = Destroyable;
 
 // ./lib-es5/core/ivalue.js
+var Switchable = /** @class */ (function (_super) {
+    __extends(Switchable, _super);
+    function Switchable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Enable update handlers triggering
+     */
+    Switchable.prototype.enable = function () {
+        throw notOverwritten();
+    };
+    /**
+     * disable update handlers triggering
+     */
+    Switchable.prototype.disable = function () {
+        throw notOverwritten();
+    };
+    return Switchable;
+}(Destroyable));
+
 /**
  * Interface which describes a value
  * @class IValue
@@ -1194,28 +1562,29 @@ var IValue = /** @class */ (function (_super) {
     IValue.prototype.off = function (handler) {
         throw notOverwritten();
     };
-    /**
-     * Enable update handlers triggering
-     */
-    IValue.prototype.enable = function () {
-        throw notOverwritten();
-    };
-    /**
-     * disable update handlers triggering
-     */
-    IValue.prototype.disable = function () {
-        throw notOverwritten();
-    };
     return IValue;
-}(Destroyable));
+}(Switchable));
 
 
+window.Switchable = Switchable;
 window.IValue = IValue;
 
 // ./lib-es5/index.js
 
 
 
+// ./lib-es5/spec/svg.js
+
+
+
+// ./lib-es5/spec/react.js
+
+
+
+// ./lib-es5/spec/html.js
+
+
+
 // ./lib-es5/value/expression.js
 /**
  * Bind some values to one expression
@@ -1224,13 +1593,22 @@ window.IValue = IValue;
  */
 var Expression = /** @class */ (function (_super) {
     __extends(Expression, _super);
-    function Expression(func, link, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+    /**
+     * Creates a function bounded to N values
+     * @param func {Function} the function to bound
+     * @param values
+     * @param link {Boolean} links immediately if true
+     */
+    function Expression(func, link) {
+        var values = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            values[_i - 2] = arguments[_i];
+        }
         var _this = _super.call(this, false) || this;
         /**
          * Expression will link different handler for each value of list
          */
         _this.linkedFunc = [];
-        var values = [v1, v2, v3, v4, v5, v6, v7, v8, v9].filter(function (v) { return v instanceof IValue; });
         var handler = function (i) {
             if (i != null) {
                 _this.valuesCache[i] = _this.values[i].$;
@@ -1239,14 +1617,12 @@ var Expression = /** @class */ (function (_super) {
         };
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        _this.valuesCache = values.map(function (iValue) { return iValue.$; });
+        _this.valuesCache = values.map(function (item) { return item.$; });
         _this.sync = new Reference(func.apply(_this, _this.valuesCache));
         var i = 0;
         values.forEach(function () {
             _this.linkedFunc.push(handler.bind(_this, Number(i++)));
         });
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         _this.values = values;
         _this.func = handler;
         if (link) {
@@ -1255,7 +1631,7 @@ var Expression = /** @class */ (function (_super) {
         else {
             handler();
         }
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     Object.defineProperty(Expression.prototype, "$", {
@@ -1296,12 +1672,12 @@ var Expression = /** @class */ (function (_super) {
         }
         return this;
     };
-    Expression.prototype.$destroy = function () {
+    Expression.prototype.destroy = function () {
         this.disable();
         this.values.splice(0);
         this.valuesCache.splice(0);
         this.linkedFunc.splice(0);
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return Expression;
 }(IValue));
@@ -1324,7 +1700,7 @@ var Reference = /** @class */ (function (_super) {
         var _this = _super.call(this, true) || this;
         _this.value = value;
         _this.onchange = new Set;
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     Object.defineProperty(Reference.prototype, "$", {
@@ -1352,22 +1728,18 @@ var Reference = /** @class */ (function (_super) {
             });
             this.isEnabled = true;
         }
-        return this;
     };
     Reference.prototype.disable = function () {
         this.isEnabled = false;
-        return this;
     };
     Reference.prototype.on = function (handler) {
         this.onchange.add(handler);
-        return this;
     };
     Reference.prototype.off = function (handler) {
         this.onchange.delete(handler);
-        return this;
     };
-    Reference.prototype.$destroy = function () {
-        _super.prototype.$destroy.call(this);
+    Reference.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
         this.onchange.clear();
     };
     return Reference;
@@ -1399,7 +1771,7 @@ var Mirror = /** @class */ (function (_super) {
         _this.pointedValue = value;
         _this.forwardOnly = forwardOnly;
         value.on(_this.handler);
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     Object.defineProperty(Mirror.prototype, "$", {
@@ -1410,13 +1782,13 @@ var Mirror = /** @class */ (function (_super) {
             return _super.prototype.$;
         },
         set: function (v) {
+            if (!this.forwardOnly) {
+                this.pointedValue.$ = v;
+            }
             // this is a ts bug
             // eslint-disable-next-line
             // @ts-ignore
             _super.prototype.$ = v;
-            if (!this.forwardOnly) {
-                this.pointedValue.$ = v;
-            }
         },
         enumerable: false,
         configurable: true
@@ -1427,18 +1799,16 @@ var Mirror = /** @class */ (function (_super) {
             this.pointedValue.on(this.handler);
             this.$ = this.pointedValue.$;
         }
-        return this;
     };
     Mirror.prototype.disable = function () {
         if (this.isEnabled) {
             this.pointedValue.off(this.handler);
             this.isEnabled = false;
         }
-        return this;
     };
-    Mirror.prototype.$destroy = function () {
+    Mirror.prototype.destroy = function () {
         this.disable();
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return Mirror;
 }(Reference));
@@ -1489,34 +1859,25 @@ var Binding = /** @class */ (function (_super) {
     __extends(Binding, _super);
     /**
      * Constructs a common binding logic
-     * @param node {INode} the vasille node
-     * @param name {String} the name of property/attribute/class
      * @param value {IValue} the value to bind
      */
-    function Binding(node, name, value) {
+    function Binding(value) {
         var _this = this; _super.call(this);
-        _this.updateFunc = _this.bound(name).bind(null, node);
         _this.binding = value;
-        _this.binding.on(_this.updateFunc);
-        _this.updateFunc(_this.binding.$);
-        _this.$seal();
+        _this.seal();
         return _this;
     }
-    /**
-     * Is a virtual function to get the specific bind function
-     * @param name {String} the name of attribute/property
-     * @returns {Function} a function to update attribute/property value
-     * @throws Always throws and must be overloaded in child class
-     */
-    Binding.prototype.bound = function (name) {
-        throw notOverwritten();
+    Binding.prototype.init = function (bounded) {
+        this.func = bounded;
+        this.binding.on(this.func);
+        this.func(this.binding.$);
     };
     /**
      * Just clear bindings
      */
-    Binding.prototype.$destroy = function () {
-        this.binding.off(this.updateFunc);
-        _super.prototype.$destroy.call(this);
+    Binding.prototype.destroy = function () {
+        this.binding.off(this.func);
+        _super.prototype.destroy.call(this);
     };
     return Binding;
 }(Destroyable));
@@ -1525,6 +1886,15 @@ var Binding = /** @class */ (function (_super) {
 window.Binding = Binding;
 
 // ./lib-es5/core/core.js
+var current = null;
+var currentStack = [];
+function stack(node) {
+    currentStack.push(current);
+    current = node;
+}
+function unstack() {
+    current = currentStack.pop();
+}
 /**
  * Private stuff of a reactive object
  * @class ReactivePrivate
@@ -1558,17 +1928,19 @@ var ReactivePrivate = /** @class */ (function (_super) {
          * @type {boolean}
          */
         _this.frozen = false;
-        _this.$seal();
+        _this.seal();
         return _this;
     }
-    ReactivePrivate.prototype.$destroy = function () {
-        var _a;
-        this.watch.forEach(function (value) { return value.$destroy(); });
+    ReactivePrivate.prototype.destroy = function () {
+        this.watch.forEach(function (value) { return value.destroy(); });
         this.watch.clear();
-        this.bindings.forEach(function (binding) { return binding.$destroy(); });
+        this.bindings.forEach(function (binding) { return binding.destroy(); });
         this.bindings.clear();
-        (_a = this.freezeExpr) === null || _a === void 0 ? void 0 : _a.$destroy();
-        _super.prototype.$destroy.call(this);
+        this.models.forEach(function (model) { return model.disableReactivity(); });
+        this.models.clear();
+        this.freezeExpr && this.freezeExpr.destroy();
+        this.onDestroy && this.onDestroy();
+        _super.prototype.destroy.call(this);
     };
     return ReactivePrivate;
 }(Destroyable));
@@ -1580,16 +1952,28 @@ var ReactivePrivate = /** @class */ (function (_super) {
  */
 var Reactive = /** @class */ (function (_super) {
     __extends(Reactive, _super);
-    function Reactive($) {
+    function Reactive(input, $) {
         var _this = this; _super.call(this);
+        _this.input = input;
         _this.$ = $ || new ReactivePrivate;
+        _this.seal();
         return _this;
     }
+    Object.defineProperty(Reactive.prototype, "parent", {
+        /**
+         * Get parent node
+         */
+        get: function () {
+            return this.$.parent;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Create a reference
      * @param value {*} value to reference
      */
-    Reactive.prototype.$ref = function (value) {
+    Reactive.prototype.ref = function (value) {
         var $ = this.$;
         var ref = new Reference(value);
         $.watch.add(ref);
@@ -1599,7 +1983,7 @@ var Reactive = /** @class */ (function (_super) {
      * Create a mirror
      * @param value {IValue} value to mirror
      */
-    Reactive.prototype.$mirror = function (value) {
+    Reactive.prototype.mirror = function (value) {
         var mirror = new Mirror(value, false);
         this.$.watch.add(mirror);
         return mirror;
@@ -1608,7 +1992,7 @@ var Reactive = /** @class */ (function (_super) {
      * Create a forward-only mirror
      * @param value {IValue} value to mirror
      */
-    Reactive.prototype.$forward = function (value) {
+    Reactive.prototype.forward = function (value) {
         var mirror = new Mirror(value, true);
         this.$.watch.add(mirror);
         return mirror;
@@ -1618,15 +2002,10 @@ var Reactive = /** @class */ (function (_super) {
      * @param value {*} default value to point
      * @param forwardOnly {boolean} forward only sync
      */
-    Reactive.prototype.$point = function (value, forwardOnly) {
+    Reactive.prototype.point = function (value, forwardOnly) {
         if (forwardOnly === void 0) { forwardOnly = false; }
         var $ = this.$;
-        var ref = value instanceof IValue ? value : new Reference(value);
-        var pointer = new Pointer(ref, forwardOnly);
-        // when value is an ivalue will be equal to ref
-        if (value !== ref) {
-            $.watch.add(ref);
-        }
+        var pointer = new Pointer(value, forwardOnly);
         $.watch.add(pointer);
         return pointer;
     };
@@ -1634,16 +2013,35 @@ var Reactive = /** @class */ (function (_super) {
      * Register a model
      * @param model
      */
-    Reactive.prototype.$register = function (model) {
+    Reactive.prototype.register = function (model) {
         this.$.models.add(model);
         return model;
     };
-    Reactive.prototype.$watch = function (func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+    /**
+     * Creates a watcher
+     * @param func {function} function to run on any argument change
+     * @param values
+     */
+    Reactive.prototype.watch = function (func) {
+        var values = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            values[_i - 1] = arguments[_i];
+        }
         var $ = this.$;
-        $.watch.add(new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9));
+        $.watch.add(new (Expression.bind.apply(Expression, __spreadArray([void 0, func, !this.$.frozen], values, false)))());
     };
-    Reactive.prototype.$bind = function (func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
-        var res = new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+    /**
+     * Creates a computed value
+     * @param func {function} function to run on any argument change
+     * @param values
+     * @return {IValue} the created ivalue
+     */
+    Reactive.prototype.expr = function (func) {
+        var values = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            values[_i - 1] = arguments[_i];
+        }
+        var res = new (Expression.bind.apply(Expression, __spreadArray([void 0, func, !this.$.frozen], values, false)))();
         var $ = this.$;
         $.watch.add(res);
         return res;
@@ -1651,7 +2049,7 @@ var Reactive = /** @class */ (function (_super) {
     /**
      * Enable reactivity of fields
      */
-    Reactive.prototype.$enable = function () {
+    Reactive.prototype.enable = function () {
         var $ = this.$;
         if (!$.enabled) {
             $.watch.forEach(function (watcher) {
@@ -1666,7 +2064,7 @@ var Reactive = /** @class */ (function (_super) {
     /**
      * Disable reactivity of fields
      */
-    Reactive.prototype.$disable = function () {
+    Reactive.prototype.disable = function () {
         var $ = this.$;
         if ($.enabled) {
             $.watch.forEach(function (watcher) {
@@ -1684,7 +2082,7 @@ var Reactive = /** @class */ (function (_super) {
      * @param onOff {function} on show feedback
      * @param onOn {function} on hide feedback
      */
-    Reactive.prototype.$bindAlive = function (cond, onOff, onOn) {
+    Reactive.prototype.bindAlive = function (cond, onOff, onOn) {
         var _this = this;
         var $ = this.$;
         if ($.freezeExpr) {
@@ -1697,24 +2095,51 @@ var Reactive = /** @class */ (function (_super) {
             $.frozen = !cond;
             if (cond) {
                 onOn === null || onOn === void 0 ? void 0 : onOn();
-                _this.$enable();
+                _this.enable();
             }
             else {
                 onOff === null || onOff === void 0 ? void 0 : onOff();
-                _this.$disable();
+                _this.disable();
             }
         }, true, cond);
         return this;
     };
-    Reactive.prototype.$destroy = function () {
-        _super.prototype.$destroy.call(this);
-        this.$.$destroy();
+    Reactive.prototype.init = function () {
+        this.applyOptions(this.input);
+        this.compose(this.input);
+    };
+    Reactive.prototype.applyOptions = function (input) {
+        // empty
+    };
+    Reactive.prototype.compose = function (input) {
+        // empty
+    };
+    Reactive.prototype.runFunctional = function (f) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        stack(this);
+        // yet another ts bug
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        var result = f.apply(void 0, args);
+        unstack();
+        return result;
+    };
+    Reactive.prototype.runOnDestroy = function (func) {
+        this.$.onDestroy = func;
+    };
+    Reactive.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.$.destroy();
         this.$ = null;
     };
     return Reactive;
 }(Destroyable));
 
 
+window.current = current;
 window.ReactivePrivate = ReactivePrivate;
 window.Reactive = Reactive;
 
@@ -1728,7 +2153,7 @@ var FragmentPrivate = /** @class */ (function (_super) {
     __extends(FragmentPrivate, _super);
     function FragmentPrivate() {
         var _this = this; _super.call(this);
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     /**
@@ -1743,10 +2168,10 @@ var FragmentPrivate = /** @class */ (function (_super) {
     /**
      * Unlinks all bindings
      */
-    FragmentPrivate.prototype.$destroy = function () {
+    FragmentPrivate.prototype.destroy = function () {
         this.next = null;
         this.prev = null;
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return FragmentPrivate;
 }(ReactivePrivate));
@@ -1759,16 +2184,17 @@ var Fragment = /** @class */ (function (_super) {
     __extends(Fragment, _super);
     /**
      * Constructs a Vasille Node
+     * @param input
      * @param $ {FragmentPrivate}
      */
-    function Fragment($) {
-        var _this = this; _super.call(this);
+    function Fragment(input, $) {
+        var _this = _super.call(this, input, $ || new FragmentPrivate) || this;
         /**
          * The children list
          * @type Array
          */
-        _this.$children = [];
-        _this.$ = $ || new FragmentPrivate;
+        _this.children = new Set;
+        _this.lastChild = null;
         return _this;
     }
     Object.defineProperty(Fragment.prototype, "app", {
@@ -1787,43 +2213,16 @@ var Fragment = /** @class */ (function (_super) {
      * @param parent {Fragment} parent of node
      * @param data {*} additional data
      */
-    Fragment.prototype.$preinit = function (app, parent, data) {
+    Fragment.prototype.preinit = function (app, parent, data) {
         var $ = this.$;
         $.preinit(app, parent);
     };
-    /**
-     * Initialize node
-     */
-    Fragment.prototype.$init = function () {
-        this.$createSignals();
-        this.$createWatchers();
-        this.$created();
-        this.$compose();
-        this.$mounted();
-        return this;
-    };
-    /** To be overloaded: created event handler */
-    Fragment.prototype.$created = function () {
-        // empty
-    };
-    /** To be overloaded: mounted event handler */
-    Fragment.prototype.$mounted = function () {
-        // empty
+    Fragment.prototype.compose = function (input) {
+        _super.prototype.compose.call(this, input);
+        input.slot && input.slot(this);
     };
     /** To be overloaded: ready event handler */
-    Fragment.prototype.$ready = function () {
-        // empty
-    };
-    /** To be overloaded: signals creation milestone */
-    Fragment.prototype.$createSignals = function () {
-        // empty
-    };
-    /** To be overloaded: watchers creation milestone */
-    Fragment.prototype.$createWatchers = function () {
-        // empty
-    };
-    /** To be overloaded: DOM creation milestone */
-    Fragment.prototype.$compose = function () {
+    Fragment.prototype.ready = function () {
         // empty
     };
     /**
@@ -1831,27 +2230,23 @@ var Fragment = /** @class */ (function (_super) {
      * @param node {Fragment} A node to push
      * @protected
      */
-    Fragment.prototype.$$pushNode = function (node) {
-        var lastChild = null;
-        if (this.$children.length) {
-            lastChild = this.$children[this.$children.length - 1];
+    Fragment.prototype.pushNode = function (node) {
+        if (this.lastChild) {
+            this.lastChild.$.next = node;
         }
-        if (lastChild) {
-            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
      */
-    Fragment.prototype.$$findFirstChild = function () {
+    Fragment.prototype.findFirstChild = function () {
         var first;
-        this.$children.forEach(function (child) {
-            first = first || child.$$findFirstChild();
+        this.children.forEach(function (child) {
+            first = first || child.findFirstChild();
         });
         return first;
     };
@@ -1859,30 +2254,30 @@ var Fragment = /** @class */ (function (_super) {
      * Append a node to end of element
      * @param node {Node} node to insert
      */
-    Fragment.prototype.$$appendNode = function (node) {
+    Fragment.prototype.appendNode = function (node) {
         var $ = 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
      */
-    Fragment.prototype.$$insertAdjacent = function (node) {
-        var child = this.$$findFirstChild();
+    Fragment.prototype.insertAdjacent = function (node) {
+        var child = this.findFirstChild();
         var $ = 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);
         }
     };
     /**
@@ -1890,60 +2285,49 @@ var Fragment = /** @class */ (function (_super) {
      * @param text {String | IValue} A text fragment string
      * @param cb {function (TextNode)} Callback if previous is slot name
      */
-    Fragment.prototype.$text = function (text, cb) {
+    Fragment.prototype.text = function (text, cb) {
         var $ = this.$;
         var node = new TextNode();
-        var textValue = text instanceof IValue ? text : this.$ref(text);
-        node.$preinit($.app, this, textValue);
-        this.$$pushNode(node);
-        if (cb) {
-            $.app.$run.callCallback(function () {
-                cb(node);
-            });
-        }
-        return this;
+        node.preinit($.app, this, text);
+        this.pushNode(node);
+        cb && cb(node);
     };
-    Fragment.prototype.$debug = function (text) {
-        if (this.$.app.$debugUi) {
+    Fragment.prototype.debug = function (text) {
+        if (this.$.app.debugUi) {
             var node = new DebugNode();
-            node.$preinit(this.$.app, this, text);
-            this.$$pushNode(node);
+            node.preinit(this.$.app, this, text);
+            this.pushNode(node);
         }
-        return this;
     };
-    Fragment.prototype.$tag = function (tagName, cb) {
+    /**
+     * Defines a tag element
+     * @param tagName {String} the tag name
+     * @param input
+     * @param cb {function(Tag, *)} callback
+     */
+    Fragment.prototype.tag = function (tagName, input, cb) {
         var $ = this.$;
-        var node = new Tag();
-        node.$preinit($.app, this, tagName);
-        node.$init();
-        this.$$pushNode(node);
-        $.app.$run.callCallback(function () {
-            if (cb) {
-                cb(node, node.node);
-            }
-            node.$ready();
-        });
-        return this;
+        var 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($ : *)}
      */
-    Fragment.prototype.$create = function (node, callback, callback1) {
+    Fragment.prototype.create = function (node, callback) {
         var $ = 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
@@ -1951,36 +2335,29 @@ var Fragment = /** @class */ (function (_super) {
      * @param cb {function(Fragment)} callback to run on true
      * @return {this}
      */
-    Fragment.prototype.$if = function (cond, cb) {
-        return this.$switch({ cond: cond, cb: cb });
+    Fragment.prototype.if = function (cond, cb) {
+        var 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
-     */
-    Fragment.prototype.$if_else = function (ifCond, ifCb, elseCb) {
-        return this.$switch({ cond: ifCond, cb: ifCb }, { cond: trueIValue, cb: elseCb });
+    Fragment.prototype.else = function (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}
-     */
-    Fragment.prototype.$switch = function () {
-        var cases = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            cases[_i] = arguments[_i];
+    Fragment.prototype.elif = function (cond, cb) {
+        if (this.lastChild instanceof SwitchedNode) {
+            this.lastChild.addCase(this.case(cond, cb));
+        }
+        else {
+            throw userError('wrong `elif` function use', 'logic-error');
         }
-        var $ = this.$;
-        var node = new SwitchedNode();
-        node.$preinit($.app, this);
-        node.$init();
-        this.$$pushNode(node);
-        node.setCases(cases);
-        node.$ready();
-        return this;
     };
     /**
      * Create a case for switch
@@ -1988,23 +2365,48 @@ var Fragment = /** @class */ (function (_super) {
      * @param cb {function(Fragment) : void}
      * @return {{cond : IValue, cb : (function(Fragment) : void)}}
      */
-    Fragment.prototype.$case = function (cond, cb) {
+    Fragment.prototype.case = function (cond, cb) {
         return { cond: cond, cb: cb };
     };
     /**
      * @param cb {(function(Fragment) : void)}
      * @return {{cond : IValue, cb : (function(Fragment) : void)}}
      */
-    Fragment.prototype.$default = function (cb) {
+    Fragment.prototype.default = function (cb) {
         return { cond: trueIValue, cb: cb };
     };
-    Fragment.prototype.$destroy = function () {
-        for (var _i = 0, _a = this.$children; _i < _a.length; _i++) {
-            var child = _a[_i];
-            child.$destroy();
+    Fragment.prototype.insertBefore = function (node) {
+        var $ = this.$;
+        node.$.prev = $.prev;
+        node.$.next = this;
+        if ($.prev) {
+            $.prev.$.next = node;
+        }
+        $.prev = node;
+    };
+    Fragment.prototype.insertAfter = function (node) {
+        var $ = this.$;
+        node.$.prev = this;
+        node.$.next = $.next;
+        $.next = node;
+    };
+    Fragment.prototype.remove = function () {
+        var $ = this.$;
+        if ($.next) {
+            $.next.$.prev = $.prev;
+        }
+        if ($.prev) {
+            $.prev.$.next = $.next;
+        }
+    };
+    Fragment.prototype.destroy = function () {
+        this.children.forEach(function (child) { return child.destroy(); });
+        this.children.clear();
+        this.lastChild = null;
+        if (this.$.parent.lastChild === this) {
+            this.$.parent.lastChild = this.$.prev;
         }
-        this.$children.splice(0);
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return Fragment;
 }(Reactive));
@@ -2019,28 +2421,30 @@ var TextNodePrivate = /** @class */ (function (_super) {
     __extends(TextNodePrivate, _super);
     function TextNodePrivate() {
         var _this = this; _super.call(this);
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     /**
      * Pre-initializes a text node
      * @param app {AppNode} the app node
+     * @param parent
      * @param text {IValue}
      */
     TextNodePrivate.prototype.preinitText = function (app, parent, text) {
         var _this = this;
         _super.prototype.preinit.call(this, app, parent);
-        this.node = document.createTextNode(text.$);
-        this.bindings.add(new Expression(function (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(function (v) {
+                _this.node.replaceData(0, -1, v);
+            }, true, text));
+        }
     };
     /**
      * Clear node data
      */
-    TextNodePrivate.prototype.$destroy = function () {
-        _super.prototype.$destroy.call(this);
+    TextNodePrivate.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
     };
     return TextNodePrivate;
 }(FragmentPrivate));
@@ -2052,26 +2456,27 @@ var TextNodePrivate = /** @class */ (function (_super) {
  */
 var TextNode = /** @class */ (function (_super) {
     __extends(TextNode, _super);
-    function TextNode() {
-        var _this = this; _super.call(this);
-        _this.$ = new TextNodePrivate();
-        _this.$seal();
+    function TextNode($) {
+        if ($ === void 0) { $ = new TextNodePrivate(); }
+        var _this = _super.call(this, {}, $) || this;
+        _this.seal();
         return _this;
     }
-    TextNode.prototype.$preinit = function (app, parent, text) {
+    TextNode.prototype.preinit = function (app, parent, text) {
         var $ = this.$;
         if (!text) {
             throw internalError('wrong TextNode::$preninit call');
         }
         $.preinitText(app, parent, text);
+        $.parent.appendNode($.node);
     };
-    TextNode.prototype.$$findFirstChild = function () {
+    TextNode.prototype.findFirstChild = function () {
         return this.$.node;
     };
-    TextNode.prototype.$destroy = function () {
+    TextNode.prototype.destroy = function () {
         this.$.node.remove();
-        this.$.$destroy();
-        _super.prototype.$destroy.call(this);
+        this.$.destroy();
+        _super.prototype.destroy.call(this);
     };
     return TextNode;
 }(Fragment));
@@ -2090,11 +2495,11 @@ var INodePrivate = /** @class */ (function (_super) {
          * @type {boolean}
          */
         _this.unmounted = false;
-        _this.$seal();
+        _this.seal();
         return _this;
     }
-    INodePrivate.prototype.$destroy = function () {
-        _super.prototype.$destroy.call(this);
+    INodePrivate.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
     };
     return INodePrivate;
 }(FragmentPrivate));
@@ -2108,11 +2513,12 @@ var INode = /** @class */ (function (_super) {
     __extends(INode, _super);
     /**
      * Constructs a base node
+     * @param input
      * @param $ {?INodePrivate}
      */
-    function INode($) {
-        var _this = _super.call(this, $ || new INodePrivate) || this;
-        _this.$seal();
+    function INode(input, $) {
+        var _this = _super.call(this, input, $ || new INodePrivate) || this;
+        _this.seal();
         return _this;
     }
     Object.defineProperty(INode.prototype, "node", {
@@ -2126,82 +2532,54 @@ var INode = /** @class */ (function (_super) {
         configurable: true
     });
     /**
-     * Initialize node
+     * Bind attribute value
+     * @param name {String} name of attribute
+     * @param value {IValue} value
      */
-    INode.prototype.$init = function () {
-        this.$createSignals();
-        this.$createWatchers();
-        this.$createAttrs();
-        this.$createStyle();
-        this.$created();
-        this.$compose();
-        this.$mounted();
-        return this;
-    };
-    /** To be overloaded: attributes creation milestone */
-    INode.prototype.$createAttrs = function () {
-        // empty
-    };
-    /** To be overloaded: $style attributes creation milestone */
-    INode.prototype.$createStyle = function () {
-        // empty
-    };
-    /**
-     * Bind attribute value
-     * @param name {String} name of attribute
-     * @param value {IValue} value
-     */
-    INode.prototype.$attr = function (name, value) {
-        var $ = this.$;
-        var attr = new AttributeBinding(this, name, value);
-        $.bindings.add(attr);
-        return this;
-    };
-    INode.prototype.$bindAttr = function (name, calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
-        var $ = this.$;
-        var expr = this.$bind(calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9);
-        $.bindings.add(new AttributeBinding(this, name, expr));
-        return this;
+    INode.prototype.attr = function (name, value) {
+        var $ = this.$;
+        var attr = new AttributeBinding(this, name, value);
+        $.bindings.add(attr);
     };
     /**
      * Set attribute value
      * @param name {string} name of attribute
      * @param value {string} value
      */
-    INode.prototype.$setAttr = function (name, value) {
-        this.$.app.$run.setAttribute(this.$.node, name, value);
+    INode.prototype.setAttr = function (name, value) {
+        if (typeof value === 'boolean') {
+            if (value) {
+                this.$.node.setAttribute(name, "");
+            }
+        }
+        else {
+            this.$.node.setAttribute(name, "".concat(value));
+        }
         return this;
     };
     /**
      * Adds a CSS class
      * @param cl {string} Class name
      */
-    INode.prototype.$addClass = function (cl) {
-        this.$.app.$run.addClass(this.$.node, cl);
+    INode.prototype.addClass = function (cl) {
+        this.$.node.classList.add(cl);
         return this;
     };
     /**
      * Adds some CSS classes
      * @param cls {...string} classes names
      */
-    INode.prototype.$addClasses = function () {
-        var _this = this;
-        var cls = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            cls[_i] = arguments[_i];
-        }
-        cls.forEach(function (cl) {
-            _this.$.app.$run.addClass(_this.$.node, cl);
-        });
+    INode.prototype.removeClasse = function (cl) {
+        this.$.node.classList.remove(cl);
         return this;
     };
     /**
      * Bind a CSS class
      * @param className {IValue}
      */
-    INode.prototype.$bindClass = function (className) {
+    INode.prototype.bindClass = function (className) {
         var $ = this.$;
-        $.bindings.add(new ClassBinding(this, "", className));
+        $.bindings.add(new DynamicalClassBinding(this, className));
         return this;
     };
     /**
@@ -2209,8 +2587,8 @@ var INode = /** @class */ (function (_super) {
      * @param cond {IValue} condition
      * @param className {string} class name
      */
-    INode.prototype.$floatingClass = function (cond, className) {
-        this.$.bindings.add(new ClassBinding(this, className, cond));
+    INode.prototype.floatingClass = function (cond, className) {
+        this.$.bindings.add(new StaticClassBinding(this, className, cond));
         return this;
     };
     /**
@@ -2218,7 +2596,7 @@ var INode = /** @class */ (function (_super) {
      * @param name {String} name of style attribute
      * @param value {IValue} value
      */
-    INode.prototype.$style = function (name, value) {
+    INode.prototype.style = function (name, value) {
         var $ = this.$;
         if ($.node instanceof HTMLElement) {
             $.bindings.add(new StyleBinding(this, name, value));
@@ -2228,28 +2606,17 @@ var INode = /** @class */ (function (_super) {
         }
         return this;
     };
-    INode.prototype.$bindStyle = function (name, calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
-        var $ = this.$;
-        var 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
      */
-    INode.prototype.$setStyle = function (prop, value) {
+    INode.prototype.setStyle = function (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;
     };
@@ -2259,403 +2626,24 @@ var INode = /** @class */ (function (_super) {
      * @param handler {function (Event)} Event handler
      * @param options {Object | boolean} addEventListener options
      */
-    INode.prototype.$listen = function (name, handler, options) {
+    INode.prototype.listen = function (name, handler, options) {
         this.$.node.addEventListener(name, handler, options);
         return this;
     };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$oncontextmenu = function (handler, options) {
-        return this.$listen("contextmenu", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onmousedown = function (handler, options) {
-        return this.$listen("mousedown", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onmouseenter = function (handler, options) {
-        return this.$listen("mouseenter", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onmouseleave = function (handler, options) {
-        return this.$listen("mouseleave", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onmousemove = function (handler, options) {
-        return this.$listen("mousemove", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onmouseout = function (handler, options) {
-        return this.$listen("mouseout", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onmouseover = function (handler, options) {
-        return this.$listen("mouseover", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onmouseup = function (handler, options) {
-        return this.$listen("mouseup", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onclick = function (handler, options) {
-        return this.$listen("click", handler, options);
-    };
-    /**
-     * @param handler {function (MouseEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondblclick = function (handler, options) {
-        return this.$listen("dblclick", handler, options);
-    };
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onblur = function (handler, options) {
-        return this.$listen("blur", handler, options);
-    };
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onfocus = function (handler, options) {
-        return this.$listen("focus", handler, options);
-    };
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onfocusin = function (handler, options) {
-        return this.$listen("focusin", handler, options);
-    };
-    /**
-     * @param handler {function (FocusEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onfocusout = function (handler, options) {
-        return this.$listen("focusout", handler, options);
-    };
-    /**
-     * @param handler {function (KeyboardEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onkeydown = function (handler, options) {
-        return this.$listen("keydown", handler, options);
-    };
-    /**
-     * @param handler {function (KeyboardEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onkeyup = function (handler, options) {
-        return this.$listen("keyup", handler, options);
-    };
-    /**
-     * @param handler {function (KeyboardEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onkeypress = function (handler, options) {
-        return this.$listen("keypress", handler, options);
-    };
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ontouchstart = function (handler, options) {
-        return this.$listen("touchstart", handler, options);
-    };
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ontouchmove = function (handler, options) {
-        return this.$listen("touchmove", handler, options);
-    };
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ontouchend = function (handler, options) {
-        return this.$listen("touchend", handler, options);
-    };
-    /**
-     * @param handler {function (TouchEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ontouchcancel = function (handler, options) {
-        return this.$listen("touchcancel", handler, options);
-    };
-    /**
-     * @param handler {function (WheelEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onwheel = function (handler, options) {
-        return this.$listen("wheel", handler, options);
-    };
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onabort = function (handler, options) {
-        return this.$listen("abort", handler, options);
-    };
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onerror = function (handler, options) {
-        return this.$listen("error", handler, options);
-    };
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onload = function (handler, options) {
-        return this.$listen("load", handler, options);
-    };
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onloadend = function (handler, options) {
-        return this.$listen("loadend", handler, options);
-    };
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onloadstart = function (handler, options) {
-        return this.$listen("loadstart", handler, options);
-    };
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onprogress = function (handler, options) {
-        return this.$listen("progress", handler, options);
-    };
-    /**
-     * @param handler {function (ProgressEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ontimeout = function (handler, options) {
-        return this.$listen("timeout", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondrag = function (handler, options) {
-        return this.$listen("drag", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondragend = function (handler, options) {
-        return this.$listen("dragend", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondragenter = function (handler, options) {
-        return this.$listen("dragenter", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondragexit = function (handler, options) {
-        return this.$listen("dragexit", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondragleave = function (handler, options) {
-        return this.$listen("dragleave", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondragover = function (handler, options) {
-        return this.$listen("dragover", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondragstart = function (handler, options) {
-        return this.$listen("dragstart", handler, options);
-    };
-    /**
-     * @param handler {function (DragEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ondrop = function (handler, options) {
-        return this.$listen("drop", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointerover = function (handler, options) {
-        return this.$listen("pointerover", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointerenter = function (handler, options) {
-        return this.$listen("pointerenter", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointerdown = function (handler, options) {
-        return this.$listen("pointerdown", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointermove = function (handler, options) {
-        return this.$listen("pointermove", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointerup = function (handler, options) {
-        return this.$listen("pointerup", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointercancel = function (handler, options) {
-        return this.$listen("pointercancel", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointerout = function (handler, options) {
-        return this.$listen("pointerout", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpointerleave = function (handler, options) {
-        return this.$listen("pointerleave", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$ongotpointercapture = function (handler, options) {
-        return this.$listen("gotpointercapture", handler, options);
-    };
-    /**
-     * @param handler {function (PointerEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onlostpointercapture = function (handler, options) {
-        return this.$listen("lostpointercapture", handler, options);
-    };
-    /**
-     * @param handler {function (AnimationEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onanimationstart = function (handler, options) {
-        return this.$listen("animationstart", handler, options);
-    };
-    /**
-     * @param handler {function (AnimationEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onanimationend = function (handler, options) {
-        return this.$listen("animationend", handler, options);
-    };
-    /**
-     * @param handler {function (AnimationEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onanimationiteraton = function (handler, options) {
-        return this.$listen("animationiteration", handler, options);
-    };
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onclipboardchange = function (handler, options) {
-        return this.$listen("clipboardchange", handler, options);
-    };
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$oncut = function (handler, options) {
-        return this.$listen("cut", handler, options);
-    };
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$oncopy = function (handler, options) {
-        return this.$listen("copy", handler, options);
-    };
-    /**
-     * @param handler {function (ClipboardEvent)}
-     * @param options {Object | boolean}
-     */
-    INode.prototype.$onpaste = function (handler, options) {
-        return this.$listen("paste", handler, options);
-    };
-    INode.prototype.$$insertAdjacent = function (node) {
-        var $ = this.$;
-        $.app.$run.insertBefore($.node, node);
+    INode.prototype.insertAdjacent = function (node) {
+        this.$.node.parentNode.insertBefore(node, this.$.node);
     };
     /**
      * A v-show & ngShow alternative
      * @param cond {IValue} show condition
      */
-    INode.prototype.$bindShow = function (cond) {
+    INode.prototype.bindShow = function (cond) {
         var $ = this.$;
         var node = $.node;
         if (node instanceof HTMLElement) {
             var lastDisplay_1 = node.style.display;
             var htmlNode_1 = node;
-            return this.$bindAlive(cond, function () {
+            return this.bindAlive(cond, function () {
                 lastDisplay_1 = htmlNode_1.style.display;
                 htmlNode_1.style.display = 'none';
             }, function () {
@@ -2670,19 +2658,106 @@ var INode = /** @class */ (function (_super) {
      * bind HTML
      * @param value {IValue}
      */
-    INode.prototype.$html = function (value) {
+    INode.prototype.bindDomApi = function (name, value) {
         var $ = this.$;
         var node = $.node;
         if (node instanceof HTMLElement) {
-            node.innerHTML = value.$;
-            this.$watch(function (v) {
-                node.innerHTML = v;
+            node[name] = value.$;
+            this.watch(function (v) {
+                node[name] = v;
             }, value);
         }
         else {
             throw userError("HTML can be bound for HTML nodes only", "dom-error");
         }
     };
+    INode.prototype.applyOptions = function (options) {
+        var _this = this;
+        options["v:attr"] && Object.keys(options["v:attr"]).forEach(function (name) {
+            var value = options["v:attr"][name];
+            if (value instanceof IValue) {
+                _this.attr(name, value);
+            }
+            else {
+                _this.setAttr(name, value);
+            }
+        });
+        if (options.class) {
+            var handleClass_1 = function (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(function (item) {
+                    if (item instanceof IValue) {
+                        _this.bindClass(item);
+                    }
+                    else if (typeof item == "string") {
+                        _this.addClass(item);
+                    }
+                    else {
+                        Reflect.ownKeys(item).forEach(function (name) {
+                            handleClass_1(name, item[name]);
+                        });
+                    }
+                });
+            }
+            else {
+                options.class.$.forEach(function (item) {
+                    _this.bindClass(item);
+                });
+                Reflect.ownKeys(options.class).forEach(function (name) {
+                    handleClass_1(name, options.class[name]);
+                });
+            }
+        }
+        options.style && Object.keys(options.style).forEach(function (name) {
+            var 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(function (v) { return v + value[1]; }, value[0]));
+                }
+                else {
+                    _this.setStyle(name, value[0] + value[1]);
+                }
+            }
+        });
+        options["v:events"] && Object.keys(options["v:events"]).forEach(function (name) {
+            _this.listen(name, options["v:events"][name]);
+        });
+        if (options["v:bind"]) {
+            var inode_1 = this.node;
+            Reflect.ownKeys(options["v:bind"]).forEach(function (k) {
+                var value = options["v:bind"][k];
+                if (k === 'value' && (inode_1 instanceof HTMLInputElement || inode_1 instanceof HTMLTextAreaElement)) {
+                    inode_1.oninput = function () { return value.$ = inode_1.value; };
+                }
+                else if (k === 'checked' && inode_1 instanceof HTMLInputElement) {
+                    inode_1.oninput = function () { return value.$ = inode_1.checked; };
+                }
+                else if (k === 'volume' && inode_1 instanceof HTMLMediaElement) {
+                    inode_1.onvolumechange = function () { return value.$ = inode_1.volume; };
+                }
+                _this.bindDomApi(k, value);
+            });
+        }
+        options["v:set"] && Object.keys(options["v:set"]).forEach(function (key) {
+            _this.node[key] = options["v:set"][key];
+        });
+    };
     return INode;
 }(Fragment));
 
@@ -2693,12 +2768,12 @@ var INode = /** @class */ (function (_super) {
  */
 var Tag = /** @class */ (function (_super) {
     __extends(Tag, _super);
-    function Tag() {
-        var _this = this; _super.call(this);
-        _this.$seal();
+    function Tag(input) {
+        var _this = _super.call(this, input) || this;
+        _this.seal();
         return _this;
     }
-    Tag.prototype.$preinit = function (app, parent, tagName) {
+    Tag.prototype.preinit = function (app, parent, tagName) {
         if (!tagName || typeof tagName !== "string") {
             throw internalError('wrong Tag::$preinit call');
         }
@@ -2706,55 +2781,53 @@ var Tag = /** @class */ (function (_super) {
         var $ = this.$;
         $.preinit(app, parent);
         $.node = node;
-        $.parent.$$appendNode(node);
+        $.parent.appendNode(node);
+    };
+    Tag.prototype.compose = function (input) {
+        input.slot && input.slot(this);
     };
-    Tag.prototype.$$findFirstChild = function () {
+    Tag.prototype.findFirstChild = function () {
         return this.$.unmounted ? null : this.$.node;
     };
-    Tag.prototype.$$insertAdjacent = function (node) {
+    Tag.prototype.insertAdjacent = function (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.prototype.$$insertAdjacent.call(this, node);
+            _super.prototype.insertAdjacent.call(this, node);
         }
     };
-    Tag.prototype.$$appendNode = function (node) {
-        var $ = this.$;
-        $.app.$run.appendChild($.node, node);
+    Tag.prototype.appendNode = function (node) {
+        this.$.node.appendChild(node);
     };
     /**
      * Mount/Unmount a node
      * @param cond {IValue} show condition
      */
-    Tag.prototype.$bindMount = function (cond) {
+    Tag.prototype.bindMount = function (cond) {
+        var _this = this;
         var $ = this.$;
-        return this.$bindAlive(cond, function () {
+        this.bindAlive(cond, function () {
             $.node.remove();
             $.unmounted = true;
         }, function () {
-            if (!$.unmounted)
-                return;
-            if ($.next) {
-                $.next.$$insertAdjacent($.node);
+            if ($.unmounted) {
+                _this.insertAdjacent($.node);
+                $.unmounted = false;
             }
-            else {
-                $.parent.$$appendNode($.node);
-            }
-            $.unmounted = false;
         });
     };
     /**
      * Runs GC
      */
-    Tag.prototype.$destroy = function () {
+    Tag.prototype.destroy = function () {
         this.node.remove();
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return Tag;
 }(INode));
@@ -2766,23 +2839,25 @@ var Tag = /** @class */ (function (_super) {
  */
 var Extension = /** @class */ (function (_super) {
     __extends(Extension, _super);
-    function Extension($) {
-        var _this = _super.call(this, $) || this;
-        _this.$seal();
-        return _this;
+    function Extension() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Extension.prototype.$preinit = function (app, parent) {
-        if (parent instanceof INode) {
-            var $ = this.$;
-            $.preinit(app, parent);
-            $.node = parent.node;
+    Extension.prototype.preinit = function (app, parent) {
+        var $ = this.$;
+        var 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");
         }
     };
-    Extension.prototype.$destroy = function () {
-        _super.prototype.$destroy.call(this);
+    Extension.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
     };
     return Extension;
 }(INode));
@@ -2795,24 +2870,25 @@ var Extension = /** @class */ (function (_super) {
 var Component = /** @class */ (function (_super) {
     __extends(Component, _super);
     function Component() {
-        var _this = this; _super.call(this);
-        _this.$seal();
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Component.prototype.$mounted = function () {
-        _super.prototype.$mounted.call(this);
-        if (this.$children.length !== 1) {
-            throw userError("UserNode must have a child only", "dom-error");
+    Component.prototype.ready = function () {
+        _super.prototype.ready.call(this);
+        if (this.children.size !== 1) {
+            throw userError("Component must have a child only", "dom-error");
         }
-        var child = this.$children[0];
+        var child = this.lastChild;
         if (child instanceof Tag || child instanceof Component) {
             var $ = 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");
         }
     };
+    Component.prototype.preinit = function (app, parent) {
+        this.$.preinit(app, parent);
+    };
     return Component;
 }(Extension));
 
@@ -2825,22 +2901,27 @@ var SwitchedNodePrivate = /** @class */ (function (_super) {
     __extends(SwitchedNodePrivate, _super);
     function SwitchedNodePrivate() {
         var _this = this; _super.call(this);
-        _this.$seal();
+        /**
+         * Array of possible cases
+         * @type {Array<{cond : IValue<boolean>, cb : function(Fragment)}>}
+         */
+        _this.cases = [];
+        _this.seal();
         return _this;
     }
     /**
      * Runs GC
      */
-    SwitchedNodePrivate.prototype.$destroy = function () {
+    SwitchedNodePrivate.prototype.destroy = function () {
         this.cases.forEach(function (c) {
             delete c.cond;
             delete c.cb;
         });
         this.cases.splice(0);
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return SwitchedNodePrivate;
-}(INodePrivate));
+}(FragmentPrivate));
 
 /**
  * Defines a node witch can switch its children conditionally
@@ -2851,7 +2932,7 @@ var SwitchedNode = /** @class */ (function (_super) {
      * Constructs a switch node and define a sync function
      */
     function SwitchedNode() {
-        var _this = _super.call(this, new SwitchedNodePrivate) || this;
+        var _this = _super.call(this, {}, new SwitchedNodePrivate) || this;
         _this.$.sync = function () {
             var $ = _this.$;
             var i = 0;
@@ -2863,10 +2944,10 @@ var SwitchedNode = /** @class */ (function (_super) {
             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;
@@ -2876,47 +2957,43 @@ var SwitchedNode = /** @class */ (function (_super) {
                 $.index = -1;
             }
         };
-        _this.$seal();
+        _this.seal();
         return _this;
     }
-    /**
-     * Set up switch cases
-     * @param cases {{ cond : IValue, cb : function(Fragment) }}
-     */
-    SwitchedNode.prototype.setCases = function (cases) {
-        var $ = this.$;
-        $.cases = __spreadArray([], cases, true);
+    SwitchedNode.prototype.addCase = function (case_) {
+        this.$.cases.push(case_);
+        case_.cond.on(this.$.sync);
+        this.$.sync();
     };
     /**
      * Creates a child node
      * @param cb {function(Fragment)} Call-back
      */
     SwitchedNode.prototype.createChild = function (cb) {
-        var node = new Fragment();
-        node.$preinit(this.$.app, this);
-        node.$init();
-        node.$ready();
-        this.$.fragment = node;
-        this.$children.push(node);
+        var node = new Fragment({});
+        node.preinit(this.$.app, this);
+        node.init();
+        this.lastChild = node;
+        this.children.add(node);
         cb(node);
     };
-    SwitchedNode.prototype.$ready = function () {
+    SwitchedNode.prototype.ready = function () {
         var $ = this.$;
-        _super.prototype.$ready.call(this);
         $.cases.forEach(function (c) {
             c.cond.on($.sync);
         });
         $.sync();
     };
-    SwitchedNode.prototype.$destroy = function () {
+    SwitchedNode.prototype.destroy = function () {
         var $ = this.$;
         $.cases.forEach(function (c) {
             c.cond.off($.sync);
         });
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return SwitchedNode;
 }(Fragment));
+
 /**
  * The private part of a text node
  */
@@ -2924,7 +3001,7 @@ var DebugPrivate = /** @class */ (function (_super) {
     __extends(DebugPrivate, _super);
     function DebugPrivate() {
         var _this = this; _super.call(this);
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     /**
@@ -2940,14 +3017,14 @@ var DebugPrivate = /** @class */ (function (_super) {
         this.bindings.add(new Expression(function (v) {
             _this.node.replaceData(0, -1, v);
         }, true, text));
-        this.parent.$$appendNode(this.node);
+        this.parent.appendNode(this.node);
     };
     /**
      * Clear node data
      */
-    DebugPrivate.prototype.$destroy = function () {
+    DebugPrivate.prototype.destroy = function () {
         this.node.remove();
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return DebugPrivate;
 }(FragmentPrivate));
@@ -2960,16 +3037,16 @@ var DebugPrivate = /** @class */ (function (_super) {
 var DebugNode = /** @class */ (function (_super) {
     __extends(DebugNode, _super);
     function DebugNode() {
-        var _this = this; _super.call(this);
+        var _this = _super.call(this, {}) || this;
         /**
          * private data
          * @type {DebugNode}
          */
         _this.$ = new DebugPrivate();
-        _this.$seal();
+        _this.seal();
         return _this;
     }
-    DebugNode.prototype.$preinit = function (app, parent, text) {
+    DebugNode.prototype.preinit = function (app, parent, text) {
         var $ = this.$;
         if (!text) {
             throw internalError('wrong DebugNode::$preninit call');
@@ -2979,9 +3056,9 @@ var DebugNode = /** @class */ (function (_super) {
     /**
      * Runs garbage collector
      */
-    DebugNode.prototype.$destroy = function () {
-        this.$.$destroy();
-        _super.prototype.$destroy.call(this);
+    DebugNode.prototype.destroy = function () {
+        this.$.destroy();
+        _super.prototype.destroy.call(this);
     };
     return DebugNode;
 }(Fragment));
@@ -2997,6 +3074,7 @@ window.Tag = Tag;
 window.Extension = Extension;
 window.Component = Component;
 window.SwitchedNodePrivate = SwitchedNodePrivate;
+window.SwitchedNode = SwitchedNode;
 window.DebugPrivate = DebugPrivate;
 window.DebugNode = DebugNode;
 
@@ -3009,12 +3087,12 @@ window.DebugNode = DebugNode;
 var AppNode = /** @class */ (function (_super) {
     __extends(AppNode, _super);
     /**
-     * @param options {Object} Application options
+     * @param input
      */
-    function AppNode(options) {
-        var _this = this; _super.call(this);
-        _this.$run = (options === null || options === void 0 ? void 0 : options.executor) || ((options === null || options === void 0 ? void 0 : options.freezeUi) === false ? timeoutExecutor : instantExecutor);
-        _this.$debugUi = (options === null || options === void 0 ? void 0 : options.debugUi) || false;
+    function AppNode(input) {
+        var _this = _super.call(this, input) || this;
+        _this.debugUi = input.debugUi || false;
+        _this.seal();
         return _this;
     }
     return AppNode;
@@ -3030,25 +3108,40 @@ var App = /** @class */ (function (_super) {
     /**
      * Constructs an app node
      * @param node {Element} The root of application
-     * @param options {Object} Application options
+     * @param input
      */
-    function App(node, options) {
-        var _this = _super.call(this, options) || this;
+    function App(node, input) {
+        var _this = _super.call(this, input) || this;
         _this.$.node = node;
-        _this.$preinit(_this, _this);
-        _this.$seal();
+        _this.preinit(_this, _this);
+        _this.init();
+        _this.seal();
         return _this;
     }
-    App.prototype.$$appendNode = function (node) {
-        var $ = this.$;
-        $.app.$run.appendChild($.node, node);
+    App.prototype.appendNode = function (node) {
+        this.$.node.appendChild(node);
     };
     return App;
 }(AppNode));
 
+var Portal = /** @class */ (function (_super) {
+    __extends(Portal, _super);
+    function Portal(input) {
+        var _this = _super.call(this, input) || this;
+        _this.$.node = input.node;
+        _this.seal();
+        return _this;
+    }
+    Portal.prototype.appendNode = function (node) {
+        this.$.node.appendChild(node);
+    };
+    return Portal;
+}(AppNode));
+
 
 window.AppNode = AppNode;
 window.App = App;
+window.Portal = Portal;
 
 // ./lib-es5/node/interceptor.js
 /**
@@ -3100,9 +3193,9 @@ var Interceptor = /** @class */ (function (_super) {
             signal.unsubscribe(handler);
         });
     };
-    Interceptor.prototype.$destroy = function () {
+    Interceptor.prototype.destroy = function () {
         var _this = this;
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
         this.signals.forEach(function (signal) {
             _this.handlers.forEach(function (handler) {
                 signal.unsubscribe(handler);
@@ -3133,7 +3226,7 @@ var InterceptorNode = /** @class */ (function (_super) {
         _this.slot = new Slot;
         return _this;
     }
-    InterceptorNode.prototype.$compose = function () {
+    InterceptorNode.prototype.compose = function () {
         this.slot.release(this, this.interceptor);
     };
     return InterceptorNode;
@@ -3158,23 +3251,23 @@ var AttributeBinding = /** @class */ (function (_super) {
      * @param value {IValue} value to bind
      */
     function AttributeBinding(node, name, value) {
-        return _super.call(this, node, name, value) || this;
-    }
-    /**
-     * Generates a function which updates the attribute value
-     * @param name {String} The name of attribute
-     * @returns {Function} a function which will update attribute value
-     */
-    AttributeBinding.prototype.bound = function (name) {
-        return function (node, value) {
+        var _this = _super.call(this, value) || this;
+        _this.init(function (value) {
             if (value) {
-                node.app.$run.setAttribute(node.node, name, value);
+                if (typeof value === 'boolean') {
+                    node.node.setAttribute(name, "");
+                }
+                else {
+                    node.node.setAttribute(name, "".concat(value));
+                }
             }
             else {
-                node.app.$run.removeAttribute(node.node, name);
+                node.node.removeAttribute(name);
             }
-        };
-    };
+        });
+        _this.seal();
+        return _this;
+    }
     return AttributeBinding;
 }(Binding));
 
@@ -3196,20 +3289,15 @@ var StyleBinding = /** @class */ (function (_super) {
      * @param value {IValue} the value to bind
      */
     function StyleBinding(node, name, value) {
-        return _super.call(this, node, name, value) || this;
-    }
-    /**
-     * Generates a function to update style property value
-     * @param name {string}
-     * @returns {Function} a function to update style property
-     */
-    StyleBinding.prototype.bound = function (name) {
-        return function (node, value) {
+        var _this = _super.call(this, value) || this;
+        _this.init(function (value) {
             if (node.node instanceof HTMLElement) {
-                node.app.$run.setStyle(node.node, name, value);
+                node.node.style.setProperty(name, value);
             }
-        };
-    };
+        });
+        _this.seal();
+        return _this;
+    }
     return StyleBinding;
 }(Binding));
 
@@ -3217,62 +3305,59 @@ var StyleBinding = /** @class */ (function (_super) {
 window.StyleBinding = StyleBinding;
 
 // ./lib-es5/binding/class.js
-/**
- * Represents a HTML class binding description
- * @class ClassBinding
- * @extends Binding
- */
-var ClassBinding = /** @class */ (function (_super) {
-    __extends(ClassBinding, _super);
-    /**
-     * Constructs an HTML class binding description
-     * @param node {INode} the vasille node
-     * @param name {String} the name of class
-     * @param value {IValue} the value to bind
-     */
-    function ClassBinding(node, name, value) {
-        var _this = _super.call(this, node, name, value) || this;
-        _this.$seal();
+function addClass(node, cl) {
+    node.node.classList.add(cl);
+}
+function removeClass(node, cl) {
+    node.node.classList.remove(cl);
+}
+var StaticClassBinding = /** @class */ (function (_super) {
+    __extends(StaticClassBinding, _super);
+    function StaticClassBinding(node, name, value) {
+        var _this = _super.call(this, value) || this;
+        _this.current = false;
+        _this.init(function (value) {
+            if (value !== _this.current) {
+                if (value) {
+                    addClass(node, name);
+                }
+                else {
+                    removeClass(node, name);
+                }
+                _this.current = value;
+            }
+        });
+        _this.seal();
         return _this;
     }
-    /**
-     * Generates a function which updates the html class value
-     * @param name {String} The name of attribute
-     * @returns {Function} a function which will update attribute value
-     */
-    ClassBinding.prototype.bound = function (name) {
-        var current = null;
-        function addClass(node, cl) {
-            node.app.$run.addClass(node.node, cl);
-        }
-        function removeClass(node, cl) {
-            node.app.$run.removeClass(node.node, cl);
-        }
-        return function (node, value) {
-            if (value !== current) {
-                if (typeof current === "string" && current !== "") {
-                    removeClass(node, current);
-                }
-                if (typeof value === "boolean") {
-                    if (value) {
-                        addClass(node, name);
-                    }
-                    else {
-                        removeClass(node, name);
-                    }
+    return StaticClassBinding;
+}(Binding));
+
+var DynamicalClassBinding = /** @class */ (function (_super) {
+    __extends(DynamicalClassBinding, _super);
+    function DynamicalClassBinding(node, value) {
+        var _this = _super.call(this, value) || this;
+        _this.current = "";
+        _this.init(function (value) {
+            if (_this.current != value) {
+                if (_this.current.length) {
+                    removeClass(node, _this.current);
                 }
-                else if (typeof value === "string" && value !== "") {
+                if (value.length) {
                     addClass(node, value);
                 }
-                current = value;
+                _this.current = value;
             }
-        };
-    };
-    return ClassBinding;
+        });
+        _this.seal();
+        return _this;
+    }
+    return DynamicalClassBinding;
 }(Binding));
 
 
-window.ClassBinding = ClassBinding;
+window.StaticClassBinding = StaticClassBinding;
+window.DynamicalClassBinding = DynamicalClassBinding;
 
 // ./lib-es5/views/repeat-node.js
 /**
@@ -3289,12 +3374,12 @@ var RepeatNodePrivate = /** @class */ (function (_super) {
          * @type {Map}
          */
         _this.nodes = new Map();
-        _this.$seal();
+        _this.seal();
         return _this;
     }
-    RepeatNodePrivate.prototype.$destroy = function () {
+    RepeatNodePrivate.prototype.destroy = function () {
         this.nodes.clear();
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
     };
     return RepeatNodePrivate;
 }(INodePrivate));
@@ -3306,82 +3391,43 @@ var RepeatNodePrivate = /** @class */ (function (_super) {
  */
 var RepeatNode = /** @class */ (function (_super) {
     __extends(RepeatNode, _super);
-    function RepeatNode($) {
-        var _this = _super.call(this, $ || new RepeatNodePrivate) || this;
+    function RepeatNode(input, $) {
+        var _this = _super.call(this, input, $) || this;
         /**
          * If false will use timeout executor, otherwise the app executor
          */
         _this.freezeUi = true;
-        _this.slot = new Slot;
         return _this;
     }
-    RepeatNode.prototype.createChild = function (id, item, before) {
-        // TODO: Refactor: remove @ts-ignore
-        var _this = this;
-        var node = new Fragment();
-        // eslint-disable-next-line
-        // @ts-ignore
-        var $ = node.$;
+    RepeatNode.prototype.createChild = function (opts, id, item, before) {
+        var node = new Fragment({});
         this.destroyChild(id, item);
         if (before) {
-            $.next = before;
-            // eslint-disable-next-line
-            // @ts-ignore
-            $.prev = before.$.prev;
-            // eslint-disable-next-line
-            // @ts-ignore
-            before.$.prev = node;
-            if ($.prev) {
-                // eslint-disable-next-line
-                // @ts-ignore
-                $.prev.$.next = node;
-            }
-            this.$children.splice(this.$children.indexOf(before), 0, node);
+            this.children.add(node);
+            before.insertBefore(node);
         }
         else {
-            var lastChild = this.$children[this.$children.length - 1];
+            var lastChild = this.lastChild;
             if (lastChild) {
-                // eslint-disable-next-line
-                // @ts-ignore
-                lastChild.$.next = node;
+                lastChild.insertAfter(node);
             }
-            $.prev = lastChild;
-            this.$children.push(node);
-        }
-        node.$preinit(this.$.app, this);
-        node.$init();
-        var callback = function () {
-            _this.slot.release(node, item, id);
-            node.$ready();
-        };
-        if (this.freezeUi) {
-            this.$.app.$run.callCallback(callback);
-        }
-        else {
-            timeoutExecutor.callCallback(callback);
+            this.children.add(node);
         }
+        this.lastChild = node;
+        node.preinit(this.$.app, this);
+        node.init();
+        opts.slot && opts.slot(node, item, id);
+        node.ready();
         this.$.nodes.set(id, node);
     };
     RepeatNode.prototype.destroyChild = function (id, item) {
         var $ = this.$;
         var child = $.nodes.get(id);
         if (child) {
-            // eslint-disable-next-line
-            // @ts-ignore
-            var $_1 = child.$;
-            if ($_1.prev) {
-                // eslint-disable-next-line
-                // @ts-ignore
-                $_1.prev.$.next = $_1.next;
-            }
-            if ($_1.next) {
-                // eslint-disable-next-line
-                // @ts-ignore
-                $_1.next.$.prev = $_1.prev;
-            }
-            child.$destroy();
+            child.remove();
+            child.destroy();
             this.$.nodes.delete(id);
-            this.$children.splice(this.$children.indexOf(child), 1);
+            this.children.delete(child);
         }
     };
     return RepeatNode;
@@ -3405,7 +3451,7 @@ var RepeaterPrivate = /** @class */ (function (_super) {
          * Current count of child nodes
          */
         _this.currentCount = 0;
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     return RepeaterPrivate;
@@ -3424,7 +3470,7 @@ var Repeater = /** @class */ (function (_super) {
          * The count of children
          */
         _this.count = new Reference(0);
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     /**
@@ -3444,18 +3490,18 @@ var Repeater = /** @class */ (function (_super) {
         }
         $.currentCount = number;
     };
-    Repeater.prototype.$created = function () {
+    Repeater.prototype.created = function () {
         var $ = this.$;
-        _super.prototype.$created.call(this);
+        _super.prototype.created.call(this);
         $.updateHandler = this.changeCount.bind(this);
         this.count.on($.updateHandler);
     };
-    Repeater.prototype.$ready = function () {
+    Repeater.prototype.ready = function () {
         this.changeCount(this.count.$);
     };
-    Repeater.prototype.$destroy = function () {
+    Repeater.prototype.destroy = function () {
         var $ = this.$;
-        _super.prototype.$destroy.call(this);
+        _super.prototype.destroy.call(this);
         this.count.off($.updateHandler);
     };
     return Repeater;
@@ -3475,7 +3521,7 @@ var BaseViewPrivate = /** @class */ (function (_super) {
     __extends(BaseViewPrivate, _super);
     function BaseViewPrivate() {
         var _this = this; _super.call(this);
-        _this.$seal();
+        _this.seal();
         return _this;
     }
     return BaseViewPrivate;
@@ -3489,35 +3535,24 @@ var BaseViewPrivate = /** @class */ (function (_super) {
  */
 var BaseView = /** @class */ (function (_super) {
     __extends(BaseView, _super);
-    function BaseView($1) {
-        var _this = _super.call(this, $1 || new BaseViewPrivate) || this;
-        var $ = _this.$;
+    function BaseView(input, $) {
+        return _super.call(this, input, $ || new BaseViewPrivate) || this;
+    }
+    BaseView.prototype.compose = function (input) {
+        var _this = this;
+        var $ = this.$;
         $.addHandler = function (id, item) {
-            _this.createChild(id, item);
+            _this.createChild(input, id, item);
         };
         $.removeHandler = function (id, item) {
             _this.destroyChild(id, item);
         };
-        _this.$seal();
-        return _this;
-    }
-    /**
-     * Handle ready event
-     */
-    BaseView.prototype.$ready = function () {
-        var $ = this.$;
-        this.model.listener.onAdd($.addHandler);
-        this.model.listener.onRemove($.removeHandler);
-        _super.prototype.$ready.call(this);
-    };
-    /**
-     * Handles destroy event
-     */
-    BaseView.prototype.$destroy = function () {
-        var $ = this.$;
-        this.model.listener.offAdd($.addHandler);
-        this.model.listener.offRemove($.removeHandler);
-        _super.prototype.$destroy.call(this);
+        input.model.listener.onAdd($.addHandler);
+        input.model.listener.onRemove($.removeHandler);
+        this.runOnDestroy(function () {
+            input.model.listener.offAdd($.addHandler);
+            input.model.listener.offRemove($.removeHandler);
+        });
     };
     return BaseView;
 }(RepeatNode));
@@ -3534,20 +3569,18 @@ window.BaseView = BaseView;
  */
 var ArrayView = /** @class */ (function (_super) {
     __extends(ArrayView, _super);
-    function ArrayView(model) {
-        var _this = this; _super.call(this);
-        _this.model = model;
-        return _this;
+    function ArrayView() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    ArrayView.prototype.createChild = function (id, item, before) {
-        _super.prototype.createChild.call(this, item, item, before || this.$.nodes.get(id));
+    ArrayView.prototype.createChild = function (input, id, item, before) {
+        _super.prototype.createChild.call(this, input, item, item, before || this.$.nodes.get(id));
     };
-    ArrayView.prototype.$ready = function () {
+    ArrayView.prototype.compose = function (input) {
         var _this = this;
-        this.model.forEach(function (item) {
-            _this.createChild(item, item);
+        _super.prototype.compose.call(this, input);
+        input.model.forEach(function (item) {
+            _this.createChild(input, item, item);
         });
-        _super.prototype.$ready.call(this);
     };
     return ArrayView;
 }(BaseView));
@@ -3564,24 +3597,19 @@ window.ArrayView = ArrayView;
 var Watch = /** @class */ (function (_super) {
     __extends(Watch, _super);
     function Watch() {
-        var _this = this; _super.call(this);
-        _this.slot = new Slot;
-        _this.model = _this.$ref(null);
-        _this.$seal();
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Watch.prototype.$createWatchers = function () {
+    Watch.prototype.compose = function (input) {
         var _this = this;
-        this.$watch(function (value) {
-            _this.$children.forEach(function (child) {
-                child.$destroy();
+        this.watch(function (value) {
+            _this.children.forEach(function (child) {
+                child.destroy();
             });
-            _this.$children.splice(0);
-            _this.slot.release(_this, value);
-        }, this.model);
-    };
-    Watch.prototype.$compose = function () {
-        this.slot.release(this, this.model.$);
+            _this.children.clear();
+            _this.lastChild = null;
+            input.slot && input.slot(_this, value);
+        }, input.model);
+        input.slot(this, input.model.$);
     };
     return Watch;
 }(Fragment));
@@ -3597,17 +3625,16 @@ window.Watch = Watch;
  */
 var ObjectView = /** @class */ (function (_super) {
     __extends(ObjectView, _super);
-    function ObjectView(model) {
-        var _this = this; _super.call(this);
-        _this.model = model;
-        return _this;
+    function ObjectView() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    ObjectView.prototype.$ready = function () {
-        var obj = this.model;
+    ObjectView.prototype.compose = function (input) {
+        _super.prototype.compose.call(this, input);
+        var obj = input.model.proxy();
         for (var key in obj) {
-            this.createChild(key, obj[key]);
+            this.createChild(input, key, obj[key]);
         }
-        _super.prototype.$ready.call(this);
+        _super.prototype.ready.call(this);
     };
     return ObjectView;
 }(BaseView));
@@ -3623,18 +3650,15 @@ window.ObjectView = ObjectView;
  */
 var MapView = /** @class */ (function (_super) {
     __extends(MapView, _super);
-    function MapView(model) {
-        var _this = this; _super.call(this);
-        _this.model = model;
-        return _this;
+    function MapView() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    MapView.prototype.$ready = function () {
+    MapView.prototype.compose = function (input) {
         var _this = this;
-        var map = this.model;
-        map.forEach(function (value, key) {
-            _this.createChild(key, value);
+        _super.prototype.compose.call(this, input);
+        input.model.forEach(function (value, key) {
+            _this.createChild(input, key, value);
         });
-        _super.prototype.$ready.call(this);
     };
     return MapView;
 }(BaseView));
@@ -3650,21 +3674,16 @@ window.MapView = MapView;
  */
 var SetView = /** @class */ (function (_super) {
     __extends(SetView, _super);
-    function SetView(model) {
-        var _this = this; _super.call(this);
-        _this.model = model;
-        return _this;
+    function SetView() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    SetView.prototype.$ready = function () {
+    SetView.prototype.compose = function (input) {
         var _this = this;
-        var $ = this.$;
-        var set = this.model;
+        _super.prototype.compose.call(this, input);
+        var set = input.model;
         set.forEach(function (item) {
-            $.app.$run.callCallback(function () {
-                _this.createChild(item, item);
-            });
+            _this.createChild(input, item, item);
         });
-        _super.prototype.$ready.call(this);
     };
     return SetView;
 }(BaseView));