ferrovue 0.3.0 → 0.4.0

package/dist/classes.js

@@ -0,0 +1,176 @@
+import { escapeHtml } from "@vue/shared";
+import { fail, rustStr, STR } from "./model.js";
+import { expr } from "./expr.js";
+import { cond, known, truthy } from "./narrowing.js";
+import { meet } from "./strings.js";
+import { atom, bare, condition, logical, not, strArg } from "./parens.js";
+import { Emitter } from "./emitter.js";
+import { valueAttr } from "./attrs.js";
+export function classItems(s, n) {
+    switch (n.type) {
+        case "StringLiteral": {
+            const t = n.value.trim();
+            return t ? [{ lit: t }] : [];
+        }
+        case "ArrayExpression":
+            return n.elements.flatMap((el) => (el ? classItems(s, el) : []));
+        case "ObjectExpression":
+            const literalNames = n.properties
+                .filter((p) => p.type === "ObjectProperty" && !p.computed)
+                .map((p) => (p.key.type === "Identifier" ? p.key.name : String(p.key.value)));
+            const arrayIndex = (k) => /^(0|[1-9]\d*)$/.test(k) && Number(k) < 2 ** 32 - 1;
+            if (n.properties.some((p) => p.type === "ObjectProperty" && p.computed) ||
+                literalNames.some(arrayIndex) ||
+                new Set(literalNames).size !== literalNames.length) {
+                const keys = [];
+                const entries = n.properties.map((p) => {
+                    if (p.type !== "ObjectProperty")
+                        fail(s.comp, "a class object holds `name: condition` pairs", p);
+                    const key = p.computed ? expr(s, p.key) : { code: rustStr(p.key.type === "Identifier" ? p.key.name : String(p.key.value)), ty: STR };
+                    if (key.ty.k !== "str")
+                        fail(s.comp, "a computed class name is a string", p.key);
+                    for (const other of keys)
+                        meet(s.comp, other, key, "a class object's names", p.key, "equal");
+                    keys.push(key);
+                    return `(${bare(cond(s, p.value))}, ${bare(key.code)})`;
+                });
+                return [{ code: `&*fv::class_object(&[${entries.join(", ")}])` }];
+            }
+            return n.properties.flatMap((p) => {
+                if (p.type !== "ObjectProperty")
+                    fail(s.comp, "a class object holds `name: condition` pairs", p);
+                let name;
+                if (!p.computed) {
+                    const key = p.key.type === "Identifier" ? p.key.name : String(p.key.value);
+                    if (key !== key.trim() || !key)
+                        fail(s.comp, `class name \`${key}\` has spaces around it`, p);
+                    name = { lit: key };
+                }
+                else {
+                    const k = expr(s, p.key);
+                    if (k.ty.k !== "str")
+                        fail(s.comp, "a computed class name is a string", p.key);
+                    name = { code: `fv::js_trim(${strArg(k.code)})` };
+                }
+                const v = expr(s, p.value);
+                const on = known(v);
+                if (on !== undefined)
+                    return on ? [name] : [];
+                const text = "lit" in name ? rustStr(name.lit) : name.code;
+                return [{ code: `if ${condition(truthy(v))} { ${bare(text)} } else { "" }` }];
+            });
+        case "LogicalExpression":
+            if (n.operator === "&&") {
+                return conditional(cond(s, n.left), classItems(s, n.right));
+            }
+            break;
+        case "ConditionalExpression":
+            if (n.consequent.type === "NullLiteral" || n.alternate.type === "NullLiteral") {
+                const branch = n.consequent.type === "NullLiteral" ? n.alternate : n.consequent;
+                const test = cond(s, n.test);
+                return conditional(n.consequent.type === "NullLiteral" ? not(test) : test, classItems(s, branch));
+            }
+            break;
+    }
+    const v = expr(s, n);
+    if (v.ty.k === "str")
+        return [{ code: v.code }];
+    if (v.ty.k === "opt" && v.ty.of.k === "str")
+        return [{ code: `${atom(v.code)}.unwrap_or("")` }];
+    if (v.ty.k === "undef")
+        return [];
+    return fail(s.comp, "a class is a string, an array, or an object of conditions", n);
+}
+function conditional(test, items) {
+    if (test === "true" || test === "false")
+        return test === "true" ? items : [];
+    return items.map((it) => ({ code: `if ${condition(test)} { ${"lit" in it ? rustStr(it.lit) : bare(it.code)} } else { "" }` }));
+}
+export function renderClass(s, e, n, after = false) {
+    const items = classItems(s, n);
+    let wrote = after;
+    let i = 0;
+    for (; i < items.length; i++) {
+        const it = items[i];
+        if (!("lit" in it))
+            break;
+        e.lit((wrote ? " " : "") + escapeHtml(it.lit));
+        wrote = true;
+    }
+    if (i < items.length) {
+        const rest = items.slice(i).map((it) => ("lit" in it ? rustStr(it.lit) : it.code));
+        e.stmt(`fv::class_into(out, ${wrote}, &[${rest.join(", ")}]);`);
+    }
+}
+export function classPresent(s, n) {
+    if (n.fvMerged)
+        return n.elements.reduce((acc, el) => logical(acc, "||", classPresent(s, el)), "false");
+    switch (n.type) {
+        case "StringLiteral":
+        case "NullLiteral":
+        case "ArrayExpression":
+        case "ObjectExpression":
+            return "true";
+        case "LogicalExpression":
+            if (n.operator === "&&")
+                return logical(not(cond(s, n.left)), "||", classPresent(s, n.right));
+            break;
+        case "ConditionalExpression":
+            if (n.consequent.type === "NullLiteral")
+                return logical(cond(s, n.test), "||", classPresent(s, n.alternate));
+            if (n.alternate.type === "NullLiteral")
+                return logical(not(cond(s, n.test)), "||", classPresent(s, n.consequent));
+            break;
+    }
+    const v = expr(s, n);
+    if (v.ty.k === "undef")
+        return "false";
+    if (v.ty.k === "opt")
+        return `${atom(v.code)}.is_some()`;
+    return "true";
+}
+export function maybeEqual(s, n) {
+    if (n.type === "StringLiteral")
+        return true;
+    if (n.fvMerged || ["ArrayExpression", "ObjectExpression", "NullLiteral", "LogicalExpression", "ConditionalExpression"].includes(n.type))
+        return false;
+    const v = expr(s, n);
+    return v.ty.k === "str" || (v.ty.k === "opt" && v.ty.of.k === "str");
+}
+export function literalClass(n) {
+    if (n.type === "StringLiteral")
+        return n.value.trim();
+    if (!n.fvMerged)
+        return null;
+    const parts = n.elements.map(literalClass);
+    return parts.includes(null) ? null : parts.filter(Boolean).join(" ");
+}
+export function classAttr(s, n, side) {
+    switch (n.type) {
+        case "StringLiteral":
+            return `fv::Attr::str(${rustStr(n.value)})`;
+        case "NullLiteral":
+            return 'fv::Attr::str("")';
+        case "ArrayExpression":
+        case "ObjectExpression": {
+            const items = classItems(s, n);
+            const names = items.every((it) => "lit" in it)
+                ? rustStr(items.map((it) => ("lit" in it ? it.lit : "")).join(" "))
+                : `fv::class_names(&[${items.map((it) => ("lit" in it ? rustStr(it.lit) : it.code)).join(", ")}])`;
+            const literal = names.startsWith('"');
+            if (side === "vnode")
+                return literal ? `fv::Attr::str(${names})` : `fv::Attr::from(${names})`;
+            return `fv::Attr::Names(${literal ? `std::borrow::Cow::Borrowed(${names})` : `${names}.into()`})`;
+        }
+        case "LogicalExpression":
+            if (n.operator === "&&")
+                return `if ${condition(cond(s, n.left))} { ${classAttr(s, n.right, side)} } else { fv::Attr::str("") }`;
+            break;
+        case "ConditionalExpression":
+            return `if ${condition(cond(s, n.test))} { ${classAttr(s, n.consequent, side)} } else { ${classAttr(s, n.alternate, side)} }`;
+    }
+    const v = expr(s, n);
+    if (v.ty.k === "str" || v.ty.k === "undef" || (v.ty.k === "opt" && v.ty.of.k === "str"))
+        return valueAttr(s, v, n);
+    return fail(s.comp, "a class is a string, an array, or an object of conditions", n);
+}

