vasille-jsx 4.3.4 → 5.0.1

package/README.md

@@ -1,19 +1,32 @@
-# Vasille
+# Steel Frame
 
-![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v5/doc/img/logo.png)
 
-`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.
+`SteelFrameKit` is a front-end development kit, which is developed to provide fault tolerant web applications.
 
-[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
+[![npm](https://img.shields.io/npm/v/steel-frame?style=flat-square)](https://www.npmjs.com/package/steel-frame)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/vasille-js/steel-frame)
+[![Coverage Status](https://coveralls.io/repos/github/vasille-js/steel-frame/badge.svg?branch=v5)](https://coveralls.io/github/vasille-js/steel-frame?branch=v5)
 
 ## Table of content
 
-* [Installation](#installation)
-* [How to use Vasille](#how-to-use-vasille)
-* [How SAFE is Vasille](#how-safe-is-vasille)
-* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
-* [How POWERFUL is Vasille](#how-powerful-is-vasille)
-* [Road Map](#road-map)
+- [Steel Frame](#steel-frame)
+  - [Table of content](#table-of-content)
+  - [Installation](#installation)
+  - [How to use SteelFramekit](#how-to-use-steelframekit)
+    - [Full documentation:](#full-documentation)
+    - [Examples](#examples)
+  - [How SAFE is SteelFrameKit](#how-safe-is-steelframekit)
+  - [How INTUITIVE is SteelFrameKit](#how-intuitive-is-steelframekit)
+  - [How POWERFUL is SteelFrameKit](#how-powerful-is-steelframekit)
+  - [Road map](#road-map)
+  - [Change log](#change-log)
+    - [5.0](#50)
+    - [4.0 - 4.3](#40---43)
+    - [3.0 - 3.2](#30---32)
+    - [2.0 - 2.3](#20---23)
+    - [1.0 - 1.2](#10---12)
+  - [Questions](#questions)
 
 
 <hr>
@@ -21,21 +34,22 @@
 ## Installation
 
 ```
-npm install vasille-web --save
+npm install steel-frame --save
 ```
 
-## How to use Vasille
+## How to use SteelFramekit
 
 Create an app from a template
 
 ```bash
-$ npm create vasille
+$ npm create steel-frame
 ```
 
 ### Full documentation:
-* [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md)
-* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v4/doc/Router-API.md)
-* [Vasille Compostion function](https://github.com/vasille-js/vasille-js/blob/v4/doc/Compositions.md)
+* [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
+* [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
+* [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
+* [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -43,14 +57,14 @@ $ npm create vasille
 
 <hr>
 
-## How SAFE is Vasille
+## How SAFE is SteelFrameKit
 
 The safe of your application is ensured by
 * `100%` coverage of code by unit tests.
   Each function, each branch is working as designed.
 * OOP, DRY, KISS and SOLID principles are applied.
 * `strong typing` makes your javascript/typescript code safe as C++ code.
-All entities of `vasille` core library are strongly typed, including:
+All entities of `SteelFrameKit` core library are strongly typed, including:
   * data fields & properties.
   * computed properties (function parameters and result).
   * methods.
@@ -60,11 +74,11 @@ All entities of `vasille` core library are strongly typed, including:
   * references to children.
 * No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
 
-## How INTUITIVE is Vasille
+## How INTUITIVE is SteelFrameKit
 
 There is the "Hello World":
 ```typescript jsx
