vasille 1.2.9 → 2.0.3

package/lib/node/watch.js

@@ -0,0 +1,27 @@
+import { Fragment } from "./node";
+import { Slot } from "../core/slot";
+/**
+ * Watch Node
+ * @class Watch
+ * @extends Fragment
+ */
+export class Watch extends Fragment {
+    constructor() {
+        super();
+        this.slot = new Slot;
+        this.model = this.$ref(null);
+        this.$seal();
+    }
+    $createWatchers() {
+        this.$watch((value) => {
+            this.$children.forEach(child => {
+                child.$destroy();
+            });
+            this.$children.splice(0);
+            this.slot.release(this, value);
+        }, this.model);
+    }
+    $compose() {
+        this.slot.release(this, this.model.$);
+    }
+}

package/lib/value/expression.js

@@ -0,0 +1,83 @@
+import { Reference } from "./reference.js";
+import { IValue } from "../core/ivalue";
+/**
+ * Bind some values to one expression
+ * @class Expression
+ * @extends IValue
+ */
+export class Expression extends IValue {
+    constructor(func, link, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+        super(false);
+        /**
+         * Expression will link different handler for each value of list
+         */
+        this.linkedFunc = [];
+        const values = [v1, v2, v3, v4, v5, v6, v7, v8, v9].filter(v => v instanceof IValue);
+        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(iValue => iValue.$);
+        this.sync = new Reference(func.apply(this, this.valuesCache));
+        let i = 0;
+        values.forEach(() => {
+            this.linkedFunc.push(handler.bind(this, Number(i++)));
+        });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        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();
+    }
+}

package/lib/value/mirror.js

@@ -0,0 +1,58 @@
+import { Reference } from "./reference";
+/**
+ * Declares a notifiable bind to a value
+ * @class Mirror
+ * @extends IValue
+ * @version 2
+ */
+export class Mirror extends 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) {
+        // this is a ts bug
+        // eslint-disable-next-line
+        // @ts-ignore
+        super.$ = v;
+        if (!this.forwardOnly) {
+            this.pointedValue.$ = v;
+        }
+    }
+    enable() {
+        if (!this.isEnabled) {
+            this.isEnabled = true;
+            this.pointedValue.on(this.handler);
+            this.$ = this.pointedValue.$;
+        }
+        return this;
+    }
+    disable() {
+        if (this.isEnabled) {
+            this.pointedValue.off(this.handler);
+            this.isEnabled = false;
+        }
+        return this;
+    }
+    $destroy() {
+        this.disable();
+        super.$destroy();
+    }
+}

package/lib/value/pointer.js

@@ -0,0 +1,26 @@
+import { Mirror } from "./mirror";
+/**
+ * r/w pointer to a value
+ * @class Pointer
+ * @extends Mirror
+ */
+export class Pointer extends 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
+     */
+    point(value) {
+        if (this.pointedValue !== value) {
+            this.disable();
+            this.pointedValue = value;
+            this.enable();
+        }
+    }
+}

package/lib/value/reference.js

@@ -0,0 +1,55 @@
+import { IValue } from "../core/ivalue";
+/**
+ * Declares a notifiable value
+ * @class Reference
+ * @extends IValue
+ */
+export class Reference extends 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;
+        }
+        return this;
+    }
+    disable() {
+        this.isEnabled = false;
+        return this;
+    }
+    on(handler) {
+        this.onchange.add(handler);
+        return this;
+    }
+    off(handler) {
+        this.onchange.delete(handler);
+        return this;
+    }
+    $destroy() {
+        super.$destroy();
+        this.onchange.clear();
+    }
+}

package/lib/views/array-view.js

@@ -0,0 +1,21 @@
+import { BaseView } from "./base-view";
+/**
+ * Represents a view of an array model
+ * @class ArrayView
+ * @extends BaseView
+ */
+export class ArrayView extends BaseView {
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    createChild(id, item, before) {
+        super.createChild(item, item, before || this.$.nodes.get(id));
+    }
+    $ready() {
+        this.model.forEach(item => {
+            this.createChild(item, item);
+        });
+        super.$ready();
+    }
+}

package/lib/views/base-view.js

@@ -0,0 +1,49 @@
+import { RepeatNode, RepeatNodePrivate } from "./repeat-node";
+/**
+ * Private part of BaseView
+ * @class BaseViewPrivate
+ * @extends RepeatNodePrivate
+ */
+export class BaseViewPrivate extends RepeatNodePrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+}
+/**
+ * Base class of default views
+ * @class BaseView
+ * @extends RepeatNode
+ * @implements IModel
+ */
+export class BaseView extends RepeatNode {
+    constructor($1) {
+        super($1 || new BaseViewPrivate);
+        const $ = this.$;
+        $.addHandler = (id, item) => {
+            this.createChild(id, item);
+        };
+        $.removeHandler = (id, item) => {
+            this.destroyChild(id, item);
+        };
+        this.$seal();
+    }
+    /**
+     * Handle ready event
+     */
+    $ready() {
+        const $ = this.$;
+        this.model.listener.onAdd($.addHandler);
+        this.model.listener.onRemove($.removeHandler);
+        super.$ready();
+    }
+    /**
+     * Handles destroy event
+     */
+    $destroy() {
+        const $ = this.$;
+        this.model.listener.offAdd($.addHandler);
+        this.model.listener.offRemove($.removeHandler);
+        super.$destroy();
+    }
+}

