vasille 2.0.5 → 2.2.0

package/lib/binding/attribute.js

@@ -15,10 +15,15 @@ export class AttributeBinding extends Binding {
         super(value);
         this.init((value) => {
             if (value) {
-                node.app.run.setAttribute(node.node, name, value);
+                if (typeof value === 'boolean') {
+                    node.node.setAttribute(name, "");
+                }
+                else {
+                    node.node.setAttribute(name, `${value}`);
+                }
             }
             else {
-                node.app.run.removeAttribute(node.node, name);
+                node.node.removeAttribute(name);
             }
         });
         this.seal();

package/lib/binding/class.js

@@ -1,9 +1,9 @@
 import { Binding } from "./binding";
 function addClass(node, cl) {
-    node.app.run.addClass(node.node, cl);
+    node.node.classList.add(cl);
 }
 function removeClass(node, cl) {
-    node.app.run.removeClass(node.node, cl);
+    node.node.classList.remove(cl);
 }
 export class StaticClassBinding extends Binding {
     constructor(node, name, value) {

package/lib/binding/style.js

@@ -15,7 +15,7 @@ export class StyleBinding extends Binding {
         super(value);
         this.init((value) => {
             if (node.node instanceof HTMLElement) {
-                node.app.run.setStyle(node.node, name, value);
+                node.node.style.setProperty(name, value);
             }
         });
         this.seal();

package/lib/core/core.js

@@ -4,6 +4,15 @@ import { Expression } from "../value/expression";
 import { Reference } from "../value/reference";
 import { Pointer } from "../value/pointer";
 import { Mirror } from "../value/mirror";
+export let current = null;
+const currentStack = [];
+function stack(node) {
+    currentStack.push(current);
+    current = node;
+}
+function unstack() {
+    current = currentStack.pop();
+}
 /**
  * Private stuff of a reactive object
  * @class ReactivePrivate
@@ -39,14 +48,14 @@ export class ReactivePrivate extends Destroyable {
         this.seal();
     }
     destroy() {
-        var _a;
         this.watch.forEach(value => value.destroy());
         this.watch.clear();
         this.bindings.forEach(binding => binding.destroy());
         this.bindings.clear();
         this.models.forEach(model => model.disableReactivity());
         this.models.clear();
-        (_a = this.freezeExpr) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.freezeExpr && this.freezeExpr.destroy();
+        this.onDestroy && this.onDestroy();
         super.destroy();
     }
 }
@@ -56,9 +65,17 @@ export class ReactivePrivate extends Destroyable {
  * @extends Destroyable
  */
 export class Reactive extends Destroyable {
-    constructor($) {
+    constructor(input, $) {
         super();
+        this.input = input;
         this.$ = $ || new ReactivePrivate;
+        this.seal();
+    }
+    /**
+     * Get parent node
+     */
+    get parent() {
+        return this.$.parent;
     }
     /**
      * Create a reference
@@ -107,12 +124,23 @@ export class Reactive extends Destroyable {
         this.$.models.add(model);
         return model;
     }
-    watch(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+    /**
+     * Creates a watcher
+     * @param func {function} function to run on any argument change
+     * @param values
+     */
+    watch(func, ...values) {
         const $ = this.$;
-        $.watch.add(new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9));
+        $.watch.add(new Expression(func, !this.$.frozen, ...values));
     }
-    bind(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
-        const res = new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+    /**
+     * Creates a computed value
+     * @param func {function} function to run on any argument change
+     * @param values
+     * @return {IValue} the created ivalue
+     */
+    expr(func, ...values) {
+        const res = new Expression(func, !this.$.frozen, ...values);
         const $ = this.$;
         $.watch.add(res);
         return res;
@@ -174,6 +202,28 @@ export class Reactive extends Destroyable {
         }, true, cond);
         return this;
     }
+    init() {
+        this.applyOptions(this.input);
+        this.compose(this.input);
+    }
+    applyOptions(input) {
+        // empty
+    }
+    compose(input) {
+        // empty
+    }
+    runFunctional(f, ...args) {
+        stack(this);
+        // yet another ts bug
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const result = f(...args);
+        unstack();
+        return result;
+    }
+    runOnDestroy(func) {
+        this.$.onDestroy = func;
+    }
     destroy() {
         super.destroy();
         this.$.destroy();

package/lib/functional/components.js

@@ -0,0 +1,17 @@
+import { Fragment } from "../node/node";
+import { current } from "../core/core";
+import { userError } from "../core/errors";
+export function text(text) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    ;
+    current.text(text);
+}
+export function debug(text) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    current.debug(text);
+}
+export function predefine(slot, predefined) {
+    return slot || predefined;
+}

package/lib/functional/merge.js

@@ -0,0 +1,41 @@
+import { IValue } from "../core/ivalue";
+export function merge(main, ...targets) {
+    function refactorClass(obj) {
+        if (Array.isArray(obj.class)) {
+            const out = {
+                $: []
+            };
+            obj.class.forEach(item => {
+                if (item instanceof IValue) {
+                    out.$.push(item);
+                }
+                else if (typeof item === 'string') {
+                    out[item] = true;
+                }
+                else if (typeof item === 'object') {
+                    Object.assign(out, item);
+                }
+            });
+            obj.class = out;
+        }
+    }
+    refactorClass(main);
+    targets.forEach(target => {
+        Reflect.ownKeys(target).forEach((prop) => {
+            if (!Reflect.has(main, prop)) {
+                main[prop] = target[prop];
+            }
+            else if (typeof main[prop] === 'object' && typeof target[prop] === 'object') {
+                if (prop === 'class') {
+                    refactorClass(target);
+                }
+                if (prop === '$' && Array.isArray(main[prop]) && Array.isArray(target[prop])) {
+                    main.$.push(...target.$);
+                }
+                else {
+                    merge(main[prop], target[prop]);
+                }
+            }
+        });
+    });
+}

package/lib/functional/models.js

@@ -0,0 +1,26 @@
+import { ArrayModel } from "../models/array-model";
+import { MapModel } from "../models/map-model";
+import { SetModel } from "../models/set-model";
+import { ObjectModel } from "../models/object-model";
+import { current } from "../core/core";
+import { userError } from "../core/errors";
+export function arrayModel(arr = []) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new ArrayModel(arr)).proxy();
+}
+export function mapModel(map = []) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new MapModel(map));
+}
+export function setModel(arr = []) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new SetModel(arr));
+}
+export function objectModel(obj = {}) {
+    if (!current)
+        throw userError('missing parent node', 'out-of-context');
+    return current.register(new ObjectModel(obj));
+}

