vasille 3.2.0 → 4.0.0

package/lib/node/node.js

@@ -2,15 +2,20 @@ import { Reactive } from "../core/core.js";
 import { IValue } from "../core/ivalue.js";
 import { SetModel } from "../models/set-model.js";
 import { Reference } from "../value/reference.js";
-import { userError } from "../core/errors.js";
 /**
  * This class is symbolic
  * @extends Reactive
  */
 export class Root extends Reactive {
-    constructor(input, runner) {
-        super(input);
-        this.lastChild = undefined;
+    /**
+     * The children list
+     * @type Array
+     */
+    children;
+    runner;
+    lastChild = undefined;
+    constructor(runner) {
+        super();
         this.runner = runner;
         this.children = runner.debugUi ? new SetModel() : new Set();
     }
@@ -31,19 +36,14 @@ export class Root extends Reactive {
      */
     findFirstChild() {
         let first;
-        for (const child of this.children) {
-            first = child.findFirstChild();
-            /* istanbul ignore else */
-            if (first) {
-                break;
-            }
-        }
+        this.children.forEach(child => {
+            first = first ?? child.findFirstChild();
+        });
         return first;
     }
     /**
      * Defines a text fragment
      * @param text {String | IValue} A text fragment string
-     * @param cb {function (TextNode)} Callback if previous is slot name
      */
     text(text) {
         const node = this.runner.textNode(text);
@@ -76,49 +76,6 @@ export class Root extends Reactive {
         node.compose();
         callback?.(node);
     }
-    /**
-     * Defines an if node
-     * @param cond {IValue} condition
-     * @param cb {function(Fragment)} callback to run on true
-     * @return {this}
-     */
-    if(cond, cb) {
-        const node = new SwitchedNode(this.runner);
-        this.pushNode(node);
-        node.addCase(this.case(cond, cb));
-    }
-    else(cb) {
-        if (this.lastChild instanceof SwitchedNode) {
-            this.lastChild.addCase(this.default(cb));
-        }
-        else {
-            throw userError("wrong `else` function use", "logic-error");
-        }
-    }
-    elif(cond, cb) {
-        if (this.lastChild instanceof SwitchedNode) {
-            this.lastChild.addCase(this.case(cond, cb));
-        }
-        else {
-            throw userError("wrong `elif` function use", "logic-error");
-        }
-    }
-    /**
-     * Create a case for switch
-     * @param cond {IValue<boolean>}
-     * @param cb {function(Fragment) : void}
-     * @return {{cond : IValue, cb : (function(Fragment) : void)}}
-     */
-    case(cond, cb) {
-        return { cond, cb };
-    }
-    /**
-     * @param cb {(function(Fragment) : void)}
-     * @return {{cond : IValue, cb : (function(Fragment) : void)}}
-     */
-    default(cb) {
-        return { cond: trueIValue, cb };
-    }
     destroy() {
         this.children.forEach(child => child.destroy());
         this.children.clear();
@@ -127,10 +84,20 @@ export class Root extends Reactive {
     }
 }
 export class Fragment extends Root {
-    constructor(input, runner, name) {
-        super(input, runner);
-        this.name = name;
+    parent;
+    constructor(runner) {
+        super(runner);
     }
+    /**
+     * Next node
+     * @type {?Fragment}
+     */
+    next;
+    /**
+     * Previous node
+     * @type {?Fragment}
+     */
+    prev;
     /**
      * Pushes a node to children immediately
      * @param node {Fragment} A node to push
@@ -204,18 +171,20 @@ export class Fragment extends Root {
         super.destroy();
     }
 }
-const trueIValue = new Reference(true);
 /**
  * Represents a text node
  * @class TextNode
  * @extends Fragment
  */
 export class TextNode extends Fragment {
+    handler;
+    data;
     constructor(input, runner) {
-        super(input, runner, ":text");
+        super(runner);
+        this.data = input.text;
     }
     destroy() {
-        const text = this.input.text;
+        const text = this.data;
         if (text instanceof IValue && this.handler) {
             text.off(this.handler);
         }
@@ -228,6 +197,11 @@ export class TextNode extends Fragment {
  * @extends Fragment
  */
 export class INode extends Fragment {
+    /**
+     * The element of vasille node
+     * @type Element
+     */
+    node;
     get element() {
         return this.node;
     }
@@ -241,8 +215,12 @@ export class INode extends Fragment {
  * @extends INode
  */
 export class Tag extends INode {
-    constructor(input, runner, tagName) {
-        super(input, runner, tagName);
+    name;
+    options;
+    constructor(options, runner, tagName) {
+        super(runner);
+        this.options = options;
+        this.name = tagName;
     }
     findFirstChild() {
         return this.node;
@@ -251,27 +229,37 @@ export class Tag extends INode {
         this.runner.appendChild(this.node, node);
     }
 }
+const alwaysTrue = new Reference(true);
 /**
  * Defines a node which can switch its children conditionally
  */
 export class SwitchedNode extends Fragment {
+    /**
+     * Index of current true condition
+     * @type number
+     */
+    index;
+    /**
+     * Array of possible cases
+     * @type {Array<{cond : IValue<unknown>, cb : function(Fragment)}>}
+     */
+    cases;
+    /**
+     * A function that syncs index and content will be bounded to each condition
+     * @type {Function}
+     */
+    sync;
     /**
      * Constructs a switch node and define a sync function
      */
-    constructor(runner) {
-        super({}, runner, ":switch");
-        /**
-         * Array of possible cases
-         * @type {Array<{cond : IValue<unknown>, cb : function(Fragment)}>}
-         */
-        this.cases = [];
+    constructor(runner, cases, _default) {
+        super(runner);
+        if (_default) {
+            cases.push({ $case: alwaysTrue, slot: _default });
+        }
+        this.cases = cases;
         this.sync = () => {
-            let i = 0;
-            for (; i < this.cases.length; i++) {
-                if (this.cases[i].cond.$) {
-                    break;
-                }
-            }
+            let i = this.cases.findIndex(item => item.$case.V);
             if (i === this.index) {
                 return;
             }
@@ -280,34 +268,28 @@ export class SwitchedNode extends Fragment {
                 this.children.clear();
                 this.lastChild = undefined;
             }
-            if (i !== this.cases.length) {
+            if (i !== -1) {
+                const node = new Fragment(this.runner);
+                node.parent = this;
+                this.lastChild = node;
+                this.children.add(node);
                 this.index = i;
-                this.createChild(this.cases[i].cb);
+                this.cases[i].slot(node);
             }
             else {
                 this.index = -1;
             }
         };
+        cases.forEach(_case => {
+            _case.$case.on(this.sync);
+        });
     }
-    addCase(case_) {
-        this.cases.push(case_);
-        case_.cond.on(this.sync);
+    compose() {
         this.sync();
     }
-    /**
-     * Creates a child node
-     * @param cb {function(Fragment)} Call-back
-     */
-    createChild(cb) {
-        const node = new Fragment({}, this.runner, ":case");
-        node.parent = this;
-        this.lastChild = node;
-        this.children.add(node);
-        cb(node);
-    }
     destroy() {
         this.cases.forEach(c => {
-            c.cond.off(this.sync);
+            c.$case.off(this.sync);
         });
         this.cases.splice(0);
         super.destroy();
@@ -319,13 +301,16 @@ export class SwitchedNode extends Fragment {
  * @extends Fragment
  */
 export class DebugNode extends Fragment {
+    handler;
+    data;
     constructor(input, runner) {
-        super(input, runner, ":debug");
+        super(runner);
+        this.data = input.text;
     }
     destroy() {
         /* istanbul ignore else */
         if (this.handler) {
-            this.input.text.off(this.handler);
+            this.data.off(this.handler);
         }
         super.destroy();
     }

package/lib/node/watch.js

@@ -5,17 +5,33 @@ import { Fragment } from "./node.js";
  * @extends Fragment
  */
 export class Watch extends Fragment {
+    model;
+    slot;
+    handler;
     constructor(input, runner) {
-        super(input, runner, ":watch");
+        super(runner);
+        this.model = input.model;
+        this.slot = input.slot;
     }
     compose() {
-        this.watch(value => {
-            this.children.forEach(child => {
-                child.destroy();
+        const slot = this.slot;
+        if (slot) {
+            const handler = (this.handler = value => {
+                this.children.forEach(child => {
+                    child.destroy();
+                });
+                this.children.clear();
+                this.lastChild = undefined;
+                slot(this, value);
             });
-            this.children.clear();
-            this.lastChild = undefined;
-            this.input.slot?.(this, value);
-        }, [this.input.model]);
+            this.model.on(handler);
+            handler(this.model.V);
+        }
+    }
+    destroy() {
+        if (this.handler) {
+            this.model.off(this.handler);
+        }
+        super.destroy();
     }
 }

package/lib/runner/web/binding/binding.js

@@ -1,28 +1,26 @@
-import { Destroyable } from "../../../core/destroyable.js";
 /**
  * Describe a common binding logic
  * @class Binding
- * @extends Destroyable
  */
-export class Binding extends Destroyable {
+export class Binding {
+    binding;
+    func;
     /**
      * Constructs a common binding logic
      * @param value {IValue} the value to bind
      */
     constructor(value) {
-        super();
         this.binding = value;
     }
     init(bounded) {
         this.func = bounded;
         this.binding.on(this.func);
-        this.func(this.binding.$);
+        this.func(this.binding.V);
     }
     /**
      * Just clear bindings
      */
     destroy() {
         this.binding.off(this.func);
-        super.destroy();
     }
 }

package/lib/runner/web/binding/class.js

@@ -1,14 +1,27 @@
 import { Binding } from "./binding.js";
-function addClass(node, cl) {
-    node.element.classList.add(cl);
+export function addClass(node, cl) {
+    if (process.env.VASILLE_TARGET === "es5" && !node.element.classList) {
+        node.element.className = [...node.element.className.split(" "), cl].filter(item => !!item).join(" ");
+    }
+    else {
+        node.element.classList.add(cl);
+    }
 }
-function removeClass(node, cl) {
-    node.element.classList.remove(cl);
+export function removeClass(node, cl) {
+    if (process.env.VASILLE_TARGET === "es5" && !node.element.classList) {
+        node.element.className = node.element.className
+            .split(" ")
+            .filter(name => name !== cl)
+            .join(" ");
+    }
+    else {
+        node.element.classList.remove(cl);
+    }
 }
 export class StaticClassBinding extends Binding {
+    current = false;
     constructor(node, name, value) {
         super(value);
-        this.current = false;
         this.init((value) => {
             if (value !== this.current) {
                 if (value) {
@@ -23,9 +36,9 @@ export class StaticClassBinding extends Binding {
     }
 }
 export class DynamicalClassBinding extends Binding {
+    current = "";
     constructor(node, value) {
         super(value);
-        this.current = "";
         this.init((value) => {
             /* istanbul ignore else */
             if (this.current != value) {

package/lib/runner/web/binding/property.js

@@ -0,0 +1,20 @@
+import { Binding } from "./binding.js";
+/**
+ * Represents a property binding
+ * @class PropertyBinding
+ * @extends Binding
+ */
+export class PropertyBinding extends Binding {
+    /**
+     * Constructs a property binding description
+     * @param node the vasille node
+     * @param name the name of property
+     * @param value the value of property
+     */
+    constructor(node, name, value) {
+        super(value);
+        this.init(value => {
+            node.element[name] = value;
+        });
+    }
+}

package/lib/runner/web/runner.js

@@ -1,12 +1,14 @@
 import { TextNode as AbstractTextNode, DebugNode as AbstractDebugNode, Tag as AbstractTag, IValue, } from "../../index.js";
 import { internalError } from "../../core/errors.js";
 import { AttributeBinding } from "./binding/attribute.js";
-import { DynamicalClassBinding, StaticClassBinding } from "./binding/class.js";
+import { addClass, DynamicalClassBinding, removeClass, StaticClassBinding } from "./binding/class.js";
+import { PropertyBinding } from "./binding/property.js";
 import { stringifyStyleValue, StyleBinding } from "./binding/style.js";
 export class TextNode extends AbstractTextNode {
+    node;
     compose() {
-        const text = this.input.text;
-        this.node = this.runner.document.createTextNode((text instanceof IValue ? text.$ : text)?.toString() ?? "");
+        const text = this.data;
+        this.node = this.runner.document.createTextNode((text instanceof IValue ? text.V : text)?.toString() ?? "");
         if (text instanceof IValue) {
             this.handler = (v) => {
                 this.node.replaceData(0, -1, v?.toString() ?? "");
@@ -24,9 +26,10 @@ export class TextNode extends AbstractTextNode {
     }
 }
 export class DebugNode extends AbstractDebugNode {
+    node;
     compose() {
-        const text = this.input.text;
-        this.node = this.runner.document.createComment(text.$?.toString() ?? "");
+        const text = this.data;
+        this.node = this.runner.document.createComment(text.V?.toString() ?? "");
         this.handler = (v) => {
             this.node.replaceData(0, -1, v?.toString() ?? "");
         };
@@ -48,10 +51,10 @@ export class Tag extends AbstractTag {
         }
         const node = this.runner.document.createElement(this.name);
         this.node = node;
-        this.applyOptions(this.input);
+        this.applyOptions(this.options);
         this.parent.appendNode(node);
-        this.input.callback?.(this.node);
-        this.input.slot?.(this);
+        this.options.callback?.(this.node);
+        this.options.slot?.(this);
     }
     destroy() {
         this.node.remove();
@@ -62,7 +65,7 @@ export class Tag extends AbstractTag {
             for (const name in options.attr) {
                 const value = options.attr[name];
                 if (value instanceof IValue) {
-                    this.register(new AttributeBinding(this, name, value));
+                    this.bind(new AttributeBinding(this, name, value));
                 }
                 else {
                     /* istanbul ignore else */
@@ -79,34 +82,34 @@ export class Tag extends AbstractTag {
             }
         }
         if (options.class) {
-            for (const item of options.class) {
+            options.class.forEach(item => {
                 if (item instanceof IValue) {
-                    this.register(new DynamicalClassBinding(this, item));
+                    this.bind(new DynamicalClassBinding(this, item));
                 }
                 else if (typeof item == "string") {
-                    this.node.classList.add(item);
+                    addClass(this, item);
                 }
                 else {
                     for (const name in item) {
                         const value = item[name];
                         if (value instanceof IValue) {
-                            this.register(new StaticClassBinding(this, name, value));
+                            this.bind(new StaticClassBinding(this, name, value));
                         }
                         else if (value) {
-                            this.node.classList.add(name);
+                            addClass(this, name);
                         }
                         else {
-                            this.node.classList.remove(name);
+                            removeClass(this, name);
                         }
                     }
                 }
-            }
+            });
         }
         if (options.style && this.node instanceof HTMLElement) {
             for (const name in options.style) {
                 const value = options.style[name];
                 if (value instanceof IValue) {
-                    this.register(new StyleBinding(this, name, value));
+                    this.bind(new StyleBinding(this, name, value));
                 }
                 else {
                     this.node.style.setProperty(name, stringifyStyleValue(value));
@@ -115,7 +118,13 @@ export class Tag extends AbstractTag {
         }
         if (options.events) {
             for (const name in options.events) {
-                this.node.addEventListener(name, options.events[name]);
+                const event = options.events[name];
+                if (event instanceof Array) {
+                    this.node.addEventListener(name, event[0], event[1]);
+                }
+                else {
+                    this.node.addEventListener(name, event);
+                }
             }
         }
         if (options.bind) {
@@ -126,16 +135,16 @@ export class Tag extends AbstractTag {
                     node[k] = value;
                 }
                 else {
-                    node[k] = value.$;
-                    this.watch((v) => {
-                        node[k] = v;
-                    }, [value]);
+                    node[k] = value.V;
+                    this.bind(new PropertyBinding(this, k, value));
                 }
             }
         }
     }
 }
 export class Runner {
+    debugUi;
+    document;
     constructor(debugUi, document) {
         this.debugUi = debugUi;
         this.document = document;

package/lib/value/expression.js

@@ -6,43 +6,52 @@ import { IValue } from "../core/ivalue.js";
  * @extends IValue
  */
 export class Expression extends IValue {
+    /**
+     * The array of value which will trigger recalculation
+     * @type {Array}
+     */
+    values;
+    /**
+     * Cache the values of expression variables
+     * @type {Array}
+     */
+    valuesCache;
+    /**
+     * Expression will link different handler for each value of the list
+     */
+    linkedFunc = [];
+    /**
+     * The buffer to keep the last calculated value
+     */
+    sync;
     /**
      * 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, values) {
+    constructor(func, values, ctx) {
         super();
-        /**
-         * Expression will link different handler for each value of the list
-         */
-        this.linkedFunc = [];
         const handler = (i) => {
             /* istanbul ignore else */
             if (typeof i === "number") {
-                this.valuesCache[i] = this.values[i].$;
+                this.valuesCache[i] = this.values[i]?.V;
             }
-            this.sync.$ = func.apply(this, this.valuesCache);
+            this.sync.V = func.apply(this, this.valuesCache);
         };
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.valuesCache = values.map(item => item.$);
+        this.valuesCache = values.map(item => item?.V);
         this.sync = new Reference(func.apply(this, this.valuesCache));
         let i = 0;
         values.forEach(value => {
             const updater = handler.bind(this, Number(i++));
             this.linkedFunc.push(updater);
-            value.on(updater);
+            value?.on(updater);
         });
         this.values = values;
-        this.func = handler;
+        ctx?.bind(this);
     }
-    get $() {
-        return this.sync.$;
+    get V() {
+        return this.sync.V;
     }
-    set $(value) {
-        this.sync.$ = value;
+    set V(value) {
+        this.sync.V = value;
     }
     on(handler) {
         this.sync.on(handler);
@@ -52,11 +61,10 @@ export class Expression extends IValue {
     }
     destroy() {
         for (let i = 0; i < this.values.length; i++) {
-            this.values[i].off(this.linkedFunc[i]);
+            this.values[i]?.off(this.linkedFunc[i]);
         }
         this.values.splice(0);
         this.valuesCache.splice(0);
         this.linkedFunc.splice(0);
-        super.destroy();
     }
 }