vasille 2.0.3 → 2.2.0

package/lib/binding/attribute.js

@@ -12,21 +12,20 @@ export class AttributeBinding extends Binding {
      * @param value {IValue} value to bind
      */
     constructor(node, name, value) {
-        super(node, name, value);
-    }
-    /**
-     * Generates a function which updates the attribute value
-     * @param name {String} The name of attribute
-     * @returns {Function} a function which will update attribute value
-     */
-    bound(name) {
-        return function (node, value) {
+        super(value);
+        this.init((value) => {
             if (value) {
-                node.app.$run.setAttribute(node.node, name, value);
+                if (typeof value === 'boolean') {
+                    node.node.setAttribute(name, "");
+                }
+                else {
+                    node.node.setAttribute(name, `${value}`);
+                }
             }
             else {
-                node.app.$run.removeAttribute(node.node, name);
+                node.node.removeAttribute(name);
             }
-        };
+        });
+        this.seal();
     }
 }

package/lib/binding/binding.js

@@ -1,5 +1,4 @@
 import { Destroyable } from "../core/destroyable";
-import { notOverwritten } from "../core/errors";
 /**
  * Describe a common binding logic
  * @class Binding
@@ -8,32 +7,23 @@ import { notOverwritten } from "../core/errors";
 export class Binding extends Destroyable {
     /**
      * Constructs a common binding logic
-     * @param node {INode} the vasille node
-     * @param name {String} the name of property/attribute/class
      * @param value {IValue} the value to bind
      */
-    constructor(node, name, value) {
+    constructor(value) {
         super();
-        this.updateFunc = this.bound(name).bind(null, node);
         this.binding = value;
-        this.binding.on(this.updateFunc);
-        this.updateFunc(this.binding.$);
-        this.$seal();
+        this.seal();
     }
-    /**
-     * Is a virtual function to get the specific bind function
-     * @param name {String} the name of attribute/property
-     * @returns {Function} a function to update attribute/property value
-     * @throws Always throws and must be overloaded in child class
-     */
-    bound(name) {
-        throw notOverwritten();
+    init(bounded) {
+        this.func = bounded;
+        this.binding.on(this.func);
+        this.func(this.binding.$);
     }
     /**
      * Just clear bindings
      */
-    $destroy() {
-        this.binding.off(this.updateFunc);
-        super.$destroy();
+    destroy() {
+        this.binding.off(this.func);
+        super.destroy();
     }
 }

package/lib/binding/class.js

@@ -1,51 +1,43 @@
 import { Binding } from "./binding";
-/**
- * Represents a HTML class binding description
- * @class ClassBinding
- * @extends Binding
- */
-export class ClassBinding extends Binding {
-    /**
-     * Constructs an HTML class binding description
-     * @param node {INode} the vasille node
-     * @param name {String} the name of class
-     * @param value {IValue} the value to bind
-     */
+function addClass(node, cl) {
+    node.node.classList.add(cl);
+}
+function removeClass(node, cl) {
+    node.node.classList.remove(cl);
+}
+export class StaticClassBinding extends Binding {
     constructor(node, name, value) {
-        super(node, name, value);
-        this.$seal();
-    }
-    /**
-     * Generates a function which updates the html class value
-     * @param name {String} The name of attribute
-     * @returns {Function} a function which will update attribute value
-     */
-    bound(name) {
-        let current = null;
-        function addClass(node, cl) {
-            node.app.$run.addClass(node.node, cl);
-        }
-        function removeClass(node, cl) {
-            node.app.$run.removeClass(node.node, cl);
-        }
-        return (node, value) => {
-            if (value !== current) {
-                if (typeof current === "string" && current !== "") {
-                    removeClass(node, current);
+        super(value);
+        this.current = false;
+        this.init((value) => {
+            if (value !== this.current) {
+                if (value) {
+                    addClass(node, name);
+                }
+                else {
+                    removeClass(node, name);
                 }
-                if (typeof value === "boolean") {
-                    if (value) {
-                        addClass(node, name);
-                    }
-                    else {
-                        removeClass(node, name);
-                    }
+                this.current = value;
+            }
+        });
+        this.seal();
+    }
+}
+export 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);
                 }
-                else if (typeof value === "string" && value !== "") {
+                if (value.length) {
                     addClass(node, value);
                 }
-                current = value;
+                this.current = value;
             }
-        };
+        });
+        this.seal();
     }
 }

package/lib/binding/style.js

@@ -12,18 +12,12 @@ export class StyleBinding extends Binding {
      * @param value {IValue} the value to bind
      */
     constructor(node, name, value) {
-        super(node, name, value);
-    }
-    /**
-     * Generates a function to update style property value
-     * @param name {string}
-     * @returns {Function} a function to update style property
-     */
-    bound(name) {
-        return function (node, value) {
+        super(value);
+        this.init((value) => {
             if (node.node instanceof HTMLElement) {
-                node.app.$run.setStyle(node.node, name, value);
+                node.node.style.setProperty(name, value);
             }
-        };
+        });
+        this.seal();
     }
 }

