vasille 2.2.1 → 2.3.1

package/lib/node/app.js

@@ -11,7 +11,7 @@ export class AppNode extends INode {
     constructor(input) {
         super(input);
         this.debugUi = input.debugUi || false;
-        this.seal();
+        this.$seal();
     }
 }
 /**
@@ -30,7 +30,7 @@ export class App extends AppNode {
         this.$.node = node;
         this.preinit(this, this);
         this.init();
-        this.seal();
+        this.$seal();
     }
     appendNode(node) {
         this.$.node.appendChild(node);
@@ -40,7 +40,7 @@ export class Portal extends AppNode {
     constructor(input) {
         super(input);
         this.$.node = input.node;
-        this.seal();
+        this.$seal();
     }
     appendNode(node) {
         this.$.node.appendChild(node);

package/lib/node/node.js

@@ -14,7 +14,7 @@ import { internalError, userError } from "../core/errors";
 export class FragmentPrivate extends ReactivePrivate {
     constructor() {
         super();
-        this.seal();
+        this.$seal();
     }
     /**
      * Pre-initializes the base of a fragment
@@ -28,10 +28,10 @@ export class FragmentPrivate extends ReactivePrivate {
     /**
      * Unlinks all bindings
      */
-    destroy() {
+    $destroy() {
         this.next = null;
         this.prev = null;
-        super.destroy();
+        super.$destroy();
     }
 }
 /**
@@ -70,11 +70,11 @@ export class Fragment extends Reactive {
         $.preinit(app, parent);
     }
     init() {
-        super.init();
+        const ret = super.init();
         this.ready();
+        return ret;
     }
     compose(input) {
-        super.compose(input);
         input.slot && input.slot(this);
     }
     /** To be overloaded: ready event handler */
@@ -182,7 +182,7 @@ export class Fragment extends Reactive {
         node.preinit($.app, this);
         node.input.slot = callback || node.input.slot;
         this.pushNode(node);
-        node.init();
+        return node.init();
     }
     /**
      * Defines an if node
@@ -254,14 +254,14 @@ export class Fragment extends Reactive {
             $.prev.$.next = $.next;
         }
     }
-    destroy() {
-        this.children.forEach(child => child.destroy());
+    $destroy() {
+        this.children.forEach(child => child.$destroy());
         this.children.clear();
         this.lastChild = null;
         if (this.$.parent.lastChild === this) {
             this.$.parent.lastChild = this.$.prev;
         }
-        super.destroy();
+        super.$destroy();
     }
 }
 const trueIValue = new Reference(true);
@@ -273,7 +273,7 @@ const trueIValue = new Reference(true);
 export class TextNodePrivate extends FragmentPrivate {
     constructor() {
         super();
-        this.seal();
+        this.$seal();
     }
     /**
      * Pre-initializes a text node
@@ -293,8 +293,8 @@ export class TextNodePrivate extends FragmentPrivate {
     /**
      * Clear node data
      */
-    destroy() {
-        super.destroy();
+    $destroy() {
+        super.$destroy();
     }
 }
 /**
@@ -305,7 +305,7 @@ export class TextNodePrivate extends FragmentPrivate {
 export class TextNode extends Fragment {
     constructor($ = new TextNodePrivate()) {
         super({}, $);
-        this.seal();
+        this.$seal();
     }
     preinit(app, parent, text) {
         const $ = this.$;
@@ -318,10 +318,10 @@ export class TextNode extends Fragment {
     findFirstChild() {
         return this.$.node;
     }
-    destroy() {
+    $destroy() {
         this.$.node.remove();
-        this.$.destroy();
-        super.destroy();
+        this.$.$destroy();
+        super.$destroy();
     }
 }
 /**
@@ -337,10 +337,10 @@ export class INodePrivate extends FragmentPrivate {
          * @type {boolean}
          */
         this.unmounted = false;
-        this.seal();
+        this.$seal();
     }
