vasille 2.3.2 → 2.3.4

package/cdn/es2015.js

@@ -1,356 +1,743 @@
 (function(){
-// ./lib/models/model.js
-
-
-
-// ./lib/models/listener.js
+// ./lib/core/destroyable.js
 /**
- * Represent a listener for a model
- * @class Listener
+ * Mark an object which can be destroyed
+ * @class Destroyable
  */
-class Listener {
-    constructor() {
-        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
-            }
-        });
-    }
+class Destroyable {
     /**
-     * Exclude the repeated operation in queue
-     * @private
+     * Make object fields non configurable
+     * @protected
      */
-    excludeRepeat(index) {
-        this.queue.forEach((item, i) => {
-            if (item.index === index) {
-                this.queue.splice(i, 1);
-                return true;
+    $seal() {
+        const $ = this;
+        Object.keys($).forEach(i => {
+            // eslint-disable-next-line no-prototype-builtins
+            if (this.hasOwnProperty(i)) {
+                const config = Object.getOwnPropertyDescriptor($, i);
+                if (config.configurable) {
+                    let descriptor;
+                    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);
+                }
             }
         });
-        return false;
     }
     /**
-     * Emits added event to listeners
-     * @param index {*} index of value
-     * @param value {*} value of added item
+     * Garbage collector method
      */
-    emitAdded(index, value) {
-        if (this.frozen) {
-            if (!this.excludeRepeat(index)) {
-                this.queue.push({ sign: true, index, value });
-            }
-        }
-        else {
-            this.onAdded.forEach(handler => {
-                handler(index, value);
-            });
-        }
+    $destroy() {
+        // nothing here
     }
+}
+
+window.Destroyable = Destroyable;
+
+// ./lib/core/errors.js
+const 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";
+}
+function internalError(msg) {
+    console.error("Vasille-SFP: Internal error", msg, reportIt);
+    return "internal-error";
+}
+function userError(msg, err) {
+    console.error("Vasille-SFP: User error", msg);
+    return err;
+}
+function wrongBinding(msg) {
+    return userError(msg, "wrong-binding");
+}
+
+window.notOverwritten = notOverwritten;
+window.internalError = internalError;
+window.userError = userError;
+window.wrongBinding = wrongBinding;
+
+// ./lib/core/ivalue.js
+class Switchable extends Destroyable {
     /**
-     * Emits removed event to listeners
-     * @param index {*} index of removed value
-     * @param value {*} value of removed item
+     * Enable update handlers triggering
      */
-    emitRemoved(index, value) {
-        if (this.frozen) {
-            if (!this.excludeRepeat(index)) {
-                this.queue.push({ sign: false, index, value });
-            }
-        }
-        else {
-            this.onRemoved.forEach(handler => {
-                handler(index, value);
-            });
-        }
+    $enable() {
+        throw notOverwritten();
     }
     /**
-     * Adds a handler to added event
-     * @param handler {function} function to run on event emitting
+     * disable update handlers triggering
      */
-    onAdd(handler) {
-        this.onAdded.add(handler);
+    $disable() {
+        throw notOverwritten();
     }
+}
+/**
+ * Interface which describes a value
+ * @class IValue
+ * @extends Destroyable
+ */
+class IValue extends Switchable {
     /**
-     * Adds a handler to removed event
-     * @param handler {function} function to run on event emitting
+     * @param isEnabled {boolean} initial is enabled state
      */
-    onRemove(handler) {
-        this.onRemoved.add(handler);
+    constructor(isEnabled) {
+        super();
+        this.isEnabled = isEnabled;
     }
     /**
-     * Removes an handler from added event
-     * @param handler {function} handler to remove
+     * Get the encapsulated value
+     * @return {*} the encapsulated value
      */
-    offAdd(handler) {
-        this.onAdded.delete(handler);
+    get $() {
+        throw notOverwritten();
     }
     /**
-     * Removes an handler form removed event
-     * @param handler {function} handler to remove
+     * Sets the encapsulated value
+     * @param value {*} value to encapsulate
      */
-    offRemove(handler) {
-        this.onRemoved.delete(handler);
+    set $(value) {
+        throw notOverwritten();
     }
     /**
-     * Run all queued operation and enable reactivity
+     * Add a new handler to value change
+     * @param handler {function(value : *)} the handler to add
      */
-    enableReactivity() {
-        this.queue.forEach(item => {
-            if (item.sign) {
-                this.onAdded.forEach(handler => {
-                    handler(item.index, item.value);
-                });
-            }
-            else {
-                this.onRemoved.forEach(handler => {
-                    handler(item.index, item.value);
-                });
-            }
-        });
-        this.queue.splice(0);
-        this.frozen = false;
+    $on(handler) {
+        throw notOverwritten();
     }
     /**
-     * Disable the reactivity and enable the queue
+     * Removes a handler of value change
+     * @param handler {function(value : *)} the handler to remove
      */
-    disableReactivity() {
-        this.frozen = true;
+    $off(handler) {
+        throw notOverwritten();
     }
 }
 
-window.Listener = Listener;
+window.Switchable = Switchable;
+window.IValue = IValue;
 
-// ./lib/models/object-model.js
+// ./lib/core/core.js
+
+const currentStack = [];
+function stack(node) {
+    currentStack.push(current);
+    current = node;
+}
+function unstack() {
+    current = currentStack.pop();
+}
 /**
- * Object based model
- * @extends Object
+ * Private stuff of a reactive object
+ * @class ReactivePrivate
+ * @extends Destroyable
  */
-class ObjectModel extends Object {
-    /**
-     * Constructs a object model
-     * @param obj {Object} input data
-     */
-    constructor(obj = {}) {
+class ReactivePrivate extends Destroyable {
+    constructor() {
         super();
-        this.container = Object.create(null);
-        Object.defineProperty(this, 'listener', {
-            value: new Listener,
-            writable: false,
-            configurable: false
-        });
-        for (const i in obj) {
-            Object.defineProperty(this.container, i, {
-                value: obj[i],
-                configurable: true,
-                writable: true,
-                enumerable: true
-            });
-            this.listener.emitAdded(i, obj[i]);
-        }
-    }
-    /**
-     * Gets a value of a field
-     * @param key {string}
-     * @return {*}
-     */
-    get(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
+        /**
+         * 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();
+    }
+    $destroy() {
+        this.watch.forEach(value => value.$destroy());
+        this.watch.clear();
+        this.bindings.forEach(binding => binding.$destroy());
+        this.bindings.clear();
+        this.models.forEach(model => model.disableReactivity());
+        this.models.clear();
+        this.freezeExpr && this.freezeExpr.$destroy();
+        this.onDestroy && this.onDestroy();
+        super.$destroy();
+    }
+}
+/**
+ * A reactive object
+ * @class Reactive
+ * @extends Destroyable
+ */
+class Reactive extends Destroyable {
+    constructor(input, $) {
+        super();
+        this.input = input;
+        this.$ = $ || new ReactivePrivate;
+        this.$seal();
+    }
+    /**
+     * Get parent node
      */
-    set(key, v) {
-        if (Reflect.has(this.container, key)) {
-            this.listener.emitRemoved(key, this.container[key]);
-            this.container[key] = v;
+    get parent() {
+        return this.$.parent;
+    }
+    /**
+     * Create a reference
+     * @param value {*} value to reference
+     */
+    ref(value) {
+        const $ = this.$;
+        const ref = new Reference(value);
+        $.watch.add(ref);
+        return ref;
+    }
+    /**
+     * Create a mirror
+     * @param value {IValue} value to mirror
+     */
+    mirror(value) {
+        const mirror = new Mirror(value, false);
+        this.$.watch.add(mirror);
+        return mirror;
+    }
+    /**
+     * Create a forward-only mirror
+     * @param value {IValue} value to mirror
+     */
+    forward(value) {
+        const mirror = new Mirror(value, true);
+        this.$.watch.add(mirror);
+        return mirror;
+    }
+    /**
+     * Creates a pointer
+     * @param value {*} default value to point
+     * @param forwardOnly {boolean} forward only sync
+     */
+    point(value, forwardOnly = false) {
+        const $ = this.$;
+        const pointer = new Pointer(value, forwardOnly);
+        $.watch.add(pointer);
+        return pointer;
+    }
+    /**
+     * Register a model
+     * @param model
+     */
+    register(model) {
+        this.$.models.add(model);
+        return model;
+    }
+    /**
+     * Creates a watcher
+     * @param func {function} function to run on any argument change
+     * @param values
+     */
+    watch(func, ...values) {
+        const $ = this.$;
+        $.watch.add(new Expression(func, !this.$.frozen, ...values));
+    }
+    /**
+     * Creates a computed value
+     * @param func {function} function to run on any argument change
+     * @param values
+     * @return {IValue} the created ivalue
+     */
+    expr(func, ...values) {
+        const res = new Expression(func, !this.$.frozen, ...values);
+        const $ = this.$;
+        $.watch.add(res);
+        return res;
+    }
+    /**
+     * Enable reactivity of fields
+     */
+    enable() {
+        const $ = this.$;
+        if (!$.enabled) {
+            $.watch.forEach(watcher => {
+                watcher.$enable();
+            });
+            $.models.forEach(model => {
+                model.enableReactivity();
+            });
+            $.enabled = true;
         }
-        else {
-            Object.defineProperty(this.container, key, {
-                value: v,
-                configurable: true,
-                writable: true,
-                enumerable: true
+    }
+    /**
+     * Disable reactivity of fields
+     */
+    disable() {
+        const $ = this.$;
+        if ($.enabled) {
+            $.watch.forEach(watcher => {
+                watcher.$disable();
+            });
+            $.models.forEach(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
+     */
+    bindAlive(cond, onOff, onOn) {
+        const $ = this.$;
+        if ($.freezeExpr) {
+            throw wrongBinding("this component already have a freeze state");
+        }
+        if ($.watch.has(cond)) {
+            throw wrongBinding("freeze state must be bound to an external component");
+        }
+        $.freezeExpr = new Expression((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;
+    }
+    init() {
+        this.applyOptions(this.input);
+        return this.compose(this.input);
+    }
+    applyOptions(input) {
+        // empty
+    }
+    applyOptionsNow() {
+        this.applyOptions(this.input);
+    }
+    compose(input) {
+        throw notOverwritten();
+    }
+    composeNow() {
+        this.compose(this.input);
+    }
+    runFunctional(f, ...args) {
+        stack(this);
+        // yet another ts bug
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const result = f(...args);
+        unstack();
+        return result;
+    }
+    runOnDestroy(func) {
+        this.$.onDestroy = func;
+    }
+    $destroy() {
+        super.$destroy();
+        this.$.$destroy();
+        this.$ = null;
+    }
+}
+
+window.stack = stack;
+window.unstack = unstack;
+window.ReactivePrivate = ReactivePrivate;
+window.Reactive = Reactive;
+
+// ./lib/value/reference.js
+/**
+ * Declares a notifiable value
+ * @class Reference
+ * @extends IValue
+ */
+class Reference extends IValue {
+    /**
+     * @param value {any} the initial value
+     */
+    constructor(value) {
+        super(true);
+        this.$value = value;
+        this.$onchange = new Set;
+        this.$seal();
+    }
+    get $() {
+        return this.$value;
+    }
+    set $(value) {
+        if (this.$value !== value) {
+            this.$value = value;
+            if (this.isEnabled) {
+                this.$onchange.forEach(handler => {
+                    handler(value);
+                });
+            }
+        }
+    }
+    $enable() {
+        if (!this.isEnabled) {
+            this.$onchange.forEach(handler => {
+                handler(this.$value);
+            });
+            this.isEnabled = true;
+        }
+    }
+    $disable() {
+        this.isEnabled = false;
+    }
+    $on(handler) {
+        this.$onchange.add(handler);
+    }
+    $off(handler) {
+        this.$onchange.delete(handler);
+    }
+    $destroy() {
+        super.$destroy();
+        this.$onchange.clear();
+    }
+}
+
+window.Reference = Reference;
+
+// ./lib/value/expression.js
+/**
+ * Bind some values to one expression
+ * @class Expression
+ * @extends IValue
+ */
+class Expression extends IValue {
+    /**
+     * Creates a function bounded to N values
+     * @param func {Function} the function to bound
+     * @param values
+     * @param link {Boolean} links immediately if true
+     */
+    constructor(func, link, ...values) {
+        super(false);
+        /**
+         * Expression will link different handler for each value of list
+         */
+        this.linkedFunc = [];
+        const handler = (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(item => item.$);
+        this.sync = new Reference(func.apply(this, this.valuesCache));
+        let i = 0;
+        values.forEach(() => {
+            this.linkedFunc.push(handler.bind(this, Number(i++)));
+        });
+        this.values = values;
+        this.func = handler;
+        if (link) {
+            this.$enable();
+        }
+        else {
+            handler();
+        }
+        this.$seal();
+    }
+    get $() {
+        return this.sync.$;
+    }
+    set $(value) {
+        this.sync.$ = value;
+    }
+    $on(handler) {
+        this.sync.$on(handler);
+        return this;
+    }
+    $off(handler) {
+        this.sync.$off(handler);
+        return this;
+    }
+    $enable() {
+        if (!this.isEnabled) {
+            for (let 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;
+        }
+        return this;
+    }
+    $disable() {
+        if (this.isEnabled) {
+            for (let i = 0; i < this.values.length; i++) {
+                this.values[i].$off(this.linkedFunc[i]);
+            }
+            this.isEnabled = false;
         }
-        this.listener.emitAdded(key, this.container[key]);
         return this;
     }
-    get values() {
-        return this.container;
+    $destroy() {
+        this.$disable();
+        this.values.splice(0);
+        this.valuesCache.splice(0);
+        this.linkedFunc.splice(0);
+        super.$destroy();
     }
+}
+
+window.Expression = Expression;
+
+// ./lib/value/mirror.js
+/**
+ * Declares a notifiable bind to a value
+ * @class Mirror
+ * @extends IValue
+ * @version 2
+ */
+class Mirror extends Reference {
     /**
-     * Deletes an object property
-     * @param key {string} property name
+     * Constructs a notifiable bind to a value
+     * @param value {IValue} is initial value
+     * @param forwardOnly {boolean} ensure forward only synchronization
      */
-    delete(key) {
-        if (this.container[key]) {
-            this.listener.emitRemoved(key, this.container[key]);
-            delete this.container[key];
+    constructor(value, forwardOnly = false) {
+        super(value.$);
+        this.$handler = (v) => {
+            this.$ = v;
+        };
+        this.$pointedValue = value;
+        this.$forwardOnly = forwardOnly;
+        value.$on(this.$handler);
+        this.$seal();
+    }
+    get $() {
+        // this is a ts bug
+        // eslint-disable-next-line
+        // @ts-ignore
+        return super.$;
+    }
+    set $(v) {
+        if (!this.$forwardOnly) {
+            this.$pointedValue.$ = v;
         }
+        // this is a ts bug
+        // eslint-disable-next-line
+        // @ts-ignore
+        super.$ = v;
     }
-    enableReactivity() {
-        this.listener.enableReactivity();
+    $enable() {
+        if (!this.isEnabled) {
+            this.isEnabled = true;
+            this.$pointedValue.$on(this.$handler);
+            this.$ = this.$pointedValue.$;
+        }
     }
-    disableReactivity() {
-        this.listener.disableReactivity();
+    $disable() {
+        if (this.isEnabled) {
+            this.$pointedValue.$off(this.$handler);
+            this.isEnabled = false;
+        }
+    }
+    $destroy() {
+        this.$disable();
+        super.$destroy();
     }
 }
 
-window.ObjectModel = ObjectModel;
+window.Mirror = Mirror;
 
-// ./lib/models/set-model.js
+// ./lib/value/pointer.js
 /**
- * A Set based model
- * @class SetModel
- * @extends Set
- * @implements IModel
+ * r/w pointer to a value
+ * @class Pointer
+ * @extends Mirror
  */
-class SetModel extends Set {
+class Pointer extends Mirror {
     /**
-     * Constructs a set model based on a set
-     * @param set {Set} input data
+     * @param value {IValue} value to point
+     * @param forwardOnly {boolean} forward only data flow
      */
-    constructor(set = []) {
-        super();
-        Object.defineProperty(this, 'listener', {
-            value: new Listener,
-            writable: false,
-            configurable: false
-        });
-        set.forEach(item => {
-            super.add(item);
-        });
+    constructor(value, forwardOnly = false) {
+        super(value, forwardOnly);
     }
     /**
-     * Calls Set.add and notify abut changes
-     * @param value {*} value
-     * @return {this} a pointer to this
+     * Point a new ivalue
+     * @param value {IValue} value to point
      */
-    add(value) {
-        if (!super.has(value)) {
-            this.listener.emitAdded(value, value);
-            super.add(value);
+    set $$(value) {
+        if (this.$pointedValue !== value) {
+            this.$disable();
+            this.$pointedValue = value;
+            this.$enable();
         }
-        return this;
+    }
+}
+
+window.Pointer = Pointer;
+
+// ./lib/models/listener.js
+/**
+ * Represent a listener for a model
+ * @class Listener
+ */
+class Listener {
+    constructor() {
+        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
+            }
+        });
     }
     /**
-     * Calls Set.clear and notify abut changes
+     * Exclude the repeated operation in queue
+     * @private
      */
-    clear() {
-        this.forEach(item => {
-            this.listener.emitRemoved(item, item);
+    excludeRepeat(index) {
+        this.queue.forEach((item, i) => {
+            if (item.index === index) {
+                this.queue.splice(i, 1);
+                return true;
+            }
         });
-        super.clear();
+        return false;
     }
     /**
-     * Calls Set.delete and notify abut changes
-     * @param value {*}
-     * @return {boolean} true if a value was deleted, otherwise false
+     * Emits added event to listeners
+     * @param index {*} index of value
+     * @param value {*} value of added item
      */
-    delete(value) {
-        if (super.has(value)) {
-            this.listener.emitRemoved(value, value);
+    emitAdded(index, value) {
+        if (this.frozen) {
+            if (!this.excludeRepeat(index)) {
+                this.queue.push({ sign: true, index, value });
+            }
+        }
+        else {
+            this.onAdded.forEach(handler => {
+                handler(index, value);
+            });
         }
-        return super.delete(value);
-    }
-    enableReactivity() {
-        this.listener.enableReactivity();
-    }
-    disableReactivity() {
-        this.listener.disableReactivity();
     }
-}
-
-window.SetModel = SetModel;
-
-// ./lib/models/map-model.js
-/**
- * A Map based memory
- * @class MapModel
- * @extends Map
- * @implements IModel
- */
-class MapModel extends Map {
     /**
-     * Constructs a map model
-     * @param map {[*, *][]} input data
+     * Emits removed event to listeners
+     * @param index {*} index of removed value
+     * @param value {*} value of removed item
      */
-    constructor(map = []) {
-        super();
-        Object.defineProperty(this, 'listener', {
-            value: new Listener,
-            writable: false,
-            configurable: false
-        });
-        map.forEach(([key, value]) => {
-            super.set(key, value);
-        });
+    emitRemoved(index, value) {
+        if (this.frozen) {
+            if (!this.excludeRepeat(index)) {
+                this.queue.push({ sign: false, index, value });
+            }
+        }
+        else {
+            this.onRemoved.forEach(handler => {
+                handler(index, value);
+            });
+        }
     }
     /**
-     * Calls Map.clear and notify abut changes
+     * Adds a handler to added event
+     * @param handler {function} function to run on event emitting
      */
-    clear() {
-        this.forEach((value, key) => {
-            this.listener.emitRemoved(key, value);
-        });
-        super.clear();
+    onAdd(handler) {
+        this.onAdded.add(handler);
     }
     /**
-     * Calls Map.delete and notify abut changes
-     * @param key {*} key
-     * @return {boolean} true if removed something, otherwise false
+     * Adds a handler to removed event
+     * @param handler {function} function to run on event emitting
      */
-    delete(key) {
-        const tmp = super.get(key);
-        if (tmp) {
-            this.listener.emitRemoved(key, tmp);
-        }
-        return super.delete(key);
+    onRemove(handler) {
+        this.onRemoved.add(handler);
+    }
+    /**
+     * Removes an handler from added event
+     * @param handler {function} handler to remove
+     */
+    offAdd(handler) {
+        this.onAdded.delete(handler);
     }
     /**
-     * Calls Map.set and notify abut changes
-     * @param key {*} key
-     * @param value {*} value
-     * @return {MapModel} a pointer to this
+     * Removes an handler form removed event
+     * @param handler {function} handler to remove
      */
-    set(key, value) {
-        const tmp = super.get(key);
-        if (tmp) {
-            this.listener.emitRemoved(key, tmp);
-        }
-        super.set(key, value);
-        this.listener.emitAdded(key, value);
-        return this;
+    offRemove(handler) {
+        this.onRemoved.delete(handler);
     }
+    /**
+     * Run all queued operation and enable reactivity
+     */
     enableReactivity() {
-        this.listener.enableReactivity();
+        this.queue.forEach(item => {
+            if (item.sign) {
+                this.onAdded.forEach(handler => {
+                    handler(item.index, item.value);
+                });
+            }
+            else {
+                this.onRemoved.forEach(handler => {
+                    handler(item.index, item.value);
+                });
+            }
+        });
+        this.queue.splice(0);
+        this.frozen = false;
     }
+    /**
+     * Disable the reactivity and enable the queue
+     */
     disableReactivity() {
-        this.listener.disableReactivity();
+        this.frozen = true;
     }
 }
 
-window.MapModel = MapModel;
+window.Listener = Listener;
+
+// ./lib/models/model.js
+
+
 
 // ./lib/models/array-model.js
 /**
@@ -554,399 +941,247 @@ class ArrayModel extends Array {
         return this;
     }
     replace(at, with_) {
-        this.listener.emitAdded(this[at], with_);
-        this.listener.emitRemoved(this[at], this[at]);
-        this[at] = with_;
-        return this;
-    }
-    enableReactivity() {
-        this.listener.enableReactivity();
-    }
-    disableReactivity() {
-        this.listener.disableReactivity();
-    }
-}
-
-window.ArrayModel = ArrayModel;
-
-// ./lib/core/errors.js
-const 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";
-}
-function internalError(msg) {
-    console.error("Vasille-SFP: Internal error", msg, reportIt);
-    return "internal-error";
-}
-function userError(msg, err) {
-    console.error("Vasille-SFP: User error", msg);
-    return err;
-}
-function wrongBinding(msg) {
-    return userError(msg, "wrong-binding");
-}
-
-window.notOverwritten = notOverwritten;
-window.internalError = internalError;
-window.userError = userError;
-window.wrongBinding = wrongBinding;
-
-// ./lib/core/destroyable.js
-/**
- * Mark an object which can be destroyed
- * @class Destroyable
- */
-class Destroyable {
-    /**
-     * Make object fields non configurable
-     * @protected
-     */
-    $seal() {
-        const $ = this;
-        Object.keys($).forEach(i => {
-            // eslint-disable-next-line no-prototype-builtins
-            if (this.hasOwnProperty(i)) {
-                const config = Object.getOwnPropertyDescriptor($, i);
-                if (config.configurable) {
-                    let descriptor;
-                    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
-     */
-    $destroy() {
-        // nothing here
-    }
-}
-
-window.Destroyable = Destroyable;
-
-// ./lib/core/ivalue.js
-class Switchable extends Destroyable {
-    /**
-     * Enable update handlers triggering
-     */
-    $enable() {
-        throw notOverwritten();
-    }
-    /**
-     * disable update handlers triggering
-     */
-    $disable() {
-        throw notOverwritten();
-    }
-}
-/**
- * Interface which describes a value
- * @class IValue
- * @extends Destroyable
- */
-class IValue extends Switchable {
-    /**
-     * @param isEnabled {boolean} initial is enabled state
-     */
-    constructor(isEnabled) {
-        super();
-        this.isEnabled = isEnabled;
-    }
-    /**
-     * Get the encapsulated value
-     * @return {*} the encapsulated value
-     */
-    get $() {
-        throw notOverwritten();
-    }
-    /**
-     * Sets the encapsulated value
-     * @param value {*} value to encapsulate
-     */
-    set $(value) {
-        throw notOverwritten();
-    }
-    /**
-     * Add a new handler to value change
-     * @param handler {function(value : *)} the handler to add
-     */
-    $on(handler) {
-        throw notOverwritten();
-    }
-    /**
-     * Removes a handler of value change
-     * @param handler {function(value : *)} the handler to remove
-     */
-    $off(handler) {
-        throw notOverwritten();
-    }
-}
-
-window.Switchable = Switchable;
-window.IValue = IValue;
-
-// ./lib/index.js
-
-
-
-// ./lib/spec/svg.js
-
-
-
-// ./lib/spec/react.js
-
-
-
-// ./lib/spec/html.js
-
-
-
-// ./lib/value/expression.js
-/**
- * Bind some values to one expression
- * @class Expression
- * @extends IValue
- */
-class Expression extends IValue {
-    /**
-     * Creates a function bounded to N values
-     * @param func {Function} the function to bound
-     * @param values
-     * @param link {Boolean} links immediately if true
-     */
-    constructor(func, link, ...values) {
-        super(false);
-        /**
-         * Expression will link different handler for each value of list
-         */
-        this.linkedFunc = [];
-        const handler = (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(item => item.$);
-        this.sync = new Reference(func.apply(this, this.valuesCache));
-        let i = 0;
-        values.forEach(() => {
-            this.linkedFunc.push(handler.bind(this, Number(i++)));
-        });
-        this.values = values;
-        this.func = handler;
-        if (link) {
-            this.$enable();
-        }
-        else {
-            handler();
-        }
-        this.$seal();
+        this.listener.emitAdded(this[at], with_);
+        this.listener.emitRemoved(this[at], this[at]);
+        this[at] = with_;
+        return this;
     }
-    get $() {
-        return this.sync.$;
+    enableReactivity() {
+        this.listener.enableReactivity();
     }
-    set $(value) {
-        this.sync.$ = value;
+    disableReactivity() {
+        this.listener.disableReactivity();
     }
-    $on(handler) {
-        this.sync.$on(handler);
-        return this;
+}
+
+window.ArrayModel = ArrayModel;
+
+// ./lib/models/map-model.js
+/**
+ * A Map based memory
+ * @class MapModel
+ * @extends Map
+ * @implements IModel
+ */
+class MapModel extends Map {
+    /**
+     * Constructs a map model
+     * @param map {[*, *][]} input data
+     */
+    constructor(map = []) {
+        super();
+        Object.defineProperty(this, 'listener', {
+            value: new Listener,
+            writable: false,
+            configurable: false
+        });
+        map.forEach(([key, value]) => {
+            super.set(key, value);
+        });
     }
-    $off(handler) {
-        this.sync.$off(handler);
-        return this;
+    /**
+     * Calls Map.clear and notify abut changes
+     */
+    clear() {
+        this.forEach((value, key) => {
+            this.listener.emitRemoved(key, value);
+        });
+        super.clear();
     }
-    $enable() {
-        if (!this.isEnabled) {
-            for (let 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;
+    /**
+     * Calls Map.delete and notify abut changes
+     * @param key {*} key
+     * @return {boolean} true if removed something, otherwise false
+     */
+    delete(key) {
+        const tmp = super.get(key);
+        if (tmp) {
+            this.listener.emitRemoved(key, tmp);
         }
-        return this;
+        return super.delete(key);
     }
-    $disable() {
-        if (this.isEnabled) {
-            for (let i = 0; i < this.values.length; i++) {
-                this.values[i].$off(this.linkedFunc[i]);
-            }
-            this.isEnabled = false;
+    /**
+     * Calls Map.set and notify abut changes
+     * @param key {*} key
+     * @param value {*} value
+     * @return {MapModel} a pointer to this
+     */
+    set(key, value) {
+        const tmp = super.get(key);
+        if (tmp) {
+            this.listener.emitRemoved(key, tmp);
         }
+        super.set(key, value);
+        this.listener.emitAdded(key, value);
         return this;
     }
-    $destroy() {
-        this.$disable();
-        this.values.splice(0);
-        this.valuesCache.splice(0);
-        this.linkedFunc.splice(0);
-        super.$destroy();
+    enableReactivity() {
+        this.listener.enableReactivity();
+    }
+    disableReactivity() {
+        this.listener.disableReactivity();
     }
 }
 
-window.Expression = Expression;
+window.MapModel = MapModel;
 
-// ./lib/value/reference.js
+// ./lib/models/object-model.js
 /**
- * Declares a notifiable value
- * @class Reference
- * @extends IValue
+ * Object based model
+ * @extends Object
  */
-class Reference extends IValue {
+class ObjectModel extends Object {
     /**
-     * @param value {any} the initial value
+     * Constructs a object model
+     * @param obj {Object} input data
      */
-    constructor(value) {
-        super(true);
-        this.$value = value;
-        this.$onchange = new Set;
-        this.$seal();
+    constructor(obj = {}) {
+        super();
+        this.container = Object.create(null);
+        Object.defineProperty(this, 'listener', {
+            value: new Listener,
+            writable: false,
+            configurable: false
+        });
+        for (const i in obj) {
+            Object.defineProperty(this.container, i, {
+                value: obj[i],
+                configurable: true,
+                writable: true,
+                enumerable: true
+            });
+            this.listener.emitAdded(i, obj[i]);
+        }
     }
-    get $() {
-        return this.$value;
+    /**
+     * Gets a value of a field
+     * @param key {string}
+     * @return {*}
+     */
+    get(key) {
+        return this.container[key];
     }
-    set $(value) {
-        if (this.$value !== value) {
-            this.$value = value;
-            if (this.isEnabled) {
-                this.$onchange.forEach(handler => {
-                    handler(value);
-                });
-            }
+    /**
+     * Sets an object property value
+     * @param key {string} property name
+     * @param v {*} property value
+     * @return {ObjectModel} a pointer to this
+     */
+    set(key, v) {
+        if (Reflect.has(this.container, key)) {
+            this.listener.emitRemoved(key, this.container[key]);
+            this.container[key] = v;
         }
-    }
-    $enable() {
-        if (!this.isEnabled) {
-            this.$onchange.forEach(handler => {
-                handler(this.$value);
+        else {
+            Object.defineProperty(this.container, key, {
+                value: v,
+                configurable: true,
+                writable: true,
+                enumerable: true
             });
-            this.isEnabled = true;
         }
+        this.listener.emitAdded(key, this.container[key]);
+        return this;
     }
-    $disable() {
-        this.isEnabled = false;
+    get values() {
+        return this.container;
     }
-    $on(handler) {
-        this.$onchange.add(handler);
+    /**
+     * Deletes an object property
+     * @param key {string} property name
+     */
+    delete(key) {
+        if (this.container[key]) {
+            this.listener.emitRemoved(key, this.container[key]);
+            delete this.container[key];
+        }
     }
-    $off(handler) {
-        this.$onchange.delete(handler);
+    enableReactivity() {
+        this.listener.enableReactivity();
     }
-    $destroy() {
-        super.$destroy();
-        this.$onchange.clear();
+    disableReactivity() {
+        this.listener.disableReactivity();
     }
 }
 
-window.Reference = Reference;
+window.ObjectModel = ObjectModel;
 
-// ./lib/value/mirror.js
+// ./lib/models/set-model.js
 /**
- * Declares a notifiable bind to a value
- * @class Mirror
- * @extends IValue
- * @version 2
+ * A Set based model
+ * @class SetModel
+ * @extends Set
+ * @implements IModel
  */
-class Mirror extends Reference {
+class SetModel extends Set {
     /**
-     * Constructs a notifiable bind to a value
-     * @param value {IValue} is initial value
-     * @param forwardOnly {boolean} ensure forward only synchronization
+     * Constructs a set model based on a set
+     * @param set {Set} input data
      */
-    constructor(value, forwardOnly = false) {
-        super(value.$);
-        this.$handler = (v) => {
-            this.$ = v;
-        };
-        this.$pointedValue = value;
-        this.$forwardOnly = forwardOnly;
-        value.$on(this.$handler);
-        this.$seal();
-    }
-    get $() {
-        // this is a ts bug
-        // eslint-disable-next-line
-        // @ts-ignore
-        return super.$;
-    }
-    set $(v) {
-        if (!this.$forwardOnly) {
-            this.$pointedValue.$ = v;
-        }
-        // this is a ts bug
-        // eslint-disable-next-line
-        // @ts-ignore
-        super.$ = v;
-    }
-    $enable() {
-        if (!this.isEnabled) {
-            this.isEnabled = true;
-            this.$pointedValue.$on(this.$handler);
-            this.$ = this.$pointedValue.$;
-        }
+    constructor(set = []) {
+        super();
+        Object.defineProperty(this, 'listener', {
+            value: new Listener,
+            writable: false,
+            configurable: false
+        });
+        set.forEach(item => {
+            super.add(item);
+        });
     }
-    $disable() {
-        if (this.isEnabled) {
-            this.$pointedValue.$off(this.$handler);
-            this.isEnabled = false;
+    /**
+     * Calls Set.add and notify abut changes
+     * @param value {*} value
+     * @return {this} a pointer to this
+     */
+    add(value) {
+        if (!super.has(value)) {
+            this.listener.emitAdded(value, value);
+            super.add(value);
         }
+        return this;
     }
-    $destroy() {
-        this.$disable();
-        super.$destroy();
-    }
-}
-
-window.Mirror = Mirror;
-
-// ./lib/value/pointer.js
-/**
- * r/w pointer to a value
- * @class Pointer
- * @extends Mirror
- */
-class Pointer extends Mirror {
     /**
-     * @param value {IValue} value to point
-     * @param forwardOnly {boolean} forward only data flow
+     * Calls Set.clear and notify abut changes
      */
-    constructor(value, forwardOnly = false) {
-        super(value, forwardOnly);
+    clear() {
+        this.forEach(item => {
+            this.listener.emitRemoved(item, item);
+        });
+        super.clear();
     }
     /**
-     * Point a new ivalue
-     * @param value {IValue} value to point
+     * Calls Set.delete and notify abut changes
+     * @param value {*}
+     * @return {boolean} true if a value was deleted, otherwise false
      */
-    set $$(value) {
-        if (this.$pointedValue !== value) {
-            this.$disable();
-            this.$pointedValue = value;
-            this.$enable();
+    delete(value) {
+        if (super.has(value)) {
+            this.listener.emitRemoved(value, value);
         }
+        return super.delete(value);
+    }
+    enableReactivity() {
+        this.listener.enableReactivity();
+    }
+    disableReactivity() {
+        this.listener.disableReactivity();
     }
 }
 
-window.Pointer = Pointer;
+window.SetModel = SetModel;
+
+// ./lib/spec/html.js
+
+
+
+// ./lib/spec/svg.js
+
+
+
+// ./lib/spec/react.js
+
+
 
 // ./lib/binding/binding.js
 /**
@@ -973,249 +1208,119 @@ class Binding extends Destroyable {
      * Just clear bindings
      */
     $destroy() {
-        this.binding.$off(this.func);
-        super.$destroy();
-    }
-}
-
-window.Binding = Binding;
-
-// ./lib/core/core.js
-
-const currentStack = [];
-function stack(node) {
-    currentStack.push(current);
-    current = node;
-}
-function unstack() {
-    current = currentStack.pop();
-}
-/**
- * Private stuff of a reactive object
- * @class ReactivePrivate
- * @extends Destroyable
- */
-class ReactivePrivate extends Destroyable {
-    constructor() {
-        super();
-        /**
-         * 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();
-    }
-    $destroy() {
-        this.watch.forEach(value => value.$destroy());
-        this.watch.clear();
-        this.bindings.forEach(binding => binding.$destroy());
-        this.bindings.clear();
-        this.models.forEach(model => model.disableReactivity());
-        this.models.clear();
-        this.freezeExpr && this.freezeExpr.$destroy();
-        this.onDestroy && this.onDestroy();
-        super.$destroy();
-    }
-}
-/**
- * A reactive object
- * @class Reactive
- * @extends Destroyable
- */
-class Reactive extends Destroyable {
-    constructor(input, $) {
-        super();
-        this.input = input;
-        this.$ = $ || new ReactivePrivate;
-        this.$seal();
-    }
-    /**
-     * Get parent node
-     */
-    get parent() {
-        return this.$.parent;
-    }
-    /**
-     * Create a reference
-     * @param value {*} value to reference
-     */
-    ref(value) {
-        const $ = this.$;
-        const ref = new Reference(value);
-        $.watch.add(ref);
-        return ref;
-    }
-    /**
-     * Create a mirror
-     * @param value {IValue} value to mirror
-     */
-    mirror(value) {
-        const mirror = new Mirror(value, false);
-        this.$.watch.add(mirror);
-        return mirror;
-    }
-    /**
-     * Create a forward-only mirror
-     * @param value {IValue} value to mirror
-     */
-    forward(value) {
-        const mirror = new Mirror(value, true);
-        this.$.watch.add(mirror);
-        return mirror;
-    }
-    /**
-     * Creates a pointer
-     * @param value {*} default value to point
-     * @param forwardOnly {boolean} forward only sync
-     */
-    point(value, forwardOnly = false) {
-        const $ = this.$;
-        const pointer = new Pointer(value, forwardOnly);
-        $.watch.add(pointer);
-        return pointer;
-    }
-    /**
-     * Register a model
-     * @param model
-     */
-    register(model) {
-        this.$.models.add(model);
-        return model;
-    }
-    /**
-     * Creates a watcher
-     * @param func {function} function to run on any argument change
-     * @param values
-     */
-    watch(func, ...values) {
-        const $ = this.$;
-        $.watch.add(new Expression(func, !this.$.frozen, ...values));
-    }
-    /**
-     * Creates a computed value
-     * @param func {function} function to run on any argument change
-     * @param values
-     * @return {IValue} the created ivalue
-     */
-    expr(func, ...values) {
-        const res = new Expression(func, !this.$.frozen, ...values);
-        const $ = this.$;
-        $.watch.add(res);
-        return res;
-    }
-    /**
-     * Enable reactivity of fields
-     */
-    enable() {
-        const $ = this.$;
-        if (!$.enabled) {
-            $.watch.forEach(watcher => {
-                watcher.$enable();
-            });
-            $.models.forEach(model => {
-                model.enableReactivity();
-            });
-            $.enabled = true;
-        }
-    }
-    /**
-     * Disable reactivity of fields
-     */
-    disable() {
-        const $ = this.$;
-        if ($.enabled) {
-            $.watch.forEach(watcher => {
-                watcher.$disable();
-            });
-            $.models.forEach(model => {
-                model.disableReactivity();
-            });
-            $.enabled = false;
-        }
+        this.binding.$off(this.func);
+        super.$destroy();
     }
+}
+
+window.Binding = Binding;
+
+// ./lib/binding/attribute.js
+/**
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
+ */
+class AttributeBinding extends Binding {
     /**
-     * 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 an attribute binding description
+     * @param node {INode} the vasille node
+     * @param name {String} the name of attribute
+     * @param value {IValue} value to bind
      */
-    bindAlive(cond, onOff, onOn) {
-        const $ = this.$;
-        if ($.freezeExpr) {
-            throw wrongBinding("this component already have a freeze state");
-        }
-        if ($.watch.has(cond)) {
-            throw wrongBinding("freeze state must be bound to an external component");
-        }
-        $.freezeExpr = new Expression((cond) => {
-            $.frozen = !cond;
-            if (cond) {
-                onOn === null || onOn === void 0 ? void 0 : onOn();
-                this.enable();
+    constructor(node, name, value) {
+        super(value);
+        this.init((value) => {
+            if (value) {
+                if (typeof value === 'boolean') {
+                    node.node.setAttribute(name, "");
+                }
+                else {
+                    node.node.setAttribute(name, `${value}`);
+                }
             }
             else {
-                onOff === null || onOff === void 0 ? void 0 : onOff();
-                this.disable();
+                node.node.removeAttribute(name);
             }
-        }, true, cond);
-        return this;
-    }
-    init() {
-        this.applyOptions(this.input);
-        return this.compose(this.input);
-    }
-    applyOptions(input) {
-        // empty
-    }
-    applyOptionsNow() {
-        this.applyOptions(this.input);
-    }
-    compose(input) {
-        throw notOverwritten();
-    }
-    composeNow() {
-        this.compose(this.input);
+        });
+        this.$seal();
     }
-    runFunctional(f, ...args) {
-        stack(this);
-        // yet another ts bug
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const result = f(...args);
-        unstack();
-        return result;
+}
+
+window.AttributeBinding = AttributeBinding;
+
+// ./lib/binding/class.js
+function addClass(node, cl) {
+    node.node.classList.add(cl);
+}
+function removeClass(node, cl) {
+    node.node.classList.remove(cl);
+}
+class StaticClassBinding extends Binding {
+    constructor(node, name, value) {
+        super(value);
+        this.current = false;
+        this.init((value) => {
+            if (value !== this.current) {
+                if (value) {
+                    addClass(node, name);
+                }
+                else {
+                    removeClass(node, name);
+                }
+                this.current = value;
+            }
+        });
+        this.$seal();
     }
-    runOnDestroy(func) {
-        this.$.onDestroy = func;
+}
+class DynamicalClassBinding extends Binding {
+    constructor(node, value) {
+        super(value);
+        this.current = "";
+        this.init((value) => {
+            if (this.current != value) {
+                if (this.current.length) {
+                    removeClass(node, this.current);
+                }
+                if (value.length) {
+                    addClass(node, value);
+                }
+                this.current = value;
+            }
+        });
+        this.$seal();
     }
-    $destroy() {
-        super.$destroy();
-        this.$.$destroy();
-        this.$ = null;
+}
+
+window.StaticClassBinding = StaticClassBinding;
+window.DynamicalClassBinding = DynamicalClassBinding;
+
+// ./lib/binding/style.js
+/**
+ * Describes a style attribute binding
+ * @class StyleBinding
+ * @extends Binding
+ */
+class StyleBinding extends Binding {
+    /**
+     * 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
+     */
+    constructor(node, name, value) {
+        super(value);
+        this.init((value) => {
+            if (node.node instanceof HTMLElement) {
+                node.node.style.setProperty(name, value);
+            }
+        });
+        this.$seal();
     }
 }
 
-window.ReactivePrivate = ReactivePrivate;
-window.Reactive = Reactive;
+window.StyleBinding = StyleBinding;
 
 // ./lib/node/node.js
 /**
@@ -1373,7 +1478,9 @@ class Fragment extends Reactive {
      * @param input
      * @param cb {function(Tag, *)} callback
      */
-    tag(tagName, input, cb) {
+    tag(tagName, input, cb
+    // @ts-ignore
+    ) {
         const $ = this.$;
         const node = new Tag(input);
         input.slot = cb || input.slot;
@@ -1381,6 +1488,7 @@ class Fragment extends Reactive {
         node.init();
         this.pushNode(node);
         node.ready();
+        // @ts-ignore
         return node.node;
     }
     /**
@@ -2039,220 +2147,82 @@ class DebugPrivate extends FragmentPrivate {
         this.bindings.add(new Expression((v) => {
             this.node.replaceData(0, -1, v);
         }, true, text));
-        this.parent.appendNode(this.node);
-    }
-    /**
-     * Clear node data
-     */
-    $destroy() {
-        this.node.remove();
-        super.$destroy();
-    }
-}
-/**
- * Represents a debug node
- * @class DebugNode
- * @extends Fragment
- */
-class DebugNode extends Fragment {
-    constructor() {
-        super({});
-        /**
-         * private data
-         * @type {DebugNode}
-         */
-        this.$ = new DebugPrivate();
-        this.$seal();
-    }
-    preinit(app, parent, text) {
-        const $ = this.$;
-        if (!text) {
-            throw internalError('wrong DebugNode::$preninit call');
-        }
-        $.preinitComment(app, parent, text);
-    }
-    /**
-     * Runs garbage collector
-     */
-    $destroy() {
-        this.$.$destroy();
-        super.$destroy();
-    }
-}
-
-window.FragmentPrivate = FragmentPrivate;
-window.Fragment = Fragment;
-window.TextNodePrivate = TextNodePrivate;
-window.TextNode = TextNode;
-window.INodePrivate = INodePrivate;
-window.INode = INode;
-window.Tag = Tag;
-window.Extension = Extension;
-window.Component = Component;
-window.SwitchedNodePrivate = SwitchedNodePrivate;
-window.SwitchedNode = SwitchedNode;
-window.DebugPrivate = DebugPrivate;
-window.DebugNode = DebugNode;
-
-// ./lib/node/app.js
-/**
- * Application Node
- * @class AppNode
- * @extends INode
- */
-class AppNode extends INode {
-    /**
-     * @param input
-     */
-    constructor(input) {
-        super(input);
-        this.debugUi = input.debugUi || false;
-        this.$seal();
-    }
-}
-/**
- * Represents a Vasille.js application
- * @class App
- * @extends AppNode
- */
-class App extends AppNode {
-    /**
-     * Constructs an app node
-     * @param node {Element} The root of application
-     * @param input
-     */
-    constructor(node, input) {
-        super(input);
-        this.$.node = node;
-        this.preinit(this, this);
-        this.init();
-        this.$seal();
-    }
-    appendNode(node) {
-        this.$.node.appendChild(node);
-    }
-}
-class Portal extends AppNode {
-    constructor(input) {
-        super(input);
-        this.$.node = input.node;
-        this.$seal();
-    }
-    appendNode(node) {
-        this.$.node.appendChild(node);
+        this.parent.appendNode(this.node);
     }
-}
-
-window.AppNode = AppNode;
-window.App = App;
-window.Portal = Portal;
-
-// ./lib/binding/attribute.js
-/**
- * Represents an Attribute binding description
- * @class AttributeBinding
- * @extends Binding
- */
-class AttributeBinding extends Binding {
     /**
-     * Constructs an attribute binding description
-     * @param node {INode} the vasille node
-     * @param name {String} the name of attribute
-     * @param value {IValue} value to bind
+     * Clear node data
      */
-    constructor(node, name, value) {
-        super(value);
-        this.init((value) => {
-            if (value) {
-                if (typeof value === 'boolean') {
-                    node.node.setAttribute(name, "");
-                }
-                else {
-                    node.node.setAttribute(name, `${value}`);
-                }
-            }
-            else {
-                node.node.removeAttribute(name);
-            }
-        });
-        this.$seal();
+    $destroy() {
+        this.node.remove();
+        super.$destroy();
     }
 }
-
-window.AttributeBinding = AttributeBinding;
-
-// ./lib/binding/style.js
 /**
- * Describes a style attribute binding
- * @class StyleBinding
- * @extends Binding
+ * Represents a debug node
+ * @class DebugNode
+ * @extends Fragment
  */
-class StyleBinding extends Binding {
+class DebugNode extends Fragment {
+    constructor() {
+        super({});
+        /**
+         * private data
+         * @type {DebugNode}
+         */
+        this.$ = new DebugPrivate();
+        this.$seal();
+    }
+    preinit(app, parent, text) {
+        const $ = this.$;
+        if (!text) {
+            throw internalError('wrong DebugNode::$preninit call');
+        }
+        $.preinitComment(app, parent, text);
+    }
     /**
-     * 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
+     * Runs garbage collector
      */
-    constructor(node, name, value) {
-        super(value);
-        this.init((value) => {
-            if (node.node instanceof HTMLElement) {
-                node.node.style.setProperty(name, value);
-            }
-        });
-        this.$seal();
+    $destroy() {
+        this.$.$destroy();
+        super.$destroy();
     }
 }
 
-window.StyleBinding = StyleBinding;
+window.FragmentPrivate = FragmentPrivate;
+window.Fragment = Fragment;
+window.TextNodePrivate = TextNodePrivate;
+window.TextNode = TextNode;
+window.INodePrivate = INodePrivate;
+window.INode = INode;
+window.Tag = Tag;
+window.Extension = Extension;
+window.Component = Component;
+window.SwitchedNodePrivate = SwitchedNodePrivate;
+window.SwitchedNode = SwitchedNode;
+window.DebugPrivate = DebugPrivate;
+window.DebugNode = DebugNode;
 
-// ./lib/binding/class.js
-function addClass(node, cl) {
-    node.node.classList.add(cl);
-}
-function removeClass(node, cl) {
-    node.node.classList.remove(cl);
-}
-class StaticClassBinding extends Binding {
-    constructor(node, name, value) {
-        super(value);
-        this.current = false;
-        this.init((value) => {
-            if (value !== this.current) {
-                if (value) {
-                    addClass(node, name);
-                }
-                else {
-                    removeClass(node, name);
-                }
-                this.current = value;
-            }
-        });
-        this.$seal();
-    }
-}
-class DynamicalClassBinding extends Binding {
-    constructor(node, value) {
-        super(value);
-        this.current = "";
-        this.init((value) => {
-            if (this.current != value) {
-                if (this.current.length) {
-                    removeClass(node, this.current);
-                }
-                if (value.length) {
-                    addClass(node, value);
-                }
-                this.current = value;
-            }
-        });
-        this.$seal();
+// ./lib/node/watch.js
+/**
+ * Watch Node
+ * @class Watch
+ * @extends Fragment
+ */
+class Watch extends Fragment {
+    compose(input) {
+        this.watch((value) => {
+            this.children.forEach(child => {
+                child.$destroy();
+            });
+            this.children.clear();
+            this.lastChild = null;
+            input.slot && input.slot(this, value);
+        }, input.model);
+        input.slot(this, input.model.$);
     }
 }
 
-window.StaticClassBinding = StaticClassBinding;
-window.DynamicalClassBinding = DynamicalClassBinding;
+window.Watch = Watch;
 
 // ./lib/views/repeat-node.js
 /**
@@ -2386,27 +2356,22 @@ class ArrayView extends BaseView {
 
 window.ArrayView = ArrayView;
 
-// ./lib/node/watch.js
+// ./lib/views/map-view.js
 /**
- * Watch Node
- * @class Watch
- * @extends Fragment
+ * Create a children pack for each map value
+ * @class MapView
+ * @extends BaseView
  */
-class Watch extends Fragment {
+class MapView extends BaseView {
     compose(input) {
-        this.watch((value) => {
-            this.children.forEach(child => {
-                child.$destroy();
-            });
-            this.children.clear();
-            this.lastChild = null;
-            input.slot && input.slot(this, value);
-        }, input.model);
-        input.slot(this, input.model.$);
+        super.compose(input);
+        input.model.forEach((value, key) => {
+            this.createChild(input, key, value);
+        });
     }
 }
 
-window.Watch = Watch;
+window.MapView = MapView;
 
 // ./lib/views/object-view.js
 /**
@@ -2427,23 +2392,6 @@ class ObjectView extends BaseView {
 
 window.ObjectView = ObjectView;
 
-// ./lib/views/map-view.js
-/**
- * Create a children pack for each map value
- * @class MapView
- * @extends BaseView
- */
-class MapView extends BaseView {
-    compose(input) {
-        super.compose(input);
-        input.model.forEach((value, key) => {
-            this.createChild(input, key, value);
-        });
-    }
-}
-
-window.MapView = MapView;
-
 // ./lib/views/set-view.js
 /**
  * Create a children pack for each set value
@@ -2462,6 +2410,63 @@ class SetView extends BaseView {
 
 window.SetView = SetView;
 
+// ./lib/index.js
+
+
+
+// ./lib/node/app.js
+/**
+ * Application Node
+ * @class AppNode
+ * @extends INode
+ */
+class AppNode extends INode {
+    /**
+     * @param input
+     */
+    constructor(input) {
+        super(input);
+        this.debugUi = input.debugUi || false;
+        this.$seal();
+    }
+}
+/**
+ * Represents a Vasille.js application
+ * @class App
+ * @extends AppNode
+ */
+class App extends AppNode {
+    /**
+     * Constructs an app node
+     * @param node {Element} The root of application
+     * @param input
+     */
+    constructor(node, input) {
+        super(input);
+        this.$.node = node;
+        this.preinit(this, this);
+        this.init();
+        this.$seal();
+    }
+    appendNode(node) {
+        this.$.node.appendChild(node);
+    }
+}
+class Portal extends AppNode {
+    constructor(input) {
+        super(input);
+        this.$.node = input.node;
+        this.$seal();
+    }
+    appendNode(node) {
+        this.$.node.appendChild(node);
+    }
+}
+
+window.AppNode = AppNode;
+window.App = App;
+window.Portal = Portal;
+
 // ./lib/functional/options.js