ferrovue 0.5.0 → 0.7.0

package/dist/args.d.ts

@@ -0,0 +1,28 @@
+import { GenError } from "./model.ts";
+import type { Deprecation } from "./schema.ts";
+/** A command-line option: its names, short one first, the value it takes, and its line in `--help`. */
+export interface Flag {
+    names: readonly string[];
+    value?: string;
+    help: string;
+    deprecated?: Deprecation;
+}
+/** The commands `ferrovue` takes, with their lines in `--help`. */
+export declare const COMMANDS: Readonly<Record<string, string>>;
+/** The options `ferrovue` takes. */
+export declare const FLAGS: readonly Flag[];
+/** What the command line asks for: the command, and each option given by its long name, with its
+ * value or `true`. */
+export interface Args {
+    command: string | null;
+    options: Map<string, string | true>;
+    /** The name each option was given by, as an error about it quotes it. */
+    spelt: Map<string, string>;
+    warnings: GenError[];
+}
+/** `ferrovue --help`. */
+export declare function helpText(flags?: readonly Flag[], commands?: Readonly<Record<string, string>>): string;
+/** Read the command line, or say what is wrong with it. A deprecated option gives a warning. */
+export declare function parseArgs(argv: readonly string[], flags?: readonly Flag[], commands?: Readonly<Record<string, string>>): Args | {
+    error: string;
+};

package/dist/args.js

@@ -0,0 +1,69 @@
+import { GenError } from "./model.js";
+/** The commands `ferrovue` takes, with their lines in `--help`. */
+export const COMMANDS = {
+    init: "scaffold starter ferrovue.config.json and components",
+};
+/** The options `ferrovue` takes. */
+export const FLAGS = [
+    { names: ["--check"], help: "check that generated files match committed files without writing" },
+    { names: ["-d", "--diff"], help: "show unified diff of changes when checking (use with --check)" },
+    { names: ["--format"], value: "<format>", help: "how to write errors and results: human (default) or json" },
+    { names: ["--watch"], help: "watch components, stores, routes and config for changes and regenerate" },
+    { names: ["-c", "--config"], value: "<path>", help: "path to configuration file (default: ferrovue.config.json)" },
+    { names: ["-v", "--version"], help: "print the version and exit" },
+    { names: ["-h", "--help"], help: "print this help and exit" },
+];
+const longName = (flag) => flag.names.at(-1);
+/** `ferrovue --help`. */
+export function helpText(flags = FLAGS, commands = COMMANDS) {
+    const line = (left, help) => `  ${left.padEnd(23)}  ${help}`;
+    const option = (flag) => {
+        const [short, long] = flag.names.length > 1 ? [`${flag.names[0]}, `, longName(flag)] : ["    ", longName(flag)];
+        const help = flag.deprecated ? `${flag.help} (deprecated: use ${flag.deprecated.use})` : flag.help;
+        return line(`${short}${long}${flag.value ? ` ${flag.value}` : ""}`, help);
+    };
+    return `Usage: ferrovue [command] [options]
+
+Compile Vue components to Rust render functions, run from the project root.
+
+Commands:
+${Object.entries(commands).map(([name, help]) => line(name, help)).join("\n")}
+
+Options:
+${flags.map(option).join("\n")}`;
+}
+/** Read the command line, or say what is wrong with it. A deprecated option gives a warning. */
+export function parseArgs(argv, flags = FLAGS, commands = COMMANDS) {
+    const args = { command: null, options: new Map(), spelt: new Map(), warnings: [] };
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        const eq = arg.startsWith("--") ? arg.indexOf("=") : -1;
+        const name = eq === -1 ? arg : arg.slice(0, eq);
+        const flag = flags.find((f) => f.names.includes(name));
+        if (!flag) {
+            if (arg in commands && args.command === null) {
+                args.command = arg;
+                continue;
+            }
+            return { error: `unknown option or command '${arg}'\n\nRun \`ferrovue --help\` for usage.` };
+        }
+        let value = true;
+        if (flag.value) {
+            if (eq !== -1)
+                value = arg.slice(eq + 1);
+            else if (i + 1 < argv.length && !argv[i + 1].startsWith("-"))
+                value = argv[++i];
+            else
+                return { error: `option '${name}' requires an argument` };
+        }
+        else if (eq !== -1) {
+            return { error: `option '${name}' takes no value` };
+        }
+        if (flag.deprecated) {
+            args.warnings.push(new GenError("FV1118", `'${name}' is deprecated since ${flag.deprecated.since}, and goes in the next major release: use ${flag.deprecated.use}`));
+        }
+        args.options.set(longName(flag), value);
+        args.spelt.set(longName(flag), name);
+    }
+    return args;
+}

