vasille 2.3.9 → 3.0.2

package/lib-node/node/watch.js

@@ -8,17 +8,19 @@ const node_1 = require("./node");
  * @extends Fragment
  */
 class Watch extends node_1.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);
     }
 }
 exports.Watch = Watch;

package/lib-node/tsconfig-build-node.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/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-node/value/expression.js

@@ -15,14 +15,14 @@ class Expression extends ivalue_1.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);
@@ -32,18 +32,13 @@ class Expression extends ivalue_1.IValue {
         this.valuesCache = values.map(item => item.$);
         this.sync = new reference_js_1.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.$;
@@ -51,40 +46,20 @@ class Expression extends ivalue_1.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();
     }
 }
 exports.Expression = Expression;

package/lib-node/value/mirror.js

@@ -16,13 +16,12 @@ class Mirror extends reference_1.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
@@ -31,30 +30,17 @@ class Mirror extends reference_1.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();
     }
 }
 exports.Mirror = Mirror;

package/lib-node/value/pointer.js

@@ -1,30 +1,79 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pointer = void 0;
-const mirror_1 = require("./mirror");
+exports.OwningPointer = exports.Pointer = void 0;
+const ivalue_1 = require("../core/ivalue");
+const reference_1 = require("./reference");
 /**
  * r/w pointer to a value
  * @class Pointer
- * @extends Mirror
+ * @extends IValue
  */
-class Pointer extends mirror_1.Mirror {
+class Pointer extends ivalue_1.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_1.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_1.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);
+    }
 }
 exports.Pointer = Pointer;
+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();
+    }
+}
+exports.OwningPointer = OwningPointer;

package/lib-node/value/reference.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Reference = void 0;
 const ivalue_1 = require("../core/ivalue");
+const safety_1 = require("../functional/safety");
 /**
  * Declares a notifiable value
  * @class Reference
@@ -12,44 +13,38 @@ class Reference extends ivalue_1.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) {
+                (0, safety_1.reportError)(e);
+            }
+        });
     }
 }
 exports.Reference = Reference;

package/lib-node/views/array-view.js

@@ -9,14 +9,13 @@ const base_view_1 = require("./base-view");
  */
 class ArrayView extends base_view_1.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 {};
     }
 }
 exports.ArrayView = ArrayView;

package/lib-node/views/base-view.js

@@ -1,19 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseView = exports.BaseViewPrivate = void 0;
+exports.BaseView = void 0;
 const repeat_node_1 = require("./repeat-node");
-/**
- * Private part of BaseView
- * @class BaseViewPrivate
- * @extends RepeatNodePrivate
- */
-class BaseViewPrivate extends repeat_node_1.RepeatNodePrivate {
-    constructor() {
-        super();
-        this.$seal();
-    }
-}
-exports.BaseViewPrivate = BaseViewPrivate;
 /**
  * Base class of default views
  * @class BaseView
@@ -21,24 +9,23 @@ exports.BaseViewPrivate = BaseViewPrivate;
  * @implements IModel
  */
 class BaseView extends repeat_node_1.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();
     }
 }
 exports.BaseView = BaseView;

package/lib-node/views/map-view.js

@@ -8,12 +8,11 @@ const base_view_1 = require("./base-view");
  * @extends BaseView
  */
 class MapView extends base_view_1.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 {};
     }
 }
 exports.MapView = MapView;

package/lib-node/views/repeat-node.js

@@ -1,43 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RepeatNode = exports.RepeatNodePrivate = void 0;
+exports.RepeatNode = void 0;
+const config_1 = require("../core/config");
 const node_1 = require("../node/node");
-/**
- * Private part of repeat node
- * @class RepeatNodePrivate
- * @extends INodePrivate
- */
-class RepeatNodePrivate extends node_1.INodePrivate {
-    constructor() {
-        super();
-        /**
-         * Children node hash
-         * @type {Map}
-         */
-        this.nodes = new Map();
-        this.$seal();
-    }
-    $destroy() {
-        this.nodes.clear();
-        super.$destroy();
-    }
-}
-exports.RepeatNodePrivate = RepeatNodePrivate;
 /**
  * Repeat node repeats its children
  * @class RepeatNode
  * @extends Fragment
  */
 class RepeatNode extends node_1.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 node_1.Fragment({});
