vasille-web 4.3.1 → 5.0.0

package/README.md

@@ -1,19 +1,30 @@
-# Vasille
+# Steel Frame
 
-![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v5/doc/img/logo.png)
 
-`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.
+`SteelFrameKit` is a front-end development kit, which is developed to provide bulletproof frontends.
 
 [![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
 
 ## Table of content
 
-* [Installation](#installation)
-* [How to use Vasille](#how-to-use-vasille)
-* [How SAFE is Vasille](#how-safe-is-vasille)
-* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
-* [How POWERFUL is Vasille](#how-powerful-is-vasille)
-* [Road Map](#road-map)
+- [Steel Frame](#steel-frame)
+  - [Table of content](#table-of-content)
+  - [Installation](#installation)
+  - [How to use SteelFramekit](#how-to-use-steelframekit)
+    - [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)
+  - [Road map](#road-map)
+  - [Change log](#change-log)
+    - [5.0.0](#500)
+    - [4.3.0](#430)
+    - [4.2.0](#420)
+    - [4.1.0](#410)
+    - [4.0.0](#400)
+  - [Questions](#questions)
 
 
 <hr>
@@ -21,21 +32,22 @@
 ## Installation
 
 ```
-npm install vasille-web --save
+npm install steel-frame --save
 ```
 
-## How to use Vasille
+## How to use SteelFramekit
 
 Create an app from a template
 
 ```bash
-$ npm create vasille
+$ npm create steel-frame
 ```
 
 ### Full documentation:
-* [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)
-* [Vasille Compostion function](https://github.com/vasille-js/vasille-js/blob/v4/doc/Compositions.md)
+* [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-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)
+* [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -43,14 +55,14 @@ $ npm create vasille
 
 <hr>
 
-## How SAFE is Vasille
+## How SAFE is SteelFrameKit
 
 The safe of your application is ensured by
 * `100%` coverage of code by unit tests.
   Each function, each branch is working as designed.
 * OOP, DRY, KISS and SOLID principles are applied.
 * `strong typing` makes your javascript/typescript code safe as C++ code.
-All entities of `vasille` core library are strongly typed, including:
+All entities of `SteelFrameKit` core library are strongly typed, including:
   * data fields & properties.
   * computed properties (function parameters and result).
   * methods.
@@ -60,11 +72,11 @@ 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 INTUITIVE is Vasille
+## How INTUITIVE is SteelFrameKit
 
 There is the "Hello World":
 ```typescript jsx