package/dist/cli.js

@@ -1,15 +1,4 @@
 #!/usr/bin/env node
-/* `ferrovue`: compile the project's components, run from its root.
- *
- *   ferrovue                  write the Rust modules to the configured output directory
- *   ferrovue --check          write nothing; exit 1 if the committed modules are not what would be written
- *   ferrovue --check --diff   show a unified diff of differences
- *   ferrovue --watch          write them, then again whenever a component, store, type file, the routes
- *                             or the configuration changes, until interrupted
- *   ferrovue init             scaffold a starter ferrovue.config.json and components directory
- *   ferrovue -c, --config     path to configuration file (default: ferrovue.config.json)
- *   ferrovue -v, --version    print the version and exit
- *   ferrovue -h, --help       print this help and exit */
 import { existsSync, mkdirSync, readFileSync, readdirSync, watch, writeFileSync } from "node:fs";
 import { dirname, join, relative, resolve, sep } from "node:path";
 import { CONFIG_FILE, GenError, generate, loadConfig, VERSION, write } from "./compiler.js";
@@ -30,7 +19,6 @@ Options:
   -v, --version            print the version and exit
   -h, --help               print this help and exit
 `;
-/** A refused construct, or a broken configuration: the message alone, which names the file. */
 function report(e) {
     if (e instanceof GenError || e instanceof SyntaxError)
         console.error(`error: ${e.message}`);
@@ -79,7 +67,6 @@ function check(config, showDiff = false) {
         have = readdirSync(dir).filter((f) => f.endsWith(".rs"));
     }
     catch {
-        // An absent directory is simply stale.
     }
     const stale = [...want.keys()].filter((name) => {
         try {
@@ -120,8 +107,6 @@ function once(config) {
     const what = changed.length || removed.length ? `${changed.length} changed, ${removed.length} removed` : "nothing changed";
     console.log(`${config.out}: ${files.length} files, ${what}`);
 }
-/** Regenerate on every change to what the components are compiled from, reporting errors and
- * carrying on. The output directory itself, dependencies and build output are ignored. */
 function watchProject(configPath) {
     const run = () => {
         try {
@@ -138,7 +123,6 @@ function watchProject(configPath) {
             out = loadConfig(root, configPath).out;
         }
         catch {
-            // A broken configuration ignores nothing; the next run reports it.
         }
         const parts = file.split(sep);
         return (parts.some((p) => p === "node_modules" || p === "target" || p === ".git" || p === "dist") ||
@@ -149,7 +133,6 @@ function watchProject(configPath) {
     watch(root, { recursive: true }, (_event, name) => {
         if (!name || ignored(relative(root, join(root, name))))
             return;
-        // Editors write a file in several steps: one run once they are done.
         if (timer)
             clearTimeout(timer);
         timer = setTimeout(run, 50);

package/dist/client.js

@@ -1,18 +1,9 @@
-/* What the browser does with a page ferrovue rendered. */
 import { createSSRApp } from "vue";
-/** A JSON string, skipped whole as it may hold the same letters, or a bare number JSON has no word
- * for, which the server writes as JavaScript does where `serde_json` alone would write `null`. */
 const BARE = /"(?:[^"\\]|\\.)*"|-?Infinity|NaN/g;
 const NON_FINITE = { NaN: Number.NaN, Infinity: Number.POSITIVE_INFINITY, "-Infinity": Number.NEGATIVE_INFINITY };
-/** `JSON.parse`, reading back the bare `NaN`, `Infinity` and `-Infinity` that an island's props and
- * the state script hold for a number that is not finite, so the client renders what the server did.
- * Throws as `JSON.parse` does on anything else that is not JSON. */
 function parseJson(text) {
-    // Plain JSON: almost everything the server writes, and all it wrote before it wrote these.
     if (!/NaN|Infinity/.test(text))
         return JSON.parse(text);
-    // Each token becomes a string that starts with more NULs in a row than any string in the text
-    // holds (JSON has one way to write a NUL, `\u0000`), so no other value can be mistaken for one.
     let escaped = "\\u0000";
     while (text.includes(escaped))
         escaped += "\\u0000";
@@ -35,7 +26,6 @@ export async function mountIslands(components, options = {}) {
     const root = options.root ?? document;
     const report = options.onError ?? ((el, problem) => console.warn(`[ferrovue] island left unhydrated: ${problem}`, el));
     const elements = Array.from(root.querySelectorAll("[data-island]"));
-    // Each component the page names, loaded once however many islands it has.
     const loading = new Map();
     for (const el of elements) {
         const name = el.dataset.island ?? "";
@@ -84,8 +74,6 @@ export async function mountIslands(components, options = {}) {
         },
     };
 }
-/** The component itself, or what its loader resolves to: a module's default export, or the
- * component. A loader that rejects gives its error, which leaves only its own islands unhydrated. */
 async function load(component) {
     if (typeof component !== "function" || "props" in component || "displayName" in component || "__vccOpts" in component)
         return component;

package/dist/compiler.js

@@ -1,56 +1,29 @@
-/* ferrovue's compiler: `.vue` → Rust render functions.
- *
- * The input is not the template. It is what `@vue/compiler-sfc` compiles the template to for
- * server rendering — straight-line `_push` calls, `if`, `_ssrRenderList`, and a handful of
- * `@vue/server-renderer` helpers — so element structure, attribute order, whitespace and the
- * fragment markers are decided by Vue, and this file only has to translate a small, closed
- * vocabulary of JavaScript into Rust that writes the same bytes. The generated code calls the
- * `ferrovue` crate for everything Vue's runtime does.
- *
- * Anything outside that vocabulary is an error naming the component and the construct, never a
- * best guess: a guess that is wrong by one byte is a hydration mismatch in a browser, found by a
- * reader.
- *
- * A project describes itself in `ferrovue.config.json` at its root — see `Config` — and runs the
- * `ferrovue` command there. `generate()` is also what a drift test calls, so the committed files can
- * be held to exactly what this produces.
- *
- * This module is the public API; the translation lives in the modules beside it. */
 import { mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
-import { join, resolve } from "node:path";
+import { join } from "node:path";
 import { ctx, loadConfig, tyOfName } from "./context.js";
 import { readComponent } from "./component.js";
-import { readRoutes } from "./router.js";
-import { readStores } from "./stores.js";
-import { i18nSource, readLocales } from "./i18n.js";
 import { scopeFor } from "./script.js";
-import { attrsFlow, scopeFlow } from "./scoped.js";
-import { componentSource, isIsland, modSource, routesSource, storesSource, typesSource } from "./rust.js";
+import { attrsFlow } from "./fallthrough.js";
+import { componentSource, isIsland, modSource } from "./rust.js";
+import { renderParams } from "./plugin.js";
+import { PLUGINS } from "./plugins/index.js";
 /** Every generated file, keyed by its name in the output directory. */
 export function generate(root, config = loadConfig(root)) {
     ctx.componentsDir = config.components.replace(/\/?$/, "/");
     ctx.helperModule = config.helpers?.module ?? null;
     ctx.trustedHtml = config.trustedHtml ?? null;
-    const router = config.router ?? (config.routes ? { routes: config.routes } : null);
-    ctx.routes = router ? readRoutes(root, router.routes) : null;
-    ctx.routerBase = router?.base ?? "";
     ctx.clientDirectives = new Set(config.clientDirectives ?? []);
-    ctx.i18n = config.i18n ? readLocales(root, config.i18n) : null;
-    ctx.linkActive = router?.linkActiveClass ?? "router-link-active";
-    ctx.linkExactActive = router?.linkExactActiveClass ?? "router-link-exact-active";
     ctx.rootDir = root;
-    ctx.scopeId = config.scopeId ?? "filepath-source";
-    ctx.viteRoot = resolve(root, config.viteRoot ?? ".");
     ctx.typeStructs = new Map();
     ctx.typeAliases = new Map();
     ctx.typeFiles = new Map();
     ctx.typeRead = new Set();
-    if (config.stores)
-        readStores(root, config.stores);
-    else {
-        ctx.stores = new Map();
-        ctx.storeStructs = new Map();
-    }
+    ctx.plugins = PLUGINS;
+    ctx.runs = new Map();
+    for (const p of PLUGINS)
+        ctx.runs.set(p, p.configure?.(config, root));
+    for (const p of PLUGINS)
+        p.prepare?.(root);
     ctx.helpers = Object.fromEntries(Object.entries(config.helpers?.functions ?? {}).map(([name, h]) => [
         name,
         { rust: h.rust, params: h.params.map(tyOfName), ret: tyOfName(h.returns), maxLen: h.maxLen ?? 0 },
@@ -63,56 +36,25 @@ export function generate(root, config = loadConfig(root)) {
     const read = files.map((f) => readComponent(f, root));
     const components = new Map(read.map((r) => [r.comp.name, r.comp]));
     ctx.components = components;
-    // Whether a component reads a store or the route is known once its setup is read; both reach
-    // every component on the way down to one that does, and the route every one on the way down to
-    // a `<RouterLink>`.
     const scopes = read.map((r) => scopeFor(r.comp, r.ast, components).scope);
-    // Which roots may be handed scope ids, and which slot content given a slot scope id.
-    scopeFlow(read.map((r, i) => ({ comp: r.comp, ssr: r.ssr, children: scopes[i].children })));
-    // Which components may be passed attributes beyond their props.
-    attrsFlow(read.map((r, i) => ({ comp: r.comp, ssr: r.ssr, children: scopes[i].children, attrsBindings: scopes[i].attrsBindings })));
-    for (const c of components.values())
-        c.usesRoute = c.routerLink || c.readsRoute;
-    for (let changed = true; changed;) {
-        changed = false;
-        for (const c of components.values()) {
-            if (!c.usesRoute && [...c.imports].some((i) => components.get(i)?.usesRoute)) {
-                c.usesRoute = changed = true;
-            }
-        }
-    }
-    for (const c of components.values())
-        c.usesI18n = c.readsI18n;
-    for (let changed = true; changed;) {
-        changed = false;
-        for (const c of components.values()) {
-            if (!c.usesI18n && [...c.imports].some((i) => components.get(i)?.usesI18n)) {
-                c.usesI18n = changed = true;
-            }
-        }
-    }
-    for (const c of components.values())
-        c.usesTeleports = c.readsTeleports;
-    for (let changed = true; changed;) {
-        changed = false;
-        for (const c of components.values()) {
-            if (!c.usesTeleports && [...c.imports].some((i) => components.get(i)?.usesTeleports)) {
-                c.usesTeleports = changed = true;
-            }
-        }
-    }
+    const all = read.map((r, i) => ({ comp: r.comp, ssr: r.ssr, children: scopes[i].children, attrsBindings: scopes[i].attrsBindings }));
+    for (const p of PLUGINS)
+        p.analyse?.(all);
+    attrsFlow(all);
     for (const c of components.values())
-        c.usesStores = c.readsStores;
+        c.takes = new Set(renderParams().filter((p) => p.reads(c)).map((p) => p.name));
     for (let changed = true; changed;) {
         changed = false;
         for (const c of components.values()) {
-            if (!c.usesStores && [...c.imports].some((i) => components.get(i)?.usesStores)) {
-                c.usesStores = changed = true;
+            for (const name of [...c.imports].flatMap((i) => [...(components.get(i)?.takes ?? [])])) {
+                if (!c.takes.has(name)) {
+                    c.takes.add(name);
+                    changed = true;
+                }
             }
         }
     }
     const out = new Map();
-    // A child before its parents, which read the props its scoped slots pass.
     const ordered = [];
     const placed = new Set();
     const place = (r) => {
@@ -128,19 +70,13 @@ export function generate(root, config = loadConfig(root)) {
     };
     read.forEach(place);
     for (const r of ordered) {
-        // Numbered per component, so a file's text depends on its own source alone.
         ctx.narrowCount = 0;
         out.set(`${r.comp.module}.rs`, componentSource(r.comp, r.ast, r.ssr, components));
     }
-    out.set("mod.rs", modSource(read.map((r) => r.comp)));
-    if (ctx.routes)
-        out.set("route_table.rs", routesSource(ctx.routes, router.routes));
-    if (ctx.stores.size)
-        out.set("stores.rs", storesSource(config.stores.replace(/\/?$/, "/")));
-    if (ctx.typeStructs.size)
-        out.set("types.rs", typesSource());
-    if (ctx.i18n)
-        out.set("i18n.rs", i18nSource(ctx.i18n));
+    const modules = PLUGINS.flatMap((p) => p.modules?.() ?? []);
+    out.set("mod.rs", modSource(read.map((r) => r.comp), modules.map(([file]) => file)));
+    for (const [file, text] of modules)
+        out.set(file, text);
     return out;
 }
 /** Write what \`generate\` produces to the configured directory: only the files whose text changed,
@@ -157,7 +93,6 @@ export function write(root, config = loadConfig(root)) {
             old = readFileSync(join(target, name), "utf8");
         }
         catch {
-            // A new file.
         }
         if (old !== text) {
             writeFileSync(join(target, name), text);

package/dist/component.js

@@ -1,14 +1,11 @@
-/* One `.vue` file read: its props, models, imported types, and Vue's SSR compilation of its template. */
 import { compileScript, compileTemplate, parse as parseSfc } from "@vue/compiler-sfc";
-import { createHash } from "node:crypto";
 import { readFileSync } from "node:fs";
 import { SourceMapConsumer } from "source-map-js";
-import { basename, relative, resolve, sep } from "node:path";
-import { fail, opt, snake, tagAst } from "./model.js";
+import { basename, relative } from "node:path";
+import { blankComponent, fail, opt, snake, tagAst } from "./model.js";
 import { ctx } from "./context.js";
 import { typesImports, declareTypes, defaultValue, definePropsType, readTypeFile, resolveImport, runtimeDefaults, structOf, tyOfTs } from "./typescript.js";
-/** A Vue compiler error's position as a node \`fail\` can point at: its line and 1-based column,
- * offset by where the template starts when the error is in the template's content. */
+import { claim } from "./plugin.js";
 function vueErrorNode(err, within) {
     const loc = err.loc;
     if (!loc)
@@ -17,17 +14,6 @@ function vueErrorNode(err, within) {
     const at = !within ? { line, column: column - 1 } : line === 1 ? { line: within.line, column: within.column - 1 + column - 1 } : { line: within.line + line - 1, column: column - 1 };
     return { type: "VueError", loc: { start: at }, __fv: "source" };
 }
-/** `getHash` in `@vitejs/plugin-vue`: the first 8 hex digits of the SHA-256 of the file's path from
- * Vite's root, with `/` between its parts, followed in `"filepath-source"` mode by its source. */
-function scopeHash(file, source) {
-    const path = relative(ctx.viteRoot, resolve(file)).split(sep).join("/");
-    return createHash("sha256")
-        .update(ctx.scopeId === "filepath" ? path : path + source)
-        .digest("hex")
-        .slice(0, 8);
-}
-/** `inheritAttrs` as `defineOptions({ inheritAttrs })` or a plain `<script>`'s `export default`
- * sets it: a literal, since it decides what reaches the root. */
 function inheritAttrs(comp, statements) {
     let found = true;
     for (const st of statements) {
@@ -54,61 +40,24 @@ export function readComponent(file, root) {
     const source = readFileSync(file, "utf8");
     const { descriptor, errors } = parseSfc(source, { filename: file });
     const rel = relative(root, file);
-    const comp = {
-        name,
-        module: snake(name),
-        file: rel,
-        props: { name: "Props", fields: [] },
-        structs: new Map(),
-        trustedName: null,
-        floatName: null,
-        childProps: new Map(),
-        imports: new Set(),
-        slotNames: [],
-        routerView: false,
-        routerLink: false,
-        readsRoute: false,
-        usesRoute: false,
-        readsStores: false,
-        usesStores: false,
-        readsI18n: false,
-        usesI18n: false,
-        readsTeleports: false,
-        usesTeleports: false,
-        models: new Map(),
-        aliases: new Map(),
-        importedTypes: new Map(),
-        slotShapes: new Map(),
-        scopeId: null,
-        slotted: false,
-        inheritAttrs: true,
-        inherits: false,
-        passesSlotIds: false,
-        attrNames: new Set(),
-        idsInAttrs: false,
-    };
+    const comp = blankComponent(name, snake(name), rel);
     comp.source = source;
     if (errors.length)
         fail(comp, String(errors[0]), vueErrorNode(errors[0]));
     if (!descriptor.scriptSetup || !descriptor.template) {
         fail(comp, "an island needs `<script setup lang=\"ts\">` and a `<template>`");
     }