-    destroy() {
-        super.destroy();
+    $destroy() {
+        super.$destroy();
     }
 }
 /**
@@ -356,7 +356,7 @@ export class INode extends Fragment {
      */
     constructor(input, $) {
         super(input, $ || new INodePrivate);
-        this.seal();
+        this.$seal();
     }
     /**
      * Get the bound node
@@ -599,7 +599,7 @@ export class INode extends Fragment {
 export class Tag extends INode {
     constructor(input) {
         super(input);
-        this.seal();
+        this.$seal();
     }
     preinit(app, parent, tagName) {
         if (!tagName || typeof tagName !== "string") {
@@ -652,9 +652,9 @@ export class Tag extends INode {
     /**
      * Runs GC
      */
-    destroy() {
+    $destroy() {
         this.node.remove();
-        super.destroy();
+        super.$destroy();
     }
 }
 /**
@@ -677,8 +677,11 @@ export class Extension extends INode {
             throw userError("A extension node can be encapsulated only in a tag/extension/component", "virtual-dom");
         }
     }
-    destroy() {
-        super.destroy();
+    extend(options) {
+        this.applyOptions(options);
+    }
+    $destroy() {
+        super.$destroy();
     }
 }
 /**
@@ -723,18 +726,18 @@ export class SwitchedNodePrivate extends FragmentPrivate {
          * @type {Array<{cond : IValue<boolean>, cb : function(Fragment)}>}
          */
         this.cases = [];
-        this.seal();
+        this.$seal();
     }
     /**
      * Runs GC
      */
-    destroy() {
+    $destroy() {
         this.cases.forEach(c => {
             delete c.cond;
             delete c.cb;
         });
         this.cases.splice(0);
-        super.destroy();
+        super.$destroy();
     }
 }
 /**
@@ -758,7 +761,7 @@ export class SwitchedNode extends Fragment {
                 return;
             }
             if (this.lastChild) {
-                this.lastChild.destroy();
+                this.lastChild.$destroy();
                 this.children.clear();
                 this.lastChild = null;
             }
@@ -770,11 +773,11 @@ export class SwitchedNode extends Fragment {
                 $.index = -1;
             }
         };
-        this.seal();
+        this.$seal();
     }
     addCase(case_) {
         this.$.cases.push(case_);
-        case_.cond.on(this.$.sync);
+        case_.cond.$on(this.$.sync);
         this.$.sync();
     }
     /**
@@ -792,16 +795,16 @@ export class SwitchedNode extends Fragment {
     ready() {
         const $ = this.$;
         $.cases.forEach(c => {
-            c.cond.on($.sync);
+            c.cond.$on($.sync);
         });
         $.sync();
     }
-    destroy() {
+    $destroy() {
         const $ = this.$;
         $.cases.forEach(c => {
-            c.cond.off($.sync);
+            c.cond.$off($.sync);
         });
-        super.destroy();
+        super.$destroy();
     }
 }
 /**
@@ -810,7 +813,7 @@ export class SwitchedNode extends Fragment {
 export class DebugPrivate extends FragmentPrivate {
     constructor() {
         super();
-        this.seal();
+        this.$seal();
     }
     /**
      * Pre-initializes a text node
@@ -829,9 +832,9 @@ export class DebugPrivate extends FragmentPrivate {
     /**
      * Clear node data
      */
-    destroy() {
+    $destroy() {
         this.node.remove();
-        super.destroy();
+        super.$destroy();
     }
 }
 /**
@@ -847,7 +850,7 @@ export class DebugNode extends Fragment {
          * @type {DebugNode}
          */
         this.$ = new DebugPrivate();
