vasille 3.2.1 → 4.0.0

package/lib/value/pointer.js

@@ -1,70 +1,61 @@
-import { IValue } from "../core/ivalue.js";
 import { Reference } from "./reference.js";
 /**
- * r/w pointer to a value
- * @class Pointer
- * @extends IValue
+ * Forward only link type
+ * @class Forward
+ * @extends Reference
  */
-export class Pointer extends IValue {
+export class Forward extends Reference {
     /**
-     * Constructs a notifiable bind to a value
-     * @param value {IValue} is initial valu
+     * forwarded value
+     * @type IValue
      */
-    constructor(value) {
-        super();
+    target;
+    /**
+     * Handler to receive updates from forwarded value
+     */
+    handler;
+    /**
+     * Constructs a value forwarder
+     * @param value {IValue} is source of forwarded data
+     * @param ctx lifetime context
+     */
+    constructor(value, ctx) {
+        super(value.V);
         this.handler = (v) => {
-            this.reference.$ = v;
+            this.V = v;
         };
         this.target = value;
-        this.reference = new Reference(value.$);
         value.on(this.handler);
-    }
-    get $() {
-        return this.reference.$;
-    }
-    set $(v) {
-        this.target?.off(this.handler);
-        this.target = null;
-        this.reference.$ = v;
-    }
-    get $$() {
-        return this.reference.$;
-    }
-    set $$(v) {
-        /* istanbul ignore else */
-        if (this.target !== v) {
-            this.disconnectTarget();
-        }
-        if (v instanceof IValue) {
-            this.target = v;
-            this.target.on(this.handler);
-            this.reference.$ = v.$;
-        }
-        else {
-            this.$ = v;
-        }
-    }
-    on(handler) {
-        this.reference.on(handler);
-    }
-    off(handler) {
-        this.reference.off(handler);
+        ctx?.bind(this);
     }
     destroy() {
-        this.target?.off(this.handler);
-        this.reference.destroy();
-        super.destroy();
-    }
-    disconnectTarget() {
-        this.target?.off(this.handler);
+        this.target.off(this.handler);
     }
 }
-export class OwningPointer extends Pointer {
-    destroy() {
-        this.target?.destroy();
-        super.destroy();
+/**
+ * Backward only link type
+ * @class Backward
+ * @extends Reference
+ */
+export class Backward extends Reference {
+    /**
+     * target, which receive the updates
+     * @type IValue
+     */
+    target;
+    /**
+     * Constructs a value backward stream
+     * @param value {IValue} target, which receive the updates
+     */
+    constructor(value) {
+        super(value.V);
+        this.target = value;
+    }
+    get V() {
+        return super.V;
     }
-    disconnectTarget() {
-        this.target?.destroy();
+    set V(value) {
+        super.V = value;
+        this.target.V = value;
     }
 }

package/lib/value/reference.js

@@ -6,6 +6,17 @@ import { reportError } from "../functional/safety.js";
  * @extends IValue
  */
 export class Reference extends IValue {
+    /**
+     * The encapsulated value
+     * @type {*}
+     */
+    state;
+    /**
+     * Array of handlers
+     * @type {Set}
+     * @readonly
+     */
+    onChange;
     /**
      * @param value {any} the initial value
      */
@@ -14,13 +25,20 @@ export class Reference extends IValue {
         this.state = value;
         this.onChange = new Set();
     }
-    get $() {
+    get V() {
         return this.state;
     }
-    set $(value) {
+    set V(value) {
         if (this.state !== value) {
             this.state = value;
-            this.updateDeps(value);
+            this.onChange.forEach(handler => {
+                try {
+                    handler(value);
+                }
+                catch (e) {
+                    reportError(e);
+                }
+            });
         }
     }
     on(handler) {
@@ -29,18 +47,4 @@ export class Reference extends IValue {
     off(handler) {
         this.onChange.delete(handler);
     }
-    destroy() {
-        super.destroy();
-        this.onChange.clear();
-    }
-    updateDeps(value) {
-        this.onChange.forEach(handler => {
-            try {
-                handler(value);
-            }
-            catch (e) {
-                reportError(e);
-            }
-        });
-    }
 }

package/lib/views/array-view.js

@@ -5,13 +5,13 @@ import { BaseView } from "./base-view.js";
  * @extends BaseView
  */
 export class ArrayView extends BaseView {
-    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));
     }
     compose() {
         super.compose();
-        this.input.model.forEach(item => {
-            this.createChild(this.input, item, item);
+        this.model.forEach(item => {
+            this.createChild(item, item);
         });
     }
 }

package/lib/views/base-view.js

@@ -3,25 +3,36 @@ import { RepeatNode } from "./repeat-node.js";
  * Base class of default views
  * @class BaseView
  * @extends RepeatNode
- * @implements IModel
  */
 export class BaseView extends RepeatNode {
-    constructor(input, runner, name) {
-        super(input, runner, name);
+    model;
+    /**
+     * Handler to catch values addition
+     * @type {Function}
+     */
+    addHandler;
+    /**
+     * Handler to catch values removes
+     * @type {Function}
+     */
+    removeHandler;
+    constructor(input, runner) {
+        super(input, runner);
+        this.model = input.model;
     }
     compose() {
         this.addHandler = (id, item) => {
-            this.createChild(this.input, id, item);
+            this.createChild(id, item);
         };
         this.removeHandler = (id, item) => {
             this.destroyChild(id, item);
         };
-        this.input.model.listener.onAdd(this.addHandler);
-        this.input.model.listener.onRemove(this.removeHandler);
+        this.model.listener.onAdd(this.addHandler);
+        this.model.listener.onRemove(this.removeHandler);
     }
     destroy() {
-        this.input.model.listener.offAdd(this.addHandler);
-        this.input.model.listener.offRemove(this.removeHandler);
+        this.model.listener.offAdd(this.addHandler);
+        this.model.listener.offRemove(this.removeHandler);
         super.destroy();
     }
 }

package/lib/views/map-view.js

@@ -7,8 +7,8 @@ import { BaseView } from "./base-view.js";
 export class MapView extends BaseView {
     compose() {
         super.compose();
-        this.input.model.forEach((value, key) => {
-            this.createChild(this.input, key, value);
+        this.model.forEach((value, key) => {
+            this.createChild(key, value);
         });
     }
 }

package/lib/views/repeat-node.js

@@ -5,17 +5,18 @@ import { Fragment } from "../node/node.js";
  * @extends Fragment
  */
 export class RepeatNode extends Fragment {
-    constructor(input, runner, name) {
-        super(input, runner, name);
-        /**
-         * Children node hash
-         * @type {Map}
-         */
-        this.nodes = new Map();
+    /**
+     * Children node hash
+     * @type {Map}
+     */
+    nodes = new Map();
+    slot;
+    constructor(input, runner) {
+        super(runner);
+        this.slot = input.slot;
     }
-    createChild(opts, id, item, before) {
-        const _id = id && typeof id === "object" && "id" in id ? id.id : id;
-        const node = new Fragment({}, this.runner, `${_id}`);
+    createChild(id, item, before) {
+        const node = new Fragment(this.runner);
         node.parent = this;
         this.destroyChild(id, item);
         if (before) {
@@ -30,7 +31,7 @@ export class RepeatNode extends Fragment {
             this.children.add(node);
         }
         this.lastChild = node;
-        opts.slot && opts.slot(node, item, id);
+        this.slot?.(node, item, id);
         this.nodes.set(id, node);
     }
     destroyChild(id, item) {

package/lib/views/set-view.js

@@ -6,12 +6,12 @@ import { BaseView } from "./base-view.js";
  */
 export class SetView extends BaseView {
     constructor(input, runner) {
-        super(input, runner, ":set-view");
+        super(input, runner);
     }
     compose() {
         super.compose();
-        this.input.model.forEach(item => {
-            this.createChild(this.input, item, item);
+        this.model.forEach(item => {
+            this.createChild(item, item);
         });
         return {};
     }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vasille",
-  "description": "The first Developer eXperience Orientated front-end framework (core library).",
+  "description": "The framework designed to build bulletproof frontends (core library).",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
@@ -21,10 +21,10 @@
   "scripts": {
     "prepack": "cp -f ../README.md ./README.md",
     "prettier": "npx prettier src test --write",
+    "prebuild": "rm -rf types lib",
     "build": "tsc --build tsconfig.json",
-    "test": "jest",
-    "test-coverage": "jest --coverage",
-    "update-types": "tsc --build tsconfig-types.json"
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test-coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage"
   },
   "repository": {
     "type": "git",
@@ -41,6 +41,13 @@
   ],
   "author": "lixcode",
   "license": "MIT",
+  "browserslist": [
+    "safari 6",
+    "ie 10",
+    "chrome 23",
+    "firefox 21",
+    "opera 15"
+  ],
   "bugs": {
     "url": "https://github.com/vasille-js/vasille-js/issues"
   },
@@ -53,14 +60,16 @@
     "@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",
+    "@types/node": "^24.2.1",
+    "cross-env": "^10.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-compat": "^6.0.2",
     "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"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.39.0"
   }
 }

package/types/core/core.d.ts

@@ -1,60 +1,16 @@
 import { Destroyable } from "./destroyable.js";
-import { IValue } from "./ivalue.js";
-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 {
+export declare class Reactive implements Destroyable {
     /**
      * A list of user-defined bindings
-     * @type {Set}
      */
-    private bindings;
+    private linked;
     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, 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>, 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>, name?: string): Pointer<T>;
-    /**
-     * Register a model/dependency
-     */
-    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;
-    /**
-     * 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>, name?: string): IValue<T>;
+    bind<T extends Destroyable>(value: T): void;
     runOnDestroy(func: () => void): void;
-    addState(method: string, name: string, state: unknown): void;
     destroy(): void;
 }

package/types/core/destroyable.d.ts

@@ -1,18 +1,8 @@
 /**
  * Mark an object which can be destroyed
- * @interface IDestroyable
+ * @interface Destroyable
  */
-export interface IDestroyable {
-    /**
-     * Garbage collector method
-     */
-    destroy(): void;
-}
-/**
- * Mark an object which can be destroyed
- * @class Destroyable
- */
-export declare class Destroyable implements IDestroyable {
+export interface Destroyable {
     /**
      * Garbage collector method
      */

package/types/core/ivalue.d.ts

@@ -1,20 +1,18 @@
-import { Destroyable } from "./destroyable.js";
 /**
  * Interface which describes a value
  * @class IValue
- * @extends Destroyable
  */
-export declare abstract class IValue<T> extends Destroyable {
+export declare abstract class IValue<T> {
     /**
      * Get the encapsulated value
      * @return {*} the encapsulated value
      */
-    abstract get $(): T;
+    abstract get V(): T;
     /**
      * Sets the encapsulated value
      * @param value {*} value to encapsulate
      */
-    abstract set $(value: T);
+    abstract set V(value: T);
     /**
      * Add a new handler to value change
      * @param handler {function(value : *)} the handler to add

package/types/index.d.ts

@@ -1,22 +1,21 @@
-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, };
+export type { Destroyable } from "./core/destroyable.js";
+export { Reactive } from "./core/core.js";
+export { IValue } from "./core/ivalue.js";
+export { reportError, setErrorHandler } from "./functional/safety.js";
+export { ArrayModel } from "./models/array-model.js";
+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 { Expression, type KindOfIValue } 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";
+export { MapView } from "./views/map-view.js";
+export { SetView } from "./views/set-view.js";
+export { userError } from "./core/errors.js";
+export { type ListenableModel } from "./models/model.js";
+export { Watch } from "./node/watch.js";
+export { type Runner } from "./node/runner.js";

package/types/models/array-model.d.ts

@@ -1,42 +1,43 @@
+import { Reactive } from "../core/core.js";
 import { Listener } from "./listener.js";
 import { ListenableModel } from "./model.js";
 /**
  * Model based on Array class
  * @extends Array
- * @implements IModel
+ * @implements ListenableModel
  */
 export declare class ArrayModel<T> extends Array<T> implements ListenableModel<T, T> {
     listener: Listener<T, T>;
-    passive: boolean;
     /**
      * @param data {Array} input data
+     * @param ctx lifetime context of model
      */
-    constructor(data?: Array<T> | number);
+    constructor(data?: Array<T> | number, ctx?: Reactive);
     /**
-     * Calls Array.fill and notify about changes
+     * Calls `Array.fill` and notify about changes
      * @param value {*} value to fill with
      * @param start {?number} begin index
      * @param end {?number} end index
      */
     fill(value: T, start?: number, end?: number): this;
     /**
-     * Calls Array.pop and notify about changes
+     * Calls `Array.pop` and notify about changes
      * @return {*} removed value
      */
     pop(): T | undefined;
     /**
-     * Calls Array.push and notify about changes
+     * Calls `Array.push` and notify about changes
      * @param items {...*} values to push
-     * @return {number} new length of array
+     * @return {number} new length of the array
      */
     push(...items: Array<T>): number;
     /**
-     * Calls Array.shift and notify about changed
+     * Calls `Array.shift` and notify about changed
      * @return {*} the shifted value
      */
     shift(): T | undefined;
     /**
-     * Calls Array.splice and notify about changed
+     * Calls `Array.splice` and notify about changed
      * @param start {number} start index
      * @param deleteCount {?number} delete count
      * @param items {...*}
@@ -46,10 +47,9 @@ export declare class ArrayModel<T> extends Array<T> implements ListenableModel<T
     /**
      * Calls Array.unshift and notify about changed
      * @param items {...*} values to insert
-     * @return {number} the length after prepend
+     * @return {number} the length after prepending
      */
     unshift(...items: Array<T>): number;
     replace(at: number, with_: T): this;
     destroy(): void;
 }
-export declare function proxyArrayModel<T>(arr: ArrayModel<T>): ArrayModel<T>;

package/types/models/listener.d.ts

@@ -18,31 +18,31 @@ export declare class Listener<ValueT, IndexT = string | number> {
      * @param index {*} index of value
      * @param value {*} value of added item
      */
-    emitAdded(index: IndexT, value: ValueT): void;
+    emitAdded(index?: IndexT, value?: ValueT): void;
     /**
      * Emits removed event to listeners
      * @param index {*} index of removed value
      * @param value {*} value of removed item
      */
-    emitRemoved(index: IndexT, value: ValueT): void;
+    emitRemoved(index?: IndexT, value?: ValueT): void;
     /**
      * Adds a handler to added event
      * @param handler {function} function to run on event emitting
      */
-    onAdd(handler: (index: IndexT, value: ValueT) => void): void;
+    onAdd(handler: (index?: IndexT, value?: ValueT) => void): void;
     /**
      * Adds a handler to removed event
      * @param handler {function} function to run on event emitting
      */
-    onRemove(handler: (index: IndexT, value: ValueT) => void): void;
+    onRemove(handler: (index?: IndexT, value?: ValueT) => void): void;
     /**
-     * Removes an handler from added event
+     * Removes a handler from added event
      * @param handler {function} handler to remove
      */
-    offAdd(handler: (index: IndexT, value: ValueT) => void): void;
+    offAdd(handler: (index?: IndexT, value?: ValueT) => void): void;
     /**
-     * Removes an handler form removed event
+     * Removes a handler form removed event
      * @param handler {function} handler to remove
      */
-    offRemove(handler: (index: IndexT, value: ValueT) => void): void;
+    offRemove(handler: (index?: IndexT, value?: ValueT) => void): void;
 }

package/types/models/map-model.d.ts

@@ -1,30 +1,32 @@
+import { Reactive } from "../core/core.js";
 import { Listener } from "./listener.js";
 import { ListenableModel } from "./model.js";
 /**
- * A Map based memory
+ * A `Map` based memory
  * @class MapModel
  * @extends Map
- * @implements IModel
+ * @implements ListenableModel
  */
 export declare class MapModel<K, T> extends Map<K, T> implements ListenableModel<K, T> {
     listener: Listener<T, K>;
     /**
      * Constructs a map model
      * @param map {[*, *][]} input data
+     * @param ctx lifetime context
      */
-    constructor(map?: [K, T][]);
+    constructor(map?: [K, T][], ctx?: Reactive);
     /**
-     * Calls Map.clear and notify about changes
+     * Calls `Map.clear` and notify about changes
      */
     clear(): void;
     /**
-     * Calls Map.delete and notify abut changes
+     * Calls `Map.delete` and notify abut changes
      * @param key {*} key
      * @return {boolean} true if removed something, otherwise false
      */
     delete(key: K): boolean;
     /**
-     * Calls Map.set and notify abut changes
+     * Calls `Map.set` and notify abut changes
      * @param key {*} key
      * @param value {*} value
      * @return {MapModel} a pointer to this