package/dist/attrs.d.ts

@@ -4,7 +4,8 @@ export declare function display(e: Emitter, v: Val): boolean;
 export declare function interpolate(s: Scope, e: Emitter, v: Val, n: N): void;
 export declare function attrValue(e: Emitter, v: Val): void;
 export declare function renderAttr(s: Scope, e: Emitter, key: string, v: Val, n: N): void;
-export declare function renderDynamicAttr(s: Scope, e: Emitter, key: string, v: Val, n: N): void;
+export declare function keepsAttrCase(tag: string): boolean;
+export declare function renderDynamicAttr(s: Scope, e: Emitter, key: string, v: Val, n: N, tag?: string | null): void;
 export declare const IGNORED_PROPS: Set<string>;
 export declare function directiveProps(s: Scope, n: N): boolean;
 export declare function isAttrs(n: N): boolean;

package/dist/attrs.js

@@ -1,4 +1,4 @@
-import { escapeHtml, hyphenate, isBooleanAttr, isSSRSafeAttrName, propsToAttrMap } from "@vue/shared";
+import { escapeHtml, hyphenate, isBooleanAttr, isSSRSafeAttrName, isSVGTag, propsToAttrMap } from "@vue/shared";
 import { fail, nothing, GenError, rustStr } from "./model.js";
 import { CONFIG_FILE, ctx } from "./context.js";
 import { describeTy, expr } from "./expr.js";
@@ -75,8 +75,11 @@ export function renderAttr(s, e, key, v, n) {
     attrValue(e, v);
     e.lit(`"`);
 }
-export function renderDynamicAttr(s, e, key, v, n) {
-    const name = propsToAttrMap[key] ?? key.toLowerCase();
+export function keepsAttrCase(tag) {
+    return tag.indexOf("-") > 0 || isSVGTag(tag);
+}
+export function renderDynamicAttr(s, e, key, v, n, tag = null) {
+    const name = tag !== null && keepsAttrCase(tag) ? key : (propsToAttrMap[key] ?? key.toLowerCase());
     if (!isSSRSafeAttrName(name))
         fail(s.comp, "FV0404", `unsafe attribute name \`${name}\``, n);
     renderable(s, key, v, n);
@@ -91,7 +94,7 @@ export function renderDynamicAttr(s, e, key, v, n) {
     }
     if (v.ty.k === "opt") {
         e.open(`if let Some(v) = ${v.code}`);
-        renderDynamicAttr(s, e, key, { code: "v", ty: v.ty.of }, n);
+        renderDynamicAttr(s, e, key, { code: "v", ty: v.ty.of }, n, tag);
         e.close();
         return;
     }
@@ -335,7 +338,10 @@ export function valueAttr(s, v, n) {
             const make = of === "str" ? "fv::Attr::str" : of === "int" ? "fv::Attr::Int" : of === "float" ? "fv::Attr::Float" : of === "bool" ? "fv::Attr::Bool" : null;
             if (make !== null)
                 return `${atom(v.code)}.map_or(fv::Attr::Undefined, ${make})`;
+            break;
         }
+        default:
+            break;
     }
     return fail(s.comp, "FV0412", "an attribute that may fall through is a string, a number or a boolean", n);
 }

package/dist/calls.js

@@ -2,7 +2,7 @@ import { BOOL, fail, FLOAT, INT, sameTy, STR } from "./model.js";
 import { ctx } from "./context.js";
 import { claim } from "./plugin.js";
 import { atom, bare, binary, condition, operand, receiver, strArg, UNARY } from "./parens.js";
-import { computedListMethod, items, listMethod, objectCall } from "./lists.js";
+import { computedListMethod, isBoolean, items, listMethod, objectCall, presentLiteral } from "./lists.js";
 import { lonely, loneOf, meet, stringMethod, stringsEqual } from "./strings.js";
 import { asF64, intFromF64, isNumber } from "./numbers.js";
 import { boolOf, truthy } from "./narrowing.js";
