ferrovue 0.2.0 → 0.3.0

package/dist/cli.js

@@ -1,14 +1,35 @@
 #!/usr/bin/env node
-/* `ferrovue` — compile the project's components, run from its root.
+/* `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 --watch  write them, then again whenever a component, store, type file, the routes
- *                     or the configuration changes, until interrupted */
-import { readFileSync, readdirSync, watch } from "node:fs";
-import { join, relative, sep } from "node:path";
-import { GenError, generate, loadConfig, write } from "./compiler.js";
+ *   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";
+import { unifiedDiff } from "./diff.js";
 const root = process.cwd();
+const HELP = `Usage: ferrovue [command] [options]
+
+Compile Vue components to Rust render functions, run from the project root.
+
+Commands:
+  init                     scaffold starter ferrovue.config.json and components
+
+Options:
+      --check              check that generated files match committed files without writing
+  -d, --diff               show unified diff of changes when checking (use with --check)
+      --watch              watch components, stores, routes and config for changes and regenerate
+  -c, --config <path>      path to configuration file (default: ferrovue.config.json)
+  -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)
@@ -16,7 +37,41 @@ function report(e) {
     else
         throw e;
 }
-function check(config) {
+function initProject(targetRoot, configPath) {
+    const configFile = configPath ? resolve(targetRoot, configPath) : join(targetRoot, CONFIG_FILE);
+    if (existsSync(configFile)) {
+        console.error(`error: configuration file already exists: ${relative(targetRoot, configFile) || CONFIG_FILE}`);
+        return 1;
+    }
+    const defaultComponents = "components";
+    const defaultOut = "src/generated";
+    mkdirSync(dirname(configFile), { recursive: true });
+    const config = {
+        components: defaultComponents,
+        out: defaultOut,
+    };
+    writeFileSync(configFile, JSON.stringify(config, null, 2) + "\n");
+    console.log(`created ${relative(targetRoot, configFile) || CONFIG_FILE}`);
+    const compDir = join(targetRoot, defaultComponents);
+    mkdirSync(compDir, { recursive: true });
+    const helloVue = join(compDir, "Hello.vue");
+    if (!existsSync(helloVue)) {
+        writeFileSync(helloVue, `<script setup lang="ts">
+defineProps<{ name: string }>();
+</script>
+
+<template>
+  <p>Hello, {{ name }}!</p>
+</template>
+`);
+        console.log(`created ${join(defaultComponents, "Hello.vue")}`);
+    }
+    const outDir = join(targetRoot, defaultOut);
+    mkdirSync(outDir, { recursive: true });
+    console.log("\nNext steps:\n  1. Run `ferrovue` to generate Rust render functions into src/generated\n  2. In your Rust crate, declare `mod generated;` to use them");
+    return 0;
+}
+function check(config, showDiff = false) {
     const want = generate(root, config);
     const dir = join(root, config.out);
     let have = [];
@@ -36,10 +91,24 @@ function check(config) {
     });
     const extra = have.filter((name) => !want.has(name));
     if (stale.length || extra.length) {
-        for (const name of stale)
+        const committed = (name) => {
+            try {
+                return readFileSync(join(dir, name), "utf8");
+            }
+            catch {
+                return "";
+            }
+        };
+        for (const name of stale) {
             console.error(`stale: ${config.out}/${name}`);
-        for (const name of extra)
+            if (showDiff)
+                console.error(unifiedDiff(`${config.out}/${name}`, committed(name), want.get(name)));
+        }
+        for (const name of extra) {
             console.error(`not generated: ${config.out}/${name}`);
+            if (showDiff)
+                console.error(unifiedDiff(`${config.out}/${name}`, committed(name), ""));
+        }
         console.error("run `ferrovue` to regenerate");
         return 1;
     }
@@ -53,10 +122,10 @@ function once(config) {
 }
 /** 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() {
+function watchProject(configPath) {
     const run = () => {
         try {
-            once(loadConfig(root));
+            once(loadConfig(root, configPath));
         }
         catch (e) {
             report(e);
@@ -66,7 +135,7 @@ function watchProject() {
     const ignored = (file) => {
         let out = "";
         try {
-            out = loadConfig(root).out;
+            out = loadConfig(root, configPath).out;
         }
         catch {
             // A broken configuration ignores nothing; the next run reports it.
@@ -88,12 +157,54 @@ function watchProject() {
     console.log("watching for changes (Ctrl-C to stop)");
 }
 try {
-    if (process.argv.includes("--watch"))
-        watchProject();
-    else if (process.argv.includes("--check"))
-        process.exitCode = check(loadConfig(root));
-    else
-        once(loadConfig(root));
+    const rawArgs = process.argv.slice(2);
+    let configPath;
+    const args = [];
+    for (let i = 0; i < rawArgs.length; i++) {
+        const arg = rawArgs[i];
+        if (arg === "-c" || arg === "--config") {
+            if (i + 1 >= rawArgs.length || rawArgs[i + 1].startsWith("-")) {
+                console.error(`error: option '${arg}' requires an argument`);
+                process.exit(1);
+            }
+            configPath = rawArgs[++i];
+        }
+        else if (arg.startsWith("--config=")) {
+            configPath = arg.slice("--config=".length);
+        }
+        else {
+            args.push(arg);
+        }
+    }
+    const known = new Set(["init", "--check", "--diff", "-d", "--watch", "-v", "--version", "-h", "--help"]);
+    const unknown = args.find((a) => !known.has(a));
+    if (unknown !== undefined) {
+        console.error(`error: unknown option or command '${unknown}'\n\nRun \`ferrovue --help\` for usage.`);
+        process.exit(1);
+    }
+    if ((args.includes("--diff") || args.includes("-d")) && !args.includes("--check")) {
+        console.error("error: '--diff' requires '--check'");
+        process.exit(1);
+    }
+    if (args.includes("--version") || args.includes("-v")) {
+        console.log(VERSION);
+    }
+    else if (args.includes("--help") || args.includes("-h")) {
+        console.log(HELP.trimEnd());
+    }
+    else if (args.includes("init")) {
+        process.exitCode = initProject(root, configPath);
+    }
+    else if (args.includes("--watch")) {
+        watchProject(configPath);
+    }
+    else if (args.includes("--check")) {
+        const showDiff = args.includes("--diff") || args.includes("-d");
+        process.exitCode = check(loadConfig(root, configPath), showDiff);
+    }
+    else {
+        once(loadConfig(root, configPath));
+    }
 }
 catch (e) {
     report(e);

package/dist/client.d.ts

@@ -18,6 +18,14 @@ export interface MountOptions {
      * those given or its props are malformed. Warns on the console by default. */
     onError?: (element: Element, problem: string) => void;
 }
+/** A component, or a function that loads one — `() => import("./Counter.vue")` — so that the code
+ * of an island not on the page is never fetched. A function is taken for a loader as vue-router
+ * takes one for a lazy route: unless it has `props` or `displayName`, which mark a functional
+ * component, or `__vccOpts`, a class component. `ferrovue/islands` maps the name of every island
+ * to a loader. */
+export type IslandComponent = Component | (() => Promise<Component | {
+    default: Component;
+}>);
 /** The islands mounted. */
 export interface Islands {
     /** One app per island, in document order. */
@@ -27,5 +35,6 @@ export interface Islands {
 }
 /** Hydrate every island on the page: each `<div data-island="Name" data-props="…">` that
  * `Html::island` wrote becomes an app of the component of that name, given the props the server
- * rendered it with, mounted where it is. */
-export declare function mountIslands(components: Record<string, Component>, options?: MountOptions): Promise<Islands>;
+ * rendered it with, mounted where it is. A loader is called only for an island the page holds, all
+ * of them at once, and the islands mount in document order once every one has loaded. */
+export declare function mountIslands(components: Record<string, IslandComponent>, options?: MountOptions): Promise<Islands>;

package/dist/client.js

@@ -1,31 +1,66 @@
 /* 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";
+    const tag = JSON.parse(`"${escaped}"`);
+    const quoted = text.replace(BARE, (match) => (match.startsWith('"') ? match : `"${escaped}${match}"`));
+    return JSON.parse(quoted, (_key, value) => (typeof value === "string" && value.startsWith(tag) ? NON_FINITE[value.slice(tag.length)] : value));
+}
 /** Give Pinia the state the server rendered with — what `ferrovue::state_script_into` wrote — before
  * the app mounts, so every store starts from it and the hydrated markup agrees with the server's. */
 export function hydrateState(pinia, id = "__pinia", doc = document) {
     const text = doc.getElementById(id)?.textContent;
     if (text)
-        pinia.state.value = JSON.parse(text);
+        pinia.state.value = parseJson(text);
 }
 /** Hydrate every island on the page: each `<div data-island="Name" data-props="…">` that
  * `Html::island` wrote becomes an app of the component of that name, given the props the server
- * rendered it with, mounted where it is. */
+ * rendered it with, mounted where it is. A loader is called only for an island the page holds, all
+ * of them at once, and the islands mount in document order once every one has loaded. */
 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));
