vasille 2.3.8 → 3.0.0

package/lib/node/watch.js

@@ -5,16 +5,18 @@ import { Fragment } from "./node";
  * @extends Fragment
  */
 export class Watch extends Fragment {
-    compose(input) {
-        this.watch((value) => {
+    constructor(input) {
+        super(input, ":watch");
+    }
+    compose() {
+        this.watch(value => {
+            var _a, _b;
             this.children.forEach(child => {
-                child.$destroy();
+                child.destroy();
             });
             this.children.clear();
-            this.lastChild = null;
-            input.slot && input.slot(this, value);
-        }, input.model);
-        input.slot(this, input.model.$);
-        return {};
+            this.lastChild = undefined;
+            (_b = (_a = this.input).slot) === null || _b === void 0 ? void 0 : _b.call(_a, this, value);
+        }, this.input.model);
     }
 }

package/lib/tsconfig-build.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/binding/attribute.ts","../src/binding/binding.ts","../src/binding/class.ts","../src/binding/style.ts","../src/core/core.ts","../src/core/destroyable.ts","../src/core/errors.ts","../src/core/ivalue.ts","../src/functional/options.ts","../src/models/array-model.ts","../src/models/listener.ts","../src/models/map-model.ts","../src/models/model.ts","../src/models/object-model.ts","../src/models/set-model.ts","../src/node/app.ts","../src/node/node.ts","../src/node/watch.ts","../src/spec/html.ts","../src/spec/react.ts","../src/spec/svg.ts","../src/value/expression.ts","../src/value/mirror.ts","../src/value/pointer.ts","../src/value/reference.ts","../src/views/array-view.ts","../src/views/base-view.ts","../src/views/map-view.ts","../src/views/object-view.ts","../src/views/repeat-node.ts","../src/views/set-view.ts"],"version":"5.6.2"}
+{"root":["../src/index.ts","../src/binding/attribute.ts","../src/binding/binding.ts","../src/binding/class.ts","../src/binding/style.ts","../src/core/core.ts","../src/core/destroyable.ts","../src/core/errors.ts","../src/core/ivalue.ts","../src/functional/options.ts","../src/functional/safety.ts","../src/models/array-model.ts","../src/models/listener.ts","../src/models/map-model.ts","../src/models/model.ts","../src/models/object-model.ts","../src/models/set-model.ts","../src/node/app.ts","../src/node/node.ts","../src/node/watch.ts","../src/spec/html.ts","../src/spec/react.ts","../src/spec/svg.ts","../src/value/expression.ts","../src/value/mirror.ts","../src/value/pointer.ts","../src/value/reference.ts","../src/views/array-view.ts","../src/views/base-view.ts","../src/views/map-view.ts","../src/views/object-view.ts","../src/views/repeat-node.ts","../src/views/set-view.ts"],"version":"5.6.2"}

package/lib/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/binding/attribute.ts","../src/binding/binding.ts","../src/binding/class.ts","../src/binding/style.ts","../src/core/config.ts","../src/core/core.ts","../src/core/destroyable.ts","../src/core/errors.ts","../src/core/ivalue.ts","../src/functional/options.ts","../src/functional/safety.ts","../src/models/array-model.ts","../src/models/listener.ts","../src/models/map-model.ts","../src/models/model.ts","../src/models/set-model.ts","../src/node/app.ts","../src/node/node.ts","../src/node/watch.ts","../src/value/expression.ts","../src/value/pointer.ts","../src/value/reference.ts","../src/views/array-view.ts","../src/views/base-view.ts","../src/views/map-view.ts","../src/views/repeat-node.ts","../src/views/set-view.ts"],"version":"5.6.2"}

package/lib/value/expression.js

@@ -12,14 +12,14 @@ export class Expression extends IValue {
      * @param values
      * @param link {Boolean} links immediately if true
      */
-    constructor(func, link, ...values) {
-        super(false);
+    constructor(func, ...values) {
+        super();
         /**
-         * Expression will link different handler for each value of list
+         * Expression will link different handler for each value of the list
          */
         this.linkedFunc = [];
         const handler = (i) => {
-            if (i != null) {
+            if (typeof i === "number") {
                 this.valuesCache[i] = this.values[i].$;
             }
             this.sync.$ = func.apply(this, this.valuesCache);
@@ -29,18 +29,13 @@ export class Expression extends IValue {
         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++)));
+        values.forEach(value => {
+            const updater = handler.bind(this, Number(i++));
+            this.linkedFunc.push(updater);
+            value.on(updater);
         });
         this.values = values;
         this.func = handler;
-        if (link) {
-            this.$enable();
-        }
-        else {
-            handler();
-        }
-        this.$seal();
     }
     get $() {
         return this.sync.$;
@@ -48,39 +43,19 @@ export class Expression extends IValue {
     set $(value) {
         this.sync.$ = value;
     }
-    $on(handler) {
-        this.sync.$on(handler);
-        return this;
+    on(handler) {
+        this.sync.on(handler);
     }
-    $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;
+    off(handler) {
+        this.sync.off(handler);
     }
-    $disable() {
-        if (this.isEnabled) {
-            for (let i = 0; i < this.values.length; i++) {
-                this.values[i].$off(this.linkedFunc[i]);
-            }
-            this.isEnabled = false;
+    destroy() {
+        for (let i = 0; i < this.values.length; i++) {
+            this.values[i].off(this.linkedFunc[i]);
         }
-        return this;
-    }
-    $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,12 @@ 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.value = value;
+        this.forward = forwardOnly;
+        value.on(this.handler);
     }
     get $() {
         // this is a ts bug
@@ -28,29 +27,16 @@ export class Mirror extends Reference {
         return super.$;
     }
     set $(v) {
-        if (!this.$forwardOnly) {
-            this.$pointedValue.$ = v;
+        if (!this.forward) {
+            this.value.$ = 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.$;
-        }
-    }
-    $disable() {
-        if (this.isEnabled) {
-            this.$pointedValue.$off(this.$handler);
-            this.isEnabled = false;
-        }
-    }
-    $destroy() {
-        this.$disable();
-        super.$destroy();
+    destroy() {
+        this.value.off(this.handler);
+        super.destroy();
     }
 }

package/lib/value/pointer.js

@@ -1,26 +1,74 @@
-import { Mirror } from "./mirror";
+import { IValue } from "../core/ivalue";
+import { Reference } from "./reference";
 /**
  * r/w pointer to a value
  * @class Pointer
- * @extends Mirror
+ * @extends IValue
  */
-export class Pointer extends Mirror {
+export class Pointer extends IValue {
     /**
-     * @param value {IValue} value to point
-     * @param forwardOnly {boolean} forward only data flow
+     * Constructs a notifiable bind to a value
+     * @param value {IValue} is initial valu
      */
-    constructor(value, forwardOnly = false) {
-        super(value, forwardOnly);
+    constructor(value) {
+        super();
+        this.handler = (v) => {
+            this.reference.$ = v;
+        };
+        this.target = value;
+        this.reference = new Reference(value.$);
+        value.on(this.handler);
     }
-    /**
-     * Point a new ivalue
-     * @param value {IValue} value to point
-     */
-    set $$(value) {
-        if (this.$pointedValue !== value) {
-            this.$disable();
-            this.$pointedValue = value;
-            this.$enable();
+    get $() {
+        return this.reference.$;
+    }
+    set $(v) {
+        var _a;
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.off(this.handler);
+        this.target = null;
+        this.reference.$ = v;
+    }
+    get $$() {
+        return this.reference.$;
+    }
+    set $$(v) {
+        if (this.target !== v) {
+            this.disconnectTarget();
+        }
+        if (v instanceof IValue) {
+            this.target = v;
+            this.target.on(this.handler);
+            this.reference.$ = v.$;
+        }
+        else {
+            this.$ = v;
         }
     }
+    on(handler) {
+        this.reference.on(handler);
+    }
+    off(handler) {
+        this.reference.off(handler);
+    }
+    destroy() {
+        var _a;
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.off(this.handler);
+        this.reference.destroy();
+        super.destroy();
+    }
+    disconnectTarget() {
+        var _a;
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.off(this.handler);
+    }
+}
+export class OwningPointer extends Pointer {
+    destroy() {
+        var _a;
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.destroy();
+        super.destroy();
+    }
+    disconnectTarget() {
+        var _a;
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
 }

package/lib/value/reference.js

@@ -1,4 +1,5 @@
 import { IValue } from "../core/ivalue";
+import { reportError } from "../functional/safety";
 /**
  * Declares a notifiable value
  * @class Reference
@@ -9,43 +10,37 @@ export class Reference extends IValue {
      * @param value {any} the initial value
      */
     constructor(value) {
-        super(true);
-        this.$value = value;
-        this.$onchange = new Set;
-        this.$seal();
+        super();
+        this.state = value;
+        this.onChange = new Set();
     }
     get $() {
-        return this.$value;
+        return this.state;
     }
     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;
+        if (this.state !== value) {
+            this.state = value;
+            this.updateDeps(value);
         }
     }
-    $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();
+    updateDeps(value) {
+        this.onChange.forEach(handler => {
+            try {
+                handler(value);
+            }
+            catch (e) {
+                reportError(e);
+            }
+        });
     }
 }

package/lib/views/array-view.js

@@ -6,13 +6,12 @@ import { BaseView } from "./base-view";
  */
 export class ArrayView extends BaseView {
     createChild(input, id, item, before) {
-        super.createChild(input, item, item, before || this.$.nodes.get(id));
+        super.createChild(input, item, item, before || this.nodes.get(id));
     }
-    compose(input) {
-        super.compose(input);
-        input.model.forEach(item => {
-            this.createChild(input, item, item);
+    compose() {
+        super.compose();
+        this.input.model.forEach(item => {
+            this.createChild(this.input, item, item);
         });
-        return {};
     }
 }

package/lib/views/base-view.js

@@ -1,15 +1,4 @@
-import { RepeatNode, RepeatNodePrivate } from "./repeat-node";
-/**
- * Private part of BaseView
- * @class BaseViewPrivate
- * @extends RepeatNodePrivate
- */
-export class BaseViewPrivate extends RepeatNodePrivate {
-    constructor() {
-        super();
-        this.$seal();
-    }
-}
+import { RepeatNode } from "./repeat-node";
 /**
  * Base class of default views
  * @class BaseView
@@ -17,23 +6,22 @@ export class BaseViewPrivate extends RepeatNodePrivate {
  * @implements IModel
  */
 export class BaseView extends RepeatNode {
-    constructor(input, $) {
-        super(input, $ || new BaseViewPrivate);
+    constructor(input, name) {
+        super(input, name);
     }
-    compose(input) {
-        const $ = this.$;
-        $.addHandler = (id, item) => {
-            this.createChild(input, id, item);
+    compose() {
+        this.addHandler = (id, item) => {
+            this.createChild(this.input, id, item);
         };
-        $.removeHandler = (id, item) => {
+        this.removeHandler = (id, item) => {
             this.destroyChild(id, item);
         };
-        input.model.listener.onAdd($.addHandler);
-        input.model.listener.onRemove($.removeHandler);
-        this.runOnDestroy(() => {
-            input.model.listener.offAdd($.addHandler);
-            input.model.listener.offRemove($.removeHandler);
-        });
-        return {};
+        this.input.model.listener.onAdd(this.addHandler);
+        this.input.model.listener.onRemove(this.removeHandler);
+    }
+    destroy() {
+        this.input.model.listener.offAdd(this.addHandler);
+        this.input.model.listener.offRemove(this.removeHandler);
+        super.destroy();
     }
 }

package/lib/views/map-view.js

@@ -5,11 +5,10 @@ import { BaseView } from "./base-view";
  * @extends BaseView
  */
 export class MapView extends BaseView {
-    compose(input) {
-        super.compose(input);
-        input.model.forEach((value, key) => {
-            this.createChild(input, key, value);
+    compose() {
+        super.compose();
+        this.input.model.forEach((value, key) => {
+            this.createChild(this.input, key, value);
         });
-        return {};
     }
 }

package/lib/views/repeat-node.js

@@ -1,39 +1,23 @@
-import { Fragment, INodePrivate } from "../node/node";
-/**
- * Private part of repeat node
- * @class RepeatNodePrivate
- * @extends INodePrivate
- */
-export class RepeatNodePrivate extends INodePrivate {
-    constructor() {
-        super();
-        /**
-         * Children node hash
-         * @type {Map}
-         */
-        this.nodes = new Map();
-        this.$seal();
-    }
-    $destroy() {
-        this.nodes.clear();
-        super.$destroy();
-    }
-}
+import { config } from "../core/config";
+import { Fragment } from "../node/node";
 /**
  * Repeat node repeats its children
  * @class RepeatNode
  * @extends Fragment
  */
 export class RepeatNode extends Fragment {
-    constructor(input, $) {
-        super(input, $);
+    constructor(input, name) {
+        super(input, name);
         /**
-         * If false will use timeout executor, otherwise the app executor
+         * Children node hash
+         * @type {Map}
          */
-        this.freezeUi = true;
+        this.nodes = new Map();
     }
     createChild(opts, id, item, before) {
-        const node = new Fragment({});
+        const _id = id && typeof id === "object" && "id" in id ? id.id : config.debugUi ? JSON.stringify(id) : id;
+        const node = new Fragment({}, `${_id}`);
+        node.parent = this;
         this.destroyChild(id, item);
         if (before) {
             this.children.add(node);
@@ -47,20 +31,19 @@ export class RepeatNode extends Fragment {
             this.children.add(node);
         }
         this.lastChild = node;
-        node.preinit(this.$.app, this);
-        node.init();
         opts.slot && opts.slot(node, item, id);
-        node.ready();
-        this.$.nodes.set(id, node);
+        this.nodes.set(id, node);
     }
     destroyChild(id, item) {
-        const $ = this.$;
-        const child = $.nodes.get(id);
+        const child = this.nodes.get(id);
         if (child) {
             child.remove();
-            child.$destroy();
-            this.$.nodes.delete(id);
+            child.destroy();
+            this.nodes.delete(id);
             this.children.delete(child);
         }
     }
+    destroy() {
+        this.nodes.clear();
+    }
 }

package/lib/views/set-view.js

@@ -5,11 +5,13 @@ import { BaseView } from "./base-view";
  * @extends BaseView
  */
 export class SetView extends BaseView {
-    compose(input) {
-        super.compose(input);
-        const set = input.model;
-        set.forEach(item => {
-            this.createChild(input, item, item);
+    constructor(input) {
+        super(input, ":set-view");
+    }
+    compose() {
+        super.compose();
+        this.input.model.forEach(item => {
+            this.createChild(this.input, item, item);
         });
         return {};
     }

package/lib-node/binding/attribute.js

@@ -18,18 +18,17 @@ class AttributeBinding extends binding_1.Binding {
         super(value);
         this.init((value) => {
             if (value) {
-                if (typeof value === 'boolean') {
-                    node.node.setAttribute(name, "");
+                if (typeof value === "boolean") {
+                    node.element.setAttribute(name, "");
                 }
                 else {
-                    node.node.setAttribute(name, `${value}`);
+                    node.element.setAttribute(name, `${value}`);
                 }
             }
             else {
-                node.node.removeAttribute(name);
+                node.element.removeAttribute(name);
             }
         });
-        this.$seal();
     }
 }
 exports.AttributeBinding = AttributeBinding;

package/lib-node/binding/binding.js

@@ -15,19 +15,18 @@ class Binding extends destroyable_1.Destroyable {
     constructor(value) {
         super();
         this.binding = value;
-        this.$seal();
     }
     init(bounded) {
         this.func = bounded;
-        this.binding.$on(this.func);
+        this.binding.on(this.func);
         this.func(this.binding.$);
     }
     /**
      * Just clear bindings
      */
-    $destroy() {
-        this.binding.$off(this.func);
-        super.$destroy();
+    destroy() {
+        this.binding.off(this.func);
+        super.destroy();
     }
 }
 exports.Binding = Binding;

package/lib-node/binding/class.js

@@ -3,10 +3,10 @@ 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);
+    node.element.classList.add(cl);
 }
 function removeClass(node, cl) {
-    node.node.classList.remove(cl);
+    node.element.classList.remove(cl);
 }
 class StaticClassBinding extends binding_1.Binding {
     constructor(node, name, value) {
@@ -23,7 +23,6 @@ class StaticClassBinding extends binding_1.Binding {
                 this.current = value;
             }
         });
-        this.$seal();
     }
 }
 exports.StaticClassBinding = StaticClassBinding;
@@ -42,7 +41,6 @@ class DynamicalClassBinding extends binding_1.Binding {
                 this.current = value;
             }
         });
-        this.$seal();
     }
 }
 exports.DynamicalClassBinding = DynamicalClassBinding;

package/lib-node/binding/style.js

@@ -1,7 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleBinding = void 0;
+exports.stringifyStyleValue = stringifyStyleValue;
 const binding_1 = require("./binding");
+function stringifyStyleValue(value) {
+    if (value instanceof Array) {
+        return value.map(item => `${item}px`).join(" ");
+    }
+    if (typeof value === "number") {
+        return `${value}px`;
+    }
+    return value;
+}
 /**
  * Describes a style attribute binding
  * @class StyleBinding
@@ -16,12 +26,11 @@ class StyleBinding extends binding_1.Binding {
      */
     constructor(node, name, value) {
         super(value);
-        this.init((value) => {
-            if (node.node instanceof HTMLElement) {
-                node.node.style.setProperty(name, value);
+        this.init(value => {
+            if (node.element instanceof HTMLElement) {
+                node.element.style.setProperty(name, stringifyStyleValue(value));
             }
         });
-        this.$seal();
     }
 }
 exports.StyleBinding = StyleBinding;

package/lib-node/core/config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.config = void 0;
+exports.config = {
+    debugUi: true,
+};