steel-frame 7.1.2 → 7.2.1

package/README.md

@@ -23,7 +23,7 @@ but it hasn't changed what it cost to be wrong, `Steel Frame` do it.
   - [How POWERFUL is Steel Frame](#how-powerful-is-steel-frame)
   - [Road map](#road-map)
   - [Change log](#change-log)
-    - [7.0](#70)
+    - [7.0 - 7.2](#70---72)
     - [6.0 RC (never released)](#60-rc-never-released)
     - [5.0 - 5.1](#50---51)
     - [4.0 - 4.3](#40---43)
@@ -65,7 +65,7 @@ $ npm create steel-frame
 
 ## How SAFE is Steel Frame
 
-The safe of your application is ensured by
+The safety of your application is ensured by
 
 - `100%` coverage of code by unit tests.
   Each function, each branch is working as designed.
@@ -133,12 +133,10 @@ We respect semantic versioning:
 - A minor version is increased when we add functionality.
 - Patch version is increased when we fix bugs.
 
-### 7.1
-
-- Add support for ARIA attributtes.
-
-### 7.0
+### 7.0 - 7.2
 
+- **7.2**: Add tracking of the builtin models size. Reactive array/set/map can be converted into a builtin model.
+- **7.1**: Add support for ARIA attributes.
 - Add `debounced` and `field` functions, which extend the reativity system.
 - Add `Zombie` component, it keeps HTML elements alive some time after destruction.
 - Add `abortSignal` to cancel fetch requests and timers when component is destroyed.

package/build/babel-plugin/internal.d.ts

@@ -97,7 +97,6 @@ export interface Internal {
     set(obj: types.Expression, field: types.Expression, value: types.Expression, area: types.Node): types.CallExpression;
     safeInit(arg: types.Expression): types.Expression;
     Switch(arg: types.ObjectExpression): types.CallExpression;
-    ArrayModelView(array: types.Expression, arg: types.Expression): types.CallExpression;
     safe(arg: types.FunctionExpression | types.ArrowFunctionExpression): types.CallExpression;
     updateIValue(area: types.Node, left: types.Expression, right: types.Expression): types.Expression;
     wrapFunctionBody(fn: types.FunctionDeclaration | types.ObjectMethod | types.ClassMethod | types.ClassPrivateMethod): void;

package/build/babel-plugin/jsx.js

@@ -1,5 +1,5 @@
 import * as t from "@babel/types";
-import { ctx, VariablesStatus } from "./internal.js";
+import { ctx } from "./internal.js";
 import { bodyHasJsx } from "./jsx-detect.js";
 import { checkNonReactiveName, checkReactiveName, err, Errors, exprCall, isReactiveName, isReadableName, isWritableName, nodeIsUnsafe, reactivityTypeOfNode, toKebabCase, } from "./lib.js";
 import { compose, meshExpression, processRefCall } from "./mesh.js";
@@ -64,32 +64,9 @@ export function transformJsxArray(paths, internal) {
         }
         else if (path.isJSXExpressionContainer()) {
             const conditionalJsx = tryForConditionalJsx(path, internal);
-            const expression = path.get("expression");
             if (conditionalJsx.length) {
                 result.push(...conditionalJsx);
             }
-            // arrayModel.map(item => { <div>{item.x}</div> })
-            else if (expression.isCallExpression() &&
-                t.isMemberExpression(expression.node.callee) &&
-                !expression.node.callee.computed &&
-                t.isIdentifier(expression.node.callee.property) &&
-                expression.node.callee.property.name === "map") {
-                const array = expression.get("callee.object");
-                const handler = expression.get("arguments.0");
-                if (array.isIdentifier() &&
-                    internal.stack.get(array.node.name) === VariablesStatus.ArrayModel &&
-                    precheckSlotParams("ArrayModelView", handler, internal)) {
-                    compose(handler, internal, "compose", true, true, false);
-                    result.push(t.expressionStatement(internal.ArrayModelView(array.node, handler.node)));
-                }
-                else {
-                    err(Errors.IncorrectArguments, array, [
-                        "Mapped value must be and identifier initialized with array model.",
-                        "E.g.: `const C = component(() => { const arr = arrayModel(); <div>{arr.map(..)}</div> })`",
-                        "Use directly ArrayView or ArrayModelView for any alternative cases.",
-                    ].join("\n"), internal);
-                }
-            }
             // process text values
             else {
                 const value = transformJsxExpressionContainer(path, internal, ["acceptsReactive", "acceptsRaw"]);

package/build/babel-plugin/transformer.js

@@ -309,15 +309,6 @@ export function transformProgram(path, filename, opts) {
         Switch(arg) {
             return call("Switch", [arg, ctx]);
         },
-        ArrayModelView(array, slot) {
-            return call("ArrayModelView", [
-                t.objectExpression([
-                    t.objectProperty(t.identifier("of"), array),
-                    t.objectProperty(t.identifier("slot"), slot),
-                ]),
-                ctx,
-            ]);
-        },
         safe: (arg) => call("safe", [arg]),
         updateIValue(area, left, right) {
             return t.callExpression(t.memberExpression(left, t.identifier("up")), [

package/build/cli/run.js

@@ -177,7 +177,7 @@ async function run() {
                             });
                         },
                     }),
-                    inspect(),
+                    inspect({ dev: true }),
                 ],
                 resolve,
                 optimizeDeps: {

package/build/cli/vite-plugins/jsx.js

@@ -18,6 +18,7 @@ export function getVitePlugins(target, options) {
                         {
                             replaceWeb: target,
                             devLayer: target === "vasille-web/dev",
+                            hmr: target === "vasille-web/dev",
                             reporter: options.errorsHandler,
                             v4Naming: options.v4Naming,
                         },

package/build/export/index.d.ts

@@ -1,6 +1,7 @@
-import { AppNode, ArrayModel, MapModel, SetModel, ScreenProps } from "vasille";
+import { AppNode, ScreenProps } from "vasille";
 import type { VasilleSlot } from "vasille-web/jsx-runtime";
 import { WebRouter, WebTagOptions, CssStyleInjector, StyleSheetProps } from "vasille-web/types";
+import { ArrayModel, MapModel, SetModel } from "./models.js";
 export { safe } from "vasille";
 /** Set a handler for component errors */
 export declare function setErrorHandler(handler: (e: unknown) => void): void;
@@ -171,19 +172,19 @@ export declare function Else(props: {
     slot?: () => void;
     "vasille:slot"?: VasilleSlot;
 }): void;
-/** Renders content several times using a model (array, map or set) */
+/** Renders content several times using a model (array, map, or set) */
 export declare function For<T>(props: {
-    of: ReadonlyArray<T>;
+    of: ReadonlyArray<T> | ArrayModel<T>;
     slot?: (value: T) => void;
     "vasille:slot"?: VasilleSlot;
 }): void;
 export declare function For<T>(props: {
-    of: ReadonlySet<T>;
+    of: ReadonlySet<T> | SetModel<T>;
     slot?: (value: T) => void;
     "vasille:slot"?: VasilleSlot;
 }): void;
 export declare function For<K, T>(props: {
-    of: ReadonlyMap<K, T>;
+    of: ReadonlyMap<K, T> | MapModel<K, T>;
     slot?: (value: T, index: K) => void;
     "vasille:slot"?: VasilleSlot;
 }): void;
@@ -201,17 +202,17 @@ export declare function ArrayView<T>(props: {
 }): void;
 /** Renders content of an `array model`, which can be updated via `push`, `pull`, ... */
 export declare function ArrayModelView<T>(props: {
-    of: ReadonlyArray<T>;
+    of: ArrayModel<T>;
     slot: (value: T, r_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>;
+    of: MapModel<K, T>;
     slot: (r_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>;
+    of: SetModel<T>;
     slot: (value: T) => void;
 }): void;
 /** Will be translated to for (let value of value) { slot(item) } */
@@ -389,3 +390,4 @@ export declare function impute<Class>(className: abstract new (...args: unknown[
 /** Share a setting value when it is missing */
 export declare function impute(key: string, value: string): string;
 export type { WebComponent, WebComponentAdapter, WebComponentAttributes, WebComponentEventHandler, WebComponentProps, WebComponentEvents, WebTagOptions, AttrType, StyleType, WebRouter, ElementStyleProps, IdeSide, AppSide, SsgRouterMode, NavigationMode, ClassItem, WebRouterInitialization, CssStyleInjector, StyleSheetProps, } from "vasille-web/types";
+export type { ArrayModel, MapModel, SetModel } from "./models.js";

package/build/export/models.d.ts

@@ -0,0 +1,44 @@
+/** Encapsulate an array for more comfortable editing */
+export declare class ArrayModel<T> {
+    private constructor();
+    /** Give read access to the encapsulated array */
+    get array(): readonly T[];
+    /** Pop the last item of the array */
+    pop(): T | undefined;
+    /** Append items to the end of the array */
+    push(...items: Array<T>): number;
+    /** Shift the first item of the array */
+    shift(): T | undefined;
+    /** Sort items inside the array */
+    sort(compareFn?: (a: T, b: T) => number): this;
+    /** Splice calls `Array.splice` */
+    splice(start: number, deleteCount?: number, ...items: T[]): T[];
+    /** Prepend items to the array */
+    unshift(...items: T[]): number;
+    /** Replace an item of the array */
+    replace(at: number, with_: T): this;
+}
+/** Encapsulate an array for more comfortable editing */
+export declare class SetModel<T> {
+    private constructor();
+    /** Give read access to the encapsulated data */
+    get set(): ReadonlySet<T>;
+    /** Add a new value to the set */
+    add(value: T): this;
+    /** Clear the set */
+    clear(): void;
+    /** Delete a value from the set, return true if the value was deleted */
+    delete(value: T): boolean;
+}
+/** Encapsulate an array for more comfortable editing */
+export declare class MapModel<K, T> {
+    private constructor();
+    /** Give read access to the encapsulated data */
+    get map(): ReadonlyMap<K, T>;
+    /** Clear the map */
+    clear(): void;
+    /** Delete a value from the map, return true if the value was deleted */
+    delete(key: K): boolean;
+    /** Set a new value to the map at a given key */
+    set(key: K, value: T): this;
+}

package/build/export/models.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "steel-frame",
-    "version": "7.1.2",
+    "version": "7.2.1",
     "description": "SteelFrame: Build Fault-Tolerant Web Applications Effortlessly.",
     "main": "build/cli/run.js",
     "types": "./index.d.ts",
@@ -60,7 +60,7 @@
         "@inquirer/select": "^5.2.6",
         "csstype": "^3.1.3",
         "esbuild": "^0.28.2",
-        "vasille-web": "7.1.0",
+        "vasille-web": "7.2.1",
         "vite": "^8.3.4",
         "vite-plugin-babel": "^1.7.3",
         "vite-plugin-inspect": "^12.1.0",