steel-frame 5.1.15 → 7.0.0-rc

package/README.md

@@ -21,8 +21,9 @@
   - [How POWERFUL is SteelFrameKit](#how-powerful-is-steelframekit)
   - [Road map](#road-map)
   - [Change log](#change-log)
-    - [5.1](#51)
-    - [5.0](#50)
+    - [7.0](#70)
+    - [6.0 RC (never released)](#60-rc-never-released)
+    - [5.0 - 5.1](#50---51)
     - [4.0 - 4.3](#40---43)
     - [3.0 - 3.2](#30---32)
     - [2.0 - 2.3](#20---23)
@@ -129,18 +130,24 @@ We respect semantic versioning:
 - A minor version is increased when we add functionality.
 - Patch version is increased when we fix bugs.
 
-### 5.1
+### 7.0
 
-Add support for web components compile target `web build components`.
-_Web components as custom tags are supported in any version._
+- WIP
 
-### 5.0
+### 6.0 RC (never released)
+
+- Add `QueueRenderer`, `ArrayView`, `ArrayModelView`, `SetModelView`, `MapModelView`, `Iterate` and `ForEach` components.
+- `const a = []` is not implicit array model, use explicit `arrayModel`. **[API change]**
+
+### 5.0 - 5.1
 
 - Add support for context and dependencies injection.
 - New developement direction: `fault tolerant`.
 - Renamed to `steel-frame`. **[API change]**
 - Removed `forward` and `backward` functions. **[API change]**
 - Removed `Debug` component. **[API change]**
+- Add support for web components compile target `web build components`.
+  _Web components as custom tags are supported in any version._
 
 ### 4.0 - 4.3
 

package/fake-types/index.d.ts

@@ -1,4 +1,4 @@
-import { App } from "vasille";
+import { App, ArrayModel, MapModel, SetModel } from "vasille";
 import type { TagOptions } from "vasille/web-runner";
 import type { StyleSheetProps as StyleProps } from "vasille-web";
 import type { ScreenProps } from "vasille-router";
@@ -57,9 +57,11 @@ export declare function screen<Route extends string>(renderer: Screen<Route>): S
 /** 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 */
+/** Returns the raw value of the expression */
 export declare function raw<T>(v: T): T;
-/** Returns a reactive value of expression */
+/** Unwrap the expression */
+export declare function unwrap<T>(v: T): T;
+/** Pack value into a reactive reference */
 export declare function ref<T>(v: T): T;
 /** Returns a reactive-computed form of expression */
 export declare function bind<T>(v: T): T;
@@ -68,11 +70,11 @@ 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[];
+export declare function arrayModel<T>(v?: T[]): ArrayModel<T>;
 /** Returns a set model of array values */
-export declare function setModel<T>(v?: T[]): Set<T>;
+export declare function setModel<T>(v?: T[]): SetModel<T>;
 /** Returns a map model of map data */
-export declare function mapModel<K, T>(v?: [K, T][]): Map<K, T>;
+export declare function mapModel<K, T>(v?: [K, T][]): MapModel<K, T>;
 
 /** Awaits async data in a sync component */
 export declare function awaited<T>(target: Promise<T>): [unknown, T | undefined, () => void];
@@ -84,6 +86,7 @@ export declare function Slot<Props extends object>(
     options: {
         model?: (props: Props) => void;
         slot?: () => void;
+        "vasille:slot"?: VasilleSlot;
     } & Props,
 ): void;
 
@@ -123,7 +126,49 @@ export declare function For<K, T>(props: {
     "vasille:slot"?: VasilleSlot;
 }): void;
 
-/** Refresh the content each time then the reactive model is updated */
+/** Renders content of an `array`, updates are tracked via a diff algorithm */
+export declare function ArrayView<T>(props: { $of: ReadonlyArray<T>; slot: ($value: T, $index: number) => void }): void;
+
+/** Renders content of an `array model`, which can be updated via `push`, `pull`, ... */
+export declare function ArrayModelView<T>(props: {
+    of: ReadonlyArray<T>;
+    slot: (value: T, $index: number) => void;
+}): void;
+
+/** Renders content of a `map model`, which can be updated via `set`, `delete`, ... */
+export declare function MapModelView<K, T>(props: { of: ReadonlyMap<K, T>; slot: ($value: T, key: K) => void }): void;
+
+/** Renders content of a `set model`, which can be updated via `add`, `delete`, ... */
+export declare function SetModelView<T>(props: { of: ReadonlySet<T>; slot: (value: T) => void }): void;
+
+/** Will be translated to for (let value of value) { slot(item) } */
+export declare function Iterate<
+    T extends { [Symbol.iterator](): IteratorObject<unknown, unknown, unknown> },
+    K = T extends { [Symbol.iterator](): IteratorObject<infer R, unknown, unknown> } ? R : never,
+>(props: { value: T; slot: (item: K) => void });
+
+/** Will be translated to value.forEach(slot) */
+export declare function ForEach<T>(props: {
+    value: ReadonlyArray<T>;
+    slot: (item: T, index: number, value: T[]) => void;
+});
+export declare function ForEach<T>(props: {
+    value: ReadonlySet<T>;
+    slot: (item: T, key: T, set: ReadonlySet<T>) => void;
+});
+export declare function ForEach<K, T>(props: {
+    value: ReadonlyMap<K, T>;
+    slot: (item: T, key: K, map: ReadonlyMap<K, T>) => void;
+});
+
+/** Renders content in a non-blocking way via queue */
+export declare function QueuedRender(props: {
+    priority?: "high" | "low";
+    callback?(): void;
+    "vasille:slot": VasilleSlot;
+}): void;
+
+/** Refresh the content each time, when the reactive model is updated */
 export declare function Watch<T>(props: { $model: T; slot?: (value: T) => void; "vasille:slot"?: VasilleSlot }): void;
 
 /** Render content after a while */
@@ -152,9 +197,9 @@ export declare function model<Input extends object, Return extends object>(
 export { QueryParams, ScreenProps, RouteParameters } from "vasille-router";
 export { type Router, NavigationMode } from "vasille-router/web-router";
 
-/** Applies the value to theme `name` */
+/** Applies the value to the theme `name` */
 export declare function theme<T>(name: string, value: T): T;
-/** Applies the value to dark theme */
+/** Applies the value to the dark theme */
 export declare function dark<T>($: T): T;
 /** Applies the value to mobile devices */
 export declare function mobile<T>($: T): T;
@@ -162,9 +207,9 @@ export declare function mobile<T>($: T): T;
 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 */
+/** Applies the value when the user prefers the dark theme */
 export declare function prefersDark<T>($: T): T;
-/** Applies the value when user prefers light theme */
+/** Applies the value when the user prefers the light theme */
 export declare function prefersLight<T>($: T): T;
 
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
@@ -183,7 +228,7 @@ export declare const styleSheet: <
     input: T,
 ) => { [K in keyof T]: string };
 
-/** Mounts a Vasille.JS component to page */
+/** Mounts a Vasille.JS component to a page */
 export declare function mount<T>(element: Element, component: ($: T) => void, $: T): App<Node, Element, TagOptions>;
 
 interface RouterInitialization<Routes extends string> {
@@ -206,15 +251,15 @@ export declare function routerApp<Routes extends string>(
     element?: Element,
 ): App<Node, Element, TagOptions>;
 
-/** Run a function before component mount */
+/** Run a function before the component mount */
 export declare function beforeMount(fn: () => void): void;
 export declare function beforeMount(fn: () => Promise<void>): void;
 
-/** Run a function after component mount */
+/** Run a function after the component mount */
 export declare function afterMount(fn: () => void): void;
 export declare function afterMount(fn: () => Promise<void>): void;
 
-/** Run a function before component destroy */
+/** Run a function before the component destruction */
 export declare function beforeDestroy(fn: () => void): void;
 
 /** Returns the current used router */
@@ -244,25 +289,38 @@ export declare function context<Value, Args extends unknown[] = never[]>(
     fn: (...args: Args) => Value,
 ): SteelContext<Args, Value>;
 
-/** Share an context to children components */
+/** Share a 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 */
+/** Share a setting */
 export declare function share(key: string, value: string): string;
 
-/** Receive an shared context */
+/** Receive a 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 */
+/** Receive a setting */
 export declare function receive(key: string): string;
 
-/** Create and share an context when it is missing */
+/** Receive an optional shared context */
+export declare function receiveOptional<Args extends unknown[], Value>(
+    ctx: SteelContext<Args, Value>,
+): Value | undefined;
+
+/** Receive an optional dependency */
+export declare function receiveOptional<Class>(
+    className: abstract new (...args: unknown[]) => Class,
+): Class | undefined;
+
+/** Receive an optional setting */
+export declare function receiveOptional(key: string): string | undefined;
+
+/** Create and share a 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 */

package/lib/index.js

@@ -1,13 +1,14 @@
-import { devArrayModel, devAwaited, DevDelay, devEnsure, devExpr, DevFor, devMapModel, devMatch, devModel, devRef, devSet, devSetModel, DevSlot, devStore, DevSwitch, devView, DevWatch, } from "vasille-jsx/dev";
+import { devArrayModel, devAwaited, DevDelay, devEnsure, devExpr, DevFor, devMapModel, devMatch, devModel, devRef, devSet, devSetModel, DevSlot, devStore, DevSwitch, devView, DevWatch, DevArrayView, DevMapModelView, DevSetModelView, DevArrayModelView, } 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, setupPosition, } from "vasille/dev";
-export { setErrorHandler, earlyInspector } from "vasille-jsx/dev";
+export { executionPosition, wrapFn, runFn, registerReference, positionedText, setupPosition } from "vasille/dev";
+export { setErrorHandler } from "vasille-jsx/dev";
+export { QueuedRender } from "vasille-jsx";
 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 { context, impute, receive, share, receiveOptional } from "vasille-context";
 export const view = devView;
 export const component = devView;
 export const compose = devView;
@@ -30,6 +31,10 @@ export const mapModel = devMapModel;
 export const arrayModel = devArrayModel;
 export const Switch = DevSwitch;
 export const match = devMatch;
+export const ArrayView = DevArrayView;
+export const MapModelView = DevMapModelView;
+export const SetModelView = DevSetModelView;
+export const ArrayModelView = DevArrayModelView;
 export const screen = devScreen;
 export const page = devScreen;
 export const modal = devModal;

package/lib/inspector.js

@@ -1,7 +1,7 @@
-import { AbstractInspector, earlyInspector } from "vasille-jsx/dev";
 import { Fragment } from "vasille";
 import { expr, ref } from "vasille-jsx";
-import { DevFragment, DevTag, DevTextNode } from "vasille/dev";
+import { DevFragment, DevTag, DevTextNode, inspector } from "vasille/dev";
+import { AbstractInspector } from "vasille/dev";
 class AppHandler {
     constructor() {
         this.canvas = null;
@@ -96,8 +96,10 @@ class AppHandler {
             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);
+                const rect = tag.node?.getBoundingClientRect();
+                if (rect) {
+                    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+                }
             }
         }
         const sel = window.getSelection();
@@ -171,7 +173,7 @@ export class Inspector extends AbstractInspector {
         this.queue = [];
         this.app = new AppHandler();
         this._connect();
-        earlyInspector.connect(this);
+        inspector.connect(this);
     }
     setup(app) {
         this.app.setup(app, this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "steel-frame",
-  "version": "5.1.15",
+  "version": "7.0.0-rc",
   "description": "SteelFrame: Build Fault-Tolerant Web Applications Effortlessly.",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -44,13 +44,13 @@
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
   "dependencies": {
     "csstype": "^3.1.3",
-    "vasille": "^5.1.9",
-    "vasille-context": "^5.0.0",
+    "vasille": "^7.0.0-rc.2",
+    "vasille-context": "^6.0.0-rc",
     "vasille-css": "^5.0.0",
-    "vasille-jsx": "^5.1.4",
-    "vasille-router": "^5.0.0",
-    "vasille-shadow": "^5.0.0",
-    "vasille-web": "^5.1.4"
+    "vasille-jsx": "^7.0.0-rc.1",
+    "vasille-router": "^7.0.0-rc",
+    "vasille-shadow": "^7.0.0-rc.1",
+    "vasille-web": "^7.0.0-rc.1"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

package/src/index.ts

@@ -16,6 +16,10 @@ import {
     DevSwitch,
     devView,
     DevWatch,
+    DevArrayView,
+    DevMapModelView,
+    DevSetModelView,
+    DevArrayModelView,
 } from "vasille-jsx/dev";
 import { WebRouterInitialization } from "vasille-web";
 import { devModal, devPrompt, devRouterApp, devMount } from "vasille-web/dev";
@@ -24,16 +28,9 @@ import { TagOptions } from "vasille/web-runner";
 import { devScreen } from "vasille-router/dev";
 import { Inspector } from "./inspector.js";
 
-export {
-    executionPosition,
-    wrapFn,
-    runFn,
-    registerReference,
-    shareStateById,
-    positionedText,
-    setupPosition,
-} from "vasille/dev";
-export { setErrorHandler, earlyInspector } from "vasille-jsx/dev";
+export { executionPosition, wrapFn, runFn, registerReference, positionedText, setupPosition } from "vasille/dev";
+export { setErrorHandler } from "vasille-jsx/dev";
+export { QueuedRender } from "vasille-jsx";
 export { type IdeSide, type AppSide } from "./communication.js";
 
 export {
@@ -49,7 +46,7 @@ export {
 } 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 { context, impute, receive, share, receiveOptional } from "vasille-context";
 
 export const view = devView;
 export const component = devView;
@@ -73,6 +70,10 @@ export const mapModel = devMapModel;
 export const arrayModel = devArrayModel;
 export const Switch = DevSwitch;
 export const match = devMatch;
+export const ArrayView = DevArrayView;
+export const MapModelView = DevMapModelView;
+export const SetModelView = DevSetModelView;
+export const ArrayModelView = DevArrayModelView;
 
 export const screen = devScreen;
 export const page = devScreen;

package/src/inspector.ts

@@ -1,9 +1,9 @@
-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";
+import { DevFragment, DevTag, DevTextNode, inspector } from "vasille/dev";
+import { AbstractInspector } from "vasille/dev";
 
 class AppHandler implements AppSide {
     private canvas: HTMLCanvasElement | null = null;
@@ -117,9 +117,11 @@ class AppHandler implements AppSide {
             ctx.fillStyle = "#ff000030";
 
             for (const tag of tags) {
-                const rect = tag.getNode().getBoundingClientRect();
+                const rect = tag.node?.getBoundingClientRect();
 
-                ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+                if (rect) {
+                    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+                }
             }
         }
 
@@ -212,7 +214,7 @@ export class Inspector extends AbstractInspector implements IdeSide {
         this.queue = [];
         this.app = new AppHandler();
         this._connect();
-        earlyInspector.connect(this);
+        inspector.connect(this);
     }
 
     public setup(app: App<Node, Element, TagOptions>) {
@@ -260,7 +262,7 @@ export class Inspector extends AbstractInspector implements IdeSide {
         };
     }
 
-    protected send(method: string, arg: object) {
+    protected override send(method: string, arg: object) {
         this.callInspector(method, arg);
     }
 

package/types/index.d.ts

@@ -1,16 +1,17 @@
-import { devArrayModel, devAwaited, DevDelay, devEnsure, devExpr, DevFor, devMapModel, devMatch, devModel, devRef, devSet, devSetModel, DevSlot, devStore, DevSwitch, devView, DevWatch } from "vasille-jsx/dev";
+import { devArrayModel, devAwaited, DevDelay, devEnsure, devExpr, DevFor, devMapModel, devMatch, devModel, devRef, devSet, devSetModel, DevSlot, devStore, DevSwitch, devView, DevWatch, DevArrayView, DevMapModelView, DevSetModelView, DevArrayModelView } 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, setupPosition, } from "vasille/dev";
-export { setErrorHandler, earlyInspector } from "vasille-jsx/dev";
+export { executionPosition, wrapFn, runFn, registerReference, positionedText, setupPosition } from "vasille/dev";
+export { setErrorHandler } from "vasille-jsx/dev";
+export { QueuedRender } from "vasille-jsx";
 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 { context, impute, receive, share, receiveOptional } from "vasille-context";
 export declare const view: typeof devView;
 export declare const component: typeof devView;
 export declare const compose: typeof devView;
@@ -33,6 +34,10 @@ export declare const mapModel: typeof devMapModel;
 export declare const arrayModel: typeof devArrayModel;
 export declare const Switch: typeof DevSwitch;
 export declare const match: typeof devMatch;
+export declare const ArrayView: typeof DevArrayView;
+export declare const MapModelView: typeof DevMapModelView;
+export declare const SetModelView: typeof DevSetModelView;
+export declare const ArrayModelView: typeof DevArrayModelView;
 export declare const screen: typeof devScreen;
 export declare const page: typeof devScreen;
 export declare const modal: typeof devModal;

package/types/inspector.d.ts

@@ -1,7 +1,7 @@
-import { AbstractInspector } from "vasille-jsx/dev";
 import type { IdeSide } from "./communication.js";
 import { App } from "vasille";
 import { TagOptions } from "vasille/web-runner";
+import { AbstractInspector } from "vasille/dev";
 export declare class Inspector extends AbstractInspector implements IdeSide {
     private ws;
     private queue;