ferrovue 0.2.0 → 0.4.0

package/dist/{router.js → plugins/router-link.js}

@@ -1,28 +1,27 @@
-/* `<RouterLink>`, its locations, and the routes file. */
 import { escapeHtml } from "@vue/shared";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-import { fail, GenError, rustStr } from "./model.js";
-import { allRoutes, CONFIG_FILE, ctx } from "./context.js";
-import { expr, lonely } from "./expr.js";
-import { bare, condition, strArg } from "./parens.js";
-import { Emitter } from "./emitter.js";
-import { classItems, IGNORED_PROPS, mergeProps, renderDynamicAttr, renderStyle } from "./attrs.js";
-import { slotBody, statements } from "./template.js";
+import { camelize, fail, rustStr } from "../model.js";
+import { CONFIG_FILE } from "../context.js";
+import { expr } from "../expr.js";
+import { lonely } from "../strings.js";
+import { bare, condition, strArg } from "../parens.js";
+import { Emitter } from "../emitter.js";
+import { attrOf, dollarAttrs, IGNORED_PROPS, isAttrs, mergedParts, mergeProps, renderDynamicAttr } from "../attrs.js";
+import { renderStyle } from "../styles.js";
+import { classItems } from "../classes.js";
+import { statements } from "../template.js";
+import { slotBody } from "../slots.js";
+import { runOf } from "../plugin.js";
+import { scopeIdOf } from "./scoped.js";
+import { allRoutes, router } from "./router.js";
 export const ROUTER_LINK_PROPS = new Set(["to", "class", "activeClass", "exactActiveClass", "ariaCurrentValue"]);
-/** `<RouterLink>` props that change only what a click does, which the server does not render. */
 export const ROUTER_LINK_INERT = new Set(["replace", "viewTransition"]);
-/** The parameter names of a route path, in order. */
 export function routeParams(path) {
     return [...path.matchAll(/:(\w+)/g)].map((m) => m[1]);
 }
-/** A string written into a link, which vue-router percent-encodes: half of a surrogate pair makes
- * `encodeURI` throw, so Vue renders no page at all. */
 function noHalves(s, v, n) {
     if (v.lone)
         fail(s.comp, lonely("a `<RouterLink>` location"), n);
 }
