vasille-web 5.1.4 → 6.0.0-rc.1

package/lib/dev.js

@@ -1,6 +1,7 @@
-import { devMount as coreMount } from "vasille-jsx/dev";
+import { Fragment } from "vasille";
+import { devMount as coreMount, devDynamicalModule } from "vasille-jsx/dev";
 import { devRouteApp as coreRouteApp } from "vasille-router/dev";
-import { DevPortal, DevRunner, errorToString, toDevValue } from "vasille/dev";
+import { DevPortal, DevRunner, errorToString, toDevValue, } from "vasille/dev";
 import { modal, prompt } from "./index.js";
 function createPortal(node, declaration, usage, name) {
     const portal = new DevPortal({ node: document.body }, node.runner, declaration, usage, name);
@@ -8,7 +9,8 @@ function createPortal(node, declaration, usage, name) {
     return portal;
 }
 export function devModal(modalFn, declaration, name) {
-    return (input, node, slot, usage) => {
+    const fragments = new Map();
+    const run = function (parent, input, usage) {
         modal(modalFn, node => {
             const portal = createPortal(node, declaration, usage, name);
             const inspector = portal.runner.inspector;
@@ -29,11 +31,25 @@ export function devModal(modalFn, declaration, name) {
                 });
             });
             return portal;
-        })(input, node, slot);
+        })(input, parent, undefined);
     };
+    const renderer = (input, node, slot, usage) => {
+        if (!node) {
+            throw new Error("Vasille: Modal context is missing");
+        }
+        const frag = new Fragment(node.runner);
+        if (!input.slot && slot) {
+            input.slot = slot;
+        }
+        node.create(frag);
+        fragments.set(frag, { props: input, node: frag, usage });
+        run(frag, input, usage);
+    };
+    return devDynamicalModule(renderer, fragments, run);
 }
 export function devPrompt(modal, declaration, name) {
-    return function (node, input, timeout, usage) {
+    const fragments = new Map();
+    const run = function (node, input, timeout, usage) {
         let target = null;
         let inspector = null;
         const event = {
@@ -79,6 +95,15 @@ export function devPrompt(modal, declaration, name) {
             },
         });
     };
+    const renderer = (node, input, timeout, usage) => {
+        const frag = new Fragment(node.runner);
+        node.create(frag);
+        fragments.set(frag, { props: input, node: frag, usage });
+        return run(frag, input, timeout, usage);
+    };
+    return devDynamicalModule(renderer, fragments, (parent, input, usage) => {
+        void run(parent, input, 0, usage);
+    });
 }
 export function devMount(element, component, input, inspector) {
     return coreMount(element, component, new DevRunner(window.document, inspector), input, inspector);

package/lib/index.js

@@ -4,7 +4,7 @@ import { mount as coreMount } from "vasille-jsx";
 import { routeApp as coreRouteApp } from "vasille-router/web-router";
 export { styleSheet } from "vasille-css";
 export { safe } from "vasille";
-export { view, view as component, view as compose, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, } from "vasille-jsx";
+export { view, view as component, view as compose, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, } from "vasille-jsx";
 export { screen, screen as page, } from "vasille-router";
 export { Router } from "vasille-router/web-router";
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-web",
-  "version": "5.1.4",
+  "version": "6.0.0-rc.1",
   "description": "The same framework which is designed to build bulletproof frontends.",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -50,11 +50,11 @@
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "dependencies": {
     "csstype": "^3.1.3",
-    "vasille": "^5.1.9",
-    "vasille-context": "^5.0.0",
+    "vasille": "6.0.0-rc.4",
+    "vasille-context": "^6.0.0-rc",
     "vasille-css": "^5.0.0",
-    "vasille-jsx": "^5.1.4",
-    "vasille-router": "^5.0.0"
+    "vasille-jsx": "^6.0.0-rc.3",
+    "vasille-router": "^6.0.0-rc"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

package/types/dev.d.ts

@@ -1,10 +1,10 @@
-import { Fragment } from "vasille";
+import { App, Fragment, Runner as IRunner } from "vasille";
 import { TagOptions } from "vasille/web-runner";
-import { IDevRunner, Inspector, StaticPosition } from "vasille/dev";
+import { DevTagOptions, IDevRunner, Inspector, StaticPosition } from "vasille/dev";
 import { PromptProps } from "./index.js";
 import { WebRouterInitialization } from "vasille-router/web-router";
 import { CompositionProps } from "vasille-jsx";
 export declare function devModal<T extends CompositionProps>(modalFn: (node: Fragment<Node, Element, TagOptions>, input: T) => void, declaration: StaticPosition, name: string): (input: T, node: Fragment<Node, Element, TagOptions>, slot?: T["slot"], usage?: StaticPosition) => void;
 export declare function devPrompt<T extends PromptProps>(modal: (node: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, input: T) => void, declaration: StaticPosition, name: string): (node: Fragment<Node, Element, TagOptions, IDevRunner<Node, Element, TagOptions>>, input: T, timeout: number | undefined, usage: StaticPosition | undefined) => Promise<unknown>;
-export declare function devMount<T>(element: Element, component: ($: T) => void, input: T, inspector: Inspector): import("vasille").App<Node, Element, import("vasille/dev").DevTagOptions, import("vasille").Runner<Node, Element, import("vasille/dev").DevTagOptions>>;
-export declare function devRouterApp<Routes extends string>(init: WebRouterInitialization<Routes>, element: Element, inspector: Inspector): import("vasille").App<Node, Element, import("vasille/dev").DevTagOptions, import("vasille").Runner<Node, Element, import("vasille/dev").DevTagOptions>>;
+export declare function devMount<T>(element: Element, component: ($: T) => void, input: T, inspector: Inspector): App<Node, Element, DevTagOptions, IRunner<Node, Element, DevTagOptions>>;
+export declare function devRouterApp<Routes extends string>(init: WebRouterInitialization<Routes>, element: Element, inspector: Inspector): App<Node, Element, DevTagOptions, IRunner<Node, Element, DevTagOptions>>;

package/types/index.d.ts

@@ -6,7 +6,7 @@ export { styleSheet } from "vasille-css";
 export type { RawStyleProps as StyleProps, StyleSheetProps } from "./spec/css.js";
 export type { ClassItem } from "./jsx-runtime.js";
 export { safe } from "vasille";
-export { view, view as component, view as compose, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, } from "vasille-jsx";
+export { view, view as component, view as compose, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, } from "vasille-jsx";
 export { type QueryParams, type ScreenProps, type RouteParameters, screen, screen as page, type FallbackScreenProps, type ErrorScreenProps, } from "vasille-router";
 export { Router, type WebRouterInitialization, type NavigationMode } from "vasille-router/web-router";
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";