vasille 4.3.0 → 5.0.0

package/lib/dev/runner.js

@@ -0,0 +1,141 @@
+import { IValue } from "../core/ivalue.js";
+import { Runner, Tag, TextNode } from "../runner/web/runner.js";
+import { provideId, toDevId, toDevIdOrValue, toDevObject, toDevValue, } from "./inspectable.js";
+import { DevExpression, DevReference } from "./state.js";
+export class PositionedText {
+    text;
+    position;
+    constructor(text, position) {
+        this.text = text;
+        this.position = position;
+    }
+}
+export function positionedText(text, position) {
+    return new PositionedText(text, position);
+}
+export class DevTextNode extends TextNode {
+    id;
+    constructor(input, runner, usage, inspector) {
+        super(input, runner);
+        this.id = provideId();
+        inspector.createNode({
+            id: this.id,
+            time: Date.now(),
+            text: toDevIdOrValue(input.text),
+            position: usage,
+        });
+    }
+    destroy() {
+        this.runner.inspector.destroy({ id: this.id, time: Date.now() });
+        super.destroy();
+    }
+    compose() {
+        super.compose();
+        Object.defineProperty(this.node, "vasille", { value: this.id, configurable: false, enumerable: false });
+    }
+}
+export function remapObject(obj, transform) {
+    const r = {};
+    for (const key in obj) {
+        r[key] = transform(obj[key]);
+    }
+    return r;
+}
+export class DevTag extends Tag {
+    id;
+    constructor(options, runner, tagName, usage, inspector) {
+        super(options, runner, tagName);
+        this.id = provideId();
+        inspector.createTag({
+            id: this.id,
+            time: Date.now(),
+            tagName: tagName,
+            usage: usage,
+            callback: options.k && toDevIdOrValue(options.k),
+            attr: options.a && toDevObject(options.a),
+            class: options.c &&
+                options.c.map(item => {
+                    if (typeof item === "string") {
+                        return item;
+                    }
+                    if (item instanceof DevReference || item instanceof DevExpression) {
+                        return item.id;
+                    }
+                    if (item instanceof IValue) {
+                        return JSON.stringify(item.V);
+                    }
+                    return remapObject(item, toDevIdOrValue);
+                }),
+            style: options.s &&
+                remapObject(options.s, value => {
+                    return typeof value === "number"
+                        ? `${value}px`
+                        : value instanceof Array
+                            ? value.map(v => `${v}px`).join(" ")
+                            : typeof value === "string"
+                                ? value
+                                : (toDevId(value) ?? "");
+                }),
+            events: options.e && remapObject(options.e, toDevValue),
+            bind: options.b && remapObject(options.b, toDevIdOrValue),
+        });
+    }
+    applyOptions(options) {
+        if (options.e) {
+            for (const [key, handler] of Object.entries(options.e)) {
+                if (handler instanceof Array) {
+                    const userHandler = handler[0];
+                    handler[0] = ev => {
+                        this.runner.inspector.eventTrigger({
+                            tagId: this.id,
+                            eventName: key,
+                            time: Date.now(),
+                        });
+                        userHandler(ev);
+                    };
+                }
+                else {
+                    options[key] = ev => {
+                        this.runner.inspector.eventTrigger({
+                            tagId: this.id,
+                            eventName: key,
+                            time: Date.now(),
+                        });
+                        handler(ev);
+                    };
+                }
+            }
+        }
+        super.applyOptions(options);
+    }
+    getNode() {
+        return this.node;
+    }
+    destroy() {
+        this.runner.inspector.destroy({ id: this.id, time: Date.now() });
+        super.destroy();
+    }
+    compose() {
+        super.compose();
+        Object.defineProperty(this.element, "vasille", { value: this.id, configurable: false, enumerable: false });
+    }
+}
+export class DevRunner extends Runner {
+    inspector;
+    constructor(document, inspector) {
+        super(document);
+        this.inspector = inspector;
+    }
+    textNode(text) {
+        if (text instanceof PositionedText) {
+            return new DevTextNode({ text: text.text }, this, text.position, this.inspector);
+        }
+        return new TextNode({ text: text }, this);
+    }
+    tag(tagName, input, cb) {
+        if (cb) {
+            input.l = cb;
+        }
+        return new DevTag(input, this, tagName, input.usage, this.inspector);
+    }
+}

