ferrovue 0.6.0 → 0.7.0

package/dist/editor.js

@@ -0,0 +1,59 @@
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { CONFIG_FILE, generate, loadConfig } from "./compiler.js";
+import { diagnose, isRefusal } from "./diagnostics.js";
+const FRESH_MS = 1000;
+const recent = new Map();
+/** The directory holding `config` that is `dir` or the nearest above it. */
+export function projectRoot(dir, config = CONFIG_FILE) {
+    for (let at = resolve(dir);; at = dirname(at)) {
+        if (existsSync(join(at, config)))
+            return at;
+        if (dirname(at) === at)
+            return null;
+    }
+}
+function offsetOf(text, line, column) {
+    let at = 0;
+    for (let l = 1; l < line; l++) {
+        const next = text.indexOf("\n", at);
+        if (next < 0)
+            return text.length;
+        at = next + 1;
+    }
+    return Math.min(at + column - 1, text.length);
+}
+function check(file, text, options) {
+    const root = projectRoot(dirname(file), options.config);
+    if (!root)
+        return [];
+    try {
+        generate(root, loadConfig(root, options.config), new Map([[file, text]]));
+        return [];
+    }
+    catch (e) {
+        if (!isRefusal(e)) {
+            console.error(e);
+            return [];
+        }
+        const d = diagnose(e);
+        if (d.file === null || resolve(root, d.file) !== file)
+            return [];
+        const start = d.line === null ? 0 : offsetOf(text, d.line, d.column ?? 1);
+        const end = d.endLine === null ? null : offsetOf(text, d.endLine, d.endColumn ?? 1);
+        return [{ ...d, start, end }];
+    }
+}
+/** The refusals in a component of a ferrovue project, compiling the project with `text` in place of
+ * the file. A project is the nearest directory above the file holding the configuration; a file in
+ * none has no refusals. The compiler stops at the first refusal, so a refusal in another file hides
+ * those in this one. */
+export function refusalsIn(file, text, options = {}) {
+    const path = resolve(file);
+    const hit = recent.get(path);
+    if (hit && hit.text === text && Date.now() - hit.at < FRESH_MS)
+        return hit.found;
+    const found = check(path, text, options);
+    recent.set(path, { text, at: Date.now(), found });
+    return found;
+}

package/dist/errors.d.ts