-        this.seal();
+        this.$seal();
     }
     preinit(app, parent, text) {
         const $ = this.$;
@@ -859,8 +862,8 @@ export class DebugNode extends Fragment {
     /**
      * Runs garbage collector
      */
-    destroy() {
-        this.$.destroy();
-        super.destroy();
+    $destroy() {
+        this.$.$destroy();
+        super.$destroy();
     }
 }

package/lib/node/watch.js

@@ -8,7 +8,7 @@ export class Watch extends Fragment {
     compose(input) {
         this.watch((value) => {
             this.children.forEach(child => {
-                child.destroy();
+                child.$destroy();
             });
             this.children.clear();
             this.lastChild = null;

package/lib/value/expression.js

@@ -35,12 +35,12 @@ export class Expression extends IValue {
         this.values = values;
         this.func = handler;
         if (link) {
-            this.enable();
+            this.$enable();
         }
         else {
             handler();
         }
-        this.seal();
+        this.$seal();
     }
     get $() {
         return this.sync.$;
@@ -48,18 +48,18 @@ export class Expression extends IValue {
     set $(value) {
         this.sync.$ = value;
     }
-    on(handler) {
-        this.sync.on(handler);
+    $on(handler) {
+        this.sync.$on(handler);
         return this;
     }
-    off(handler) {
-        this.sync.off(handler);
+    $off(handler) {
+        this.sync.$off(handler);
         return this;
     }
-    enable() {
+    $enable() {
         if (!this.isEnabled) {
             for (let i = 0; i < this.values.length; i++) {
-                this.values[i].on(this.linkedFunc[i]);
+                this.values[i].$on(this.linkedFunc[i]);
                 this.valuesCache[i] = this.values[i].$;
             }
             this.func();
@@ -67,20 +67,20 @@ export class Expression extends IValue {
         }
         return this;
     }
-    disable() {
+    $disable() {
         if (this.isEnabled) {
             for (let i = 0; i < this.values.length; i++) {
-                this.values[i].off(this.linkedFunc[i]);
+                this.values[i].$off(this.linkedFunc[i]);
             }
             this.isEnabled = false;
         }
         return this;
     }
-    destroy() {
-        this.disable();
+    $destroy() {
+        this.$disable();
         this.values.splice(0);
         this.valuesCache.splice(0);
         this.linkedFunc.splice(0);
-        super.destroy();
+        super.$destroy();
     }
 }

package/lib/value/mirror.js

@@ -13,13 +13,13 @@ export class Mirror extends Reference {
      */
     constructor(value, forwardOnly = false) {
         super(value.$);
-        this.handler = (v) => {
+        this.$handler = (v) => {
             this.$ = v;
         };
-        this.pointedValue = value;
-        this.forwardOnly = forwardOnly;
-        value.on(this.handler);
-        this.seal();
+        this.$pointedValue = value;
+        this.$forwardOnly = forwardOnly;
+        value.$on(this.$handler);
+        this.$seal();
     }
     get $() {
         // this is a ts bug
@@ -28,29 +28,29 @@ export class Mirror extends Reference {
         return super.$;
     }
     set $(v) {
-        if (!this.forwardOnly) {
-            this.pointedValue.$ = v;
+        if (!this.$forwardOnly) {
+            this.$pointedValue.$ = v;
         }
         // this is a ts bug
         // eslint-disable-next-line
         // @ts-ignore
         super.$ = v;
     }
-    enable() {
+    $enable() {
         if (!this.isEnabled) {
             this.isEnabled = true;
-            this.pointedValue.on(this.handler);
-            this.$ = this.pointedValue.$;
+            this.$pointedValue.$on(this.$handler);
+            this.$ = this.$pointedValue.$;
         }
     }
-    disable() {
+    $disable() {
         if (this.isEnabled) {
-            this.pointedValue.off(this.handler);
+            this.$pointedValue.$off(this.$handler);
             this.isEnabled = false;
         }
     }
-    destroy() {
-        this.disable();
-        super.destroy();
+    $destroy() {
+        this.$disable();
+        super.$destroy();
     }
 }

package/lib/value/pointer.js

@@ -16,11 +16,11 @@ export class Pointer extends Mirror {
      * Point a new ivalue
      * @param value {IValue} value to point
      */
-    point(value) {
-        if (this.pointedValue !== value) {
-            this.disable();
-            this.pointedValue = value;
-            this.enable();
+    set $$(value) {
+        if (this.$pointedValue !== value) {
+            this.$disable();
+            this.$pointedValue = value;
+            this.$enable();
         }
     }
 }

package/lib/value/reference.js

@@ -10,42 +10,42 @@ export class Reference extends IValue {
      */
     constructor(value) {
         super(true);
-        this.value = value;
-        this.onchange = new Set;
-        this.seal();
+        this.$value = value;
+        this.$onchange = new Set;
+        this.$seal();
     }
     get $() {
-        return this.value;
+        return this.$value;
     }
     set $(value) {
-        if (this.value !== value) {
-            this.value = value;
+        if (this.$value !== value) {
+            this.$value = value;
             if (this.isEnabled) {
-                this.onchange.forEach(handler => {
+                this.$onchange.forEach(handler => {
                     handler(value);
                 });
             }
         }
     }
-    enable() {
+    $enable() {
         if (!this.isEnabled) {
-            this.onchange.forEach(handler => {
-                handler(this.value);
+            this.$onchange.forEach(handler => {
+                handler(this.$value);
             });
             this.isEnabled = true;
         }
     }
-    disable() {
+    $disable() {
         this.isEnabled = false;
     }
-    on(handler) {
-        this.onchange.add(handler);
+    $on(handler) {
+        this.$onchange.add(handler);
     }
-    off(handler) {
-        this.onchange.delete(handler);
+    $off(handler) {
+        this.$onchange.delete(handler);
     }
-    destroy() {
-        super.destroy();
-        this.onchange.clear();
+    $destroy() {
+        super.$destroy();
+        this.$onchange.clear();
     }
 }

package/lib/views/base-view.js

@@ -7,7 +7,7 @@ import { RepeatNode, RepeatNodePrivate } from "./repeat-node";
 export class BaseViewPrivate extends RepeatNodePrivate {
     constructor() {
         super();
-        this.seal();
+        this.$seal();
     }
 }
 /**

package/lib/views/object-view.js

@@ -7,7 +7,7 @@ import { BaseView } from "./base-view";
 export class ObjectView extends BaseView {
     compose(input) {
         super.compose(input);
-        const obj = input.model.proxy();
+        const obj = input.model.values;
         for (const key in obj) {
             this.createChild(input, key, obj[key]);
         }

package/lib/views/repeat-node.js

@@ -12,11 +12,11 @@ export class RepeatNodePrivate extends INodePrivate {
          * @type {Map}
          */
         this.nodes = new Map();
-        this.seal();
+        this.$seal();
     }
-    destroy() {
+    $destroy() {
         this.nodes.clear();
-        super.destroy();
+        super.$destroy();
     }
 }
 /**
@@ -58,7 +58,7 @@ export class RepeatNode extends Fragment {
         const child = $.nodes.get(id);
         if (child) {
             child.remove();
-            child.destroy();
+            child.$destroy();
             this.$.nodes.delete(id);
             this.children.delete(child);
         }

package/lib-node/binding/attribute.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeBinding = void 0;
+const binding_1 = require("./binding");
+/**
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
+ */
+class AttributeBinding extends binding_1.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
+     */
+    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();
+    }
+}
+exports.AttributeBinding = AttributeBinding;

package/lib-node/binding/binding.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Binding = void 0;
+const destroyable_1 = require("../core/destroyable");
+/**
+ * Describe a common binding logic
+ * @class Binding
+ * @extends Destroyable
+ */
+class Binding extends destroyable_1.Destroyable {
+    /**
+     * Constructs a common binding logic
+     * @param value {IValue} the value to bind
+     */
+    constructor(value) {
+        super();
+        this.binding = value;
+        this.$seal();
+    }
+    init(bounded) {
+        this.func = bounded;
+        this.binding.$on(this.func);
+        this.func(this.binding.$);
+    }
+    /**
+     * Just clear bindings
+     */
+    $destroy() {
+        this.binding.$off(this.func);
+        super.$destroy();
+    }
+}
+exports.Binding = Binding;

package/lib-node/binding/class.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicalClassBinding = exports.StaticClassBinding = void 0;
+const binding_1 = require("./binding");
+function addClass(node, cl) {
+    node.node.classList.add(cl);
+}
+function removeClass(node, cl) {
+    node.node.classList.remove(cl);
+}
+class StaticClassBinding extends binding_1.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();
+    }
+}
+exports.StaticClassBinding = StaticClassBinding;
+class DynamicalClassBinding extends binding_1.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();
+    }
+}
+exports.DynamicalClassBinding = DynamicalClassBinding;