package/lib/functional/options.js

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

package/lib/functional/reactivity.js

@@ -0,0 +1,33 @@
+import { IValue } from "../core/ivalue";
+import { Pointer } from "../value/pointer";
+import { current } from "../core/core";
+export function ref(value) {
+    const ref = current.ref(value);
+    return [ref, (value) => ref.$ = value];
+}
+export function mirror(value) {
+    return current.mirror(value);
+}
+export function forward(value) {
+    return current.forward(value);
+}
+export function point(value) {
+    return current.point(value);
+}
+export function expr(func, ...values) {
+    return current.expr(func, ...values);
+}
+export function watch(func, ...values) {
+    current.watch(func, ...values);
+}
+export function valueOf(value) {
+    return value.$;
+}
+export function setValue(ref, value) {
+    if (ref instanceof Pointer && value instanceof IValue) {
+        ref.point(value);
+    }
+    else {
+        ref.$ = value instanceof IValue ? value.$ : value;
+    }
+}

package/lib/functional/stack.js

@@ -0,0 +1,127 @@
+import { Component, Extension, Fragment } from "../node/node";
+import { App } from "../node/app";
+import { current } from "../core/core";
+import { ArrayModel } from "../models/array-model";
+import { ArrayView } from "../views/array-view";
+import { MapModel } from "../models/map-model";
+import { MapView } from "../views/map-view";
+import { SetModel } from "../models/set-model";
+import { SetView } from "../views/set-view";
+import { ObjectModel } from "../models/object-model";
+import { ObjectView } from "../views/object-view";
+import { Watch } from "../node/watch";
+import { userError } from "../core/errors";
+export function app(renderer) {
+    return (node, opts) => {
+        return new App(node, opts).runFunctional(renderer, opts);
+    };
+}
+export function component(renderer) {
+    return (opts, callback) => {
+        const component = new Component(opts);
+        if (!(current instanceof Fragment))
+            throw userError('missing parent node', 'out-of-context');
+        let ret;
+        if (callback)
+            opts.slot = callback;
+        current.create(component, node => {
+            ret = node.runFunctional(renderer, opts);
+        });
+        return ret;
+    };
+}
+export function fragment(renderer) {
+    return (opts, callback) => {
+        const frag = new Fragment(opts);
+        if (!(current instanceof Fragment))
+            throw userError('missing parent node', 'out-of-context');
+        if (callback)
+            opts.slot = callback;
+        current.create(frag);
+        return frag.runFunctional(renderer, opts);
+    };
+}
+export function extension(renderer) {
+    return (opts, callback) => {
+        const ext = new Extension(opts);
+        if (!(current instanceof Fragment))
+            throw userError('missing parent node', 'out-of-context');
+        if (callback)
+            opts.slot = callback;
+        current.create(ext);
+        return ext.runFunctional(renderer, opts);
+    };
+}
+export function tag(name, opts, callback) {
+    if (!(current instanceof Fragment))
+        throw userError('missing parent node', 'out-of-context');
+    return {
+        node: current.tag(name, opts, (node) => {
+            callback && node.runFunctional(callback);
+        })
+    };
+}
+export function create(node, callback) {
+    if (!(current instanceof Fragment))
+        throw userError('missing current node', 'out-of-context');
+    current.create(node, (node, ...args) => {
+        callback && node.runFunctional(callback, ...args);
+    });
+    return node;
+}
+export const vx = {
+    if(condition, callback) {
+        if (current instanceof Fragment) {
+            current.if(condition, node => node.runFunctional(callback));
+        }
+        else {
+            throw userError("wrong use of `v.if` function", "logic-error");
+        }
+    },
+    else(callback) {
+        if (current instanceof Fragment) {
+            current.else(node => node.runFunctional(callback));
+        }
+        else {
+            throw userError("wrong use of `v.else` function", "logic-error");
+        }
+    },
+    elif(condition, callback) {
+        if (current instanceof Fragment) {
+            current.elif(condition, node => node.runFunctional(callback));
+        }
+        else {
+            throw userError("wrong use of `v.elif` function", "logic-error");
+        }
+    },
+    for(model, callback) {
+        if (model instanceof ArrayModel) {
+            // for arrays T & K are the same type
+            create(new ArrayView({ model }), callback);
+        }
+        else if (model instanceof MapModel) {
+            create(new MapView({ model }), callback);
+        }
+        else if (model instanceof SetModel) {
+            // for sets T & K are the same type
+            create(new SetView({ model }), callback);
+        }
+        else if (model instanceof ObjectModel) {
+            // for objects K is always string
+            create(new ObjectView({ model }), callback);
+        }
+        else {
+            throw userError("wrong use of `v.for` function", 'wrong-model');
+        }
+    },
+    watch(model, callback) {
+        const opts = { model };
+        create(new Watch(opts), callback);
+    },
+    nextTick(callback) {
+        const node = current;
+        window.setTimeout(() => {
+            node.runFunctional(callback);
+        }, 0);
+    }
+};