package/lib/dev/state.js

@@ -0,0 +1,194 @@
+import { IValue } from "../core/ivalue.js";
+import { provideId, toDevValue, } from "./inspectable.js";
+export class DevIValue extends IValue {
+}
+export class BaseDevReference extends DevIValue {
+    state;
+    onChange;
+    constructor(value) {
+        super();
+        this.state = value;
+        this.onChange = new Set();
+    }
+    get V() {
+        return this.state;
+    }
+    set V(value) {
+        this.update(value);
+    }
+    update(value, position) {
+        if (this.state !== value) {
+            this.state = value;
+            this.shareUpdate(position);
+            this.onChange.forEach(handler => {
+                try {
+                    handler(value, position);
+                }
+                catch (e) {
+                    this.shareError(e, position);
+                    reportError(e);
+                }
+            });
+        }
+    }
+    on(handler) {
+        this.onChange.add(handler);
+    }
+    off(handler) {
+        this.onChange.delete(handler);
+    }
+    shareUpdate(position) {
+        void position;
+    }
+    shareError(error, position) {
+        void error;
+        void position;
+    }
+}
+export class DevReference extends BaseDevReference {
+    id;
+    inspector;
+    constructor(value, declaration, inspector) {
+        super(value);
+        this.id = provideId();
+        this.inspector = inspector;
+        inspector?.newReference({
+            id: this.id,
+            declaration: declaration,
+            value: toDevValue(this.state),
+            time: Date.now(),
+        });
+    }
+    destroy() {
+        this.shareDestroy();
+    }
+    shareUpdate(position) {
+        this.inspector?.updateReference({
+            id: this.id,
+            time: Date.now(),
+            position: position,
+            value: toDevValue(this.state),
+        });
+    }
+    shareError(error, position) {
+        this.inspector?.reportReferenceError({
+            targetId: this.id,
+            time: Date.now(),
+            error: error instanceof Error ? (error.stack ?? error.message) : `${error}`,
+            position: position,
+        });
+    }
+    shareDestroy() {
+        this.inspector?.destroy({ id: this.id, time: Date.now() });
+    }
+}
+export class ExpressionDevReference extends BaseDevReference {
+    id;
+    inspector;
+    constructor(id, value, inspector) {
+        super(value);
+        this.id = id;
+        this.inspector = inspector;
+    }
+    shareError(error, position) {
+        this.inspector?.reportReferenceError({
+            targetId: this.id,
+            time: Date.now(),
+            error: error instanceof Error ? (error.stack ?? error.message) : `${error}`,
+            position: position,
+        });
+    }
+}
+export class DevExpression extends IValue {
+    id;
+    declaration;
+    inspector;
+    values;
+    valuesCache;
+    linkedFunc = [];
+    sync;
+    constructor(func, values, ctx, depsCode, declaration, inspector, isWatch) {
+        super();
+        const id = provideId();
+        const handler = (i, value, position) => {
+            try {
+                this.valuesCache[i] = value;
+                const newValue = func.apply(this, this.valuesCache);
+                if (this.sync.V !== newValue || isWatch) {
+                    this.sync.update(newValue, position);
+                    inspector?.updateExpression({
+                        id: id,
+                        time: Date.now(),
+                        position: position,
+                        value: newValue,
+                        deps: this.valuesCache.map(toDevValue),
+                    });
+                }
+            }
+            catch (e) {
+                inspector?.reportExpressionCalculationError({
+                    targetId: id,
+                    time: Date.now(),
+                    error: e instanceof Error ? (e.stack ?? e.message) : `${e}`,
+                    position: position,
+                    deps: this.valuesCache.map(toDevValue),
+                });
+                reportError(e);
+            }
+        };
+        this.valuesCache = values.map(item => item?.V);
+        this.sync = new ExpressionDevReference(id, func.apply(this, this.valuesCache), inspector);
+        this.id = id;
+        this.declaration = declaration;
+        this.inspector = inspector;
+        let i = 0;
+        values.forEach(value => {
+            const updater = handler.bind(this, Number(i++));
+            this.linkedFunc.push(updater);
+            value?.on(updater);
+        });
+        this.values = values;
+        ctx?.bind(this);
+        inspector?.newExpression({
+            id: this.id,
+            declaration: this.declaration,
+            isWatch: isWatch,
+            value: toDevValue(this.sync.V),
+            deps: values.map((dep, index) => {
+                if (dep instanceof DevReference || dep instanceof DevExpression) {
+                    return {
+                        code: depsCode[index],
+                        id: dep.id,
+                        value: toDevValue(dep.V),
+                    };
+                }
+                return depsCode[index];
+            }),
+            time: Date.now(),
+        });
+    }
+    update(value, position) {
+        this.sync.update(value, position);
+    }
+    get V() {
+        return this.sync.V;
+    }
+    set V(v) {
+        this.sync.V = v;
+    }
+    on(handler) {
+        this.sync.on(handler);
+    }
+    off(handler) {
+        this.sync.off(handler);
+    }
+    destroy() {
+        this.inspector?.destroy({ id: this.id, time: Date.now() });
+        for (let i = 0; i < this.values.length; i++) {
+            this.values[i]?.off(this.linkedFunc[i]);
+        }
+        this.values.splice(0);
+        this.valuesCache.splice(0);
+        this.linkedFunc.splice(0);
+    }
+}

