vasille 2.0.4 → 2.2.1

package/lib/node/watch.js

@@ -1,27 +1,19 @@
 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();
+    compose(input) {
+        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.$);
+            this.children.clear();
+            this.lastChild = null;
+            input.slot && input.slot(this, value);
+        }, input.model);
+        input.slot(this, input.model.$);
     }
 }

package/lib/spec/html.js

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

package/lib/spec/react.js

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

package/lib/spec/svg.js

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

package/lib/v/index.js

@@ -0,0 +1,23 @@
+import { debug, text } from "../functional/components";
+import { arrayModel, mapModel, objectModel, setModel } from "../functional/models";
+import { expr, forward, mirror, point, ref, setValue, valueOf, watch } from "../functional/reactivity";
+import { app, component, create, extension, fragment, tag, vx } from "../functional/stack";
+import { current } from "../core/core";
+import { Reference } from "../value/reference";
+import { merge } from "../functional/merge";
+export { debug, arrayModel, mapModel, objectModel, setModel, expr, forward, mirror, point, ref, setValue, valueOf, watch };
+export const v = Object.assign(Object.assign({ ref(value) {
+        return current.ref(value);
+    }, expr: expr, of: valueOf, sv: setValue, alwaysFalse: new Reference(false), app,
+    component,
+    fragment,
+    extension,
+    text,
+    tag,
+    create }, vx), { merge,
+    destructor() {
+        return current.destroy.bind(current);
+    },
+    runOnDestroy(callback) {
+        current.runOnDestroy(callback);
+    } });

package/lib/value/expression.js