@@ -312,6 +312,9 @@ export declare const ERRORS: {
     readonly FV0513: {
         readonly title: "Component resolved by name that is not imported";
     };
+    readonly FV0514: {
+        readonly title: "Listener of unknown name given to a child with a prop named like a listener";
+    };
     readonly FV0601: {
         readonly title: "Name or function not available on the server";
     };
@@ -393,6 +396,9 @@ export declare const ERRORS: {
     readonly FV0627: {
         readonly title: "Strict test against the absence a value cannot have";
     };
+    readonly FV0628: {
+        readonly title: "`as` or `satisfies` stating a type the value does not have";
+    };
     readonly FV0701: {
         readonly title: "`Number()` of an unsupported value";
     };
@@ -452,7 +458,7 @@ export declare const ERRORS: {
         readonly title: "List method over a list of unsupported items";
     };
     readonly FV0805: {
-        readonly title: "List method given anything but an arrow function";
+        readonly title: "List method given anything but an arrow function or `Boolean`";
     };
     readonly FV0806: {
         readonly title: "Arrow function with a block body";
@@ -582,10 +588,12 @@ export declare const ERRORS: {
         readonly title: "Class binding of an unsupported type";
     };
     readonly FV1005: {
-        readonly title: "`<style module>`";
+        readonly title: "`<style module>` without `cssModules` in the configuration";
+        readonly detail: "Vite names a CSS module's classes by `css.modules.generateScopedName`. ferrovue computes the same names when `cssModules` in `ferrovue.config.json` is set as that option is; without it, it cannot know them.";
     };
     readonly FV1006: {
-        readonly title: "`v-bind()` in CSS";
+        readonly title: "`v-bind()` in CSS of a value that is not a string or a number";
+        readonly detail: "Vue's server writes a variable `v-bind()` sets from a string or a number, `initial` for `null` and `undefined`, and warns of anything else.";
     };
     readonly FV1007: {
         readonly title: "Style binding of an unsupported type";
@@ -609,6 +617,13 @@ export declare const ERRORS: {
         readonly title: "`class` written apart from a later `:class` in content rendered from virtual nodes";
         readonly detail: "Inside an element `<component :is>` chooses, in the slot content such an element renders, and inside a `<RouterLink>`, Vue's server renders from virtual nodes, where a static `class` written before `:class` keeps its place and its names come first. ferrovue writes them so when nothing stands between the two; with attributes between them, write the two next to each other, or `:class` first.";
     };
+    readonly FV1014: {
+        readonly title: "`<style module>` whose class names ferrovue cannot compute";
+        readonly detail: "ferrovue names the classes of a CSS module written in the component in plain CSS, as postcss-modules does in Vite. A module in another file (`src`), one a preprocessor compiles (`lang`), and one that imports names from another file (`composes: x from \"./a.css\"`, `@value x from \"./a.css\"`) are refused.";
+    };
+    readonly FV1015: {
+        readonly title: "`useCssModule` of a module the component does not declare";
+    };
     readonly FV1101: {
         readonly title: "Helper called with the wrong number of arguments";
     };
@@ -645,6 +660,27 @@ export declare const ERRORS: {
     readonly FV1112: {
         readonly title: "Twin slot name that is not a plain name";
     };
+    readonly FV1113: {
+        readonly title: "Configuration that is not a JSON object";
+    };
+    readonly FV1114: {
+        readonly title: "Unknown configuration key";
+        readonly detail: "A key ferrovue does not read is refused, as it is most often a misspelt one (`component` for `components`). The message names the key it most likely means.";
+    };
+    readonly FV1115: {
+        readonly title: "Configuration value of the wrong type";
+    };
+    readonly FV1116: {
+        readonly title: "Directory the configuration names that cannot be read";
+    };
+    readonly FV1117: {
+        readonly title: "Deprecated configuration key";
+        readonly detail: "A warning: ferrovue still reads the key, and stops reading it in the next major release. The message names what to write instead. A key is deprecated for at least one minor release before it is removed.";
+    };
+    readonly FV1118: {
+        readonly title: "Deprecated command-line option";
+        readonly detail: "A warning: the option still works, and is removed in the next major release. The message names what to use instead. An option is deprecated for at least one minor release before it is removed.";
+    };
     readonly FV1201: {
         readonly title: "Route parameter that is not a present string or number";
     };
@@ -782,6 +818,12 @@ export declare const ERRORS: {
     readonly FV1245: {
         readonly title: "Page whose component name is taken or not a Rust name";
     };
+    readonly FV1246: {
+        readonly title: "Routes file that cannot be read";
+    };
+    readonly FV1247: {
+        readonly title: "Routes file that is not valid JSON";
+    };
     readonly FV1301: {
         readonly title: "Type declared by two stores";
     };

package/dist/errors.js

@@ -145,6 +145,7 @@ export const ERRORS = {
     FV0511: { title: "Prop given a value of another type" },
     FV0512: { title: "`Props` imported from a component that is not compiled" },
     FV0513: { title: "Component resolved by name that is not imported" },
+    FV0514: { title: "Listener of unknown name given to a child with a prop named like a listener" },
     FV0601: { title: "Name or function not available on the server" },
     FV0602: { title: "Unsupported method" },
     FV0603: { title: "Unsupported call" },
@@ -172,6 +173,7 @@ export const ERRORS = {
     FV0625: { title: "Unsupported expression" },
     FV0626: { title: "Strict test of a value that may be `null` or `undefined`" },
     FV0627: { title: "Strict test against the absence a value cannot have" },
+    FV0628: { title: "`as` or `satisfies` stating a type the value does not have" },
     FV0701: { title: "`Number()` of an unsupported value" },
     FV0702: { title: "`parseInt()` or `parseFloat()` of a value that is not a string" },
     FV0703: { title: "`parseInt()` with a radix other than a literal 10 or 16" },
@@ -194,7 +196,7 @@ export const ERRORS = {
     FV0802: { title: "`.join()` with a separator that is not a string" },
     FV0803: { title: "List method on a value that is not a list" },
     FV0804: { title: "List method over a list of unsupported items" },
-    FV0805: { title: "List method given anything but an arrow function" },
+    FV0805: { title: "List method given anything but an arrow function or `Boolean`" },
     FV0806: { title: "Arrow function with a block body" },
     FV0807: { title: "Arrow function index that is not a plain name" },
     FV0808: { title: "Defaults or nested patterns in an arrow function's item" },
@@ -240,8 +242,14 @@ export const ERRORS = {
     FV1002: { title: "Computed class name that is not a string" },
     FV1003: { title: "Class name with spaces around it" },
     FV1004: { title: "Class binding of an unsupported type" },
-    FV1005: { title: "`<style module>`" },
-    FV1006: { title: "`v-bind()` in CSS" },
+    FV1005: {
+        title: "`<style module>` without `cssModules` in the configuration",
+        detail: "Vite names a CSS module's classes by `css.modules.generateScopedName`. ferrovue computes the same names when `cssModules` in `ferrovue.config.json` is set as that option is; without it, it cannot know them.",
+    },
+    FV1006: {
+        title: "`v-bind()` in CSS of a value that is not a string or a number",
+        detail: "Vue's server writes a variable `v-bind()` sets from a string or a number, `initial` for `null` and `undefined`, and warns of anything else.",
+    },
     FV1007: { title: "Style binding of an unsupported type" },
     FV1008: { title: "Computed or spread key in a style object" },
     FV1009: { title: "Style property named by a number or starting with `:`" },
@@ -252,6 +260,11 @@ export const ERRORS = {
         title: "`class` written apart from a later `:class` in content rendered from virtual nodes",
         detail: "Inside an element `<component :is>` chooses, in the slot content such an element renders, and inside a `<RouterLink>`, Vue's server renders from virtual nodes, where a static `class` written before `:class` keeps its place and its names come first. ferrovue writes them so when nothing stands between the two; with attributes between them, write the two next to each other, or `:class` first.",
     },
+    FV1014: {
+        title: "`<style module>` whose class names ferrovue cannot compute",
+        detail: "ferrovue names the classes of a CSS module written in the component in plain CSS, as postcss-modules does in Vite. A module in another file (`src`), one a preprocessor compiles (`lang`), and one that imports names from another file (`composes: x from \"./a.css\"`, `@value x from \"./a.css\"`) are refused.",
+    },
+    FV1015: { title: "`useCssModule` of a module the component does not declare" },
     FV1101: { title: "Helper called with the wrong number of arguments" },
     FV1102: { title: "Configuration file not found" },
     FV1103: { title: "Configuration file that is not valid JSON" },
@@ -264,6 +277,21 @@ export const ERRORS = {
     FV1110: { title: "Twin without `rust`" },
     FV1111: { title: "Twin prop name that is not camelCase" },
     FV1112: { title: "Twin slot name that is not a plain name" },
+    FV1113: { title: "Configuration that is not a JSON object" },
+    FV1114: {
+        title: "Unknown configuration key",
+        detail: "A key ferrovue does not read is refused, as it is most often a misspelt one (`component` for `components`). The message names the key it most likely means.",
+    },
+    FV1115: { title: "Configuration value of the wrong type" },
+    FV1116: { title: "Directory the configuration names that cannot be read" },
+    FV1117: {
+        title: "Deprecated configuration key",
+        detail: "A warning: ferrovue still reads the key, and stops reading it in the next major release. The message names what to write instead. A key is deprecated for at least one minor release before it is removed.",
+    },
+    FV1118: {
+        title: "Deprecated command-line option",
+        detail: "A warning: the option still works, and is removed in the next major release. The message names what to use instead. An option is deprecated for at least one minor release before it is removed.",
+    },
     FV1201: { title: "Route parameter that is not a present string or number" },
     FV1202: { title: "`to` that is not a string or an object literal" },
     FV1203: { title: "Computed or spread key in a `to` object" },
@@ -315,6 +343,8 @@ export const ERRORS = {
     FV1243: { title: "`<route>` block in a page" },
     FV1244: { title: "`_parent.vue` with no pages to hold" },
     FV1245: { title: "Page whose component name is taken or not a Rust name" },
+    FV1246: { title: "Routes file that cannot be read" },
+    FV1247: { title: "Routes file that is not valid JSON" },
     FV1301: { title: "Type declared by two stores" },
     FV1302: { title: "Store id that is not a string literal" },
     FV1303: { title: "Store of an unsupported shape" },

package/dist/expr.d.ts

@@ -4,4 +4,6 @@ export declare function fieldVal(comp: Component, base: string, ty: Ty, js: stri
 export declare function holdsNothing(comp: Component, v: Val, want: Ty, node: N, where: string): void;
 export declare function coerce(comp: Component, v: Val, want: Ty, node: N): string;
 export declare function childOf(name: string): Component;
+/** `n` with the type `t` given to each empty array literal it may evaluate to, as an `as T[]` on it. */
+export declare function typedBy(n: N, t: N): N;
 export declare function expr(s: Scope, n: N): Val;

package/dist/expr.js

@@ -1,9 +1,9 @@
 import { absence, BOOL, fail, FLOAT, GenError, INT, joinAbsence, nothing, NULL, opt, rustStr, sameTy, snake, STR, UNDEF, withAbsence } from "./model.js";
 import { ctx } from "./context.js";
-import { lookupStruct, markHome } from "./typescript.js";
+import { lookupStruct, markHome, tyOfTs } from "./typescript.js";
 import { claim } from "./plugin.js";
 import { atom, bare, binary, enclosed, logical, negate, not, occurrences, strArg } from "./parens.js";
-import { collected } from "./lists.js";
+import { collected, sliced, typedEmpty, untypedEmpty } from "./lists.js";
 import { asCow, formatted, isTemporary, loneOf, meet, stringsEqual } from "./strings.js";
 import { arithmetic, asF64, compare, intFromF64, isNumber, negatedOrder, numberVal } from "./numbers.js";
 import { boolOf, checkNullTest, choice, known, narrowing, narrowTo, nullTest, pathOf, presence, truthy } from "./narrowing.js";
@@ -45,8 +45,12 @@ export function fieldVal(comp, base, ty, js, node) {
         fail(comp, "FV0604", `\`.${js}\` on a value that is not an object`, node);
     const { st, owner } = lookupStruct(comp, ty);
     const found = st?.fields.find((x) => x.js === js);
-    if (!found)
+    if (!found) {
+        const refused = st?.refused?.get(js) ?? st?.refused?.get("");
+        if (refused !== undefined)
+            throw refused;
         fail(comp, "FV0605", `\`${ty.name}\` has no field \`${js}\``, node);
+    }
     const f = owner === comp ? found : { ...found, ty: markHome(found.ty, owner.name) };
     if (st.slot)
         return { code: `${base}.${f.rust}`, ty: f.ty };
@@ -56,7 +60,7 @@ export function fieldVal(comp, base, ty, js, node) {
         if (of.k === "str")
             return { code: `${place}.as_deref().unwrap_or(${f.dflt})`, ty: STR };
         if (of.k === "list")
-            return { code: `${place}.as_deref().unwrap_or(${f.dflt})`, ty: of };
+            return { code: `${place}.as_deref().unwrap_or(${f.dflt})`, ty: of, slice: true };
         return { code: `${place}.unwrap_or(${f.dflt})`, ty: of };
     }
     switch (f.ty.k) {
@@ -120,6 +124,52 @@ function slotsObject(s, n) {
         return "$slots";
     return (owner === "$setup" || owner === "_ctx") && s.slotsBindings.has(name) ? name : null;
 }
+/** `n` with the type `t` given to each empty array literal it may evaluate to, as an `as T[]` on it. */
+export function typedBy(n, t) {
+    switch (n.type) {
+        case "ArrayExpression":
+            return n.elements.length === 0 ? { ...n, type: "TSAsExpression", expression: n, typeAnnotation: t, fvGiven: true } : n;
+        case "ParenthesizedExpression":
+            return { ...n, expression: typedBy(n.expression, t) };
+        case "ConditionalExpression":
+            return { ...n, consequent: typedBy(n.consequent, t), alternate: typedBy(n.alternate, t) };
+        case "LogicalExpression":
+            return n.operator === "&&" ? n : { ...n, right: typedBy(n.right, t) };
+        default:
+            return n;
+    }
+}
+function stated(s, n) {
+    const comp = s.comp;
+    const keyword = n.type === "TSAsExpression" ? "as" : "satisfies";
+    const t = n.typeAnnotation;
+    if (t.type === "TSTypeReference" && t.typeName.type === "Identifier" && t.typeName.name === "const" && !t.typeParameters)
+        return expr(s, n.expression);
+    let want;
+    try {
+        want = tyOfTs(comp, t, comp.structs);
+    }
+    catch (e) {
+        if (!(e instanceof GenError) || !n.fvGiven)
+            throw e;
+        return expr(s, n.expression);
+    }
+    const list = want.k === "opt" ? want.of : want;
+    let inner = n.expression;
+    while (inner.type === "ParenthesizedExpression")
+        inner = inner.expression;
+    if (inner.type === "ArrayExpression" && inner.elements.length === 0) {
+        if (list.k === "list")
+            return typedEmpty(comp, list.of);
+        if (n.fvGiven)
+            return expr(s, n.expression);
+        return fail(comp, "FV0628", `\`${keyword}\` gives an empty array literal ${describeTy(want)}, which it is not`, n);
+    }
+    const v = expr(s, typedBy(n.expression, t));
+    if (sameTy(v.ty, want) || (isNumber(v.ty) && isNumber(want)) || (want.k === "opt" && sameTy(v.ty, want.of)))
+        return v;
+    return fail(comp, "FV0628", `\`${keyword}\` states ${describeTy(want)} of ${describeTy(v.ty)}, which the server keeps as it is: write the value with the type it has`, n);
+}
 export function expr(s, n) {
     const comp = s.comp;
     const path = pathOf(n);
@@ -219,7 +269,9 @@ export function expr(s, n) {
                 return { code: "None", ty: UNDEF };
             if (base.ty.k !== "opt")
                 return fieldVal(comp, base.code, base.ty, n.property.name, n);
-            const f = fieldVal(comp, "v", base.ty.of, n.property.name, n);
+            const field = fieldVal(comp, "v", base.ty.of, n.property.name, n);
+            const place = ["list", "record", "struct"].includes(field.ty.k) && /^v(?:\.[\w#]+)+$/.test(field.code);
+            const f = place ? { ...field, code: `&${field.code}` } : field;
             if (f.ty.k === "opt")
                 return { code: `${atom(base.code)}.and_then(|v| ${f.code})`, ty: opt(f.ty) };
             return { code: `${atom(base.code)}.map(|v| ${f.code})`, ty: opt(f.ty) };
@@ -325,6 +377,9 @@ export function expr(s, n) {
                     return { ...a, ty: withAbsence(a.ty.of, absence(b.ty)) };
                 if (b.iter !== undefined)
                     fail(comp, "FV0615", "`??` falling back to a computed list", n);
+                if (a.ty.of.k === "list" && b.ty.k === "list" && (untypedEmpty(b) || (sameTy(a.ty.of, b.ty) && !b.code.startsWith("[")))) {
+                    return { code: `${atom(a.code)}.map(|v| &v[..]).unwrap_or(${untypedEmpty(b) ? "&[]" : sliced(b)})`, ty: a.ty.of, slice: true, ...loneOf(a, b) };
+                }
                 if (a.held !== undefined && b.ty.k === "str")
                     return { code: `&*${atom(a.held)}.unwrap_or(${asCow(b)})`, ty: STR, ...loneOf(a, b) };
                 if (a.ty.of.k === "str" && b.ty.k === "str" && isTemporary(b)) {
@@ -451,14 +506,31 @@ export function expr(s, n) {
         case "ConditionalExpression": {
             const t = expr(s, n.test);
             const k = known(t);
-            if (k !== undefined)
-                return expr(s, k ? n.consequent : n.alternate);
+            if (k !== undefined) {
+                const chosen = expr(s, k ? n.consequent : n.alternate);
+                if (!untypedEmpty(chosen))
+                    return chosen;
+                try {
+                    const other = expr(s, k ? n.alternate : n.consequent);
+                    return other.ty.k === "list" && other.ty.of.k !== "undef" ? typedEmpty(comp, other.ty.of) : chosen;
+                }
+                catch (e) {
+                    if (!(e instanceof GenError))
+                        throw e;
+                    return chosen;
+                }
+            }
             const p = presence(s, n.test);
             const name = p ? `n${++ctx.narrowCount}` : "";
-            const a = expr(p && !p.negated ? narrowTo(s, p, name) : s, n.consequent);
-            const b = expr(p && p.negated ? narrowTo(s, p, name) : s, n.alternate);
+            let a = expr(p && !p.negated ? narrowTo(s, p, name) : s, n.consequent);
+            let b = expr(p && p.negated ? narrowTo(s, p, name) : s, n.alternate);
             if (sameTy(a.ty, b.ty) && a.code === b.code && (!name || !occurrences(a.code, name)))
                 return a;
+            const [emptyA, emptyB] = [untypedEmpty(a), untypedEmpty(b)];
+            if (emptyA && b.ty.k === "list")
+                a = { ...a, ty: b.ty };
+            if (emptyB && a.ty.k === "list")
+                b = { ...b, ty: a.ty };
             const second = (code) => (a.ty.k === "str" ? strArg(code) : bare(code));
             const choose = (yes, no) => {
                 if (!p)
@@ -478,9 +550,13 @@ export function expr(s, n) {
             if (sameTy(a.ty, b.ty) && a.ty.k === "str" && (isTemporary(a) || isTemporary(b))) {
                 return { code: `&*(${choose(asCow(a), asCow(b))})`, ty: STR, ...lone };
             }
-            if (sameTy(a.ty, b.ty) && a.ty.k === "list" && (a.iter !== undefined || b.iter !== undefined)) {
-                const both = `(${choose(collected(a), collected(b))})`;
-                return { code: both, ty: a.ty, iter: `${both}.into_iter()`, ...lone };
+            if (sameTy(a.ty, b.ty) && a.ty.k === "list" && a.ty.of.k !== "undef") {
+                const owned = (v, empty) => !empty && (v.iter !== undefined || v.code.startsWith("["));
+                if (owned(a, emptyA) || owned(b, emptyB)) {
+                    const both = `(${choose(emptyA ? "Vec::new()" : collected(a), emptyB ? "Vec::new()" : collected(b))})`;
+                    return { code: both, ty: a.ty, iter: `${both}.into_iter()`, ...lone };
+                }
+                return { code: choose(emptyA ? "&[]" : sliced(a), emptyB ? "&[]" : sliced(b)), ty: a.ty, slice: true, ...lone };
             }
             const optStr = (v) => nothing(v.ty) || (v.ty.k === "opt" && v.ty.of.k === "str") || v.ty.k === "str";
             if (sameTy(a.ty, b.ty) && a.ty.k !== "opt")
@@ -503,6 +579,9 @@ export function expr(s, n) {
             }
             return fail(comp, "FV0623", "the two branches of `?:` differ in type", n);
         }
+        case "TSAsExpression":
+        case "TSSatisfiesExpression":
+            return stated(s, n);
         case "NewExpression": {
             const made = n.callee.type === "Identifier" ? n.callee.name : n.callee.type === "MemberExpression" && !n.callee.computed ? `${n.callee.object.name ?? "…"}.${n.callee.property.name}` : "…";
             return fail(comp, "FV0624", `\`new ${made}(…)\` builds an object the server has no twin for: compute the value in Rust and pass it as a prop`, n);

package/dist/fallthrough.d.ts

@@ -1,6 +1,7 @@
 import { type Component, type N } from "./model.ts";
 export declare function isDollarAttrs(n: N, bindings: Set<string>): boolean;
 export declare function passedKey(child: Component, key: string): boolean;
+export declare function isListener(key: string): boolean;
 export declare function attrsFlow(read: {
     comp: Component;
     ssr: string;

package/dist/fallthrough.js

@@ -9,10 +9,15 @@ export function isDollarAttrs(n, bindings) {
     return n.object.name === "$setup" && prop !== undefined && bindings.has(prop);
 }
 export function passedKey(child, key) {
-    if (["", "key", "ref", "ref_for", "ref_key", "innerHTML", "textContent"].includes(key) || /^on[^a-z]/.test(key))
+    if (["", "key", "ref", "ref_for", "ref_key", "innerHTML", "textContent"].includes(key))
         return false;
+    if (isListener(key))
+        return declares(child, key);
     return !(key.endsWith("Modifiers") && declares(child, key === "modelModifiers" ? "modelValue" : key.slice(0, -"Modifiers".length)));
 }
+export function isListener(key) {
+    return /^on[^a-z]/.test(key);
+}
 export function attrsFlow(read) {
     const byName = new Map(read.map((r) => [r.comp.name, r.comp]));
     const flows = read.map((r) => {
@@ -41,7 +46,10 @@ export function attrsFlow(read) {
                 if (child) {
                     calls.push({
                         child,
-                        keys: parts.filter((p) => p.type === "ObjectExpression").flatMap((p) => p.properties.filter((q) => q.type === "ObjectProperty" && !q.computed).map((q) => q.key.name ?? String(q.key.value))),
+                        keys: [
+                            ...parts.filter((p) => p.type === "ObjectExpression").flatMap((p) => p.properties.filter((q) => q.type === "ObjectProperty" && !q.computed).map((q) => q.key.name ?? String(q.key.value))),
+                            ...(parts.some((p) => p.type === "Identifier" && p.name === "_cssVars") ? ["style"] : []),
+                        ],
                         passesAttrs: parts.some((p) => p.type === "Identifier" && p.name === "_attrs"),
                         passesDollar: parts.some((p) => isDollarAttrs(p, r.attrsBindings)),
                     });

package/dist/files.d.ts

@@ -0,0 +1,13 @@
+import type { Code } from "./errors.ts";
+import { type Component, type N } from "./model.ts";
+/** The entries of a directory the configuration names as `key`, refusing one that cannot be read. */
+export declare function listDir(root: string, dir: string, key: string): string[];
+/** A JSON file of the project's, parsed; one that cannot be read is refused with `missing`, and one
+ * that does not parse with `invalid`. */
+export declare function readJsonFile(root: string, file: string, codes: {
+    missing?: Code;
+    invalid: Code;
+}): unknown;
+/** The statements of a TypeScript file of the project's, whose text `home.source` holds, refusing
+ * one that does not parse with where the parser stopped, as a component's script is. */
+export declare function parseTs(home: Component): N[];

package/dist/files.js

@@ -0,0 +1,49 @@
+import { parse as parseJs } from "@babel/parser";
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { fail, failIn, GenError } from "./model.js";
+function why(e) {
+    const code = e.code;
+    return code === "ENOENT" ? "it does not exist" : code === "ENOTDIR" ? "it is not a directory" : code === "EISDIR" ? "it is a directory" : e.message;
+}
+/** The entries of a directory the configuration names as `key`, refusing one that cannot be read. */
+export function listDir(root, dir, key) {
+    try {
+        return readdirSync(join(root, dir));
+    }
+    catch (e) {
+        throw new GenError("FV1116", `cannot read the \`${key}\` directory \`${dir}\`: ${why(e)}`, { file: dir });
+    }
+}
+/** A JSON file of the project's, parsed; one that cannot be read is refused with `missing`, and one
+ * that does not parse with `invalid`. */
+export function readJsonFile(root, file, codes) {
+    let text;
+    try {
+        text = readFileSync(join(root, file), "utf8");
+    }
+    catch (e) {
+        if (!codes.missing)
+            throw e;
+        return failIn(file, codes.missing, `cannot read the file: ${why(e)}`);
+    }
+    try {
+        return JSON.parse(text);
+    }
+    catch (e) {
+        return failIn(file, codes.invalid, e.message);
+    }
+}
+/** The statements of a TypeScript file of the project's, whose text `home.source` holds, refusing
+ * one that does not parse with where the parser stopped, as a component's script is. */
+export function parseTs(home) {
+    try {
+        return parseJs(home.source ?? "", { sourceType: "module", plugins: ["typescript"] }).program.body;
+    }
+    catch (e) {
+        if (!(e instanceof SyntaxError))
+            throw e;
+        const at = e.loc;
+        return fail(home, "FV0001", e.message.replace(/ \(\d+:\d+\)$/, ""), at ? { type: "ParseError", loc: { start: at }, __fv: "source" } : undefined);
+    }
+}

package/dist/fixture.d.ts

@@ -36,13 +36,13 @@ export interface RouterOptions {
     /** The application's own `pinia` module, used in place of the one `ferrovue/testing` would
      * import: under vitest the application's stores use the module Vite loads, which must be the
      * one that installs the fixture's state. */
-    pinia?: typeof import("pinia");
+    pinia?: typeof import("pinia") | undefined;
     /** The application's own `vue-router` module, used in place of the one `ferrovue/testing`
      * would import. */
-    vueRouter?: typeof import("vue-router");
+    vueRouter?: typeof import("vue-router") | undefined;
     /** The application's own `vue-i18n` module, used in place of the one `ferrovue/testing` would
      * import. */
-    vueI18n?: typeof import("vue-i18n");
+    vueI18n?: typeof import("vue-i18n") | undefined;
 }
 /** An app rendering one fixture of `component`: with a router over `routes` when there are any. */
 export declare function fixtureApp(component: Component, fixture: Fixture, routes: RouteEntry[] | null, options?: RouterOptions): Promise<App>;

package/dist/hydration.d.ts

@@ -1,5 +1,5 @@
 import type { App, Component } from "vue";
-import { type IslandComponent, type PageOptions, type PageRecord } from "./client.ts";
+import { type IslandComponent, type PageOptions, type PageRecord, type RenderPageOptions } from "./client.ts";
 /** A page as the server wrote it: `html` holds the container and, unless `record` is given, the
  * record's script. */
 export interface RecordedPage {
@@ -13,3 +13,14 @@ export interface RecordedPage {
  * such as a `<ClientOnly>` showing its content or an async component loading, is the app's to
  * change. Resolves to the app, mounted and settled. */
 export declare function hydrateRecordedPage(page: RecordedPage, layout: Component, components: Record<string, IslandComponent>, options?: PageOptions): Promise<App>;
+/** Put a recorded page into the document's body and show it again from its record with
+ * `renderPage`, as a navigation shows the next page, throwing where the client's render differs
+ * from the markup the browser parsed, as `renderedShape` compares them (comments and empty text
+ * aside, classes, styles and form controls by what they hold), and on anything Vue warns or logs as
+ * an error. The render is compared as mounting leaves it, where `<ClientOnly>` still shows its
+ * fallback as the server wrote it, and, where that differs while async components are loading,
+ * once they have loaded. What is teleported out of the page is not compared. Resolves to the app,
+ * mounted. */
+export declare function renderRecordedPage(page: RecordedPage, layout: Component, components: Record<string, IslandComponent>, options?: RenderPageOptions & {
+    record?: string;
+}): Promise<App>;

package/dist/hydration.js

@@ -1,4 +1,5 @@
-import { mountPage } from "./client.js";
+import { mountPage, readPage, renderPage } from "./client.js";
+import { renderDifference, renderedShape, shapeAtMount } from "./client-render.js";
 import { settled } from "./settle.js";
 function recordScript(id, record) {
     const json = JSON.stringify(record).replace(/[<>&\u2028\u2029]/g, (ch) => `\\u${ch.charCodeAt(0).toString(16).padStart(4, "0")}`);
@@ -78,3 +79,48 @@ export async function hydrateRecordedPage(page, layout, components, options = {}
     }
     return app;
 }
+/** Put a recorded page into the document's body and show it again from its record with
+ * `renderPage`, as a navigation shows the next page, throwing where the client's render differs
+ * from the markup the browser parsed, as `renderedShape` compares them (comments and empty text
+ * aside, classes, styles and form controls by what they hold), and on anything Vue warns or logs as
+ * an error. The render is compared as mounting leaves it, where `<ClientOnly>` still shows its
+ * fallback as the server wrote it, and, where that differs while async components are loading,
+ * once they have loaded. What is teleported out of the page is not compared. Resolves to the app,
+ * mounted. */
+export async function renderRecordedPage(page, layout, components, options = {}) {
+    const doc = options.doc ?? document;
+    const id = options.record ?? "__fv_page";
+    doc.body.innerHTML = page.html + (page.record ? recordScript(id, page.record) : "");
+    const record = page.record ?? readPage(page.html, { record: id }).record;
+    const selector = options.container ?? "#app";
+    const container = typeof selector === "string" ? doc.querySelector(selector) : selector;
+    if (!container)
+        throw new Error(`the recorded page has no ${selector}`);
+    const expected = renderedShape(container);
+    const problems = [];
+    const watch = {
+        install(app) {
+            app.config.warnHandler = (message) => void problems.push(`warning: ${message}`);
+        },
+    };
+    const mounted = shapeAtMount();
+    const { warn, error } = console;
+    console.warn = (...args) => void problems.push(`console.warn: ${args.map(String).join(" ")}`);
+    console.error = (...args) => void problems.push(`console.error: ${args.map(String).join(" ")}`);
+    let app;
+    try {
+        app = await renderPage(layout, components, record, { ...options, doc, container, plugins: [...(options.plugins ?? []), watch, mounted.plugin] });
+        const difference = await renderDifference(app, mounted.container() ?? container, mounted.shape() ?? "", expected);
+        if (difference)
+            problems.push(difference);
+    }
+    finally {
+        console.warn = warn;
+        console.error = error;
+    }
+    if (problems.length) {
+        app.unmount();
+        throw new Error(`the page did not render from its record exactly:\n${problems.join("\n")}`);
+    }
+    return app;
+}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { ClientOnly, hydrateState, mountIslands, type IslandComponent, type Islands, type MountOptions } from "./client.ts";
-export { createPageApp, mountPage, type PageOptions, type PagePart, type PageRecord } from "./client.ts";
+export { ClientOnly, hydrateState, mountIslands, type IslandComponent, type Islands, type MountOptions, type StateText } from "./client.ts";
+export { createPageApp, mountPage, readPage, renderPage, type PageAppOptions, type PageOptions, type PagePart, type PageRecord, type ReadPage, type ReadPageOptions, type RenderPageOptions, } from "./client.ts";
 export type { Float, InlineHtml, TrustedHtml } from "./types.ts";

package/dist/index.js

@@ -1,2 +1,2 @@
 export { ClientOnly, hydrateState, mountIslands } from "./client.js";
-export { createPageApp, mountPage } from "./client.js";
+export { createPageApp, mountPage, readPage, renderPage, } from "./client.js";