-import { compose, mount } from "vasille-dx";
+import { compose, mount } from "steel-frame";
 
 const App = compose(() => {
   <p>Hello world</p>;
@@ -73,7 +85,7 @@ const App = compose(() => {
 mount(document.body, App, {});
 ```
 
-## How POWERFUL is Vasille
+## How POWERFUL is SteelFrameKit
 
 All of these are supported:
 * Components.
@@ -85,25 +97,30 @@ All of these are supported:
 * 2-way data binding in components.
 * Logic block (if, else).
 * Loops (array, map, set).
+* Dependency injection.
 
 <hr>
 
 ## Road map
 
-* [x] Update the `Vasille Core` library to version 3.0.
+* [x] Update the `core` library to version 3.0.
 * [x] `100%` Test Coverage for core Library v3.
-* [x] Develop the `Vasille JSX` library.
+* [x] Develop the `JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
-* [x] Develop the `Vasille Babel Plugin`.
+* [x] Develop the `Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
 * [x] Add router.
 * [x] Add SSG (static site generation).
+* [ ] Develop tools extension for debugging (WIP).
 * [ ] Add SSR (server side rendering).
-* [ ] Develop tools extension for debugging.
 
 ## Change log
 
+### 5.0.0
+
+Add support for context and dependencies injection.
+
 ### 4.3.0
 
 Add new function `safe` which make functions safe, errors are reported automatically.
@@ -114,19 +131,14 @@ Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator
 
 ### 4.1.0
 
-Added SSG (static site generation) as build option `vasille-web build static`.
+Added SSG (static site generation) as build option `sf build static`.
 
 ### 4.0.0
 
-Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).
+Initial version of the framework with file based routing and building scripts (`sf dev` and `sf build spa`).
 
 ## Questions
 
 If you have questions, feel free to contact the maintainer of the project:
 
 * [Author's Email](mailto:vas.lixcode@gmail.com)
-* [Author's Telegram](https://t.me/lixcode)
-
-<hr>
-
-**Made in Moldova** 🇲🇩

package/lib/dev.js

@@ -0,0 +1,25 @@
+import { devMount as coreMount } from "vasille-jsx/dev";
+import { devRouteApp as coreRouteApp } from "vasille-router/dev";
+import { DevPortal, DevRunner } 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);
+    node.create(portal);
+    return portal;
+}
+export function devModal(modalFn, declaration, name) {
+    return (input, node, usage) => {
+        modal(modalFn, node => createPortal(node, declaration, usage, name))(input, node);
+    };
+}
+export function devPrompt(modal, declaration, name) {
+    return function (node, input, timeout, usage) {
+        return prompt(modal, node => createPortal(node, declaration, usage, name))(node, input, timeout);
+    };
+}
+export function devMount(element, component, input, inspector) {
+    return coreMount(element, component, new DevRunner(window.document, inspector), input, inspector);
+}
+export function devRouterApp(init, element, inspector) {
+    return coreRouteApp(element, window, window.location, init, inspector);
+}

package/lib/index.js

@@ -1,25 +1,25 @@
 import { Portal, reportError } from "vasille";
 import { Runner } from "vasille/web-runner";
 import { mount as coreMount } from "vasille-jsx";
-import { styleSheet as coreStyleSheet } from "vasille-css";
 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, 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 { 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 { screen, screen as page, } from "vasille-router";
-export { Router, routeApp } from "vasille-router/web-router";
+export { Router } from "vasille-router/web-router";
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
-export const styleSheet = coreStyleSheet;
+export { context, impute, receive, share } from "vasille-context";
 function createPortal(node) {
     const portal = new Portal({ node: document.body }, node.runner);
     node.create(portal);
     return portal;
 }
-export function modal(modal) {
+export function modal(modal, create = createPortal) {
     return function (props, node) {
         if (!node) {
             throw new Error("Vasille: Modal context is missing");
         }
-        const portal = createPortal(node);
+        const portal = create(node);
         try {
             modal(portal, props);
         }
@@ -28,10 +28,10 @@ export function modal(modal) {
         }
     };
 }
-export function prompt(modal) {
+export function prompt(modal, create = createPortal) {
     return function (node, input, timeout) {
         return new Promise((resolve, reject) => {
-            const portal = createPortal(node);
+            const portal = create(node);
             const timer = timeout &&
                 setTimeout(() => {
                     destroy();
@@ -61,9 +61,9 @@ export function prompt(modal) {
         });
     };
 }
-export function mount(element, component, input, debugUi) {
-    return coreMount(element, component, new Runner(debugUi ?? false, window.document), input);
+export function mount(element, component, input) {
+    return coreMount(element, component, new Runner(window.document), input);
 }
-export function routerApp(init, element, debugUi) {
-    return coreRouteApp(element ?? document.body, window, window.location, init, debugUi);
+export function routerApp(init, element) {
+    return coreRouteApp(element ?? document.body, window, window.location, init);
 }

package/lib/spec/css.js

@@ -0,0 +1 @@
+export {};

package/lib/spec/html.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "vasille-web",
-  "version": "4.3.1",
+  "version": "5.0.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",
+      "types": "./types/index.d.ts",
       "import": "./lib/index.js",
       "browser": "./lib/index.js",
       "node": "./lib/index.js"
@@ -19,13 +16,19 @@
       "import": "./lib/jsx-runtime.js",
       "browser": "./lib/jsx-runtime.js",
       "node": "./lib/jsx-runtime.js"
+    },
+    "./dev": {
+      "types": "./types/dev.d.ts",
+      "import": "./lib/dev.js",
+      "browser": "./lib/dev.js",
+      "node": "./lib/dev.js"
     }
   },
   "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 --moduleResolution Node16 --module Node16 ./fake-types/index.d.ts"
+    "prettier": "prettier src --write",
+    "prebuild": "rm -rf lib types",
+    "build": "tsc --build tsconfig.json"
   },
   "type": "module",
   "repository": {
@@ -47,10 +50,11 @@
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "dependencies": {
     "csstype": "^3.1.3",
-    "vasille": "^4.3.1",
-    "vasille-css": "^4.1.0",
-    "vasille-jsx": "^4.3.0",
-    "vasille-router": "^4.0.0"
+    "vasille": "^5.0.0",
+    "vasille-context": "^5.0.0",
+    "vasille-css": "^5.0.0",
+    "vasille-jsx": "^5.0.0",
+    "vasille-router": "^5.0.0"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

package/types/dev.d.ts

@@ -0,0 +1,9 @@
+import { Fragment } from "vasille";
+import { TagOptions } from "vasille/web-runner";
+import { IDevRunner, Inspector, StaticPosition } from "vasille/dev";
+import { PromptProps } from "./index.js";
+import { WebRouterInitialization } from "vasille-router/web-router";
+export declare function devModal<T extends object>(modalFn: (node: Fragment<Node, Element, TagOptions>, input: T) => void, declaration: StaticPosition, name: string): (input: T, node: Fragment<Node, Element, TagOptions>, usage: StaticPosition | undefined) => 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>>;

package/types/index.d.ts

@@ -1,27 +1,20 @@
-import { Fragment } from "vasille";
-import { StyleProps } from "../spec/css.js";
+import { App, Fragment, Portal } from "vasille";
 import { TagOptions } from "vasille/web-runner";
 import { WebRouterInitialization } from "vasille-router/web-router";
-export type { RawStyleProps as StyleProps } from "../spec/css.js";
+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, 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 { 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 { 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 { Router, type WebRouterInitialization, type NavigationMode } from "vasille-router/web-router";
 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;
-}>(input: T) => { [K in keyof T]: string; };
-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 { context, impute, receive, share } from "vasille-context";
+export declare function modal<T extends object>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void, create?: (node: Fragment<Node, Element, TagOptions>) => Portal<Node, Element, TagOptions>): (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>;
+export declare function prompt<T extends PromptProps>(modal: (node: Fragment<Node, Element, TagOptions>, input: T) => void, create?: (node: Fragment<Node, Element, TagOptions>) => Portal<Node, Element, TagOptions>): (node: Fragment<Node, Element, TagOptions>, input: T, timeout?: number) => Promise<unknown>;
+export declare function mount<T>(element: Element, component: ($: T) => void, input: T): App<Node, Element, TagOptions>;
+export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element): App<Node, Element, TagOptions>;

package/types/jsx-runtime.d.ts

@@ -1,5 +1,5 @@
-import type { RawStyleProps } from "../spec/css.d.ts";
-import type { HtmlTagMap } from "../spec/html.d.ts";
+import type { RawStyleProps } from "./spec/css.ts";
+import type { HtmlTagMap } from "./spec/html.ts";
 type prefixedObject<T, P extends string> = {
     [K in keyof T as K extends string ? `${P}${K}` : never]?: T[K];
 };
@@ -21,7 +21,7 @@ export declare namespace JSX {
         slot: unknown;
     }
     interface IntrinsicElements {
-        a2: HtmlInput<"a">;
+        a: HtmlInput<"a">;
         abbr: HtmlInput<"abbr">;
         address: HtmlInput<"address">;
         area: HtmlInput<"area">;

package/types/spec/css.d.ts

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