steel-frame 7.2.1 → 7.2.2

package/README.md

@@ -135,8 +135,6 @@ We respect semantic versioning:
 
 ### 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.
@@ -154,6 +152,8 @@ We respect semantic versioning:
 - New reactivity marks `r_` & `wr_` insted of `$`,
   workaround with `v4-naming` compilation flag. **[API change]**
 - Component files have strict structure (imports, export, helpers, CSS). **[API change]**
+- `7.1`: Add support for ARIA attributes.
+- `7.2`: Add tracking of the builtin models size. Reactive array/set/map can be converted into a builtin model.
 
 ### 6.0 RC (never released)
 

package/build/babel-plugin/expression.js

@@ -1,7 +1,7 @@
 import * as t from "@babel/types";
 import { calledFn, calls, hintFunctions, isDiCall, unwrapFunctions } from "./call.js";
 import { ctx, V, VariablesStatus } from "./internal.js";
-import { checkNonReactiveName, err, Errors, forceReactiveName, reactivityTypeOfNode } from "./lib.js";
+import { checkNonReactiveName, err, Errors, forceReactiveName, reactivityTypeOfNodePath } from "./lib.js";
 import { checkStyleUsage, ignoreParams, meshAllUnknown, meshExpression } from "./mesh.js";
 import { routerReplace } from "./router.js";
 import { stringify } from "./utils.js";