package/lib/core/core.js

@@ -1,10 +1,18 @@
 import { Destroyable } from "./destroyable.js";
 import { wrongBinding } from "./errors";
-import { IValue } from "./ivalue.js";
 import { Expression } from "../value/expression";
 import { Reference } from "../value/reference";
 import { Pointer } from "../value/pointer";
 import { Mirror } from "../value/mirror";
+export let current = null;
+const currentStack = [];
+function stack(node) {
+    currentStack.push(current);
+    current = node;
+}
+function unstack() {
+    current = currentStack.pop();
+}
 /**
  * Private stuff of a reactive object
  * @class ReactivePrivate
@@ -37,16 +45,18 @@ export class ReactivePrivate extends Destroyable {
          * @type {boolean}
          */
         this.frozen = false;
-        this.$seal();
+        this.seal();
     }
-    $destroy() {
-        var _a;
-        this.watch.forEach(value => value.$destroy());
+    destroy() {
+        this.watch.forEach(value => value.destroy());
         this.watch.clear();
-        this.bindings.forEach(binding => binding.$destroy());
+        this.bindings.forEach(binding => binding.destroy());
         this.bindings.clear();
-        (_a = this.freezeExpr) === null || _a === void 0 ? void 0 : _a.$destroy();
-        super.$destroy();
+        this.models.forEach(model => model.disableReactivity());
+        this.models.clear();
+        this.freezeExpr && this.freezeExpr.destroy();
+        this.onDestroy && this.onDestroy();
+        super.destroy();
     }
 }
 /**
@@ -55,15 +65,23 @@ export class ReactivePrivate extends Destroyable {
  * @extends Destroyable
  */
 export class Reactive extends Destroyable {
-    constructor($) {
+    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) {
+    ref(value) {
         const $ = this.$;
         const ref = new Reference(value);
         $.watch.add(ref);
@@ -73,7 +91,7 @@ export class Reactive extends Destroyable {
      * Create a mirror
      * @param value {IValue} value to mirror
      */
-    $mirror(value) {
+    mirror(value) {
         const mirror = new Mirror(value, false);
         this.$.watch.add(mirror);
         return mirror;
@@ -82,7 +100,7 @@ export class Reactive extends Destroyable {
      * Create a forward-only mirror
      * @param value {IValue} value to mirror
      */
-    $forward(value) {
+    forward(value) {
         const mirror = new Mirror(value, true);
         this.$.watch.add(mirror);
         return mirror;
@@ -92,14 +110,9 @@ export class Reactive extends Destroyable {
      * @param value {*} default value to point
      * @param forwardOnly {boolean} forward only sync
      */
-    $point(value, forwardOnly = false) {
+    point(value, forwardOnly = false) {
         const $ = this.$;
-        const ref = value instanceof IValue ? value : new Reference(value);
-        const pointer = new Pointer(ref, forwardOnly);
-        // when value is an ivalue will be equal to ref
-        if (value !== ref) {
-            $.watch.add(ref);
-        }
+        const pointer = new Pointer(value, forwardOnly);
         $.watch.add(pointer);
         return pointer;
     }
@@ -107,16 +120,27 @@ export class Reactive extends Destroyable {
      * Register a model
      * @param model
      */
-    $register(model) {
+    register(model) {
         this.$.models.add(model);
         return model;
     }
-    $watch(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+    /**
+     * Creates a watcher
+     * @param func {function} function to run on any argument change
+     * @param values
+     */
+    watch(func, ...values) {
         const $ = this.$;
-        $.watch.add(new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9));
+        $.watch.add(new Expression(func, !this.$.frozen, ...values));
     }
-    $bind(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
-        const res = new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+    /**
+     * Creates a computed value
+     * @param func {function} function to run on any argument change
+     * @param values
+     * @return {IValue} the created ivalue
+     */
+    expr(func, ...values) {
+        const res = new Expression(func, !this.$.frozen, ...values);
         const $ = this.$;
         $.watch.add(res);
         return res;
@@ -124,7 +148,7 @@ export class Reactive extends Destroyable {
     /**
      * Enable reactivity of fields
      */
-    $enable() {
+    enable() {
         const $ = this.$;
         if (!$.enabled) {
             $.watch.forEach(watcher => {
@@ -139,7 +163,7 @@ export class Reactive extends Destroyable {
     /**
      * Disable reactivity of fields
      */
-    $disable() {
+    disable() {
         const $ = this.$;
         if ($.enabled) {
             $.watch.forEach(watcher => {
@@ -157,7 +181,7 @@ export class Reactive extends Destroyable {
      * @param onOff {function} on show feedback
      * @param onOn {function} on hide feedback
      */
-    $bindAlive(cond, onOff, onOn) {
+    bindAlive(cond, onOff, onOn) {
         const $ = this.$;
         if ($.freezeExpr) {
             throw wrongBinding("this component already have a freeze state");
@@ -169,18 +193,40 @@ export class Reactive extends Destroyable {
             $.frozen = !cond;
             if (cond) {
                 onOn === null || onOn === void 0 ? void 0 : onOn();
-                this.$enable();
+                this.enable();
             }
             else {
                 onOff === null || onOff === void 0 ? void 0 : onOff();
-                this.$disable();
+                this.disable();
             }
         }, true, cond);
         return this;
     }
-    $destroy() {
-        super.$destroy();
-        this.$.$destroy();
+    init() {
+        this.applyOptions(this.input);
+        this.compose(this.input);
+    }
+    applyOptions(input) {
+        // empty
+    }
+    compose(input) {
+        // empty
+    }
+    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;
     }
 }

package/lib/core/destroyable.js

@@ -7,7 +7,7 @@ export class Destroyable {
      * Make object fields non configurable
      * @protected
      */
-    $seal() {
+    seal() {
         const $ = this;
         Object.keys($).forEach(i => {
             // eslint-disable-next-line no-prototype-builtins
@@ -39,7 +39,7 @@ export class Destroyable {
     /**
      * Garbage collector method
      */
-    $destroy() {
+    destroy() {
         // nothing here
     }
 }

package/lib/core/ivalue.js

@@ -1,11 +1,25 @@
 import { Destroyable } from "./destroyable.js";
 import { notOverwritten } from "./errors";
+export 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
  */
-export class IValue extends Destroyable {
+export class IValue extends Switchable {
     /**
      * @param isEnabled {boolean} initial is enabled state
      */
@@ -41,16 +55,4 @@ export class IValue extends Destroyable {
     off(handler) {
         throw notOverwritten();
     }
-    /**
-     * Enable update handlers triggering
-     */
-    enable() {
-        throw notOverwritten();
-    }
-    /**
-     * disable update handlers triggering
-     */
-    disable() {
-        throw notOverwritten();
-    }
 }

package/lib/functional/components.js

@@ -0,0 +1,17 @@
+import { Fragment } from "../node/node";
+import { current } from "../core/core";
+import { userError } from "../core/errors";
+export function text(text) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    ;
+    current.text(text);
+}
+export function debug(text) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    current.debug(text);
+}
+export function predefine(slot, predefined) {
+    return slot || predefined;
+}

package/lib/functional/merge.js

@@ -0,0 +1,41 @@
+import { IValue } from "../core/ivalue";
+export function merge(main, ...targets) {
+    function refactorClass(obj) {
+        if (Array.isArray(obj.class)) {
+            const out = {
+                $: []
+            };
+            obj.class.forEach(item => {
+                if (item instanceof IValue) {
+                    out.$.push(item);
+                }
+                else if (typeof item === 'string') {
+                    out[item] = true;
+                }
+                else if (typeof item === 'object') {
+                    Object.assign(out, item);
+                }
+            });
+            obj.class = out;
+        }
+    }
+    refactorClass(main);
+    targets.forEach(target => {
+        Reflect.ownKeys(target).forEach((prop) => {
+            if (!Reflect.has(main, prop)) {
+                main[prop] = target[prop];
+            }
+            else if (typeof main[prop] === 'object' && typeof target[prop] === 'object') {
+                if (prop === 'class') {
+                    refactorClass(target);
+                }
+                if (prop === '$' && Array.isArray(main[prop]) && Array.isArray(target[prop])) {
+                    main.$.push(...target.$);
+                }
+                else {
+                    merge(main[prop], target[prop]);
+                }
+            }
+        });
+    });
+}

package/lib/functional/models.js

@@ -0,0 +1,26 @@
+import { ArrayModel } from "../models/array-model";
+import { MapModel } from "../models/map-model";
+import { SetModel } from "../models/set-model";
+import { ObjectModel } from "../models/object-model";
+import { current } from "../core/core";
+import { userError } from "../core/errors";
+export function arrayModel(arr = []) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new ArrayModel(arr)).proxy();
+}
+export function mapModel(map = []) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new MapModel(map));
+}
+export function setModel(arr = []) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new SetModel(arr));
+}
+export function objectModel(obj = {}) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new ObjectModel(obj));
+}

package/lib/functional/options.js

@@ -0,0 +1 @@
+export {};

package/lib/functional/reactivity.js

@@ -0,0 +1,33 @@
+import { IValue } from "../core/ivalue";
+import { Pointer } from "../value/pointer";
+import { current } from "../core/core";
+export function ref(value) {
+    const ref = current.ref(value);
+    return [ref, (value) => ref.$ = value];
+}
+export function mirror(value) {
+    return current.mirror(value);
+}
+export function forward(value) {
+    return current.forward(value);
+}
+export function point(value) {
+    return current.point(value);
+}
+export function expr(func, ...values) {
+    return current.expr(func, ...values);
+}
+export function watch(func, ...values) {
+    current.watch(func, ...values);
+}
+export function valueOf(value) {
+    return value.$;
+}
+export function setValue(ref, value) {
+    if (ref instanceof Pointer && value instanceof IValue) {
+        ref.point(value);
+    }
+    else {
+        ref.$ = value instanceof IValue ? value.$ : value;
+    }
+}