steel-frame 0.0.1 → 5.0.1

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/steel-frame.iml" filepath="$PROJECT_DIR$/.idea/steel-frame.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
+  </component>
+</project>

package/.idea/steel-frame.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

package/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "tabWidth": 4,
+  "printWidth": 120,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "arrowParens": "avoid",
+  "parser": "typescript",
+  "singleAttributePerLine": false
+}

package/README.md

@@ -1,7 +1,144 @@
-# SteelFrame empowers you to
-* build fault-tolerant web applications effortlessly,
-* navigate gigabytes of code in seconds,
-* fix bugs at lightspeed,
-* have zero onboarding.
+# Steel Frame
 
-[Contact me](https://www.linkedin.com/in/vasile-leli%C8%9Bac-57040b381/) for more details.
+![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 bulletproof frontends.
+
+[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
+
+## Table of content
+
+- [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>
+
+## Installation
+
+```
+npm install steel-frame --save
+```
+
+## How to use SteelFramekit
+
+Create an app from a template
+
+```bash
+$ npm create steel-frame
+```
+
+### Full documentation:
+* [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)
+* [JavaScript Example](https://github.com/vasille-js/example-javascript)
+
+<hr>
+
+## 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 `SteelFrameKit` core library are strongly typed, including:
+  * data fields & properties.
+  * computed properties (function parameters and result).
+  * methods.
+  * events (defined handlers & event emit).
+  * DOM events & DOM operation (attributing, styling, etc.).
+  * slots of components.
+  * 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
+
+There is the "Hello World":
+```typescript jsx
+import { compose, mount } from "steel-frame";
+
+const App = compose(() => {
+  <p>Hello world</p>;
+});
+
+mount(document.body, App, {});
+```
+
+## How POWERFUL is SteelFrameKit
+
+All of these are supported:
+* Components.
+* Reactive values (observables).
+* Inline computed values.
+* Multiline computed values.
+* HTML & SVG tags.
+* Component custom slots.
+* 2-way data binding in components.
+* Logic block (if, else).
+* Loops (array, map, set).
+* Dependency injection.
+
+<hr>
+
+## Road map
+
+* [x] Update the `core` library to version 3.0.
+* [x] `100%` Test Coverage for core Library v3.
+* [x] Develop the `JSX` library.
+* [x] `100%` Test Coverage for the JSX library.
+* [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).
+
+## 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.
+
+### 4.2.0
+
+Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
+
+### 4.1.0
+
+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 (`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)

package/fake-types/index.d.ts

@@ -0,0 +1,260 @@
+import { App } from "vasille";
+import type { TagOptions } from "vasille/web-runner";
+import type { StyleSheetProps as StyleProps } from "vasille-web";
+import type { ScreenProps } from "vasille-router";
+import type { Router } from "vasille-router/web-router";
+
+export type { StyleProps } from "vasille-web";
+export type ClassItem = string | Record<string, boolean> | false;
+export type { FallbackScreenProps, ErrorScreenProps } from "vasille-router";
+export { safe } from "vasille";
+export type { AppSide, IdeSide } from "../types/communication.d.ts";
+
+/** Set a handler for component errors */
+export declare function setErrorHandler(handler: (e: unknown) => void): void;
+
+declare interface Params {
+    slot(...args: unknown[]): unknown;
+}
+
+declare type Composed<In extends object, Out> = (
+    $: (Required<In> extends Params ? Omit<In, "slot"> & { slot?: unknown } : In) & {
+        callback?(data: Out): void;
+    },
+) => void;
+declare type ComposedNoCallback<In extends object, Out> = (
+    $: Required<In> extends Params ? Omit<In, "slot"> & { slot?: unknown } : In,
+) => void;
+
+/** 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>;
+
+/** 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>;
+
+/** 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;
+/** Runs the function each time when a dependency is changed */
+export declare function watch(f: () => void): void;
+/** 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: {
+        model?: (props: Props) => void;
+        slot?: () => void;
+    } & Props,
+): void;
+
+/** Renders content conditionally */
+export declare function If<T>(props: {
+    $condition: T;
+    slot: (value: Exclude<T, false | 0 | "" | null | undefined>) => void;
+}): void;
+export declare function If(props: { $condition: unknown; slot?: unknown }): void;
+
+/** Renders content conditionally, use strict after `<If/>` */
+export declare function ElseIf<T>(props: {
+    $condition: T;
+    slot: (value: Exclude<T, false | 0 | "" | null | undefined>) => void;
+}): void;
+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;
+
+/** Renders content several times using a model (array, map or set) */
+export declare function For<T>(props: { of: ReadonlyArray<T>; slot?: (value: T) => void }): void;
+export declare function For<T>(props: { of: ReadonlySet<T>; slot?: (value: T) => void }): void;
+export declare function For<K, T>(props: { of: ReadonlyMap<K, T>; slot?: (value: T, index: 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;
+
+type ReadonlyState<T> =
+    T extends Map<infer K, infer V>
+        ? ReadonlyMap<K, V>
+        : T extends Set<infer V>
+          ? ReadonlySet<V>
+          : T extends Array<infer V>
+            ? ReadonlyArray<V>
+            : T extends object
+              ? { readonly [K in keyof T]: T[K] }
+              : T;
+
+/** Stores a singleton state to memory */
+export declare function store<Return extends object>(fn: () => Return): ReadonlyState<Return>;
+
+/** Creates a model (state) constructor */
+export declare function model<Return extends object>(fn: () => Return): () => ReadonlyState<Return>;
+export declare function model<Input extends object, Return extends object>(
+    fn: (input: Input) => Return,
+): (input: Input) => ReadonlyState<Return>;
+
+export { QueryParams, ScreenProps, RouteParameters } from "vasille-router";
+export { type 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;
+/** 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]: {
+            [media: `@${string}`]: {
+                [state: `:${string}`]: StyleProps;
+            } & StyleProps;
+            [state: `:${string}`]: StyleProps;
+        } & StyleProps;
+    },
+>(
+    input: T,
+) => { [K in keyof T]: string };
+
+/** Mounts a Vasille.JS component to page */
+export declare function mount<T>(element: Element, component: ($: T) => void, $: T): App<Node, Element, TagOptions>;
+
+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;
+}
+
+/** Starts a route app */
+export declare function routerApp<Routes extends string>(
+    init: RouterInitialization<Routes>,
+    element?: Element,
+): App<Node, Element, TagOptions>;
+
+/** Run a function before component mount */
+export declare function beforeMount(fn: () => void): void;
+export declare function beforeMount(fn: () => Promise<void>): void;
+
+/** Run a function after component mount */
+export declare function afterMount(fn: () => void): void;
+export declare function afterMount(fn: () => Promise<void>): 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>;
+
+/** Describes an injectable context value */
+export declare class SteelContext<Args extends unknown[], Value> {
+    private fn: (...args: Args) => Value;
+}
+
+/** Create an injectable context */
+export declare function context<Value, Args extends unknown[] = never[]>(
+    fn: (...args: Args) => Value,
+): SteelContext<Args, Value>;
+
+/** Share an context to children components */
+export declare function share<Args extends unknown[], Value>(ctx: SteelContext<Args, Value>, ...args: Args): Value;
+
+/** Share a dependency */
+export declare function share<Class>(className: abstract new (...args: unknown[]) => Class, value: Class): Class;
+
+/** Share a settings */
+export declare function share(key: string, value: string): string;
+
+/** Receive an shared context */
+export declare function receive<Args extends unknown[], Value>(ctx: SteelContext<Args, Value>): Value;
+
+/** Receive a dependency */
+export declare function receive<Class>(className: abstract new (...args: unknown[]) => Class): Class;
+
+/** Receive a settings */
+export declare function receive(key: string): string;
+
+/** Create and share an context when it is missing */
+export declare function impute<Args extends unknown[], Value>(ctx: SteelContext<Args, Value>, ...args: Args): Value;
+
+/** Ensure a dependency presence in context */
+export declare function impute<Class>(className: abstract new (...args: unknown[]) => Class, value: () => Class): Class;
+
+/** Share a setting value when it is missing */
+export declare function impute(key: string, value: string): string;

package/lib/communication.js

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

package/lib/index.js

@@ -0,0 +1,48 @@
+import { devArrayModel, devAwaited, DevDelay, devEnsure, devExpr, DevFor, devMapModel, devMatch, devModel, devRef, devSet, devSetModel, DevSlot, devStore, DevSwitch, devView, DevWatch, } from "vasille-jsx/dev";
+import { devModal, devPrompt, devRouterApp, devMount } from "vasille-web/dev";
+import { devScreen } from "vasille-router/dev";
+import { Inspector } from "./inspector.js";
+export { executionPosition, wrapFn, runFn, registerReference, shareStateById, positionedText } from "vasille/dev";
+export { setErrorHandler, earlyInspector } from "vasille-jsx/dev";
+export { safe, } from "vasille-web";
+export { setLaptopMaxWidth, setTabletMaxWidth, setMobileMaxWidth } from "vasille-css";
+export { devStyleSheet as styleSheet } from "vasille-css/dev";
+export { context, impute, receive, share } from "vasille-context";
+export const view = devView;
+export const component = devView;
+export const compose = devView;
+export const ensure = devEnsure;
+export const ref = devRef;
+export const expr = devExpr;
+export const bind = devExpr;
+export const calculate = devExpr;
+export const watch = devExpr;
+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 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 = devMount(element, component, input, inspector);
+    inspector.setup(app);
+    return app;
+}
+export function routerApp(init, element) {
+    const inspector = new Inspector();
+    const app = devRouterApp(init, element ?? document.body, inspector);
+    inspector.setup(app);
+    return app;
+}

package/lib/inspector.js

@@ -0,0 +1,212 @@
+import { AbstractInspector, earlyInspector } from "vasille-jsx/dev";
+import { Fragment } from "vasille";
+import { expr, ref } from "vasille-jsx";
+import { DevFragment, DevTag, DevTextNode } from "vasille/dev";
+class AppHandler {
+    constructor() {
+        this.canvas = null;
+        this.app = null;
+        this.active = ref(false);
+        this.$width = ref(window.innerWidth);
+        this.$height = ref(window.innerHeight);
+        window.onresize = () => {
+            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: "absolute",
+                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();
+        this.iterateFragment(this.app, new Set(ids), tags);
+        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.getNode().getBoundingClientRect();
+                ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+            }
+        }
+    }
+    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) {
+        for (const child of node.children) {
+            if ("id" in child && ids.has(child.id)) {
+                this.addReactive(child, set);
+            }
+            else if (child instanceof Fragment) {
+                this.iterateFragment(child, ids, set);
+            }
+        }
+    }
+    addTag(node, set) {
+        set.add(node);
+    }
+    addText(node, set) {
+        let it = node.parent;
+        while (it instanceof DevFragment) {
+            it = it.parent;
+        }
+        if (it instanceof DevTag) {
+            set.add(it);
+        }
+    }
+    addFragment(node, set) {
+        for (const child of node.children) {
+            this.addReactive(child, set);
+        }
+    }
+    addReactive(node, set) {
+        if (node instanceof DevTag) {
+            this.addTag(node, set);
+        }
+        else if (node instanceof DevTextNode) {
+            this.addText(node, set);
+        }
+        else if (node instanceof DevFragment) {
+            this.addFragment(node, set);
+        }
+    }
+}
+export class Inspector extends AbstractInspector {
+    constructor() {
+        super();
+        this.clean = false;
+        this.ws = null;
+        this.queue = [];
+        this.app = new AppHandler();
+        this._connect();
+        earlyInspector.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/lib/jsx-runtime.js

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

package/lib/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/communication.ts","../src/index.ts","../src/inspector.ts","../src/jsx-runtime.ts"],"version":"5.9.3"}

package/package.json

@@ -1,12 +1,64 @@
 {
   "name": "steel-frame",
-  "version": "0.0.1",
-  "description": "",
-  "license": "MIT",
-  "author": "",
-  "type": "module",
+  "version": "5.0.1",
+  "description": "SteelFrame: Build Fault-Tolerant Web Applications Effortlessly.",
   "main": "index.js",
+  "types": "./index.d.ts",
+  "bin": {
+    "sf": "./lib/run.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./fake-types/index.d.ts",
+      "import": "./lib/index.js",
+      "browser": "./lib/index.js",
+      "node": "./lib/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./types/jsx-runtime.d.ts",
+      "import": "./lib/jsx-runtime.js",
+      "browser": "./lib/jsx-runtime.js",
+      "node": "./lib/jsx-runtime.js"
+    }
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "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"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vasille-js/vasille-js.git"
+  },
+  "keywords": [
+    "frontend",
+    "framework",
+    "fast",
+    "simple",
+    "safe"
+  ],
+  "author": "lixcode",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vasille-js/vasille-js/issues"
+  },
+  "homepage": "https://github.com/vasille-js/vasille-js#readme",
+  "dependencies": {
+    "csstype": "^3.1.3",
+    "vasille": "^5.0.0",
+    "vasille-context": "^5.0.0",
+    "vasille-css": "^5.0.0",
+    "vasille-jsx": "^5.0.0",
+    "vasille-router": "^5.0.0",
+    "vasille-ssg": "^4.0.0",
+    "vasille-web": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.3.0",
+    "@types/web": "^0.0.256",
+    "prettier": "^3.6.2",
+    "typescript": "^5.8.3"
   }
 }

package/src/communication.ts

@@ -0,0 +1,10 @@
+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/src/index.ts

@@ -0,0 +1,90 @@
+import {
+    devArrayModel,
+    devAwaited,
+    DevDelay,
+    devEnsure,
+    devExpr,
+    DevFor,
+    devMapModel,
+    devMatch,
+    devModel,
+    devRef,
+    devSet,
+    devSetModel,
+    DevSlot,
+    devStore,
+    DevSwitch,
+    devView,
+    DevWatch,
+} from "vasille-jsx/dev";
+import { WebRouterInitialization } from "vasille-web";
+import { devModal, devPrompt, devRouterApp, devMount } from "vasille-web/dev";
+import { App } from "vasille";
+import { TagOptions } from "vasille/web-runner";
+import { devScreen } from "vasille-router/dev";
+import { Inspector } from "./inspector.js";
+
+export { executionPosition, wrapFn, runFn, registerReference, shareStateById, positionedText } from "vasille/dev";
+export { setErrorHandler, earlyInspector } from "vasille-jsx/dev";
+export { type IdeSide, type AppSide } from "./communication.js";
+
+export {
+    type QueryParams,
+    type ScreenProps,
+    type RouteParameters,
+    type FallbackScreenProps,
+    type ErrorScreenProps,
+    type WebRouterInitialization,
+    type NavigationMode,
+    type Router,
+    safe,
+} from "vasille-web";
+export { setLaptopMaxWidth, setTabletMaxWidth, setMobileMaxWidth } from "vasille-css";
+export { devStyleSheet as styleSheet } from "vasille-css/dev";
+export { context, impute, receive, share } from "vasille-context";
+
+export const view = devView;
+export const component = devView;
+export const compose = devView;
+export const ensure = devEnsure;
+export const ref = devRef;
+export const expr = devExpr;
+export const bind = devExpr;
+export const calculate = devExpr;
+export const watch = devExpr;
+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 screen = devScreen;
+export const page = devScreen;
+
+export const modal = devModal;
+export const prompt = devPrompt;
+
+export function mount<T>(element: Element, component: ($: T) => void, input: T): App<Node, Element, TagOptions> {
+    const inspector = new Inspector();
+    const app = devMount<T>(element, component, input, inspector);
+    inspector.setup(app);
+    return app;
+}
+
+export function routerApp<Routes extends string>(
+    init: WebRouterInitialization<Routes>,
+    element?: Element,
+): App<Node, Element, TagOptions> {
+    const inspector = new Inspector();
+    const app = devRouterApp(init, element ?? document.body, inspector);
+    inspector.setup(app);
+    return app;
+}

package/src/inspector.ts

@@ -0,0 +1,256 @@
+import { AbstractInspector, earlyInspector } from "vasille-jsx/dev";
+import type { AppSide, IdeSide } from "./communication.js";
+import { App, Fragment, Reactive } from "vasille";
+import { TagOptions, TextNode, Runner } from "vasille/web-runner";
+import { expr, ref } from "vasille-jsx";
+import { DevFragment, DevTag, DevTextNode } from "vasille/dev";
+
+class AppHandler implements AppSide {
+    private canvas: HTMLCanvasElement | null = null;
+    private app: App<Node, Element, TagOptions> | null = null;
+    private active = ref(false);
+    private $width = ref(window.innerWidth);
+    private $height = ref(window.innerHeight);
+
+    public constructor() {
+        window.onresize = () => {
+            this.$width.V = window.innerWidth;
+            this.$height.V = window.innerHeight;
+        };
+    }
+
+    public setup(app: App<Node, Element, TagOptions>, bridge: Inspector): void {
+        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: "absolute",
+                inset: "0",
+                "z-index": "9999909",
+            },
+            k: canvas => {
+                this.canvas = canvas as HTMLCanvasElement;
+            },
+            e: {
+                pointermove: (ev: PointerEvent) => {
+                    const canvas = this.canvas;
+                    const ctx = canvas?.getContext("2d");
+                    let element: Element | null;
+
+                    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: PointerEvent) => {
+                    const ids: number[] = [];
+                    const key = "vasille";
+                    let textNode: Node | null | undefined = null;
+                    let elements: Element[];
+
+                    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] as number);
+                    }
+                    for (const element of elements) {
+                        if (key in element) {
+                            ids.push(element[key] as number);
+                        }
+                    }
+                    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);
+                    }
+                },
+            },
+        });
+    }
+
+    public highlight(ids: number[]): void {
+        if (this.app === null) {
+            return;
+        }
+
+        const tags = new Set<DevTag>();
+
+        this.iterateFragment(this.app as unknown as Fragment<Node, Element, TagOptions>, new Set(ids), tags);
+
+        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.getNode().getBoundingClientRect();
+
+                ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+            }
+        }
+    }
+    public setLookup(active: boolean): void {
+        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);
+            }
+        }
+    }
+
+    protected iterateFragment(node: Fragment<Node, Element, TagOptions>, ids: Set<number>, set: Set<DevTag>) {
+        for (const child of node.children) {
+            if ("id" in child && ids.has(child.id as number)) {
+                this.addReactive(child, set);
+            } else if (child instanceof Fragment) {
+                this.iterateFragment(child, ids, set);
+            }
+        }
+    }
+
+    protected addTag(node: DevTag, set: Set<DevTag>) {
+        set.add(node);
+    }
+
+    protected addText(node: DevTextNode, set: Set<DevTag>) {
+        let it = node.parent;
+
+        while (it instanceof DevFragment) {
+            it = it.parent;
+        }
+
+        if (it instanceof DevTag) {
+            set.add(it);
+        }
+    }
+
+    protected addFragment(node: DevFragment<Node, Element, TagOptions>, set: Set<DevTag>) {
+        for (const child of node.children) {
+            this.addReactive(child, set);
+        }
+    }
+
+    protected addReactive(node: Reactive, set: Set<DevTag>) {
+        if (node instanceof DevTag) {
+            this.addTag(node, set);
+        } else if (node instanceof DevTextNode) {
+            this.addText(node, set);
+        } else if (node instanceof DevFragment) {
+            this.addFragment(node, set);
+        }
+    }
+}
+
+export class Inspector extends AbstractInspector implements IdeSide {
+    private ws: WebSocket | null;
+    private queue: (readonly [string, unknown[]])[];
+    private app: AppHandler;
+    private clean: boolean = false;
+
+    constructor() {
+        super();
+        this.ws = null;
+        this.queue = [];
+        this.app = new AppHandler();
+        this._connect();
+        earlyInspector.connect(this);
+    }
+
+    public setup(app: App<Node, Element, TagOptions>) {
+        this.app.setup(app, this);
+    }
+
+    public callInspector(method: string, arg: object) {
+        this.sendMessage(this.callInspector.name, [method, arg]);
+    }
+
+    public listDebugItems(ids: number[]) {
+        this.sendMessage(this.listDebugItems.name, [ids]);
+    }
+
+    public clear() {
+        this.sendMessage(this.clear.name, []);
+    }
+
+    private _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) as [string, unknown[]];
+
+            this.app[method](...args);
+        };
+
+        ws.onclose = () => {
+            setTimeout(() => this._connect(), 1000);
+        };
+
+        ws.onerror = () => {
+            ws.close();
+        };
+    }
+
+    protected send(method: string, arg: object) {
+        this.callInspector(method, arg);
+    }
+
+    private sendMessage(method: string, args: unknown[]) {
+        const message = [method, args] as const;
+        const ws = this.ws;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(message));
+        } else {
+            this.queue.push(message);
+        }
+    }
+}

package/src/jsx-runtime.ts

@@ -0,0 +1 @@
+export { type JSX } from "vasille-web/jsx-runtime";

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": ["src/**/*"],
+
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "outDir": "lib",
+    "declarationDir": "types",
+    "target": "ES2020",
+    "module": "Node16",
+    "moduleResolution": "node16",
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "types": ["node"]
+  }
+}

package/types/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/types/index.d.ts

@@ -0,0 +1,41 @@
+import { devArrayModel, devAwaited, DevDelay, devEnsure, devExpr, DevFor, devMapModel, devMatch, devModel, devRef, devSet, devSetModel, DevSlot, devStore, DevSwitch, devView, DevWatch } from "vasille-jsx/dev";
+import { WebRouterInitialization } from "vasille-web";
+import { devModal, devPrompt } from "vasille-web/dev";
+import { App } from "vasille";
+import { TagOptions } from "vasille/web-runner";
+import { devScreen } from "vasille-router/dev";
+export { executionPosition, wrapFn, runFn, registerReference, shareStateById, positionedText } from "vasille/dev";
+export { setErrorHandler, earlyInspector } from "vasille-jsx/dev";
+export { type IdeSide, type AppSide } from "./communication.js";
+export { type QueryParams, type ScreenProps, type RouteParameters, type FallbackScreenProps, type ErrorScreenProps, type WebRouterInitialization, type NavigationMode, type Router, safe, } from "vasille-web";
+export { setLaptopMaxWidth, setTabletMaxWidth, setMobileMaxWidth } from "vasille-css";
+export { devStyleSheet as styleSheet } from "vasille-css/dev";
+export { context, impute, receive, share } from "vasille-context";
+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 expr: typeof devExpr;
+export declare const bind: typeof devExpr;
+export declare const calculate: typeof devExpr;
+export declare const watch: typeof devExpr;
+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 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): App<Node, Element, TagOptions>;
+export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element): App<Node, Element, TagOptions>;

package/types/inspector.d.ts

@@ -0,0 +1,18 @@
+import { AbstractInspector } from "vasille-jsx/dev";
+import type { IdeSide } from "./communication.js";
+import { App } from "vasille";
+import { TagOptions } from "vasille/web-runner";
+export declare class Inspector extends AbstractInspector implements IdeSide {
+    private ws;
+    private queue;
+    private app;
+    private clean;
+    constructor();
+    setup(app: App<Node, Element, TagOptions>): 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/types/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export { type JSX } from "vasille-web/jsx-runtime";