package/lib/index.js

@@ -1,16 +1,12 @@
 import { Destroyable } from "./core/destroyable";
-import { Executor, InstantExecutor, TimeoutExecutor } from "./core/executor";
 import { Reactive } from "./core/core";
 import { IValue } from "./core/ivalue";
-import { Signal } from "./core/signal";
-import { Slot } from "./core/slot";
 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 { Interceptor, InterceptorNode } from "./node/interceptor";
 import { Component, Extension, Fragment, INode, Tag } from "./node/node";
 import { Expression } from "./value/expression";
 import { Mirror } from "./value/mirror";
@@ -20,8 +16,7 @@ import { ArrayView } from "./views/array-view";
 import { BaseView } from "./views/base-view";
 import { MapView } from "./views/map-view";
 import { ObjectView } from "./views/object-view";
-import { RepeatNode } from "./views/repeat-node";
-import { Repeater } from "./views/repeater";
 import { SetView } from "./views/set-view";
 import { Binding } from "./binding/binding";
-export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, RepeatNode, Repeater, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Executor, InstantExecutor, TimeoutExecutor, Signal, Slot, Interceptor, InterceptorNode, Expression, Binding, Reactive, };
+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, libV };

package/lib/models/array-model.js

@@ -19,6 +19,15 @@ export class ArrayModel extends Array {
             super.push(data[i]);
         }
     }