+        const _id = id && typeof id === "object" && "id" in id ? id.id : config_1.config.debugUi ? JSON.stringify(id) : id;
+        const node = new node_1.Fragment({}, `${_id}`);
+        node.parent = this;
         this.destroyChild(id, item);
         if (before) {
             this.children.add(node);
@@ -51,21 +34,20 @@ class RepeatNode extends node_1.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();
+    }
 }
 exports.RepeatNode = RepeatNode;

package/lib-node/views/set-view.js

@@ -8,11 +8,13 @@ const base_view_1 = require("./base-view");
  * @extends BaseView
  */
 class SetView extends base_view_1.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/package.json

@@ -3,18 +3,17 @@
   "description": "Vasille - Safe. Simple. Powerful.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "2.3.9",
+  "version": "3.0.2",
   "exports": {
     "import": "./lib/index.js",
     "browser": "./lib/index.js",
     "node": "./lib-node/index.js",
     "require": "./lib-node/index.js"
   },
-  "unpkg": "./cdn/es2015.js",
   "scripts": {
     "prepack": "cp -f ../README.md ./README.md",
-    "prettier": "npx prettier src test --check",
-    "build": "tsc --build tsconfig-build.json",
+    "prettier": "npx prettier src test --write",
+    "build": "tsc --build tsconfig.json",
     "build-node": "tsc --build tsconfig-build-node.json",
     "test": "jest",
     "test-coverage": "jest --coverage",
@@ -23,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://gitlab.com/vasille-js/vasille-js.git"
+    "url": "git+https://github.com/vasille-js/vasille-js.git"
   },
   "type": "module",
   "keywords": [
@@ -34,8 +33,12 @@
     "simple",
     "poweful"
   ],
-  "author": "Vasile Lixcode <lixcode@vivaldi.net> (https://t.me/lixcode)",
+  "author": "lixcode",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vasille-js/vasille-js/issues"
+  },
+  "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "devDependencies": {
     "@types/debug": "4.1.12",
     "@types/eslint": "9.6.1",

package/types/binding/attribute.d.ts

@@ -6,12 +6,12 @@ import type { IValue } from "../core/ivalue";
  * @class AttributeBinding
  * @extends Binding
  */
-export declare class AttributeBinding extends Binding<string | number | boolean | null> {
+export declare class AttributeBinding extends Binding<string | number | boolean | null | undefined> {
     /**
      * 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: INode, name: string, value: IValue<string | number | boolean | null>);
+    constructor(node: INode, name: string, value: IValue<string | number | boolean | null | undefined>);
 }

package/types/binding/binding.d.ts

@@ -17,5 +17,5 @@ export declare class Binding<T> extends Destroyable {
     /**
      * Just clear bindings
      */
-    $destroy(): void;
+    destroy(): void;
 }

package/types/binding/style.d.ts

@@ -1,17 +1,18 @@
 import { Binding } from "./binding";
 import type { INode } from "../node/node";
 import type { IValue } from "../core/ivalue";
+export declare function stringifyStyleValue(value: string | number | number[]): string;
 /**
  * Describes a style attribute binding
  * @class StyleBinding
  * @extends Binding
  */
-export declare class StyleBinding extends Binding<string> {
+export declare class StyleBinding extends Binding<string | number | number[]> {
     /**
      * Constructs a style binding attribute
      * @param node {INode} the vasille node
      * @param name {string} the name of style property
      * @param value {IValue} the value to bind
      */
-    constructor(node: INode, name: string, value: IValue<string>);
+    constructor(node: INode, name: string, value: IValue<string | number | number[]>);
 }

package/types/core/config.d.ts

@@ -0,0 +1,3 @@
+export declare const config: {
+    debugUi: boolean;
+};