vasille 2.3.1 → 2.3.3

package/cdn/es5.js

@@ -197,152 +197,89 @@ window.Reflect = window.Reflect || {
 window.Proxy = window.Proxy || function (obj) {
     return obj;
 };
-// ./lib-es5/models/model.js
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-
-
-// ./lib-es5/models/listener.js
+// ./lib-es5/core/destroyable.js
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Listener = void 0;
+exports.Destroyable = void 0;
 /**
- * Represent a listener for a model
- * @class Listener
+ * Mark an object which can be destroyed
+ * @class Destroyable
  */
-var Listener = /** @class */ (function () {
-    function Listener() {
-        Object.defineProperties(this, {
-            onAdded: {
-                value: new Set,
-                writable: false,
-                configurable: false
-            },
-            onRemoved: {
-                value: new Set,
-                writable: false,
-                configurable: false
-            },
-            frozen: {
-                value: false,
-                writable: true,
-                configurable: false
-            },
-            queue: {
-                value: [],
-                writable: false,
-                configurable: false
-            }
-        });
+var Destroyable = /** @class */ (function () {
+    function Destroyable() {
     }
     /**
-     * Exclude the repeated operation in queue
-     * @private
-     */
-    Listener.prototype.excludeRepeat = function (index) {
-        var _this = this;
-        this.queue.forEach(function (item, i) {
-            if (item.index === index) {
-                _this.queue.splice(i, 1);
-                return true;
-            }
-        });
-        return false;
-    };
-    /**
-     * Emits added event to listeners
-     * @param index {*} index of value
-     * @param value {*} value of added item
-     */
-    Listener.prototype.emitAdded = function (index, value) {
-        if (this.frozen) {
-            if (!this.excludeRepeat(index)) {
-                this.queue.push({ sign: true, index: index, value: value });
-            }
-        }
-        else {
-            this.onAdded.forEach(function (handler) {
-                handler(index, value);
-            });
-        }
-    };
-    /**
-     * Emits removed event to listeners
-     * @param index {*} index of removed value
-     * @param value {*} value of removed item
-     */
-    Listener.prototype.emitRemoved = function (index, value) {
-        if (this.frozen) {
-            if (!this.excludeRepeat(index)) {
-                this.queue.push({ sign: false, index: index, value: value });
-            }
-        }
-        else {
-            this.onRemoved.forEach(function (handler) {
-                handler(index, value);
-            });
-        }
-    };
-    /**
-     * Adds a handler to added event
-     * @param handler {function} function to run on event emitting
-     */
-    Listener.prototype.onAdd = function (handler) {
-        this.onAdded.add(handler);
-    };
-    /**
-     * Adds a handler to removed event
-     * @param handler {function} function to run on event emitting
-     */
-    Listener.prototype.onRemove = function (handler) {
-        this.onRemoved.add(handler);
-    };
-    /**
-     * Removes an handler from added event
-     * @param handler {function} handler to remove
-     */
-    Listener.prototype.offAdd = function (handler) {
-        this.onAdded.delete(handler);
-    };
-    /**
-     * Removes an handler form removed event
-     * @param handler {function} handler to remove
-     */
-    Listener.prototype.offRemove = function (handler) {
-        this.onRemoved.delete(handler);
-    };
-    /**
-     * Run all queued operation and enable reactivity
+     * Make object fields non configurable
+     * @protected
      */
-    Listener.prototype.enableReactivity = function () {
+    Destroyable.prototype.$seal = function () {
         var _this = this;
-        this.queue.forEach(function (item) {
-            if (item.sign) {
-                _this.onAdded.forEach(function (handler) {
-                    handler(item.index, item.value);
-                });
-            }
-            else {
-                _this.onRemoved.forEach(function (handler) {
-                    handler(item.index, item.value);
-                });
+        var $ = this;
+        Object.keys($).forEach(function (i) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (_this.hasOwnProperty(i)) {
+                var config = Object.getOwnPropertyDescriptor($, i);
+                if (config.configurable) {
+                    var descriptor = void 0;
+                    if (config.set || config.get) {
+                        descriptor = {
+                            configurable: false,
+                            get: config.get,
+                            set: config.set,
+                            enumerable: config.enumerable
+                        };
+                    }
+                    else {
+                        descriptor = {
+                            value: $[i],
+                            configurable: false,
+                            writable: config.writable,
+                            enumerable: config.enumerable
+                        };
+                    }
+                    Object.defineProperty($, i, descriptor);
+                }
             }
         });
-        this.queue.splice(0);
-        this.frozen = false;
     };
     /**
-     * Disable the reactivity and enable the queue
+     * Garbage collector method
      */
-    Listener.prototype.disableReactivity = function () {
-        this.frozen = true;
+    Destroyable.prototype.$destroy = function () {
+        // nothing here
     };
-    return Listener;
+    return Destroyable;
 }());
-exports.Listener = Listener;
+exports.Destroyable = Destroyable;
 
 
-// ./lib-es5/models/object-model.js
+// ./lib-es5/core/errors.js
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrongBinding = exports.userError = exports.internalError = exports.notOverwritten = void 0;
+var reportIt = "Report it here: https://gitlab.com/vasille-js/vasille-js/-/issues";
+function notOverwritten() {
+    console.error("Vasille-SFP: Internal error", "Must be overwritten", reportIt);
+    return "not-overwritten";
+}
+exports.notOverwritten = notOverwritten;
+function internalError(msg) {
+    console.error("Vasille-SFP: Internal error", msg, reportIt);
+    return "internal-error";
+}
+exports.internalError = internalError;
+function userError(msg, err) {
+    console.error("Vasille-SFP: User error", msg);
+    return err;
+}
+exports.userError = userError;
+function wrongBinding(msg) {
+    return userError(msg, "wrong-binding");
+}
+exports.wrongBinding = wrongBinding;
+
+
+// ./lib-es5/core/ivalue.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -360,97 +297,82 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectModel = void 0;
-var listener_1 = require("./listener");
+exports.IValue = exports.Switchable = void 0;
+var destroyable_js_1 = require("./destroyable.js");
+var errors_1 = require("./errors");
+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 (0, errors_1.notOverwritten)();
+    };
+    /**
+     * disable update handlers triggering
+     */
+    Switchable.prototype.$disable = function () {
+        throw (0, errors_1.notOverwritten)();
+    };
+    return Switchable;
+}(destroyable_js_1.Destroyable));
+exports.Switchable = Switchable;
 /**
- * Object based model
- * @extends Object
+ * Interface which describes a value
+ * @class IValue
+ * @extends Destroyable
  */
-var ObjectModel = /** @class */ (function (_super) {
-    __extends(ObjectModel, _super);
+var IValue = /** @class */ (function (_super) {
+    __extends(IValue, _super);
     /**
-     * Constructs a object model
-     * @param obj {Object} input data
+     * @param isEnabled {boolean} initial is enabled state
      */
-    function ObjectModel(obj) {
-        if (obj === void 0) { obj = {}; }
+    function IValue(isEnabled) {
         var _this = this; _super.call(this);
-        _this.container = Object.create(null);
-        Object.defineProperty(_this, 'listener', {
-            value: new listener_1.Listener,
-            writable: false,
-            configurable: false
-        });
-        for (var i in obj) {
-            Object.defineProperty(_this.container, i, {
-                value: obj[i],
-                configurable: true,
-                writable: true,
-                enumerable: true
-            });
-            _this.listener.emitAdded(i, obj[i]);
-        }
+        _this.isEnabled = isEnabled;
         return _this;
     }
-    /**
-     * Gets a value of a field
-     * @param key {string}
-     * @return {*}
-     */
-    ObjectModel.prototype.get = function (key) {
-        return this.container[key];
-    };
-    /**
-     * Sets an object property value
-     * @param key {string} property name
-     * @param v {*} property value
-     * @return {ObjectModel} a pointer to this
-     */
-    ObjectModel.prototype.set = function (key, v) {
-        if (Reflect.has(this.container, key)) {
-            this.listener.emitRemoved(key, this.container[key]);
-            this.container[key] = v;
-        }
-        else {
-            Object.defineProperty(this.container, key, {
-                value: v,
-                configurable: true,
-                writable: true,
-                enumerable: true
-            });
-        }
-        this.listener.emitAdded(key, this.container[key]);
-        return this;
-    };
-    Object.defineProperty(ObjectModel.prototype, "values", {
+    Object.defineProperty(IValue.prototype, "$", {
+        /**
+         * Get the encapsulated value
+         * @return {*} the encapsulated value
+         */
         get: function () {
-            return this.container;
+            throw (0, errors_1.notOverwritten)();
+        },
+        /**
+         * Sets the encapsulated value
+         * @param value {*} value to encapsulate
+         */
+        set: function (value) {
+            throw (0, errors_1.notOverwritten)();
         },
         enumerable: false,
         configurable: true
     });
     /**
-     * Deletes an object property
-     * @param key {string} property name
+     * Add a new handler to value change
+     * @param handler {function(value : *)} the handler to add
      */
-    ObjectModel.prototype.delete = function (key) {
-        if (this.container[key]) {
-            this.listener.emitRemoved(key, this.container[key]);
-            delete this.container[key];
-        }
-    };
-    ObjectModel.prototype.enableReactivity = function () {
-        this.listener.enableReactivity();
+    IValue.prototype.$on = function (handler) {
+        throw (0, errors_1.notOverwritten)();
     };
-    ObjectModel.prototype.disableReactivity = function () {
-        this.listener.disableReactivity();
+    /**
+     * Removes a handler of value change
+     * @param handler {function(value : *)} the handler to remove
+     */
+    IValue.prototype.$off = function (handler) {
+        throw (0, errors_1.notOverwritten)();
     };
-    return ObjectModel;
-}(Object));
-exports.ObjectModel = ObjectModel;
+    return IValue;
+}(Switchable));
+exports.IValue = IValue;
 
 
-// ./lib-es5/models/set-model.js
+// ./lib-es5/core/core.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -467,79 +389,286 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetModel = void 0;
-var listener_1 = require("./listener");
+exports.Reactive = exports.ReactivePrivate = exports.unstack = exports.stack = exports.current = void 0;
+var destroyable_js_1 = require("./destroyable.js");
+var errors_1 = require("./errors");
+var expression_1 = require("../value/expression");
+var reference_1 = require("../value/reference");
+var pointer_1 = require("../value/pointer");
+var mirror_1 = require("../value/mirror");
+exports.current = null;
+var currentStack = [];
+function stack(node) {
+    currentStack.push(exports.current);
+    exports.current = node;
+}
+exports.stack = stack;
+function unstack() {
+    exports.current = currentStack.pop();
+}
+exports.unstack = unstack;
 /**
- * A Set based model
- * @class SetModel
- * @extends Set
- * @implements IModel
+ * Private stuff of a reactive object
+ * @class ReactivePrivate
+ * @extends Destroyable
  */
-var SetModel = /** @class */ (function (_super) {
-    __extends(SetModel, _super);
-    /**
-     * Constructs a set model based on a set
-     * @param set {Set} input data
-     */
-    function SetModel(set) {
-        if (set === void 0) { set = []; }
+var ReactivePrivate = /** @class */ (function (_super) {
+    __extends(ReactivePrivate, _super);
+    function ReactivePrivate() {
         var _this = this; _super.call(this);
-        Object.defineProperty(_this, 'listener', {
-            value: new listener_1.Listener,
-            writable: false,
-            configurable: false
-        });
-        set.forEach(function (item) {
-            _super.prototype.add.call(_this, item);
-        });
+        /**
+         * A list of user-defined values
+         * @type {Set}
+         */
+        _this.watch = new Set;
+        /**
+         * A list of user-defined bindings
+         * @type {Set}
+         */
+        _this.bindings = new Set;
+        /**
+         * A list of user defined models
+         */
+        _this.models = new Set;
+        /**
+         * Reactivity switch state
+         * @type {boolean}
+         */
+        _this.enabled = true;
+        /**
+         * The frozen state of object
+         * @type {boolean}
+         */
+        _this.frozen = false;
+        _this.$seal();
+        return _this;
+    }
+    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.clear();
+        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_js_1.Destroyable));
+exports.ReactivePrivate = ReactivePrivate;
+/**
+ * A reactive object
+ * @class Reactive
+ * @extends Destroyable
+ */
+var Reactive = /** @class */ (function (_super) {
+    __extends(Reactive, _super);
+    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
+    });
     /**
-     * Calls Set.add and notify abut changes
-     * @param value {*} value
-     * @return {this} a pointer to this
+     * Create a reference
+     * @param value {*} value to reference
      */
-    SetModel.prototype.add = function (value) {
-        if (!_super.prototype.has.call(this, value)) {
-            this.listener.emitAdded(value, value);
-            _super.prototype.add.call(this, value);
-        }
-        return this;
+    Reactive.prototype.ref = function (value) {
+        var $ = this.$;
+        var ref = new reference_1.Reference(value);
+        $.watch.add(ref);
+        return ref;
     };
     /**
-     * Calls Set.clear and notify abut changes
+     * Create a mirror
+     * @param value {IValue} value to mirror
      */
-    SetModel.prototype.clear = function () {
-        var _this = this;
-        this.forEach(function (item) {
-            _this.listener.emitRemoved(item, item);
-        });
-        _super.prototype.clear.call(this);
+    Reactive.prototype.mirror = function (value) {
+        var mirror = new mirror_1.Mirror(value, false);
+        this.$.watch.add(mirror);
+        return mirror;
     };
     /**
-     * Calls Set.delete and notify abut changes
-     * @param value {*}
-     * @return {boolean} true if a value was deleted, otherwise false
+     * Create a forward-only mirror
+     * @param value {IValue} value to mirror
      */
-    SetModel.prototype.delete = function (value) {
-        if (_super.prototype.has.call(this, value)) {
-            this.listener.emitRemoved(value, value);
-        }
-        return _super.prototype.delete.call(this, value);
+    Reactive.prototype.forward = function (value) {
+        var mirror = new mirror_1.Mirror(value, true);
+        this.$.watch.add(mirror);
+        return mirror;
     };
-    SetModel.prototype.enableReactivity = function () {
-        this.listener.enableReactivity();
+    /**
+     * Creates a pointer
+     * @param value {*} default value to point
+     * @param forwardOnly {boolean} forward only sync
+     */
+    Reactive.prototype.point = function (value, forwardOnly) {
+        if (forwardOnly === void 0) { forwardOnly = false; }
+        var $ = this.$;
+        var pointer = new pointer_1.Pointer(value, forwardOnly);
+        $.watch.add(pointer);
+        return pointer;
     };
-    SetModel.prototype.disableReactivity = function () {
-        this.listener.disableReactivity();
+    /**
+     * Register a model
+     * @param model
+     */
+    Reactive.prototype.register = function (model) {
+        this.$.models.add(model);
+        return model;
     };
-    return SetModel;
-}(Set));
-exports.SetModel = SetModel;
-
-
-// ./lib-es5/models/map-model.js
+    /**
+     * 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_1.Expression.bind.apply(expression_1.Expression, __spreadArray([void 0, func, !this.$.frozen], values, false)))());
+    };
+    /**
+     * 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_1.Expression.bind.apply(expression_1.Expression, __spreadArray([void 0, func, !this.$.frozen], values, false)))();
+        var $ = this.$;
+        $.watch.add(res);
+        return res;
+    };
+    /**
+     * Enable reactivity of fields
+     */
+    Reactive.prototype.enable = function () {
+        var $ = this.$;
+        if (!$.enabled) {
+            $.watch.forEach(function (watcher) {
+                watcher.$enable();
+            });
+            $.models.forEach(function (model) {
+                model.enableReactivity();
+            });
+            $.enabled = true;
+        }
+    };
+    /**
+     * Disable reactivity of fields
+     */
+    Reactive.prototype.disable = function () {
+        var $ = this.$;
+        if ($.enabled) {
+            $.watch.forEach(function (watcher) {
+                watcher.$disable();
+            });
+            $.models.forEach(function (model) {
+                model.disableReactivity();
+            });
+            $.enabled = false;
+        }
+    };
+    /**
+     * Disable/Enable reactivity of object fields with feedback
+     * @param cond {IValue} show condition
+     * @param onOff {function} on show feedback
+     * @param onOn {function} on hide feedback
+     */
+    Reactive.prototype.bindAlive = function (cond, onOff, onOn) {
+        var _this = this;
+        var $ = this.$;
+        if ($.freezeExpr) {
+            throw (0, errors_1.wrongBinding)("this component already have a freeze state");
+        }
+        if ($.watch.has(cond)) {
+            throw (0, errors_1.wrongBinding)("freeze state must be bound to an external component");
+        }
+        $.freezeExpr = new expression_1.Expression(function (cond) {
+            $.frozen = !cond;
+            if (cond) {
+                onOn === null || onOn === void 0 ? void 0 : onOn();
+                _this.enable();
+            }
+            else {
+                onOff === null || onOff === void 0 ? void 0 : onOff();
+                _this.disable();
+            }
+        }, true, cond);
+        return this;
+    };
+    Reactive.prototype.init = function () {
+        this.applyOptions(this.input);
+        return this.compose(this.input);
+    };
+    Reactive.prototype.applyOptions = function (input) {
+        // empty
+    };
+    Reactive.prototype.applyOptionsNow = function () {
+        this.applyOptions(this.input);
+    };
+    Reactive.prototype.compose = function (input) {
+        throw (0, errors_1.notOverwritten)();
+    };
+    Reactive.prototype.composeNow = function () {
+        this.compose(this.input);
+    };
+    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_js_1.Destroyable));
+exports.Reactive = Reactive;
+
+
+// ./lib-es5/value/reference.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -557,83 +686,70 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MapModel = void 0;
-var listener_1 = require("./listener");
+exports.Reference = void 0;
+var ivalue_1 = require("../core/ivalue");
 /**
- * A Map based memory
- * @class MapModel
- * @extends Map
- * @implements IModel
+ * Declares a notifiable value
+ * @class Reference
+ * @extends IValue
  */
-var MapModel = /** @class */ (function (_super) {
-    __extends(MapModel, _super);
+var Reference = /** @class */ (function (_super) {
+    __extends(Reference, _super);
     /**
-     * Constructs a map model
-     * @param map {[*, *][]} input data
+     * @param value {any} the initial value
      */
-    function MapModel(map) {
-        if (map === void 0) { map = []; }
-        var _this = this; _super.call(this);
-        Object.defineProperty(_this, 'listener', {
-            value: new listener_1.Listener,
-            writable: false,
-            configurable: false
-        });
-        map.forEach(function (_a) {
-            var key = _a[0], value = _a[1];
-            _super.prototype.set.call(_this, key, value);
-        });
+    function Reference(value) {
+        var _this = _super.call(this, true) || this;
+        _this.$value = value;
+        _this.$onchange = new Set;
+        _this.$seal();
         return _this;
     }
-    /**
-     * Calls Map.clear and notify abut changes
-     */
-    MapModel.prototype.clear = function () {
+    Object.defineProperty(Reference.prototype, "$", {
+        get: function () {
+            return this.$value;
+        },
+        set: function (value) {
+            if (this.$value !== value) {
+                this.$value = value;
+                if (this.isEnabled) {
+                    this.$onchange.forEach(function (handler) {
+                        handler(value);
+                    });
+                }
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Reference.prototype.$enable = function () {
         var _this = this;
-        this.forEach(function (value, key) {
-            _this.listener.emitRemoved(key, value);
-        });
-        _super.prototype.clear.call(this);
-    };
-    /**
-     * Calls Map.delete and notify abut changes
-     * @param key {*} key
-     * @return {boolean} true if removed something, otherwise false
-     */
-    MapModel.prototype.delete = function (key) {
-        var tmp = _super.prototype.get.call(this, key);
-        if (tmp) {
-            this.listener.emitRemoved(key, tmp);
+        if (!this.isEnabled) {
+            this.$onchange.forEach(function (handler) {
+                handler(_this.$value);
+            });
+            this.isEnabled = true;
         }
-        return _super.prototype.delete.call(this, key);
     };
-    /**
-     * Calls Map.set and notify abut changes
-     * @param key {*} key
-     * @param value {*} value
-     * @return {MapModel} a pointer to this
-     */
-    MapModel.prototype.set = function (key, value) {
-        var tmp = _super.prototype.get.call(this, key);
-        if (tmp) {
-            this.listener.emitRemoved(key, tmp);
-        }
-        _super.prototype.set.call(this, key, value);
-        this.listener.emitAdded(key, value);
-        return this;
+    Reference.prototype.$disable = function () {
+        this.isEnabled = false;
     };
-    MapModel.prototype.enableReactivity = function () {
-        this.listener.enableReactivity();
+    Reference.prototype.$on = function (handler) {
+        this.$onchange.add(handler);
     };
-    MapModel.prototype.disableReactivity = function () {
-        this.listener.disableReactivity();
+    Reference.prototype.$off = function (handler) {
+        this.$onchange.delete(handler);
     };
-    return MapModel;
-}(Map));
-exports.MapModel = MapModel;
+    Reference.prototype.$destroy = function () {
+        _super.prototype.$destroy.call(this);
+        this.$onchange.clear();
+    };
+    return Reference;
+}(ivalue_1.IValue));
+exports.Reference = Reference;
 
 
-// ./lib-es5/models/array-model.js
+// ./lib-es5/value/expression.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -650,339 +766,195 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrayModel = void 0;
-var listener_1 = require("./listener");
-/**
- * Model based on Array class
- * @extends Array
- * @implements IModel
+exports.Expression = void 0;
+var reference_js_1 = require("./reference.js");
+var ivalue_1 = require("../core/ivalue");
+/**
+ * Bind some values to one expression
+ * @class Expression
+ * @extends IValue
  */
-var ArrayModel = /** @class */ (function (_super) {
-    __extends(ArrayModel, _super);
+var Expression = /** @class */ (function (_super) {
+    __extends(Expression, _super);
     /**
-     * @param data {Array} input data
+     * Creates a function bounded to N values
+     * @param func {Function} the function to bound
+     * @param values
+     * @param link {Boolean} links immediately if true
      */
-    function ArrayModel(data) {
-        if (data === void 0) { data = []; }
-        var _this = this; _super.call(this);
-        Object.defineProperty(_this, 'listener', {
-            value: new listener_1.Listener,
-            writable: false,
-            configurable: false
+    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 handler = function (i) {
+            if (i != null) {
+                _this.valuesCache[i] = _this.values[i].$;
+            }
+            _this.sync.$ = func.apply(_this, _this.valuesCache);
+        };
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        _this.valuesCache = values.map(function (item) { return item.$; });
+        _this.sync = new reference_js_1.Reference(func.apply(_this, _this.valuesCache));
+        var i = 0;
+        values.forEach(function () {
+            _this.linkedFunc.push(handler.bind(_this, Number(i++)));
         });
-        for (var i = 0; i < data.length; i++) {
-            _super.prototype.push.call(_this, data[i]);
+        _this.values = values;
+        _this.func = handler;
+        if (link) {
+            _this.$enable();
+        }
+        else {
+            handler();
         }
+        _this.$seal();
         return _this;
     }
-    Object.defineProperty(ArrayModel.prototype, "last", {
-        /* Array members */
-        /**
-         * Gets the last item of array
-         * @return {*} the last item of array
-         */
+    Object.defineProperty(Expression.prototype, "$", {
         get: function () {
-            return this.length ? this[this.length - 1] : null;
+            return this.sync.$;
+        },
+        set: function (value) {
+            this.sync.$ = value;
         },
         enumerable: false,
         configurable: true
     });
-    /**
-     * Calls Array.fill and notify about changes
-     * @param value {*} value to fill with
-     * @param start {?number} begin index
-     * @param end {?number} end index
-     */
-    ArrayModel.prototype.fill = function (value, start, end) {
-        if (!start) {
-            start = 0;
-        }
-        if (!end) {
-            end = this.length;
-        }
-        for (var i = start; i < end; i++) {
-            this.listener.emitRemoved(this[i], this[i]);
-            this[i] = value;
-            this.listener.emitAdded(value, value);
-        }
+    Expression.prototype.$on = function (handler) {
+        this.sync.$on(handler);
         return this;
     };
-    /**
-     * Calls Array.pop and notify about changes
-     * @return {*} removed value
-     */
-    ArrayModel.prototype.pop = function () {
-        var v = _super.prototype.pop.call(this);
-        if (v !== undefined) {
-            this.listener.emitRemoved(v, v);
-        }
-        return v;
-    };
-    /**
-     * Calls Array.push and notify about changes
-     * @param items {...*} values to push
-     * @return {number} new length of array
-     */
-    ArrayModel.prototype.push = function () {
-        var _this = this;
-        var items = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            items[_i] = arguments[_i];
-        }
-        items.forEach(function (item) {
-            _this.listener.emitAdded(item, item);
-            _super.prototype.push.call(_this, item);
-        });
-        return this.length;
-    };
-    /**
-     * Calls Array.shift and notify about changed
-     * @return {*} the shifted value
-     */
-    ArrayModel.prototype.shift = function () {
-        var v = _super.prototype.shift.call(this);
-        if (v !== undefined) {
-            this.listener.emitRemoved(v, v);
-        }
-        return v;
+    Expression.prototype.$off = function (handler) {
+        this.sync.$off(handler);
+        return this;
     };
-    /**
-     * Calls Array.splice and notify about changed
-     * @param start {number} start index
-     * @param deleteCount {?number} delete count
-     * @param items {...*}
-     * @return {ArrayModel} a pointer to this
-     */
-    ArrayModel.prototype.splice = function (start, deleteCount) {
-        var items = [];
-        for (var _i = 2; _i < arguments.length; _i++) {
-            items[_i - 2] = arguments[_i];
-        }
-        start = Math.min(start, this.length);
-        deleteCount = deleteCount || this.length - start;
-        var before = this[start + deleteCount];
-        for (var i = 0; i < deleteCount; i++) {
-            var index = start + deleteCount - i - 1;
-            if (this[index] !== undefined) {
-                this.listener.emitRemoved(this[index], this[index]);
+    Expression.prototype.$enable = function () {
+        if (!this.isEnabled) {
+            for (var i = 0; i < this.values.length; i++) {
+                this.values[i].$on(this.linkedFunc[i]);
+                this.valuesCache[i] = this.values[i].$;
             }
+            this.func();
+            this.isEnabled = true;
         }
-        for (var i = 0; i < items.length; i++) {
-            this.listener.emitAdded(before, items[i]);
-        }
-        return new ArrayModel(_super.prototype.splice.apply(this, __spreadArray([start, deleteCount], items, false)));
+        return this;
     };
-    /**
-     * Calls Array.unshift and notify about changed
-     * @param items {...*} values to insert
-     * @return {number} the length after prepend
-     */
-    ArrayModel.prototype.unshift = function () {
-        var items = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            items[_i] = arguments[_i];
-        }
-        for (var i = 0; i < items.length; i++) {
-            this.listener.emitAdded(this[i], items[i]);
+    Expression.prototype.$disable = function () {
+        if (this.isEnabled) {
+            for (var i = 0; i < this.values.length; i++) {
+                this.values[i].$off(this.linkedFunc[i]);
+            }
+            this.isEnabled = false;
         }
-        return _super.prototype.unshift.apply(this, items);
-    };
-    /**
-     * Inserts a value to the end of array
-     * @param v {*} value to insert
-     */
-    ArrayModel.prototype.append = function (v) {
-        this.listener.emitAdded(null, v);
-        _super.prototype.push.call(this, v);
         return this;
     };
-    /**
-     * Clears array
-     * @return {this} a pointer to this
-     */
-    ArrayModel.prototype.clear = function () {
-        var _this = this;
-        this.forEach(function (v) {
-            _this.listener.emitRemoved(v, v);
-        });
-        _super.prototype.splice.call(this, 0);
-        return this;
+    Expression.prototype.$destroy = function () {
+        this.$disable();
+        this.values.splice(0);
+        this.valuesCache.splice(0);
+        this.linkedFunc.splice(0);
+        _super.prototype.$destroy.call(this);
     };
-    /**
-     * Inserts a value to position `index`
-     * @param index {number} index to insert value
-     * @param v {*} value to insert
-     * @return {this} a pointer to this
-     */
-    ArrayModel.prototype.insert = function (index, v) {
-        this.listener.emitAdded(this[index], v);
-        _super.prototype.splice.call(this, index, 0, v);
-        return this;
+    return Expression;
+}(ivalue_1.IValue));
+exports.Expression = Expression;
+
+
+// ./lib-es5/value/mirror.js
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    /**
-     * Inserts a value to the beginning of array
-     * @param v {*} value to insert
-     * @return {this} a pointer to this
-     */
-    ArrayModel.prototype.prepend = function (v) {
-        this.listener.emitAdded(this[0], v);
-        _super.prototype.unshift.call(this, v);
-        return this;
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mirror = void 0;
+var reference_1 = require("./reference");
+/**
+ * Declares a notifiable bind to a value
+ * @class Mirror
+ * @extends IValue
+ * @version 2
+ */
+var Mirror = /** @class */ (function (_super) {
+    __extends(Mirror, _super);
     /**
-     * Removes a value from an index
-     * @param index {number} index of value to remove
-     * @return {this} a pointer to this
-     */
-    ArrayModel.prototype.removeAt = function (index) {
-        if (index > 0 && index < this.length) {
-            this.listener.emitRemoved(this[index], this[index]);
-            _super.prototype.splice.call(this, index, 1);
-        }
-        return this;
-    };
-    /**
-     * Removes the first value of array
-     * @return {this} a pointer to this
+     * Constructs a notifiable bind to a value
+     * @param value {IValue} is initial value
+     * @param forwardOnly {boolean} ensure forward only synchronization
      */
-    ArrayModel.prototype.removeFirst = function () {
-        if (this.length) {
-            this.listener.emitRemoved(this[0], this[0]);
-            _super.prototype.shift.call(this);
+    function Mirror(value, forwardOnly) {
+        if (forwardOnly === void 0) { forwardOnly = false; }
+        var _this = _super.call(this, value.$) || this;
+        _this.$handler = function (v) {
+            _this.$ = v;
+        };
+        _this.$pointedValue = value;
+        _this.$forwardOnly = forwardOnly;
+        value.$on(_this.$handler);
+        _this.$seal();
+        return _this;
+    }
+    Object.defineProperty(Mirror.prototype, "$", {
+        get: function () {
+            // this is a ts bug
+            // eslint-disable-next-line
+            // @ts-ignore
+            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;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Mirror.prototype.$enable = function () {
+        if (!this.isEnabled) {
+            this.isEnabled = true;
+            this.$pointedValue.$on(this.$handler);
+            this.$ = this.$pointedValue.$;
         }
-        return this;
     };
-    /**
-     * Removes the ast value of array
-     * @return {this} a pointer to this
-     */
-    ArrayModel.prototype.removeLast = function () {
-        var last = this.last;
-        if (last != null) {
-            this.listener.emitRemoved(this[this.length - 1], last);
-            _super.prototype.pop.call(this);
+    Mirror.prototype.$disable = function () {
+        if (this.isEnabled) {
+            this.$pointedValue.$off(this.$handler);
+            this.isEnabled = false;
         }
-        return this;
-    };
-    /**
-     * Remove the first occurrence of value
-     * @param v {*} value to remove
-     * @return {this}
-     */
-    ArrayModel.prototype.removeOne = function (v) {
-        this.removeAt(this.indexOf(v));
-        return this;
-    };
-    ArrayModel.prototype.replace = function (at, with_) {
-        this.listener.emitAdded(this[at], with_);
-        this.listener.emitRemoved(this[at], this[at]);
-        this[at] = with_;
-        return this;
-    };
-    ArrayModel.prototype.enableReactivity = function () {
-        this.listener.enableReactivity();
-    };
-    ArrayModel.prototype.disableReactivity = function () {
-        this.listener.disableReactivity();
-    };
-    return ArrayModel;
-}(Array));
-exports.ArrayModel = ArrayModel;
-
-
-// ./lib-es5/core/errors.js
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrongBinding = exports.userError = exports.internalError = exports.notOverwritten = void 0;
-var reportIt = "Report it here: https://gitlab.com/vasille-js/vasille-js/-/issues";
-function notOverwritten() {
-    console.error("Vasille-SFP: Internal error", "Must be overwritten", reportIt);
-    return "not-overwritten";
-}
-exports.notOverwritten = notOverwritten;
-function internalError(msg) {
-    console.error("Vasille-SFP: Internal error", msg, reportIt);
-    return "internal-error";
-}
-exports.internalError = internalError;
-function userError(msg, err) {
-    console.error("Vasille-SFP: User error", msg);
-    return err;
-}
-exports.userError = userError;
-function wrongBinding(msg) {
-    return userError(msg, "wrong-binding");
-}
-exports.wrongBinding = wrongBinding;
-
-
-// ./lib-es5/core/destroyable.js
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Destroyable = void 0;
-/**
- * Mark an object which can be destroyed
- * @class Destroyable
- */
-var Destroyable = /** @class */ (function () {
-    function Destroyable() {
-    }
-    /**
-     * Make object fields non configurable
-     * @protected
-     */
-    Destroyable.prototype.$seal = function () {
-        var _this = this;
-        var $ = this;
-        Object.keys($).forEach(function (i) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (_this.hasOwnProperty(i)) {
-                var config = Object.getOwnPropertyDescriptor($, i);
-                if (config.configurable) {
-                    var descriptor = void 0;
-                    if (config.set || config.get) {
-                        descriptor = {
-                            configurable: false,
-                            get: config.get,
-                            set: config.set,
-                            enumerable: config.enumerable
-                        };
-                    }
-                    else {
-                        descriptor = {
-                            value: $[i],
-                            configurable: false,
-                            writable: config.writable,
-                            enumerable: config.enumerable
-                        };
-                    }
-                    Object.defineProperty($, i, descriptor);
-                }
-            }
-        });
     };
-    /**
-     * Garbage collector method
-     */
-    Destroyable.prototype.$destroy = function () {
-        // nothing here
+    Mirror.prototype.$destroy = function () {
+        this.$disable();
+        _super.prototype.$destroy.call(this);
     };
-    return Destroyable;
-}());
-exports.Destroyable = Destroyable;
+    return Mirror;
+}(reference_1.Reference));
+exports.Mirror = Mirror;
 
 
-// ./lib-es5/core/ivalue.js
+// ./lib-es5/value/pointer.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1000,149 +972,189 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IValue = exports.Switchable = void 0;
-var destroyable_js_1 = require("./destroyable.js");
-var errors_1 = require("./errors");
-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 (0, errors_1.notOverwritten)();
-    };
-    /**
-     * disable update handlers triggering
-     */
-    Switchable.prototype.$disable = function () {
-        throw (0, errors_1.notOverwritten)();
-    };
-    return Switchable;
-}(destroyable_js_1.Destroyable));
-exports.Switchable = Switchable;
+exports.Pointer = void 0;
+var mirror_1 = require("./mirror");
 /**
- * Interface which describes a value
- * @class IValue
- * @extends Destroyable
+ * r/w pointer to a value
+ * @class Pointer
+ * @extends Mirror
  */
-var IValue = /** @class */ (function (_super) {
-    __extends(IValue, _super);
+var Pointer = /** @class */ (function (_super) {
+    __extends(Pointer, _super);
     /**
-     * @param isEnabled {boolean} initial is enabled state
+     * @param value {IValue} value to point
+     * @param forwardOnly {boolean} forward only data flow
      */
-    function IValue(isEnabled) {
-        var _this = this; _super.call(this);
-        _this.isEnabled = isEnabled;
-        return _this;
+    function Pointer(value, forwardOnly) {
+        if (forwardOnly === void 0) { forwardOnly = false; }
+        return _super.call(this, value, forwardOnly) || this;
     }
-    Object.defineProperty(IValue.prototype, "$", {
-        /**
-         * Get the encapsulated value
-         * @return {*} the encapsulated value
-         */
-        get: function () {
-            throw (0, errors_1.notOverwritten)();
-        },
+    Object.defineProperty(Pointer.prototype, "$$", {
         /**
-         * Sets the encapsulated value
-         * @param value {*} value to encapsulate
+         * Point a new ivalue
+         * @param value {IValue} value to point
          */
         set: function (value) {
-            throw (0, errors_1.notOverwritten)();
+            if (this.$pointedValue !== value) {
+                this.$disable();
+                this.$pointedValue = value;
+                this.$enable();
+            }
         },
         enumerable: false,
         configurable: true
     });
-    /**
-     * Add a new handler to value change
-     * @param handler {function(value : *)} the handler to add
-     */
-    IValue.prototype.$on = function (handler) {
-        throw (0, errors_1.notOverwritten)();
-    };
-    /**
-     * Removes a handler of value change
-     * @param handler {function(value : *)} the handler to remove
-     */
-    IValue.prototype.$off = function (handler) {
-        throw (0, errors_1.notOverwritten)();
-    };
-    return IValue;
-}(Switchable));
-exports.IValue = IValue;
-
-
-// ./lib-es5/index.js
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reactive = exports.Binding = exports.Expression = exports.Portal = exports.App = exports.AppNode = exports.Extension = exports.Component = exports.Tag = exports.INode = exports.Fragment = exports.SetView = exports.ObjectView = exports.MapView = exports.ArrayView = exports.Listener = exports.BaseView = exports.SetModel = exports.ObjectModel = exports.MapModel = exports.ArrayModel = exports.Pointer = exports.Mirror = exports.Reference = exports.IValue = exports.Destroyable = void 0;
-var destroyable_1 = require("./core/destroyable");
-Object.defineProperty(exports, "Destroyable", { enumerable: true, get: function () { return destroyable_1.Destroyable; } });
-var core_1 = require("./core/core");
-Object.defineProperty(exports, "Reactive", { enumerable: true, get: function () { return core_1.Reactive; } });
-var ivalue_1 = require("./core/ivalue");
-Object.defineProperty(exports, "IValue", { enumerable: true, get: function () { return ivalue_1.IValue; } });
-var array_model_1 = require("./models/array-model");
-Object.defineProperty(exports, "ArrayModel", { enumerable: true, get: function () { return array_model_1.ArrayModel; } });
-var listener_1 = require("./models/listener");
-Object.defineProperty(exports, "Listener", { enumerable: true, get: function () { return listener_1.Listener; } });
-var map_model_1 = require("./models/map-model");
-Object.defineProperty(exports, "MapModel", { enumerable: true, get: function () { return map_model_1.MapModel; } });
-var object_model_1 = require("./models/object-model");
-Object.defineProperty(exports, "ObjectModel", { enumerable: true, get: function () { return object_model_1.ObjectModel; } });
-var set_model_1 = require("./models/set-model");
-Object.defineProperty(exports, "SetModel", { enumerable: true, get: function () { return set_model_1.SetModel; } });
-var app_1 = require("./node/app");
-Object.defineProperty(exports, "App", { enumerable: true, get: function () { return app_1.App; } });
-Object.defineProperty(exports, "AppNode", { enumerable: true, get: function () { return app_1.AppNode; } });
-Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return app_1.Portal; } });
-var node_1 = require("./node/node");
-Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return node_1.Component; } });
-Object.defineProperty(exports, "Extension", { enumerable: true, get: function () { return node_1.Extension; } });
-Object.defineProperty(exports, "Fragment", { enumerable: true, get: function () { return node_1.Fragment; } });
-Object.defineProperty(exports, "INode", { enumerable: true, get: function () { return node_1.INode; } });
-Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return node_1.Tag; } });
-var expression_1 = require("./value/expression");
-Object.defineProperty(exports, "Expression", { enumerable: true, get: function () { return expression_1.Expression; } });
-var mirror_1 = require("./value/mirror");
-Object.defineProperty(exports, "Mirror", { enumerable: true, get: function () { return mirror_1.Mirror; } });
-var pointer_1 = require("./value/pointer");
-Object.defineProperty(exports, "Pointer", { enumerable: true, get: function () { return pointer_1.Pointer; } });
-var reference_1 = require("./value/reference");
-Object.defineProperty(exports, "Reference", { enumerable: true, get: function () { return reference_1.Reference; } });
-var array_view_1 = require("./views/array-view");
-Object.defineProperty(exports, "ArrayView", { enumerable: true, get: function () { return array_view_1.ArrayView; } });
-var base_view_1 = require("./views/base-view");
-Object.defineProperty(exports, "BaseView", { enumerable: true, get: function () { return base_view_1.BaseView; } });
-var map_view_1 = require("./views/map-view");
-Object.defineProperty(exports, "MapView", { enumerable: true, get: function () { return map_view_1.MapView; } });
-var object_view_1 = require("./views/object-view");
-Object.defineProperty(exports, "ObjectView", { enumerable: true, get: function () { return object_view_1.ObjectView; } });
-var set_view_1 = require("./views/set-view");
-Object.defineProperty(exports, "SetView", { enumerable: true, get: function () { return set_view_1.SetView; } });
-var binding_1 = require("./binding/binding");
-Object.defineProperty(exports, "Binding", { enumerable: true, get: function () { return binding_1.Binding; } });
-
-
-// ./lib-es5/spec/svg.js
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+    return Pointer;
+}(mirror_1.Mirror));
+exports.Pointer = Pointer;
 
 
-// ./lib-es5/spec/react.js
+// ./lib-es5/models/listener.js
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Listener = void 0;
+/**
+ * Represent a listener for a model
+ * @class Listener
+ */
+var Listener = /** @class */ (function () {
+    function Listener() {
+        Object.defineProperties(this, {
+            onAdded: {
+                value: new Set,
+                writable: false,
+                configurable: false
+            },
+            onRemoved: {
+                value: new Set,
+                writable: false,
+                configurable: false
+            },
+            frozen: {
+                value: false,
+                writable: true,
+                configurable: false
+            },
+            queue: {
+                value: [],
+                writable: false,
+                configurable: false
+            }
+        });
+    }
+    /**
+     * Exclude the repeated operation in queue
+     * @private
+     */
+    Listener.prototype.excludeRepeat = function (index) {
+        var _this = this;
+        this.queue.forEach(function (item, i) {
+            if (item.index === index) {
+                _this.queue.splice(i, 1);
+                return true;
+            }
+        });
+        return false;
+    };
+    /**
+     * Emits added event to listeners
+     * @param index {*} index of value
+     * @param value {*} value of added item
+     */
+    Listener.prototype.emitAdded = function (index, value) {
+        if (this.frozen) {
+            if (!this.excludeRepeat(index)) {
+                this.queue.push({ sign: true, index: index, value: value });
+            }
+        }
+        else {
+            this.onAdded.forEach(function (handler) {
+                handler(index, value);
+            });
+        }
+    };
+    /**
+     * Emits removed event to listeners
+     * @param index {*} index of removed value
+     * @param value {*} value of removed item
+     */
+    Listener.prototype.emitRemoved = function (index, value) {
+        if (this.frozen) {
+            if (!this.excludeRepeat(index)) {
+                this.queue.push({ sign: false, index: index, value: value });
+            }
+        }
+        else {
+            this.onRemoved.forEach(function (handler) {
+                handler(index, value);
+            });
+        }
+    };
+    /**
+     * Adds a handler to added event
+     * @param handler {function} function to run on event emitting
+     */
+    Listener.prototype.onAdd = function (handler) {
+        this.onAdded.add(handler);
+    };
+    /**
+     * Adds a handler to removed event
+     * @param handler {function} function to run on event emitting
+     */
+    Listener.prototype.onRemove = function (handler) {
+        this.onRemoved.add(handler);
+    };
+    /**
+     * Removes an handler from added event
+     * @param handler {function} handler to remove
+     */
+    Listener.prototype.offAdd = function (handler) {
+        this.onAdded.delete(handler);
+    };
+    /**
+     * Removes an handler form removed event
+     * @param handler {function} handler to remove
+     */
+    Listener.prototype.offRemove = function (handler) {
+        this.onRemoved.delete(handler);
+    };
+    /**
+     * Run all queued operation and enable reactivity
+     */
+    Listener.prototype.enableReactivity = function () {
+        var _this = this;
+        this.queue.forEach(function (item) {
+            if (item.sign) {
+                _this.onAdded.forEach(function (handler) {
+                    handler(item.index, item.value);
+                });
+            }
+            else {
+                _this.onRemoved.forEach(function (handler) {
+                    handler(item.index, item.value);
+                });
+            }
+        });
+        this.queue.splice(0);
+        this.frozen = false;
+    };
+    /**
+     * Disable the reactivity and enable the queue
+     */
+    Listener.prototype.disableReactivity = function () {
+        this.frozen = true;
+    };
+    return Listener;
+}());
+exports.Listener = Listener;
 
 
-// ./lib-es5/spec/html.js
+// ./lib-es5/models/model.js
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 
 
-// ./lib-es5/value/expression.js
+// ./lib-es5/models/array-model.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1159,109 +1171,257 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Expression = void 0;
-var reference_js_1 = require("./reference.js");
-var ivalue_1 = require("../core/ivalue");
+exports.ArrayModel = void 0;
+var listener_1 = require("./listener");
 /**
- * Bind some values to one expression
- * @class Expression
- * @extends IValue
+ * Model based on Array class
+ * @extends Array
+ * @implements IModel
  */
-var Expression = /** @class */ (function (_super) {
-    __extends(Expression, _super);
+var ArrayModel = /** @class */ (function (_super) {
+    __extends(ArrayModel, _super);
     /**
-     * Creates a function bounded to N values
-     * @param func {Function} the function to bound
-     * @param values
-     * @param link {Boolean} links immediately if true
+     * @param data {Array} input data
      */
-    function Expression(func, link) {
-        var values = [];
-        for (var _i = 2; _i < arguments.length; _i++) {
-            values[_i - 2] = arguments[_i];
+    function ArrayModel(data) {
+        if (data === void 0) { data = []; }
+        var _this = this; _super.call(this);
+        Object.defineProperty(_this, 'listener', {
+            value: new listener_1.Listener,
+            writable: false,
+            configurable: false
+        });
+        for (var i = 0; i < data.length; i++) {
+            _super.prototype.push.call(_this, data[i]);
         }
-        var _this = _super.call(this, false) || this;
-        /**
-         * Expression will link different handler for each value of list
-         */
-        _this.linkedFunc = [];
-        var handler = function (i) {
-            if (i != null) {
-                _this.valuesCache[i] = _this.values[i].$;
-            }
-            _this.sync.$ = func.apply(_this, _this.valuesCache);
-        };
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        _this.valuesCache = values.map(function (item) { return item.$; });
-        _this.sync = new reference_js_1.Reference(func.apply(_this, _this.valuesCache));
-        var i = 0;
-        values.forEach(function () {
-            _this.linkedFunc.push(handler.bind(_this, Number(i++)));
-        });
-        _this.values = values;
-        _this.func = handler;
-        if (link) {
-            _this.$enable();
-        }
-        else {
-            handler();
-        }
-        _this.$seal();
         return _this;
     }
-    Object.defineProperty(Expression.prototype, "$", {
+    Object.defineProperty(ArrayModel.prototype, "last", {
+        /* Array members */
+        /**
+         * Gets the last item of array
+         * @return {*} the last item of array
+         */
         get: function () {
-            return this.sync.$;
-        },
-        set: function (value) {
-            this.sync.$ = value;
+            return this.length ? this[this.length - 1] : null;
         },
         enumerable: false,
         configurable: true
     });
-    Expression.prototype.$on = function (handler) {
-        this.sync.$on(handler);
+    /**
+     * Calls Array.fill and notify about changes
+     * @param value {*} value to fill with
+     * @param start {?number} begin index
+     * @param end {?number} end index
+     */
+    ArrayModel.prototype.fill = function (value, start, end) {
+        if (!start) {
+            start = 0;
+        }
+        if (!end) {
+            end = this.length;
+        }
+        for (var i = start; i < end; i++) {
+            this.listener.emitRemoved(this[i], this[i]);
+            this[i] = value;
+            this.listener.emitAdded(value, value);
+        }
         return this;
     };
-    Expression.prototype.$off = function (handler) {
-        this.sync.$off(handler);
-        return this;
+    /**
+     * Calls Array.pop and notify about changes
+     * @return {*} removed value
+     */
+    ArrayModel.prototype.pop = function () {
+        var v = _super.prototype.pop.call(this);
+        if (v !== undefined) {
+            this.listener.emitRemoved(v, v);
+        }
+        return v;
     };
-    Expression.prototype.$enable = function () {
-        if (!this.isEnabled) {
-            for (var i = 0; i < this.values.length; i++) {
-                this.values[i].$on(this.linkedFunc[i]);
-                this.valuesCache[i] = this.values[i].$;
+    /**
+     * Calls Array.push and notify about changes
+     * @param items {...*} values to push
+     * @return {number} new length of array
+     */
+    ArrayModel.prototype.push = function () {
+        var _this = this;
+        var items = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            items[_i] = arguments[_i];
+        }
+        items.forEach(function (item) {
+            _this.listener.emitAdded(item, item);
+            _super.prototype.push.call(_this, item);
+        });
+        return this.length;
+    };
+    /**
+     * Calls Array.shift and notify about changed
+     * @return {*} the shifted value
+     */
+    ArrayModel.prototype.shift = function () {
+        var v = _super.prototype.shift.call(this);
+        if (v !== undefined) {
+            this.listener.emitRemoved(v, v);
+        }
+        return v;
+    };
+    /**
+     * Calls Array.splice and notify about changed
+     * @param start {number} start index
+     * @param deleteCount {?number} delete count
+     * @param items {...*}
+     * @return {ArrayModel} a pointer to this
+     */
+    ArrayModel.prototype.splice = function (start, deleteCount) {
+        var items = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            items[_i - 2] = arguments[_i];
+        }
+        start = Math.min(start, this.length);
+        deleteCount = deleteCount || this.length - start;
+        var before = this[start + deleteCount];
+        for (var i = 0; i < deleteCount; i++) {
+            var index = start + deleteCount - i - 1;
+            if (this[index] !== undefined) {
+                this.listener.emitRemoved(this[index], this[index]);
             }
-            this.func();
-            this.isEnabled = true;
         }
+        for (var i = 0; i < items.length; i++) {
+            this.listener.emitAdded(before, items[i]);
+        }
+        return new ArrayModel(_super.prototype.splice.apply(this, __spreadArray([start, deleteCount], items, false)));
+    };
+    /**
+     * Calls Array.unshift and notify about changed
+     * @param items {...*} values to insert
+     * @return {number} the length after prepend
+     */
+    ArrayModel.prototype.unshift = function () {
+        var items = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            items[_i] = arguments[_i];
+        }
+        for (var i = 0; i < items.length; i++) {
+            this.listener.emitAdded(this[i], items[i]);
+        }
+        return _super.prototype.unshift.apply(this, items);
+    };
+    /**
+     * Inserts a value to the end of array
+     * @param v {*} value to insert
+     */
+    ArrayModel.prototype.append = function (v) {
+        this.listener.emitAdded(null, v);
+        _super.prototype.push.call(this, v);
         return this;
     };
-    Expression.prototype.$disable = function () {
-        if (this.isEnabled) {
-            for (var i = 0; i < this.values.length; i++) {
-                this.values[i].$off(this.linkedFunc[i]);
-            }
-            this.isEnabled = false;
+    /**
+     * Clears array
+     * @return {this} a pointer to this
+     */
+    ArrayModel.prototype.clear = function () {
+        var _this = this;
+        this.forEach(function (v) {
+            _this.listener.emitRemoved(v, v);
+        });
+        _super.prototype.splice.call(this, 0);
+        return this;
+    };
+    /**
+     * Inserts a value to position `index`
+     * @param index {number} index to insert value
+     * @param v {*} value to insert
+     * @return {this} a pointer to this
+     */
+    ArrayModel.prototype.insert = function (index, v) {
+        this.listener.emitAdded(this[index], v);
+        _super.prototype.splice.call(this, index, 0, v);
+        return this;
+    };
+    /**
+     * Inserts a value to the beginning of array
+     * @param v {*} value to insert
+     * @return {this} a pointer to this
+     */
+    ArrayModel.prototype.prepend = function (v) {
+        this.listener.emitAdded(this[0], v);
+        _super.prototype.unshift.call(this, v);
+        return this;
+    };
+    /**
+     * Removes a value from an index
+     * @param index {number} index of value to remove
+     * @return {this} a pointer to this
+     */
+    ArrayModel.prototype.removeAt = function (index) {
+        if (index > 0 && index < this.length) {
+            this.listener.emitRemoved(this[index], this[index]);
+            _super.prototype.splice.call(this, index, 1);
         }
         return this;
     };
-    Expression.prototype.$destroy = function () {
-        this.$disable();
-        this.values.splice(0);
-        this.valuesCache.splice(0);
-        this.linkedFunc.splice(0);
-        _super.prototype.$destroy.call(this);
+    /**
+     * Removes the first value of array
+     * @return {this} a pointer to this
+     */
+    ArrayModel.prototype.removeFirst = function () {
+        if (this.length) {
+            this.listener.emitRemoved(this[0], this[0]);
+            _super.prototype.shift.call(this);
+        }
+        return this;
     };
-    return Expression;
-}(ivalue_1.IValue));
-exports.Expression = Expression;
+    /**
+     * Removes the ast value of array
+     * @return {this} a pointer to this
+     */
+    ArrayModel.prototype.removeLast = function () {
+        var last = this.last;
+        if (last != null) {
+            this.listener.emitRemoved(this[this.length - 1], last);
+            _super.prototype.pop.call(this);
+        }
+        return this;
+    };
+    /**
+     * Remove the first occurrence of value
+     * @param v {*} value to remove
+     * @return {this}
+     */
+    ArrayModel.prototype.removeOne = function (v) {
+        this.removeAt(this.indexOf(v));
+        return this;
+    };
+    ArrayModel.prototype.replace = function (at, with_) {
+        this.listener.emitAdded(this[at], with_);
+        this.listener.emitRemoved(this[at], this[at]);
+        this[at] = with_;
+        return this;
+    };
+    ArrayModel.prototype.enableReactivity = function () {
+        this.listener.enableReactivity();
+    };
+    ArrayModel.prototype.disableReactivity = function () {
+        this.listener.disableReactivity();
+    };
+    return ArrayModel;
+}(Array));
+exports.ArrayModel = ArrayModel;
 
 
-// ./lib-es5/value/reference.js
+// ./lib-es5/models/map-model.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1279,70 +1439,83 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reference = void 0;
-var ivalue_1 = require("../core/ivalue");
+exports.MapModel = void 0;
+var listener_1 = require("./listener");
 /**
- * Declares a notifiable value
- * @class Reference
- * @extends IValue
+ * A Map based memory
+ * @class MapModel
+ * @extends Map
+ * @implements IModel
  */
-var Reference = /** @class */ (function (_super) {
-    __extends(Reference, _super);
+var MapModel = /** @class */ (function (_super) {
+    __extends(MapModel, _super);
     /**
-     * @param value {any} the initial value
+     * Constructs a map model
+     * @param map {[*, *][]} input data
      */
-    function Reference(value) {
-        var _this = _super.call(this, true) || this;
-        _this.$value = value;
-        _this.$onchange = new Set;
-        _this.$seal();
+    function MapModel(map) {
+        if (map === void 0) { map = []; }
+        var _this = this; _super.call(this);
+        Object.defineProperty(_this, 'listener', {
+            value: new listener_1.Listener,
+            writable: false,
+            configurable: false
+        });
+        map.forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            _super.prototype.set.call(_this, key, value);
+        });
         return _this;
     }
-    Object.defineProperty(Reference.prototype, "$", {
-        get: function () {
-            return this.$value;
-        },
-        set: function (value) {
-            if (this.$value !== value) {
-                this.$value = value;
-                if (this.isEnabled) {
-                    this.$onchange.forEach(function (handler) {
-                        handler(value);
-                    });
-                }
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Reference.prototype.$enable = function () {
+    /**
+     * Calls Map.clear and notify abut changes
+     */
+    MapModel.prototype.clear = function () {
         var _this = this;
-        if (!this.isEnabled) {
-            this.$onchange.forEach(function (handler) {
-                handler(_this.$value);
-            });
-            this.isEnabled = true;
-        }
+        this.forEach(function (value, key) {
+            _this.listener.emitRemoved(key, value);
+        });
+        _super.prototype.clear.call(this);
     };
-    Reference.prototype.$disable = function () {
-        this.isEnabled = false;
+    /**
+     * Calls Map.delete and notify abut changes
+     * @param key {*} key
+     * @return {boolean} true if removed something, otherwise false
+     */
+    MapModel.prototype.delete = function (key) {
+        var tmp = _super.prototype.get.call(this, key);
+        if (tmp) {
+            this.listener.emitRemoved(key, tmp);
+        }
+        return _super.prototype.delete.call(this, key);
     };
-    Reference.prototype.$on = function (handler) {
-        this.$onchange.add(handler);
+    /**
+     * Calls Map.set and notify abut changes
+     * @param key {*} key
+     * @param value {*} value
+     * @return {MapModel} a pointer to this
+     */
+    MapModel.prototype.set = function (key, value) {
+        var tmp = _super.prototype.get.call(this, key);
+        if (tmp) {
+            this.listener.emitRemoved(key, tmp);
+        }
+        _super.prototype.set.call(this, key, value);
+        this.listener.emitAdded(key, value);
+        return this;
     };
-    Reference.prototype.$off = function (handler) {
-        this.$onchange.delete(handler);
+    MapModel.prototype.enableReactivity = function () {
+        this.listener.enableReactivity();
     };
-    Reference.prototype.$destroy = function () {
-        _super.prototype.$destroy.call(this);
-        this.$onchange.clear();
+    MapModel.prototype.disableReactivity = function () {
+        this.listener.disableReactivity();
     };
-    return Reference;
-}(ivalue_1.IValue));
-exports.Reference = Reference;
+    return MapModel;
+}(Map));
+exports.MapModel = MapModel;
 
 
-// ./lib-es5/value/mirror.js
+// ./lib-es5/models/object-model.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1360,75 +1533,97 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Mirror = void 0;
-var reference_1 = require("./reference");
+exports.ObjectModel = void 0;
+var listener_1 = require("./listener");
 /**
- * Declares a notifiable bind to a value
- * @class Mirror
- * @extends IValue
- * @version 2
+ * Object based model
+ * @extends Object
  */
-var Mirror = /** @class */ (function (_super) {
-    __extends(Mirror, _super);
+var ObjectModel = /** @class */ (function (_super) {
+    __extends(ObjectModel, _super);
     /**
-     * Constructs a notifiable bind to a value
-     * @param value {IValue} is initial value
-     * @param forwardOnly {boolean} ensure forward only synchronization
+     * Constructs a object model
+     * @param obj {Object} input data
      */
-    function Mirror(value, forwardOnly) {
-        if (forwardOnly === void 0) { forwardOnly = false; }
-        var _this = _super.call(this, value.$) || this;
-        _this.$handler = function (v) {
-            _this.$ = v;
-        };
-        _this.$pointedValue = value;
-        _this.$forwardOnly = forwardOnly;
-        value.$on(_this.$handler);
-        _this.$seal();
+    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_1.Listener,
+            writable: false,
+            configurable: false
+        });
+        for (var i in obj) {
+            Object.defineProperty(_this.container, i, {
+                value: obj[i],
+                configurable: true,
+                writable: true,
+                enumerable: true
+            });
+            _this.listener.emitAdded(i, obj[i]);
+        }
         return _this;
     }
-    Object.defineProperty(Mirror.prototype, "$", {
+    /**
+     * Gets a value of a field
+     * @param key {string}
+     * @return {*}
+     */
+    ObjectModel.prototype.get = function (key) {
+        return this.container[key];
+    };
+    /**
+     * Sets an object property value
+     * @param key {string} property name
+     * @param v {*} property value
+     * @return {ObjectModel} a pointer to this
+     */
+    ObjectModel.prototype.set = function (key, v) {
+        if (Reflect.has(this.container, key)) {
+            this.listener.emitRemoved(key, this.container[key]);
+            this.container[key] = v;
+        }
+        else {
+            Object.defineProperty(this.container, key, {
+                value: v,
+                configurable: true,
+                writable: true,
+                enumerable: true
+            });
+        }
+        this.listener.emitAdded(key, this.container[key]);
+        return this;
+    };
+    Object.defineProperty(ObjectModel.prototype, "values", {
         get: function () {
-            // this is a ts bug
-            // eslint-disable-next-line
-            // @ts-ignore
-            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;
+            return this.container;
         },
         enumerable: false,
         configurable: true
     });
-    Mirror.prototype.$enable = function () {
-        if (!this.isEnabled) {
-            this.isEnabled = true;
-            this.$pointedValue.$on(this.$handler);
-            this.$ = this.$pointedValue.$;
+    /**
+     * Deletes an object property
+     * @param key {string} property name
+     */
+    ObjectModel.prototype.delete = function (key) {
+        if (this.container[key]) {
+            this.listener.emitRemoved(key, this.container[key]);
+            delete this.container[key];
         }
     };
-    Mirror.prototype.$disable = function () {
-        if (this.isEnabled) {
-            this.$pointedValue.$off(this.$handler);
-            this.isEnabled = false;
-        }
+    ObjectModel.prototype.enableReactivity = function () {
+        this.listener.enableReactivity();
     };
-    Mirror.prototype.$destroy = function () {
-        this.$disable();
-        _super.prototype.$destroy.call(this);
+    ObjectModel.prototype.disableReactivity = function () {
+        this.listener.disableReactivity();
     };
-    return Mirror;
-}(reference_1.Reference));
-exports.Mirror = Mirror;
+    return ObjectModel;
+}(Object));
+exports.ObjectModel = ObjectModel;
 
 
-// ./lib-es5/value/pointer.js
+// ./lib-es5/models/set-model.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1446,41 +1641,90 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pointer = void 0;
-var mirror_1 = require("./mirror");
+exports.SetModel = void 0;
+var listener_1 = require("./listener");
 /**
- * r/w pointer to a value
- * @class Pointer
- * @extends Mirror
+ * A Set based model
+ * @class SetModel
+ * @extends Set
+ * @implements IModel
  */
-var Pointer = /** @class */ (function (_super) {
-    __extends(Pointer, _super);
+var SetModel = /** @class */ (function (_super) {
+    __extends(SetModel, _super);
     /**
-     * @param value {IValue} value to point
-     * @param forwardOnly {boolean} forward only data flow
+     * Constructs a set model based on a set
+     * @param set {Set} input data
      */
-    function Pointer(value, forwardOnly) {
-        if (forwardOnly === void 0) { forwardOnly = false; }
-        return _super.call(this, value, forwardOnly) || this;
+    function SetModel(set) {
+        if (set === void 0) { set = []; }
+        var _this = this; _super.call(this);
+        Object.defineProperty(_this, 'listener', {
+            value: new listener_1.Listener,
+            writable: false,
+            configurable: false
+        });
+        set.forEach(function (item) {
+            _super.prototype.add.call(_this, item);
+        });
+        return _this;
     }
-    Object.defineProperty(Pointer.prototype, "$$", {
-        /**
-         * Point a new ivalue
-         * @param value {IValue} value to point
-         */
-        set: function (value) {
-            if (this.$pointedValue !== value) {
-                this.$disable();
-                this.$pointedValue = value;
-                this.$enable();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return Pointer;
-}(mirror_1.Mirror));
-exports.Pointer = Pointer;
+    /**
+     * Calls Set.add and notify abut changes
+     * @param value {*} value
+     * @return {this} a pointer to this
+     */
+    SetModel.prototype.add = function (value) {
+        if (!_super.prototype.has.call(this, value)) {
+            this.listener.emitAdded(value, value);
+            _super.prototype.add.call(this, value);
+        }
+        return this;
+    };
+    /**
+     * Calls Set.clear and notify abut changes
+     */
+    SetModel.prototype.clear = function () {
+        var _this = this;
+        this.forEach(function (item) {
+            _this.listener.emitRemoved(item, item);
+        });
+        _super.prototype.clear.call(this);
+    };
+    /**
+     * Calls Set.delete and notify abut changes
+     * @param value {*}
+     * @return {boolean} true if a value was deleted, otherwise false
+     */
+    SetModel.prototype.delete = function (value) {
+        if (_super.prototype.has.call(this, value)) {
+            this.listener.emitRemoved(value, value);
+        }
+        return _super.prototype.delete.call(this, value);
+    };
+    SetModel.prototype.enableReactivity = function () {
+        this.listener.enableReactivity();
+    };
+    SetModel.prototype.disableReactivity = function () {
+        this.listener.disableReactivity();
+    };
+    return SetModel;
+}(Set));
+exports.SetModel = SetModel;
+
+
+// ./lib-es5/spec/html.js
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+
+// ./lib-es5/spec/svg.js
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+
+// ./lib-es5/spec/react.js
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 
 
 // ./lib-es5/binding/binding.js
@@ -1537,7 +1781,7 @@ var Binding = /** @class */ (function (_super) {
 exports.Binding = Binding;
 
 
-// ./lib-es5/core/core.js
+// ./lib-es5/binding/attribute.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1554,281 +1798,163 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reactive = exports.ReactivePrivate = exports.current = void 0;
-var destroyable_js_1 = require("./destroyable.js");
-var errors_1 = require("./errors");
-var expression_1 = require("../value/expression");
-var reference_1 = require("../value/reference");
-var pointer_1 = require("../value/pointer");
-var mirror_1 = require("../value/mirror");
-exports.current = null;
-var currentStack = [];
-function stack(node) {
-    currentStack.push(exports.current);
-    exports.current = node;
-}
-function unstack() {
-    exports.current = currentStack.pop();
-}
+exports.AttributeBinding = void 0;
+var binding_1 = require("./binding");
 /**
- * Private stuff of a reactive object
- * @class ReactivePrivate
- * @extends Destroyable
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
  */
-var ReactivePrivate = /** @class */ (function (_super) {
-    __extends(ReactivePrivate, _super);
-    function ReactivePrivate() {
-        var _this = this; _super.call(this);
-        /**
-         * A list of user-defined values
-         * @type {Set}
-         */
-        _this.watch = new Set;
-        /**
-         * A list of user-defined bindings
-         * @type {Set}
-         */
-        _this.bindings = new Set;
-        /**
-         * A list of user defined models
-         */
-        _this.models = new Set;
-        /**
-         * Reactivity switch state
-         * @type {boolean}
-         */
-        _this.enabled = true;
-        /**
-         * The frozen state of object
-         * @type {boolean}
-         */
-        _this.frozen = false;
+var AttributeBinding = /** @class */ (function (_super) {
+    __extends(AttributeBinding, _super);
+    /**
+     * Constructs an attribute binding description
+     * @param node {INode} the vasille node
+     * @param name {String} the name of attribute
+     * @param value {IValue} value to bind
+     */
+    function AttributeBinding(node, name, value) {
+        var _this = _super.call(this, value) || this;
+        _this.init(function (value) {
+            if (value) {
+                if (typeof value === 'boolean') {
+                    node.node.setAttribute(name, "");
+                }
+                else {
+                    node.node.setAttribute(name, "".concat(value));
+                }
+            }
+            else {
+                node.node.removeAttribute(name);
+            }
+        });
         _this.$seal();
         return _this;
     }
-    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.clear();
-        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 AttributeBinding;
+}(binding_1.Binding));
+exports.AttributeBinding = AttributeBinding;
+
+
+// ./lib-es5/binding/class.js
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    return ReactivePrivate;
-}(destroyable_js_1.Destroyable));
-exports.ReactivePrivate = ReactivePrivate;
-/**
- * A reactive object
- * @class Reactive
- * @extends Destroyable
- */
-var Reactive = /** @class */ (function (_super) {
-    __extends(Reactive, _super);
-    function Reactive(input, $) {
-        var _this = this; _super.call(this);
-        _this.input = input;
-        _this.$ = $ || new ReactivePrivate;
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicalClassBinding = exports.StaticClassBinding = void 0;
+var binding_1 = require("./binding");
+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;
     }
-    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) {
-        var $ = this.$;
-        var ref = new reference_1.Reference(value);
-        $.watch.add(ref);
-        return ref;
-    };
-    /**
-     * Create a mirror
-     * @param value {IValue} value to mirror
-     */
-    Reactive.prototype.mirror = function (value) {
-        var mirror = new mirror_1.Mirror(value, false);
-        this.$.watch.add(mirror);
-        return mirror;
-    };
-    /**
-     * Create a forward-only mirror
-     * @param value {IValue} value to mirror
-     */
-    Reactive.prototype.forward = function (value) {
-        var mirror = new mirror_1.Mirror(value, true);
-        this.$.watch.add(mirror);
-        return mirror;
-    };
-    /**
-     * Creates a pointer
-     * @param value {*} default value to point
-     * @param forwardOnly {boolean} forward only sync
-     */
-    Reactive.prototype.point = function (value, forwardOnly) {
-        if (forwardOnly === void 0) { forwardOnly = false; }
-        var $ = this.$;
-        var pointer = new pointer_1.Pointer(value, forwardOnly);
-        $.watch.add(pointer);
-        return pointer;
-    };
-    /**
-     * Register a model
-     * @param model
-     */
-    Reactive.prototype.register = function (model) {
-        this.$.models.add(model);
-        return model;
-    };
-    /**
-     * 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_1.Expression.bind.apply(expression_1.Expression, __spreadArray([void 0, func, !this.$.frozen], values, false)))());
-    };
-    /**
-     * 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_1.Expression.bind.apply(expression_1.Expression, __spreadArray([void 0, func, !this.$.frozen], values, false)))();
-        var $ = this.$;
-        $.watch.add(res);
-        return res;
-    };
-    /**
-     * Enable reactivity of fields
-     */
-    Reactive.prototype.enable = function () {
-        var $ = this.$;
-        if (!$.enabled) {
-            $.watch.forEach(function (watcher) {
-                watcher.$enable();
-            });
-            $.models.forEach(function (model) {
-                model.enableReactivity();
-            });
-            $.enabled = true;
-        }
+    return StaticClassBinding;
+}(binding_1.Binding));
+exports.StaticClassBinding = StaticClassBinding;
+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);
+                }
+                if (value.length) {
+                    addClass(node, value);
+                }
+                _this.current = value;
+            }
+        });
+        _this.$seal();
+        return _this;
+    }
+    return DynamicalClassBinding;
+}(binding_1.Binding));
+exports.DynamicalClassBinding = DynamicalClassBinding;
+
+
+// ./lib-es5/binding/style.js
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    /**
-     * Disable reactivity of fields
-     */
-    Reactive.prototype.disable = function () {
-        var $ = this.$;
-        if ($.enabled) {
-            $.watch.forEach(function (watcher) {
-                watcher.$disable();
-            });
-            $.models.forEach(function (model) {
-                model.disableReactivity();
-            });
-            $.enabled = false;
-        }
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleBinding = void 0;
+var binding_1 = require("./binding");
+/**
+ * Describes a style attribute binding
+ * @class StyleBinding
+ * @extends Binding
+ */
+var StyleBinding = /** @class */ (function (_super) {
+    __extends(StyleBinding, _super);
     /**
-     * Disable/Enable reactivity of object fields with feedback
-     * @param cond {IValue} show condition
-     * @param onOff {function} on show feedback
-     * @param onOn {function} on hide feedback
+     * Constructs a style binding attribute
+     * @param node {INode} the vasille node
+     * @param name {string} the name of style property
+     * @param value {IValue} the value to bind
      */
-    Reactive.prototype.bindAlive = function (cond, onOff, onOn) {
-        var _this = this;
-        var $ = this.$;
-        if ($.freezeExpr) {
-            throw (0, errors_1.wrongBinding)("this component already have a freeze state");
-        }
-        if ($.watch.has(cond)) {
-            throw (0, errors_1.wrongBinding)("freeze state must be bound to an external component");
-        }
-        $.freezeExpr = new expression_1.Expression(function (cond) {
-            $.frozen = !cond;
-            if (cond) {
-                onOn === null || onOn === void 0 ? void 0 : onOn();
-                _this.enable();
-            }
-            else {
-                onOff === null || onOff === void 0 ? void 0 : onOff();
-                _this.disable();
+    function StyleBinding(node, name, value) {
+        var _this = _super.call(this, value) || this;
+        _this.init(function (value) {
+            if (node.node instanceof HTMLElement) {
+                node.node.style.setProperty(name, value);
             }
-        }, true, cond);
-        return this;
-    };
-    Reactive.prototype.init = function () {
-        this.applyOptions(this.input);
-        return this.compose(this.input);
-    };
-    Reactive.prototype.applyOptions = function (input) {
-        // empty
-    };
-    Reactive.prototype.applyOptionsNow = function () {
-        this.applyOptions(this.input);
-    };
-    Reactive.prototype.compose = function (input) {
-        throw (0, errors_1.notOverwritten)();
-    };
-    Reactive.prototype.composeNow = function () {
-        this.compose(this.input);
-    };
-    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_js_1.Destroyable));
-exports.Reactive = Reactive;
+        });
+        _this.$seal();
+        return _this;
+    }
+    return StyleBinding;
+}(binding_1.Binding));
+exports.StyleBinding = StyleBinding;
 
 
 // ./lib-es5/node/node.js
@@ -2023,7 +2149,9 @@ var Fragment = /** @class */ (function (_super) {
      * @param input
      * @param cb {function(Tag, *)} callback
      */
-    Fragment.prototype.tag = function (tagName, input, cb) {
+    Fragment.prototype.tag = function (tagName, input, cb
+    // @ts-ignore
+    ) {
         var $ = this.$;
         var node = new Tag(input);
         input.slot = cb || input.slot;
@@ -2031,6 +2159,7 @@ var Fragment = /** @class */ (function (_super) {
         node.init();
         this.pushNode(node);
         node.ready();
+        // @ts-ignore
         return node.node;
     };
     /**
@@ -2775,276 +2904,66 @@ var DebugNode = /** @class */ (function (_super) {
         var $ = this.$;
         if (!text) {
             throw (0, errors_1.internalError)('wrong DebugNode::$preninit call');
-        }
-        $.preinitComment(app, parent, text);
-    };
-    /**
-     * Runs garbage collector
-     */
-    DebugNode.prototype.$destroy = function () {
-        this.$.$destroy();
-        _super.prototype.$destroy.call(this);
-    };
-    return DebugNode;
-}(Fragment));
-exports.DebugNode = DebugNode;
-
-
-// ./lib-es5/node/app.js
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Portal = exports.App = exports.AppNode = void 0;
-var node_1 = require("./node");
-/**
- * Application Node
- * @class AppNode
- * @extends INode
- */
-var AppNode = /** @class */ (function (_super) {
-    __extends(AppNode, _super);
-    /**
-     * @param input
-     */
-    function AppNode(input) {
-        var _this = _super.call(this, input) || this;
-        _this.debugUi = input.debugUi || false;
-        _this.$seal();
-        return _this;
-    }
-    return AppNode;
-}(node_1.INode));
-exports.AppNode = AppNode;
-/**
- * Represents a Vasille.js application
- * @class App
- * @extends AppNode
- */
-var App = /** @class */ (function (_super) {
-    __extends(App, _super);
-    /**
-     * Constructs an app node
-     * @param node {Element} The root of application
-     * @param input
-     */
-    function App(node, input) {
-        var _this = _super.call(this, input) || this;
-        _this.$.node = node;
-        _this.preinit(_this, _this);
-        _this.init();
-        _this.$seal();
-        return _this;
-    }
-    App.prototype.appendNode = function (node) {
-        this.$.node.appendChild(node);
-    };
-    return App;
-}(AppNode));
-exports.App = App;
-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));
-exports.Portal = Portal;
-
-
-// ./lib-es5/binding/attribute.js
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AttributeBinding = void 0;
-var binding_1 = require("./binding");
-/**
- * Represents an Attribute binding description
- * @class AttributeBinding
- * @extends Binding
- */
-var AttributeBinding = /** @class */ (function (_super) {
-    __extends(AttributeBinding, _super);
-    /**
-     * Constructs an attribute binding description
-     * @param node {INode} the vasille node
-     * @param name {String} the name of attribute
-     * @param value {IValue} value to bind
-     */
-    function AttributeBinding(node, name, value) {
-        var _this = _super.call(this, value) || this;
-        _this.init(function (value) {
-            if (value) {
-                if (typeof value === 'boolean') {
-                    node.node.setAttribute(name, "");
-                }
-                else {
-                    node.node.setAttribute(name, "".concat(value));
-                }
-            }
-            else {
-                node.node.removeAttribute(name);
-            }
-        });
-        _this.$seal();
-        return _this;
-    }
-    return AttributeBinding;
-}(binding_1.Binding));
-exports.AttributeBinding = AttributeBinding;
-
-
-// ./lib-es5/binding/style.js
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleBinding = void 0;
-var binding_1 = require("./binding");
-/**
- * Describes a style attribute binding
- * @class StyleBinding
- * @extends Binding
- */
-var StyleBinding = /** @class */ (function (_super) {
-    __extends(StyleBinding, _super);
-    /**
-     * Constructs a style binding attribute
-     * @param node {INode} the vasille node
-     * @param name {string} the name of style property
-     * @param value {IValue} the value to bind
-     */
-    function StyleBinding(node, name, value) {
-        var _this = _super.call(this, value) || this;
-        _this.init(function (value) {
-            if (node.node instanceof HTMLElement) {
-                node.node.style.setProperty(name, value);
-            }
-        });
-        _this.$seal();
-        return _this;
-    }
-    return StyleBinding;
-}(binding_1.Binding));
-exports.StyleBinding = StyleBinding;
-
-
-// ./lib-es5/binding/class.js
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicalClassBinding = exports.StaticClassBinding = void 0;
-var binding_1 = require("./binding");
-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;
-    }
-    return StaticClassBinding;
-}(binding_1.Binding));
-exports.StaticClassBinding = StaticClassBinding;
-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);
-                }
-                if (value.length) {
-                    addClass(node, value);
-                }
-                _this.current = value;
-            }
-        });
-        _this.$seal();
-        return _this;
+        }
+        $.preinitComment(app, parent, text);
+    };
+    /**
+     * Runs garbage collector
+     */
+    DebugNode.prototype.$destroy = function () {
+        this.$.$destroy();
+        _super.prototype.$destroy.call(this);
+    };
+    return DebugNode;
+}(Fragment));
+exports.DebugNode = DebugNode;
+
+
+// ./lib-es5/node/watch.js
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Watch = void 0;
+var node_1 = require("./node");
+/**
+ * Watch Node
+ * @class Watch
+ * @extends Fragment
+ */
+var Watch = /** @class */ (function (_super) {
+    __extends(Watch, _super);
+    function Watch() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    return DynamicalClassBinding;
-}(binding_1.Binding));
-exports.DynamicalClassBinding = DynamicalClassBinding;
+    Watch.prototype.compose = function (input) {
+        var _this = this;
+        this.watch(function (value) {
+            _this.children.forEach(function (child) {
+                child.$destroy();
+            });
+            _this.children.clear();
+            _this.lastChild = null;
+            input.slot && input.slot(_this, value);
+        }, input.model);
+        input.slot(this, input.model.$);
+    };
+    return Watch;
+}(node_1.Fragment));
+exports.Watch = Watch;
 
 
 // ./lib-es5/views/repeat-node.js
@@ -3254,7 +3173,7 @@ var ArrayView = /** @class */ (function (_super) {
 exports.ArrayView = ArrayView;
 
 
-// ./lib-es5/node/watch.js
+// ./lib-es5/views/map-view.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -3272,33 +3191,28 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Watch = void 0;
-var node_1 = require("./node");
+exports.MapView = void 0;
+var base_view_1 = require("./base-view");
 /**
- * Watch Node
- * @class Watch
- * @extends Fragment
+ * Create a children pack for each map value
+ * @class MapView
+ * @extends BaseView
  */
-var Watch = /** @class */ (function (_super) {
-    __extends(Watch, _super);
-    function Watch() {
+var MapView = /** @class */ (function (_super) {
+    __extends(MapView, _super);
+    function MapView() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Watch.prototype.compose = function (input) {
+    MapView.prototype.compose = function (input) {
         var _this = this;
-        this.watch(function (value) {
-            _this.children.forEach(function (child) {
-                child.$destroy();
-            });
-            _this.children.clear();
-            _this.lastChild = null;
-            input.slot && input.slot(_this, value);
-        }, input.model);
-        input.slot(this, input.model.$);
+        _super.prototype.compose.call(this, input);
+        input.model.forEach(function (value, key) {
+            _this.createChild(input, key, value);
+        });
     };
-    return Watch;
-}(node_1.Fragment));
-exports.Watch = Watch;
+    return MapView;
+}(base_view_1.BaseView));
+exports.MapView = MapView;
 
 
 // ./lib-es5/views/object-view.js
@@ -3344,7 +3258,7 @@ var ObjectView = /** @class */ (function (_super) {
 exports.ObjectView = ObjectView;
 
 
-// ./lib-es5/views/map-view.js
+// ./lib-es5/views/set-view.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -3362,31 +3276,94 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MapView = void 0;
+exports.SetView = void 0;
 var base_view_1 = require("./base-view");
 /**
- * Create a children pack for each map value
- * @class MapView
+ * Create a children pack for each set value
+ * @class SetView
  * @extends BaseView
  */
-var MapView = /** @class */ (function (_super) {
-    __extends(MapView, _super);
-    function MapView() {
+var SetView = /** @class */ (function (_super) {
+    __extends(SetView, _super);
+    function SetView() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    MapView.prototype.compose = function (input) {
+    SetView.prototype.compose = function (input) {
         var _this = this;
         _super.prototype.compose.call(this, input);
-        input.model.forEach(function (value, key) {
-            _this.createChild(input, key, value);
+        var set = input.model;
+        set.forEach(function (item) {
+            _this.createChild(input, item, item);
         });
     };
-    return MapView;
+    return SetView;
 }(base_view_1.BaseView));
-exports.MapView = MapView;
+exports.SetView = SetView;
 
 
-// ./lib-es5/views/set-view.js
+// ./lib-es5/index.js
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.less = exports.Watch = exports.Reactive = exports.Binding = exports.Expression = exports.Portal = exports.App = exports.AppNode = exports.Extension = exports.Component = exports.Tag = exports.INode = exports.Fragment = exports.SetView = exports.ObjectView = exports.MapView = exports.ArrayView = exports.Listener = exports.BaseView = exports.SetModel = exports.ObjectModel = exports.MapModel = exports.ArrayModel = exports.Pointer = exports.Mirror = exports.Reference = exports.IValue = exports.Destroyable = void 0;
+var destroyable_1 = require("./core/destroyable");
+Object.defineProperty(exports, "Destroyable", { enumerable: true, get: function () { return destroyable_1.Destroyable; } });
+var core_1 = require("./core/core");
+Object.defineProperty(exports, "Reactive", { enumerable: true, get: function () { return core_1.Reactive; } });
+var ivalue_1 = require("./core/ivalue");
+Object.defineProperty(exports, "IValue", { enumerable: true, get: function () { return ivalue_1.IValue; } });
+var array_model_1 = require("./models/array-model");
+Object.defineProperty(exports, "ArrayModel", { enumerable: true, get: function () { return array_model_1.ArrayModel; } });
+var listener_1 = require("./models/listener");
+Object.defineProperty(exports, "Listener", { enumerable: true, get: function () { return listener_1.Listener; } });
+var map_model_1 = require("./models/map-model");
+Object.defineProperty(exports, "MapModel", { enumerable: true, get: function () { return map_model_1.MapModel; } });
+var object_model_1 = require("./models/object-model");
+Object.defineProperty(exports, "ObjectModel", { enumerable: true, get: function () { return object_model_1.ObjectModel; } });
+var set_model_1 = require("./models/set-model");
+Object.defineProperty(exports, "SetModel", { enumerable: true, get: function () { return set_model_1.SetModel; } });
+var app_1 = require("./node/app");
+Object.defineProperty(exports, "App", { enumerable: true, get: function () { return app_1.App; } });
+Object.defineProperty(exports, "AppNode", { enumerable: true, get: function () { return app_1.AppNode; } });
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return app_1.Portal; } });
+var node_1 = require("./node/node");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return node_1.Component; } });
+Object.defineProperty(exports, "Extension", { enumerable: true, get: function () { return node_1.Extension; } });
+Object.defineProperty(exports, "Fragment", { enumerable: true, get: function () { return node_1.Fragment; } });
+Object.defineProperty(exports, "INode", { enumerable: true, get: function () { return node_1.INode; } });
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return node_1.Tag; } });
+var expression_1 = require("./value/expression");
+Object.defineProperty(exports, "Expression", { enumerable: true, get: function () { return expression_1.Expression; } });
+var mirror_1 = require("./value/mirror");
+Object.defineProperty(exports, "Mirror", { enumerable: true, get: function () { return mirror_1.Mirror; } });
+var pointer_1 = require("./value/pointer");
+Object.defineProperty(exports, "Pointer", { enumerable: true, get: function () { return pointer_1.Pointer; } });
+var reference_1 = require("./value/reference");
+Object.defineProperty(exports, "Reference", { enumerable: true, get: function () { return reference_1.Reference; } });
+var array_view_1 = require("./views/array-view");
+Object.defineProperty(exports, "ArrayView", { enumerable: true, get: function () { return array_view_1.ArrayView; } });
+var base_view_1 = require("./views/base-view");
+Object.defineProperty(exports, "BaseView", { enumerable: true, get: function () { return base_view_1.BaseView; } });
+var map_view_1 = require("./views/map-view");
+Object.defineProperty(exports, "MapView", { enumerable: true, get: function () { return map_view_1.MapView; } });
+var object_view_1 = require("./views/object-view");
+Object.defineProperty(exports, "ObjectView", { enumerable: true, get: function () { return object_view_1.ObjectView; } });
+var set_view_1 = require("./views/set-view");
+Object.defineProperty(exports, "SetView", { enumerable: true, get: function () { return set_view_1.SetView; } });
+var binding_1 = require("./binding/binding");
+Object.defineProperty(exports, "Binding", { enumerable: true, get: function () { return binding_1.Binding; } });
+var errors_1 = require("./core/errors");
+var watch_1 = require("./node/watch");
+Object.defineProperty(exports, "Watch", { enumerable: true, get: function () { return watch_1.Watch; } });
+var less = {
+    stack: core_1.stack,
+    unstack: core_1.unstack,
+    current: core_1.current,
+    userError: errors_1.userError,
+};
+exports.less = less;
+
+
+// ./lib-es5/node/app.js
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -3404,29 +3381,67 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetView = void 0;
-var base_view_1 = require("./base-view");
+exports.Portal = exports.App = exports.AppNode = void 0;
+var node_1 = require("./node");
 /**
- * Create a children pack for each set value
- * @class SetView
- * @extends BaseView
+ * Application Node
+ * @class AppNode
+ * @extends INode
  */
-var SetView = /** @class */ (function (_super) {
-    __extends(SetView, _super);
-    function SetView() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var AppNode = /** @class */ (function (_super) {
+    __extends(AppNode, _super);
+    /**
+     * @param input
+     */
+    function AppNode(input) {
+        var _this = _super.call(this, input) || this;
+        _this.debugUi = input.debugUi || false;
+        _this.$seal();
+        return _this;
     }
-    SetView.prototype.compose = function (input) {
-        var _this = this;
-        _super.prototype.compose.call(this, input);
-        var set = input.model;
-        set.forEach(function (item) {
-            _this.createChild(input, item, item);
-        });
+    return AppNode;
+}(node_1.INode));
+exports.AppNode = AppNode;
+/**
+ * Represents a Vasille.js application
+ * @class App
+ * @extends AppNode
+ */
+var App = /** @class */ (function (_super) {
+    __extends(App, _super);
+    /**
+     * Constructs an app node
+     * @param node {Element} The root of application
+     * @param input
+     */
+    function App(node, input) {
+        var _this = _super.call(this, input) || this;
+        _this.$.node = node;
+        _this.preinit(_this, _this);
+        _this.init();
+        _this.$seal();
+        return _this;
+    }
+    App.prototype.appendNode = function (node) {
+        this.$.node.appendChild(node);
     };
-    return SetView;
-}(base_view_1.BaseView));
-exports.SetView = SetView;
+    return App;
+}(AppNode));
+exports.App = App;
+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));
+exports.Portal = Portal;
 
 
 // ./lib-es5/functional/options.js