-/** A value written into a URL — a parameter or a query value — as the `&str` vue-router stringifies. */
 export function urlText(s, v, n) {
     noHalves(s, v, n);
     if (v.ty.k === "str")
@@ -33,7 +32,6 @@ export function urlText(s, v, n) {
         return `if ${condition(v.code)} { "true" } else { "false" }`;
     return fail(s.comp, "a route parameter is a string or a number that is present", n);
 }
-/** \`let fv_link = …;\`: a \`<RouterLink>\`'s \`to\` resolved from the reader's route. */
 export function resolveLink(s, e, to) {
     if (to.type !== "ObjectExpression") {
         const target = expr(s, to);
@@ -56,7 +54,6 @@ export function resolveLink(s, e, to) {
     }
     e.open("let fv_link =");
     const query = parts.get("query");
-    // The query, built only when the location has one.
     const search = query ? "&fv_search" : '""';
     if (query) {
         e.stmt("let mut fv_search = String::new();");
@@ -67,7 +64,6 @@ export function resolveLink(s, e, to) {
                 fail(s.comp, "a query holds plain keys", p);
             const key = String(p.key.name ?? p.key.value);
             const v = expr(s, p.value);
-            // An absent value leaves its key out, as `undefined` does.
             if (v.ty.k === "undef")
                 continue;
             if (v.ty.k === "opt") {
@@ -93,7 +89,7 @@ export function resolveLink(s, e, to) {
     if (name) {
         if (name.type !== "StringLiteral")
             fail(s.comp, "a `to`'s `name` is a string literal, checked against the routes", name);
-        const route = allRoutes(ctx.routes).find((r) => r.name === name.value);
+        const route = allRoutes(runOf(router).routes).find((r) => r.name === name.value);
         if (!route)
             fail(s.comp, `no route is called \`${name.value}\``, name);
         const wanted = routeParams(route.fullPath);
@@ -130,8 +126,6 @@ export function resolveLink(s, e, to) {
         fail(s.comp, "a `to` object has a `name` or a `path`", to);
     e.close(";");
 }
-/** \`<RouterLink to="...">\` as vue-router renders it: \`aria-current\` and the active classes when it
- * points where the reader is, then \`href\`, then the link's own class and attributes. */
 export function routerLink(s, e, n) {
     const [, rawProps, slots, , slotScopeId] = n.arguments;
     let props = rawProps;
@@ -161,18 +155,11 @@ export function routerLink(s, e, n) {
     const to = fields.get("to");
     if (!to)
         fail(s.comp, "`<RouterLink>` needs `to`", n);
-    /* vue-router renders the link from virtual nodes (`renderElementVNode`). The `<a>` takes the ids
-     * of a component's root after its attributes: what the parent passes on when the link is its
-     * root, the id of the component that wrote it, and the slot scope ids around it — as
-     * `scope_attrs` gathers them. Its content takes that component's id, which the compiled template
-     * spells out, and the slot scope ids again, each once: unlike the raw `_scopeId` the compiled
-     * elements would write, so an element there is refused when there are some. */
     const passed = (rawProps?.type === "Identifier" && rawProps.name === "_attrs") || rawProps?.arguments?.some((a) => a.type === "Identifier" && a.name === "_attrs");
     const base = passed ? s.attrs : null;
     const slotted = slotScopeId ? s.sid : null;
-    const scopeId = s.comp.scopeId;
+    const scopeId = scopeIdOf(s.comp);
     const content = slots?.type === "ObjectExpression" ? slots.properties.filter((p) => (p.key?.name ?? p.key?.value) !== "_").map((p) => p.value) : [];
-    /** Whether the link's content holds a node that `is` picks out. */
     const holds = (is) => {
         const within = (x) => !!x && typeof x === "object" && (is(x) || Object.values(x).some(within));
         return content.some((c) => slotBody(s, c).some(within));
@@ -181,13 +168,11 @@ export function routerLink(s, e, n) {
     if (slotted !== null && holds(writesScopeId)) {
         fail(s.comp, "an element inside a `<RouterLink>` in slot content given a slot scope id: vue-router writes those ids by rules of its own", to);
     }
-    // A `<slot>` there is rendered as a virtual node too, which passes its own slot scope ids.
     if ((scopeId !== null || slotted !== null || base !== null) && holds((x) => x.type === "CallExpression" && x.callee.name === "_ssrRenderSlot")) {
         fail(s.comp, "a `<slot>` inside a `<RouterLink>` that takes scope ids: vue-router renders it by rules of its own", to);
     }
-    if (!ctx.routes)
+    if (!runOf(router).routes)
         fail(s.comp, `\`<RouterLink>\` needs \`routes\` in ${CONFIG_FILE}: the paths it resolves against`, n);
-    /** A literal-string prop, which the class names and `aria-current` must be. */
     const literal = (key, fallback) => {
         const v = fields.get(key);
         if (!v)
@@ -196,20 +181,32 @@ export function routerLink(s, e, n) {
             fail(s.comp, `\`${key}\` on \`<RouterLink>\` is a string literal`, v);
         return v.value;
     };
-    const activeClass = literal("activeClass", ctx.linkActive);
-    const exactClass = literal("exactActiveClass", ctx.linkExactActive);
+    const activeClass = literal("activeClass", runOf(router).linkActive);
+    const exactClass = literal("exactActiveClass", runOf(router).linkExactActive);
     const ariaCurrent = literal("ariaCurrentValue", "page");
     e.open("");
     resolveLink(s, e, to);
     e.lit("<a");
+    const parts = mergedParts(rawProps);
+    const passedOn = (p) => s.fallthrough !== null && ((isAttrs(p) && s.comp.inheritAttrs) || dollarAttrs(s, p));
+    const fallsThrough = parts.some(passedOn);
+    if (fallsThrough) {
+        for (const name of s.comp.attrNames) {
+            const key = camelize(name);
+            if ((ROUTER_LINK_PROPS.has(key) && key !== "class") || ROUTER_LINK_INERT.has(key) || key === "custom" || key === "viewTransition") {
+                fail(s.comp, `\`${name}\`, an attribute ${s.comp.name} may be passed, would reach its \`<RouterLink>\` as a prop`, n);
+            }
+            if (key === "href" || key === "ariaCurrent")
+                fail(s.comp, `\`${name}\`, an attribute ${s.comp.name} may be passed, would replace its \`<RouterLink>\`'s own`, n);
+        }
+        e.open(`if ${s.fallthrough}.is_empty()`);
+    }
     e.open("if fv_link.exact");
     e.lit(` aria-current="${escapeHtml(ariaCurrent)}"`);
     e.close();
     e.lit(' href="');
     e.stmt("fv::escape_into(out, &fv_link.href);");
     e.lit('" class="');
-    // `{ [activeClass]: isActive, [exactActiveClass]: isExactActive }`. When the two are one class,
-    // the later key wins: the class goes with `isExactActive`.
     const linkItems = activeClass === exactClass
         ? [`if fv_link.exact { ${rustStr(exactClass)} } else { "" }`]
         : [`if fv_link.active { ${rustStr(activeClass)} } else { "" }`, `if fv_link.exact { ${rustStr(exactClass)} } else { "" }`];
@@ -233,6 +230,38 @@ export function routerLink(s, e, n) {
     }
     else
         e.stmt(`out.push_str(&fv::scope_attrs(${base ?? '""'}, ${scopeId === null ? '""' : rustStr(scopeId)}, ${slotted ?? '""'}));`);
+    if (fallsThrough) {
+        e.close(" else {");
+        const sources = [];
+        for (const p of parts) {
+            if (passedOn(p))
+                sources.push(`${s.fallthrough}.list()`);
+            else if (p.type === "ObjectExpression") {
+                const entries = p.properties
+                    .filter((q) => {
+                    const raw = q.key?.type === "Identifier" ? q.key.name : String(q.key?.value);
+                    const key = camelize(raw);
+                    return key === "class" || (!ROUTER_LINK_PROPS.has(key) && !ROUTER_LINK_INERT.has(key) && !/^on[^a-z]/.test(raw) && !IGNORED_PROPS.has(raw));
+                })
+                    .map((q) => {
+                    const raw = q.key.type === "Identifier" ? q.key.name : String(q.key.value);
+                    return `(${rustStr(raw)}, ${attrOf(s, raw, q.value, "vnode")})`;
+                });
+                if (entries.length)
+                    sources.push(`&[${entries.join(", ")}]`);
+            }
+        }
+        const ids = base === null && slotted === null
+            ? rustStr(scopeId === null ? "" : ` ${scopeId}`)
+            : `&fv::scope_attrs(${base ?? '""'}, ${scopeId === null ? '""' : rustStr(scopeId)}, ${slotted ?? '""'})`;
+        const linkOwn = [
+            `("aria-current", if fv_link.exact { fv::Attr::str(${rustStr(ariaCurrent)}) } else { fv::Attr::Undefined })`,
+            '("href", fv::Attr::str(&fv_link.href))',
+            `("class", fv::Attr::from(fv::class_names(&[${linkItems.join(", ")}])))`,
+        ];
+        e.stmt(`fv::attrs_into(out, &[&[${linkOwn.join(", ")}], &fv::merge_props(&[${sources.join(", ")}])], 1, ${ids});`);
+        e.close();
+    }
     e.lit(">");
     if (slots && slots.type !== "NullLiteral") {
         if (slots.type !== "ObjectExpression")
@@ -249,24 +278,3 @@ export function routerLink(s, e, n) {
     e.lit("</a>");
     e.close();
 }
-/** The routes file: vue-router paths, each a string or `{ "path", "name" }`. */
-export function readRoutes(root, file) {
-    const raw = JSON.parse(readFileSync(join(root, file), "utf8"));
-    if (!Array.isArray(raw))
-        throw new GenError(`${file} lists the routes in an array`);
-    const read = (list, parent) => list.map((r) => {
-        const o = (typeof r === "string" ? { path: r } : r);
-        if (typeof o?.path !== "string" || (o.name !== undefined && typeof o.name !== "string") || (o.children !== undefined && !Array.isArray(o.children))) {
-            throw new GenError(`${file}: a route is a path, or \`{ "path": "…", "name": "…", "children": [ … ] }\``);
-        }
-        // A child's path joins its parent's unless it starts with `/`; an empty one is the parent's.
-        const fullPath = parent === null || o.path.startsWith("/") ? o.path : `${parent}${parent.endsWith("/") || o.path === "" ? "" : "/"}${o.path}`;
-        const def = { path: o.path, fullPath };
-        if (o.name !== undefined)
-            def.name = o.name;
-        if (o.children)
-            def.children = read(o.children, fullPath);
-        return def;
-    });
-    return read(raw, null);
-}

package/dist/plugins/router.d.ts

@@ -0,0 +1,42 @@
+import { type Component } from "../model.ts";
+import { type Plugin } from "../plugin.ts";
+declare module "../model.ts" {
+    interface PluginTys {
+        route: {
+            k: "route";
+        };
+        params: {
+            k: "params";
+        };
+        queryobj: {
+            k: "queryobj";
+        };
+        query: {
+            k: "query";
+        };
+    }
+}
+export interface RouteDef {
+    path: string;
+    name?: string;
+    children?: RouteDef[];
+    fullPath: string;
+}
+export declare function allRoutes(routes: RouteDef[]): RouteDef[];
+interface RouterRun {
+    routes: RouteDef[] | null;
+    file: string | null;
+    base: string;
+    linkActive: string;
+    linkExactActive: string;
+    readers: Set<Component>;
+    views: Set<Component>;
+}
+interface RouterScope {
+    useRoute: string | null;
+    components: Map<string, "RouterLink" | "RouterView">;
+}
+export declare function readRoutes(root: string, file: string): RouteDef[];
+export declare function routesSource(routes: RouteDef[], file: string): string;
+export declare const router: Plugin<RouterRun, RouterScope>;
+export {};

package/dist/plugins/router.js

@@ -0,0 +1,256 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { BOOL, fail, GenError, opt, rustStr, STR } from "../model.js";
+import { CONFIG_FILE } from "../context.js";
+import { expr } from "../expr.js";
+import { boolOf, pathOf } from "../narrowing.js";
+import { atom, bare, not, strArg } from "../parens.js";
+import { runOf, scopeOf } from "../plugin.js";
+import { header } from "../rust.js";
+import { scopeIdOf } from "./scoped.js";
+import { routerLink } from "./router-link.js";
+export function allRoutes(routes) {
+    return routes.flatMap((r) => [r, ...allRoutes(r.children ?? [])]);
+}
+function typeofString(n) {
+    if (n.type !== "BinaryExpression" || (n.operator !== "===" && n.operator !== "!=="))
+        return null;
+    const isTypeof = (m) => m.type === "UnaryExpression" && m.operator === "typeof";
+    const isString = (m) => m.type === "StringLiteral" && m.value === "string";
+    const target = isTypeof(n.left) && isString(n.right) ? n.left.argument : isTypeof(n.right) && isString(n.left) ? n.right.argument : null;
+    return target ? { target, negated: n.operator === "!==" } : null;
+}
+function theRoute(s, n) {
+    if (!runOf(router).routes)
+        fail(s.comp, `reading the route needs \`routes\` in ${CONFIG_FILE}`, n);
+    runOf(router).readers.add(s.comp);
+    return { code: "fv_route", ty: { k: "route" } };
+}
+function routeField(s, base, prop, n) {
+    if (base.ty.k === "params") {
+        return { code: `fv_route.param(${rustStr(prop)})`, ty: opt(STR) };
+    }
+    if (base.ty.k === "queryobj")
+        return { code: `fv_route.query(${rustStr(prop)})`, ty: { k: "query" } };
+    switch (prop) {
+        case "path":
+            return { code: "fv_route.path()", ty: STR };
+        case "hash":
+            return { code: "fv_route.hash()", ty: STR };
+        case "name":
+            return { code: "fv_route.name()", ty: opt(STR) };
+        case "params":
+            return { code: "fv_route", ty: { k: "params" } };
+        case "query":
+            return { code: "fv_route", ty: { k: "queryobj" } };
+        case "fullPath":
+            return { code: "fv_route.full_path()", ty: STR };
+    }
+    return fail(s.comp, `\`route.${prop}\` is not available on the server: \`path\`, \`fullPath\`, \`hash\`, \`name\`, \`params\` and \`query\` are`, n);
+}
+export function readRoutes(root, file) {
+    const raw = JSON.parse(readFileSync(join(root, file), "utf8"));
+    if (!Array.isArray(raw))
+        throw new GenError(`${file} lists the routes in an array`);
+    const read = (list, parent) => list.map((r) => {
+        const o = (typeof r === "string" ? { path: r } : r);
+        if (typeof o?.path !== "string" || (o.name !== undefined && typeof o.name !== "string") || (o.children !== undefined && !Array.isArray(o.children))) {
+            throw new GenError(`${file}: a route is a path, or \`{ "path": "…", "name": "…", "children": [ … ] }\``);
+        }
+        const fullPath = parent === null || o.path.startsWith("/") ? o.path : `${parent}${parent.endsWith("/") || o.path === "" ? "" : "/"}${o.path}`;
+        const def = { path: o.path, fullPath };
+        if (o.name !== undefined)
+            def.name = o.name;
+        if (o.children)
+            def.children = read(o.children, fullPath);
+        return def;
+    });
+    return read(raw, null);
+}
+function routeDefs(routes, depth) {
+    const pad = "    ".repeat(depth);
+    return routes
+        .map((r) => {
+        const name = r.name === undefined ? "None" : `Some(${rustStr(r.name)})`;
+        const children = r.children?.length ? `&[\n${routeDefs(r.children, depth + 1)}\n${pad}]` : "&[]";
+        return `${pad}ferrovue::RouteDef { path: ${rustStr(r.path)}, name: ${name}, children: ${children} },`;
+    })
+        .join("\n");
+}
+export function routesSource(routes, file) {
+    return `${header(file, "the routes file")}
+//! The app's routes: what \`<RouterLink>\` resolves against and \`useRoute()\` reads.
+
+/// Each route: its vue-router path, its name if it has one, and the routes nested in it.
+pub const ROUTES: &[ferrovue::RouteDef<'static>] = &[
+${routeDefs(routes, 1)}
+];
+
+/// Every route's full path, nested ones included.
+pub const PATHS: &[&str] = &[
+${allRoutes(routes).map((r) => `    ${rustStr(r.fullPath)},`).join("\n")}
+];
+
+/// The history's base, which every link's \`href\` starts with.
+pub const BASE: &str = ${rustStr(runOf(router).base)};
+
+/// The router these routes make: build it once, and resolve each request's location with
+/// [\`ferrovue::Router::at\`].
+pub fn router() -> ferrovue::Router {
+    ferrovue::Router::tree(ROUTES).with_base(BASE)
+}
+`;
+}
+export const router = {
+    name: "router",
+    configure(config, root) {
+        const r = config.router ?? (config.routes ? { routes: config.routes } : null);
+        return {
+            routes: r ? readRoutes(root, r.routes) : null,
+            file: r?.routes ?? null,
+            base: r?.base ?? "",
+            linkActive: r?.linkActiveClass ?? "router-link-active",
+            linkExactActive: r?.linkExactActiveClass ?? "router-link-exact-active",
+            readers: new Set(),
+            views: new Set(),
+        };
+    },
+    compiled(comp, code, script) {
+        const imported = (exported) => script.some((st) => st.type === "ImportDeclaration" && st.source.value === "vue-router" &&
+            st.specifiers.some((sp) => sp.type === "ImportSpecifier" && (sp.imported.name ?? sp.imported.value) === exported));
+        const run = runOf(router);
+        if (code.includes('_resolveComponent("RouterLink")') || imported("RouterLink") || code.includes("_ctx.$route"))
+            run.readers.add(comp);
+        if (code.includes('_resolveComponent("RouterView")') || imported("RouterView"))
+            run.views.add(comp);
+    },
+    scope: () => ({ useRoute: null, components: new Map() }),
+    scriptImport(s, st, from) {
+        if (from !== "vue-router")
+            return false;
+        const own = scopeOf(router, s);
+        for (const sp of st.specifiers) {
+            const name = sp.type === "ImportSpecifier" ? (sp.imported.name ?? sp.imported.value) : null;
+            if (name === "useRoute")
+                own.useRoute = sp.local.name;
+            else if (name === "RouterLink" || name === "RouterView")
+                own.components.set(sp.local.name, name);
+            else
+                s.clientOnly.set(sp.local.name, `\`${name}\` from vue-router does not run on the server`);
+        }
+        return true;
+    },
+    scriptBinding(s, d) {
+        const { useRoute } = scopeOf(router, s);
+        const init = d.init;
+        if (useRoute === null || d.id.type !== "Identifier" || init?.type !== "CallExpression" || init.callee.type !== "Identifier" || init.callee.name !== useRoute)
+            return false;
+        s.setup.set(d.id.name, theRoute(s, d));
+        return true;
+    },
+    global: (s, name, n) => (name === "$route" ? theRoute(s, n) : null),
+    member(s, base, prop, n, computed) {
+        if (base.ty.k === "params" || base.ty.k === "queryobj" || (base.ty.k === "route" && !computed))
+            return routeField(s, base, prop, n);
+        return null;
+    },
+    equality(s, n) {
+        const tested = typeofString(n);
+        if (!tested)
+            return null;
+        const v = expr(s, tested.target);
+        if (v.ty.k !== "query")
+            fail(s.comp, '`typeof` tests a query value only, as `typeof route.query.q === "string"`', n);
+        const one = `${atom(v.code)}.attr_value().is_some()`;
+        return boolOf(tested.negated ? not(one) : one);
+    },
+    presence(s, n) {
+        const t = typeofString(n);
+        if (!t)
+            return undefined;
+        const path = pathOf(t.target);
+        const v = expr(s, t.target);
+        if (path === null || v.ty.k !== "query")
+            return null;
+        const option = `${atom(v.code)}.attr_value()`;
+        return { path, of: STR, negated: t.negated, truthy: false, option, present: `${option}.is_some()`, pattern: (name) => `let Some(${name}) = ${option}` };
+    },
+    values: {
+        describe: (ty) => (ty.k === "query" ? "a query value" : undefined),
+        truthy: (v) => (v.ty.k === "query" ? `${atom(v.code)}.truthy()` : undefined),
+        interpolate(e, v) {
+            if (v.ty.k !== "query")
+                return false;
+            e.stmt(`${atom(v.code)}.write_display(out);`);
+            return true;
+        },
+        unbindable: (ty) => ty.k === "query"
+            ? { what: "a query value, which is an array when its key is repeated", fix: 'narrow it to one string, as `typeof route.query.q === "string" ? route.query.q : ""`' }
+            : undefined,
+        nullish(s, a, b, n) {
+            if (a.ty.k !== "query")
+                return undefined;
+            if (b.ty.k !== "str")
+                fail(s.comp, "`??` after a query value takes a string", n);
+            return { code: `${atom(a.code)}.or(${bare(b.code)})`, ty: a.ty };
+        },
+        equals(a, b) {
+            if (a.ty.k === "query" && b.ty.k === "str")
+                return `${atom(a.code)}.is(${strArg(b.code)})`;
+            if (b.ty.k === "query" && a.ty.k === "str")
+                return `${atom(b.code)}.is(${strArg(a.code)})`;
+            if (a.ty.k === "query" && b.ty.k === "undef")
+                return `${atom(a.code)}.is_undefined()`;
+            if (b.ty.k === "query" && a.ty.k === "undef")
+                return `${atom(b.code)}.is_undefined()`;
+            return undefined;
+        },
+        isArray: (v) => (v.ty.k === "query" ? { code: `${atom(v.code)}.is_array()`, ty: BOOL } : undefined),
+    },
+    resolveComponent(s, local, name) {
+        if (name !== "RouterLink" && name !== "RouterView")
+            return false;
+        scopeOf(router, s).components.set(local, name);
+        return true;
+    },
+    component(s, e, n) {
+        const target = n.arguments[0];
+        const { components } = scopeOf(router, s);
+        const routed = target.type === "Identifier"
+            ? components.get(target.name)
+            : target.type === "MemberExpression" && target.object.name === "$setup"
+                ? components.get(target.computed ? target.property.value : target.property.name)
+                : undefined;
+        if (routed === "RouterLink")
+            routerLink(s, e, n);
+        else if (routed === "RouterView") {
+            if (scopeIdOf(s.comp) !== null)
+                fail(s.comp, "`<RouterView>` in a component with `<style scoped>` gives the page this component's id, which the server's page does not carry", n);
+            e.stmt("fv_slots.router_view.render_to(out);");
+        }
+        else
+            return false;
+        return true;
+    },
+    child(s, child, n) {
+        if (runOf(router).views.has(child)) {
+            fail(s.comp, `${child.name} holds \`<RouterView>\`: the server renders it at the top, never as a child`, n);
+        }
+    },
+    slotFields: (comp) => (runOf(router).views.has(comp) ? [{ js: "routerView", rust: "router_view", doc: "The page `<RouterView>` shows." }] : []),
+    params: [
+        {
+            name: "fv_route",
+            ty: "&fv::Route<'_>",
+            pageTy: "&'p fv::Route<'p>",
+            reads: (c) => runOf(router).readers.has(c),
+            test: { lines: ["let router = route_table::router();", "let route = router.at(&fixture.route);"], arg: "&route", fixture: true },
+            fixtureField: '    #[serde(rename = "$route", default = "Fixture::root")]\n    route: String,',
+            fixtureDefault: '    fn root() -> String {\n        "/".to_owned()\n    }',
+        },
+    ],
+    modules() {
+        const { routes, file } = runOf(router);
+        return routes ? [["route_table.rs", routesSource(routes, file)]] : [];
+    },
+};

package/dist/plugins/scoped.d.ts

@@ -0,0 +1,12 @@
+import { type Component } from "../model.ts";
+import { type ScopeIdMode } from "../context.ts";
+import { type Plugin } from "../plugin.ts";
+interface ScopedRun {
+    mode: ScopeIdMode;
+    viteRoot: string;
+    ids: Map<Component, string>;
+    slotted: Set<Component>;
+}
+export declare function scopeIdOf(comp: Component): string | null;
+export declare const scoped: Plugin<ScopedRun>;
+export {};

package/dist/{scoped.js → plugins/scoped.js}

@@ -1,20 +1,23 @@
-/* Where scope ids reach: which components' roots a parent may hand ids to, and which components'
- * slot content may be given a slot scope id. Both decide a generated signature — `render` taking
- * `fv_attrs`, slot content taking `fv_sid` — so they are worked out for every component before any
- * is generated.
- *
- * With `<style scoped>`, Vue's server renderer writes the component's id onto each of its elements
- * (the compiled template spells it out) and hands ids to a child component's root through the
- * child's `_attrs`: the id of the component that created it, what its parent passes on when the
- * child is that parent's root, and the slot scope ids of the slot content it is rendered in
- * (`renderComponentSubTree`). A component with `:slotted()` styles gives its slot content
- * `data-v-…-s` as well, which the content writes onto its elements as `_scopeId`. */
 import { parse as parseJs } from "@babel/parser";
-/** The child components and outlets in one component's compiled template. */
+import { createHash } from "node:crypto";
+import { relative, resolve as resolvePath, sep } from "node:path";
+import { fail, rustStr } from "../model.js";
+import {} from "../context.js";
+import { runOf } from "../plugin.js";
+export function scopeIdOf(comp) {
+    return runOf(scoped).ids.get(comp) ?? null;
+}
+function scopeHash(file, source) {
+    const { mode, viteRoot } = runOf(scoped);
+    const path = relative(viteRoot, resolvePath(file)).split(sep).join("/");
+    return createHash("sha256")
+        .update(mode === "filepath" ? path : path + source)
+        .digest("hex")
+        .slice(0, 8);
+}
 function flowOf(comp, ssr, children) {
     const calls = [];
     const outlets = [];
-    // `const _component_Tree = _resolveComponent("Tree", true)`: the component itself, by name.
     const self = new Set();
     const resolve = (target) => {
         if (target?.type === "MemberExpression" && target.object.name === "$setup") {
@@ -41,7 +44,6 @@ function flowOf(comp, ssr, children) {
                 const child = resolve(a[0]);
                 if (child)
                     calls.push({ child, passesAttrs: mentions(a[1], "_attrs"), within: a[4] ? within : null });
-                // Slot content given to the child: its `_scopeId` is what the child's outlets pass.
                 walk(a[2], child);
                 return;
             }
@@ -58,11 +60,7 @@ function flowOf(comp, ssr, children) {
     walk(parseJs(ssr, { sourceType: "module" }).program, null);
     return { calls, outlets };
 }
-/** Set every component's `inherits` and `passesSlotIds`, each a least fixed point: a component's
- * slot content may be given an id when one of its outlets passes one, or forwards what the slot
- * content it sits in was given; a root may be handed ids by a scoped parent, by a parent that
- * passes on what it inherits, or by slot content that may be given an id. */
-export function scopeFlow(read) {
+function scopeFlow(read) {
     const flows = read.map((r) => ({ comp: r.comp, ...flowOf(r.comp, r.ssr, r.children) }));
     const byName = new Map(read.map((r) => [r.comp.name, r.comp]));
     const passes = (name) => (name !== null && byName.get(name)?.passesSlotIds) ?? false;
@@ -81,10 +79,47 @@ export function scopeFlow(read) {
                 const child = byName.get(c.child);
                 if (!child || child.inherits)
                     continue;
-                if (f.comp.scopeId !== null || (c.passesAttrs && f.comp.inherits && child.inheritAttrs) || passes(c.within)) {
+                if (scopeIdOf(f.comp) !== null || (c.passesAttrs && f.comp.inherits && child.inheritAttrs) || passes(c.within)) {
                     child.inherits = changed = true;
                 }
             }
         }
     }
 }
+function childIds(s, child, passesAttrs, inSlot, n) {
+    const base = passesAttrs && child.inheritAttrs ? s.attrs : null;
+    const own = scopeIdOf(s.comp);
+    const slotted = inSlot ? s.sid : null;
+    let code;
+    if (base === null && slotted === null)
+        code = own === null ? null : rustStr(` ${own}`);
+    else if (own === null && slotted === null)
+        code = base;
+    else
+        code = `&fv::scope_attrs(${base ?? '""'}, ${own === null ? '""' : rustStr(own)}, ${slotted ?? '""'})`;
+    if (code !== null && !child.inherits)
+        fail(s.comp, `${child.name} is handed scope ids its render does not take`, n);
+    return code;
+}
+export const scoped = {
+    name: "scoped",
+    configure: (config, root) => ({
+        mode: config.scopeId ?? "filepath-source",
+        viteRoot: resolvePath(root, config.viteRoot ?? "."),
+        ids: new Map(),
+        slotted: new Set(),
+    }),
+    sfc(comp, descriptor, file, source) {
+        const run = runOf(scoped);
+        if (descriptor.styles.some((st) => st.scoped))
+            run.ids.set(comp, `data-v-${scopeHash(file, source)}`);
+        if (descriptor.slotted)
+            run.slotted.add(comp);
+    },
+    templateOptions(comp) {
+        const id = scopeIdOf(comp);
+        return { id: id ?? comp.name, scoped: id !== null, slotted: runOf(scoped).slotted.has(comp) };
+    },
+    analyse: (read) => scopeFlow(read),
+    childIds,
+};

package/dist/plugins/shared-types.d.ts

@@ -0,0 +1,2 @@
+import { type Plugin } from "../plugin.ts";
+export declare const sharedTypes: Plugin;

package/dist/plugins/shared-types.js

@@ -0,0 +1,7 @@
+import { ctx } from "../context.js";
+import { typesSource } from "../rust.js";
+import {} from "../plugin.js";
+export const sharedTypes = {
+    name: "types",
+    modules: () => (ctx.typeStructs.size ? [["types.rs", typesSource()]] : []),
+};