vasille-jsx 3.0.2 → 3.1.2

package/README.md

@@ -47,7 +47,7 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
-* [JavaScript Example](https://github.com/vas[README.md](..%2Ftest%2Fmy-app%2FREADME.md)ille-js/example-javascript)
+* [JavaScript Example](https://github.com/vasille-js/example-javascript)
 
 <hr>
 
@@ -103,12 +103,11 @@ All of these are supported:
 * [x] Develop the `Vasille JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
 * [x] Develop the `Vasille Babel Plugin`.
-* [ ] `100%` Test Coverage fot babel plugin.
-* [ ] Add CSS support (define styles in components).
-* [ ] Add custom `<input/>` components with 2-way value binding.
+* [x] `100%` Test Coverage fot babel plugin.
+* [x] Add CSS support (define styles in components).
 * [ ] Add router.
-* [ ] Develop dev-tools extension for debugging.
-* [ ] Develop a lot of libraries for the framework.
+* [ ] Add SSR (server side rendering).
+* [ ] Develop tools extension for debugging.
 
 ## Questions
 

package/lib/components.js

@@ -1,16 +1,8 @@
-import { ArrayModel, ArrayView, Fragment, IValue, MapModel, MapView, SetModel, SetView, userError, Watch as CoreWatch, Tag, } from "vasille";
+import { ArrayModel, ArrayView, Fragment, IValue, MapModel, MapView, SetModel, SetView, userError, Watch as CoreWatch, } from "vasille";
 export function readValue(v) {
     return v instanceof IValue ? v.$ : v;
 }
-export function Adapter(ctx, { node, slot }) {
-    const dNode = readValue(node);
-    const dSlot = readValue(slot);
-    if (dNode && dSlot) {
-        ctx.create(dNode, dSlot);
-    }
-}
 export function Slot(ctx, options) {
-    var _a;
     const model = readValue(options.model);
     if (model) {
         if (model.length <= 1) {
@@ -30,16 +22,16 @@ export function Slot(ctx, options) {
         model(options, ctx);
     }
     else {
-        (_a = readValue(options.slot)) === null || _a === void 0 ? void 0 : _a(ctx);
+        readValue(options.slot)?.(ctx);
     }
 }
 export function If(ctx, { condition, slot: magicSlot }) {
     const slot = readValue(magicSlot);
-    ctx.if(condition instanceof IValue ? condition : ctx.ref(condition), slot !== null && slot !== void 0 ? slot : (() => { }));
+    ctx.if(condition instanceof IValue ? condition : ctx.ref(condition), slot ?? (() => { }));
 }
 export function ElseIf(ctx, { condition, slot: magicSlot }) {
     const slot = readValue(magicSlot);
-    ctx.elif(condition instanceof IValue ? condition : ctx.ref(condition), slot !== null && slot !== void 0 ? slot : (() => { }));
+    ctx.elif(condition instanceof IValue ? condition : ctx.ref(condition), slot ?? (() => { }));
 }
 export function Else(ctx, { slot: magicSlot }) {
     const slot = readValue(magicSlot);
@@ -55,7 +47,7 @@ export function For(ctx, { of, slot: magicSlot }) {
             slot: function (ctx, model) {
                 create(model, ctx);
             },
-        }));
+        }, ctx.runner));
     }
     else if (of) {
         create(of, ctx);
@@ -68,19 +60,19 @@ export function For(ctx, { of, slot: magicSlot }) {
             node.create(new ArrayView({
                 model,
                 slot: slot,
-            }));
+            }, node.runner));
         }
         else if (model instanceof MapModel) {
             node.create(new MapView({
                 model,
                 slot,
-            }));
+            }, node.runner));
         }
         else if (model instanceof SetModel) {
             node.create(new SetView({
                 model,
                 slot,
-            }));
+            }, node.runner));
         }
         // fallback if is used external Array/Map/Set
         else {
@@ -109,27 +101,15 @@ export function For(ctx, { of, slot: magicSlot }) {
 export function Watch(ctx, { model, slot: magicSlot }) {
     const slot = readValue(magicSlot);
     if (slot && model instanceof IValue) {
-        ctx.create(new CoreWatch({ model, slot }));
+        ctx.create(new CoreWatch({ model, slot }, ctx.runner));
     }
 }
 export function Debug(ctx, { model }) {
     const value = model instanceof IValue ? model : ctx.ref(model);
     ctx.debug(value);
 }
-export function Mount(ctx, { bind }) {
-    if (!(ctx instanceof Tag)) {
-        throw userError("<Mount bind/> can be used only as direct child of html tags", "context-mismatch");
-    }
-    ctx.bindMount(bind instanceof IValue ? bind : ctx.ref(bind));
-}
-export function Show(ctx, { bind }) {
-    if (!(ctx instanceof Tag)) {
-        throw userError("<Show bind/> can be used only as direct child of html tags", "context-mismatch");
-    }
-    ctx.bindShow(bind instanceof IValue ? bind : ctx.ref(bind));
-}
 export function Delay(ctx, { time, slot }) {
-    const fragment = new Fragment({}, ":timer");
+    const fragment = new Fragment({}, ctx.runner, ":timer");
     const dSlot = readValue(slot);
     let timer;
     ctx.create(fragment, function (node) {

package/lib/compose.js

@@ -1,4 +1,4 @@
-import { Extension, Fragment, config, App, reportError, IValue, Reference } from "vasille";
+import { Fragment, App, reportError, IValue, Reference } from "vasille";
 function proxy(obj) {
     return new Proxy(obj, {
         get(target, p) {
@@ -6,9 +6,9 @@ function proxy(obj) {
         },
     });
 }
-function create(renderer, create, name) {
+function create(renderer, name) {
     return function (node, props, slot) {
-        const frag = create(props);
+        const frag = new Fragment(props, node.runner, name);
         if (slot) {
             props.slot = slot;
         }
@@ -20,26 +20,16 @@ function create(renderer, create, name) {
             }
         }
         catch (e) {
-            if (config.debugUi) {
-                console.error(`Vasille: Error found in component ${name}`, e);
-            }
             reportError(e);
         }
     };
 }
 export function compose(renderer, name) {
-    return create(renderer, props => {
-        return new Fragment(props, name);
-    }, name);
-}
-export function extend(renderer, name) {
-    return create(renderer, props => {
-        return new Extension(props, name);
-    }, name);
+    return create(renderer, name);
 }
-export function mount(tag, component, $) {
-    const root = new App(tag, {});
-    const frag = new Fragment({}, ":app-root");
+export function mount(tag, component, runner, $) {
+    const root = new App(tag, runner, {});
+    const frag = new Fragment({}, runner, ":app-root");
     root.create(frag, function () {
         component(frag, $);
     });

package/lib/index.js

@@ -1,4 +1,4 @@
-export { Adapter, Debug, Delay, Else, ElseIf, For, If, Mount, Show, Slot, Watch } from "./components";
-export { compose, extend, mount } from "./compose";
-export { awaited } from "./library";
-export { internal as $ } from "./internal";
+export { Debug, Delay, Else, ElseIf, For, If, Slot, Watch } from "./components.js";
+export { compose, mount } from "./compose.js";
+export { awaited } from "./library.js";
+export { internal as $ } from "./internal.js";

package/lib/internal.js

@@ -1,14 +1,14 @@
 import { proxyArrayModel, Expression, Pointer, Reference } from "vasille";
-import { reactiveObject, reactiveObjectProxy } from "./objects";
-import { ContextArray, ContextMap, ContextSet } from "./models";
+import { reactiveObject, reactiveObjectProxy, storeReactiveObject } from "./objects.js";
+import { ContextArray, ContextMap, ContextSet } from "./models.js";
 export const internal = {
     /** create an expression (without context), use it for OwningPointer */
-    ex(func, ...values) {
-        return new Expression(func, ...values);
+    ex(func, values) {
+        return new Expression(func, values);
     },
     /** create a forward-only pointer (without context), use it for OwningPointer */
     fo(v) {
-        return new Pointer(v);
+        return new Pointer(v instanceof Reference ? v : new Reference(v));
     },
     /** create a reference (without context), use it for default composing props values */
     r(v) {
@@ -18,26 +18,32 @@ export const internal = {
     rop(o) {
         return reactiveObjectProxy(o);
     },
-    /**
-     * translate `{...}` to `$.ro(this, {...})`
-     */
+    /** translate `{...}` to `$.ro(this, {...})` */
     ro: reactiveObject,
-    /**
-     * translate `new Set(#)` to `$.sm(this, #)`
-     */
-    sm(node, data) {
-        return node.register(new ContextSet(data));
-    },
-    /**
-     * translate `new Map(#)` to `$.mm(this, #)`
-     */
-    mm(node, data) {
-        return node.register(new ContextMap(data));
-    },
-    /**
-     * translate `[...]` to `$.am(this, [...])`
-     */
-    am(node, data) {
-        return node.register(proxyArrayModel(new ContextArray(data)));
+    /** translate `new Set(#)` to `$.sm(this, #)` */
+    sm(node, data, name) {
+        return node.register(new ContextSet(data), name);
+    },
+    /** translate `new Map(#)` to `$.mm(this, #)` */
+    mm(node, data, name) {
+        return node.register(new ContextMap(data), name);
+    },
+    /** translate `[...]` to `$.am(this, [...])` */
+    am(node, data, name) {
+        return node.register(proxyArrayModel(new ContextArray(data)), name);
+    },
+    /** translate `{...} to $.sro({...})` */
+    sro: storeReactiveObject,
+    /** translate `new Set(#)` to `$.ssm(#)` */
+    ssm(data) {
+        return new ContextSet(data);
+    },
+    /** translate `new Map(#)` to `$.smm(#)` */
+    smm(data) {
+        return new ContextMap(data);
+    },
+    /** translate `[...]` to `$.sam([...])` */
+    sam(data) {
+        return proxyArrayModel(new ContextArray(data));
     },
 };

package/lib/library.js

@@ -1,24 +1,44 @@
 import { IValue } from "vasille";
-export function awaited(node, target) {
-    const value = node.ref(undefined);
-    const err = node.ref(undefined);
-    let current = target;
-    if (typeof current === "function") {
-        try {
-            current = current();
+import { storeReactiveObject } from "./objects.js";
+export function awaited(node, target, errName, dataName) {
+    const value = node.ref(undefined, dataName);
+    const err = node.ref(undefined, errName);
+    let running = false;
+    function run() {
+        if (running) {
+            return;
         }
-        catch (e) {
-            current = undefined;
-            err.$ = e;
+        let current = target;
+        running = true;
+        err.$ = undefined;
+        value.$ = undefined;
+        if (typeof current === "function") {
+            try {
+                current = current();
+            }
+            catch (e) {
+                current = undefined;
+                err.$ = e;
+            }
+        }
+        if (current instanceof Promise) {
+            current
+                .then(result => (value.$ = result))
+                .catch(e => (err.$ = e))
+                .finally(() => (running = false));
+        }
+        else {
+            value.$ = current;
+            running = false;
         }
     }
-    if (current instanceof Promise) {
-        current.then(result => (value.$ = result)).catch(e => (err.$ = e));
-    }
-    else {
-        value.$ = current;
-    }
-    return [err, value];
+    run();
+    return [err, value, run];
+}
+export function store(fn) {
+    return (input) => {
+        return input ? fn(storeReactiveObject(input)) : fn();
+    };
 }
 export function ensureIValue(node, value) {
     return value instanceof IValue ? value : node.ref(value);

package/lib/models.js

@@ -1,41 +1,35 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _Context_instances, _Context_ctx, _Context_enableObject, _Context_disableObject;
 import { ArrayModel, Destroyable, MapModel, Reactive, SetModel } from "vasille";
-import { ProxyReference, proxyObject } from "./objects";
+import { ProxyReference, proxyObject } from "./objects.js";
 const symbol = Symbol("proxy");
 class Context extends Destroyable {
     constructor() {
         super(...arguments);
-        _Context_instances.add(this);
-        _Context_ctx.set(this, new Reactive({}));
+        this.ctx = new Reactive({});
     }
     checkEnable(value) {
         if (value && typeof value === "object" && value.constructor === Object) {
-            return __classPrivateFieldGet(this, _Context_instances, "m", _Context_enableObject).call(this, value);
+            return this.enableObject(value);
         }
         return value;
     }
     checkDisable(value) {
         if (value && typeof value === "object" && value.constructor === Object) {
-            __classPrivateFieldGet(this, _Context_instances, "m", _Context_disableObject).call(this, value);
+            this.disableObject(value);
         }
     }
+    enableObject(o) {
+        const ref = new ProxyReference(undefined);
+        o[symbol] = ref;
+        this.ctx.register(ref);
+        return proxyObject(o, ref);
+    }
+    disableObject(o) {
+        this.ctx.release(o[symbol]);
+    }
     destroy() {
-        __classPrivateFieldGet(this, _Context_ctx, "f").destroy();
+        this.ctx.destroy();
     }
 }
-_Context_ctx = new WeakMap(), _Context_instances = new WeakSet(), _Context_enableObject = function _Context_enableObject(o) {
-    const ref = new ProxyReference(undefined);
-    o[symbol] = ref;
-    __classPrivateFieldGet(this, _Context_ctx, "f").register(ref);
-    return proxyObject(o, ref);
-}, _Context_disableObject = function _Context_disableObject(o) {
-    __classPrivateFieldGet(this, _Context_ctx, "f").release(o[symbol]);
-};
 export class ContextArray extends ArrayModel {
     constructor(data) {
         const ctx = new Context();

package/lib/objects.js

@@ -1,5 +1,5 @@
 import { IValue, Reference } from "vasille";
-import { ensureIValue } from "./library";
+import { ensureIValue } from "./library.js";
 export class ProxyReference extends Reference {
     forceUpdate() {
         this.updateDeps(this.state);
@@ -42,12 +42,15 @@ export function proxy(o) {
     }
     return o;
 }
-export function reactiveObject(node, o) {
+export function reactiveObject(node, o, name) {
     for (const key of Object.keys(o)) {
         if (!(o[key] instanceof IValue)) {
             o[key] = ensureIValue(node, proxy(o[key]));
         }
     }
+    if (name) {
+        node.addState("reactiveObject", name, o);
+    }
     return new Proxy(o, {
         get(_, p) {
             if (p in o) {
@@ -76,3 +79,20 @@ export function reactiveObjectProxy(o) {
         },
     });
 }
+export function storeReactiveObject(o) {
+    for (const key of Object.keys(o)) {
+        if (!(o[key] instanceof IValue)) {
+            o[key] = new Reference(proxy(o[key]));
+        }
+    }
+    return new Proxy(o, {
+        get(_, p) {
+            if (p in o) {
+                return o[p];
+            }
+            else {
+                return (o[p] = new Reference(undefined));
+            }
+        },
+    });
+}

package/package.json

@@ -1,27 +1,30 @@
 {
   "name": "vasille-jsx",
-  "version": "3.0.2",
-  "description": "Describe Vasille components using JSX",
+  "version": "3.1.2",
+  "description": "The first Developer eXperience Orientated front-end framework (JSX components)",
   "main": "lib/index.js",
   "exports": {
+    "types": "./types/index.d.ts",
     "import": "./lib/index.js",
-    "browser": "./lib/index.js",
-    "node": "./lib-node/index.js",
-    "require": "./lib-node/index.js"
+    "browser": "./lib/index.js"
   },
+  "types": "./types/index.d.ts",
   "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",
     "update-types": "tsc --build tsconfig-types.json",
-    "test": "jest",
-    "test-coverage": "jest --coverage"
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test-coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage"
   },
+  "type": "module",
   "keywords": [
     "frone-end",
     "jsx",
-    "vasille"
+    "vasille",
+    "safe",
+    "simple",
+    "poweful"
   ],
   "author": "lixcode",
   "license": "MIT",
@@ -34,17 +37,18 @@
     "url": "git+https://github.com/vasille-js/vasille-js.git"
   },
   "dependencies": {
-    "vasille": "^3.0.2"
+    "vasille": "^3.1.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^30.0.0",
     "@types/jsdom": "^21.1.7",
-    "@typescript-eslint/parser": "^8.9.0",
-    "eslint": "^9.12.0",
-    "jest": "^29.7.0",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "ts-jest": "^29.2.5",
-    "typescript": "5.6.3"
+    "@typescript-eslint/parser": "^8.38.0",
+    "cross-env": "^10.0.0",
+    "eslint": "^9.32.0",
+    "jest": "^30.0.5",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.6.2",
+    "ts-jest": "^29.4.0",
+    "typescript": "^5.8.3"
   }
 }

package/types/components.d.ts

@@ -3,44 +3,38 @@ type Magic<T extends object> = {
     [K in keyof T]: T[K] | IValue<T[K]> | undefined;
 };
 export declare function readValue<T>(v: T | IValue<T>): T;
-export declare function Adapter(ctx: Fragment, { node, slot }: Magic<{
-    node: Fragment;
-    slot?: (ctx: Fragment) => void;
-}>): void;
-export declare function Slot<T extends object = {}>(ctx: Fragment, options: Magic<{
-    model?: (input: T, ctx: Fragment) => void;
-    slot?: (ctx: Fragment) => void;
-}> & T): void;
-export declare function If(ctx: Fragment, { condition, slot: magicSlot }: Magic<{
+interface SlotOptions<Node, Element, TagOptions extends object, T extends object> {
+    model?: (input: T, ctx: Fragment<Node, Element, TagOptions>) => void;
+    slot?: (ctx: Fragment<Node, Element, TagOptions>) => void;
+}
+export declare function Slot<Node, Element, TagOptions extends object, T extends object = {}>(ctx: Fragment<Node, Element, TagOptions>, options: Magic<SlotOptions<Node, Element, TagOptions, T>> & T): void;
+interface IfOptions {
     condition: unknown;
     slot?: () => void;
-}>): void;
-export declare function ElseIf(ctx: Fragment, { condition, slot: magicSlot }: Magic<{
-    condition: unknown;
-    slot?: () => void;
-}>): void;
-export declare function Else(ctx: Fragment, { slot: magicSlot }: Magic<{
+}
+export declare function If<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { condition, slot: magicSlot }: Magic<IfOptions>): void;
+export declare function ElseIf<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { condition, slot: magicSlot }: Magic<IfOptions>): void;
+interface ElseOptions {
     slot?: () => void;
-}>): void;
-export declare function For<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>(ctx: Fragment, { of, slot: magicSlot }: Magic<{
+}
+export declare function Else<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { slot: magicSlot }: Magic<ElseOptions>): void;
+interface ForOptions<Node, Element, TagOptions extends object, T, K, V> {
     of: T;
-    slot?: (ctx: Fragment, value: T, index: K) => void;
-}>): void;
-export declare function Watch<T>(ctx: Fragment, { model, slot: magicSlot }: Magic<{
+    slot?: (ctx: Fragment<Node, Element, TagOptions>, value: T, index: K) => void;
+}
+export declare function For<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>(ctx: Fragment<Node, Element, TagOptions>, { of, slot: magicSlot }: Magic<ForOptions<Node, Element, TagOptions, T, K, V>>): void;
+interface WatchOptions<Node, Element, TagOptions extends object, T> {
     model: T;
-    slot?: (ctx: Fragment, value: T) => void;
-}>): void;
-export declare function Debug(ctx: Fragment, { model }: {
+    slot?: (ctx: Fragment<Node, Element, TagOptions>, value: T) => void;
+}
+export declare function Watch<Node, Element, TagOptions extends object, T>(ctx: Fragment<Node, Element, TagOptions>, { model, slot: magicSlot }: Magic<WatchOptions<Node, Element, TagOptions, T>>): void;
+interface DebugOptions {
     model: unknown;
-}): void;
-export declare function Mount(ctx: Fragment, { bind }: Magic<{
-    bind: unknown;
-}>): void;
-export declare function Show(ctx: Fragment, { bind }: Magic<{
-    bind: unknown;
-}>): void;
-export declare function Delay(ctx: Fragment, { time, slot }: Magic<{
+}
+export declare function Debug<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { model }: DebugOptions): void;
+interface DelayOptions<Node, Element, TagOptions extends object> {
     time?: number;
-    slot?: (ctx: Fragment) => unknown;
-}>): void;
+    slot?: (ctx: Fragment<Node, Element, TagOptions>) => unknown;
+}
+export declare function Delay<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { time, slot }: Magic<DelayOptions<Node, Element, TagOptions>>): void;
 export {};

package/types/compose.d.ts

@@ -1,11 +1,10 @@
-import { Fragment } from "vasille";
+import { Fragment, Runner } from "vasille";
 interface CompositionProps {
     slot?: (...args: any[]) => void;
 }
-type Composed<In extends CompositionProps, Out> = (node: Fragment, $: In & {
+type Composed<Node, Element, TagOptions extends object, In extends CompositionProps, Out> = (node: Fragment<Node, Element, TagOptions>, $: In & {
     callback?(data: Out | undefined): void;
 }, slot?: In["slot"]) => void;
-export declare function compose<In extends CompositionProps, Out>(renderer: (node: Fragment, input: In) => Out, name: string): Composed<In, Out>;
-export declare function extend<In extends CompositionProps, Out>(renderer: (node: Fragment, input: In) => Out, name: string): Composed<In, Out>;
-export declare function mount<T>(tag: Element, component: (node: Fragment, $: T) => unknown, $: T): void;
+export declare function compose<Node, Element, TagOptions extends object, In extends CompositionProps, Out>(renderer: (node: Fragment<Node, Element, TagOptions>, input: In) => Out, name: string): Composed<Node, Element, TagOptions, In, Out>;
+export declare function mount<Node, Element, TagOptions extends object, T>(tag: Element, component: (node: Fragment<Node, Element, TagOptions>, $: T) => unknown, runner: Runner<Node, Element, TagOptions>, $: T): void;
 export {};

package/types/index.d.ts

@@ -1,6 +1,4 @@
-export { Adapter, Debug, Delay, Else, ElseIf, For, If, Mount, Show, Slot, Watch } from "./components";
-export { compose, extend, mount } from "./compose";
-export { awaited } from "./library";
-export { internal as $ } from "./internal";
-export { TagNameMap, HtmlTagMap, Tag, HtmlAndSvgEvents, EventHandler } from "./spec/html";
-export { SvgTagMap, SvgTagNameMap } from "./spec/svg";
+export { Debug, Delay, Else, ElseIf, For, If, Slot, Watch } from "./components.js";
+export { compose, mount } from "./compose.js";
+export { awaited } from "./library.js";
+export { internal as $ } from "./internal.js";

package/types/internal.d.ts

@@ -1,31 +1,31 @@
 import { IValue, Reactive, KindOfIValue, Expression } from "vasille";
-import { reactiveObject } from "./objects";
-import { ContextMap, ContextSet } from "./models";
+import { reactiveObject, storeReactiveObject } from "./objects.js";
+import { ContextMap, ContextSet } from "./models.js";
 export declare const internal: {
     /** create an expression (without context), use it for OwningPointer */
-    ex<T, Args extends unknown[]>(func: (...args: Args) => T, ...values: KindOfIValue<Args>): Expression<T, Args>;
+    ex<T, Args extends unknown[]>(func: (...args: Args) => T, values: KindOfIValue<Args>): Expression<T, Args>;
     /** create a forward-only pointer (without context), use it for OwningPointer */
-    fo<T>(v: IValue<T>): IValue<T>;
+    fo<T>(v: IValue<T> | T): IValue<T>;
     /** create a reference (without context), use it for default composing props values */
     r<T>(v: T): IValue<T>;
     /** create a reactive object proxy, use it for sending reactive objects to child components */
     rop<T extends {
         [k: string | symbol]: IValue<unknown>;
     }>(o: T): { [K in keyof T]: T[K] extends IValue<infer R> ? R : never; };
-    /**
-     * translate `{...}` to `$.ro(this, {...})`
-     */
+    /** translate `{...}` to `$.ro(this, {...})` */
     ro: typeof reactiveObject;
-    /**
-     * translate `new Set(#)` to `$.sm(this, #)`
-     */
-    sm(node: Reactive, data?: unknown[]): ContextSet<unknown>;
-    /**
-     * translate `new Map(#)` to `$.mm(this, #)`
-     */
-    mm(node: Reactive, data?: [unknown, unknown][]): ContextMap<unknown, unknown>;
-    /**
-     * translate `[...]` to `$.am(this, [...])`
-     */
-    am(node: Reactive, data?: unknown[]): import("vasille").ArrayModel<unknown>;
+    /** translate `new Set(#)` to `$.sm(this, #)` */
+    sm(node: Reactive, data?: unknown[], name?: string): ContextSet<unknown>;
+    /** translate `new Map(#)` to `$.mm(this, #)` */
+    mm(node: Reactive, data?: [unknown, unknown][], name?: string): ContextMap<unknown, unknown>;
+    /** translate `[...]` to `$.am(this, [...])` */
+    am(node: Reactive, data?: unknown[], name?: string): import("vasille").ArrayModel<unknown>;
+    /** translate `{...} to $.sro({...})` */
+    sro: typeof storeReactiveObject;
+    /** translate `new Set(#)` to `$.ssm(#)` */
+    ssm(data?: unknown[]): ContextSet<unknown>;
+    /** translate `new Map(#)` to `$.smm(#)` */
+    smm(data?: [unknown, unknown][]): ContextMap<unknown, unknown>;
+    /** translate `[...]` to `$.sam([...])` */
+    sam(data?: unknown[]): import("vasille").ArrayModel<unknown>;
 };