@@ -41,6 +41,8 @@ export function call(s, n) {
         const helper = s.helpers.get(callee.name);
         if (helper)
             return helperCall(s, helper, args, n);
+        if (isBoolean(s, callee) && args.length === 1)
+            return boolOf(truthy(expr(s, args[0])));
         if (callee.name === "String" && args.length === 1) {
             const a = expr(s, args[0]);
             if (a.ty.k === "str")
@@ -121,7 +123,8 @@ export function call(s, n) {
             }
             return fail(comp, "FV0704", `\`Math.${method}()\` is supported on numbers as \`max\`, \`min\`, \`abs\`, \`round\`, \`floor\`, \`ceil\` and \`trunc\``, n);
         }
-        const target = expr(s, callee.object);
+        const literal = method === "filter" && args.length === 1 && isBoolean(s, args[0]) && callee.object.type === "ArrayExpression";
+        const target = (literal ? presentLiteral(s, callee.object) : null) ?? expr(s, callee.object);
         if (target.ty.k === "str") {
             const lone = loneOf(target);
             switch (args.length === 0 ? method : "") {

package/dist/children.d.ts

@@ -10,7 +10,7 @@ export declare function renderChild(s: Scope, e: Emitter, n: N, twin?: TwinCall)
 export declare function array(key: string): boolean;
 export declare function fieldInit(name: string, value: string): string;
 export declare function takesSlots(c: Component): boolean;
-export declare function extraParams(c: Component): string;
-export declare function callChild(s: Scope, e: Emitter, child: Component, propsCode: string, slots: N, attrs: string | null): void;
+export declare function extraParams(c: Component, unread?: (name: string) => boolean): string;
+export declare function callChild(s: Scope, e: Emitter, child: Component, propsCode: string, slots: N, attrs: string | null, later?: boolean): void;
 export declare function callWith(s: Scope, e: Emitter, child: Component, m: string, head: string, slotsTy: string, trailing: string, slots: N, vnode?: boolean): void;
 export declare function ownInto(comp: Component, v: Val, want: Ty, node: N): string;

package/dist/children.js

@@ -6,11 +6,12 @@ import { expr, fieldVal, holdsNothing } from "./expr.js";
 import { asF64 } from "./numbers.js";
 import { atom, bare } from "./parens.js";
 import { Emitter } from "./emitter.js";
-import { attrOf, dollarAttrs, IGNORED_PROPS, isAttrs, mergedParts } from "./attrs.js";
-import { passedKey } from "./fallthrough.js";
-import { claim, paramsOf, slotFieldsOf } from "./plugin.js";
+import { attrOf, dollarAttrs, isAttrs, mergedParts } from "./attrs.js";
+import { isListener, passedKey } from "./fallthrough.js";
+import { claim, paramsOf, slotContextOf, slotFieldsOf } from "./plugin.js";
 import { statements } from "./template.js";
 import { slotContent, slotFieldBorrows, staticallyFilled } from "./slots.js";
+import { slotAsVnodes } from "./dynamic.js";
 export function renderChild(s, e, n, twin) {
     const [target, rawProps, slots, , slotScopeId] = n.arguments;
     let local = null;
@@ -22,13 +23,24 @@ export function renderChild(s, e, n, twin) {
     const child = twin?.comp ?? (childName ? s.components.get(childName) : undefined);
     if (!child)
         fail(s.comp, "FV0501", `a child component must be imported from a \`.vue\` file among the components compiled, in ${ctx.componentsDir.replace(/\/$/, "")}`, n);
+    const later = !twin && local !== null && s.loadedLater.has(local);
     for (const p of ctx.plugins)
         p.child?.(s, child, n);
     const parts = !rawProps || rawProps.type === "NullLiteral" ? [] : mergedParts(rawProps);
     const merges = parts.length > 0 && parts[0] !== rawProps;
     const passesAttrs = parts.some(isAttrs);
     const passed = (p) => s.fallthrough !== null && ((isAttrs(p) && s.comp.inheritAttrs) || dollarAttrs(s, p));
-    const marker = (p) => p.type === "ObjectExpression" && p.properties.length > 0 && p.properties.every((q) => q.type === "ObjectProperty" && IGNORED_PROPS.has(q.key.name ?? q.key.value));
+    const handlers = (p) => {
+        const dynamic = p.type === "ObjectProperty" && p.computed && isCall(p.key, "_toHandlerKey");
+        if (!isCall(p, "_toHandlers") && !dynamic)
+            return false;
+        const declared = child.props.fields.find((f) => isListener(f.js));
+        if (declared)
+            fail(s.comp, "FV0514", `a listener whose name is not known before rendering, given to ${child.name}, which declares \`${declared.js}\` as a prop`, p);
+        return true;
+    };
+    const silent = (p) => p.type === "ObjectProperty" && !p.computed && !passedKey(child, p.key.name ?? String(p.key.value));
+    const marker = (p) => handlers(p) || (p.type === "ObjectExpression" && p.properties.length > 0 && p.properties.every((q) => silent(q) || handlers(q)));
     const objects = parts.filter((p) => !isAttrs(p) && !dollarAttrs(s, p) && !marker(p));
     if (parts.some(passed)) {
         for (const name of s.comp.attrNames) {
@@ -44,7 +56,7 @@ export function renderChild(s, e, n, twin) {
         const v = expr(s, objects[0]);
         const own = child.name === s.comp.name && v.ty.k === "struct" && v.ty.name === "Props";
         if (own || (v.ty.k === "child" && v.ty.name === child.name)) {
-            callChild(s, e, child, v.code, slots, childAttrsArg(s, child, parts, merges, null, ids, n));
+            callChild(s, e, child, v.code, slots, childAttrsArg(s, child, parts, merges, null, ids, n), later);
             return;
         }
         fail(s.comp, "FV0503", `child props must be an object literal, or \`v-bind\` of ${child.name}'s own \`Props\``, n);
@@ -54,9 +66,12 @@ export function renderChild(s, e, n, twin) {
             fail(s.comp, "FV0503", `child props must be an object literal, or \`v-bind\` of ${child.name}'s own \`Props\``, p);
     }
     const given = new Map();
-    const fallthrough = new Set();
+    const fallthrough = new Map();
+    const loaded = !merges && local !== null && s.loadedLater.has(local);
     for (const obj of objects) {
         for (const p of obj.properties) {
+            if (handlers(p))
+                continue;
             if (p.type !== "ObjectProperty" || p.computed)
                 fail(s.comp, "FV0504", "child props hold plain keys", p);
             const key = p.key.type === "Identifier" ? p.key.name : String(p.key.value);
@@ -72,7 +87,7 @@ export function renderChild(s, e, n, twin) {
             const name = propsToAttrMap[key] ?? key.toLowerCase();
             if (key !== "class" && key !== "style" && !isSSRSafeAttrName(name))
                 fail(s.comp, "FV0404", `unsafe attribute name \`${name}\``, p);
-            fallthrough.add(p);
+            fallthrough.set(p, loaded && key === "class" ? loadedClass(s, p.value) : p.value);
         }
     }
     if (twin) {
@@ -92,11 +107,41 @@ export function renderChild(s, e, n, twin) {
         const v = expr(s, node);
         return fieldInit(f.rust, ownInto(s.comp, { ...v, ty: markHome(v.ty, s.comp.name) }, markHome(f.ty, child.name), node));
     });
-    callChild(s, e, child, `&super::${child.module}::Props { ${inits.join(", ")} }`, slots, childAttrsArg(s, child, parts, merges, fallthrough, ids, n));
+    callChild(s, e, child, `&super::${child.module}::Props { ${inits.join(", ")} }`, slots, childAttrsArg(s, child, parts, merges, fallthrough, ids, n), later);
+}
+function isCall(n, callee) {
+    return n?.type === "CallExpression" && n.callee.type === "Identifier" && n.callee.name === callee;
 }
 export function array(key) {
     return /^(0|[1-9]\d*)$/.test(key) && Number(key) < 2 ** 32 - 1;
 }
+/** A string `:class` given to a component `defineAsyncComponent` loads, in props no `mergeProps`
+ * normalised: Vue's wrapper hands on the class once as written and once trimmed, so a class with
+ * whitespace around it is written twice. */
+const lengthOf = (n) => ({ type: "MemberExpression", object: n, property: { type: "Identifier", name: "length" }, computed: false });
+function holdsClassLiteral(n) {
+    if (n.type === "ObjectExpression" || n.type === "ArrayExpression")
+        return true;
+    if (n.type === "ConditionalExpression")
+        return holdsClassLiteral(n.consequent) || holdsClassLiteral(n.alternate);
+    if (n.type === "LogicalExpression")
+        return holdsClassLiteral(n.left) || holdsClassLiteral(n.right);
+    return false;
+}
+function loadedClass(s, value) {
+    if (value.type === "ConditionalExpression" && (holdsClassLiteral(value.consequent) || holdsClassLiteral(value.alternate))) {
+        return { ...value, consequent: loadedClass(s, value.consequent), alternate: loadedClass(s, value.alternate) };
+    }
+    if (holdsClassLiteral(value) || expr(s, value).ty.k !== "str")
+        return value;
+    const trimmed = { type: "CallExpression", callee: { type: "MemberExpression", object: value, property: { type: "Identifier", name: "trim" }, computed: false }, arguments: [] };
+    return {
+        type: "ConditionalExpression",
+        test: { type: "BinaryExpression", operator: "===", left: lengthOf(trimmed), right: lengthOf(value) },
+        consequent: value,
+        alternate: { type: "ArrayExpression", elements: [trimmed, value] },
+    };
+}
 function childAttrsArg(s, child, parts, merges, fallthrough, ids, n) {
     const sources = [];
     for (const p of parts) {
@@ -106,7 +151,7 @@ function childAttrsArg(s, child, parts, merges, fallthrough, ids, n) {
         else if (p.type === "ObjectExpression" && fallthrough !== null) {
             const entries = p.properties.filter((q) => fallthrough.has(q)).map((q) => {
                 const key = q.key.type === "Identifier" ? q.key.name : String(q.key.value);
-                return `(${rustStr(key)}, ${attrOf(s, key, q.value, "vnode")})`;
+                return `(${rustStr(key)}, ${attrOf(s, key, fallthrough.get(q), "vnode")})`;
             });
             if (entries.length)
                 sources.push(`&[${entries.join(", ")}]`);
@@ -129,15 +174,23 @@ export function fieldInit(name, value) {
 export function takesSlots(c) {
     return c.slotNames.length > 0 || slotFieldsOf(c).length > 0;
 }
-export function extraParams(c) {
-    return (takesSlots(c) ? ", fv_slots: Slots<'_>" : "") + paramsOf(c).map((p) => `, ${p.name}: ${p.ty}`).join("");
+export function extraParams(c, unread = () => false) {
+    return (takesSlots(c) ? ", fv_slots: Slots<'_>" : "") + paramsOf(c).map((p) => `, ${unread(p.name) ? "_" : ""}${p.name}: ${p.ty}`).join("");
 }
-export function callChild(s, e, child, propsCode, slots, attrs) {
+export function callChild(s, e, child, propsCode, slots, attrs, later = false) {
     const m = `super::${child.module}`;
     const scoped = child.inherits || takesAttrs(child);
     const trailing = paramsOf(child).map((p) => `, ${p.name}`).join("") + (scoped ? `, ${attrs ?? (takesAttrs(child) ? "&fv::Attrs::NONE" : '""')}` : "");
     const render = scoped ? "render_scoped" : "render";
+    const around = later ? ctx.plugins.flatMap((p) => p.loadedLater?.(child) ?? []) : [];
+    if (around.length) {
+        e.open("");
+        for (const line of around)
+            e.stmt(line);
+    }
     callWith(s, e, child, m, `${m}::${render}(out, ${propsCode}`, `${m}::Slots`, trailing, slots);
+    if (around.length)
+        e.close();
 }
 export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode = false) {
     const given = new Map();
@@ -160,6 +213,9 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
         return;
     }
     e.open(`${head}, ${slotsTy}`);
+    const context = slotContextOf(child);
+    const contextParams = context.map((p) => `, ${p.name}: ${p.ty}`).join("");
+    const opaque = vnode ? child.name : s.opaque;
     for (const name of child.slotNames) {
         const field = snake(name);
         const value = given.get(name);
@@ -168,6 +224,7 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
             continue;
         }
         const { body, param } = slotContent(s, value);
+        const asVnodes = vnode || s.vnode || slotAsVnodes(child, name);
         const shape = child.slotShapes.get(name);
         const takesNone = param?.type === "Identifier" && param.name === "_";
         const sid = child.passesSlotIds ? `fv_sid${++ctx.narrowCount}` : null;
@@ -205,18 +262,29 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
             else if (!takesNone)
                 fail(s.comp, "FV0905", "slot props are a name or an object pattern", param);
             const life = shape.fields.some((f) => slotFieldBorrows(f.ty)) ? "<'_>" : "";
-            e.open(`${field}: Some(&|out: &mut String, ${sp}: &${m}::${shape.name}${life}${sidParam}| -> bool`);
+            e.open(`${field}: Some(&|out: &mut String, ${sp}: &${m}::${shape.name}${life}${sidParam}${contextParams}| -> bool`);
             const opened = e.lines.length - 1;
-            content({ ...s, locals, sid, vnode });
+            content({ ...s, locals, sid, vnode: asVnodes, opaque });
             unread(opened, sp);
             unread(opened, sid);
+            for (const p of context)
+                unread(opened, p.name);
             e.close("),");
             continue;
         }
         if (!takesNone)
             fail(s.comp, "FV0906", `\`<slot${name === "default" ? "" : ` name="${name}"`}>\` in ${child.name} passes no props`, param);
-        const inner = { ...s, sid, vnode };
-        if (sid !== null) {
+        const inner = { ...s, sid, vnode: asVnodes, opaque };
+        if (context.length) {
+            e.open(`${field}: Some(&|out: &mut String${sidParam}${contextParams}| -> bool`);
+            const opened = e.lines.length - 1;
+            content(inner);
+            unread(opened, sid);
+            for (const p of context)
+                unread(opened, p.name);
+            e.close("),");
+        }
+        else if (sid !== null) {
             e.open(`${field}: Some(fv::Slot::slotted(&|out: &mut String${sidParam}| -> bool`);
             const opened = e.lines.length - 1;
             content(inner);

package/dist/classes.d.ts

@@ -7,6 +7,10 @@ export type ClassItem = {
 };
 export declare function classItems(s: Scope, n: N): ClassItem[];
 export declare function renderClass(s: Scope, e: Emitter, n: N, after?: boolean): void;
+/** The class list of an element in content Vue renders from virtual nodes, in the order Vue's
+ * client compiler merges a static `class` written before `:class`: the static names first, at the
+ * place of the static `class`. */
+export declare function vnodeClass(s: Scope, n: N): N;
 export declare function classPresent(s: Scope, n: N): string;
 export declare function maybeEqual(s: Scope, n: N): boolean;
 export declare function literalClass(n: N): string | null;

package/dist/classes.js

@@ -1,5 +1,5 @@
 import { escapeHtml } from "@vue/shared";
-import { fail, nothing, rustStr, STR } from "./model.js";
+import { directiveOwner, fail, nothing, rustStr, STR } from "./model.js";
 import { expr } from "./expr.js";
 import { cond, known, truthy } from "./narrowing.js";
 import { meet } from "./strings.js";
@@ -102,6 +102,28 @@ export function renderClass(s, e, n, after = false) {
         e.stmt(`fv::class_into(out, ${wrote}, &[${rest.join(", ")}]);`);
     }
 }
+const UNWRITTEN = new Set(["on", "if", "else-if", "else", "for", "slot", "once", "memo", "cloak", "pre"]);
+/** The class list of an element in content Vue renders from virtual nodes, in the order Vue's
+ * client compiler merges a static `class` written before `:class`: the static names first, at the
+ * place of the static `class`. */
+export function vnodeClass(s, n) {
+    const last = n.type === "ArrayExpression" ? n.elements.at(-1) : null;
+    if (n.fvMerged || last?.type !== "StringLiteral" || n.elements.length < 2)
+        return n;
+    const el = directiveOwner(s.comp, n.elements[0]);
+    if (!el)
+        return n;
+    const own = el.props.findIndex((p) => p.type === 6 && p.name === "class");
+    const bound = el.props.findIndex((p) => p.type === 7 && p.name === "bind" && p.arg?.content === "class");
+    if (own < 0 || bound < own)
+        return n;
+    const between = el.props.slice(own + 1, bound).find((p) => p.type === 6 || !UNWRITTEN.has(p.name));
+    if (between) {
+        const at = { type: "VueTemplate", loc: { start: { line: between.loc.start.line, column: between.loc.start.column - 1 } }, __fv: "source" };
+        fail(s.comp, "FV1013", "in content Vue renders from virtual nodes, a `class` written before `:class` is written where the `class` stands, and Vue's server compiler moves it to where `:class` stands; write the two next to each other, or `:class` first", at);
+    }
+    return { ...n, elements: [last, ...n.elements.slice(0, -1)] };
+}
 export function classPresent(s, n) {
     if (n.fvMerged)
         return n.elements.reduce((acc, el) => logical(acc, "||", classPresent(s, el)), "false");