vasille 2.2.2 → 2.3.2

package/lib-node/node/watch.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Watch = void 0;
+const node_1 = require("./node");
+/**
+ * Watch Node
+ * @class Watch
+ * @extends Fragment
+ */
+class Watch extends node_1.Fragment {
+    compose(input) {
+        this.watch((value) => {
+            this.children.forEach(child => {
+                child.$destroy();
+            });
+            this.children.clear();
+            this.lastChild = null;
+            input.slot && input.slot(this, value);
+        }, input.model);
+        input.slot(this, input.model.$);
+    }
+}
+exports.Watch = Watch;

package/lib-node/spec/html.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib-node/spec/react.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib-node/spec/svg.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib-node/value/expression.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Expression = void 0;
+const reference_js_1 = require("./reference.js");
+const ivalue_1 = require("../core/ivalue");
+/**
+ * Bind some values to one expression
+ * @class Expression
+ * @extends IValue
+ */
+class Expression extends ivalue_1.IValue {
+    /**
+     * Creates a function bounded to N values
+     * @param func {Function} the function to bound
+     * @param values
+     * @param link {Boolean} links immediately if true
+     */
+    constructor(func, link, ...values) {
+        super(false);
+        /**
+         * Expression will link different handler for each value of list
+         */
+        this.linkedFunc = [];
+        const handler = (i) => {
+            if (i != null) {
+                this.valuesCache[i] = this.values[i].$;
+            }
+            this.sync.$ = func.apply(this, this.valuesCache);
+        };
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        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++)));
+        });
+        this.values = values;
+        this.func = handler;
+        if (link) {
+            this.$enable();
+        }
+        else {
+            handler();
+        }
+        this.$seal();
+    }
+    get $() {
+        return this.sync.$;
+    }
+    set $(value) {
+        this.sync.$ = value;
+    }
+    $on(handler) {
+        this.sync.$on(handler);
+        return this;
+    }
+    $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;
+    }
+    $disable() {
+        if (this.isEnabled) {
+            for (let i = 0; i < this.values.length; i++) {
+                this.values[i].$off(this.linkedFunc[i]);
+            }
+            this.isEnabled = false;
+        }
+        return this;
+    }
+    $destroy() {
+        this.$disable();
+        this.values.splice(0);
+        this.valuesCache.splice(0);
+        this.linkedFunc.splice(0);
+        super.$destroy();
+    }
+}
+exports.Expression = Expression;