-    if (options.router)
-        await options.router.isReady();
+    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 ?? "";
+        if (Object.hasOwn(components, name) && !loading.has(name))
+            loading.set(name, load(components[name]));
+    }
+    const [loaded] = await Promise.all([
+        Promise.all([...loading].map(async ([name, pending]) => [name, await pending])).then((pairs) => new Map(pairs)),
+        options.router?.isReady(),
+    ]);
     const apps = [];
-    for (const el of Array.from(root.querySelectorAll("[data-island]"))) {
+    for (const el of elements) {
         const name = el.dataset.island ?? "";
-        const component = components[name];
+        const component = loaded.get(name);
         if (!component) {
-            report(el, `no component called ${JSON.stringify(name)} was given`);
+            report(el, `no component called ${JSON.stringify(name)} was given (\`ferrovue/islands\` holds every component that has an \`island()\`)`);
+            continue;
+        }
+        if (component instanceof Error) {
+            report(el, `${name} did not load: ${component.message}`);
             continue;
         }
         let props;
         try {
-            props = JSON.parse(el.dataset.props ?? "{}");
+            props = parseJson(el.dataset.props ?? "{}");
         }
         catch {
             report(el, `the props of ${name} are not JSON`);
@@ -49,3 +84,16 @@ 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;
+    try {
+        const loaded = await component();
+        return typeof loaded === "object" && "default" in loaded ? loaded.default : loaded;
+    }
+    catch (e) {
+        return e instanceof Error ? e : new Error(String(e));
+    }
+}

package/dist/compiler.d.ts

@@ -10,6 +10,9 @@ export interface Written {
     changed: string[];
     /** The files removed, which the components no longer produce. */
     removed: string[];
+    /** Every component that has an `island()`, by the name `data-island` carries, with its `.vue`
+     * file relative to the root: what `ferrovue/islands` loads. */
+    islands: Record<string, string>;
 }
 /** Write what \`generate\` produces to the configured directory: only the files whose text changed,
  * so a Rust build that watches them rebuilds no more than it must, and removing what no component
@@ -17,3 +20,4 @@ export interface Written {
 export declare function write(root: string, config?: Config): Written;
 export { CONFIG_FILE, loadConfig, TYPES_MODULE, type Config, type HelperSpec, type TypeName } from "./context.ts";
 export { GenError } from "./model.ts";
+export declare const VERSION: string;

package/dist/compiler.js

@@ -24,8 +24,8 @@ import { readRoutes } from "./router.js";
 import { readStores } from "./stores.js";
 import { i18nSource, readLocales } from "./i18n.js";
 import { scopeFor } from "./script.js";
-import { scopeFlow } from "./scoped.js";
-import { componentSource, modSource, routesSource, storesSource, typesSource } from "./rust.js";
+import { attrsFlow, scopeFlow } from "./scoped.js";
+import { componentSource, isIsland, modSource, routesSource, storesSource, typesSource } from "./rust.js";
 /** Every generated file, keyed by its name in the output directory. */
 export function generate(root, config = loadConfig(root)) {
     ctx.componentsDir = config.components.replace(/\/?$/, "/");
@@ -66,9 +66,11 @@ export function generate(root, config = loadConfig(root)) {
     // 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 children = read.map((r) => scopeFor(r.comp, r.ast, components).scope.children);
+    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: children[i] })));
+    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;) {
@@ -165,7 +167,17 @@ export function write(root, config = loadConfig(root)) {
     const removed = readdirSync(target).filter((f) => f.endsWith(".rs") && !files.has(f));
     for (const f of removed)
         rmSync(join(target, f));
-    return { files: [...files.keys()], changed, removed };
+    const islands = Object.fromEntries([...ctx.components.values()].filter(isIsland).map((c) => [c.name, c.file]));
+    return { files: [...files.keys()], changed, removed, islands };
 }
 export { CONFIG_FILE, loadConfig, TYPES_MODULE } from "./context.js";
 export { GenError } from "./model.js";
+export const VERSION = (() => {
+    try {
+        const pkg = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));
+        return pkg.version ?? "unknown";
+    }
+    catch {
+        return "unknown";
+    }
+})();