+    // proxy
+    proxy() {
+        return new Proxy(this, {
+            set(target, p, value) {
+                target.splice(parseInt(p), 1, value);
+                return true;
+            }
+        });
+    }
     /* Array members */
     /**
      * Gets the last item of array

package/lib/models/object-model.js

@@ -10,13 +10,14 @@ export class ObjectModel extends Object {
      */
     constructor(obj = {}) {
         super();
+        this.container = Object.create(null);
         Object.defineProperty(this, 'listener', {
             value: new Listener,
             writable: false,
             configurable: false
         });
         for (const i in obj) {
-            Object.defineProperty(this, i, {
+            Object.defineProperty(this.container, i, {
                 value: obj[i],
                 configurable: true,
                 writable: true,
@@ -31,8 +32,7 @@ export class ObjectModel extends Object {
      * @return {*}
      */
     get(key) {
-        const ts = this;
-        return ts[key];
+        return this.container[key];
     }
     /**
      * Sets an object property value
@@ -41,21 +41,19 @@ export class ObjectModel extends Object {
      * @return {ObjectModel} a pointer to this
      */
     set(key, v) {
-        const ts = this;
-        // eslint-disable-next-line no-prototype-builtins
-        if (ts.hasOwnProperty(key)) {
-            this.listener.emitRemoved(key, ts[key]);
-            ts[key] = v;
+        if (Reflect.has(this.container, key)) {
+            this.listener.emitRemoved(key, this.container[key]);
+            this.container[key] = v;
         }
         else {
-            Object.defineProperty(ts, key, {
+            Object.defineProperty(this.container, key, {
                 value: v,
                 configurable: true,
                 writable: true,
                 enumerable: true
             });
         }
-        this.listener.emitAdded(key, ts[key]);
+        this.listener.emitAdded(key, this.container[key]);
         return this;
     }
     /**
@@ -63,12 +61,28 @@ export class ObjectModel extends Object {
      * @param key {string} property name
      */
     delete(key) {
-        const ts = this;
-        if (ts[key]) {
-            this.listener.emitRemoved(key, ts[key]);
-            delete ts[key];
+        if (this.container[key]) {
+            this.listener.emitRemoved(key, this.container[key]);
+            delete this.container[key];
         }
     }
+    proxy() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const ts = this;
+        return new Proxy(this.container, {
+            get(target, p) {
+                return ts.get(p);
+            },
+            set(target, p, value) {
+                ts.set(p, value);
+                return true;
+            },
+            deleteProperty(target, p) {
+                ts.delete(p);
+                return true;
+            }
+        });
+    }
     enableReactivity() {
         this.listener.enableReactivity();
     }

package/lib/node/app.js

@@ -1,4 +1,3 @@
-import { instantExecutor, timeoutExecutor } from "../core/executor";
 import { INode } from "./node";
 /**
  * Application Node
@@ -7,12 +6,12 @@ import { INode } from "./node";
  */
 export class AppNode extends INode {
     /**
-     * @param options {Object} Application options
+     * @param input
      */
-    constructor(options) {
-        super();
-        this.run = (options === null || options === void 0 ? void 0 : options.executor) || ((options === null || options === void 0 ? void 0 : options.freezeUi) === false ? timeoutExecutor : instantExecutor);
-        this.debugUi = (options === null || options === void 0 ? void 0 : options.debugUi) || false;
+    constructor(input) {
+        super(input);
+        this.debugUi = input.debugUi || false;
+        this.seal();
     }
 }
 /**
@@ -24,16 +23,26 @@ export class App extends AppNode {
     /**
      * Constructs an app node
      * @param node {Element} The root of application
-     * @param options {Object} Application options
+     * @param input
      */
-    constructor(node, options) {
-        super(options);
+    constructor(node, input) {
+        super(input);
         this.$.node = node;
         this.preinit(this, this);
+        this.init();
+        this.seal();
+    }
+    appendNode(node) {
+        this.$.node.appendChild(node);
+    }
+}
+export class Portal extends AppNode {
+    constructor(input) {
+        super(input);
+        this.$.node = input.node;
         this.seal();
     }
     appendNode(node) {
-        const $ = this.$;
-        this.run.appendChild($.node, node);
+        this.$.node.appendChild(node);
     }
 }