package/lib-node/value/mirror.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mirror = void 0;
+const reference_1 = require("./reference");
+/**
+ * Declares a notifiable bind to a value
+ * @class Mirror
+ * @extends IValue
+ * @version 2
+ */
+class Mirror extends reference_1.Reference {
+    /**
+     * Constructs a notifiable bind to a value
+     * @param value {IValue} is initial value
+     * @param forwardOnly {boolean} ensure forward only synchronization
+     */
+    constructor(value, forwardOnly = false) {
+        super(value.$);
+        this.$handler = (v) => {
+            this.$ = v;
+        };
+        this.$pointedValue = value;
+        this.$forwardOnly = forwardOnly;
+        value.$on(this.$handler);
+        this.$seal();
+    }
+    get $() {
+        // this is a ts bug
+        // eslint-disable-next-line
+        // @ts-ignore
+        return super.$;
+    }
+    set $(v) {
+        if (!this.$forwardOnly) {
+            this.$pointedValue.$ = 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();
+    }
+}
+exports.Mirror = Mirror;

package/lib-node/value/pointer.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pointer = void 0;
+const mirror_1 = require("./mirror");
+/**
+ * r/w pointer to a value
+ * @class Pointer
+ * @extends Mirror
+ */
+class Pointer extends mirror_1.Mirror {
+    /**
+     * @param value {IValue} value to point
+     * @param forwardOnly {boolean} forward only data flow
+     */
+    constructor(value, forwardOnly = false) {
+        super(value, forwardOnly);
+    }
+    /**
+     * Point a new ivalue
+     * @param value {IValue} value to point
+     */
+    set $$(value) {
+        if (this.$pointedValue !== value) {
+            this.$disable();
+            this.$pointedValue = value;
+            this.$enable();
+        }
+    }
+}
+exports.Pointer = Pointer;

package/lib-node/value/reference.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reference = void 0;
+const ivalue_1 = require("../core/ivalue");
+/**
+ * Declares a notifiable value
+ * @class Reference
+ * @extends IValue
+ */
+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();
+    }
+    get $() {
+        return this.$value;
+    }
+    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;
+        }
+    }
+    $disable() {
+        this.isEnabled = false;
+    }
+    $on(handler) {
+        this.$onchange.add(handler);
+    }
+    $off(handler) {
+        this.$onchange.delete(handler);
+    }
+    $destroy() {
+        super.$destroy();
+        this.$onchange.clear();
+    }
+}
+exports.Reference = Reference;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayView = void 0;
+const base_view_1 = require("./base-view");
+/**
+ * Represents a view of an array model
+ * @class ArrayView
+ * @extends BaseView
+ */
+class ArrayView extends base_view_1.BaseView {
+    createChild(input, id, item, before) {
+        super.createChild(input, item, item, before || this.$.nodes.get(id));
+    }
+    compose(input) {
+        super.compose(input);
+        input.model.forEach(item => {
+            this.createChild(input, item, item);
+        });
+    }
+}
+exports.ArrayView = ArrayView;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseView = exports.BaseViewPrivate = 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
+ * @extends RepeatNode
+ * @implements IModel
+ */
+class BaseView extends repeat_node_1.RepeatNode {
+    constructor(input, $) {
+        super(input, $ || new BaseViewPrivate);
+    }
+    compose(input) {
+        const $ = this.$;
+        $.addHandler = (id, item) => {
+            this.createChild(input, id, item);
+        };
+        $.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);
+        });
+    }
+}
+exports.BaseView = BaseView;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapView = void 0;
+const base_view_1 = require("./base-view");
+/**
+ * Create a children pack for each map value
+ * @class MapView
+ * @extends BaseView
+ */
+class MapView extends base_view_1.BaseView {
+    compose(input) {
+        super.compose(input);
+        input.model.forEach((value, key) => {
+            this.createChild(input, key, value);
+        });
+    }
+}
+exports.MapView = MapView;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectView = void 0;
+const base_view_1 = require("./base-view");
+/**
+ * Create a children pack for each object field
+ * @class ObjectView
+ * @extends BaseView
+ */
+class ObjectView extends base_view_1.BaseView {
+    compose(input) {
+        super.compose(input);
+        const obj = input.model.values;
+        for (const key in obj) {
+            this.createChild(input, key, obj[key]);
+        }
+        super.ready();
+    }
+}
+exports.ObjectView = ObjectView;

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RepeatNode = exports.RepeatNodePrivate = void 0;
+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, $);
+        /**
+         * If false will use timeout executor, otherwise the app executor
+         */
+        this.freezeUi = true;
+    }
+    createChild(opts, id, item, before) {
+        const node = new node_1.Fragment({});
+        this.destroyChild(id, item);
+        if (before) {
+            this.children.add(node);
+            before.insertBefore(node);
+        }
+        else {
+            const lastChild = this.lastChild;
+            if (lastChild) {
+                lastChild.insertAfter(node);
+            }
+            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);
+    }
+    destroyChild(id, item) {
+        const $ = this.$;
+        const child = $.nodes.get(id);
+        if (child) {
+            child.remove();
+            child.$destroy();
+            this.$.nodes.delete(id);
+            this.children.delete(child);
+        }
+    }
+}
+exports.RepeatNode = RepeatNode;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetView = void 0;
+const base_view_1 = require("./base-view");
+/**
+ * Create a children pack for each set value
+ * @class SetView
+ * @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);
+        });
+    }
+}
+exports.SetView = SetView;

package/package.json

@@ -3,26 +3,30 @@
   "description": "Vasille - Safe. Fast. Powerful.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "2.2.2",
+  "version": "2.3.2",
   "exports": {
     "import": "./lib/index.js",
-    "browser": "./lib/index.js"
+    "browser": "./lib/index.js",
+    "node": "./lib-node/index.js",
+    "require": "./lib-node/index.js"
   },
   "unpkg": "./cdn/es2015.js",
   "scripts": {
     "build": "tsc --build tsconfig-build.json",
     "build-es5": "tsc --build tsconfig-build-es5.json",
+    "build-node": "tsc --build tsconfig-build-node.json",
     "test": "jest",
     "test-coverage": "jest --coverage",
     "update-types": "tsc --build tsconfig-types.json",
-    "update-flowjs": "node flow-typed/create.js",
-    "cdn-create": "node cdn/create.js",
+    "update-flowjs": "node flow-typed/create.cjs",
+    "cdn-create": "node cdn/create.cjs",
     "es5-check": "es-check es5 cdn/*es5.js"
   },
   "repository": {
     "type": "git",
     "url": "https://gitlab.com/vasille-js/vasille-js.git"
   },
+  "type": "module",
   "keywords": [
     "front-end",
     "web",
@@ -34,22 +38,22 @@
   "author": "Vasile Lixcode <lixcode@vivaldi.net> (https://t.me/lixcode)",
   "license": "MIT",
   "devDependencies": {
-    "@types/debug": "latest",
-    "@types/eslint": "latest",
-    "@types/eslint-scope": "latest",
-    "@types/estree": "latest",
-    "@types/events": "latest",
-    "@types/jest": "latest",
-    "@types/jsdom": "latest",
-    "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "latest",
+    "@types/debug": "4.1.7",
+    "@types/eslint": "8.4.1",
+    "@types/eslint-scope": "3.7.3",
+    "@types/estree": "0.0.51",
+    "@types/events": "3.0.0",
+    "@types/jest": "27.4.1",
+    "@types/jsdom": "16.2.14",
+    "@types/node": "17.0.23",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
     "es-check": "latest",
     "eslint": "latest",
     "flow-bin": "latest",
-    "jest": "latest",
-    "jsdom": "latest",
-    "ts-jest": "latest",
+    "jest": "27.5.1",
+    "jsdom": "19.0.0",
+    "ts-jest": "27.1.4",
     "typescript": "latest"
   }
 }

package/types/core/core.d.ts

@@ -4,7 +4,7 @@ import { Expression, KindOfIValue } from "../value/expression";
 import { Pointer } from "../value/pointer";
 import { Mirror } from "../value/mirror";
 import { IModel } from "../models/model";
-import { Options } from "../functional/options";
+import { FragmentOptions } from "../functional/options";
 export declare let current: Reactive | null;
 /**
  * Private stuff of a reactive object
@@ -55,7 +55,7 @@ export declare class ReactivePrivate extends Destroyable {
  * @class Reactive
  * @extends Destroyable
  */