-    // A global `<style>` block changes no markup. A scoped one adds `data-v-…` attributes, whose id is
-    // computed here as the bundler computes it. A CSS module renames classes, and `v-bind()` in CSS
-    // writes variables onto the root, neither of which the server reproduces.
     for (const st of descriptor.styles) {
         if (st.module)
             fail(comp, "`<style module>` renames classes in the bundler; use a global or scoped `<style>`, or a stylesheet");
     }
     if (descriptor.cssVars.length)
         fail(comp, "`v-bind()` in `<style>` sets variables the server does not render; bind `:style` instead");
-    if (descriptor.styles.some((st) => st.scoped))
-        comp.scopeId = `data-v-${scopeHash(file, source)}`;
-    comp.slotted = descriptor.slotted;
+    for (const p of ctx.plugins)
+        p.sfc?.(comp, descriptor, file, source);
     const script = compileScript(descriptor, { id: name });
     const ast = script.scriptSetupAst ?? [];
     tagAst(ast, "source");
-    // A plain `<script>` beside the setup one may declare the types the setup block uses.
     const plainAst = script.scriptAst ?? [];
     tagAst(plainAst, "source");
     for (const s of [...plainAst, ...ast]) {
@@ -125,7 +74,6 @@ export function readComponent(file, root) {
     }
     typesImports(comp, [...plainAst, ...ast]);
     comp.inheritAttrs = inheritAttrs(comp, [...plainAst, ...ast]);
-    // Types imported from elsewhere: a store's file, a shared `.ts` file, or another component.
     for (const st of [...plainAst, ...ast]) {
         if (st.type !== "ImportDeclaration")
             continue;
@@ -143,12 +91,8 @@ export function readComponent(file, root) {
             const typeFile = resolveImport(comp.file, from);
             if (!typeFile)
                 continue;
-            const module = typeFile.replace(/\.ts$/, "");
-            if ([...ctx.stores.values()].some((x) => x.module === module)) {
-                if (ctx.storeStructs.has(typeName))
-                    comp.importedTypes.set(sp.local.name, { k: "struct", name: typeName, store: true });
+            if (ctx.plugins.some((p) => p.importedType?.(comp, typeFile, typeName, sp.local.name)))
                 continue;
-            }
             if (ctx.helperModule !== null && from === ctx.helperModule && !isType)
                 continue;
             readTypeFile(typeFile);
@@ -158,8 +102,6 @@ export function readComponent(file, root) {
                 comp.aliases.set(sp.local.name, ctx.typeAliases.get(typeName));
         }
     }
-    // Interfaces in two passes: every name first, so one may name another declared after it, or
-    // itself — a tree node's children are tree nodes.
     const decls = declareTypes(comp, [...plainAst, ...ast], comp.structs, comp.aliases);
     for (const d of decls)
         comp.structs.set(d.name, structOf(comp, d.name, d.members, comp.structs));
@@ -174,9 +116,7 @@ export function readComponent(file, root) {
         if (found)
             propsTy = found;
     }
-    // A component without `defineProps` takes no props.
     if (!propsTy) {
-        // nothing to read
     }
     else if (propsTy.type === "TSTypeLiteral") {
         comp.props = structOf(comp, "Props", propsTy.members, comp.structs);
@@ -187,7 +127,6 @@ export function readComponent(file, root) {
     else {
         fail(comp, "`defineProps` takes a type literal or an interface declared in the same block", propsTy);
     }
-    // `defineModel`: a prop of its own (`modelValue` unless named), which the binding reads.
     for (const st of ast) {
         if (st.type !== "VariableDeclaration")
             continue;
@@ -206,8 +145,6 @@ export function readComponent(file, root) {
             comp.models.set(d.id.name, named);
         }
     }
-    // What Vue uses for an absent optional prop: the default `compileScript` resolved — from
-    // `withDefaults`, a destructured default, or `defineModel`'s options — or `false` for a boolean.
     const defaults = runtimeDefaults(comp, script.content);
     for (const f of comp.props.fields) {
         if (f.ty.k !== "opt")
@@ -221,17 +158,11 @@ export function readComponent(file, root) {
     const compiled = compileTemplate({
         source: descriptor.template.content,
         filename: file,
-        // As `@vitejs/plugin-vue` compiles it: the scope id written onto every element, and passed to
-        // slot content only with `:slotted()` styles.
-        id: comp.scopeId ?? name,
-        scoped: comp.scopeId !== null,
-        slotted: comp.slotted,
+        ...(claim((p) => p.templateOptions?.(comp)) ?? { id: name, scoped: false, slotted: false }),
         ssr: true,
         ssrCssVars: [],
         compilerOptions: { bindingMetadata: script.bindings, sourceMap: true },
     });
-    // `ssrInjectFallthroughAttrs`: a root `<Transition>` or `<KeepAlive>` passes `_attrs` on only to
-    // a lone element or component without `v-if` or `v-for`.
     const kids = (n) => n.children.filter((c) => c.type !== 3 && !(c.type === 2 && !c.content.trim()));
     const roots = descriptor.template.ast ? kids(descriptor.template.ast) : [];
     const wrapper = roots.length === 1 && roots[0].type === 1 && roots[0].tagType === 1 && ["Transition", "transition", "KeepAlive", "keep-alive"].includes(roots[0].tag) ? roots[0] : null;
@@ -245,20 +176,13 @@ export function readComponent(file, root) {
     comp.templateStart = { line: start.line, column: start.column };
     if (compiled.map)
         comp.templateMap = new SourceMapConsumer(compiled.map);
-    // A template error's position is within the template's content.
     if (compiled.errors.length)
         fail(comp, String(compiled.errors[0]), vueErrorNode(compiled.errors[0], comp.templateStart));
     for (const m of compiled.code.matchAll(/_ssrRenderSlot\(_ctx\.\$slots, "([^"]+)"/g)) {
         if (!comp.slotNames.includes(m[1]))
             comp.slotNames.push(m[1]);
     }
-    // Resolved by name, as globally registered components are, or imported from `vue-router`.
-    const imported = (exported) => [...plainAst, ...ast].some((st) => st.type === "ImportDeclaration" && st.source.value === "vue-router" &&
-        st.specifiers.some((sp) => sp.type === "ImportSpecifier" && (sp.imported.name ?? sp.imported.value) === exported));
-    comp.routerLink = compiled.code.includes('_resolveComponent("RouterLink")') || imported("RouterLink");
-    comp.routerView = compiled.code.includes('_resolveComponent("RouterView")') || imported("RouterView");
-    comp.readsRoute = compiled.code.includes("_ctx.$route");
-    comp.readsI18n = compiled.code.includes("_ctx.$t(");
-    comp.readsTeleports = compiled.code.includes("_ssrRenderTeleport(");
+    for (const p of ctx.plugins)
+        p.compiled?.(comp, compiled.code, [...plainAst, ...ast]);
     return { comp, ast, ssr: compiled.code };
 }