vasille 3.0.2 → 3.2.0

package/lib/runner/web/runner.js

@@ -0,0 +1,165 @@
+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 { stringifyStyleValue, StyleBinding } from "./binding/style.js";
+export class TextNode extends AbstractTextNode {
+    compose() {
+        const text = this.input.text;
+        this.node = this.runner.document.createTextNode((text instanceof IValue ? text.$ : text)?.toString() ?? "");
+        if (text instanceof IValue) {
+            this.handler = (v) => {
+                this.node.replaceData(0, -1, v?.toString() ?? "");
+            };
+            text.on(this.handler);
+        }
+        this.parent.appendNode(this.node);
+    }
+    destroy() {
+        this.node.remove();
+        super.destroy();
+    }
+    findFirstChild() {
+        return this.node;
+    }
+}
+export class DebugNode extends AbstractDebugNode {
+    compose() {
+        const text = this.input.text;
+        this.node = this.runner.document.createComment(text.$?.toString() ?? "");
+        this.handler = (v) => {
+            this.node.replaceData(0, -1, v?.toString() ?? "");
+        };
+        text.on(this.handler);
+        this.parent.appendNode(this.node);
+    }
+    destroy() {
+        this.node.remove();
+        super.destroy();
+    }
+    findFirstChild() {
+        return this.node;
+    }
+}
+export class Tag extends AbstractTag {
+    compose() {
+        if (!this.name) {
+            throw internalError("wrong Tag constructor call");
+        }
+        const node = this.runner.document.createElement(this.name);
+        this.node = node;
+        this.applyOptions(this.input);
+        this.parent.appendNode(node);
+        this.input.callback?.(this.node);
+        this.input.slot?.(this);
+    }
+    destroy() {
+        this.node.remove();
+        super.destroy();
+    }
+    applyOptions(options) {
+        if (options.attr) {
+            for (const name in options.attr) {
+                const value = options.attr[name];
+                if (value instanceof IValue) {
+                    this.register(new AttributeBinding(this, name, value));
+                }
+                else {
+                    /* istanbul ignore else */
+                    if (typeof value === "boolean") {
+                        /* istanbul ignore else */
+                        if (value) {
+                            this.node.setAttribute(name, "");
+                        }
+                    }
+                    else if (value !== null && value !== undefined) {
+                        this.node.setAttribute(name, `${value}`);
+                    }
+                }
+            }
+        }
+        if (options.class) {
+            for (const item of options.class) {
+                if (item instanceof IValue) {
+                    this.register(new DynamicalClassBinding(this, item));
+                }
+                else if (typeof item == "string") {
+                    this.node.classList.add(item);
+                }
+                else {
+                    for (const name in item) {
+                        const value = item[name];
+                        if (value instanceof IValue) {
+                            this.register(new StaticClassBinding(this, name, value));
+                        }
+                        else if (value) {
+                            this.node.classList.add(name);
+                        }
+                        else {
+                            this.node.classList.remove(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));
+                }
+                else {
+                    this.node.style.setProperty(name, stringifyStyleValue(value));
+                }
+            }
+        }
+        if (options.events) {
+            for (const name in options.events) {
+                this.node.addEventListener(name, options.events[name]);
+            }
+        }
+        if (options.bind) {
+            const node = this.node;
+            for (const k in options.bind) {
+                const value = options.bind[k];
+                if (!(value instanceof IValue)) {
+                    node[k] = value;
+                }
+                else {
+                    node[k] = value.$;
+                    this.watch((v) => {
+                        node[k] = v;
+                    }, [value]);
+                }
+            }
+        }
+    }
+}
+export class Runner {
+    constructor(debugUi, document) {
+        this.debugUi = debugUi;
+        this.document = document;
+    }
+    insertBefore(node, before) {
+        const parent = before.parentElement;
+        /* istanbul ignore else */
+        if (parent) {
+            parent.insertBefore(node, before);
+        }
+    }
+    appendChild(node, child) {
+        node.appendChild(child);
+    }
+    textNode(text) {
+        return new TextNode({ text }, this);
+    }
+    debugNode(text) {
+        return new DebugNode({ text }, this);
+    }
+    tag(tagName, input, cb) {
+        if (cb) {
+            input.slot = cb;
+        }
+        return new Tag(input, this, tagName);
+    }
+}

package/lib/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/binding/attribute.ts","../src/binding/binding.ts","../src/binding/class.ts","../src/binding/style.ts","../src/core/config.ts","../src/core/core.ts","../src/core/destroyable.ts","../src/core/errors.ts","../src/core/ivalue.ts","../src/functional/options.ts","../src/functional/safety.ts","../src/models/array-model.ts","../src/models/listener.ts","../src/models/map-model.ts","../src/models/model.ts","../src/models/set-model.ts","../src/node/app.ts","../src/node/node.ts","../src/node/watch.ts","../src/value/expression.ts","../src/value/pointer.ts","../src/value/reference.ts","../src/views/array-view.ts","../src/views/base-view.ts","../src/views/map-view.ts","../src/views/repeat-node.ts","../src/views/set-view.ts"],"version":"5.6.2"}
+{"root":["../src/index.ts","../src/core/core.ts","../src/core/destroyable.ts","../src/core/errors.ts","../src/core/ivalue.ts","../src/functional/safety.ts","../src/models/array-model.ts","../src/models/listener.ts","../src/models/map-model.ts","../src/models/model.ts","../src/models/set-model.ts","../src/node/app.ts","../src/node/node.ts","../src/node/runner.ts","../src/node/watch.ts","../src/runner/web/runner.ts","../src/runner/web/binding/attribute.ts","../src/runner/web/binding/binding.ts","../src/runner/web/binding/class.ts","../src/runner/web/binding/style.ts","../src/value/expression.ts","../src/value/pointer.ts","../src/value/reference.ts","../src/views/array-view.ts","../src/views/base-view.ts","../src/views/map-view.ts","../src/views/repeat-node.ts","../src/views/set-view.ts"],"version":"5.8.3"}

package/lib/value/expression.js

@@ -1,5 +1,5 @@
 import { Reference } from "./reference.js";
-import { IValue } from "../core/ivalue";
+import { IValue } from "../core/ivalue.js";
 /**
  * Bind some values to one expression
  * @class Expression
@@ -12,13 +12,14 @@ export class Expression extends IValue {
      * @param values
      * @param link {Boolean} links immediately if true
      */
-    constructor(func, ...values) {
+    constructor(func, values) {
         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].$;
             }

package/lib/value/pointer.js

@@ -1,5 +1,5 @@
-import { IValue } from "../core/ivalue";
-import { Reference } from "./reference";
+import { IValue } from "../core/ivalue.js";
+import { Reference } from "./reference.js";
 /**
  * r/w pointer to a value
  * @class Pointer
@@ -23,8 +23,7 @@ export class Pointer extends IValue {
         return this.reference.$;
     }
     set $(v) {
-        var _a;
-        (_a = this.target) === null || _a === void 0 ? void 0 : _a.off(this.handler);
+        this.target?.off(this.handler);
         this.target = null;
         this.reference.$ = v;
     }
@@ -32,6 +31,7 @@ export class Pointer extends IValue {
         return this.reference.$;
     }
     set $$(v) {
+        /* istanbul ignore else */
         if (this.target !== v) {
             this.disconnectTarget();
         }
@@ -51,24 +51,20 @@ export class Pointer extends IValue {
         this.reference.off(handler);
     }
     destroy() {
-        var _a;
-        (_a = this.target) === null || _a === void 0 ? void 0 : _a.off(this.handler);
+        this.target?.off(this.handler);
         this.reference.destroy();
         super.destroy();
     }
     disconnectTarget() {
-        var _a;
-        (_a = this.target) === null || _a === void 0 ? void 0 : _a.off(this.handler);
+        this.target?.off(this.handler);
     }
 }
 export class OwningPointer extends Pointer {
     destroy() {
-        var _a;
-        (_a = this.target) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.target?.destroy();
         super.destroy();
     }
     disconnectTarget() {
-        var _a;
-        (_a = this.target) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.target?.destroy();
     }
 }