-export declare class Reactive<T extends Options = Options> extends Destroyable {
+export declare class Reactive<T extends FragmentOptions = FragmentOptions> extends Destroyable {
     /**
      * Private stuff
      * @protected
@@ -121,10 +121,10 @@ export declare class Reactive<T extends Options = Options> extends Destroyable {
      * @param onOn {function} on hide feedback
      */
     bindAlive(cond: IValue<boolean>, onOff?: () => void, onOn?: () => void): this;
-    init(): void;
+    init(): T['return'];
     protected applyOptions(input: T): void;
     protected applyOptionsNow(): void;
-    protected compose(input: T): void;
+    protected compose(input: T): T['return'];
     protected composeNow(): void;
     runFunctional<F extends (...args: any) => any>(f: F, ...args: Parameters<F>): ReturnType<F>;
     runOnDestroy(func: () => void): void;

package/types/functional/options.d.ts

@@ -1,13 +1,13 @@
 import type { IValue } from "../core/ivalue";
 import { AcceptedTagsMap, AcceptedTagsSpec } from "../spec/react";
 import type { Fragment } from "../node/node";
-export interface Options {
+export interface FragmentOptions {
     "v:is"?: Record<string, IValue<any>>;
     return?: any;
     slot?: (node: Fragment, ...args: any[]) => void;
 }
 export declare type AttrType<T> = IValue<T | string | null> | T | string | null | undefined;
-export interface TagOptions<T extends keyof AcceptedTagsMap> extends Options {
+export interface TagOptions<T extends keyof AcceptedTagsMap> extends FragmentOptions {
     "v:attr"?: {
         [K in keyof AcceptedTagsSpec[T]['attrs']]?: AttrType<AcceptedTagsSpec[T]['attrs'][K]>;
     } & Record<string, AttrType<number | boolean>>;

package/types/index.d.ts

@@ -1,14 +1,14 @@
 import { Destroyable } from "./core/destroyable";
-import { Reactive } from "./core/core";
+import { current, Reactive } from "./core/core";
 import { IValue } from "./core/ivalue";
 import { ArrayModel } from "./models/array-model";
 import { Listener } from "./models/listener";
 import { MapModel } from "./models/map-model";
 import { ObjectModel } from "./models/object-model";
 import { SetModel } from "./models/set-model";
-import { App, AppNode } from "./node/app";
-import { Component, Extension, Fragment, INode, Tag } from "./node/node";
-import { Expression } from "./value/expression";
+import { App, AppNode, AppOptions, Portal } from "./node/app";
+import { Component, Extension, Fragment, INode, Tag, TagOptionsWithSlot } from "./node/node";
+import { Expression, KindOfIValue } from "./value/expression";
 import { Mirror } from "./value/mirror";
 import { Pointer } from "./value/pointer";
 import { Reference } from "./value/reference";
@@ -18,6 +18,9 @@ import { MapView } from "./views/map-view";
 import { ObjectView } from "./views/object-view";
 import { SetView } from "./views/set-view";
 import { Binding } from "./binding/binding";
-import { Options, TagOptions } from "./functional/options";
-import * as libV from "./v/index";
-export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Expression, Binding, Reactive, Options, TagOptions, libV };
+import { FragmentOptions, TagOptions } from "./functional/options";
+import { AcceptedTagsMap, AcceptedTagsSpec } from "./spec/react";
+import { userError } from "./core/errors";
+import { ListenableModel } from "./models/model";
+import { Watch } from "./node/watch";
+export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Portal, Expression, Binding, Reactive, Watch, FragmentOptions, TagOptions, AppOptions, AcceptedTagsSpec, AcceptedTagsMap, userError, current, KindOfIValue, ListenableModel, TagOptionsWithSlot, };

package/types/models/array-model.d.ts

@@ -11,7 +11,6 @@ export declare class ArrayModel<T> extends Array<T> implements ListenableModel<T
      * @param data {Array} input data
      */
     constructor(data?: Array<T>);
-    proxy(): ArrayModel<T>;
     /**
      * Gets the last item of array
      * @return {*} the last item of array
@@ -99,6 +98,7 @@ export declare class ArrayModel<T> extends Array<T> implements ListenableModel<T
      * @return {this}
      */
     removeOne(v: T): this;
+    replace(at: number, with_: T): this;
     enableReactivity(): void;
     disableReactivity(): void;
 }

package/types/models/object-model.d.ts

@@ -27,12 +27,12 @@ export declare class ObjectModel<T> extends Object implements ListenableModel<st
      * @return {ObjectModel} a pointer to this
      */
     set(key: string, v: T): this;
+    get values(): Record<string, T>;
     /**
      * Deletes an object property
      * @param key {string} property name
      */
     delete(key: string): void;
-    proxy(): Record<string, T>;
     enableReactivity(): void;
     disableReactivity(): void;
 }