vasille-web 3.1.5 → 3.2.1

package/README.md

@@ -11,7 +11,7 @@
 * [Installation](#installation)
 * [How to use Vasille](#how-to-use-vasille)
 * [How SAFE is Vasille](#how-safe-is-vasille)
-* [How SIMPLE is Vasille](#how-simple-is-vasille)
+* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
 * [Road Map](#road-map)
 
@@ -44,6 +44,7 @@ $ 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)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -60,7 +61,7 @@ The safe of your application is ensured by
 * `strong typing` makes your javascript/typescript code safe as C++ code.
 All entities of `vasille` core library are strongly typed, including:
   * data fields & properties.
-  * computed properties (function parameters & result).
+  * computed properties (function parameters and result).
   * methods.
   * events (defined handlers & event emit).
   * DOM events & DOM operation (attributing, styling, etc.).
@@ -68,7 +69,7 @@ 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 SIMPLE is Vasille
+## How INTUITIVE is Vasille
 
 There is the "Hello World":
 ```typescript jsx
@@ -105,7 +106,7 @@ All of these are supported:
 * [x] Develop the `Vasille Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
-* [ ] Add router.
+* [x] Add router.
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 

package/fake-types/index.d.ts

@@ -1,52 +1,197 @@
+import { ArrayModel, SetModel, MapModel, IValue, App, Fragment } 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 {
-    ref,
-    bind,
-    calculate,
-    forward,
-    arrayModel,
-    setModel,
-    mapModel,
-    reactiveObject,
-    value,
-    watch,
-} from "vasille-dx";
-
-export {
-    compose,
-    Debug,
-    Delay,
-    Else,
-    ElseIf,
-    For,
-    If,
-    Slot,
-    Watch,
-    awaited,
-    store,
-} from "vasille-dx";
-
-export {
-    theme,
-    tablet,
-    dark,
-    mobile,
-    laptop,
-    prefersLight,
-    prefersDark,
-    setMobileMaxWidth,
-    setTabletMaxWidth,
-    setLaptopMaxWidth,
-} from "vasille-css";
-
-export declare const styleSheet: <T extends {
-    [className: string]: {
-        [media: `@${string}`]: {
+declare interface Params {
+    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;
+    },
+    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"],
+) => void;
+
+/**
+ * create an MVVM view, which can receive external reactive value as props
+ * @param renderer is the view constructor
+ */
+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
+ */
+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;
+export declare function ref<T>(v: T): T;
+export declare function bind<T>(v: T): T;
+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;
+
+export declare function Slot(options: { model?: () => void; slot?: () => void }): void;
+export declare function Slot<Props extends object>(
+    options: {
+        model?: (props: Props) => void;
+        slot?: () => void;
+    } & Props,
+): void;
+
+export declare function If(props: { condition: unknown; slot?: unknown }): void;
+
+export declare function ElseIf(props: { condition: unknown; slot?: unknown }): void;
+
+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;
+
+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>(
+    fn: (input: Input) => Return,
+): (input: Input) => Return;
+
+export { $ } from "vasille-jsx";
+
+export { QueryParams, ScreenProps, RouteParameters } from "vasille-router";
+export { Router, NavigationMode } from "vasille-router/web-router";
+
+export declare function theme<T>(name: string, value: T): T;
+export declare function dark<T>($: T): T;
+// rules with target
+export declare function mobile<T>($: T): T;
+export declare function tablet<T>($: T): T;
+export declare function laptop<T>($: T): T;
+export declare function prefersDark<T>($: T): T;
+export declare function prefersLight<T>($: T): T;
+
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
+
+export declare const styleSheet: <
+    T extends {
+        [className: string]: {
+            [media: `@${string}`]: {
+                [state: `:${string}`]: StyleProps;
+            } & StyleProps;
             [state: `:${string}`]: StyleProps;
         } & StyleProps;
-        [state: `:${string}`]: StyleProps;
-    } & StyleProps;
-}>(input: T) => { [K in keyof T]: string; };
-export declare function mount<T>(element: Element, component: ($: T) => void, $: T, debugUi?: boolean): void;
+    },
+>(
+    input: T,
+) => { [K in keyof T]: string };
+
+export declare function mount<T>(
+    element: Element,
+    component: ($: T) => void,
+    $: 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]: {
+            screen: Screen<K>;
+            minAccessLevel?: number;
+        };
+    };
+    getAccessLevel?(): Promise<number>;
+    fallbackScreen?(arg: { cause: "not-found" | "no-access" }): void;
+    errorScreen?(data: { error: unknown }): void;
+    loadingScreen?(props: object): void;
+    loadingOverlay?(props: object): void;
+}
+
+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;
+
+declare const VasilleKey: unique symbol;
+
+export interface BridgeValue<T> {
+    [VasilleKey]: T;
+}
+
+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;
+};
 
+export declare function router(): Router<string> | undefined;

package/lib/index.js

@@ -1,8 +1,21 @@
 import { Runner } from "vasille/web-runner";
-import { mount as coreMount } from "vasille-dx";
+import { mount as coreMount } from "vasille-jsx";
+import { mvvmView as coreMvvmView } from "vasille-jsx";
 import { styleSheet as coreStyleSheet } from "vasille-css";
-export { compose, Debug, Delay, Else, ElseIf, For, If, Slot, Watch, awaited, store, } from "vasille-dx";
+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 { Router, routeApp } from "vasille-router/web-router";
 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);
+}
 export function mount(element, component, $, debugUi) {
-    coreMount(element, component, new Runner(debugUi ?? false, window.document), $);
+    return coreMount(element, component, new Runner(debugUi ?? false, window.document), $);
+}
+export function routerApp(init, element, debugUi) {
+    return coreRouteApp(element ?? document.body, window, window.location, init, debugUi);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-web",
-  "version": "3.1.5",
+  "version": "3.2.1",
   "description": "The first Developer eXperience Orientated web front-end framework.",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -20,8 +20,9 @@
   },
   "scripts": {
     "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 ./fake-types/index.d.ts",
+    "check-types": "tsc --noEmit --lib es2020 --types web --moduleResolution Node16 --module Node16 ./fake-types/index.d.ts",
     "update-types": "tsc --build tsconfig-types.json"
   },
   "type": "module",
@@ -43,13 +44,14 @@
   },
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "dependencies": {
-    "babel-plugin-vasille": "^0.99.2",
     "csstype": "^3.1.3",
-    "vasille": "^3.1.0",
-    "vasille-css": "^3.1.0",
-    "vasille-dx": "^3.1.3"
+    "vasille": "^3.2.1",
+    "vasille-css": "^3.2.1",
+    "vasille-jsx": "^3.2.1",
+    "vasille-router": "^3.2.1"
   },
   "devDependencies": {
+    "prettier": "^3.6.2",
     "@types/web": "^0.0.256",
     "typescript": "^5.8.3"
   }