ferrovue 0.6.0 → 0.7.0

package/dist/client.js

@@ -1,4 +1,4 @@
-import { createSSRApp, createTextVNode, defineComponent, h, hydrateOnIdle, hydrateOnMediaQuery, hydrateOnVisible, onMounted, ref, } from "vue";
+import { createApp, createSSRApp, createTextVNode, defineComponent, h, hydrateOnIdle, hydrateOnMediaQuery, hydrateOnVisible, onMounted, ref, } from "vue";
 const BARE = /"(?:[^"\\]|\\.)*"|-?Infinity|NaN/g;
 const NON_FINITE = { NaN: Number.NaN, Infinity: Number.POSITIVE_INFINITY, "-Infinity": Number.NEGATIVE_INFINITY };
 function parseJson(text) {
@@ -12,12 +12,212 @@ function parseJson(text) {
     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;
+ * the app mounts, so every store starts from it and the markup agrees with the server's. The state
+ * is read from the script with the `id` given (`__pinia` by default) in `doc`, or given as
+ * `{ text }`: the `state` of a fetched page that `readPage` read. Either way the numbers JSON
+ * cannot carry (`NaN`, `Infinity`) are read back. Pinia is left alone when there is no state. */
+export function hydrateState(pinia, from = "__pinia", doc = document) {
+    const text = typeof from === "string" ? doc.getElementById(from)?.textContent : from.text;
     if (text)
         pinia.state.value = parseJson(text);
 }
+const SPACE = /[\t\n\f\r ]/;
+const TAG_END = /[\t\n\f\r />]/;
+const RAW_TEXT = new Set(["script", "style", "textarea", "title", "xmp", "iframe", "noembed", "noframes", "noscript"]);
+const FOREIGN = new Set(["svg", "math"]);
+const LEAVES_FOREIGN = new Set("b big blockquote body br center code dd div dl dt em embed h1 h2 h3 h4 h5 h6 head hr i img li listing menu meta nobr ol p pre ruby s small span strong strike sub sup table tt u ul var".split(" "));
+const REFERENCES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'" };
+function decodeAttr(value) {
+    if (!value.includes("&"))
+        return value;
+    return value.replace(/&(?:#(\d+);?|#[xX]([0-9a-fA-F]+);?|(amp|lt|gt|quot|apos);)/g, (_match, dec, hex, named) => {
+        if (named)
+            return REFERENCES[named];
+        const code = dec ? Number.parseInt(dec, 10) : Number.parseInt(hex, 16);
+        return code > 0 && code <= 0x10ffff && !(code >= 0xd800 && code <= 0xdfff) ? String.fromCodePoint(code) : "\uFFFD";
+    });
+}
+function readTag(html, at) {
+    let i = at;
+    while (i < html.length && !TAG_END.test(html[i]))
+        i++;
+    const name = html.slice(at, i).toLowerCase();
+    const attrs = new Map();
+    let selfClosing = false;
+    for (;;) {
+        while (i < html.length && (SPACE.test(html[i]) || html[i] === "/"))
+            selfClosing = html[i++] === "/";
+        if (i >= html.length)
+            return undefined;
+        if (html[i] === ">")
+            return { name, attrs, end: i + 1, selfClosing };
+        selfClosing = false;
+        const start = i++;
+        while (i < html.length && !/[\t\n\f\r />=]/.test(html[i]))
+            i++;
+        const key = html.slice(start, i).toLowerCase();
+        while (i < html.length && SPACE.test(html[i]))
+            i++;
+        let value = "";
+        if (html[i] === "=") {
+            i++;
+            while (i < html.length && SPACE.test(html[i]))
+                i++;
+            const quote = html[i];
+            if (quote === '"' || quote === "'") {
+                const close = html.indexOf(quote, i + 1);
+                if (close < 0)
+                    return undefined;
+                value = html.slice(i + 1, close);
+                i = close + 1;
+            }
+            else {
+                const from = i;
+                while (i < html.length && !/[\t\n\f\r >]/.test(html[i]))
+                    i++;
+                value = html.slice(from, i);
+            }
+        }
+        if (!attrs.has(key))
+            attrs.set(key, decodeAttr(value));
+    }
+}
+function tagAt(lower, at, name, closing) {
+    const open = closing ? `</${name}` : `<${name}`;
+    return lower.startsWith(open, at) && TAG_END.test(lower[at + open.length] ?? "");
+}
+function scriptDataEnd(lower, from) {
+    let escaped = 0;
+    let dashes = 0;
+    for (let i = from; i < lower.length; i++) {
+        if (escaped === 0) {
+            if (lower.startsWith("<!--", i)) {
+                escaped = 1;
+                dashes = 2;
+                i += 3;
+            }
+            else if (tagAt(lower, i, "script", true))
+                return i;
+            continue;
+        }
+        const ch = lower[i];
+        if (ch === "-") {
+            dashes++;
+            continue;
+        }
+        if (ch === ">" && dashes >= 2)
+            escaped = 0;
+        else if (ch === "<" && tagAt(lower, i, "script", true)) {
+            if (escaped === 1)
+                return i;
+            escaped = 1;
+        }
+        else if (ch === "<" && escaped === 1 && tagAt(lower, i, "script", false))
+            escaped = 2;
+        dashes = 0;
+    }
+    return -1;
+}
+function rawTextEnd(lower, from, name) {
+    if (name === "script")
+        return scriptDataEnd(lower, from);
+    for (let i = lower.indexOf(`</${name}`, from); i >= 0; i = lower.indexOf(`</${name}`, i + 1))
+        if (tagAt(lower, i, name, true))
+            return i;
+    return -1;
+}
+function commentEnd(html, from) {
+    if (html.startsWith(">", from))
+        return from + 1;
+    if (html.startsWith("->", from))
+        return from + 2;
+    for (let i = html.indexOf("--", from); i >= 0; i = html.indexOf("--", i + 1)) {
+        if (html[i + 2] === ">")
+            return i + 3;
+        if (html.startsWith("!>", i + 2))
+            return i + 4;
+    }
+    return html.length;
+}
+function scriptText(html, id) {
+    const lower = html.toLowerCase();
+    let template = 0;
+    let foreign = 0;
+    let i = 0;
+    for (;;) {
+        const lt = html.indexOf("<", i);
+        if (lt < 0)
+            return undefined;
+        i = lt + 1;
+        if (html.startsWith("<!--", lt)) {
+            i = commentEnd(html, lt + 4);
+            continue;
+        }
+        if (foreign > 0 && html.startsWith("<![CDATA[", lt)) {
+            const close = html.indexOf("]]>", lt);
+            i = close < 0 ? html.length : close + 3;
+            continue;
+        }
+        const closing = html[lt + 1] === "/";
+        const at = closing ? lt + 2 : lt + 1;
+        if (!/[a-zA-Z]/.test(html[at] ?? "")) {
+            if (html[lt + 1] === "!" || html[lt + 1] === "?" || (closing && at < html.length)) {
+                const close = html.indexOf(">", at);
+                i = close < 0 ? html.length : close + 1;
+            }
+            continue;
+        }
+        const tag = readTag(html, at);
+        if (!tag)
+            return undefined;
+        i = tag.end;
+        if (FOREIGN.has(tag.name)) {
+            if (closing)
+                foreign = Math.max(0, foreign - 1);
+            else if (!tag.selfClosing)
+                foreign++;
+            continue;
+        }
+        if (foreign > 0) {
+            if (closing ? tag.name === "br" || tag.name === "p" : LEAVES_FOREIGN.has(tag.name))
+                foreign = 0;
+            else
+                continue;
+        }
+        if (tag.name === "template") {
+            template = closing ? Math.max(0, template - 1) : template + 1;
+            continue;
+        }
+        if (closing || !RAW_TEXT.has(tag.name)) {
+            if (tag.name === "plaintext")
+                return undefined;
+            continue;
+        }
+        const end = rawTextEnd(lower, i, tag.name);
+        if (tag.name === "script" && template === 0 && tag.attrs.get("id") === id)
+            return html.slice(i, end < 0 ? html.length : end);
+        if (end < 0)
+            return undefined;
+        const close = readTag(html, end + 2);
+        if (!close)
+            return undefined;
+        i = close.end;
+    }
+}
+/** Read the record and the state of a page out of the HTML of its document, as a navigation that
+ * fetches the next page receives it. It needs no `DOMParser`, so it also runs in a worker and on a
+ * server. Each script is the one the browser's `getElementById` would find in the parsed document:
+ * the first `<script>` with that `id` outside a `<template>`, an `<svg>` and a `<math>`, with
+ * comments, attribute values and the text of `<script>`, `<style>`, `<textarea>`, `<title>` and the
+ * other raw-text elements passed over as the HTML parser passes over them. Throws when the page
+ * carries no record. */
+export function readPage(html, options = {}) {
+    const id = options.record ?? "__fv_page";
+    const text = scriptText(html, id);
+    if (!text)
+        throw new Error(`[ferrovue] the page has no record: no <script id="${id}">`);
+    return { record: parseJson(text), state: scriptText(html, options.state ?? "__pinia") || undefined };
+}
 const INTERACTIONS = ["pointerenter", "click", "focus"];
 const strategy = (wait) => (el, hydrate) => wait(() => void hydrate(), (each) => void each(el)) ?? (() => { });
 const idle = (el, hydrate) => {
@@ -100,15 +300,22 @@ export async function mountIslands(components, options = {}) {
             report(el, `the props of ${name} are not JSON`);
             return;
         }
-        const app = createSSRApp(component, props);
-        if (options.pinia)
-            app.use(options.pinia);
-        if (options.router)
-            app.use(options.router);
-        for (const plugin of options.plugins ?? [])
-            app.use(plugin);
-        app.mount(el);
-        apps.push(app);
+        // One island that throws as it mounts (its setup, a plugin) is reported, and leaves the others
+        // to hydrate.
+        try {
+            const app = createSSRApp(component, props);
+            if (options.pinia)
+                app.use(options.pinia);
+            if (options.router)
+                app.use(options.router);
+            for (const plugin of options.plugins ?? [])
+                app.use(plugin);
+            app.mount(el);
+            apps.push(app);
+        }
+        catch (e) {
+            report(el, `${name} did not mount: ${e instanceof Error ? e.message : String(e)}`);
+        }
     };
     const now = [];
     for (const el of elements) {
@@ -202,13 +409,15 @@ async function load(component) {
 }
 /** The app of a page: its root renders `layout` with the record's props, and each slot as the
  * components the record names, in order, as a plain array, which hydrates the markup the server
- * wrote with no fragment of its own. `components` must hold every component the record names. */
+ * wrote with no fragment of its own. With `hydrate: false` the same tree is rendered from scratch,
+ * so the first page and every page shown after it are one shape of app. `components` must hold
+ * every component the record names. */
 export function createPageApp(layout, record, components, options = {}) {
     const slots = Object.fromEntries(Object.entries(record.slots).map(([name, parts]) => [
         name,
         () => (parts.length ? parts.map((part) => h(components[part.c], part.p)) : [createTextVNode("")]),
     ]));
-    const app = createSSRApp({ name: "FerrovuePage", render: () => h(layout, record.props, slots) });
+    const app = (options.hydrate === false ? createApp : createSSRApp)({ name: "FerrovuePage", render: () => h(layout, record.props, slots) });
     if (options.pinia)
         app.use(options.pinia);
     if (options.router)
@@ -217,32 +426,65 @@ export function createPageApp(layout, record, components, options = {}) {
         app.use(plugin);
     return app;
 }
+function containerOf(options) {
+    const selector = options.container ?? "#app";
+    const container = typeof selector === "string" ? (options.doc ?? document).querySelector(selector) : selector;
+    if (!container)
+        throw new Error(`[ferrovue] the page has no ${selector} to mount on`);
+    return container;
+}
+async function loadPage(caller, layout, record, components) {
+    const names = new Set(Object.values(record.slots).flatMap((parts) => parts.map((part) => part.c)));
+    const loading = [...names].map(async (name) => {
+        if (!Object.hasOwn(components, name))
+            throw new Error(`[ferrovue] no component called ${JSON.stringify(name)} was given to ${caller}`);
+        return [name, await loadOrThrow(name, components[name])];
+    });
+    const [root, parts] = await Promise.all([loadOrThrow("the layout", layout), Promise.all(loading)]);
+    return [root, Object.fromEntries(parts)];
+}
 /** Hydrate a page `ferrovue::Page` rendered: read its record, load the components it names (and
  * no others), wait for the router, and mount the layout on the container. Rejects, leaving the page
  * as the server rendered it, when the container or the record is missing or a component is not
  * given or does not load. */
 export async function mountPage(layout, components, options = {}) {
     const doc = options.doc ?? document;
-    const selector = options.container ?? "#app";
-    const container = typeof selector === "string" ? doc.querySelector(selector) : selector;
-    if (!container)
-        throw new Error(`[ferrovue] the page has no ${selector} to mount on`);
+    const container = containerOf(options);
     const id = options.record ?? "__fv_page";
     const text = doc.getElementById(id)?.textContent;
     if (!text)
         throw new Error(`[ferrovue] the page has no record: no <script id="${id}">`);
     const record = parseJson(text);
-    const names = new Set(Object.values(record.slots).flatMap((parts) => parts.map((part) => part.c)));
-    const loading = [...names].map(async (name) => {
-        if (!Object.hasOwn(components, name))
-            throw new Error(`[ferrovue] no component called ${JSON.stringify(name)} was given to mountPage`);
-        return [name, await loadOrThrow(name, components[name])];
-    });
-    const [root, parts] = await Promise.all([loadOrThrow("the layout", layout), Promise.all(loading), options.router?.isReady()]);
-    const app = createPageApp(root, record, Object.fromEntries(parts), options);
+    const [[root, parts]] = await Promise.all([loadPage("mountPage", layout, record, components), options.router?.isReady()]);
+    const app = createPageApp(root, record, parts, options);
     app.mount(container);
     return app;
 }
+/** Show the next page of a navigation from its record, as `readPage` read it out of the fetched
+ * document: load the components it names (and no others), render the app `createPageApp` builds
+ * with `hydrate: false` into a copy of the container with no children, wait for the router, put the
+ * copy in the container's place, mount, and then unmount `previous`. The next app is mounted
+ * before the previous one is unmounted, so a router both use stays started. `router` must be at the
+ * next page's location: `linkRouter` with the `location` the navigation goes to. Rejects, leaving
+ * the page shown as it is, when the container is missing or a component is not given or does not
+ * load. */
+export async function renderPage(layout, components, record, options = {}) {
+    const container = containerOf(options);
+    const [root, parts] = await loadPage("renderPage", layout, record, components);
+    const app = createPageApp(root, record, parts, { ...options, hydrate: false });
+    await options.router?.isReady();
+    const next = container.cloneNode(false);
+    container.replaceWith(next);
+    try {
+        app.mount(next);
+    }
+    catch (e) {
+        next.replaceWith(container);
+        throw e;
+    }
+    options.previous?.unmount();
+    return app;
+}
 async function loadOrThrow(name, component) {
     const result = await load(component);
     if (result instanceof Error)

package/dist/compiler.d.ts

@@ -1,7 +1,10 @@
 import { type Config } from "./context.ts";
-/** Every generated file, keyed by its name in the output directory. */
-export declare function generate(root: string, config?: Config): Map<string, string>;
-/** Write what `generate` produces to the configured directory, replacing what is there. */
+/** Every generated file, keyed by its name in the output directory. `sources` holds the text of
+ * components by path, read in place of their files, as an editor's unsaved buffers. */
+export declare function generate(root: string, config?: Config, sources?: ReadonlyMap<string, string>): Map<string, string>;
+/** Whether a file starts with the header ferrovue writes, so `write` removes only what an earlier
+ * run wrote and never a module of the app's own put in the output directory by mistake. */
+export declare function isGenerated(file: string): boolean;
 /** What \`write\` changed in the output directory. */
 export interface Written {
     /** Every file the output directory now holds. */
@@ -18,6 +21,7 @@ export interface Written {
  * so a Rust build that watches them rebuilds no more than it must, and removing what no component
  * produces any more. */
 export declare function write(root: string, config?: Config): Written;
-export { CONFIG_FILE, loadConfig, TYPES_MODULE, type Config, type HelperSpec, type RoutesSource, type TwinSpec, type TypeName } from "./context.ts";
-export { GenError } from "./model.ts";
+export { CONFIG_FILE, loadConfig, TYPES_MODULE, type Config, type HelperSpec, type RoutesSource, type ScopeIdMode, type TwinSpec, type TypeName } from "./context.ts";
+export { GenError, type Location as SourceLocation } from "./model.ts";
+export { docsUrl, ERRORS, type Code as ErrorCode, type ErrorDoc } from "./errors.ts";
 export declare const VERSION: string;

package/dist/compiler.js

@@ -1,16 +1,21 @@
 import { mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
-import { basename, join, relative } from "node:path";
+import { basename, join, resolve } from "node:path";
+import { relativePath } from "./paths.js";
 import { ctx, loadConfig, tyOfName } from "./context.js";
 import { failIn, snake } from "./model.js";
-import { importsOf, readComponent } from "./component.js";
+import { readComponent, refuseOptionsApi } from "./component.js";
+import { listDir } from "./files.js";
 import { scopeFor } from "./script.js";
 import { attrsFlow } from "./fallthrough.js";
 import { prepareDynamic } from "./dynamic.js";
-import { componentSource, isIsland, modSource } from "./rust.js";
+import { componentSource, GENERATED, isIsland, modSource } from "./rust.js";
+import { requireWhole } from "./typescript.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)) {
+/** Every generated file, keyed by its name in the output directory. `sources` holds the text of
+ * components by path, read in place of their files, as an editor's unsaved buffers. */
+export function generate(root, config = loadConfig(root), sources = new Map()) {
+    ctx.sources = new Map([...sources].map(([file, text]) => [resolve(root, file), text]));
     ctx.componentsDir = config.components.replace(/\/?$/, "/");
     ctx.helperModule = config.helpers?.module ?? null;
     ctx.trustedHtml = config.trustedHtml ?? null;
@@ -21,6 +26,8 @@ export function generate(root, config = loadConfig(root)) {
     ctx.typeStructs = new Map();
     ctx.typeAliases = new Map();
     ctx.typeFiles = new Map();
+    ctx.typeDecls = new Map();
+    ctx.typeReached = new Set();
     ctx.typeRead = new Set();
     ctx.constDecls = new Map();
     ctx.typeConsts = new Map();
@@ -36,7 +43,7 @@ export function generate(root, config = loadConfig(root)) {
     ]));
     const dir = join(root, config.components);
     const files = [
-        ...readdirSync(dir)
+        ...listDir(root, config.components, "components")
             .filter((f) => f.endsWith(".vue"))
             .toSorted()
             .map((f) => ({ file: join(dir, f), name: basename(f, ".vue") })),
@@ -44,7 +51,7 @@ export function generate(root, config = loadConfig(root)) {
     ];
     const modulesOf = new Map();
     for (const f of files) {
-        const rel = relative(root, f.file);
+        const rel = relativePath(root, f.file);
         if (!/^[A-Za-z][A-Za-z0-9_]*$/.test(f.name)) {
             failIn(rel, "FV0007", `the component is called \`${f.name}\` after its file, which is not a Rust name: name the file in PascalCase, letters and digits (\`UserCard.vue\`)`);
         }
@@ -56,10 +63,17 @@ export function generate(root, config = loadConfig(root)) {
             failIn(rel, "FV0007", `the component's module would be \`${file}\`, as ${taken}'s is: rename one of them`);
         modulesOf.set(file, rel);
     }
-    const children = new Set(files.flatMap((f) => importsOf(readFileSync(f.file, "utf8")).filter((c) => c !== f.name)));
-    const read = files.map((f) => readComponent(f.file, root, children.has(f.name), f.name));
+    const read = files.map((f) => readComponent(f.file, root, f.name));
+    const children = new Set(read.flatMap((r) => [...r.comp.imports, ...r.comp.childProps.values()].filter((c) => c !== r.comp.name)));
+    for (const r of read)
+        if (r.optionsApi)
+            refuseOptionsApi(r.comp, r.optionsApi, children.has(r.comp.name));
+    const byName = new Map(read.map((r) => [r.comp.name, r]));
     const components = new Map(read.map((r) => [r.comp.name, r.comp]));
     ctx.components = components;
+    for (const c of components.values())
+        for (const f of c.props.fields)
+            requireWhole(c, f.ty);
     const scopes = read.map((r) => scopeFor(r.comp, r.ast, components).scope);
     const analysed = prepareDynamic(read.map((r, i) => ({ ...r, scope: scopes[i] })));
     const all = read.map((r, i) => ({ comp: r.comp, ssr: analysed[i], children: scopes[i].children, attrsBindings: scopes[i].attrsBindings }));
@@ -87,18 +101,27 @@ export function generate(root, config = loadConfig(root)) {
             return;
         placed.add(r.comp.name);
         for (const i of r.comp.imports) {
-            const dep = read.find((x) => x.comp.name === i);
+            const dep = byName.get(i);
             if (dep)
                 place(dep);
         }
         ordered.push(r);
     };
     read.forEach(place);
-    for (const r of ordered) {
+    const built = ordered.map((r) => {
         ctx.narrowCount = 0;
-        out.set(moduleFile(r.comp.module), componentSource(r.comp, r.ast, r.ssr, components));
+        const file = moduleFile(r.comp.module);
+        out.set(file, "");
+        return { file, source: componentSource(r.comp, r.ast, r.ssr, components) };
+    });
+    const reached = () => ctx.typeReached.size + [...components.values()].reduce((n, c) => n + c.reached.size, 0);
+    let modules = [];
+    for (let before = -1; before !== reached();) {
+        before = reached();
+        for (const { file, source } of built)
+            out.set(file, source());
+        modules = PLUGINS.flatMap((p) => p.modules?.() ?? []);
     }
-    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) {
         const taken = modulesOf.get(file);
@@ -108,6 +131,16 @@ export function generate(root, config = loadConfig(root)) {
     }
     return out;
 }
+/** Whether a file starts with the header ferrovue writes, so `write` removes only what an earlier
+ * run wrote and never a module of the app's own put in the output directory by mistake. */
+export function isGenerated(file) {
+    try {
+        return readFileSync(file, "utf8").startsWith(GENERATED);
+    }
+    catch {
+        return false;
+    }
+}
 function moduleFile(module) {
     return `${module.replace(/^r#/, "")}.rs`;
 }
@@ -131,7 +164,7 @@ export function write(root, config = loadConfig(root)) {
             changed.push(name);
         }
     }
-    const removed = readdirSync(target).filter((f) => f.endsWith(".rs") && !files.has(f));
+    const removed = readdirSync(target).filter((f) => f.endsWith(".rs") && !files.has(f) && isGenerated(join(target, f)));
     for (const f of removed)
         rmSync(join(target, f));
     const islands = Object.fromEntries([...ctx.components.values()].filter(isIsland).map((c) => [c.name, c.file]));
@@ -139,6 +172,7 @@ export function write(root, config = loadConfig(root)) {
 }
 export { CONFIG_FILE, loadConfig, TYPES_MODULE } from "./context.js";
 export { GenError } from "./model.js";
+export { docsUrl, ERRORS } from "./errors.js";
 export const VERSION = (() => {
     try {
         const pkg = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));

package/dist/component.d.ts

@@ -1,8 +1,12 @@
 import { type Component, type N } from "./model.ts";
-/** The `.vue` files a component imports, by name. */
-export declare function importsOf(source: string): string[];
-export declare function readComponent(file: string, root: string, isChild: boolean, name?: string): {
+/** Refuse a component written with the Options API, which `readComponent` read no further: as a
+ * child when another component imports it, as an island otherwise. */
+export declare function refuseOptionsApi(comp: Component, script: N, isChild: boolean): never;
+/** A component, read and its template compiled. One written with the Options API is read no
+ * further than its `<script>`, `optionsApi`, for `refuseOptionsApi` once every component is read. */
+export declare function readComponent(file: string, root: string, name?: string): {
     comp: Component;
     ast: N[];
     ssr: string;
+    optionsApi?: N;
 };

package/dist/component.js

@@ -1,11 +1,11 @@
 import { parse as parseJs } from "@babel/parser";
 import { compileScript, compileTemplate, parse as parseSfc } from "@vue/compiler-sfc";
-import { readFileSync } from "node:fs";
 import { SourceMapConsumer } from "source-map-js";
-import { basename, relative } from "node:path";
+import { basename } from "node:path";
+import { relativePath } from "./paths.js";
 import { absence, blankComponent, fail, GenError, opt, snake, sourceAt, tagAst } from "./model.js";
-import { ctx } from "./context.js";
-import { typesImports, declareTypes, defaultValue, definePropsType, ONE_NOTHING, readTypeFile, resolveImport, runtimeDefaults, structOf, tyOfTs } from "./typescript.js";
+import { ctx, readSource } from "./context.js";
+import { typesImports, declareTypes, defaultValue, definePropsType, ONE_NOTHING, reachLocal, readTypeFile, resolveImport, runtimeDefaults, structOf, tyOfTs } from "./typescript.js";
 import { claim } from "./plugin.js";
 import { asyncChildren } from "./script.js";
 function vueErrorNode(err, within) {
@@ -59,9 +59,17 @@ function sourceDefault(ast, key) {
 function blockAt(source, block) {
     return sourceAt(source, source.lastIndexOf(`<${block.type}`, block.loc.start.offset));
 }
-/** The `.vue` files a component imports, by name. */
-export function importsOf(source) {
-    return [...source.matchAll(/\bfrom\s*["'](?:[^"']*\/)?([^"'/]+)\.vue["']/g)].map((m) => m[1]);
+function cssVarsAt(source, descriptor) {
+    const at = new Map();
+    for (const st of descriptor.styles) {
+        for (const m of st.content.matchAll(/v-bind\s*\(\s*(?:'([^']*)'|"([^"]*)"|([^)'"]*))/g)) {
+            const raw = m[1] ?? m[2] ?? m[3].trim();
+            if (!at.has(raw))
+                at.set(raw, sourceAt(source, st.loc.start.offset + m.index));
+        }
+    }
+    const block = descriptor.styles.find((st) => /\bv-bind\s*\(/.test(st.content));
+    return descriptor.cssVars.map((v) => at.get(v) ?? (block ? blockAt(source, block) : sourceAt(source, 0)));
 }
 function generics(comp, source, block) {
     const text = block.attrs.generic;
@@ -114,27 +122,27 @@ function scriptOf(comp, descriptor) {
         throw new GenError("FV0001", e.message, { file: comp.file, ...where }, e.message.split("\n")[0]);
     }
 }
-export function readComponent(file, root, isChild, name = basename(file, ".vue")) {
-    const source = readFileSync(file, "utf8");
+/** Refuse a component written with the Options API, which `readComponent` read no further: as a
+ * child when another component imports it, as an island otherwise. */
+export function refuseOptionsApi(comp, script, isChild) {
+    const needs = isChild ? "a child component must have" : "an island needs";
+    return fail(comp, "FV0003", `${needs} \`<script setup lang="ts">\`, or no script at all: a \`<script>\` without \`setup\` (the Options API, \`defineComponent\`) is not translated`, script);
+}
+/** A component, read and its template compiled. One written with the Options API is read no
+ * further than its `<script>`, `optionsApi`, for `refuseOptionsApi` once every component is read. */
+export function readComponent(file, root, name = basename(file, ".vue")) {
+    const source = readSource(file);
     const { descriptor, errors } = parseSfc(source, { filename: file });
-    const rel = relative(root, file);
+    const rel = relativePath(root, file);
     const comp = blankComponent(name, snake(name), rel);
     comp.source = source;
     if (errors.length)
         fail(comp, "FV0002", String(errors[0]).replaceAll(file, rel), vueErrorNode(errors[0]) ?? sourceAt(source, 0));
-    if (descriptor.script && !descriptor.scriptSetup) {
-        const needs = isChild ? "a child component must have" : "an island needs";
-        fail(comp, "FV0003", `${needs} \`<script setup lang="ts">\`, or no script at all: a \`<script>\` without \`setup\` (the Options API, \`defineComponent\`) is not translated`, blockAt(source, descriptor.script));
-    }
+    if (descriptor.script && !descriptor.scriptSetup)
+        return { comp, ast: [], ssr: "", optionsApi: blockAt(source, descriptor.script) };
     if (!descriptor.template)
         fail(comp, "FV0004", "a component needs a `<template>`: a render function is not translated", sourceAt(source, 0));
-    for (const st of descriptor.styles) {
-        if (st.module)
-            fail(comp, "FV1005", "`<style module>` renames classes in the bundler; use a global or scoped `<style>`, or a stylesheet", blockAt(source, st));
-    }
-    const cssVar = descriptor.styles.find((st) => /\bv-bind\s*\(/.test(st.content));
-    if (descriptor.cssVars.length)
-        fail(comp, "FV1006", "`v-bind()` in `<style>` sets variables the server does not render; bind `:style` instead", cssVar ? blockAt(source, cssVar) : undefined);
+    comp.cssVarsAt = cssVarsAt(source, descriptor);
     for (const p of ctx.plugins)
         p.sfc?.(comp, descriptor, file, source);
     const script = descriptor.scriptSetup ? scriptOf(comp, descriptor) : null;
@@ -190,7 +198,7 @@ export function readComponent(file, root, isChild, name = basename(file, ".vue")
         generics(comp, source, descriptor.scriptSetup);
     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));
+        comp.typeDecls.set(d.name, { members: d.members, node: d.node });
     let propsTy = null;
     for (const s of ast) {
         const call = s.type === "ExpressionStatement" ? s.expression : s.type === "VariableDeclaration" ? s.declarations[0]?.init : null;
@@ -208,7 +216,12 @@ export function readComponent(file, root, isChild, name = basename(file, ".vue")
         comp.props = structOf(comp, "Props", propsTy.members, comp.structs);
     }
     else if (propsTy.type === "TSTypeReference" && comp.structs.has(propsTy.typeName.name)) {
-        comp.props = { name: "Props", fields: comp.structs.get(propsTy.typeName.name).fields };
+        reachLocal(comp, propsTy.typeName.name);
+        const st = comp.structs.get(propsTy.typeName.name);
+        const refused = st.refused?.values().next().value;
+        if (refused !== undefined)
+            throw refused;
+        comp.props = { name: "Props", fields: st.fields };
     }
     else {
         fail(comp, "FV0304", "`defineProps` takes a type literal or an interface declared in the same block", propsTy);
@@ -251,9 +264,8 @@ export function readComponent(file, root, isChild, name = basename(file, ".vue")
     const compiled = compileTemplate({
         source: descriptor.template.content,
         filename: file,
-        ...(claim((p) => p.templateOptions?.(comp)) ?? { id: name, scoped: false, slotted: false }),
+        ...(claim((p) => p.templateOptions?.(comp)) ?? { id: name, scoped: false, slotted: false, ssrCssVars: [], isProd: true }),
         ssr: true,
-        ssrCssVars: [],
         compilerOptions: { ...(script ? { bindingMetadata: script.bindings } : {}), sourceMap: true },
     });
     const kids = (n) => n.children.filter((c) => c.type !== 3 && !(c.type === 2 && !c.content.trim()));