vasille-web 3.2.1 → 4.1.0

package/README.md

@@ -1,8 +1,8 @@
 # Vasille
 
-![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/doc/img/logo.png)
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)
 
-`Vasille Web` is a front-end framework, which is developed to provide the best `developer experience` ever. **Our goal is to keep is as simple as possible.** Developing web applications using Vasille must be *as fast as possible*.
+`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.
 
 [![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
 
@@ -32,19 +32,9 @@ Create an app from a template
 $ npm create vasille
 ```
 
-Alternative method to create a TypeScript app.
-```bash
-$ npx degit vasille-js/example-typescript my-project
-```
-
-Alternative method to create a JavaScript app.
-```bash
-$ npx degit vasille-js/example-javascript my-project
-```
-
 ### Full documentation:
-* [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v3/doc/V3-API.md)
-* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v3/doc/Router-API.md)
+* [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)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -107,9 +97,20 @@ All of these are supported:
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
 * [x] Add router.
+* [x] Add SSG (static site generation).
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 
+## Change log
+
+### 4.0.0
+
+Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).
+
+## 4.1.0
+
+Added SSG (static site generation) as build option `vasille-web build static`.
+
 ## Questions
 
 If you have questions, feel free to contact the maintainer of the project:

package/fake-types/index.d.ts

@@ -1,78 +1,83 @@
-import { ArrayModel, SetModel, MapModel, IValue, App, Fragment } from "vasille";
+import { App } from "vasille";
 import type { TagOptions } from "vasille/web-runner";
 import type { StyleProps } from "../spec/css.d.ts";
 import type { ScreenProps } from "vasille-router";
 import type { Router } from "vasille-router/web-router";
 
+export type { FallbackScreenProps, ErrorScreenProps } from "vasille-router";
+
+/** Set a handler for component errors */
+export declare function setErrorHandler(handler: (e: unknown) => void): void;
+
 declare interface Params {
-    slot?(...args: unknown[]): unknown;
+    slot(...args: unknown[]): unknown;
 }
 
