@forgebook/nuxt 0.0.0-stage → 0.2.0

package/dist/src/vite/nuxtPlugin.js

@@ -0,0 +1,466 @@
+/**
+ * The Vite plugin that lets a Nuxt project's components draw outside Nuxt: its aliases, its auto-imports, its
+ * components found by name, `#app`, `#imports` and `#components`, and the project the page knows (its pages' routes,
+ * its public runtime config, its app config, its style sheets).
+ *
+ * @remarks
+ * Nuxt's own build is not run: the plugin reads `nuxt.config` (`nuxtConfig.ts`) and the project's folders, and does
+ * what Nuxt's build does for a component's code. A file that uses a composable without importing it gets the import,
+ * through unimport, the library Nuxt uses for it; a template that names a component gets the component's import, as
+ * Nuxt's loader writes it. The project's folders are read again when a file is added or removed in one, and the page
+ * reloads.
+ *
+ * Nuxt's composables come from this package's stand-ins (`src/app`), which are served from their sources, never
+ * pre-bundled: the stand-ins a component imports and the renderer that gives each story its Nuxt must be one module.
+ *
+ * @module
+ */
+import { readdirSync } from "node:fs";
+import { join, posix, relative, sep } from "node:path";
+import { codeLiteral } from "forgebook/code-literal";
+import MagicString, {} from "magic-string";
+import { createUnimport, scanDirExports, toExports } from "unimport";
+import { loadEnv, normalizePath, parseAst } from "vite";
+import { componentName, wordsOf } from "./componentNames.js";
+import { loadNuxtConfig, withEnvironment } from "./nuxtConfig.js";
+import { pageRoutes } from "./pageRoutes.js";
+import { withPlaceKeys } from "./placeKeys.js";
+import { BUILT_IN_COMPONENT_NAMES, COMPONENTS_MODULE, NUXT_STAND_INS, ROUTER_STAND_INS } from "./standIns.js";
+/** The frame page's module: Forgebook's frame with the Nuxt renderer, after the project's style sheets. */
+export const FRAME_MODULE = "virtual:forgebook-nuxt/frame";
+/** The module the page reads the project from, which the plugin writes in a catalogue (`src/pageProject.ts`). */
+const PROJECT_MODULE = "@forgebook/nuxt/project";
+/** The modules the plugin writes, by the name code imports them with. */
+const VIRTUAL_MODULES = [
+    "#app",
+    "nuxt/app",
+    "#imports",
+    "#components",
+    PROJECT_MODULE,
+    "virtual:forgebook-nuxt/styles",
+    FRAME_MODULE
+];
+/** What the name of a module the plugin writes starts with once resolved. */
+const RESOLVED = "\0forgebook-nuxt:";
+/**
+ * The id of a module the plugin writes, and back: a `#` would end the address the browser asks for it at, so it is
+ * written as `hash:`.
+ *
+ * @param name - the module, as code imports it.
+ */
+const resolvedId = (name) => `${RESOLVED}${name.replace(/^#/, "hash:")}`;
+/**
+ * The module a resolved id names.
+ *
+ * @param id - the id.
+ */
+const nameOfId = (id) => id.slice(RESOLVED.length).replace(/^hash:/, "#");
+/** Nuxt's build's own modules, which a catalogue cannot give. */
+const BUILD_MODULE = /^#(build|internal|app-manifest|server)(\/|$)/;
+/** A file whose code may use what Nuxt imports for it: a script, or a single-file component's script. */
+const CODE_FILE = /\.(vue|[cm]?[jt]sx?)$/;
+/** A call that may need the key of its place (`placeKeys.ts`): the code is parsed only when it has one. */
+const KEYED_CALL = /\b(useState|useAsyncData|useLazyAsyncData|callOnce)\s*\(/;
+/** A template's look-up of a component by name, as Vue's compiler writes it. */
+const RESOLVE_COMPONENT = /(?<![\w$])_?resolveComponent\(\s*(["'`])([^"'`]+)\1\s*(?:,\s*true\s*)?\)/g;
+/** A component's name, as `#components` and a template's import write it: a JavaScript name. */
+const COMPONENT_NAME = /^[A-Za-z_$][\w$]*$/;
+/**
+ * Every file of a folder, as paths from it with `/`; none for a folder that is not there.
+ *
+ * @param dir - the folder.
+ */
+const filesOf = (dir) => {
+    try {
+        return readdirSync(dir, { recursive: true, withFileTypes: true })
+            .filter((entry) => entry.isFile())
+            .map((entry) => relative(dir, join(entry.parentPath, entry.name)).split(sep).join("/"));
+    }
+    catch {
+        return [];
+    }
+};
+/**
+ * The project's components, by name: the first folder that names one wins, as in Nuxt. A file whose name makes no
+ * JavaScript name (`a;b.vue`) is left out, since its name is written into code.
+ *
+ * @param config - the project's config.
+ */
+export const componentsOf = (config) => {
+    const found = new Map();
+    const skipped = [];
+    const seen = new Set();
+    // the deepest folder first (`components/global` before `components`), and a file once, named by the first
+    const dirs = [...config.componentsDirs].sort((a, b) => b.path.length - a.path.length);
+    for (const dir of dirs)
+        for (const file of filesOf(dir.path)) {
+            const path = `${dir.path}/${file}`;
+            if (seen.has(path))
+                continue;
+            seen.add(path);
+            const name = componentName(file, dir.prefix, dir.pathPrefix);
+            if (name === undefined || found.has(name))
+                continue;
+            if (COMPONENT_NAME.test(name))
+                found.set(name, { name, file: path });
+            else
+                skipped.push(path);
+        }
+    return { components: found, skipped };
+};
+/**
+ * Reads the project: its routes, its components, and what its files get without importing it.
+ *
+ * @param config - the project's config.
+ * @param env - the environment's variables, by name.
+ */
+const readProject = async (config, env) => {
+    // a composables folder's files, and the `index` of each of its folders, as Nuxt scans them
+    const scanned = await scanDirExports([...config.importsDirs], {
+        filePatterns: ["*.{ts,js,mjs,mts}", "*/index.{ts,js,mjs,mts}"],
+        cwd: config.rootDir
+    });
+    const imports = [...NUXT_STAND_INS, ...ROUTER_STAND_INS, ...scanned];
+    const { components, skipped } = componentsOf(config);
+    return {
+        config,
+        publicRuntimeConfig: withEnvironment(config.publicRuntimeConfig, env),
+        routes: pageRoutes(filesOf(config.pagesDir)),
+        components,
+        skipped,
+        unimport: createUnimport({ presets: ["vue"], imports, addons: { vueTemplate: true } }),
+        importNames: imports.map((each) => `${each.name} ${each.from}`)
+    };
+};
+/**
+ * What a page knows of the project's folders, as one text: two reads with the same one need no reload.
+ *
+ * @param state - the project.
+ */
+const shapeOf = (state) => JSON.stringify([state.routes, [...state.components.values()], state.importNames]);
+/**
+ * The code of `#components`: each of the project's components, its `Lazy` form, and Nuxt's own.
+ *
+ * @param state - the project.
+ */
+const componentsModule = (state) => [
+    'import { defineAsyncComponent } from "vue";',
+    `export { ${BUILT_IN_COMPONENT_NAMES.join(", ")} } from ${codeLiteral(COMPONENTS_MODULE)};`,
+    ...[...state.components.values()].flatMap(({ name, file }) => [
+        `export { default as ${name} } from ${codeLiteral(file)};`,
+        `export const Lazy${name} = defineAsyncComponent(() => import(${codeLiteral(file)}));`
+    ])
+].join("\n");
+/**
+ * The code of the project the page knows: its routes, its public runtime config, its app config and its components'
+ * loaders.
+ *
+ * @param state - the project.
+ */
+const projectModule = (state) => {
+    const { config } = state;
+    const runtimeConfig = {
+        public: state.publicRuntimeConfig,
+        app: { baseURL: config.baseURL, buildAssetsDir: config.buildAssetsDir, cdnURL: "" }
+    };
+    const loaders = [...state.components.values()].map(({ name, file }) => `    ${codeLiteral(name)}: () => import(${codeLiteral(file)})`);
+    return [
+        ...(config.appConfigFile === undefined
+            ? []
+            : [`import appConfig from ${codeLiteral(config.appConfigFile)};`]),
+        "export const project = {",
+        `  routes: ${codeLiteral(state.routes)},`,
+        `  runtimeConfig: ${codeLiteral(runtimeConfig)},`,
+        `  appConfigs: [${codeLiteral(config.appConfig)}${config.appConfigFile === undefined ? "" : ", appConfig"}],`,
+        `  components: {\n${loaders.join(",\n")}\n  }`,
+        "};"
+    ].join("\n");
+};
+/**
+ * The code of a module the plugin writes.
+ *
+ * @param name - the module, as code imports it.
+ * @param state - the project.
+ */
+const virtualModule = async (name, state) => {
+    if (name === "#app" || name === "nuxt/app")
+        return toExports([...NUXT_STAND_INS]);
+    if (name === "#imports")
+        return toExports(await state.unimport.getImports());
+    if (name === "#components")
+        return componentsModule(state);
+    if (name === PROJECT_MODULE)
+        return projectModule(state);
+    if (name === "virtual:forgebook-nuxt/styles")
+        return state.config.css.map((sheet) => `import ${codeLiteral(sheet)};`).join("\n");
+    return [
+        'import "virtual:forgebook-nuxt/styles";',
+        'import { mountFrame as mountForgebookFrame } from "forgebook/frame";',
+        'import { nuxtRenderer } from "@forgebook/nuxt/renderer";',
+        "export const mountFrame = (container, config) => mountForgebookFrame(container, { ...config, renderer: nuxtRenderer });"
+    ].join("\n");
+};
+/**
+ * The component a template names, as written there (`base-badge` or `BaseBadge`), when the plugin knows it.
+ *
+ * @param written - the name as written.
+ * @param components - the project's components, by name.
+ */
+const namedComponent = (written, components) => {
+    const name = wordsOf(written)
+        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join("");
+    const isLazy = name.startsWith("Lazy") && components.has(name.slice(4));
+    const component = components.get(isLazy ? name.slice(4) : name);
+    const isBuiltIn = BUILT_IN_COMPONENT_NAMES.some((builtIn) => builtIn === name);
+    if (component === undefined && !isBuiltIn)
+        return undefined;
+    return { name, component, isLazy };
+};
+/**
+ * The statement that gives a component its local name.
+ *
+ * @param named - the component.
+ * @param local - its local name.
+ */
+const componentImport = ({ name, component, isLazy }, local) => {
+    if (component === undefined)
+        return `import { ${name} as ${local} } from ${codeLiteral(COMPONENTS_MODULE)};`;
+    if (isLazy)
+        return `const ${local} = __forgebookDefineAsync(() => import(${codeLiteral(component.file)}));`;
+    return `import ${local} from ${codeLiteral(component.file)};`;
+};
+/**
+ * A template's components given their imports, as Nuxt's loader writes them: Nuxt's own, the project's, and a project
+ * component's `Lazy` form loaded when it is first drawn.
+ *
+ * @param code - the compiled component.
+ * @param components - the project's components, by name.
+ * @returns the code changed, or none when it names no component the plugin knows.
+ */
+export const withComponentImports = (code, components) => {
+    const locals = new Map();
+    const statements = [];
+    for (const match of code.original.matchAll(RESOLVE_COMPONENT)) {
+        const named = namedComponent(match[2] ?? "", components);
+        if (named === undefined)
+            continue;
+        const local = locals.get(named.name) ?? `__nuxt_component_${locals.size}`;
+        if (!locals.has(named.name)) {
+            locals.set(named.name, local);
+            statements.push(componentImport(named, local));
+        }
+        code.overwrite(match.index, match.index + match[0].length, local);
+    }
+    if (locals.size === 0)
+        return undefined;
+    const isAsyncUsed = statements.some((line) => line.includes("__forgebookDefineAsync"));
+    const asyncImport = isAsyncUsed
+        ? 'import { defineAsyncComponent as __forgebookDefineAsync } from "vue";\n'
+        : "";
+    code.prepend(`${asyncImport}${statements.join("\n")}\n`);
+    return code;
+};
+/** Nuxt 3's names for where code runs, as a project's code writes them. */
+const PROCESS_FLAG = /(?<![\w$.])process\.(client|server|browser|dev)\b/g;
+/**
+ * Nuxt 3's `process.client`, `process.server`, `process.browser` and `process.dev` written as their values in a
+ * project's file. Only there: given to the whole page (Vite's `define`), they would reach the libraries the frame
+ * loads, and one that reads `process.browser` would then read `process.env`, which the page does not have.
+ *
+ * @param code - the file's code, changed in place.
+ * @param isDev - whether the catalogue runs in development.
+ * @returns whether one was written.
+ */
+export const withProcessFlags = (code, isDev) => {
+    const values = {
+        client: "true",
+        browser: "true",
+        server: "false",
+        dev: codeLiteral(isDev)
+    };
+    let isWritten = false;
+    for (const match of code.original.matchAll(PROCESS_FLAG)) {
+        code.overwrite(match.index, match.index + match[0].length, values[match[1] ?? ""] ?? match[0]);
+        isWritten = true;
+    }
+    return isWritten;
+};
+/**
+ * Whether a file is one of the project's own: inside its folder, not in a folder beside it whose name starts the same
+ * (`app-admin` beside `app`).
+ *
+ * @param file - the file, as Vite names it.
+ * @param rootDir - the project's folder.
+ */
+export const isProjectFile = (file, rootDir) => file.startsWith(`${normalizePath(rootDir).replace(/\/$/, "")}/`);
+/**
+ * Says which component files were left out, and why.
+ *
+ * @param logger - Vite's logger.
+ * @param skipped - the files.
+ */
+const warnSkipped = (logger, skipped) => {
+    for (const file of skipped)
+        logger.warn(`[forgebook] ${file} is not a component: its name is not a name code can hold`);
+};
+/**
+ * A project file's code given what Nuxt's build gives it: its components' imports, Nuxt 3's flags, the keys of its
+ * calls' places and its auto-imports.
+ *
+ * @param source - the code, changed in place.
+ * @param state - the project.
+ * @param file - the file, from the project's folder: the keys are made from it.
+ * @param id - the module, as Vite names it.
+ * @param isDev - whether the catalogue runs in development.
+ * @returns whether anything was written.
+ */
+const withNuxtCode = async (source, state, file, id, isDev) => {
+    const code = source.original;
+    const hasComponents = withComponentImports(source, state.components) !== undefined;
+    const hasProcessFlags = withProcessFlags(source, isDev);
+    const hasKeys = KEYED_CALL.test(code) && withPlaceKeys(source, parseAst(code), file);
+    const result = state.config.isAutoImport
+        ? await state.unimport.injectImports(source, id, { autoImport: true })
+        : undefined;
+    return hasComponents || hasProcessFlags || hasKeys || (result !== undefined && result.imports.length > 0);
+};
+/**
+ * The aliases of a Nuxt project: its own, then `~~`, `@@`, `~`, `@`, `#shared`, `assets` and `public` as Nuxt gives
+ * them.
+ *
+ * @param config - the project's config.
+ */
+const aliasesOf = (config) => {
+    const prefix = (name) => new RegExp(`^${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?=/|$)`);
+    return [
+        ...Object.entries(config.alias).map(([name, path]) => ({ find: prefix(name), replacement: path })),
+        { find: prefix("~~"), replacement: config.rootDir },
+        { find: prefix("@@"), replacement: config.rootDir },
+        { find: prefix("~"), replacement: config.srcDir },
+        { find: prefix("@"), replacement: config.srcDir },
+        { find: prefix("#shared"), replacement: `${config.rootDir}/shared` },
+        { find: /^assets(?=\/)/, replacement: `${config.srcDir}/assets` },
+        { find: /^public(?=\/)/, replacement: `${config.rootDir}/public` }
+    ];
+};
+/**
+ * The plugins of a Nuxt catalogue.
+ *
+ * @param options - the options of `nuxt()`.
+ * @returns the plugins.
+ */
+export const nuxtPlugins = (options = {}) => {
+    let state;
+    let env = {};
+    let problem;
+    let isDev = true;
+    const project = () => {
+        if (state === undefined)
+            throw new Error("The Nuxt project is read when Vite's configuration is");
+        return state;
+    };
+    const main = {
+        name: "forgebook:nuxt",
+        enforce: "pre",
+        config: async (userConfig, environment) => {
+            const rootDir = join(userConfig.root ?? process.cwd(), options.dir ?? ".");
+            const loaded = await loadNuxtConfig(rootDir);
+            problem = loaded.problem;
+            // Nuxt's variables only: the environment's others never reach the page
+            env = loadEnv(environment.mode, rootDir, "NUXT_");
+            state = await readProject(loaded.config, env);
+            isDev = environment.command === "serve";
+            return {
+                resolve: { alias: aliasesOf(loaded.config) },
+                define: {
+                    "import.meta.client": "true",
+                    "import.meta.browser": "true",
+                    "import.meta.server": "false",
+                    "import.meta.nitro": "false",
+                    "import.meta.prerender": "false",
+                    "import.meta.dev": codeLiteral(isDev),
+                    "import.meta.test": "false"
+                },
+                // the stand-ins and the renderer are one module graph, served from their sources: see the module's remarks
+                optimizeDeps: { exclude: ["@forgebook/nuxt"] },
+                ssr: { noExternal: ["@forgebook/nuxt"] }
+            };
+        },
+        configResolved: (config) => {
+            if (problem !== undefined)
+                config.logger.warn(`[forgebook] ${problem}`);
+            warnSkipped(config.logger, project().skipped);
+        },
+        resolveId: (id) => {
+            if (VIRTUAL_MODULES.some((name) => name === id))
+                return resolvedId(id);
+            // a deep import of Nuxt's app (`#app/composables/router`) names a part of what `#app` exports
+            if (id.startsWith("#app/") || id.startsWith("nuxt/app/"))
+                return resolvedId("#app");
+            if (BUILD_MODULE.test(id))
+                return resolvedId(`build:${id.slice(1)}`);
+            return undefined;
+        },
+        load: async (id) => {
+            if (!id.startsWith(RESOLVED))
+                return undefined;
+            const name = nameOfId(id);
+            if (name.startsWith("build:"))
+                return `throw new Error(${codeLiteral(`#${name.slice(6)} is written by Nuxt's build, which a catalogue does not run`)});`;
+            return virtualModule(name, project());
+        },
+        configureServer: (server) => {
+            const isWatched = (file, isAddedOrRemoved) => {
+                const { config } = project();
+                // the watcher names a file as the system writes it, the config's folders are in Vite's form
+                const isIn = (dir) => normalizePath(file).startsWith(`${dir}/`);
+                // an added or removed page or component changes the project; an edited one only its own module
+                if (config.importsDirs.some(isIn))
+                    return true;
+                return (isAddedOrRemoved && [config.pagesDir, ...config.componentsDirs.map((dir) => dir.path)].some(isIn));
+            };
+            const reread = async (file, isAddedOrRemoved) => {
+                if (!isWatched(file, isAddedOrRemoved))
+                    return;
+                const before = shapeOf(project());
+                state = await readProject(project().config, env);
+                warnSkipped(server.config.logger, project().skipped);
+                // an edit that changes no export of a composable leaves the page to its hot update
+                if (shapeOf(project()) === before)
+                    return;
+                for (const name of VIRTUAL_MODULES) {
+                    const module = server.moduleGraph.getModuleById(resolvedId(name));
+                    if (module !== undefined)
+                        server.moduleGraph.invalidateModule(module);
+                }
+                server.ws.send({ type: "full-reload" });
+            };
+            server.watcher.on("add", (file) => void reread(file, true));
+            server.watcher.on("unlink", (file) => void reread(file, true));
+            server.watcher.on("change", (file) => void reread(file, false));
+        }
+    };
+    // after Vue's plugin has compiled a component, before Vite's own post plugins resolve the imports this one adds
+    const imports = {
+        name: "forgebook:nuxt-imports",
+        enforce: "post",
+        transform: {
+            async handler(code, id) {
+                const [file = "", query = ""] = id.split("?");
+                if (id.startsWith("\0") || !CODE_FILE.test(file) || file.includes("/node_modules/"))
+                    return undefined;
+                if (query !== "" && !query.includes("type=script"))
+                    return undefined;
+                const current = project();
+                if (!isProjectFile(file, current.config.rootDir))
+                    return undefined;
+                const source = new MagicString(code);
+                if (!(await withNuxtCode(source, current, posix.relative(current.config.rootDir, file), id, isDev)))
+                    return undefined;
+                return { code: source.toString(), map: source.generateMap({ hires: "boundary", source: id }) };
+            }
+        }
+    };
+    return [main, imports];
+};

package/dist/src/vite/pageRoutes.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The routes of a Nuxt project's pages, named and written as Nuxt makes them from the files: `pages/blog/[slug].vue` is
+ * `/blog/:slug()`, named `blog-slug`.
+ *
+ * @remarks
+ * Pure: paths in, routes out. A story needs a page's route to set its params and its name, so `useRoute()` returns
+ * what the page would see; it draws its own component, not the page, so the routes are flat: a parent page and its
+ * children are each a route with its full path, the parent left out when an `index` child takes its path. `definePageMeta`'s `path` and `name` are not
+ * read: they need the page's code run.
+ *
+ * @module
+ */
+import type { ProjectRoute } from "../project.ts";
+/** The extensions of a page. */
+export declare const PAGE_EXTENSIONS: RegExp;
+/**
+ * The routes of a project's pages.
+ *
+ * @param files - the pages' paths from the pages' folder, with `/` (`blog/[slug].vue`).
+ * @returns the routes; a page whose folder has an `index` page is left out, since that page carries its path and name,
+ * as in Nuxt, where the parent keeps neither.
+ */
+export declare const pageRoutes: (files: readonly string[]) => ProjectRoute[];

package/dist/src/vite/pageRoutes.js

@@ -0,0 +1,88 @@
+/** The extensions of a page. */
+export const PAGE_EXTENSIONS = /\.(vue|tsx|jsx|ts|js|mjs)$/;
+/**
+ * A segment of a page's path split into its pieces: `[slug]`, `[[slug]]`, `[...slug]` and `[[...slug]]` are params.
+ *
+ * @param segment - the segment (`post-[id]`).
+ */
+const tokensOf = (segment) => {
+    const tokens = [];
+    const pattern = /\[\[\.\.\.([^\]]+)\]\]|\[\[([^\]]+)\]\]|\[\.\.\.([^\]]+)\]|\[([^\]]+)\]/g;
+    let last = 0;
+    for (const match of segment.matchAll(pattern)) {
+        if (match.index > last)
+            tokens.push({ kind: "text", value: segment.slice(last, match.index) });
+        const [, optionalCatchAll, optional, catchAll, param] = match;
+        if (optionalCatchAll !== undefined)
+            tokens.push({ kind: "catchAll", value: optionalCatchAll });
+        else if (optional !== undefined)
+            tokens.push({ kind: "optional", value: optional });
+        else if (catchAll !== undefined)
+            tokens.push({ kind: "catchAll", value: catchAll });
+        else if (param !== undefined)
+            tokens.push({ kind: "param", value: param });
+        last = match.index + match[0].length;
+    }
+    if (last < segment.length)
+        tokens.push({ kind: "text", value: segment.slice(last) });
+    return tokens;
+};
+/**
+ * A segment as vue-router writes it: a catch-all takes the rest of the path when it ends it, else what is left of its
+ * own segment, as Nuxt writes it.
+ *
+ * @param tokens - the segment's pieces.
+ * @param isLast - whether the segment ends the path.
+ */
+const pathOfTokens = (tokens, isLast) => tokens
+    .map((token) => {
+    if (token.kind === "text")
+        return token.value;
+    if (token.kind === "param")
+        return `:${token.value}()`;
+    if (token.kind === "optional")
+        return `:${token.value}?`;
+    return isLast ? `:${token.value}(.*)*` : `:${token.value}([^/]*)*`;
+})
+    .join("");
+/**
+ * The route of a page.
+ *
+ * @param file - the page's path from the pages' folder, with `/` (`blog/[slug].vue`).
+ * @returns its route, or none for a file Nuxt ignores (`-draft.vue`).
+ */
+const routeOf = (file) => {
+    const segments = file.replace(PAGE_EXTENSIONS, "").split("/");
+    if (segments.some((segment) => segment.startsWith("-")))
+        return undefined;
+    // a route group, `(admin)`, is a folder that is not part of the path or the name
+    const kept = segments.filter((segment) => !/^\(.*\)$/.test(segment));
+    const isIndex = kept.at(-1) === "index";
+    const named = isIndex ? kept.slice(0, -1) : kept;
+    const path = `/${named.map((segment, index) => pathOfTokens(tokensOf(segment), index === named.length - 1)).join("/")}`;
+    const name = named.map((segment) => segment.replace(/\[\[?(\.\.\.)?|\]\]?/g, "")).join("-");
+    return { path, name: name === "" ? "index" : name };
+};
+/**
+ * The routes of a project's pages.
+ *
+ * @param files - the pages' paths from the pages' folder, with `/` (`blog/[slug].vue`).
+ * @returns the routes; a page whose folder has an `index` page is left out, since that page carries its path and name,
+ * as in Nuxt, where the parent keeps neither.
+ */
+export const pageRoutes = (files) => {
+    const pages = files.filter((file) => PAGE_EXTENSIONS.test(file));
+    const indexed = new Set(pages.flatMap((file) => {
+        const parts = file.replace(PAGE_EXTENSIONS, "").split("/");
+        return parts.length > 1 && parts.at(-1) === "index" ? [parts.slice(0, -1).join("/")] : [];
+    }));
+    const routes = new Map();
+    for (const file of pages) {
+        if (indexed.has(file.replace(PAGE_EXTENSIONS, "")))
+            continue;
+        const route = routeOf(file);
+        if (route !== undefined && !routes.has(route.name))
+            routes.set(route.name, route);
+    }
+    return [...routes.values()];
+};

package/dist/src/vite/placeKeys.d.ts

@@ -0,0 +1,10 @@
+import type MagicString from "magic-string";
+/**
+ * Gives each call to a keyed function without a key the key of its place.
+ *
+ * @param code - the file's code, changed in place.
+ * @param program - its syntax tree, whose places are the code's.
+ * @param file - the file, as the project names it, which the keys are made from.
+ * @returns whether a key was written.
+ */
+export declare const withPlaceKeys: (code: MagicString, program: unknown, file: string) => boolean;