vasille-web 7.0.0-rc.3 → 7.0.0

package/README.md

@@ -2,7 +2,9 @@
 
 ![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v5/doc/img/logo.png)
 
-`SteelFrameKit` is a front-end development kit, which is developed to provide fault tolerant web applications.
+AI can produce code. Organizations still have to produce software.
+Agentic development is changing how software gets made,
+but it hasn't changed what it cost to be wrong, `Steel Frame` do it.
 
 [![npm](https://img.shields.io/npm/v/steel-frame?style=round-square)](https://www.npmjs.com/package/steel-frame)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/vasille-js/steel-frame)
@@ -13,12 +15,12 @@
 - [Steel Frame](#steel-frame)
   - [Table of content](#table-of-content)
   - [Installation](#installation)
-  - [How to use SteelFramekit](#how-to-use-steelframekit)
+  - [How to use Steel Frame](#how-to-use-steel-frame)
     - [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)
+  - [How SAFE is Steel Frame](#how-safe-is-steel-frame)
+  - [How INTUITIVE is Steel Frame](#how-intuitive-is-steel-frame)
+  - [How POWERFUL is Steel Frame](#how-powerful-is-steel-frame)
   - [Road map](#road-map)
   - [Change log](#change-log)
     - [7.0](#70)
@@ -38,7 +40,7 @@
 npm install steel-frame --save
 ```
 
-## How to use SteelFramekit
+## How to use Steel Frame
 
 Create an app from a template
 
@@ -48,9 +50,10 @@ $ npm create steel-frame
 
 ### Full documentation:
 
-- [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
+- [Learn `Steel Frame` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V7-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)
+- [Compiler Hints](https://github.com/vasille-js/vasille-js/blob/v5/doc/CompilerHints.md)
+- [Composition 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
@@ -60,7 +63,7 @@ $ npm create steel-frame
 
 <hr>
 
-## How SAFE is SteelFrameKit
+## How SAFE is Steel Frame
 
 The safe of your application is ensured by
 
@@ -68,7 +71,7 @@ The safe of your application is ensured by
   Each function, each branch is working as designed.
 - OOP, DRY, KISS and SOLID principles are applied.
 - `strong typing` makes your code safe.
-  All entities of `SteelFrameKit` core library are strongly typed, including:
+  All entities of `Steel Frame` core library are strongly typed, including:
   - data fields & properties.
   - computed properties (function parameters and result).
   - methods.
@@ -78,7 +81,7 @@ The safe of your application is ensured by
   - references to children.
 - No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
 
-## How INTUITIVE is SteelFrameKit
+## How INTUITIVE is Steel Frame
 
 There is the "Hello World":
 
@@ -92,7 +95,7 @@ const App = compose(() => {
 mount(document.body, App, {});
 ```
 
-## How POWERFUL is SteelFrameKit
+## How POWERFUL is Steel Frame
 
 All of these are supported:
 
@@ -130,12 +133,25 @@ We respect semantic versioning:
 - A minor version is increased when we add functionality.
 - Patch version is increased when we fix bugs.
 
-### 7.0 RC (WIP)
+### 7.0
 
-- Add `debounceRef`, `edgeRef` and `fieldRef` functions, which extend the reativity system.
+- Add `debounced` and `field` functions, which extend the reativity system.
 - Add `Zombie` component, it keeps HTML elements alive some time after destruction.
 - Add `abortSignal` to cancel fetch requests and timers when component is destroyed.
-- Add `safeRef`, `safeExpr`, `safeInit` functions, they make the JSX much safer.
+- Renamed `ref` to `state`, `bind` to `live`, `watch` to `effect`, depracated `calculate`.
+- Add `safeState`, `safeLive`, `safeInit` functions, they make the JSX much safer.
+- `callback` handler can return cleanup function.
+- Navigation paths are now checked in compile time, missing paths are reported.
+- Injected dependencies now are tracked in compile time, missing dependencies are reported.
+- Support for wrapper in router, it can provide global dependencies.
+- Reactive members are forbidden in live expressions. **[API change]**
+- Reactive values are not unwrapped automatically, need `unwrap` call. **[API change]**
+- Reactivity breaking is now reported in compile time. **[API change]**
+- Writing to reactive states from effects is restricted,
+  workaround with `bypassWriteRestriction`. **[API change]**
+- New reactivity marks `r_` & `wr_` insted of `$`,
+  workaround with `v4-naming` compilation flag. **[API change]**
+- Component files have strict structure (imports, export, helpers, CSS). **[API change]**
 
 ### 6.0 RC (never released)
 
@@ -174,7 +190,7 @@ We respect semantic versioning:
 ### 1.0 - 1.2
 
 - Initial version of a core library.
-- Developemnt direction: `performance-first`.
+- Development direction: `performance-first`.
 
 ## Questions
 

package/build/dev/communication.d.ts

@@ -0,0 +1,9 @@
+export interface AppSide {
+    highlight(ids: number[]): void;
+    setLookup(active: boolean): void;
+}
+export interface IdeSide {
+    clear(): void;
+    listDebugItems(ids: number[]): void;
+    callInspector(method: string, arg: object): void;
+}

package/build/dev/css-injector.d.ts

@@ -0,0 +1,14 @@
+import { StaticPosition } from "vasille/dev";
+import { CssStyleInjector } from "../web/css/index.js";
+export declare class InspectedCssStyleInjector extends CssStyleInjector {
+    protected key: string;
+    readonly id: number;
+    constructor(key: string, rules: (string | [number, string])[], position: StaticPosition);
+    protected generateClassName(): string;
+    protected insertRule(rule: string | [number, string], className: string): void;
+}
+export declare function devStyleSheet<T extends {
+    [k: string]: [(string | [number, string])[], StaticPosition];
+}>(styles: T): {
+    [K in keyof T]: InspectedCssStyleInjector;
+};

package/build/dev/css-injector.js

@@ -0,0 +1,37 @@
+import { inspector } from "vasille/dev";
+import { CssStyleInjector } from "../web/css/index.js";
+let injectorId = 0;
+export class InspectedCssStyleInjector extends CssStyleInjector {
+    constructor(key, rules, position) {
+        super(rules);
+        this.key = key;
+        const id = (this.id = ++injectorId);
+        const name = this.inject();
+        inspector.cssInjector({
+            id: id,
+            position: position,
+            className: name,
+            time: Date.now(),
+        });
+    }
+    generateClassName() {
+        return `${super.generateClassName()}-${this.key}`;
+    }
+    insertRule(rule, className) {
+        let success = true;
+        try {
+            super.insertRule(rule, className);
+        }
+        catch (e) {
+            success = false;
+        }
+        inspector.cssRule({ id: this.id, rule, success });
+    }
+}
+export function devStyleSheet(styles) {
+    const result = {};
+    for (const key in styles) {
+        result[key] = new InspectedCssStyleInjector(key, ...styles[key]);
+    }
+    return result;
+}

package/build/dev/css.d.ts

@@ -0,0 +1,3 @@
+export declare function devSetMobileMaxWidth(value: number): void;
+export declare function devSetTabletMaxWidth(value: number): void;
+export declare function devSetLaptopMaxWidth(value: number): void;

package/build/dev/css.js

@@ -0,0 +1,32 @@
+import { laptopMaxWidth, mobileMaxWidth, setLaptopMaxWidth, setMobileMaxWidth, setTabletMaxWidth, tabletMaxWidth, } from "../web/css/index.js";
+import { desktop, mobile, tablet } from "../web/css/lib.js";
+function warn(device) {
+    console.warn(`[vasille-css] Setting of ${device} max width in production mode is not supported.`);
+}
+export function devSetMobileMaxWidth(value) {
+    setMobileMaxWidth(value);
+    if (mobile) {
+        mobile.media = `(max-width:${mobileMaxWidth}px)`;
+    }
+    if (tablet) {
+        tablet.media = `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`;
+    }
+    warn("mobile");
+}
+export function devSetTabletMaxWidth(value) {
+    setTabletMaxWidth(value);
+    if (tablet) {
+        tablet.media = `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`;
+    }
+    if (desktop) {
+        desktop.media = `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`;
+    }
+    warn("tablet");
+}
+export function devSetLaptopMaxWidth(value) {
+    setLaptopMaxWidth(value);
+    if (desktop) {
+        desktop.media = `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`;
+    }
+    warn("laptop");
+}

package/build/dev/index.d.ts

@@ -0,0 +1,55 @@
+import { devScreen } from "./router.js";
+import { devModal, devPrompt } from "./mount.js";
+import { DevWebTagOptions } from "./runner.js";
+import { WebRouterInitialization } from "../web/router/router.js";
+import { devArrayModel, DevArrayModelView, DevArrayView, devAwaited, devDebounceRef, DevDelay, devEnsure, devExpr, DevFor, devMapModel, DevMapModelView, devMatch, devModel, devRef, devSafeExpr, devSafeRef, devSet, devSetModel, DevSetModelView, DevSlot, devStore, DevSwitch, devView, DevWatch, DevZombie, toDevDeepFieldRef, toDevFieldRef, DevAppNode } from "vasille/dev";
+export { Prompt, showPrompt } from "../web/index.js";
+export { executionPosition, wrapFn, runFn, setupPosition } from "vasille/dev";
+export { devSetErrorHandler as setErrorHandler } from "vasille/dev";
+export { QueuedRender, Model, SteelContext } from "vasille";
+export { devStyleSheet as styleSheet } from "./css-injector.js";
+export { positionedText } from "./runner.js";
+export { safe, abortSignal, safeInit } from "vasille";
+export { devSetLaptopMaxWidth as setLaptopMaxWidth, devSetTabletMaxWidth as setTabletMaxWidth, devSetMobileMaxWidth as setMobileMaxWidth, } from "./css.js";
+export { context, impute, receive, share, receiveOptional } from "vasille";
+export declare const view: typeof devView;
+export declare const component: typeof devView;
+export declare const compose: typeof devView;
+export declare const ensure: typeof devEnsure;
+export declare const ref: typeof devRef;
+export declare const state: typeof devRef;
+export declare const expr: typeof devExpr;
+export declare const bind: typeof devExpr;
+export declare const calculate: typeof devExpr;
+export declare const live: typeof devExpr;
+export declare const watch: typeof devExpr;
+export declare const effect: typeof devExpr;
+export declare const safeLive: typeof devSafeExpr;
+export declare const safeState: typeof devSafeRef;
+export declare const set: typeof devSet;
+export declare const Delay: typeof DevDelay;
+export declare const For: typeof DevFor;
+export declare const Slot: typeof DevSlot;
+export declare const Watch: typeof DevWatch;
+export declare const awaited: typeof devAwaited;
+export declare const store: typeof devStore;
+export declare const model: typeof devModel;
+export declare const setModel: typeof devSetModel;
+export declare const mapModel: typeof devMapModel;
+export declare const arrayModel: typeof devArrayModel;
+export declare const Switch: typeof DevSwitch;
+export declare const match: typeof devMatch;
+export declare const ArrayView: typeof DevArrayView;
+export declare const MapModelView: typeof DevMapModelView;
+export declare const SetModelView: typeof DevSetModelView;
+export declare const ArrayModelView: typeof DevArrayModelView;
+export declare const Zombie: typeof DevZombie;
+export declare const debounced: typeof devDebounceRef;
+export declare const toFieldRef: typeof toDevFieldRef;
+export declare const toDeepFieldRef: typeof toDevDeepFieldRef;
+export declare const screen: typeof devScreen;
+export declare const page: typeof devScreen;
+export declare const modal: typeof devModal;
+export declare const prompt: typeof devPrompt;
+export declare function mount<T>(element: Element, component: ($: T) => void, input: T): DevAppNode<Node, Element, DevWebTagOptions>;
+export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element): DevAppNode<Node, Element, DevWebTagOptions>;

package/build/dev/index.js

@@ -0,0 +1,64 @@
+import { devScreen } from "./router.js";
+import { devModal, devPrompt, webDevMountApp, webDevRouterApp } from "./mount.js";
+import { Inspector } from "./inspector.js";
+import { devArrayModel, DevArrayModelView, DevArrayView, devAwaited, devDebounceRef, DevDelay, devEnsure, devExpr, DevFor, devMapModel, DevMapModelView, devMatch, devModel, devRef, devSafeExpr, devSafeRef, devSet, devSetModel, DevSetModelView, DevSlot, devStore, DevSwitch, devView, DevWatch, DevZombie, toDevDeepFieldRef, toDevFieldRef, } from "vasille/dev";
+export { Prompt, showPrompt } from "../web/index.js";
+export { executionPosition, wrapFn, runFn, setupPosition } from "vasille/dev";
+export { devSetErrorHandler as setErrorHandler } from "vasille/dev";
+export { QueuedRender, Model, SteelContext } from "vasille";
+export { devStyleSheet as styleSheet } from "./css-injector.js";
+export { positionedText } from "./runner.js";
+export { safe, abortSignal, safeInit } from "vasille";
+export { devSetLaptopMaxWidth as setLaptopMaxWidth, devSetTabletMaxWidth as setTabletMaxWidth, devSetMobileMaxWidth as setMobileMaxWidth, } from "./css.js";
+export { context, impute, receive, share, receiveOptional } from "vasille";
+export const view = devView;
+export const component = devView;
+export const compose = devView;
+export const ensure = devEnsure;
+export const ref = devRef;
+export const state = devRef;
+export const expr = devExpr;
+export const bind = devExpr;
+export const calculate = devExpr;
+export const live = devExpr;
+export const watch = devExpr;
+export const effect = devExpr;
+export const safeLive = devSafeExpr;
+export const safeState = devSafeRef;
+export const set = devSet;
+export const Delay = DevDelay;
+export const For = DevFor;
+export const Slot = DevSlot;
+export const Watch = DevWatch;
+export const awaited = devAwaited;
+export const store = devStore;
+export const model = devModel;
+export const setModel = devSetModel;
+export const mapModel = devMapModel;
+export const arrayModel = devArrayModel;
+export const Switch = DevSwitch;
+export const match = devMatch;
+export const ArrayView = DevArrayView;
+export const MapModelView = DevMapModelView;
+export const SetModelView = DevSetModelView;
+export const ArrayModelView = DevArrayModelView;
+export const Zombie = DevZombie;
+export const debounced = devDebounceRef;
+export const toFieldRef = toDevFieldRef;
+export const toDeepFieldRef = toDevDeepFieldRef;
+export const screen = devScreen;
+export const page = devScreen;
+export const modal = devModal;
+export const prompt = devPrompt;
+export function mount(element, component, input) {
+    const inspector = new Inspector();
+    const app = webDevMountApp(element, component, input, inspector);
+    inspector.setup(app);
+    return app;
+}
+export function routerApp(init, element) {
+    const inspector = new Inspector();
+    const app = webDevRouterApp(init, element ?? document.body, inspector);
+    inspector.setup(app);
+    return app;
+}

package/build/dev/inspector.d.ts

@@ -0,0 +1,18 @@
+import type { IdeSide } from "./communication.js";
+import { AppNode } from "vasille";
+import { AbstractInspector } from "vasille/dev";
+import { WebTagOptions } from "../web/runner/runner.js";
+export declare class Inspector extends AbstractInspector implements IdeSide {
+    private ws;
+    private queue;
+    private app;
+    private clean;
+    constructor();
+    setup(app: AppNode<Node, Element, WebTagOptions>): void;
+    callInspector(method: string, arg: object): void;
+    listDebugItems(ids: number[]): void;
+    clear(): void;
+    private _connect;
+    protected send(method: string, arg: object): void;
+    private sendMessage;
+}

package/build/dev/inspector.js

@@ -0,0 +1,226 @@
+import { expr, Fragment, ref } from "vasille";
+import { DevFragment, inspector } from "vasille/dev";
+import { AbstractInspector } from "vasille/dev";
+import { DevWebTag, DevWebTextNode } from "./runner.js";
+class AppHandler {
+    constructor() {
+        this.canvas = null;
+        this.app = null;
+        this.active = ref(false);
+        this.$width = ref(window.innerWidth);
+        this.$height = ref(window.innerHeight);
+        window.addEventListener("resize", () => {
+            this.$width.V = window.innerWidth;
+            this.$height.V = window.innerHeight;
+        });
+    }
+    setup(app, bridge) {
+        this.app = app;
+        app.tag("canvas", {
+            a: {
+                width: this.$width,
+                height: this.$height,
+            },
+            s: {
+                "pointer-events": expr(app, active => (active ? "auto" : "none"), [this.active]),
+                position: "fixed",
+                inset: "0",
+                "z-index": "9999909",
+            },
+            k: canvas => {
+                this.canvas = canvas;
+            },
+            e: {
+                pointermove: (ev) => {
+                    const canvas = this.canvas;
+                    const ctx = canvas?.getContext("2d");
+                    let element;
+                    if (!ctx || !canvas) {
+                        return;
+                    }
+                    ev.preventDefault();
+                    this.active.V = false;
+                    element = document.elementFromPoint(ev.clientX, ev.clientY);
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    ctx.fillStyle = "#ff000030";
+                    if (element) {
+                        const rect = element.getBoundingClientRect();
+                        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+                    }
+                    this.active.V = true;
+                },
+                pointerdown: (ev) => {
+                    const ids = [];
+                    const key = "vasille";
+                    let textNode = null;
+                    let elements;
+                    ev.preventDefault();
+                    this.active.V = false;
+                    elements = document.elementsFromPoint(ev.clientX, ev.clientY);
+                    if (document.caretPositionFromPoint) {
+                        textNode = document.caretPositionFromPoint(ev.clientX, ev.clientY)?.offsetNode;
+                    }
+                    else if (document.caretRangeFromPoint) {
+                        textNode = document.caretRangeFromPoint(ev.clientX, ev.clientY)?.startContainer;
+                    }
+                    this.active.V = true;
+                    if (textNode && key in textNode) {
+                        ids.push(textNode[key]);
+                    }
+                    for (const element of elements) {
+                        if (key in element) {
+                            ids.push(element[key]);
+                        }
+                    }
+                    bridge.listDebugItems(ids);
+                    this.active.V = false;
+                    const canvas = this.canvas;
+                    const ctx = canvas?.getContext("2d");
+                    if (ctx && canvas) {
+                        ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    }
+                },
+            },
+        });
+    }
+    highlight(ids) {
+        if (this.app === null) {
+            return;
+        }
+        const tags = new Set();
+        const texts = new Set();
+        this.iterateFragment(this.app, new Set(ids), tags, texts);
+        const canvas = this.canvas;
+        const ctx = canvas?.getContext("2d");
+        if (ctx && canvas) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "#ff000030";
+            for (const tag of tags) {
+                const rect = tag.node?.getBoundingClientRect();
+                if (rect) {
+                    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+                }
+            }
+        }
+        const sel = window.getSelection();
+        if (sel) {
+            sel.removeAllRanges();
+            for (const text of texts) {
+                const range = document.createRange();
+                // @ts-expect-error node field is protected
+                range.selectNodeContents(text.node);
+                sel.addRange(range);
+            }
+        }
+    }
+    setLookup(active) {
+        this.active.V = active;
+        const canvas = this.canvas;
+        const ctx = canvas?.getContext("2d");
+        if (ctx && canvas) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (active) {
+                ctx.fillStyle = "#ff000030";
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+        }
+    }
+    iterateFragment(node, ids, set, texts) {
+        for (const child of node.children) {
+            if ("id" in child && ids.has(child.id)) {
+                this.addReactive(child, set, texts);
+            }
+            else if (child instanceof Fragment) {
+                this.iterateFragment(child, ids, set, texts);
+            }
+        }
+    }
+    addTag(node, set) {
+        set.add(node);
+    }
+    addText(node, set) {
+        let it = node.parent;
+        while (it instanceof DevFragment) {
+            it = it.parent;
+        }
+        if (it instanceof DevWebTag) {
+            set.add(it);
+        }
+    }
+    addFragment(node, set, texts) {
+        for (const child of node.children) {
+            this.addReactive(child, set, texts);
+        }
+    }
+    addReactive(node, set, texts) {
+        if (node instanceof DevWebTag) {
+            this.addTag(node, set);
+        }
+        else if (node instanceof DevWebTextNode) {
+            this.addText(node, set);
+            texts.add(node);
+        }
+        else if (node instanceof DevFragment) {
+            this.addFragment(node, set, texts);
+        }
+    }
+}
+export class Inspector extends AbstractInspector {
+    constructor() {
+        super();
+        this.clean = false;
+        this.ws = null;
+        this.queue = [];
+        this.app = new AppHandler();
+        this._connect();
+        inspector.connect(this);
+    }
+    setup(app) {
+        this.app.setup(app, this);
+    }
+    callInspector(method, arg) {
+        this.sendMessage(this.callInspector.name, [method, arg]);
+    }
+    listDebugItems(ids) {
+        this.sendMessage(this.listDebugItems.name, [ids]);
+    }
+    clear() {
+        this.sendMessage(this.clear.name, []);
+    }
+    _connect() {
+        const ws = (this.ws = new WebSocket("ws://localhost:7374"));
+        ws.onopen = () => {
+            if (!this.clean) {
+                ws.send(JSON.stringify(["clear", []]));
+                this.clean = true;
+            }
+            // Send all queued messages
+            while (this.queue.length > 0) {
+                ws.send(JSON.stringify(this.queue.shift()));
+            }
+        };
+        ws.onmessage = ev => {
+            const [method, args] = JSON.parse(ev.data);
+            this.app[method](...args);
+        };
+        ws.onclose = () => {
+            setTimeout(() => this._connect(), 1000);
+        };
+        ws.onerror = () => {
+            ws.close();
+        };
+    }
+    send(method, arg) {
+        this.callInspector(method, arg);
+    }
+    sendMessage(method, args) {
+        const message = [method, args];
+        const ws = this.ws;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(message));
+        }
+        else {
+            this.queue.push(message);
+        }
+    }
+}

package/build/dev/mount.d.ts

@@ -0,0 +1,11 @@
+import { CompositionProps, Fragment, IRunner } from "vasille";
+import { SsgTagOptions } from "../ssg/runner.js";
+import { DevAppNode, Inspector, StaticPosition } from "vasille/dev";
+import { Prompt } from "../web/index.js";
+import { DevWebTagOptions } from "./runner.js";
+import { WebRouterInitialization } from "../web/router/router.js";
+import { PromptProps } from "../web/mount.js";
+export declare function devModal<T extends CompositionProps>(modalFn: (node: Fragment<Node, Element, SsgTagOptions>, input: T) => void, declaration: StaticPosition, name: string): (input: T, node: Fragment<Node, Element, SsgTagOptions>, slot?: T["slot"], usage?: StaticPosition) => void;
+export declare function devPrompt<T extends PromptProps>(modal: (node: Fragment<Node, Element, SsgTagOptions, IRunner<Node, Element, SsgTagOptions>>, input: T) => void, declaration: StaticPosition, name: string): Prompt<T, [number, StaticPosition]>;
+export declare function webDevMountApp<T>(element: Element, component: ($: T) => void, input: T, inspector: Inspector): DevAppNode<Node, Element, DevWebTagOptions>;
+export declare function webDevRouterApp<Routes extends string>(init: WebRouterInitialization<Routes>, element: Element, inspector: Inspector): DevAppNode<Node, Element, DevWebTagOptions>;