package/dist/component.js

@@ -84,6 +84,8 @@ export function readComponent(file, root) {
         inheritAttrs: true,
         inherits: false,
         passesSlotIds: false,
+        attrNames: new Set(),
+        idsInAttrs: false,
     };
     comp.source = source;
     if (errors.length)
@@ -228,6 +230,17 @@ export function readComponent(file, root) {
         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;
+    if (wrapper) {
+        const inner = kids(wrapper);
+        const lone = inner.length === 1 && inner[0].type === 1 && (inner[0].tagType === 0 || inner[0].tagType === 1) && !inner[0].props.some((p) => p.type === 7 && ["if", "else-if", "else", "for"].includes(p.name));
+        if (!lone)
+            comp.attrsDropped = { type: "VueTemplate", loc: { start: { line: wrapper.loc.start.line, column: wrapper.loc.start.column - 1 } }, __fv: "source" };
+    }
     const start = descriptor.template.loc.start;
     comp.templateStart = { line: start.line, column: start.column };
     if (compiled.map)

package/dist/context.d.ts

@@ -44,7 +44,7 @@ export interface Config {
      * `v-`: `["focus", "click-outside"]`. Any other custom directive is refused, since the server
      * cannot know what its `getSSRProps` would add. */
     clientDirectives?: string[];
-    /** vue-i18n: the directory of locale files (\`en.json\`, \`nl.json\`), the locale a page renders in
+    /** vue-i18n: the directory of locale files (`en.json`, `nl.json`), the locale a page renders in
      * when it names none, and the locales a missing message falls back to. */
     i18n?: {
         messages: string;
@@ -62,7 +62,7 @@ export interface Config {
 export type ScopeIdMode = "filepath" | "filepath-source";
 export declare const CONFIG_FILE = "ferrovue.config.json";
 /** Read the project's configuration. */
-export declare function loadConfig(root: string): Config;
+export declare function loadConfig(root: string, configPath?: string): Config;
 export declare function tyOfName(name: TypeName): Ty;
 /** A route as the routes file lists it: a vue-router path, and the name it may have. */
 export interface RouteDef {

package/dist/context.js

@@ -1,16 +1,34 @@
 /* The project's configuration, and the state one `generate()` run builds up. */
 import { readFileSync } from "node:fs";
-import { join } from "node:path";
+import { join, resolve } from "node:path";
 import { BOOL, FLOAT, GenError, INT, opt, STR } from "./model.js";
 export const CONFIG_FILE = "ferrovue.config.json";
 /** Read the project's configuration. */
-export function loadConfig(root) {
-    const raw = JSON.parse(readFileSync(join(root, CONFIG_FILE), "utf8"));
+export function loadConfig(root, configPath) {
+    const filePath = configPath ? resolve(root, configPath) : join(root, CONFIG_FILE);
+    const displayName = configPath ?? CONFIG_FILE;
+    let text = "";
+    try {
+        text = readFileSync(filePath, "utf8");
+    }
+    catch (e) {
+        if (e.code === "ENOENT") {
+            throw new GenError(`cannot find \`${displayName}\` in ${root}`);
+        }
+        throw e;
+    }
+    let raw;
+    try {
+        raw = JSON.parse(text);
+    }
+    catch (e) {
+        throw new GenError(`failed to parse \`${displayName}\`: ${e.message}`);
+    }
     if (typeof raw.components !== "string" || typeof raw.out !== "string") {
-        throw new GenError(`${CONFIG_FILE} needs \`components\` and \`out\` directories`);
+        throw new GenError(`${displayName} needs \`components\` and \`out\` directories`);
     }
     if (raw.scopeId !== undefined && raw.scopeId !== "filepath" && raw.scopeId !== "filepath-source") {
-        throw new GenError(`\`scopeId\` in ${CONFIG_FILE} is "filepath" or "filepath-source", as \`@vitejs/plugin-vue\` computes it`);
+        throw new GenError(`\`scopeId\` in ${displayName} is "filepath" or "filepath-source", as \`@vitejs/plugin-vue\` computes it`);
     }
     return raw;
 }

package/dist/diff.d.ts

@@ -0,0 +1,4 @@
+/** A unified diff of a module, as \`diff -u\` writes it, with three lines of context: what
+ * \`ferrovue\` would write against what is committed. Lines the two share at the start and the end
+ * are set aside first, so that a module changed in one place is compared over that place alone. */
+export declare function unifiedDiff(path: string, before: string, after: string): string;

package/dist/diff.js

@@ -0,0 +1,77 @@
+/* `ferrovue --check --diff`: what would be written, against what is committed. */
+/** A unified diff of a module, as \`diff -u\` writes it, with three lines of context: what
+ * \`ferrovue\` would write against what is committed. Lines the two share at the start and the end
+ * are set aside first, so that a module changed in one place is compared over that place alone. */
+export function unifiedDiff(path, before, after) {
+    const lines = (text) => (text === "" ? [] : text.replace(/\n$/, "").split("\n"));
+    const a = lines(before);
+    const b = lines(after);
+    let head = 0;
+    while (head < a.length && head < b.length && a[head] === b[head])
+        head++;
+    let tail = 0;
+    while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail] === b[b.length - 1 - tail])
+        tail++;
+    const midA = a.slice(head, a.length - tail);
+    const midB = b.slice(head, b.length - tail);
+    if (!midA.length && !midB.length)
+        return "";
+    // The longest common subsequence of the middle, by dynamic programming over its lines.
+    const lcs = Array.from({ length: midA.length + 1 }, () => new Uint32Array(midB.length + 1));
+    for (let i = midA.length - 1; i >= 0; i--) {
+        for (let j = midB.length - 1; j >= 0; j--) {
+            lcs[i][j] = midA[i] === midB[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    const edits = a.slice(0, head).map((text) => ({ op: " ", text }));
+    let i = 0;
+    let j = 0;
+    // Of two ways to keep as many lines, a removal comes first, as `diff -u` orders them.
+    while (i < midA.length || j < midB.length) {
+        if (i < midA.length && j < midB.length && midA[i] === midB[j]) {
+            edits.push({ op: " ", text: midA[i++] });
+            j++;
+        }
+        else if (j < midB.length && (i === midA.length || lcs[i][j + 1] > lcs[i + 1][j]))
+            edits.push({ op: "+", text: midB[j++] });
+        else
+            edits.push({ op: "-", text: midA[i++] });
+    }
+    edits.push(...a.slice(a.length - tail).map((text) => ({ op: " ", text })));
+    // Each changed line with three lines around it, runs that touch joined into one hunk.
+    const CONTEXT = 3;
+    const hunks = [];
+    edits.forEach((e, k) => {
+        if (e.op === " ")
+            return;
+        const from = Math.max(0, k - CONTEXT);
+        const to = Math.min(edits.length - 1, k + CONTEXT);
+        const last = hunks.at(-1);
+        if (last && from <= last[1] + 1)
+            last[1] = to;
+        else
+            hunks.push([from, to]);
+    });
+    const out = [`--- ${a.length ? `a/${path}` : "/dev/null"}`, `+++ ${b.length ? `b/${path}` : "/dev/null"}`];
+    // Line numbers in each file where every edit starts.
+    let lineA = 1;
+    let lineB = 1;
+    const at = edits.map((e) => {
+        const here = [lineA, lineB];
+        if (e.op !== "+")
+            lineA++;
+        if (e.op !== "-")
+            lineB++;
+        return here;
+    });
+    for (const [from, to] of hunks) {
+        const span = edits.slice(from, to + 1);
+        const countA = span.filter((e) => e.op !== "+").length;
+        const countB = span.filter((e) => e.op !== "-").length;
+        // An empty side is numbered by the line before it, as `diff -u` numbers it.
+        const startA = countA ? at[from][0] : at[from][0] - 1;
+        const startB = countB ? at[from][1] : at[from][1] - 1;
+        out.push(`@@ -${startA},${countA} +${startB},${countB} @@`, ...span.map((e) => `${e.op}${e.text}`));
+    }
+    return out.join("\n");
+}

package/dist/expr.js

@@ -74,7 +74,13 @@ export function asCow(v) {
 /** Whether built code is a `Cow<str>` already: a runtime routine that borrows when it can
  * (`js_slice`, `js_replace`, `js_pad_start`, …), or a fallback taken from one (`.unwrap_or(Cow…)`). */
 export function yieldsCow(code) {
-    return /^fv::js_(?:slice|substring|replace|replace_all|pad_start|pad_end)\(/.test(code) || /\.unwrap_or\(std::borrow::Cow::<str>::\w+\(.*\)\)$/s.test(code);
+    // The routine's call is the whole of it: `fv::js_slice(…).to_lowercase()` is a `String`.
+    const routine = /^fv::js_(?:slice|substring|replace|replace_all|pad_start|pad_end)(?=\()/.exec(code);
+    if (routine !== null)
+        return enclosed(code.slice(routine[0].length));
+    // The fallback is the last call of it: `format!("{}a", x.unwrap_or(Cow…))` is a `String`.
+    const fallback = code.lastIndexOf(".unwrap_or(std::borrow::Cow::<str>::");
+    return fallback >= 0 && enclosed(code.slice(fallback + ".unwrap_or".length));
 }
 /** Whether a value is a JavaScript number: an integer or a fraction. */
 export function isNumber(ty) {
@@ -272,7 +278,27 @@ export function pathOf(n) {
         return `${base}.${n.property.value}`;
     return null;
 }
+/** `typeof x === "string"` or `typeof x !== "string"`: the `x` tested, and whether the test is
+ * negated. */
+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;
+}
 export function presence(s, n) {
+    // A query value narrowed to a single string, which an attribute can then be bound to.
+    const t = typeofString(n);
+    if (t) {
+        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}` };
+    }
     let target = n;
     let negated = false;
     let byTruth = true;
@@ -696,6 +722,9 @@ export function expr(s, n) {
                     case "_ctx": {
                         if (n.object.name === "_ctx" && prop === "$route")
                             return theRoute(s, n);
+                        if (n.object.name === "_ctx" && prop === "$attrs") {
+                            return fail(comp, "`$attrs` is bound whole, with `v-bind=\"$attrs\"`; a value read from it has no type: declare it as a prop", n);
+                        }
                         const v = s.setup.get(prop);
                         if (v)
                             return v;
@@ -806,6 +835,15 @@ export function expr(s, n) {
         case "BinaryExpression": {
             if (n.operator !== "===" && n.operator !== "!==")
                 fail(comp, `\`${n.operator}\``, n);
+            // `typeof route.query.q === "string"`: a single value, not `null`, absent or repeated.
+            const tested = typeofString(n);
+            if (tested) {
+                const v = expr(s, tested.target);
+                if (v.ty.k !== "query")
+                    fail(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);
+            }
             const a = expr(s, n.left);
             const b = expr(s, n.right);
             let eq;

package/dist/islands.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "vue";
+declare const islands: Record<string, () => Promise<{
+    default: Component;
+}>>;
+export default islands;

package/dist/islands.js

@@ -0,0 +1,4 @@
+const islands = (() => {
+    throw new Error("ferrovue/islands is written by the Vite plugin: add `ferrovue()` from `ferrovue/vite` to the plugins of the Vite config");
+})();
+export default islands;