@@ -217,7 +217,7 @@ export function checkExpression(nodePath, search, allowOuterScope = false) {
                 if (arg1 &&
                     arg2 &&
                     arg1.isExpression() &&
-                    reactivityTypeOfNode(arg1, search.external) === "writable" &&
+                    reactivityTypeOfNodePath(arg1, search.external) === "writable" &&
                     arg2.isExpression()) {
                     checkExpression(arg2, search);
                     path.replaceWith(search.external.updateIValue(path.node, arg1.node, arg2.node));
@@ -248,7 +248,7 @@ export function checkExpression(nodePath, search, allowOuterScope = false) {
             const path = nodePath;
             const left = path.get("left");
             const right = path.get("right");
-            if (reactivityTypeOfNode(left, search.external)) {
+            if (reactivityTypeOfNodePath(left, search.external)) {
                 err(Errors.RulesOfVasille, left, "Assigment are forbidden in live values and effects", search.external);
             }
             meshLValue(left, search.external);

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

@@ -90,9 +90,9 @@ export interface Internal {
     expr(func: types.Expression, values: types.Expression[], codes: string[], area: types.Node, name: string | undefined, safe: boolean): types.Expression;
     fieldRef(obj: types.Expression, field: types.Expression, area: types.Node, name?: string): types.Expression;
     deepFieldRef(obj: types.Expression, fields: types.Expression[], area: types.Node, name?: string): types.Expression;
-    setModel(arg: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null, usage: types.Node, name: string | undefined): types.Expression;
-    mapModel(arg: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null, usage: types.Node, name: string | undefined): types.Expression;
-    arrayModel(arg: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null, usage: types.Node, name: string | undefined): types.Expression;
+    setModel(arg: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null, size: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null | undefined, usage: types.Node, name: string | undefined): types.Expression;
+    mapModel(arg: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null, size: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null | undefined, usage: types.Node, name: string | undefined): types.Expression;
+    arrayModel(arg: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null, length: types.Expression | types.SpreadElement | types.ArgumentPlaceholder | null | undefined, usage: types.Node, name: string | undefined): types.Expression;
     ensure(arg: types.MemberExpression | types.OptionalMemberExpression, area: types.Node): types.Expression;
     set(obj: types.Expression, field: types.Expression, value: types.Expression, area: types.Node): types.CallExpression;
     safeInit(arg: types.Expression): types.Expression;

package/build/babel-plugin/jsx.js

@@ -1,16 +1,16 @@
 import * as t from "@babel/types";
 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 { checkNonReactiveName, checkReactiveName, err, Errors, exprCall, isReactiveName, isReadableName, isWritableName, nodeIsUnsafe, reactivityTypeByName, reactivityTypeOfNode, reactivityTypeOfNodePath, replaceReactivityMark, toKebabCase, } from "./lib.js";
 import { compose, meshExpression, processRefCall } from "./mesh.js";
 import { nodeToStaticPosition } from "./transformer.js";
 import { processFieldRefCall, toFieldRef } from "./field-reference.js";
 import { calls } from "./call.js";
 import { validateRouterPath } from "./router.js";
 const strongSlotMap = {
-    ArrayView: ["reactive", "reactive"],
-    ArrayModelView: ["passive", "reactive"],
-    MapModelView: ["reactive", "passive"],
+    ArrayView: ["any", "readable"],
+    ArrayModelView: ["writable or passive", "readable"],
+    MapModelView: ["any", "passive"],
 };
 export function transformJsx(path, conditions, internal) {
     if (path.isJSXElement()) {
@@ -535,7 +535,7 @@ function transformJsxElement(path, conditions, internal) {
                     const nameIsWritable = isWritableName(attrName, internal) && (!isReadableName(attrName, internal) || callsField);
                     let valueIsWritable = nameIsWritable &&
                         valuePath.isJSXExpressionContainer() &&
-                        reactivityTypeOfNode(valuePath.get("expression"), internal) === "writable";
+                        reactivityTypeOfNodePath(valuePath.get("expression"), internal) === "writable";
                     if (nameIsWritable !== valueIsWritable) {
                         let fieldRef;
                         // attr={field(wr_x.y)}
@@ -743,6 +743,22 @@ function transformJsxElement(path, conditions, internal) {
                 err(Errors.RulesOfVasille, path, "Malformed JSX ForEach tag must have value and slot", internal);
             }
         }
+        if (mapped && ["ArrayView", "ArrayModelView", "MapModelView"].includes(mapped)) {
+            const model = props.find(item => t.isObjectProperty(item) && t.isIdentifier(item.key) && item.key.name === "r_of");
+            const slot = props.find(item => t.isObjectProperty(item) && t.isIdentifier(item.key) && item.key.name === "slot");
+            if (slot &&
+                (t.isArrowFunctionExpression(slot.value) || t.isFunctionExpression(slot.value)) &&
+                t.isIdentifier(slot.value.params[1]) &&
+                reactivityTypeByName(slot.value.params[1].name, internal) === "writable") {
+                if (mapped === "ArrayView" && !(model && reactivityTypeOfNode(model.value, internal) === "writable")) {
+                    const fixedName = replaceReactivityMark(slot.value.params[1].name, "");
+                    err(Errors.RulesOfVasille, path, `Malformed ${mapped}: writable item in slot requires a writable collection. ` +
+                        `Renaming ${slot.value.params[1].name} parameter to "${fixedName}" will fix this error.`, internal);
+                }
+                // add writable param to properties
+                props.push(t.objectProperty(t.identifier("writable"), t.booleanLiteral(true)));
+            }
+        }
         function addAwait(node) {
             if (internal.asyncComposing) {
                 return t.awaitExpression(node);
@@ -777,18 +793,27 @@ function precheckSlotParams(mapped, slot, internal) {
         }
         for (let i = 0; i < params.length && i < args.length; i++) {
             const param = params[i];
-            if (args[i] === "reactive") {
+            const expected = args[i];
+            if (expected === "passive") {
+                /* istanbul ignore else */
+                if (param.isIdentifier()) {
+                    checkNonReactiveName(param, internal);
+                }
+            }
+            else {
                 if (!param.isIdentifier()) {
                     err(Errors.ParserError, slot, `The ${mapped} slot must have only identifiers as parameters`, internal);
                 }
                 else {
-                    checkReactiveName(param, "readable", internal);
-                }
-            }
-            else {
-                /* istanbul ignore else */
-                if (param.isIdentifier()) {
-                    checkNonReactiveName(param, internal);
+                    if (expected === "writable or passive") {
+                        const type = reactivityTypeByName(param.node.name, internal);
+                        if (type !== "writable" && type !== false) {
+                            err(Errors.RulesOfVasille, param, "Expected writable or non reactive parameter.", internal);
+                        }
+                    }
+                    else {
+                        checkReactiveName(param, expected, internal);
+                    }
                 }
             }
         }

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

@@ -24,17 +24,23 @@ export declare function ref(expr: types.Node | null | undefined, internal: Inter
 export declare function arrayModel(args: types.CallExpression["arguments"], usage: types.Node, internal: Internal, name?: string): types.Expression;
 export declare function setModel(args: types.CallExpression["arguments"], usage: types.Node, internal: Internal, name?: string): types.Expression;
 export declare function mapModel(args: types.CallExpression["arguments"], usage: types.Node, internal: Internal, name?: string): types.Expression;
+export declare function checkBuildInModelArgs(path: NodePath<types.CallExpression | types.OptionalCallExpression | types.NewExpression>, internal: Internal): (types.ArgumentPlaceholder | types.SpreadElement | types.Expression)[];
 export declare function processModelCall(path: NodePath<types.CallExpression | types.NewExpression>, usage: types.Node, type: "Map" | "Set" | "Array", isConst: boolean, internal: Internal, name?: string): void;
 export declare function checkReactiveName(idPath: NodePath<unknown>, type: ReactiveType, internal: Internal): void;
 export declare function checkNonReactiveName(idPath: NodePath<Identifier>, internal: Internal): void;
 export declare function toKebabCase(name: string): string;
-export declare function pathIsReactiveValue(path: NodePath<unknown>, _type: "any", internal: Internal, checkForBreakpoints?: boolean): path is NodePath<types.MemberExpression | types.OptionalMemberExpression | types.Identifier>;
+export declare function pathIsReactiveValue(path: NodePath<types.Node | null | undefined>, _type: "any", internal: Internal, checkForBreakpoints?: boolean): path is NodePath<types.MemberExpression | types.OptionalMemberExpression | types.Identifier>;
 export declare function removeExtension(name: string): string;
 export declare function isReadableName(name: string, internal: Internal): boolean;
 export declare function isWritableName(name: string, internal: Internal): boolean;
 export declare function reactivityTypeByName(name: string, internal: Internal): false | "any" | "readable" | "writable";
-export declare function reactivityTypeOfNode(node: NodePath<unknown>, internal: Internal, checkForBreakpoints?: boolean): ReactiveType | false;
+export declare function reactivityTypeOfNode(node: types.Node, internal: Internal): ReactiveType | false;
+export declare function reactivityTypeOfNodePath(path: NodePath<types.Node | null | undefined>, internal: Internal, checkForBreakpoints?: boolean): ReactiveType | false;
 export type ReactiveType = "readable" | "writable" | "any";
 export declare function isReactiveName(name: string, internal: Internal): boolean;
 export declare function forceReactiveName(name: string, type: ReactiveType, path: NodePath<unknown>, internal: Internal): boolean;
+export declare function forcePathIsWritable(path: NodePath<types.SpreadElement | types.ArgumentPlaceholder | types.Expression | null>, internal: Internal, accepts?: "undefined" | "any"): true | undefined;
 export declare function leftIsThisInConstructor(left: NodePath<unknown>): boolean;
+export type ReactivityMarks = "" | "wr_" | "r_" | "$";
+export declare function replaceReactivityMark(name: string, with_: ReactivityMarks, v4?: boolean): string;
+export declare function extractReactivityMark(name: string, v4?: boolean): ReactivityMarks;

package/build/babel-plugin/lib.js

@@ -2,7 +2,7 @@ import * as t from "@babel/types";
 import { checkNode, exprIsSure } from "./expression.js";
 import { ctx } from "./internal.js";
 import { bindFunctions, calledFn, calls, hintFunctions, safeFunctions } from "./call.js";
-import { meshAllUnknown } from "./mesh.js";
+import { meshAllUnknown, meshExpression } from "./mesh.js";
 import { nodeToStaticPosition } from "./transformer.js";
 import { hasBreakPoint } from "./field-reference.js";
 export var Errors;
@@ -137,20 +137,29 @@ export function ref(expr, internal, area, name, safe) {
     return internal.ref(t.isExpression(expr) ? expr : null, area, name, safe);
 }
 export function arrayModel(args, usage, internal, name) {
-    return internal.arrayModel(args[0], usage, name);
+    return internal.arrayModel(args[0], args[1], usage, name);
 }
 export function setModel(args, usage, internal, name) {
-    return internal.setModel(args[0], usage, name);
+    return internal.setModel(args[0], args[1], usage, name);
 }
 export function mapModel(args, usage, internal, name) {
-    return internal.mapModel(args[0], usage, name);
+    return internal.mapModel(args[0], args[1], usage, name);
+}
+export function checkBuildInModelArgs(path, internal) {
+    const args = path.get("arguments");
+    if (args.length > 0) {
+        forcePathIsWritable(args[0], internal, "any");
+        if (args.length > 1) {
+            forcePathIsWritable(args[1], internal, "undefined");
+        }
+    }
+    return path.node.arguments;
 }
 export function processModelCall(path, usage, type, isConst, internal, name) {
-    const args = path.node.arguments;
+    const args = checkBuildInModelArgs(path, internal);
     if (!isConst) {
         err(Errors.RulesOfVasille, path, `${type} models must be declared as constants`, internal);
     }
-    meshAllUnknown(path.get("arguments"), internal, true);
     path.replaceWith(type === "Map"
         ? mapModel(args, usage, internal, name)
         : type === "Set"
@@ -181,7 +190,7 @@ export function toKebabCase(name) {
     return fixed;
 }
 export function pathIsReactiveValue(path, _type, internal, checkForBreakpoints = true) {
-    return reactivityTypeOfNode(path, internal, checkForBreakpoints) !== false;
+    return reactivityTypeOfNodePath(path, internal, checkForBreakpoints) !== false;
 }
 export function removeExtension(name) {
     if (name.endsWith(".ts") || name.endsWith(".js")) {
@@ -207,14 +216,16 @@ export function reactivityTypeByName(name, internal) {
                 ? "readable"
                 : false;
 }
-export function reactivityTypeOfNode(node, internal, checkForBreakpoints = true) {
-    return ((node.isIdentifier() && reactivityTypeByName(node.node.name, internal)) ||
-        ((node.isMemberExpression() || node.isOptionalMemberExpression()) &&
-            ((!node.node.computed &&
-                t.isIdentifier(node.node.property) &&
-                reactivityTypeByName(node.node.property.name, internal)) ||
-                (t.isStringLiteral(node.node.property) && reactivityTypeByName(node.node.property.value, internal)) ||
-                (checkForBreakpoints && hasBreakPoint(node, internal) && "readable"))));
+export function reactivityTypeOfNode(node, internal) {
+    return ((t.isIdentifier(node) && reactivityTypeByName(node.name, internal)) ||
+        ((t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) &&
+            ((!node.computed && t.isIdentifier(node.property) && reactivityTypeByName(node.property.name, internal)) ||
+                (t.isStringLiteral(node.property) && reactivityTypeByName(node.property.value, internal)))));
+}
+export function reactivityTypeOfNodePath(path, internal, checkForBreakpoints = true) {
+    const node = path.node;
+    return ((node && reactivityTypeOfNode(node, internal)) ||
+        (checkForBreakpoints && path.isExpression() && hasBreakPoint(path, internal) && "readable"));
 }
 export function isReactiveName(name, internal) {
     return isReadableName(name, internal) || isWritableName(name, internal);
@@ -231,6 +242,40 @@ export function forceReactiveName(name, type, path, internal) {
                     isReadableName(name, internal) &&
                     err(Errors.RulesOfVasille, path, `Expected "writable" reactivity mark, the name "${name}" has "readonly" mark`, internal, true)))));
 }
+export function forcePathIsWritable(path, internal, accepts) {
+    if (path.isIdentifier() && isWritableName(path.node.name, internal)) {
+        return true;
+    }
+    if (path.isMemberExpression() &&
+        !path.node.computed &&
+        t.isIdentifier(path.node.property) &&
+        isWritableName(path.node.property.name, internal)) {
+        meshExpression(path.get("object"), internal, false);
+        return true;
+    }
+    /* istanbul ignore else */
+    if (accepts === "undefined" || accepts === "any") {
+        if (path.isOptionalMemberExpression() &&
+            !path.node.computed &&
+            t.isIdentifier(path.node.property) &&
+            isWritableName(path.node.property.name, internal)) {
+            meshExpression(path.get("object"), internal, false);
+            return true;
+        }
+        if (path.isReferencedIdentifier() && path.node.name === "undefined") {
+            return true;
+        }
+    }
+    if (path.isExpression() && exprCall(path, path.node, internal, {}, path.node, false)) {
+        err(Errors.RulesOfVasille, path, "Unexpected readonly reactive value. Expected a writable one." +
+            (accepts === "any" ? " Use `unwrap` to take the current value of reactive value in runtime." : ""), internal);
+    }
+    if (accepts === "any") {
+        meshAllUnknown([path], internal, false);
+        return true;
+    }
+    err(Errors.RulesOfVasille, path, "Expected writable reactive value here.", internal);
+}
 export function leftIsThisInConstructor(left) {
     if (left.isMemberExpression()) {
         let iterator = left;
@@ -247,3 +292,12 @@ export function leftIsThisInConstructor(left) {
     }
     return false;
 }
+const newReactivityMarks = ["wr_", "r_"];
+const allReactivityMarks = [...newReactivityMarks, "$"];
+export function replaceReactivityMark(name, with_, v4) {
+    const start = (v4 ? allReactivityMarks : newReactivityMarks).find(s => name.startsWith(s));
+    return with_ + name.substring(start ? start.length : 0);
+}
+export function extractReactivityMark(name, v4) {
+    return (v4 ? allReactivityMarks : newReactivityMarks).find(s => name.startsWith(s)) ?? "";
+}

package/build/babel-plugin/mesh.js

@@ -3,7 +3,7 @@ import { asyncFunctions, bindFunctions, calledFn, calls, composeFunctions, dynam
 import { exprIsSure, idIsIValue, memberIsIValue, nodeIsMeshed } from "./expression.js";
 import { ctx, V, VariablesStatus } from "./internal.js";
 import { processConditions, transformJsx } from "./jsx.js";
-import { checkNonReactiveName, checkReactiveName, err, Errors, exprCall, forceReactiveName, isReactiveName, isReadableName, isWritableName, leftIsThisInConstructor, parseCalculateCall, pathIsReactiveValue, processModelCall, reactivityTypeByName, reactivityTypeOfNode, ref, removeExtension, toKebabCase, } from "./lib.js";
+import { checkBuildInModelArgs, checkNonReactiveName, checkReactiveName, err, Errors, exprCall, extractReactivityMark, forceReactiveName, isReactiveName, isReadableName, isWritableName, leftIsThisInConstructor, parseCalculateCall, pathIsReactiveValue, processModelCall, reactivityTypeByName, reactivityTypeOfNodePath, ref, removeExtension, replaceReactivityMark, toKebabCase, } from "./lib.js";
 import { checkOrder } from "./order-check.js";
 import { routerReplace } from "./router.js";
 import { stringify } from "./utils.js";
@@ -252,22 +252,19 @@ export function meshExpression(nodePath, internal, canHasRef) {
             }
             // arrayModel/setModel/mapModel call
             else if (!internal.isComposing && calls(path, modelFunctions, internal)) {
-                /* istanbul ignore else */
-                if (argPath) {
-                    meshAllUnknown([argPath], internal, true);
-                }
+                const [source, size] = checkBuildInModelArgs(path, internal);
+                const called = calledFn(path, modelFunctions, internal);
                 const loc = path.node.loc;
-                if (calls(path, ["arrayModel"], internal)) {
-                    path.replaceWith(internal.arrayModel(argPath?.node, path.node, undefined));
-                }
-                else if (calls(path, ["mapModel"], internal)) {
-                    path.replaceWith(internal.mapModel(argPath?.node, path.node, undefined));
-                }
-                else {
-                    /* istanbul ignore else */
-                    if (calls(path, ["setModel"], internal)) {
-                        path.replaceWith(internal.setModel(argPath?.node, path.node, undefined));
-                    }
+                switch (called) {
+                    case "arrayModel":
+                        path.replaceWith(internal.arrayModel(source, size, path.node, undefined));
+                        break;
+                    case "mapModel":
+                        path.replaceWith(internal.mapModel(source, size, path.node, undefined));
+                        break;
+                    case "setModel":
+                        path.replaceWith(internal.setModel(source, size, path.node, undefined));
+                        break;
                 }
                 path.node.loc = loc;
             }
@@ -331,8 +328,8 @@ export function meshExpression(nodePath, internal, canHasRef) {
             const path = nodePath;
             const left = path.get("left");
             const right = path.get("right");
-            const leftReactivity = reactivityTypeOfNode(left, internal);
-            const rightReactivity = reactivityTypeOfNode(right, internal);
+            const leftReactivity = reactivityTypeOfNodePath(left, internal);
+            const rightReactivity = reactivityTypeOfNodePath(right, internal);
             let bypassMesh = false;
             if (left.isMemberExpression() && hasBreakPoint(left, internal) && !memberIsIValue(left, "any", internal)) {
                 err(Errors.RulesOfVasille, left, "This assignment breaks the reactivity", internal);
@@ -562,8 +559,7 @@ function ignoreObjectPattern(pattern, internal) {
             if (originName &&
                 newName &&
                 reactivityTypeByName(originName, internal) !== reactivityTypeByName(newName, internal)) {
-                const correctName = originName.substring(0, originName.search(/[_$]/) + 1) +
-                    newName.substring(newName.search(/[_$]/) + 1);
+                const correctName = replaceReactivityMark(newName, extractReactivityMark(originName, internal.v4Naming), internal.v4Naming);
                 err(Errors.RulesOfVasille, path.get("value"), `Property "${originName}" can not be renamed to "${newName}": rename it to "${correctName}"`, internal);
             }
             const valuePath = path.get("value");

package/build/babel-plugin/transformer.js

@@ -203,6 +203,7 @@ export function transformProgram(path, filename, opts) {
         return expression;
     }
     const reports = [];
+    const errors = [];
     const relativePath = filename.substring(process.cwd().length);
     const internal = {
         appData: opts.appData,
@@ -265,23 +266,38 @@ export function transformProgram(path, filename, opts) {
             }
             return call("toDeepFieldRef", [getCtx(), obj, t.arrayExpression(fields)]);
         },
-        setModel(arg, usage, name) {
+        setModel(arg, size, usage, name) {
             if (opts.devLayer) {
-                return named(call("setModel", [nodeToStaticPosition(usage), getCtx(), arg ?? t.buildUndefinedNode()]), name);
+                return named(call("setModel", [
+                    nodeToStaticPosition(usage),
+                    getCtx(),
+                    arg ?? t.buildUndefinedNode(),
+                    size ?? t.buildUndefinedNode(),
+                ]), name);
             }
-            return call("setModel", arg ? [getCtx(), arg] : [getCtx()]);
+            return call("setModel", [getCtx(), ...(arg ? [arg] : []), ...(arg && size ? [size] : [])]);
         },
-        mapModel(arg, usage, name) {
+        mapModel(arg, size, usage, name) {
             if (opts.devLayer) {
-                return named(call("mapModel", [nodeToStaticPosition(usage), getCtx(), arg ?? t.buildUndefinedNode()]), name);
+                return named(call("mapModel", [
+                    nodeToStaticPosition(usage),
+                    getCtx(),
+                    arg ?? t.buildUndefinedNode(),
+                    size ?? t.buildUndefinedNode(),
+                ]), name);
             }
-            return call("mapModel", arg ? [getCtx(), arg] : [getCtx()]);
+            return call("mapModel", [getCtx(), ...(arg ? [arg] : []), ...(arg && size ? [size] : [])]);
         },
-        arrayModel(arg, usage, name) {
+        arrayModel(arg, length, usage, name) {
             if (opts.devLayer) {
-                return named(call("arrayModel", [nodeToStaticPosition(usage), getCtx(), arg ?? t.buildUndefinedNode()]), name);
+                return named(call("arrayModel", [
+                    nodeToStaticPosition(usage),
+                    getCtx(),
+                    arg ?? t.buildUndefinedNode(),
+                    length ?? t.buildUndefinedNode(),
+                ]), name);
             }
-            return call("arrayModel", arg ? [getCtx(), arg] : [getCtx()]);
+            return call("arrayModel", [getCtx(), ...(arg ? [arg] : []), ...(arg && length ? [length] : [])]);
         },
         ensure(arg, area) {
             const object = arg.object;
@@ -362,9 +378,7 @@ export function transformProgram(path, filename, opts) {
                 if (opts.throwAtFirstError) {
                     throw e;
                 }
-                process.stderr.write(`in ${filename}:${pos?.start.line}:${pos?.start.column}\n`);
-                process.stderr.write(e.message);
-                process.stderr.write(`\n\n`);
+                errors.push(`\nin file://${filename}:${pos?.start.line}:${pos?.start.column}\n${e.message}\n`);
             }
             else {
                 console.warn(message);
@@ -418,7 +432,8 @@ export function transformProgram(path, filename, opts) {
         reports: reports,
     });
     if (reports.some(item => item.class === "error")) {
-        throw new Error("Compilation failed");
+        Error.stackTraceLimit = 1;
+        throw new Error(errors.join(""));
     }
     if (opts.devLayer) {
         path.node.body.unshift(t.variableDeclaration("const", [t.variableDeclarator(filePathId, t.stringLiteral(internal.steelFilePath))]));

package/build/cli/lib/compile-lib.js

@@ -2,8 +2,10 @@ import { cp, mkdir, opendir, readFile, rm, writeFile } from "node:fs/promises";
 import { statSync } from "node:fs";
 import path, { dirname } from "node:path";
 import { transformAsync } from "@babel/core";
+// @ts-expect-error
 import pluginJsxSyntax from "@babel/plugin-syntax-jsx";
 import vasillePlugin from "../../babel-plugin/index.js";
+// @ts-expect-error
 import typeScriptPlugin from "@babel/plugin-transform-typescript";
 import { watchFolder } from "./watch-folder.js";
 export async function compileComponentsLib(srcDir, outputDir) {

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

@@ -1,5 +1,7 @@
+// @ts-expect-error
 import pluginJsxSyntax from "@babel/plugin-syntax-jsx";
 import pluginVasille from "../../babel-plugin/index.js";
+// @ts-expect-error
 import pluginTypescript from "@babel/plugin-transform-typescript";
 import babel from "vite-plugin-babel";
 export function getVitePlugins(target, options) {

package/build/export/index.d.ts

@@ -101,11 +101,11 @@ export declare function effect(f: () => void): void;
  * */
 export declare function bypassWriteRestriction<T>(reactive: T, value: T): T;
 /** Returns an array model of the array */
-export declare function arrayModel<T>(v?: T[]): ArrayModel<T>;
+export declare function arrayModel<T>(v?: readonly T[], length?: number): ArrayModel<T>;
 /** Returns a set model of array values */
-export declare function setModel<T>(v?: T[]): SetModel<T>;
+export declare function setModel<T>(v?: readonly T[] | ReadonlySet<T>, size?: number): SetModel<T>;
 /** Returns a map model of map data */
-export declare function mapModel<K, T>(v?: [K, T][]): MapModel<K, T>;
+export declare function mapModel<K, T>(v?: readonly (readonly [K, T])[] | ReadonlyMap<K, T>, size?: number): MapModel<K, T>;
 /** Awaits async data in a sync component */
 export declare function awaited<T>(target: (signal?: AbortSignal) => Promise<T>): [unknown, T | undefined];
 /** Returns an abort signal to cancel requests/timers when context is destroyed */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "steel-frame",
-    "version": "7.2.1",
+    "version": "7.2.2",
     "description": "SteelFrame: Build Fault-Tolerant Web Applications Effortlessly.",
     "main": "build/cli/run.js",
     "types": "./index.d.ts",
@@ -29,7 +29,7 @@
     },
     "scripts": {
         "prepack": "cp -f ../README.md ./README.md",
-        "prettier": "prettier src --write",
+        "prettier": "prettier src test --write",
         "prebuild": "rm -rf build",
         "build": "tsc --build tsconfig.json",
         "tsc-tests": "tsc --build test/tsconfig.json",
@@ -60,7 +60,7 @@
         "@inquirer/select": "^5.2.6",
         "csstype": "^3.1.3",
         "esbuild": "^0.28.2",
-        "vasille-web": "7.2.1",
+        "vasille-web": "7.2.2",
         "vite": "^8.3.4",
         "vite-plugin-babel": "^1.7.3",
         "vite-plugin-inspect": "^12.1.0",
@@ -75,6 +75,6 @@
         "prettier": "^3.6.2",
         "steel-frame": "file:.",
         "ts-jest": "^29.4.14",
-        "typescript": "^5.9.3"
+        "typescript": "^6.0.3"
     }
 }

package/build/cli/sf.d.ts

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-import "run.ts";

package/build/cli/sf.js

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-import "run.ts";