vasille 2.0.2 → 2.0.3

package/README.md

@@ -4,8 +4,17 @@
 
 `Vasille` core library is frontend solution for `safe`, `fast` & `powerful` applications.
 
+[![build](https://gitlab.com/vasille-js/vasille-js/badges/v2/pipeline.svg)](https://gitlab.com/vasille-js/vasille-js)
+[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
+
 ## Table of content
-[[_TOC_]]
+
+* [Installation](#installation)
+* [How SAFE is Vasille](#how-safe-is-vasille)
+* [How FAST is Vasille](#how-fast-is-vasille)
+* [How POWERFUL is Vasille](#how-powerful-is-vasille)
+* [How to use Vasille](#how-to-use-vasille)
+* [Best Practices](#best-practices)
 
 
 <hr>
@@ -19,8 +28,10 @@ npm install vasille --save
 ### CDN
 
 ```html
-<script src="https://unpkg.com/vasille"></script>            - ES215 version
-<script src="https://unpkg.com/vasille/cdn/es5.js"></script> - ES5 Compatible version
+ES2015 version
+<script src="https://unpkg.com/vasille"></script>
+ES5 Compatible version
+<script src="https://unpkg.com/vasille/cdn/es5.js"></script>
 ```
 
 ### Getting ready be example
@@ -162,12 +173,26 @@ which will be reflected into a browser DOM and keep up to date it.
 * `InterceptorNode` is used to send an event/signal from one child to other 
 without manually creating of interceptors.
 
-## API documentation
-
-There are several API, and most of it are WIP (Work In Progress):
-* [OOP API - Ready](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/OOP-API.md)
-* [Procedural API - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/Procedural-API.md)
-* [Final API - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/API.md)
+## How to use Vasille
+
+There are several modes, and most of it are WIP (Work In Progress):
+* [Object-Oriented Programming - Ready](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/OOP-API.md)
+* [Procedural Programming - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/Procedural-API.md)
+* [Template Programming - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/API.md)
+
+## Best Practices
+
+* [Reactive Object Practice](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/reactive-object.ts)
+* [Application](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/application.ts)
+* [Application in Application](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/application-in-application.ts)
+* [Signaling](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/signaling.ts)
+* [Forward Only Data Exchange](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/forward-only.ts)
+* [Absolute, Relative & Auto Values](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/auto-value.ts)
+* [Signaling Intercepting](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/singaling-intercepting.ts)
+* [Debugging](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/debugging.ts)
+* [Fragment vs Component](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/fragment-component.ts)
+* [Extensions](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/extension.ts)
+* [Model-View-Controller](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/model-view-controller.ts)
 
 ## Questions
 

package/cdn/es2015.js

@@ -1305,10 +1305,18 @@ class Reactive extends Destroyable {
     /**
      * Create a mirror
      * @param value {IValue} value to mirror
-     * @param forwardOnly {boolean} forward only sync
      */
-    $mirror(value, forwardOnly = false) {
-        const mirror = new Mirror(value, forwardOnly);
+    $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;
     }
@@ -1589,9 +1597,11 @@ class Fragment extends Reactive {
         return this;
     }
     $debug(text) {
-        const node = new DebugNode();
-        node.$preinit(this.$.app, this, text);
-        this.$$pushNode(node);
+        if (this.$.app.$debugUi) {
+            const node = new DebugNode();
+            node.$preinit(this.$.app, this, text);
+            this.$$pushNode(node);
+        }
         return this;
     }
     $tag(tagName, cb) {
@@ -2635,6 +2645,7 @@ class AppNode extends INode {
     constructor(options) {
         super();
         this.$run = (options === null || options === void 0 ? void 0 : options.executor) || ((options === null || options === void 0 ? void 0 : options.freezeUi) === false ? timeoutExecutor : instantExecutor);
+        this.$debugUi = (options === null || options === void 0 ? void 0 : options.debugUi) || false;
     }
 }
 /**
@@ -3102,10 +3113,9 @@ window.BaseView = BaseView;
  * @extends BaseView
  */
 class ArrayView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new ArrayModel;
-        this.$seal();
+        this.model = model;
     }
     createChild(id, item, before) {
         super.createChild(item, item, before || this.$.nodes.get(id));
@@ -3156,9 +3166,9 @@ window.Watch = Watch;
  * @extends BaseView
  */
 class ObjectView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new ObjectModel;
+        this.model = model;
     }
     $ready() {
         const obj = this.model;
@@ -3178,9 +3188,9 @@ window.ObjectView = ObjectView;
  * @extends BaseView
  */
 class MapView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new MapModel;
+        this.model = model;
     }
     $ready() {
         const map = this.model;
@@ -3200,9 +3210,9 @@ window.MapView = MapView;
  * @extends BaseView
  */
 class SetView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new SetModel();
+        this.model = model;
     }
     $ready() {
         const $ = this.$;

package/cdn/es5.js

@@ -12,166 +12,159 @@ var __spreadArray = function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 
-// if (!window.Set) {
-    var Set = /** @class */ (function (_super) {
-        __extends(Set, _super);
-        function Set(set) {
-            if (set === void 0) { set = []; }
-            var _this = this; _super.call(this);
-            set.forEach(function (item) {
-                _this.add (item)
-            });
-            Object.defineProperty(_this, 'hash', {
-                value: Object.create(null),
-                writable: true
-            });
-            return _this;
+var Set = window.Set || /** @class */ (function (_super) {
+    __extends(Set, _super);
+    function Set(set) {
+        if (set === void 0) { set = []; }
+        var _this = this; _super.call(this);
+        set.forEach(function (item) {
+            _this.add (item)
+        });
+        Object.defineProperty(_this, 'hash', {
+            value: Object.create(null),
+            writable: true
+        });
+        return _this;
+    }
+
+    Set.prototype.has = function (value) {
+        if (typeof value === "string" || typeof value === "number") {
+            return this.hash[value] !== void 0;
         }
+        else {
+            return this.indexOf(value) !== -1;
+        }
+    };
 
-        Set.prototype.has = function (value) {
-            if (typeof value === "string" || typeof value === "number") {
-                return this.hash[value] !== void 0;
+    Set.prototype.add = function (value) {
+        if (typeof value === "string" || typeof value === "number") {
+            if (this.hash[value]) {
+                return this;
             }
             else {
-                return this.indexOf(value) !== -1;
+                this.hash[value] = true;
             }
-        };
-
-        Set.prototype.add = function (value) {
-            if (typeof value === "string" || typeof value === "number") {
-                if (this.hash[value]) {
-                    return this;
-                }
-                else {
-                    this.hash[value] = true;
-                }
-            }
-            else {
-                if (this.indexOf(value) !== -1) {
-                    return this;
-                }
-                this.push(value);
+        }
+        else {
+            if (this.indexOf(value) !== -1) {
+                return this;
             }
-            return this;
-        };
+            this.push(value);
+        }
+        return this;
+    };
 
-        Set.prototype.clear = function () {
-            this.hash = Object.create(null);
-            this.splice(0);
-        };
+    Set.prototype.clear = function () {
+        this.hash = Object.create(null);
+        this.splice(0);
+    };
 
-        Set.prototype.delete = function (value) {
-            if (typeof value === "string" || typeof value === "number") {
-                if (this.hash[value] !== void 0) {
-                    delete this.hash[value];
-                }
+    Set.prototype.delete = function (value) {
+        if (typeof value === "string" || typeof value === "number") {
+            if (this.hash[value] !== void 0) {
+                delete this.hash[value];
             }
-            else {
-                var index = this.indexOf(value);
-                if (index !== -1) {
-                    this.splice(index, 1);
-                }
+        }
+        else {
+            var index = this.indexOf(value);
+            if (index !== -1) {
+                this.splice(index, 1);
             }
-            this.push(value);
-            return this;
-        };
-        return Set;
-    }(Array));
-
-    window.Set = Set;
-// }
-
-// if (!window.Map) {
-    var Map = /** @class */ (function (_super) {
-        __extends(Map, _super);
-
-        function Map(map) {
-            if (map === void 0) { map = []; }
-            var _this = this; _super.call(this);
-            Object.defineProperty(_this, 'hash', {
-                value: Object.create(null),
-                writable: true
-            });
-            map.forEach(function (_a) {
-                var key = _a[0], value = _a[1];
-                this.set(key, value);
-            });
-            return _this;
         }
+        this.push(value);
+        return this;
+    };
+    return Set;
+}(Array));
 
-        Map.prototype.clear = function () {
-            this.hash = Object.create(null);
-            this.splice(0);
-        };
+var Map = window.Map || /** @class */ (function (_super) {
+    __extends(Map, _super);
 
-        Map.prototype.delete = function (key) {
-            if (typeof key === "string" || typeof key === "number") {
-                if (this.hash[key] !== void 0) {
-                    delete this.hash[key];
-                }
-            }
-            else {
-                for (var i = 0; i < this.length; i++) {
-                    if (this[i][0] === key) {
-                        this.splice(i, 1);
-                    }
-                }
-            }
-        };
+    function Map(map) {
+        if (map === void 0) { map = []; }
+        var _this = this; _super.call(this);
+        Object.defineProperty(_this, 'hash', {
+            value: Object.create(null),
+            writable: true
+        });
+        map.forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            this.set(key, value);
+        });
+        return _this;
+    }
 
-        function indexOfKey(key) {
+    Map.prototype.clear = function () {
+        this.hash = Object.create(null);
+        this.splice(0);
+    };
+
+    Map.prototype.delete = function (key) {
+        if (typeof key === "string" || typeof key === "number") {
+            if (this.hash[key] !== void 0) {
+                delete this.hash[key];
+            }
+        }
+        else {
             for (var i = 0; i < this.length; i++) {
                 if (this[i][0] === key) {
-                    return i;
+                    this.splice(i, 1);
                 }
             }
-            return -1;
         }
+    };
 
-        Map.prototype.set = function (key, value) {
-            if (typeof key === "string" || typeof key === "number") {
-                this.hash[key] = value;
+    function indexOfKey(key) {
+        for (var i = 0; i < this.length; i++) {
+            if (this[i][0] === key) {
+                return i;
             }
-            else {
-                var index = indexOfKey.call(this, key);
-                if (index === -1) {
-                    this.push([key, value]);
-                }
-                else {
-                    this[index][1] = value;
-                }
-            }
-        };
-
+        }
+        return -1;
+    }
 
-        Map.prototype.has = function (key) {
-            if (typeof key === "string" || typeof key === "number") {
-                return !!this.hash[key];
+    Map.prototype.set = function (key, value) {
+        if (typeof key === "string" || typeof key === "number") {
+            this.hash[key] = value;
+        }
+        else {
+            var index = indexOfKey.call(this, key);
+            if (index === -1) {
+                this.push([key, value]);
             }
             else {
-                return indexOfKey.call(this, key) !== -1;
+                this[index][1] = value;
             }
-        };
+        }
+    };
 
-        Map.prototype.get = function (key) {
-            if (typeof key === "string" || typeof key === "number") {
-                return this.hash[key];
+
+    Map.prototype.has = function (key) {
+        if (typeof key === "string" || typeof key === "number") {
+            return !!this.hash[key];
+        }
+        else {
+            return indexOfKey.call(this, key) !== -1;
+        }
+    };
+
+    Map.prototype.get = function (key) {
+        if (typeof key === "string" || typeof key === "number") {
+            return this.hash[key];
+        }
+        else {
+            var index = indexOfKey.call(this, key);
+            if (index !== -1) {
+                return this[index][1];
             }
             else {
-                var index = indexOfKey.call(this, key);
-                if (index !== -1) {
-                    return this[index][1];
-                }
-                else {
-                    return void 0;
-                }
+                return void 0;
             }
-        };
+        }
+    };
 
-        return Map;
-    }(Array));
-    window.Map = Map;
-// }
+    return Map;
+}(Array));
 // ./lib-es5/models/model.js
 
 
@@ -1605,11 +1598,18 @@ var Reactive = /** @class */ (function (_super) {
     /**
      * Create a mirror
      * @param value {IValue} value to mirror
-     * @param forwardOnly {boolean} forward only sync
      */
-    Reactive.prototype.$mirror = function (value, forwardOnly) {
-        if (forwardOnly === void 0) { forwardOnly = false; }
-        var mirror = new Mirror(value, forwardOnly);
+    Reactive.prototype.$mirror = function (value) {
+        var mirror = new 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(value, true);
         this.$.watch.add(mirror);
         return mirror;
     };
@@ -1904,9 +1904,11 @@ var Fragment = /** @class */ (function (_super) {
         return this;
     };
     Fragment.prototype.$debug = function (text) {
-        var node = new DebugNode();
-        node.$preinit(this.$.app, this, text);
-        this.$$pushNode(node);
+        if (this.$.app.$debugUi) {
+            var node = new DebugNode();
+            node.$preinit(this.$.app, this, text);
+            this.$$pushNode(node);
+        }
         return this;
     };
     Fragment.prototype.$tag = function (tagName, cb) {
@@ -3012,6 +3014,7 @@ var AppNode = /** @class */ (function (_super) {
     function AppNode(options) {
         var _this = this; _super.call(this);
         _this.$run = (options === null || options === void 0 ? void 0 : options.executor) || ((options === null || options === void 0 ? void 0 : options.freezeUi) === false ? timeoutExecutor : instantExecutor);
+        _this.$debugUi = (options === null || options === void 0 ? void 0 : options.debugUi) || false;
         return _this;
     }
     return AppNode;
@@ -3531,10 +3534,9 @@ window.BaseView = BaseView;
  */
 var ArrayView = /** @class */ (function (_super) {
     __extends(ArrayView, _super);
-    function ArrayView() {
+    function ArrayView(model) {
         var _this = this; _super.call(this);
-        _this.model = new ArrayModel;
-        _this.$seal();
+        _this.model = model;
         return _this;
     }
     ArrayView.prototype.createChild = function (id, item, before) {
@@ -3595,9 +3597,9 @@ window.Watch = Watch;
  */
 var ObjectView = /** @class */ (function (_super) {
     __extends(ObjectView, _super);
-    function ObjectView() {
+    function ObjectView(model) {
         var _this = this; _super.call(this);
-        _this.model = new ObjectModel;
+        _this.model = model;
         return _this;
     }
     ObjectView.prototype.$ready = function () {
@@ -3621,9 +3623,9 @@ window.ObjectView = ObjectView;
  */
 var MapView = /** @class */ (function (_super) {
     __extends(MapView, _super);
-    function MapView() {
+    function MapView(model) {
         var _this = this; _super.call(this);
-        _this.model = new MapModel;
+        _this.model = model;
         return _this;
     }
     MapView.prototype.$ready = function () {
@@ -3648,9 +3650,9 @@ window.MapView = MapView;
  */
 var SetView = /** @class */ (function (_super) {
     __extends(SetView, _super);
-    function SetView() {
+    function SetView(model) {
         var _this = this; _super.call(this);
-        _this.model = new SetModel();
+        _this.model = model;
         return _this;
     }
     SetView.prototype.$ready = function () {

package/flow-typed/vasille.js

@@ -7,6 +7,7 @@ interface IModel {
     disableReactivity () : void;
 }
 type AppOptions = ?{
+    debugUi?: boolean,
     freezeUi ?: boolean,
     executor ?: Executor
 }
@@ -34,7 +35,8 @@ declare module "vasille" {
         constructor ($ : ?ReactivePrivate) : void;
 
         $ref<T> (value : T) : IValue<T>;
-        $mirror<T> (value : IValue<T>, forwardOnly?: boolean) : Mirror<T>;
+        $mirror<T> (value : IValue<T>) : Mirror<T>;
+        $forward<T> (value : IValue<T>) : Mirror<T>;
         $point<T>(value: T | IValue<T>, forwardOnly?: boolean): Pointer<T>;
         $register<T>(model: T): T;
 
@@ -161,7 +163,7 @@ declare module "vasille" {
         disable () : this;
     }
     declare export class Signal<
-        T1 = void, T2 = void, T3 = void, T4 = void, T5 = void, T6 = void, T7 = void, T8 = void, T9 = void
+        T = Fragment, T1 = void, T2 = void, T3 = void, T4 = void, T5 = void, T6 = void, T7 = void, T8 = void, T9 = void
         > {
         handlers : Set<
             (a1 : T1, a2 : T2, a3 : T3, a4 : T4, a5 : T5, a6 : T6, a7 : T7, a8 : T8, a9 : T9) => void
@@ -178,17 +180,17 @@ declare module "vasille" {
     declare export class Slot<
         t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void
         > {
-        runner : ?(a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void;
+        runner : ?(a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void;
 
         insert (
-            func : (a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void
+            func : (a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void
         ) : void;
         release (
-            a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
+            a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
         ) : void;
         predefine (
-            func : (a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void,
-            a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
+            func : (a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void,
+            a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
         ) : void;
     }
     declare export class Listener<ValueT, IndexT = string | number> {
@@ -283,7 +285,7 @@ declare module "vasille" {
         t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void
         > extends Fragment {
         interceptor : Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>;
-        slot : Slot<Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
+        slot : Slot<Fragment, Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
     }
     declare export class FragmentPrivate extends ReactivePrivate {
 
@@ -600,7 +602,7 @@ declare module "vasille" {
         $preinit (app : AppNode, parent : Fragment, text : ?IValue<string>) : void;
     }
     declare export class Watch<T> extends Fragment {
-        slot : Slot<T>;
+        slot : Slot<Fragment, T>;
         model : IValue<T>;
 
         constructor () : void;
@@ -754,14 +756,14 @@ declare module "vasille" {
         constructor ($1 : ?BaseViewPrivate<K, T>) : void;
     }
     declare export class ArrayView<T> extends BaseView<?T, T, ArrayModel<T>> {
-        constructor () : void;
+        constructor (model : ArrayModel<T>) : void;
         createChild (id : ?T, item : T, before : ?Fragment) : any;
     }
     declare export class MapView<K, T> extends BaseView<K, T, MapModel<K, T>> {
-        constructor () : void;
+        constructor (model : MapModel<K, T>) : void;
     }
     declare export class ObjectView<T> extends BaseView<string, T, ObjectModel<T>> {
-        constructor () : void;
+        constructor (model : ObjectModel<T>) : void;
     }
     declare export class RepeatNodePrivate<IdT> extends INodePrivate {
         nodes : Map<IdT, Fragment>;
@@ -769,7 +771,7 @@ declare module "vasille" {
         constructor () : void;
     }
     declare export class RepeatNode<IdT, T> extends Fragment {
-        slot : Slot<T, IdT>;
+        slot : Slot<Fragment, T, IdT>;
         freezeUi : boolean;
 
         constructor ($ : ?RepeatNodePrivate<IdT>) : void;
@@ -791,7 +793,7 @@ declare module "vasille" {
         changeCount (number : number) : void;
     }
     declare export class SetView<T> extends BaseView<T, T, SetModel<T>> {
-        constructor () : void;
+        constructor (model : SetModel<T>) : void;
     }
     declare export class AttributeBinding extends Binding<?string> {
         constructor (

package/lib/core/core.js

@@ -72,10 +72,18 @@ export class Reactive extends Destroyable {
     /**
      * Create a mirror
      * @param value {IValue} value to mirror
-     * @param forwardOnly {boolean} forward only sync
      */
-    $mirror(value, forwardOnly = false) {
-        const mirror = new Mirror(value, forwardOnly);
+    $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;
     }

package/lib/node/app.js

@@ -12,6 +12,7 @@ export class AppNode extends INode {
     constructor(options) {
         super();
         this.$run = (options === null || options === void 0 ? void 0 : options.executor) || ((options === null || options === void 0 ? void 0 : options.freezeUi) === false ? timeoutExecutor : instantExecutor);
+        this.$debugUi = (options === null || options === void 0 ? void 0 : options.debugUi) || false;
     }
 }
 /**

package/lib/node/node.js

@@ -181,9 +181,11 @@ export class Fragment extends Reactive {
         return this;
     }
     $debug(text) {
-        const node = new DebugNode();
-        node.$preinit(this.$.app, this, text);
-        this.$$pushNode(node);
+        if (this.$.app.$debugUi) {
+            const node = new DebugNode();
+            node.$preinit(this.$.app, this, text);
+            this.$$pushNode(node);
+        }
         return this;
     }
     $tag(tagName, cb) {

package/lib/views/array-view.js

@@ -1,15 +1,13 @@
 import { BaseView } from "./base-view";
-import { ArrayModel } from "../models/array-model";
 /**
  * Represents a view of an array model
  * @class ArrayView
  * @extends BaseView
  */
 export class ArrayView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new ArrayModel;
-        this.$seal();
+        this.model = model;
     }
     createChild(id, item, before) {
         super.createChild(item, item, before || this.$.nodes.get(id));

package/lib/views/map-view.js

@@ -1,14 +1,13 @@
 import { BaseView } from "./base-view";
-import { MapModel } from "../models/map-model";
 /**
  * Create a children pack for each map value
  * @class MapView
  * @extends BaseView
  */
 export class MapView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new MapModel;
+        this.model = model;
     }
     $ready() {
         const map = this.model;

package/lib/views/object-view.js

@@ -1,14 +1,13 @@
 import { BaseView } from "./base-view";
-import { ObjectModel } from "../models/object-model";
 /**
  * Create a children pack for each object field
  * @class ObjectView
  * @extends BaseView
  */
 export class ObjectView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new ObjectModel;
+        this.model = model;
     }
     $ready() {
         const obj = this.model;

package/lib/views/set-view.js

@@ -1,14 +1,13 @@
 import { BaseView } from "./base-view";
-import { SetModel } from "../models/set-model";
 /**
  * Create a children pack for each set value
  * @class SetView
  * @extends BaseView
  */
 export class SetView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new SetModel();
+        this.model = model;
     }
     $ready() {
         const $ = this.$;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vasille - Safe. Fast. Powerful.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "exports": {
     "import": "./lib/index.js",
     "browser": "./lib/index.js"

package/types/core/core.d.ts

@@ -62,9 +62,13 @@ export declare class Reactive extends Destroyable {
     /**
      * Create a mirror
      * @param value {IValue} value to mirror
-     * @param forwardOnly {boolean} forward only sync
      */
-    $mirror<T>(value: IValue<T>, forwardOnly?: boolean): Mirror<T>;
+    $mirror<T>(value: IValue<T>): Mirror<T>;
+    /**
+     * Create a forward-only mirror
+     * @param value {IValue} value to mirror
+     */
+    $forward<T>(value: IValue<T>): Mirror<T>;
     /**
      * Creates a pointer
      * @param value {*} default value to point
@@ -112,15 +116,15 @@ export declare class Reactive extends Destroyable {
      * @param v9 {IValue} argument
      * @return {IValue} the created ivalue
      */
-    $bind<T, T1>(func: (a1: T1) => T, v1: IValue<T1>): any;
-    $bind<T, T1, T2>(func: (a1: T1, a2: T2) => T, v1: IValue<T1>, v2: IValue<T2>): any;
-    $bind<T, T1, T2, T3>(func: (a1: T1, a2: T2, a3: T3) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>): any;
-    $bind<T, T1, T2, T3, T4>(func: (a1: T1, a2: T2, a3: T3, a4: T4) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>): any;
-    $bind<T, T1, T2, T3, T4, T5>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>): any;
-    $bind<T, T1, T2, T3, T4, T5, T6>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>): any;
-    $bind<T, T1, T2, T3, T4, T5, T6, T7>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>): any;
-    $bind<T, T1, T2, T3, T4, T5, T6, T7, T8>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>): any;
-    $bind<T, T1, T2, T3, T4, T5, T6, T7, T8, T9>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8, a9: T9) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>): any;
+    $bind<T, T1>(func: (a1: T1) => T, v1: IValue<T1>): IValue<T>;
+    $bind<T, T1, T2>(func: (a1: T1, a2: T2) => T, v1: IValue<T1>, v2: IValue<T2>): IValue<T>;
+    $bind<T, T1, T2, T3>(func: (a1: T1, a2: T2, a3: T3) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>): IValue<T>;
+    $bind<T, T1, T2, T3, T4>(func: (a1: T1, a2: T2, a3: T3, a4: T4) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>): IValue<T>;
+    $bind<T, T1, T2, T3, T4, T5>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>): IValue<T>;
+    $bind<T, T1, T2, T3, T4, T5, T6>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>): IValue<T>;
+    $bind<T, T1, T2, T3, T4, T5, T6, T7>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>): IValue<T>;
+    $bind<T, T1, T2, T3, T4, T5, T6, T7, T8>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>): IValue<T>;
+    $bind<T, T1, T2, T3, T4, T5, T6, T7, T8, T9>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8, a9: T9) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>): IValue<T>;
     /**
      * Enable reactivity of fields
      */

package/types/core/slot.d.ts

@@ -3,7 +3,7 @@ import { Fragment } from "../node/node";
  * Component slot
  * @class Slot
  */
-export declare class Slot<t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void> {
+export declare class Slot<t extends Fragment = Fragment, t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void> {
     /**
      * Function to run
      * @type {function(node : Fragment)}
@@ -13,7 +13,7 @@ export declare class Slot<t1 = void, t2 = void, t3 = void, t4 = void, t5 = void,
      * Sets the runner
      * @param func {function} the function to run
      */
-    insert(func: (a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void): void;
+    insert(func: (a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void): void;
     /**
      * @param a0 {Fragment} node to paste content
      * @param a1 {*} 1st argument
@@ -26,7 +26,7 @@ export declare class Slot<t1 = void, t2 = void, t3 = void, t4 = void, t5 = void,
      * @param a8 {*} 8th argument
      * @param a9 {*} 9th argument
      */
-    release(a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
+    release(a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
     /**
      * Predefine a handler for a slot
      * @param func {function(node : Fragment)} Function to run if no handler specified
@@ -41,5 +41,5 @@ export declare class Slot<t1 = void, t2 = void, t3 = void, t4 = void, t5 = void,
      * @param a8 {*} 8th argument
      * @param a9 {*} 9th argument
      */
-    predefine(func: (a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void, a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
+    predefine(func: (a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void, a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
 }

package/types/node/app.d.ts

@@ -1,6 +1,7 @@
 import { Executor } from "../core/executor";
 import { INode } from "./node";
 declare type AppOptions = {
+    debugUi?: boolean;
     freezeUi?: boolean;
     executor?: Executor;
 };
@@ -15,6 +16,10 @@ export declare class AppNode extends INode {
      * @type {Executor}
      */
     $run: Executor;
+    /**
+     * Enables debug comments
+     */
+    $debugUi: boolean;
     /**
      * @param options {Object} Application options
      */

package/types/node/interceptor.d.ts

@@ -45,6 +45,6 @@ export declare class InterceptorNode<t1 = void, t2 = void, t3 = void, t4 = void,
      * The default slot of node
      * @type Slot
      */
-    slot: Slot<Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
+    slot: Slot<Fragment, Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
     $compose(): void;
 }

package/types/node/watch.d.ts

@@ -11,7 +11,7 @@ export declare class Watch<T> extends Fragment {
      * Default slot
      * @type Slot
      */
-    slot: Slot<T>;
+    slot: Slot<Fragment, T>;
     /**
      * iValue to watch
      * @type IValue

package/types/views/array-view.d.ts

@@ -7,7 +7,7 @@ import { Fragment } from "../node/node";
  * @extends BaseView
  */
 export declare class ArrayView<T> extends BaseView<T, T, ArrayModel<T>> {
-    constructor();
+    constructor(model: ArrayModel<T>);
     createChild(id: T, item: T, before?: Fragment): any;
     $ready(): void;
 }

package/types/views/map-view.d.ts

@@ -6,6 +6,6 @@ import { MapModel } from "../models/map-model";
  * @extends BaseView
  */
 export declare class MapView<K, T> extends BaseView<K, T, MapModel<K, T>> {
-    constructor();
+    constructor(model: MapModel<K, T>);
     $ready(): void;
 }

package/types/views/object-view.d.ts

@@ -6,6 +6,6 @@ import { ObjectModel } from "../models/object-model";
  * @extends BaseView
  */
 export declare class ObjectView<T> extends BaseView<string, T, ObjectModel<T>> {
-    constructor();
+    constructor(model: ObjectModel<T>);
     $ready(): void;
 }

package/types/views/repeat-node.d.ts

@@ -24,7 +24,7 @@ export declare class RepeatNode<IdT, T> extends Fragment {
     /**
      * Default slot
      */
-    slot: Slot<T, IdT>;
+    slot: Slot<Fragment, T, IdT>;
     /**
      * If false will use timeout executor, otherwise the app executor
      */

package/types/views/set-view.d.ts

@@ -6,6 +6,6 @@ import { SetModel } from "../models/set-model";
  * @extends BaseView
  */
 export declare class SetView<T> extends BaseView<T, T, SetModel<T>> {
-    constructor();
+    constructor(model: SetModel<T>);
     $ready(): void;
 }

package/.gitlab-ci.yml

@@ -1,20 +0,0 @@
-# This file is a template, and might need editing before it works on your project.
-# To contribute improvements to CI/CD templates, please follow the Development guide at:
-# https://docs.gitlab.com/ee/development/cicd/templates.html
-# This specific template is located at:
-# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Nodejs.gitlab-ci.yml
-
-# Official framework image. Look for the different tagged releases at:
-# https://hub.docker.com/r/library/node/tags/
-image: node:latest
-
-# This folder is cached between builds
-# https://docs.gitlab.com/ee/ci/yaml/index.html#cache
-cache:
-  paths:
-    - node_modules/
-
-test_async:
-  script:
-    - npm install
-    - npm run build