@@ -6,13 +6,18 @@ import { IValue } from "../core/ivalue";
  * @extends IValue
  */
 export class Expression extends IValue {
-    constructor(func, link, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+    /**
+     * 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 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].$;
@@ -21,14 +26,12 @@ export class Expression extends IValue {
         };
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        this.valuesCache = values.map(iValue => 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++)));
         });
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         this.values = values;
         this.func = handler;
         if (link) {
@@ -37,7 +40,7 @@ export class Expression extends IValue {
         else {
             handler();
         }
-        this.$seal();
+        this.seal();
     }
     get $() {
         return this.sync.$;
@@ -73,11 +76,11 @@ export class Expression extends IValue {
         }
         return this;
     }
-    $destroy() {
+    destroy() {
         this.disable();
         this.values.splice(0);
         this.valuesCache.splice(0);
         this.linkedFunc.splice(0);
-        super.$destroy();
+        super.destroy();
     }
 }

package/lib/value/mirror.js

@@ -19,7 +19,7 @@ export class Mirror extends Reference {
         this.pointedValue = value;
         this.forwardOnly = forwardOnly;
         value.on(this.handler);
-        this.$seal();
+        this.seal();
     }
     get $() {
         // this is a ts bug
@@ -28,13 +28,13 @@ export class Mirror extends Reference {
         return super.$;
     }
     set $(v) {
+        if (!this.forwardOnly) {
+            this.pointedValue.$ = v;
+        }
         // this is a ts bug
         // eslint-disable-next-line
         // @ts-ignore
         super.$ = v;
-        if (!this.forwardOnly) {
-            this.pointedValue.$ = v;
-        }
     }
     enable() {
         if (!this.isEnabled) {
@@ -42,17 +42,15 @@ export class Mirror extends Reference {
             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() {
+    destroy() {
         this.disable();
-        super.$destroy();
+        super.destroy();
     }
 }

package/lib/value/reference.js

@@ -12,7 +12,7 @@ export class Reference extends IValue {
         super(true);
         this.value = value;
         this.onchange = new Set;
-        this.$seal();
+        this.seal();
     }
     get $() {
         return this.value;
@@ -34,22 +34,18 @@ export class Reference extends IValue {
             });
             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();
+    destroy() {
+        super.destroy();
         this.onchange.clear();
     }
 }

package/lib/views/array-view.js

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

package/lib/views/base-view.js

@@ -7,7 +7,7 @@ import { RepeatNode, RepeatNodePrivate } from "./repeat-node";
 export class BaseViewPrivate extends RepeatNodePrivate {
     constructor() {
         super();
-        this.$seal();
+        this.seal();
     }
 }
 /**
@@ -17,33 +17,22 @@ export class BaseViewPrivate extends RepeatNodePrivate {
  * @implements IModel
  */
 export class BaseView extends RepeatNode {
-    constructor($1) {
-        super($1 || new BaseViewPrivate);
+    constructor(input, $) {
+        super(input, $ || new BaseViewPrivate);
+    }
+    compose(input) {
         const $ = this.$;
         $.addHandler = (id, item) => {
-            this.createChild(id, item);
+            this.createChild(input, 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();
+        input.model.listener.onAdd($.addHandler);
+        input.model.listener.onRemove($.removeHandler);
+        this.runOnDestroy(() => {
+            input.model.listener.offAdd($.addHandler);
+            input.model.listener.offRemove($.removeHandler);
+        });
     }
 }

package/lib/views/map-view.js

@@ -5,15 +5,10 @@ import { BaseView } from "./base-view";
  * @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);
+    compose(input) {
+        super.compose(input);
+        input.model.forEach((value, key) => {
+            this.createChild(input, key, value);
         });
-        super.$ready();
     }
 }

package/lib/views/object-view.js

@@ -5,15 +5,12 @@ import { BaseView } from "./base-view";
  * @extends BaseView
  */
 export class ObjectView extends BaseView {
-    constructor(model) {
-        super();
-        this.model = model;
-    }
-    $ready() {
-        const obj = this.model;
+    compose(input) {
+        super.compose(input);
+        const obj = input.model.proxy();
         for (const key in obj) {
-            this.createChild(key, obj[key]);
+            this.createChild(input, key, obj[key]);
         }
-        super.$ready();
+        super.ready();
     }
 }

package/lib/views/repeat-node.js

@@ -1,6 +1,4 @@
 import { Fragment, INodePrivate } from "../node/node";
-import { Slot } from "../core/slot";
-import { timeoutExecutor } from "../core/executor";
 /**
  * Private part of repeat node
  * @class RepeatNodePrivate
@@ -14,11 +12,11 @@ export class RepeatNodePrivate extends INodePrivate {
          * @type {Map}
          */
         this.nodes = new Map();
-        this.$seal();
+        this.seal();
     }
-    $destroy() {
+    destroy() {
         this.nodes.clear();
-        super.$destroy();
+        super.destroy();
     }
 }
 /**
@@ -27,80 +25,42 @@ export class RepeatNodePrivate extends INodePrivate {
  * @extends Fragment
  */
 export class RepeatNode extends Fragment {
-    constructor($) {
-        super($ || new RepeatNodePrivate);
+    constructor(input, $) {
+        super(input, $);
         /**
          * 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.$;
+    createChild(opts, id, item, before) {
+        const node = new Fragment({});
         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);
+            this.children.add(node);
+            before.insertBefore(node);
         }
         else {
-            const lastChild = this.$children[this.$children.length - 1];
+            const lastChild = this.lastChild;
             if (lastChild) {
-                // eslint-disable-next-line
-                // @ts-ignore
-                lastChild.$.next = node;
+                lastChild.insertAfter(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.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) {
-            // 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();
+            child.remove();
+            child.destroy();
             this.$.nodes.delete(id);
-            this.$children.splice(this.$children.indexOf(child), 1);
+            this.children.delete(child);
         }
     }
 }

package/lib/views/repeater.js

@@ -12,7 +12,7 @@ export class RepeaterPrivate extends RepeatNodePrivate {
          * Current count of child nodes
          */
         this.currentCount = 0;
-        this.$seal();
+        this.seal();
     }
 }
 /**
@@ -27,7 +27,7 @@ export class Repeater extends RepeatNode {
          * The count of children
          */
         this.count = new Reference(0);
-        this.$seal();
+        this.seal();
     }
     /**
      * Changes the children count
@@ -46,18 +46,18 @@ export class Repeater extends RepeatNode {
         }
         $.currentCount = number;
     }
-    $created() {
+    created() {
         const $ = this.$;
-        super.$created();
+        super.created();
         $.updateHandler = this.changeCount.bind(this);
         this.count.on($.updateHandler);
     }
-    $ready() {
+    ready() {
         this.changeCount(this.count.$);
     }
-    $destroy() {
+    destroy() {
         const $ = this.$;
-        super.$destroy();
+        super.destroy();
         this.count.off($.updateHandler);
     }
 }

package/lib/views/set-view.js

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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vasille - Safe. Fast. Powerful.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "2.0.4",
+  "version": "2.2.1",
   "exports": {
     "import": "./lib/index.js",
     "browser": "./lib/index.js"
@@ -15,6 +15,7 @@
     "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",
     "es5-check": "es-check es5 cdn/*es5.js"
   },
@@ -45,6 +46,7 @@
     "@typescript-eslint/parser": "latest",
     "es-check": "latest",
     "eslint": "latest",
+    "flow-bin": "latest",
     "jest": "latest",
     "jsdom": "latest",
     "ts-jest": "latest",

package/types/binding/attribute.d.ts

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

package/types/binding/binding.d.ts

@@ -1,6 +1,5 @@
 import { Destroyable } from "../core/destroyable";
 import type { IValue } from "../core/ivalue";
-import type { INode } from "../node/node";
 /**
  * Describe a common binding logic
  * @class Binding
@@ -8,23 +7,15 @@ import type { INode } from "../node/node";
  */
 export declare class Binding<T> extends Destroyable {
     private binding;
-    private readonly updateFunc;
+    private func;
     /**
      * 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;
+    constructor(value: IValue<T>);
+    protected init(bounded: (v: T) => void): void;
     /**
      * Just clear bindings
      */
-    $destroy(): void;
+    destroy(): void;
 }

package/types/binding/class.d.ts

@@ -1,23 +1,11 @@
 import { Binding } from "./binding";
 import type { INode } from "../node/node";
 import type { IValue } from "../core/ivalue";
-/**
- * Represents a HTML class binding description
- * @class ClassBinding
- * @extends Binding
- */
-export declare class ClassBinding extends Binding<string | boolean> {
-    /**
-     * 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
-     */
-    constructor(node: INode, name: string, value: IValue<string | boolean>);
-    /**
-     * 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
-     */
-    protected bound(name: string): (node: INode, value: string | boolean) => void;
+export declare class StaticClassBinding extends Binding<boolean> {
+    private current;
+    constructor(node: INode, name: string, value: IValue<boolean>);
+}
+export declare class DynamicalClassBinding extends Binding<string> {
+    private current;
+    constructor(node: INode, value: IValue<string>);
 }

package/types/binding/style.d.ts

@@ -14,10 +14,4 @@ export declare class StyleBinding extends Binding<string> {
      * @param value {IValue} the value to bind
      */
     constructor(node: INode, name: string, value: IValue<string>);
-    /**
-     * Generates a function to update style property value
-     * @param name {string}
-     * @returns {Function} a function to update style property
-     */
-    protected bound(name: string): (node: INode, value: string) => void;
 }