package/lib/dev/views.js

@@ -0,0 +1,62 @@
+import { ArrayView } from "../views/array-view.js";
+import { MapView } from "../views/map-view.js";
+import { SetView } from "../views/set-view.js";
+import { provideId, toDevObject } from "./inspectable.js";
+import { DevFragment } from "./node.js";
+export class DevArrayView extends ArrayView {
+    id;
+    constructor(input, runner, usage) {
+        super(input, runner);
+        this.id = provideId();
+        runner.inspector.createComponent({
+            id: this.id,
+            name: "ArrayView",
+            props: toDevObject(input),
+            usage: usage,
+            time: Date.now(),
+        });
+    }
+    newChild(id, item) {
+        const frag = new DevFragment(this.runner, null, null, "ArrayViewItem", { item });
+        this.runner.inspector?.setElementParent({ parent: this.id, child: frag.id });
+        return frag;
+    }
+}
+export class DevSetView extends SetView {
+    id;
+    constructor(input, runner, usage) {
+        super(input, runner);
+        this.id = provideId();
+        runner.inspector.createComponent({
+            id: this.id,
+            name: "SetView",
+            props: toDevObject(input),
+            usage: usage,
+            time: Date.now(),
+        });
+    }
+    newChild(_id, item) {
+        const frag = new DevFragment(this.runner, null, null, "SetViewItem", { item });
+        this.runner.inspector.setElementParent({ parent: this.id, child: frag.id });
+        return frag;
+    }
+}
+export class DevMapView extends MapView {
+    id;
+    constructor(input, runner, usage) {
+        super(input, runner);
+        this.id = provideId();
+        runner.inspector.createComponent({
+            id: this.id,
+            name: "MapView",
+            props: toDevObject(input),
+            usage: usage,
+            time: Date.now(),
+        });
+    }
+    newChild(key, value) {
+        const frag = new DevFragment(this.runner, null, null, "MapViewItem", { key, value });
+        this.runner.inspector.setElementParent({ parent: this.id, child: frag.id });
+        return frag;
+    }
+}

package/lib/index.js

@@ -6,9 +6,8 @@ export { Listener } from "./models/listener.js";
 export { MapModel } from "./models/map-model.js";
 export { SetModel } from "./models/set-model.js";
 export { App, Portal } from "./node/app.js";