-import { compose, mount } from "vasille-dx";
+import { compose, mount } from "steel-frame";
 
 const App = compose(() => {
   <p>Hello world</p>;
@@ -73,60 +87,76 @@ const App = compose(() => {
 mount(document.body, App, {});
 ```
 
-## How POWERFUL is Vasille
+## How POWERFUL is SteelFrameKit
 
 All of these are supported:
 * Components.
 * Reactive values (observables).
 * Inline computed values.
 * Multiline computed values.
-* HTML & SVG tags.
+* HTML tags.
 * Component custom slots.
 * 2-way data binding in components.
 * Logic block (if, else).
 * Loops (array, map, set).
+* Dependency injection.
 
 <hr>
 
 ## Road map
 
-* [x] Update the `Vasille Core` library to version 3.0.
 * [x] `100%` Test Coverage for core Library v3.
-* [x] Develop the `Vasille JSX` library.
+* [x] Develop the `JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
-* [x] Develop the `Vasille Babel Plugin`.
+* [x] Develop the `Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
 * [x] Add router.
 * [x] Add SSG (static site generation).
+* [ ] Develop tools extension for debugging (WIP).
 * [ ] Add SSR (server side rendering).
-* [ ] Develop tools extension for debugging.
 
 ## Change log
 
-### 4.3.0
+We respect semantic versioning:
+- Major version is increased when we make incompatible API changes.
+- Minor version is increased when we add functionality.
+- Patch version is increased when we fix bugs.
 
-Add new function `safe` which make functions safe, errors are reported automatically.
+### 5.0
 
-### 4.2.0
+- Add support for context and dependencies injection.
+- New developement direction: `fault tolerant`.
+- Renamed to `steel-frame`. **[API change]**
+- Removed `forward` and `backward` functions. **[API change]**
+- Removed `Debug` component. **[API change]**
 
-Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
+### 4.0 - 4.3
 
-### 4.1.0
+- Initial version of the framework with file based routing and building scripts (`web dev` and `web build spa`).
+- Reactive values naming switched to `$` prefix. **[API change]**
+- `4.1` Added SSG (static site generation) as build option `web build static`.
+- `4.2` Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
+- `4.3` Add new function `safe` which make functions safe, errors are reported automatically.
 
-Added SSG (static site generation) as build option `vasille-web build static`.
+### 3.0 - 3.2
 
-### 4.0.0
+- Switch to a babel plugin to compile components code. **[API change]**
+- 100% of code has been covered with unit tests.
+- New developement direction: `keep it simple`.
 
-Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).
+### 2.0 - 2.3
+
+- Introduces components compilation via a typescript plugin. **[API change]**
+- New developement direction: `write less, do more`.
+
+### 1.0 - 1.2
+
+- Initial version of core library.
+- Developemnt direction: `performance-first`.
 
 ## Questions
 
 If you have questions, feel free to contact the maintainer of the project:
 
 * [Author's Email](mailto:vas.lixcode@gmail.com)
-* [Author's Telegram](https://t.me/lixcode)
-
-<hr>
-
-**Made in Moldova** 🇲🇩

package/lib/components.js

@@ -72,9 +72,6 @@ export function Watch({ $model, slot: _slot }, ctx, defaultSlot) {
         ctx.create(new CoreWatch({ model: $model, slot: safe(slot) }, ctx.runner));
     }
 }
-export function Debug({ $model }, ctx) {
-    ctx.debug($model);
-}
 export function Delay({ time, slot: _slot }, ctx, defaultSlot) {
     const fragment = new Fragment(ctx.runner);
     const slot = _slot ?? defaultSlot;

package/lib/compose.js

@@ -25,14 +25,10 @@ export function store(fn) {
     return fn(new Reactive());
 }
 export function model(fn) {
-    return o => {
+    return (o, parent) => {
         const ctx = new Reactive();
-        return {
-            ...fn(ctx, o),
-            destroy() {
-                ctx.destroy();
-            },
-        };
+        parent?.bind(ctx);
+        return fn(ctx, o);
     };
 }
 export function mount(tag, view, runner, $) {

package/lib/dev/components.js

@@ -0,0 +1,103 @@
+import { reportError, safe, userError } from "vasille";
+import { DevArrayModel, DevArrayView, DevFragment, DevMapModel, DevMapView, DevSetModel, DevSetView, DevSwitchedNode, DevWatch as DevCoreWatch, } from "vasille/dev";
+export function DevSlot({ model, slot, ...options }, ctx, defaultSlot, usage) {
+    try {
+        if (model) {
+            model(options, ctx);
+        }
+        else if (slot) {
+            slot({}, ctx);
+        }
+        else if (defaultSlot) {
+            defaultSlot(ctx);
+        }
+    }
+    catch (e) {
+        ctx.runner.inspector.reportComponentSlotError({
+            targetId: "id" in ctx && typeof ctx.id === "number" ? ctx.id : 0,
+            error: e,
+            usage: usage,
+            time: Date.now(),
+        });
+        reportError(e);
+    }
+}
+export function DevSwitch(options, ctx, _slot, usage) {
+    ctx.create(new DevSwitchedNode(usage, ctx.runner, options.cases, options.default));
+}
+export function DevFor({ of: model, slot: _slot }, ctx, defaultSlot, usage) {
+    const slot = _slot ?? defaultSlot;
+    if (!slot) {
+        return;
+    }
+    if (model instanceof DevArrayModel) {
+        ctx.create(new DevArrayView({
+            model,
+            slot: slot,
+        }, ctx.runner, usage));
+    }
+    else if (model instanceof DevMapModel) {
+        ctx.create(new DevMapView({
+            model,
+            slot,
+        }, ctx.runner, usage));
+    }
+    else if (model instanceof DevSetModel) {
+        ctx.create(new DevSetView({
+            model,
+            slot: slot,
+        }, ctx.runner, usage));
+    }
+    // fallback if is used external Array/Map/Set
+    else {
+        const safeSlot = safe(slot);
+        console.warn("Vasille <For of/> fallback detected. Please provide reactive data.");
+        if (model instanceof Array) {
+            model.forEach((value) => {
+                safeSlot(ctx, value, value);
+            });
+        }
+        else if (model instanceof Map) {
+            model.forEach((value, key) => {
+                safeSlot(ctx, value, key);
+            });
+        }
+        else if (model instanceof Set) {
+            model.forEach(value => {
+                safeSlot(ctx, value, value);
+            });
+        }
+        else {
+            throw userError("wrong use of `<For of/>` component", "wrong-model");
+        }
+    }
+}
+export function DevWatch({ $model, slot: _slot }, ctx, defaultSlot, usage) {
+    const slot = _slot ?? defaultSlot;
+    /* istanbul ignore else */
+    if (slot) {
+        ctx.create(new DevCoreWatch({ model: $model, slot: safe(slot) }, ctx.runner, usage));
+    }
+}
+export function DevDelay({ time, slot: _slot }, ctx, defaultSlot, usage) {
+    const fragment = new DevFragment(ctx.runner, null, usage, "Delay", {
+        time,
+        slot: _slot,
+    });
+    const slot = _slot ?? defaultSlot;
+    let timer;
+    ctx.create(fragment, function (node) {
+        /* istanbul ignore else */
+        if (slot) {
+            timer = setTimeout(() => {
+                safe(slot)(node);
+                timer = undefined;
+            }, time);
+        }
+        node.runOnDestroy(() => {
+            if (timer !== undefined) {
+                clearTimeout(timer);
+            }
+        });
+    });
+}

package/lib/dev/compose.js

@@ -0,0 +1,72 @@
+import { DevReactive, remapObject, toDevIdOrValue } from "vasille/dev";
+import { DevApp, DevFragment, ModelId } from "vasille/dev";
+import { earlyInspector } from "./early-inspector.js";
+export function devView(renderer, declaration, name) {
+    return function (props, node, slot, usage) {
+        const { callback } = props;
+        if (!node) {
+            throw new Error("Vasille: Component context is missing");
+        }
+        const frag = new DevFragment(node.runner, declaration, usage ?? null, name, props);
+        if (slot) {
+            props.slot = slot;
+        }
+        node.create(frag);
+        try {
+            const result = renderer(frag, props);
+            if (result !== undefined && result !== null && callback) {
+                callback(result);
+            }
+        }
+        catch (e) {
+            node.runner.inspector.reportComponentError({
+                targetId: frag.id,
+                error: e,
+                time: Date.now(),
+            });
+            reportError(e);
+        }
+        finally {
+            node.runner.inspector.composeTime({
+                id: frag.id,
+                time: Date.now(),
+            });
+        }
+    };
+}
+export function devStore(fn, declaration, name) {
+    const reactive = new DevReactive({ inspector: earlyInspector });
+    earlyInspector.createStore({ id: reactive.id, declaration, name, time: Date.now() });
+    return fn(reactive);
+}
+export function devModel(fn, declaration, name) {
+    return (o, parent, usage) => {
+        const ctx = new DevReactive({ inspector: earlyInspector });
+        const id = ctx.id;
+        earlyInspector.createCustomModel({
+            id,
+            declaration,
+            usage,
+            name,
+            time: Date.now(),
+            props: remapObject(o, toDevIdOrValue),
+        });
+        if (parent) {
+            parent.runOnDestroy(() => ctx.destroy());
+        }
+        return {
+            ...fn(ctx, o),
+            [ModelId]: id,
+        };
+    };
+}
+export function devMount(tag, view, runner, $, inspector) {
+    const root = new DevApp(tag, runner);
+    const frag = new DevFragment(runner, null, null, "Root", {});
+    // share information about created stores
+    earlyInspector.connect(inspector);
+    root.create(frag, function () {
+        view($, frag);
+    });
+    return root;
+}

package/lib/dev/early-inspector.js

@@ -0,0 +1,111 @@
+export class AbstractInspector {
+    addContextState(state) {
+        this.send(this.addContextState.name, state);
+    }
+    composeTime(time) {
+        this.send(this.composeTime.name, time);
+    }
+    createComponent(comp) {
+        this.send(this.createComponent.name, comp);
+    }
+    createCustomModel(model) {
+        this.send(this.createCustomModel.name, model);
+    }
+    createModel(model) {
+        this.send(this.createModel.name, model);
+    }
+    createNode(node) {
+        this.send(this.createNode.name, node);
+    }
+    createStore(store) {
+        this.send(this.createStore.name, store);
+    }
+    createTag(tag) {
+        this.send(this.createTag.name, tag);
+    }
+    destroy(data) {
+        this.send(this.destroy.name, data);
+    }
+    eventTrigger(call) {
+        this.send(this.eventTrigger.name, call);
+    }
+    functionCall(call) {
+        this.send(this.functionCall.name, call);
+    }
+    functionReturn(result) {
+        this.send(this.functionReturn.name, result);
+    }
+    functionThrows(error) {
+        this.send(this.functionThrows.name, error);
+    }
+    newExpression(expr) {
+        this.send(this.newExpression.name, expr);
+    }
+    newReference(ref) {
+        this.send(this.newReference.name, ref);
+    }
+    registerExecutionPosition(pos) {
+        this.send(this.registerExecutionPosition.name, pos);
+    }
+    registeredRoutes(routes) {
+        this.send(this.registeredRoutes.name, routes);
+    }
+    reportComponentError(error) {
+        this.send(this.reportComponentError.name, error);
+    }
+    reportComponentSlotError(error) {
+        this.send(this.reportComponentSlotError.name, error);
+    }
+    reportError(err) {
+        this.send(this.reportError.name, err);
+    }
+    reportExpressionCalculationError(error) {
+        this.send(this.reportExpressionCalculationError.name, error);
+    }
+    reportReferenceError(error) {
+        this.send(this.reportReferenceError.name, error);
+    }
+    routerActionCall(call) {
+        this.send(this.routerActionCall.name, call);
+    }
+    routerStateChange(change) {
+        this.send(this.routerStateChange.name, change);
+    }
+    routerTargetResult(data) {
+        this.send(this.routerTargetResult.name, data);
+    }
+    setElementParent(parent) {
+        this.send(this.setElementParent.name, parent);
+    }
+    updateExpression(update) {
+        this.send(this.updateExpression.name, update);
+    }
+    updateModel(update) {
+        this.send(this.updateModel.name, update);
+    }
+    updateReference(update) {
+        this.send(this.updateReference.name, update);
+    }
+}
+export class EarlyInspector extends AbstractInspector {
+    constructor() {
+        super(...arguments);
+        this.queue = [];
+    }
+    connect(inspector) {
+        this.inspector = inspector;
+        for (const item of this.queue) {
+            inspector[item[0]](item[1]);
+        }
+        this.queue = [];
+    }
+    send(name, data) {
+        if (this.inspector) {
+            this.inspector[name](data);
+        }
+        else {
+            this.queue.push([name, data]);
+        }
+    }
+}
+export const earlyInspector = new EarlyInspector();

package/lib/dev/index.js

@@ -0,0 +1,21 @@
+import { setErrorHandler as coreSetErrorHandler } from "vasille";
+import { earlyInspector } from "./early-inspector.js";
+export { DevDelay, DevWatch, DevFor, DevSwitch, DevSlot } from "./components.js";
+export { devStore, devModel, devMount, devView } from "./compose.js";
+export { devArrayModel, devMapModel, devEnsure, devExpr, devMatch, devSetModel, devRef, devSet } from "./internal.js";
+export { devAwaited } from "./library.js";
+export { AbstractInspector, EarlyInspector, earlyInspector } from "./early-inspector.js";
+function devErrorHandler(e) {
+    earlyInspector.reportError({
+        targetId: 0,
+        error: e instanceof Error ? (e.stack ?? e.message) : `${e}`,
+        time: Date.now(),
+    });
+}
+coreSetErrorHandler(devErrorHandler);
+export function setErrorHandler(fn) {
+    coreSetErrorHandler(e => {
+        devErrorHandler(e);
+        fn(e);
+    });
+}

package/lib/dev/internal.js

@@ -0,0 +1,33 @@
+import { DevArrayModel, DevExpression, DevIValue, DevMapModel, DevReference, DevSetModel, } from "vasille/dev";
+import { match, set } from "../internal.js";
+export function devExpr(ctx, func, values, depsCode, declaration, inspector) {
+    return new DevExpression(func, values, ctx, depsCode, declaration, inspector, false);
+}
+export function devRef(v, declaration, inspector) {
+    return new DevReference(v, declaration, inspector);
+}
+export function devSetModel(inspector, usage, ctx, data) {
+    return new DevSetModel(inspector, usage, data, ctx);
+}
+export function devMapModel(inspector, usage, ctx, data) {
+    return new DevMapModel(inspector, usage, data, ctx);
+}
+export function devArrayModel(inspector, usage, ctx, data) {
+    return new DevArrayModel(inspector, usage, data, ctx);
+}
+export function devEnsure(obj, key, declaration, inspector) {
+    if (!obj) {
+        return undefined;
+    }
+    return key in obj ? obj[key] : (obj[key] = devRef(undefined, declaration, inspector));
+}
+export function devMatch(name, data, declaration, inspector) {
+    return match(name, data, v => devRef(v, declaration, inspector));
+}
+export function devSet(o, key, value, declaration, inspector, executionPosition) {
+    if (o[key] instanceof DevIValue) {
+        o[key].update(value, executionPosition);
+        return value;
+    }
+    return set(o, key, value, v => devRef(v, declaration, inspector));
+}

package/lib/dev/library.js

@@ -0,0 +1,8 @@
+import { awaited } from "../library.js";
+import { devRef } from "./internal.js";
+export function devAwaited(target, callback, declaration, inspector) {
+    let i = 0;
+    const result = awaited(target, v => devRef(v, declaration[i++], inspector));
+    callback(result[0], result[1]);
+    return result;
+}

package/lib/index.js

@@ -1,5 +1,5 @@
-export { Debug, Delay, For, Slot, Watch, Switch } from "./components.js";
+export { Delay, For, Slot, Watch, Switch } from "./components.js";
 export { view, mount, model, store } from "./compose.js";
 export { awaited } from "./library.js";
-export { ref, arrayModel, backward, mapModel, expr, setModel, forward, set, ensure, match, extract, } from "./internal.js";
+export { ref, arrayModel, mapModel, expr, setModel, set, ensure, match } from "./internal.js";
 export { setErrorHandler } from "vasille";

package/lib/internal.js

@@ -1,13 +1,7 @@
-import { IValue, Expression, Reference, Forward, Backward, SetModel, MapModel, ArrayModel, } from "vasille";
+import { IValue, Expression, Reference, SetModel, MapModel, ArrayModel } from "vasille";
 export function expr(ctx, func, values) {
     return new Expression(func, values, ctx);
 }
-export function forward(ctx, v) {
-    return new Forward(v, ctx);
-}
-export function backward(v) {
-    return new Backward(v);
-}
 /**
  * It transforms a non-reactive value to a reactive one.
  * 1. `let a = 0` to `const a = ref(0)`
@@ -40,19 +34,19 @@ export function arrayModel(ctx, data) {
  * Use when a value must be IValue but can be undefined
  * 1. `let a = obj.$key` to `const a = ensure(obj.$key)`
  */
-export function ensure(data) {
-    return data instanceof IValue ? data : new Reference(data);
+export function ensure(obj, key) {
+    return !obj ? ref(undefined) : key in obj ? obj[key] : (obj[key] = ref(undefined));
 }
 /**
  * Used for destruction with computed values
  * 1. `{[a]: a1} = {x: 2}` to `{[a]: a1 = match("a1")} = {x: 2}`
  * 1. `{[a]: a1 = 3} = {x: 2}` to `{[a]: a1 = match("a1", 3)} = {x: 2}`
  */
-export function match(name, data) {
+export function match(name, data, createRef = ref) {
     const iValueRequired = typeof name === "string" && name.startsWith("$");
     const isIValue = data instanceof IValue;
     if (iValueRequired && !isIValue) {
-        return new Reference(data);
+        return createRef(data);
     }
     if (!iValueRequired && isIValue) {
         return data.V;
@@ -64,7 +58,7 @@ export function match(name, data) {
  * 1. `obj.$key = 23` to `set(obj, "$key", 23)`
  * 2. `arr[0] = 23` to `set(arr, 0, 23)`
  */
-export function set(o, key, value) {
+export function set(o, key, value, createRef = ref) {
     if (o[key] instanceof IValue) {
         o[key].V = value;
     }
@@ -72,13 +66,10 @@ export function set(o, key, value) {
         o.replace(key, value);
     }
     else if (typeof key === "string" && key.charAt(0) === "$") {
-        o[key] = new Reference(value);
+        o[key] = createRef(value);
     }
     else {
         o[key] = value;
     }
     return value;
 }
-export function extract(value) {
-    return value instanceof IValue ? value.V : value;
-}

package/lib/library.js

@@ -1,7 +1,7 @@
 import { ref } from "./internal.js";
-export function awaited(target) {
-    const value = ref(undefined);
-    const err = ref(undefined);
+export function awaited(target, createRef = ref) {
+    const err = createRef(undefined);
+    const value = createRef(undefined);
     let running = false;
     function run() {
         if (running) {

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "vasille-jsx",
-  "version": "4.3.4",
+  "version": "5.0.1",
   "description": "The same framework which is designed to build bulletproof frontends (JSX components)",
   "main": "lib/index.js",
   "exports": {
-    "types": "./types/index.d.ts",
-    "import": "./lib/index.js",
-    "browser": "./lib/index.js"
+      ".": {
+          "types": "./types/index.d.ts",
+          "import": "./lib/index.js",
+          "browser": "./lib/index.js"
+      },
+      "./dev": {
+          "types": "./types/dev/index.d.ts",
+          "import": "./lib/dev/index.js",
+          "browser": "./lib/dev/index.js"
+      }
   },
   "types": "./types/index.d.ts",
   "scripts": {
@@ -43,9 +50,6 @@
     "firefox 21",
     "opera 15"
   ],
-  "dependencies": {
-    "vasille": "^4.3.0"
-  },
   "devDependencies": {
     "@types/jest": "^30.0.0",
     "@types/jsdom": "^21.1.7",
@@ -53,11 +57,14 @@
     "cross-env": "^10.0.0",
     "eslint": "^9.33.0",
     "eslint-plugin-compat": "^6.0.2",
-    "jest": "^30.2.0",
+    "jest": "^30.0.5",
     "jsdom": "^26.1.0",
     "prettier": "^3.6.2",
     "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.39.1"
+  },
+  "dependencies": {
+    "vasille": "^5.0.0"
   }
 }

package/types/components.d.ts

@@ -23,10 +23,6 @@ interface WatchOptions<Node, Element, TagOptions extends object, T> {
     slot?: (ctx: Fragment<Node, Element, TagOptions>, value: T) => void;
 }
 export declare function Watch<Node, Element, TagOptions extends object, T>({ $model, slot: _slot }: WatchOptions<Node, Element, TagOptions, T>, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: (ctx: Fragment<Node, Element, TagOptions>) => void): void;
-interface DebugOptions {
-    $model: IValue<unknown>;
-}
-export declare function Debug<Node, Element, TagOptions extends object>({ $model }: DebugOptions, ctx: Fragment<Node, Element, TagOptions>): void;
 interface DelayOptions<Node, Element, TagOptions extends object> {
     time?: number;
     slot?: (ctx: Fragment<Node, Element, TagOptions>) => unknown;

package/types/compose.d.ts

@@ -1,5 +1,5 @@
-import { Fragment, App, Runner, Reactive, Destroyable } from "vasille";
-interface CompositionProps {
+import { Fragment, App, Runner, Reactive } from "vasille";
+export interface CompositionProps {
     slot?: (...args: any[]) => void;
 }
 export type Composed<Node, Element, TagOptions extends object, In extends CompositionProps, Out> = ($: In & {
@@ -7,6 +7,5 @@ export type Composed<Node, Element, TagOptions extends object, In extends Compos
 }, node?: Fragment<Node, Element, TagOptions>, slot?: In["slot"]) => void;
 export declare function view<Node, Element, TagOptions extends object, In extends CompositionProps, Out>(renderer: (node: Fragment<Node, Element, TagOptions>, input: In) => Out): Composed<Node, Element, TagOptions, In, Out>;
 export declare function store<Out extends object>(fn: (ctx: Reactive) => Out): Out;
-export declare function model<In extends object, Out extends object>(fn: (ctx: Reactive, o: In) => Out): (o: In) => Out & Destroyable;
+export declare function model<In extends object, Out extends object>(fn: (ctx: Reactive, o: In) => Out): (o: In, parent?: Reactive) => Out;
 export declare function mount<Node, Element, TagOptions extends object, T>(tag: Element, view: ($: T, node: Fragment<Node, Element, TagOptions>) => unknown, runner: Runner<Node, Element, TagOptions>, $: T): App<Node, Element, TagOptions>;
-export {};

package/types/dev/components.d.ts

@@ -0,0 +1,33 @@
+import { Fragment } from "vasille";
+import { DevIValue, StaticPosition } from "vasille/dev";
+import { IDevRunner } from "vasille/dev";
+interface DevSlotOptions<Node, Element, TagOptions extends object, T extends object> {
+    model?: (input: T, ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void;
+    slot?: (input: object, ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void;
+}
+export declare function DevSlot<Node, Element, TagOptions extends object, T extends object = {}>({ model, slot, ...options }: DevSlotOptions<Node, Element, TagOptions, T> & T, ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, defaultSlot: ((ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void) | undefined, usage: StaticPosition): void;
+interface DevSwitchOptions<Node, Element, TagOptions extends object> {
+    cases: {
+        $case: DevIValue<unknown>;
+        slot: (ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void;
+    }[];
+    default?: (ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void;
+    slot?: never;
+}
+export declare function DevSwitch<Node, Element, TagOptions extends object>(options: DevSwitchOptions<Node, Element, TagOptions>, ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, _slot: undefined, usage: StaticPosition): void;
+interface DevForOptions<Node, Element, TagOptions extends object, T, K, V> {
+    of: T;
+    slot?: (ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, value: T, index: K) => void;
+}
+export declare function DevFor<Node, Element, TagOptions extends object, T extends Set<unknown> | Map<unknown, unknown> | unknown[], K = T extends unknown[] ? number : T extends Set<infer R> ? R : T extends Map<infer R, unknown> ? R : never, V = T extends (infer R)[] ? R : T extends Set<infer R> ? R : T extends Map<unknown, infer R> ? R : never>({ of: model, slot: _slot }: DevForOptions<Node, Element, TagOptions, T, K, V>, ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, defaultSlot: ((ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void) | undefined, usage: StaticPosition): void;
+interface DevWatchOptions<Node, Element, TagOptions extends object, T> {
+    $model: DevIValue<T>;
+    slot?: (ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, value: T) => void;
+}
+export declare function DevWatch<Node, Element, TagOptions extends object, T>({ $model, slot: _slot }: DevWatchOptions<Node, Element, TagOptions, T>, ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, defaultSlot: (ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void | undefined, usage: StaticPosition): void;
+interface DevDelayOptions<Node, Element, TagOptions extends object> {
+    time?: number;
+    slot?: (ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => unknown;
+}
+export declare function DevDelay<Node, Element, TagOptions extends object>({ time, slot: _slot }: DevDelayOptions<Node, Element, TagOptions>, ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, defaultSlot: (ctx: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>) => void | undefined, usage: StaticPosition): void;
+export {};

package/types/dev/compose.d.ts

@@ -0,0 +1,12 @@
+import { App, Fragment, Reactive } from "vasille";
+import { DevReactive, StaticPosition } from "vasille/dev";
+import { IDevRunner } from "vasille/dev";
+import { CompositionProps } from "../compose.js";
+import { DevRunner, DevTagOptions, Inspector } from "vasille/dev";
+export type DevComposed<Node, Element, TagOptions extends object, In extends CompositionProps, Out> = ($: In & {
+    callback?(data: Out | undefined): void;
+}, node?: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, slot?: In["slot"], usage?: StaticPosition) => void;
+export declare function devView<Node, Element, TagOptions extends object, In extends CompositionProps, Out>(renderer: (node: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, input: In) => Out, declaration: StaticPosition, name: string): DevComposed<Node, Element, TagOptions, In, Out>;
+export declare function devStore<Out extends object>(fn: (ctx: Reactive) => Out, declaration: StaticPosition, name: string): Out;
+export declare function devModel<In extends object, Out extends object>(fn: (ctx: DevReactive<IDevRunner<unknown, unknown, object>>, o: In) => Out, declaration: StaticPosition, name: string): (o: In, parent: Reactive | undefined, usage: StaticPosition) => Out;
+export declare function devMount<T>(tag: Element, view: ($: T, node: Fragment<Node, Element, DevTagOptions, IDevRunner<Node, Element, DevTagOptions>>) => unknown, runner: DevRunner, $: T, inspector: Inspector): App<Node, Element, DevTagOptions>;

package/types/dev/early-inspector.d.ts

@@ -0,0 +1,40 @@
+import { Inspector, ProtocolComponent, ProtocolCustomModel, ProtocolExecutionPosition, ProtocolExpression, ProtocolExpressionError, ProtocolExpressionUpdate, ProtocolModel, ProtocolModelUpdate, ProtocolNode, ProtocolParent, ProtocolReference, ProtocolReferenceError, ProtocolReferenceUpdate, ProtocolState, ProtocolStore, ProtocolTag, ProtocolRouterActionCall, ProtocolRouterStateChange, ProtocolRouterTargetResult, ProtocolRoutes, ProtocolSlotError, ProtocolFunctionCall, ProtocolFunctionResult, ProtocolFunctionError, ProtocolEventTrigger, ProtocolComposeTime, ProtocolError, DestroyData } from "vasille/dev";
+export declare abstract class AbstractInspector implements Inspector {
+    addContextState(state: ProtocolState): void;
+    composeTime(time: ProtocolComposeTime): void;
+    createComponent(comp: ProtocolComponent): void;
+    createCustomModel(model: ProtocolCustomModel): void;
+    createModel(model: ProtocolModel): void;
+    createNode(node: ProtocolNode): void;
+    createStore(store: ProtocolStore): void;
+    createTag(tag: ProtocolTag): void;
+    destroy(data: DestroyData): void;
+    eventTrigger(call: ProtocolEventTrigger): void;
+    functionCall(call: ProtocolFunctionCall): void;
+    functionReturn(result: ProtocolFunctionResult): void;
+    functionThrows(error: ProtocolFunctionError): void;
+    newExpression(expr: ProtocolExpression): void;
+    newReference(ref: ProtocolReference): void;
+    registerExecutionPosition(pos: ProtocolExecutionPosition): void;
+    registeredRoutes(routes: ProtocolRoutes): void;
+    reportComponentError(error: ProtocolError): void;
+    reportComponentSlotError(error: ProtocolSlotError): void;
+    reportError(err: ProtocolError): void;
+    reportExpressionCalculationError(error: ProtocolExpressionError): void;
+    reportReferenceError(error: ProtocolReferenceError): void;
+    routerActionCall(call: ProtocolRouterActionCall): void;
+    routerStateChange(change: ProtocolRouterStateChange): void;
+    routerTargetResult(data: ProtocolRouterTargetResult): void;
+    setElementParent(parent: ProtocolParent): void;
+    updateExpression(update: ProtocolExpressionUpdate): void;
+    updateModel(update: ProtocolModelUpdate): void;
+    updateReference(update: ProtocolReferenceUpdate): void;
+    protected abstract send(name: string, data: object): void;
+}
+export declare class EarlyInspector extends AbstractInspector {
+    protected inspector: Inspector | undefined;
+    protected queue: [string, object][];
+    connect(inspector: Inspector): void;
+    protected send(name: string, data: object): void;
+}
+export declare const earlyInspector: EarlyInspector;

package/types/dev/index.d.ts

@@ -0,0 +1,6 @@
+export { DevDelay, DevWatch, DevFor, DevSwitch, DevSlot } from "./components.js";
+export { devStore, type DevComposed, devModel, devMount, devView } from "./compose.js";
+export { devArrayModel, devMapModel, devEnsure, devExpr, devMatch, devSetModel, devRef, devSet } from "./internal.js";
+export { devAwaited } from "./library.js";
+export { AbstractInspector, EarlyInspector, earlyInspector } from "./early-inspector.js";
+export declare function setErrorHandler(fn: (e: unknown) => void): void;

package/types/dev/internal.d.ts

@@ -0,0 +1,10 @@
+import { Reactive } from "vasille";
+import { DevArrayModel, DevExpression, DevIValue, DevMapModel, DevSetModel, ExecutionPosition, Inspector, KindOfDevIValue, StaticPosition } from "vasille/dev";
+export declare function devExpr<T, Args extends unknown[]>(ctx: Reactive | undefined, func: (...args: Args) => T, values: KindOfDevIValue<Args>, depsCode: string[], declaration: StaticPosition, inspector: Inspector): DevExpression<T, Args>;
+export declare function devRef<T>(v: T, declaration: StaticPosition, inspector?: Inspector): DevIValue<T>;
+export declare function devSetModel(inspector: Inspector | undefined, usage: StaticPosition, ctx: Reactive | undefined, data?: unknown[]): DevSetModel<unknown>;
+export declare function devMapModel(inspector: Inspector | undefined, usage: StaticPosition, ctx: Reactive | undefined, data?: [unknown, unknown][]): DevMapModel<unknown, unknown>;
+export declare function devArrayModel(inspector: Inspector | undefined, usage: StaticPosition, ctx: Reactive | undefined, data?: unknown[] | number): DevArrayModel<unknown>;
+export declare function devEnsure<T extends object>(obj: T | null | undefined, key: keyof T, declaration: StaticPosition, inspector: Inspector | undefined): T[keyof T] | undefined;
+export declare function devMatch(name: string | number | symbol, data: unknown, declaration: StaticPosition, inspector: Inspector | undefined): any;
+export declare function devSet(o: object, key: string | symbol | number, value: unknown, declaration: StaticPosition, inspector: Inspector | undefined, executionPosition: ExecutionPosition): unknown;

package/types/dev/library.d.ts

@@ -0,0 +1,3 @@
+import { Inspector, StaticPosition } from "vasille/dev";
+import { IValue } from "vasille";
+export declare function devAwaited<T>(target: () => Promise<T>, callback: (error: IValue<unknown>, data: IValue<unknown>) => void, declaration: [StaticPosition, StaticPosition], inspector?: Inspector): [IValue<unknown>, IValue<unknown>, () => void];

package/types/index.d.ts

@@ -1,5 +1,5 @@
-export { Debug, Delay, For, Slot, Watch, Switch } from "./components.js";
+export { Delay, For, Slot, Watch, Switch } from "./components.js";
 export { view, mount, model, store, type Composed } from "./compose.js";
 export { awaited } from "./library.js";
-export { ref, arrayModel, backward, mapModel, expr, setModel, forward, set, ensure, match, extract, } from "./internal.js";
+export { ref, arrayModel, mapModel, expr, setModel, set, ensure, match } from "./internal.js";
 export { setErrorHandler } from "vasille";

package/types/internal.d.ts

@@ -1,7 +1,5 @@
 import { IValue, Reactive, KindOfIValue, Expression, SetModel, MapModel, ArrayModel } from "vasille";
 export declare function expr<T, Args extends unknown[]>(ctx: Reactive | undefined, func: (...args: Args) => T, values: KindOfIValue<Args>): Expression<T, Args>;
-export declare function forward<T>(ctx: Reactive | undefined, v: IValue<T>): IValue<T>;
-export declare function backward<T>(v: IValue<T>): IValue<T>;
 /**
  * It transforms a non-reactive value to a reactive one.
  * 1. `let a = 0` to `const a = ref(0)`
@@ -26,17 +24,16 @@ export declare function arrayModel(ctx: Reactive | undefined, data?: unknown[] |
  * Use when a value must be IValue but can be undefined
  * 1. `let a = obj.$key` to `const a = ensure(obj.$key)`
  */
-export declare function ensure(data: unknown): IValue<any>;
+export declare function ensure<T extends object>(obj: T | null | undefined, key: keyof T): IValue<undefined> | T[keyof T];
 /**
  * Used for destruction with computed values
  * 1. `{[a]: a1} = {x: 2}` to `{[a]: a1 = match("a1")} = {x: 2}`
  * 1. `{[a]: a1 = 3} = {x: 2}` to `{[a]: a1 = match("a1", 3)} = {x: 2}`
  */
-export declare function match(name: string | number | symbol, data?: unknown): any;
+export declare function match(name: string | number | symbol, data?: unknown, createRef?: typeof ref): any;
 /**
  * Set a value of a field (alternative to proxies)
  * 1. `obj.$key = 23` to `set(obj, "$key", 23)`
  * 2. `arr[0] = 23` to `set(arr, 0, 23)`
  */
-export declare function set(o: object, key: string | symbol | number, value: unknown): unknown;
-export declare function extract<T>(value: IValue<T> | T): T;
+export declare function set(o: object, key: string | symbol | number, value: unknown, createRef?: typeof ref): unknown;

package/types/library.d.ts

@@ -1,2 +1,3 @@
 import { IValue } from "vasille";
-export declare function awaited<T>(target: () => Promise<T>): [IValue<unknown>, IValue<unknown>, () => void];
+import { ref } from "./internal.js";
+export declare function awaited<T>(target: () => Promise<T>, createRef?: typeof ref): [IValue<unknown>, IValue<unknown>, () => void];