-declare type Composed<In extends Params, Out> = (
-    $: (In["slot"] extends (() => unknown) | undefined ? Omit<In, "slot"> & { slot?: unknown } : In) & {
-        callback?(data: Out | undefined): void;
+declare type Composed<In extends object, Out> = (
+    $: (Required<In> extends Params ? Omit<In, "slot"> & { slot?: unknown } : In) & {
+        callback?(data: Out): void;
     },
-    slot?: In["slot"],
 ) => void;
-declare type ComposedNoCallback<In extends Params, Out> = (
-    $: In["slot"] extends (() => unknown) | undefined ? Omit<In, "slot"> & { slot?: unknown } : In,
-    slot?: In["slot"],
+declare type ComposedNoCallback<In extends object, Out> = (
+    $: Required<In> extends Params ? Omit<In, "slot"> & { slot?: unknown } : In,
 ) => void;
 
-/**
- * create an MVVM view, which can receive external reactive value as props
- * @param renderer is the view constructor
- */
+/** Composes a component (v3), which can receive external reactive values via props */
+export declare function compose<In extends object, Out extends NonNullable<unknown>>(
+    renderer: (input: In) => Out,
+): Composed<In, Out>;
 export declare function compose<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
-export declare function compose<In extends object, Out>(renderer: (input: In) => Out): Composed<In, Out>;
 
-/**
- * create an MVVM view, which can receive external reactive value as props
- * @param renderer is the view constructor
- */
+/** Composes a component (v4), which can receive external reactive values via props */
+export declare function component<In extends object, Out extends NonNullable<unknown>>(
+    renderer: (input: In) => Out,
+): Composed<In, Out>;
+export declare function component<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
+
+/** Composes a view, which can receive external reactive values via props */
+export declare function view<Out extends NonNullable<unknown>>(
+    renderer: () => Out,
+): Composed<NonNullable<unknown>, Out>;
+export declare function view<In extends object, Out extends NonNullable<unknown>>(
+    renderer: (input: In) => Out,
+): Composed<In, Out>;
 export declare function view(renderer: () => void): ComposedNoCallback<NonNullable<unknown>, void>;
 export declare function view<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
-export declare function view<Out>(renderer: (input: NonNullable<unknown>) => Out): Composed<NonNullable<unknown>, Out>;
-export declare function view<In extends object, Out>(renderer: (input: In) => Out): Composed<In, Out>;
-
-/**
- * create an MVVM view, which can receive external reactive value as props
- * @param renderer is the view constructor
- */
-export declare function mvvmView(renderer: () => void): ComposedNoCallback<NonNullable<unknown>, void>;
-export declare function mvvmView<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
-export declare function mvvmView<Out>(
-    renderer: (input: NonNullable<unknown>) => Out,
-): Composed<NonNullable<unknown>, Out>;
-export declare function mvvmView<In extends object, Out>(renderer: (input: In) => Out): Composed<In, Out>;
-
-/**
- * create an MVC view, which can receive models from the parent component
- * @param renderer is the view constructor
- */
-export declare function mvcView<In extends object>(renderer: (input: In) => void): ComposedNoCallback<In, void>;
-export declare function mvcView<In extends object, Out>(renderer: (input: In) => Out): Composed<In, Out>;
-
-/**
- * create a hybrid view, which can receive external models and reactive values
- * @param renderer is the view constructor
- */
-export declare function hybridView<Models extends object, Props extends object>(
-    renderer: (models: Models, props: Props) => void,
-): ComposedNoCallback<Models & Props, void>;
-export declare function hybridView<Models extends object, Props extends object, Out>(
-    renderer: (models: Models, props: Props) => Out,
-): Composed<Models & Props, Out>;
-
-export declare function value<T>(v: T): T;
+
+/** A Vasille.JS App screen */
+type Screen<Route extends string> = (input: ScreenProps<Route>) => Promise<void>;
+
+/** Composes a screen, the router navigates between screens */
+export declare function screen<Route extends string>(renderer: Screen<Route>): Screen<Route>;
+/** Composes a page, the file-based router navigates between pages (used for tests only) */
+export declare function page<Route extends string>(renderer: Screen<Route>): Screen<Route>;
+
+/** Returns the raw value of expression */
+export declare function raw<T>(v: T): T;
+/** Returns a reactive value of expression */
 export declare function ref<T>(v: T): T;
+/** Returns a reactive-computed form of expression */
 export declare function bind<T>(v: T): T;
+/** Returns a reactive-computed form of returned value */
 export declare function calculate<T>(fn: () => T): T;
-export declare function arrayModel<T>(v?: T[]): T[] & { destroy(): void };
-export declare function setModel<T>(v?: T[]): Set<T> & { destroy(): void };
-export declare function mapModel<K, T>(v?: [K, T][]): Map<K, T> & { destroy(): void };
-export declare function reactiveObject<T extends object>(o: T): T;
+/** Runs the function each time when a dependency is changed */
+export declare function watch(f: () => void): void;
+/** Returns a view-model bind, which send data only forward */
+export declare function forward<T>(v: T): T;
+/** Returns a view-model bind, which send data only backward */
+export declare function backward<T>(v: T): T;
+/** Returns an array model of the array */
+export declare function arrayModel<T>(v?: T[]): T[];
+/** Returns a set model of array values */
+export declare function setModel<T>(v?: T[]): Set<T>;
+/** Returns a map model of map data */
+export declare function mapModel<K, T>(v?: [K, T][]): Map<K, T>;
+
+/** Awaits async data in a sync component */
+export declare function awaited<T>(target: Promise<T>): [unknown, T | undefined, () => void];
+export declare function awaited<T>(target: () => Promise<T>): [unknown, T | undefined, () => void];
 
+/** Mounts a slot parameter of the component */
 export declare function Slot(options: { model?: () => void; slot?: () => void }): void;
 export declare function Slot<Props extends object>(
     options: {
@@ -81,52 +86,89 @@ export declare function Slot<Props extends object>(
     } & Props,
 ): void;
 
-export declare function If(props: { condition: unknown; slot?: unknown }): void;
+/** Renders content conditionally */
+export declare function If(props: { $condition: unknown; slot?: unknown }): void;
 
-export declare function ElseIf(props: { condition: unknown; slot?: unknown }): void;
+/** Renders content conditionally, use strict after `<If/>` */
+export declare function ElseIf(props: { $condition: unknown; slot?: unknown }): void;
 
+/** Renders content conditionally, use strict after `<If/>` or `<ElseIf/>` */
 export declare function Else(props: { slot?: unknown }): void;
 
-export declare function For<T>(props: { of: T[]; slot?: (value: T) => void }): void;
-export declare function For<T>(props: { of: Set<T>; slot?: (value: T) => void }): void;
-export declare function For<K, T>(props: { of: Map<K, T>; slot?: (value: T, index: K) => void }): void;
-
-export declare function Watch<T>(props: { model: T; slot?: (value: T) => void }): void;
-
-export declare function Debug(props: { model: unknown }): void;
-
+/** Renders content several times using a model (array, map or set) */
+export declare function For<T>(props: {
+    of: readonly DeepReadonly<T>[];
+    slot?: (value: DeepReadonly<T>) => void;
+}): void;
+export declare function For<T>(props: {
+    of: ReadonlySet<DeepReadonly<T>>;
+    slot?: (value: DeepReadonly<T>) => void;
+}): void;
+export declare function For<K, T>(props: {
+    of: ReadonlyMap<DeepReadonly<K>, DeepReadonly<T>>;
+    slot?: (value: DeepReadonly<T>, index: DeepReadonly<K>) => void;
+}): void;
+
+/** Refresh the content each time then the reactive model is updated */
+export declare function Watch<T>(props: { $model: T; slot?: (value: T) => void }): void;
+
+/** Create a debug comment in DOM */
+export declare function Debug(props: { $model: unknown }): void;
+
+/** Render content after a while */
 export declare function Delay(props: { time?: number; slot?: unknown }): void;
 
-export declare function forward<T>(value: T): T;
-
-export declare function calculate<T>(f: () => T): T;
-
-export declare function watch(f: () => void): void;
-
-export declare function awaited<T>(target: Promise<T>): [unknown, T | undefined];
-export declare function awaited<T>(target: () => Promise<T>): [unknown, T | undefined, () => void];
-
-export declare function store<Return extends object>(fn: () => Return): () => Return;
-export declare function store<Input extends object, Return extends object>(
+export type DeepReadonly<T> =
+    T extends Map<infer K, infer V>
+        ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+        : T extends ReadonlyMap<infer K, infer V>
+          ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+          : T extends WeakMap<infer K, infer V>
+            ? WeakMap<DeepReadonly<K>, DeepReadonly<V>>
+            : T extends Set<infer U>
+              ? ReadonlySet<DeepReadonly<U>>
+              : T extends ReadonlySet<infer U>
+                ? ReadonlySet<DeepReadonly<U>>
+                : T extends WeakSet<infer U>
+                  ? WeakSet<DeepReadonly<U>>
+                  : T extends Promise<infer U>
+                    ? Promise<DeepReadonly<U>>
+                    : T extends (...args: unknown[]) => unknown
+                      ? T
+                      : T extends {}
+                        ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
+                        : T;
+
+/** Stores a singleton state to memory */
+export declare function store<Return extends object>(fn: () => Return): DeepReadonly<Return>;
+
+/** Creates a model (state) constructor */
+export declare function model<Return extends object>(fn: () => Return): () => DeepReadonly<Return>;
+export declare function model<Input extends object, Return extends object>(
     fn: (input: Input) => Return,
-): (input: Input) => Return;
-
-export { $ } from "vasille-jsx";
+): (input: Input) => DeepReadonly<Return>;
 
 export { QueryParams, ScreenProps, RouteParameters } from "vasille-router";
 export { Router, NavigationMode } from "vasille-router/web-router";
 
+/** Applies the value to theme `name` */
 export declare function theme<T>(name: string, value: T): T;
+/** Applies the value to dark theme */
 export declare function dark<T>($: T): T;
-// rules with target
+/** Applies the value to mobile devices */
 export declare function mobile<T>($: T): T;
+/** Applies the value to tablet devices */
 export declare function tablet<T>($: T): T;
+/** Applies the value to laptop devices */
 export declare function laptop<T>($: T): T;
+/** Applies the value when user prefers dark theme */
 export declare function prefersDark<T>($: T): T;
+/** Applies the value when user prefers light theme */
 export declare function prefersLight<T>($: T): T;
 
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
 
+/** Creates a local style sheet */
 export declare const styleSheet: <
     T extends {
         [className: string]: {
@@ -140,6 +182,7 @@ export declare const styleSheet: <
     input: T,
 ) => { [K in keyof T]: string };
 
+/** Mounts a Vasille.JS component to page */
 export declare function mount<T>(
     element: Element,
     component: ($: T) => void,
@@ -147,10 +190,6 @@ export declare function mount<T>(
     debugUi?: boolean,
 ): App<Node, Element, TagOptions>;
 
-type Screen<Route extends string> = (input: ScreenProps<Route>) => Promise<void>;
-
-export declare function screen<Route extends string>(renderer: Screen<Route>): Screen<Route>;
-
 interface RouterInitialization<Routes extends string> {
     routes: {
         [K in Routes]: {
@@ -165,33 +204,35 @@ interface RouterInitialization<Routes extends string> {
     loadingOverlay?(props: object): void;
 }
 
+/** Starts a route app */
 export declare function routerApp<Routes extends string>(
     init: RouterInitialization<Routes>,
     element?: Element,
     debugUi?: boolean,
 ): App<Node, Element, TagOptions>;
 
-export declare function runOnDestroy(fn: () => void): void;
+/** Run a function before component mount */
+export declare function beforeMount(fn: () => void): void;
 
-declare const VasilleKey: unique symbol;
-
-export interface BridgeValue<T> {
-    [VasilleKey]: T;
-}
+/** Run a function after component mount */
+export declare function afterMount(fn: () => void): void;
 
-export declare const bridge: {
-    ref<T>(v: T): BridgeValue<T>;
-    bind<T>(v: T): BridgeValue<T>;
-    calculate<T>(fn: () => T): BridgeValue<T>;
-    watch(fn: () => void): void;
-    arrayModel<T>(arr?: T[]): ArrayModel<T>;
-    setModel<T>(data?: T[]): SetModel<T>;
-    mapModel<K, T>(data?: [K, T][]): MapModel<K, T>;
-    reactiveObject<T extends object>(obj: T): { [K in keyof T]: BridgeValue<T[K]> };
-    value<T>(of: BridgeValue<T>): T;
-    setValue<T>(of: BridgeValue<T>, value: T): T;
-    stored<T>(v: T | IValue<T> | BridgeValue<T>): T;
-    destroy(v: BridgeValue<unknown>): void;
-};
+/** Run a function before component destroy */
+export declare function beforeDestroy(fn: () => void): void;
 
+/** Returns the current used router */
 export declare function router(): Router<string> | undefined;
+
+/** Composes a modal window (v4+) */
+export declare function modal<T extends object>(modal: (input: T) => void): (input: T) => void;
+
+/** Describes properties of a prompt window */
+export interface PromptProps<T> {
+    resolve(data: T): void;
+    reject(err: unknown): void;
+}
+
+/** Composes a function which will show a prompt on call */
+export declare function prompt<T, Input extends PromptProps<T> = PromptProps<T>>(
+    modal: (input: Input) => void,
+): (input: Omit<Input, keyof PromptProps<unknown>>, timeout?: number) => Promise<T>;

package/lib/bin.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+import { cwd, exit } from "node:process";
+import { readFileSync } from "fs";
+import path from "node:path";
+const packageJsonPath = path.join(cwd(), "./package.json");
+let content = undefined;
+try {
+    content = readFileSync(packageJsonPath, "utf8");
+}
+catch (e) {
+    console.error("Failed to read package.json", e);
+    exit(1);
+}
+let parsed;
+try {
+    parsed = JSON.parse(content);
+}
+catch (e) {
+    console.error("Failed to parse package.json", e);
+    exit(2);
+}
+if (parsed &&
+    typeof parsed === "object" &&
+    "devDependencies" in parsed &&
+    parsed.devDependencies &&
+    typeof parsed.devDependencies === "object" &&
+    "vasille-web-cli" in parsed.devDependencies) {
+    import(path.join(cwd(), "./node_modules/vasille-web-cli/bin/run.js"));
+}
+else {
+    console.info("Vasille Web CLI is not installed. Please run `npm install --save-dev vasille-web-cli`");
+    exit(1);
+}

package/lib/index.js

@@ -1,20 +1,67 @@
+import { Portal, reportError } from "vasille";
 import { Runner } from "vasille/web-runner";
 import { mount as coreMount } from "vasille-jsx";
-import { mvvmView as coreMvvmView } from "vasille-jsx";
 import { styleSheet as coreStyleSheet } from "vasille-css";
 import { routeApp as coreRouteApp } from "vasille-router/web-router";
-export { $, mvvmView as view, mvvmView, mvcView, hybridView, Debug, Delay, Else, ElseIf, For, If, Slot, Watch, awaited, store, } from "vasille-jsx";
-export { screen } from "vasille-router";
+export { view, view as component, view as compose, forward, backward, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Debug, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, } from "vasille-jsx";
+export { screen, screen as page, } from "vasille-router";
 export { Router, routeApp } from "vasille-router/web-router";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
 export const styleSheet = coreStyleSheet;
-export function compose(renderer, name) {
-    if (name) {
-        console.warn("Vasille: compose function is deprecated, please use view function instead.");
-    }
-    return coreMvvmView(renderer, name);
+function createPortal(node) {
+    const portal = new Portal({ node: document.body }, node.runner);
+    node.create(portal);
+    return portal;
 }
-export function mount(element, component, $, debugUi) {
-    return coreMount(element, component, new Runner(debugUi ?? false, window.document), $);
+export function modal(modal) {
+    return function (props, node) {
+        if (!node) {
+            throw new Error("Vasille: Modal context is missing");
+        }
+        const portal = createPortal(node);
+        try {
+            modal(portal, props);
+        }
+        catch (e) {
+            reportError(e);
+        }
+    };
+}
+export function prompt(modal) {
+    return function (node, input, timeout) {
+        return new Promise((resolve, reject) => {
+            const portal = createPortal(node);
+            const timer = timeout &&
+                setTimeout(() => {
+                    destroy();
+                    reject(new Error("Timeout"));
+                }, timeout);
+            function destroy() {
+                timer && clearTimeout(timer);
+                portal.destroy();
+            }
+            try {
+                modal(portal, {
+                    ...input,
+                    resolve(value) {
+                        destroy();
+                        resolve(value);
+                    },
+                    reject(error) {
+                        destroy();
+                        reject(error);
+                    },
+                });
+            }
+            catch (e) {
+                destroy();
+                reject(e);
+            }
+        });
+    };
+}
+export function mount(element, component, input, debugUi) {
+    return coreMount(element, component, new Runner(debugUi ?? false, window.document), input);
 }
 export function routerApp(init, element, debugUi) {
     return coreRouteApp(element ?? document.body, window, window.location, init, debugUi);

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "vasille-web",
-  "version": "3.2.1",
-  "description": "The first Developer eXperience Orientated web front-end framework.",
+  "version": "4.1.0",
+  "description": "The same framework which is designed to build bulletproof frontends.",
   "main": "index.js",
   "types": "./index.d.ts",
+  "bin": {
+    "vasille-web": "./lib/bin.js"
+  },
   "exports": {
     ".": {
       "types": "./fake-types/index.d.ts",
@@ -22,8 +25,7 @@
     "prepack": "cp -f ../README.md ./README.md",
     "prettier": "prettier src fake-types --write",
     "build": "tsc --build tsconfig.json",
-    "check-types": "tsc --noEmit --lib es2020 --types web --moduleResolution Node16 --module Node16 ./fake-types/index.d.ts",
-    "update-types": "tsc --build tsconfig-types.json"
+    "check-types": "tsc --noEmit --lib es2020 --types web --moduleResolution Node16 --module Node16 ./fake-types/index.d.ts"
   },
   "type": "module",
   "repository": {
@@ -45,14 +47,15 @@
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "dependencies": {
     "csstype": "^3.1.3",
-    "vasille": "^3.2.1",
-    "vasille-css": "^3.2.1",
-    "vasille-jsx": "^3.2.1",
-    "vasille-router": "^3.2.1"
+    "vasille": "^4.1.0",
+    "vasille-css": "^4.1.0",
+    "vasille-jsx": "^4.1.0",
+    "vasille-router": "^4.0.0"
   },
   "devDependencies": {
-    "prettier": "^3.6.2",
+    "@types/node": "^24.3.0",
     "@types/web": "^0.0.256",
+    "prettier": "^3.6.2",
     "typescript": "^5.8.3"
   }
 }

package/spec/css.d.ts

@@ -1,7 +1,7 @@
 import type {ObsoletePropertiesHyphen, StandardPropertiesHyphen, VendorPropertiesHyphen} from "csstype";
 
-export type RawStyleProps = StandardPropertiesHyphen<string | number | number[], string> &
-  VendorPropertiesHyphen<string | number | number[], string> &
-  ObsoletePropertiesHyphen<string | number | number[], string> &
+export type RawStyleProps = StandardPropertiesHyphen<string | number | number[]> &
+  VendorPropertiesHyphen<string | number | number[]> &
+  ObsoletePropertiesHyphen<string | number | number[]> &
   {[variable: `--${string}`]: string};
 export type StyleProps = {[K in keyof RawStyleProps]: RawStyleProps[K] | RawStyleProps[K][] };

package/types/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/types/index.d.ts

@@ -1,12 +1,11 @@
 import { Fragment } from "vasille";
 import { StyleProps } from "../spec/css.js";
 import { TagOptions } from "vasille/web-runner";
-import { Composed as CoreComposed } from "vasille-jsx";
 import { WebRouterInitialization } from "vasille-router/web-router";
-export { $, mvvmView as view, mvvmView, mvcView, hybridView, Debug, Delay, Else, ElseIf, For, If, Slot, Watch, awaited, store, } from "vasille-jsx";
-export { QueryParams, ScreenProps, RouteParameters, screen } from "vasille-router";
-export { Router, WebRouterInitialization, NavigationMode, routeApp } from "vasille-router/web-router";
-export type { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
+export { view, view as component, view as compose, forward, backward, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Debug, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, } 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, routeApp } from "vasille-router/web-router";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
 export declare const styleSheet: <T extends {
     [className: string]: {
         [media: `@${string}`]: {
@@ -15,6 +14,11 @@ export declare const styleSheet: <T extends {
         [state: `:${string}`]: StyleProps;
     } & StyleProps;
 }>(input: T) => { [K in keyof T]: string; };
-export declare function compose<Node, Element, TagOptions extends object, In extends object, Out>(renderer: (f: Fragment<Node, Element, TagOptions>, input: In) => Out, name: string): CoreComposed<Node, Element, TagOptions, In, Out>;
-export declare function mount<T>(element: Element, component: ($: T) => void, $: T, debugUi?: boolean): import("vasille").App<Node, Element, TagOptions, object>;
-export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element, debugUi?: boolean): import("vasille").App<Node, Element, TagOptions, {}>;
+export declare function modal<T extends object>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void): (input: T, node: Fragment<Node, Element, TagOptions>) => void;
+export interface PromptProps {
+    resolve(data: unknown): void;
+    reject(err: unknown): void;
+}
+export declare function prompt<T extends PromptProps>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void): (node: Fragment<Node, Element, TagOptions>, input: T, timeout?: number) => Promise<unknown>;
+export declare function mount<T>(element: Element, component: ($: T) => void, input: T, debugUi?: boolean): import("vasille").App<Node, Element, TagOptions, object>;
+export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element, debugUi?: boolean): import("vasille").App<Node, Element, TagOptions, object>;

package/types/jsx-runtime.d.ts

@@ -3,12 +3,15 @@ import type { HtmlTagMap } from "../spec/html.d.ts";
 type prefixedObject<T, P extends string> = {
     [K in keyof T as K extends string ? `${P}${K}` : never]?: T[K];
 };
+type EventHandlers<T> = {
+    [K in keyof T]: T[K] | [T[K], boolean | AddEventListenerOptions];
+};
 type HtmlInput<K extends keyof HTMLElementTagNameMap & keyof HtmlTagMap> = {
     callback?: (node: HTMLElementTagNameMap[K]) => unknown;
     class?: (string | Record<string, boolean> | false)[] | string;
     style?: RawStyleProps | string;
     slot?: unknown;
-} & Partial<HtmlTagMap[K]["attrs"]> & prefixedObject<HtmlTagMap[K]["events"], "on"> & Partial<prefixedObject<HtmlTagMap[K]["props"], "bind:">>;
+} & Partial<HtmlTagMap[K]["attrs"]> & prefixedObject<EventHandlers<HtmlTagMap[K]["events"]>, "on"> & Partial<prefixedObject<HtmlTagMap[K]["props"], "bind:">>;
 export declare namespace JSX {
     type ElementType = keyof IntrinsicElements | ((props?: object) => void);
     type Element = never;