-export { Fragment, Tag, TextNode, DebugNode, SwitchedNode } from "./node/node.js";
+export { Fragment, Tag, TextNode, SwitchedNode } from "./node/node.js";
 export { Expression } from "./value/expression.js";
-export { Forward, Backward } from "./value/pointer.js";
 export { Reference } from "./value/reference.js";
 export { ArrayView } from "./views/array-view.js";
 export { BaseView } from "./views/base-view.js";

package/lib/node/app.js

@@ -9,7 +9,7 @@ export class App extends Root {
     /**
      * Constructs an app node
      * @param node {Element} The root of application
-     * @param runner {Runner} A adapter which execute DOM manipulation
+     * @param runner {IRunner} A adapter which execute DOM manipulation
      */
     constructor(node, runner) {
         super(runner);

package/lib/node/node.js

@@ -1,7 +1,6 @@
 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 { safe } from "../functional/safety.js";
 /**
  * This class is symbolic
  * @extends Reactive
@@ -17,7 +16,7 @@ export class Root extends Reactive {
     constructor(runner) {
         super();
         this.runner = runner;
-        this.children = runner.debugUi ? new SetModel() : new Set();
+        this.children = new Set();
     }
     /**
      * Pushes a node to children immediately
@@ -50,11 +49,6 @@ export class Root extends Reactive {
         this.pushNode(node);
         node.compose();
     }
-    debug(text) {
-        const node = this.runner.debugNode(text);
-        this.pushNode(node);
-        node.compose();
-    }
     /**
      * Defines a tag element
      * @param tagName {String} the tag name
@@ -229,7 +223,6 @@ 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
  */
@@ -255,11 +248,11 @@ export class SwitchedNode extends Fragment {
     constructor(runner, cases, _default) {
         super(runner);
         if (_default) {
-            cases.push({ $case: alwaysTrue, slot: _default });
+            cases.push({ $case: 1, slot: _default });
         }
         this.cases = cases;
         this.sync = () => {
-            let i = this.cases.findIndex(item => item.$case.V);
+            let i = this.cases.findIndex(item => (item.$case instanceof IValue ? item.$case.V : item.$case));
             if (i === this.index) {
                 return;
             }
@@ -269,19 +262,22 @@ export class SwitchedNode extends Fragment {
                 this.lastChild = undefined;
             }
             if (i !== -1) {
-                const node = new Fragment(this.runner);
+                const node = this.newChild(i);
                 node.parent = this;
                 this.lastChild = node;
                 this.children.add(node);
                 this.index = i;
-                this.cases[i].slot(node);
+                safe(this.cases[i].slot)(node);
             }
             else {
                 this.index = -1;
             }
         };
         cases.forEach(_case => {
-            _case.$case.on(this.sync);
+            const item = _case.$case;
+            if (item instanceof IValue) {
+                item.on(this.sync);
+            }
         });
     }
     compose() {
@@ -289,29 +285,15 @@ export class SwitchedNode extends Fragment {
     }
     destroy() {
         this.cases.forEach(c => {
-            c.$case.off(this.sync);
+            const item = c.$case;
+            if (item instanceof IValue) {
+                item.off(this.sync);
+            }
         });
         this.cases.splice(0);
         super.destroy();
     }
-}
-/**
- * Represents a debug node
- * @class DebugNode
- * @extends Fragment
- */
-export class DebugNode extends Fragment {
-    handler = null;
-    data;
-    constructor(input, runner) {
-        super(runner);
-        this.data = input.text;
-    }
-    destroy() {
-        /* istanbul ignore else */
-        if (this.handler) {
-            this.data.off(this.handler);
-        }
-        super.destroy();
+    newChild(_index) {
+        return new Fragment(this.runner);
     }
 }

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

@@ -1,22 +1,9 @@
 import { Binding } from "./binding.js";
 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);
-    }
+    node.element.classList.add(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);
-    }
+    node.element.classList.remove(cl);
 }
 export class StaticClassBinding extends Binding {
     current = false;