package/lib/value/reference.js

@@ -1,5 +1,5 @@
-import { IValue } from "../core/ivalue";
-import { reportError } from "../functional/safety";
+import { IValue } from "../core/ivalue.js";
+import { reportError } from "../functional/safety.js";
 /**
  * Declares a notifiable value
  * @class Reference

package/lib/views/array-view.js

@@ -1,4 +1,4 @@
-import { BaseView } from "./base-view";
+import { BaseView } from "./base-view.js";
 /**
  * Represents a view of an array model
  * @class ArrayView

package/lib/views/base-view.js

@@ -1,4 +1,4 @@
-import { RepeatNode } from "./repeat-node";
+import { RepeatNode } from "./repeat-node.js";
 /**
  * Base class of default views
  * @class BaseView
@@ -6,8 +6,8 @@ import { RepeatNode } from "./repeat-node";
  * @implements IModel
  */
 export class BaseView extends RepeatNode {
-    constructor(input, name) {
-        super(input, name);
+    constructor(input, runner, name) {
+        super(input, runner, name);
     }
     compose() {
         this.addHandler = (id, item) => {

package/lib/views/map-view.js

@@ -1,4 +1,4 @@
-import { BaseView } from "./base-view";
+import { BaseView } from "./base-view.js";
 /**
  * Create a children pack for each map value
  * @class MapView

package/lib/views/repeat-node.js

@@ -1,13 +1,12 @@
-import { config } from "../core/config";
-import { Fragment } from "../node/node";
+import { Fragment } from "../node/node.js";
 /**
  * Repeat node repeats its children
  * @class RepeatNode
  * @extends Fragment
  */
 export class RepeatNode extends Fragment {
-    constructor(input, name) {
-        super(input, name);
+    constructor(input, runner, name) {
+        super(input, runner, name);
         /**
          * Children node hash
          * @type {Map}
@@ -15,8 +14,8 @@ export class RepeatNode extends Fragment {
         this.nodes = new Map();
     }
     createChild(opts, id, item, before) {
-        const _id = id && typeof id === "object" && "id" in id ? id.id : config.debugUi ? JSON.stringify(id) : id;
-        const node = new Fragment({}, `${_id}`);
+        const _id = id && typeof id === "object" && "id" in id ? id.id : id;
+        const node = new Fragment({}, this.runner, `${_id}`);
         node.parent = this;
         this.destroyChild(id, item);
         if (before) {

package/lib/views/set-view.js

@@ -1,12 +1,12 @@
-import { BaseView } from "./base-view";
+import { BaseView } from "./base-view.js";
 /**
  * Create a children pack for each set value
  * @class SetView
  * @extends BaseView
  */
 export class SetView extends BaseView {
-    constructor(input) {
-        super(input, ":set-view");
+    constructor(input, runner) {
+        super(input, runner, ":set-view");
     }
     compose() {
         super.compose();

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "vasille",
-  "description": "Vasille - Safe. Simple. Powerful.",
+  "description": "The first Developer eXperience Orientated front-end framework (core library).",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "3.0.2",
+  "version": "3.2.0",
   "exports": {
-    "import": "./lib/index.js",
-    "browser": "./lib/index.js",
-    "node": "./lib-node/index.js",
-    "require": "./lib-node/index.js"
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./lib/index.js",
+      "browser": "./lib/index.js",
+      "node": "./lib/index.js"
+    },
+    "./web-runner": {
+      "types": "./types/runner/web/runner.d.ts",
+      "import": "./lib/runner/web/runner.js",
+      "browser": "./lib/runner/web/runner.js",
+      "node": "./lib/runner/web/runner.js"
+    }
   },
   "scripts": {
     "prepack": "cp -f ../README.md ./README.md",
     "prettier": "npx prettier src test --write",
     "build": "tsc --build tsconfig.json",
-    "build-node": "tsc --build tsconfig-build-node.json",
     "test": "jest",
     "test-coverage": "jest --coverage",
-    "update-types": "tsc --build tsconfig-types.json",
-    "cdn-create": "node cdn/create.cjs"
+    "update-types": "tsc --build tsconfig-types.json"
   },
   "repository": {
     "type": "git",
@@ -40,21 +46,21 @@
   },
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "devDependencies": {
-    "@types/debug": "4.1.12",
-    "@types/eslint": "9.6.1",
-    "@types/eslint-scope": "3.7.7",
-    "@types/estree": "1.0.6",
-    "@types/events": "3.0.3",
-    "@types/jest": "29.5.13",
-    "@types/jsdom": "21.1.7",
-    "@typescript-eslint/eslint-plugin": "8.8.0",
-    "@typescript-eslint/parser": "8.8.0",
-    "eslint": "9.0.0",
-    "jest": "29.7.0",
-    "jsdom": "25.0.1",
-    "prettier": "3.3.3",
-    "ts-jest": "29.2.5",
-    "tslint-config-prettier": "1.18.0",
-    "typescript": "5.6.2"
+    "@types/debug": "^4.1.12",
+    "@types/eslint": "^9.6.1",
+    "@types/eslint-scope": "^8.3.1",
+    "@types/estree": "^1.0.8",
+    "@types/events": "^3.0.3",
+    "@types/jest": "^30.0.0",
+    "@types/jsdom": "^21.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "eslint": "^9.32.0",
+    "jest": "^30.0.5",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.6.2",
+    "ts-jest": "^29.4.0",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^5.8.3"
   }
 }

package/types/core/core.d.ts

@@ -1,18 +1,13 @@
 import { Destroyable } from "./destroyable.js";
 import { IValue } from "./ivalue.js";
-import { KindOfIValue } from "../value/expression";
-import { Pointer } from "../value/pointer";
+import { KindOfIValue } from "../value/expression.js";
+import { Pointer } from "../value/pointer.js";
 /**
  * A reactive object
  * @class Reactive
  * @extends Destroyable
  */
 export declare class Reactive<T extends object = object> extends Destroyable {
-    /**
-     * A list of user-defined values
-     * @type {Set}
-     */
-    private _watch;
     /**
      * A list of user-defined bindings
      * @type {Set}
@@ -20,40 +15,46 @@ export declare class Reactive<T extends object = object> extends Destroyable {
     private bindings;
     private onDestroy?;
     readonly input: T;
+    readonly state: Record<string, [string, unknown]>;
     constructor(input: T);
     /**
      * Create a reference
      * @param value {*} value to reference
+     * @param name {string} used for debugging internal state
      */
-    ref<T>(value: T): IValue<T>;
+    ref<T>(value: T, name?: string): IValue<T>;
     /**
      * Create a forward-only pointer
      * @param value {IValue} value to point
+     * @param name {string} used for debugging internal state
      */
-    forward<T>(value: IValue<T>): IValue<T>;
+    forward<T>(value: IValue<T>, name?: string): IValue<T>;
     /**
      * Creates a pointer
      * @param value {*} default value to point
+     * @param name {string} used for debugging internal state
      */
-    own<T>(value: IValue<T>): Pointer<T>;
+    own<T>(value: IValue<T>, name?: string): Pointer<T>;
     /**
      * Register a model/dependency
      */
-    register<T extends Destroyable>(data: T): T;
+    register<T extends Destroyable>(data: T, name?: string): T;
     release(data: Destroyable): void;
     /**
      * Creates a watcher
      * @param func {function} function to run on any argument change
      * @param values
      */
-    watch<Args extends unknown[]>(func: (...args: Args) => void, ...values: KindOfIValue<Args>): void;
+    watch<Args extends unknown[]>(func: (...args: Args) => void, values: KindOfIValue<Args>): void;
     /**
      * Creates a computed value
      * @param func {function} function to run on any argument change
      * @param values
+     * @param name {string} used for debugging internal state
      * @return {IValue} the created ivalue
      */
-    expr<T, Args extends unknown[]>(func: (...args: Args) => T, ...values: KindOfIValue<Args>): IValue<T>;
+    expr<T, Args extends unknown[]>(func: (...args: Args) => T, values: KindOfIValue<Args>, name?: string): IValue<T>;
     runOnDestroy(func: () => void): void;
+    addState(method: string, name: string, state: unknown): void;
     destroy(): void;
 }

package/types/index.d.ts

@@ -1,24 +1,22 @@
-import { config } from "./core/config";
-import { Destroyable } from "./core/destroyable";
-import { Reactive } from "./core/core";
-import { IValue } from "./core/ivalue";
-import { reportError, setErrorHandler } from "./functional/safety";
-import { ArrayModel, proxyArrayModel } from "./models/array-model";
-import { Listener } from "./models/listener";
-import { MapModel } from "./models/map-model";
-import { SetModel } from "./models/set-model";
-import { App, Portal } from "./node/app";
-import { Extension, Fragment, INode, Tag, TagOptionsWithSlot } from "./node/node";
-import { Expression, KindOfIValue } from "./value/expression";
-import { Pointer } from "./value/pointer";
-import { Reference } from "./value/reference";
-import { ArrayView } from "./views/array-view";
-import { BaseView } from "./views/base-view";
-import { MapView } from "./views/map-view";
-import { SetView } from "./views/set-view";
-import { Binding } from "./binding/binding";
-import { TagOptions } from "./functional/options";
-import { userError } from "./core/errors";
-import { ListenableModel } from "./models/model";
-import { Watch } from "./node/watch";
-export { Destroyable, IValue, Reference, Pointer, ArrayModel, proxyArrayModel, MapModel, SetModel, BaseView, Listener, ArrayView, MapView, SetView, Fragment, INode, Tag, Extension, App, Portal, Expression, Binding, Reactive, Watch, TagOptions, KindOfIValue, ListenableModel, TagOptionsWithSlot, userError, config, setErrorHandler, reportError, };
+import { Destroyable } from "./core/destroyable.js";
+import { Reactive } from "./core/core.js";
+import { IValue } from "./core/ivalue.js";
+import { reportError, setErrorHandler } from "./functional/safety.js";
+import { ArrayModel, proxyArrayModel } from "./models/array-model.js";
+import { Listener } from "./models/listener.js";
+import { MapModel } from "./models/map-model.js";
+import { SetModel } from "./models/set-model.js";
+import { App, Portal } from "./node/app.js";
+import { Fragment, Tag, TextNode, DebugNode } from "./node/node.js";
+import { Expression, KindOfIValue } from "./value/expression.js";
+import { Pointer } from "./value/pointer.js";
+import { Reference } from "./value/reference.js";
+import { ArrayView } from "./views/array-view.js";
+import { BaseView } from "./views/base-view.js";
+import { MapView } from "./views/map-view.js";
+import { SetView } from "./views/set-view.js";
+import { userError } from "./core/errors.js";
+import { ListenableModel } from "./models/model.js";
+import { Watch } from "./node/watch.js";
+import { Runner } from "./node/runner.js";
+export { Destroyable, IValue, Reference, Pointer, ArrayModel, proxyArrayModel, MapModel, SetModel, BaseView, Listener, ArrayView, MapView, SetView, Fragment, Tag, App, Portal, Expression, Reactive, TextNode, DebugNode, Watch, Runner, KindOfIValue, ListenableModel, userError, setErrorHandler, reportError, };

package/types/node/app.d.ts

@@ -1,26 +1,27 @@
-import { Fragment, Root } from "./node";
+import { Fragment, Root } from "./node.js";
+import { Runner } from "./runner.js";
 /**
  * Represents a Vasille.js application
  * @class App
  * @extends AppNode
  */
-export declare class App<T extends object = object> extends Root<T> {
+export declare class App<Node, Element, TagOptions extends object, T extends object = object> extends Root<Node, Element, TagOptions, T> {
     private node;
     /**
      * Constructs an app node
      * @param node {Element} The root of application
      * @param input
      */
-    constructor(node: Element, input: T);
+    constructor(node: Element, runner: Runner<Node, Element, TagOptions>, input: T);
     appendNode(node: Node): void;
 }
-interface PortalOptions {
+interface PortalOptions<Node, Element, TagOptions extends object> {
     node: Element;
-    slot?: (ctx: Fragment) => void;
+    slot?: (ctx: Fragment<Node, Element, TagOptions>) => void;
 }
-export declare class Portal extends Fragment {
+export declare class Portal<Node, Element, TagOptions extends object> extends Fragment<Node, Element, TagOptions> {
     private node;
-    constructor(input: PortalOptions);
+    constructor(input: PortalOptions<Node, Element, TagOptions>, runner: Runner<Node, Element, TagOptions>);
     appendNode(node: Node): void;
 }
 export {};