package/lib/views/map-view.js

@@ -0,0 +1,19 @@
+import { BaseView } from "./base-view";
+/**
+ * Create a children pack for each map value
+ * @class MapView
+ * @extends BaseView
+ */
+export class MapView extends BaseView {
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    $ready() {
+        const map = this.model;
+        map.forEach((value, key) => {
+            this.createChild(key, value);
+        });
+        super.$ready();
+    }
+}

package/lib/views/object-view.js

@@ -0,0 +1,19 @@
+import { BaseView } from "./base-view";
+/**
+ * Create a children pack for each object field
+ * @class ObjectView
+ * @extends BaseView
+ */
+export class ObjectView extends BaseView {
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    $ready() {
+        const obj = this.model;
+        for (const key in obj) {
+            this.createChild(key, obj[key]);
+        }
+        super.$ready();
+    }
+}

package/lib/views/repeat-node.js

@@ -0,0 +1,106 @@
+import { Fragment, INodePrivate } from "../node/node";
+import { Slot } from "../core/slot";
+import { timeoutExecutor } from "../core/executor";
+/**
+ * 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();
+    }
+}
+/**
+ * Repeat node repeats its children
+ * @class RepeatNode
+ * @extends Fragment
+ */
+export class RepeatNode extends Fragment {
+    constructor($) {
+        super($ || new RepeatNodePrivate);
+        /**
+         * If false will use timeout executor, otherwise the app executor
+         */
+        this.freezeUi = true;
+        this.slot = new Slot;
+    }
+    createChild(id, item, before) {
+        // TODO: Refactor: remove @ts-ignore
+        const node = new Fragment();
+        // eslint-disable-next-line
+        // @ts-ignore
+        const $ = node.$;
+        this.destroyChild(id, item);
+        if (before) {
+            $.next = before;
+            // eslint-disable-next-line
+            // @ts-ignore
+            $.prev = before.$.prev;
+            // eslint-disable-next-line
+            // @ts-ignore
+            before.$.prev = node;
+            if ($.prev) {
+                // eslint-disable-next-line
+                // @ts-ignore
+                $.prev.$.next = node;
+            }
+            this.$children.splice(this.$children.indexOf(before), 0, node);
+        }
+        else {
+            const lastChild = this.$children[this.$children.length - 1];
+            if (lastChild) {
+                // eslint-disable-next-line
+                // @ts-ignore
+                lastChild.$.next = node;
+            }
+            $.prev = lastChild;
+            this.$children.push(node);
+        }
+        node.$preinit(this.$.app, this);
+        node.$init();
+        const callback = () => {
+            this.slot.release(node, item, id);
+            node.$ready();
+        };
+        if (this.freezeUi) {
+            this.$.app.$run.callCallback(callback);
+        }
+        else {
+            timeoutExecutor.callCallback(callback);
+        }
+        this.$.nodes.set(id, node);
+    }
+    destroyChild(id, item) {
+        const $ = this.$;
+        const child = $.nodes.get(id);
+        if (child) {
+            // eslint-disable-next-line
+            // @ts-ignore
+            const $ = child.$;
+            if ($.prev) {
+                // eslint-disable-next-line
+                // @ts-ignore
+                $.prev.$.next = $.next;
+            }
+            if ($.next) {
+                // eslint-disable-next-line
+                // @ts-ignore
+                $.next.$.prev = $.prev;
+            }
+            child.$destroy();
+            this.$.nodes.delete(id);
+            this.$children.splice(this.$children.indexOf(child), 1);
+        }
+    }
+}

package/lib/views/repeater.js

@@ -0,0 +1,63 @@
+import { RepeatNode, RepeatNodePrivate } from "./repeat-node";
+import { Reference } from "../value/reference";
+/**
+ * Private part of repeater
+ * @class RepeaterPrivate
+ * @extends RepeatNodePrivate
+ */
+export class RepeaterPrivate extends RepeatNodePrivate {
+    constructor() {
+        super();
+        /**
+         * Current count of child nodes
+         */
+        this.currentCount = 0;
+        this.$seal();
+    }
+}
+/**
+ * The simplest repeat node interpretation, repeat children pack a several times
+ * @class Repeater
+ * @extends RepeatNode
+ */
+export class Repeater extends RepeatNode {
+    constructor($) {
+        super($ || new RepeaterPrivate);
+        /**
+         * The count of children
+         */
+        this.count = new Reference(0);
+        this.$seal();
+    }
+    /**
+     * Changes the children count
+     */
+    changeCount(number) {
+        const $ = this.$;
+        if (number > $.currentCount) {
+            for (let i = $.currentCount; i < number; i++) {
+                this.createChild(i, i);
+            }
+        }
+        else {
+            for (let i = $.currentCount - 1; i >= number; i--) {
+                this.destroyChild(i, i);
+            }
+        }
+        $.currentCount = number;
+    }
+    $created() {
+        const $ = this.$;
+        super.$created();
+        $.updateHandler = this.changeCount.bind(this);
+        this.count.on($.updateHandler);
+    }
+    $ready() {
+        this.changeCount(this.count.$);
+    }
+    $destroy() {
+        const $ = this.$;
+        super.$destroy();
+        this.count.off($.updateHandler);
+    }
+}

package/lib/views/set-view.js

@@ -0,0 +1,22 @@
+import { BaseView } from "./base-view";
+/**
+ * Create a children pack for each set value
+ * @class SetView
+ * @extends BaseView
+ */
+export class SetView extends BaseView {
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    $ready() {
+        const $ = this.$;
+        const set = this.model;
+        set.forEach(item => {
+            $.app.$run.callCallback(() => {
+                this.createChild(item, item);
+            });
+        });
+        super.$ready();
+    }
+}

package/package.json

@@ -1,33 +1,35 @@
 {
   "name": "vasille",
-  "description": "The fastest (Vanilla.js based) front-end javascript framework",
+  "description": "Vasille - Safe. Fast. Powerful.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "1.2.9",
+  "version": "2.0.3",
   "exports": {
     "import": "./lib/index.js",
     "browser": "./lib/index.js"
   },
+  "unpkg": "./cdn/es2015.js",
   "scripts": {
-    "flow": "flow",
-    "prebuild": "rm -r lib",
-    "build": "flow-remove-types --pretty --sourcemaps src/ -d lib/",
-    "prepare": "flow-remove-types --pretty --sourcemaps src/ -d lib/",
-    "prepack": "tsc --build tsconfig.json",
-    "test": "echo \"Error: no test specified\"",
-    "predoc": "npm run build",
-    "doc": "jsdoc -a all lib/** DOCHOME.md",
-    "tsc": "tsc --build tsconfig.json"
+    "build": "tsc --build tsconfig-build.json",
+    "build-es5": "tsc --build tsconfig-build-es5.json",
+    "test": "jest",
+    "test-coverage": "jest --coverage",
+    "update-types": "tsc --build tsconfig-types.json",
+    "cdn-create": "node cdn/create.js",
+    "es5-check": "es-check es5 cdn/*es5.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://gitlab.com/vasille.js/vasille.js.git"
+    "url": "https://gitlab.com/vasille-js/vasille-js.git"
   },
   "keywords": [
-    "javascript",
-    "framework",
+    "safe",
+    "fast",
+    "poweful",
     "frontend",
-    "fast"
+    "javascript",
+    "typescript",
+    "flow-js"
   ],
   "author": "Vasile Lixcode <lixcode@vivaldi.net> (https://t.me/lixcode)",
   "license": "MIT",
@@ -37,10 +39,16 @@
     "@types/eslint-scope": "latest",
     "@types/estree": "latest",
     "@types/events": "latest",
+    "@types/jest": "latest",
+    "@types/jsdom": "latest",
     "@types/node": "latest",
-    "flow-bin": "latest",
-    "flow-remove-types": "latest",
-    "jsdoc": "latest",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "es-check": "latest",
+    "eslint": "latest",
+    "jest": "latest",
+    "jsdom": "latest",
+    "ts-jest": "latest",
     "typescript": "latest"
   }
 }

package/types/binding/attribute.d.ts

@@ -0,0 +1,23 @@
+import { Binding } from "./binding";
+import type { INode } from "../node/node";
+import type { IValue } from "../core/ivalue";
+/**
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
+ */
+export declare class AttributeBinding extends Binding<string> {
+    /**
+     * 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>);
+    /**
+     * Generates a function which updates the attribute value
+     * @param name {String} The name of attribute
+     * @returns {Function} a function which will update attribute value
+     */
+    protected bound(name: string): (node: INode, value: string) => void;
+}

package/types/binding/binding.d.ts

@@ -0,0 +1,30 @@
+import { Destroyable } from "../core/destroyable";
+import type { IValue } from "../core/ivalue";
+import type { INode } from "../node/node";
+/**
+ * Describe a common binding logic
+ * @class Binding
+ * @extends Destroyable
+ */
+export declare class Binding<T> extends Destroyable {
+    private binding;
+    private readonly updateFunc;
+    /**
+     * 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: INode, name: string, value: IValue<T>);
+    /**
+     * 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
+     */
+    protected bound(name: string): (node: INode, value: T) => void;
+    /**
+     * Just clear bindings
+     */
+    $destroy(): void;
+}