prosebook 0.3.0 → 0.5.0

package/src/tools/scan.ts

@@ -232,41 +232,73 @@ const nameOf = (node: Node | undefined): string | undefined =>
       ? String(node.value)
       : undefined;
 
+/** Where `<Text>` comes from: each framework binding's. */
+const TEXT_SOURCES = new Set(['prosebook/react', 'prosebook/preact', 'prosebook/solid', 'prosebook/vue', 'prosebook/svelte']);
+
+/** Single-file components, whose reads are in their scripts and their markup. */
+export const SFC = /\.(?:vue|svelte)$/;
+
+/** Code inside a file, parsed apart: a script block, or an expression in markup, at its offset. */
+interface Piece {
+  code: string;
+  at: number;
+}
+
+/** A single-file component's script blocks, each at its offset. */
+export const scriptBlocks = (code: string): Piece[] =>
+  [...code.matchAll(/(<script\b[^>]*>)([\s\S]*?)<\/script>/g)].map((m) => ({ code: m[2]!, at: m.index + m[1]!.length }));
+
 /**
  * The reads in a module whose key a pruned build can't see, as in `t(item.key)` or `<Text id={id} />`:
  * the build would leave the message out, and the key would show in its place. A build has no types,
  * so readers are known by name: `t` and `rich` called alone or as methods, and any name imported here,
  * which may be bound to one elsewhere (`aliases`); the caller keeps those whose name turns out to be a
- * reader. `<Text>` counts where it is imported from `prosebook/react`. Lines marked `prosebook-ignore`
- * are skipped.
+ * reader. `<Text>` counts where it is imported from a prosebook binding. In a `.vue` or `.svelte` file,
+ * its scripts and the expressions in its markup are read. Lines marked `prosebook-ignore` are skipped.
  */
 export function unseenReads(file: string, code: string): Reads {
-  const { program } = parseSync(file, code);
+  if (!SFC.test(file)) return readsIn(file, code, file, [{ code, at: 0 }]);
+  const vue = file.endsWith('.vue');
+  const markup = blank(code, /<script\b[\s\S]*?<\/script>|<style\b[\s\S]*?<\/style>|<!--[\s\S]*?-->/g);
+  const scripts = scriptBlocks(code);
+  const expressions = vue ? vueExpressions(markup) : svelteExpressions(markup);
+  // Scripts and markup alike may be TypeScript.
+  return readsIn(file, code, 'component.ts', [...scripts, ...expressions], (names, report) => {
+    for (const tag of markupTexts(markup, names, vue)) report(tag.at, tag.end, 'Text');
+  });
+}
+
+type Report = (start: number, end: number, name: string) => void;
+
+function readsIn(file: string, code: string, as: string, pieces: Piece[], markup?: (texts: Set<string>, report: Report) => void): Reads {
+  const programs = pieces.map((piece) => ({ at: piece.at, program: parseSync(as, piece.code).program as unknown as Node }));
   const { position, ignored } = lineIndex(code);
   const unseen: UnseenRead[] = [];
   const aliases = new Set<string>();
   /** Local name to the name it was imported by. */
   const imported = new Map<string, string>();
   const texts = new Set<string>();
-  for (const statement of (program as unknown as Node).body as Node[]) {
-    if (statement.type !== 'ImportDeclaration') continue;
-    for (const s of statement.specifiers as Node[]) {
-      const name = s.type === 'ImportSpecifier' ? nameOf(s.imported as Node) : undefined;
-      const local = nameOf(s.local as Node);
-      if (name === undefined || local === undefined) continue;
-      if (name === 'Text' && (statement.source as Node).value === 'prosebook/react') texts.add(local);
-      else imported.set(local, name);
+  for (const { program } of programs) {
+    for (const statement of program.body as Node[]) {
+      if (statement.type !== 'ImportDeclaration') continue;
+      for (const s of statement.specifiers as Node[]) {
+        const name = s.type === 'ImportSpecifier' ? nameOf(s.imported as Node) : undefined;
+        const local = nameOf(s.local as Node);
+        if (name === undefined || local === undefined) continue;
+        if (name === 'Text' && TEXT_SOURCES.has(String((statement.source as Node).value))) texts.add(local);
+        else imported.set(local, name);
+      }
     }
   }
-  const report = (node: Node, name: string) => {
-    const at = position(node.start);
+  const report: Report = (start, end, name) => {
+    const at = position(start);
     if (ignored(at.line)) return;
-    const text = code.slice(node.start, node.end).replace(/\s+/g, ' ');
+    const text = code.slice(start, end).replace(/\s+/g, ' ');
     unseen.push({ file, ...at, name, code: text.length > 80 ? `${text.slice(0, 77)}...` : text });
   };
   // Calls by a plain name, kept until every alias in the module is known.
-  const calls: [Node, string][] = [];
-  const visit = (node: Node) => {
+  const calls: [start: number, end: number, name: string][] = [];
+  const visit = (node: Node, at: number) => {
     if (node.type === 'ObjectPattern') {
       for (const p of node.properties as Node[]) {
         if (p.type === 'Property' && READERS.has(nameOf(p.key as Node) ?? '') && (p.value as Node).type === 'Identifier')
@@ -275,29 +307,118 @@ export function unseenReads(file: string, code: string): Reads {
     }
     if (node.type === 'CallExpression' && !keySeen((node.arguments as Node[])[0])) {
       const callee = node.callee as Node;
-      if (callee.type === 'Identifier') calls.push([node, callee.name as string]);
+      if (callee.type === 'Identifier') calls.push([at + node.start, at + node.end, callee.name as string]);
       else if (callee.type === 'MemberExpression' && !callee.computed && READERS.has(nameOf(callee.property as Node) ?? ''))
-        report(node, nameOf(callee.property as Node)!);
+        report(at + node.start, at + node.end, nameOf(callee.property as Node)!);
     }
     if (node.type === 'JSXOpeningElement' && texts.has(nameOf(node.name as Node) ?? '')) {
       const id = (node.attributes as Node[]).find((a) => a.type === 'JSXAttribute' && nameOf(a.name as Node) === 'id');
       const value = id?.value as Node | null | undefined;
       if (value !== null && value !== undefined && !keySeen(value.type === 'JSXExpressionContainer' ? (value.expression as Node) : value))
-        report(node, 'Text');
+        report(at + node.start, at + node.end, 'Text');
     }
     for (const value of Object.values(node)) {
       if (Array.isArray(value)) {
-        for (const child of value) if (isNode(child)) visit(child);
+        for (const child of value) if (isNode(child)) visit(child, at);
       } else if (isNode(value)) {
-        visit(value);
+        visit(value, at);
       }
     }
   };
-  visit(program as unknown as Node);
-  for (const [node, local] of calls) {
-    if (READERS.has(local) || aliases.has(local)) report(node, local);
-    else if (imported.has(local)) report(node, imported.get(local)!);
+  for (const { program, at } of programs) visit(program, at);
+  markup?.(texts, report);
+  for (const [start, end, local] of calls) {
+    if (READERS.has(local) || aliases.has(local)) report(start, end, local);
+    else if (imported.has(local)) report(start, end, imported.get(local)!);
   }
   unseen.sort((a, b) => (a.line === b.line ? a.column - b.column : a.line - b.line));
   return { unseen, aliases };
 }
+
+/** `code` with each match of `pattern` blanked to spaces, its lines kept, so offsets still point into the file. */
+const blank = (code: string, pattern: RegExp) => code.replace(pattern, (m) => m.replace(/[^\n]/g, ' '));
+
+/** A Vue template's expressions: `{{ ... }}`, and the values of bound attributes and directives. */
+function vueExpressions(markup: string): Piece[] {
+  const pieces: Piece[] = [];
+  for (const m of markup.matchAll(/\{\{([\s\S]*?)\}\}/g)) pieces.push({ code: m[1]!, at: m.index + 2 });
+  for (const m of markup.matchAll(/\s((?::|@|v-)[^\s=>/"']*)\s*=\s*(["'])([\s\S]*?)\2/g)) {
+    // A loop's and a slot's values bind names; they read nothing.
+    if (/^v-(?:for|slot)\b/.test(m[1]!)) continue;
+    pieces.push({ code: m[3]!, at: m.index + m[0].length - m[3]!.length - 1 });
+  }
+  return pieces;
+}
+
+/** Where the `}` closing the `{` at `start` is, past strings and nested braces; -1 if none does. */
+function closing(text: string, start: number): number {
+  let depth = 0;
+  for (let i = start; i < text.length; i++) {
+    const c = text[i]!;
+    if (c === '"' || c === "'" || c === '`') {
+      const end = text.indexOf(c, i + 1);
+      if (end === -1) return -1;
+      i = end;
+    } else if (c === '{') {
+      depth++;
+    } else if (c === '}' && --depth === 0) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+/** A Svelte template's expressions: each `{...}`, a block's or tag's past its keyword. */
+function svelteExpressions(markup: string): Piece[] {
+  const pieces: Piece[] = [];
+  for (let start = markup.indexOf('{'); start !== -1;) {
+    const end = closing(markup, start);
+    if (end === -1) break;
+    const at = start + 1;
+    const inner = markup.slice(at, end);
+    const tag = /^\s*([#:@/])(\w*)(\s+if\b)?/.exec(inner);
+    if (tag === null) {
+      // A spread, `{...props}`, reads as the object it spreads.
+      pieces.push({ code: inner.replace('...', '   '), at });
+    } else {
+      const [head, sigil, word, elseIf] = tag;
+      // `{/if}`, `{:else}` and `{:then x}` hold no expression, and `{#snippet}` names parameters.
+      const reads = sigil !== '/' && word !== 'snippet' && word !== 'then' && word !== 'catch' && (word !== 'else' || elseIf !== undefined);
+      // `{@const x = ...}` declares; `{#each xs as x}` and `{#await p then x}` bind names after the expression.
+      if (reads && word === 'const') pieces.push({ code: `var${inner.slice(head.length)}`, at: at + head.length - 3 });
+      else if (reads) pieces.push({ code: inner.slice(head.length).split(/\s+(?:as|then)\s/)[0]!, at: at + head.length });
+    }
+    start = markup.indexOf('{', end + 1);
+  }
+  return pieces;
+}
+
+/**
+ * Each `<Text>` in markup whose key the build can't see: Vue's `:id="..."`, Svelte's `id={...}`,
+ * `{id}` or `id="text {with} a placeholder"`. An `id` written as plain text is a key `keyRefs` reads.
+ */
+function markupTexts(markup: string, names: Set<string>, vue: boolean): { at: number; end: number }[] {
+  if (names.size === 0) return [];
+  const found: { at: number; end: number }[] = [];
+  const tags = new RegExp(`<(?:${[...names].join('|')})(?=[\\s/>])((?:[^>"']|"[^"]*"|'[^']*')*)>`, 'g');
+  for (const m of markup.matchAll(tags)) {
+    const attributes = m[1]!;
+    let id: string | undefined;
+    if (vue) {
+      id = /(?:^|\s)(?::|v-bind:)id\s*=\s*(["'])([\s\S]*?)\1/.exec(attributes)?.[2];
+    } else {
+      const bound = /(?:^|\s)id\s*=\s*\{/.exec(attributes);
+      if (bound !== null) {
+        const open = bound.index + bound[0].length - 1;
+        id = attributes.slice(open + 1, closing(attributes, open));
+      } else if (/(?:^|\s)\{\s*id\s*\}/.test(attributes) || /(?:^|\s)id\s*=\s*(["'])[^"']*\{/.test(attributes)) {
+        id = 'id';
+      }
+    }
+    if (id === undefined) continue;
+    const [statement] = parseSync('id.ts', `(${id})`).program.body as unknown as Node[];
+    if (!keySeen(statement?.type === 'ExpressionStatement' ? (statement.expression as Node) : undefined))
+      found.push({ at: m.index, end: m.index + m[0].length });
+  }
+  return found;
+}

package/src/tools/todo.ts

@@ -27,7 +27,7 @@ export function todoOf(
   locale: string,
   prompt = false,
 ): Todo {
-  const wanted = catalog.messages.filter((m) => !m.translations.has(locale) || stale.has(m.key));
+  const wanted = todoMessages(catalog, stale, locale);
   if (wanted.length === 0) return { count: 0, text: `# ${locale} is complete` };
   const byArea = new Map<string, string[]>();
   for (const m of wanted) {
@@ -58,6 +58,11 @@ export function todoOf(
   return { count, text: `${head}\n${entries}` };
 }
 
+/** The entries a locale wants a translation of: those it lacks, and those gone stale. */
+export function todoMessages(catalog: Catalog, stale: ReadonlyMap<string, StaleTranslation>, locale: string): Message[] {
+  return catalog.messages.filter((m) => !m.translations.has(locale) || stale.has(m.key));
+}
+
 function promptFor(config: ResolvedConfig, wanted: Message[], locale: string, anyStale: boolean): string {
   const mf2 = config.messageFormat === 2;
   const [target, source] = [nameOf(locale), nameOf(config.source)];

package/src/vite.ts

@@ -6,6 +6,15 @@
  * code names: each locale module is swapped for its messages less the keys no module references
  * (see `tools/scan.ts` for how a reference is found, and why it errs towards keeping).
  *
+ * With `split`, a client's catalog has no messages of its own: each module naming an area's keys
+ * imports a module for that area, which the bundler places beside it, and which registers the area
+ * (`addArea`) and waits until every copy holds it in its locale. Areas are found by the same
+ * references pruning reads, so a read pruning can't see is one splitting can't place either. A lazy
+ * locale's part is a file per group of areas the bundler will put in one chunk (`tools/chunks.ts`),
+ * read from the source when the build starts, as an area loads before every module naming it has.
+ * The client build writes down the file each area loads from per lazy locale, and the server build
+ * after it gives its catalog that list (`areaFiles`), so a server render can link what it read.
+ *
  * In dev an edit doesn't reload the page: each generated locale module accepts its own update and
  * hands the new messages to every copy (`HotHook`), which re-renders in the locale and state it was in.
  * The index accepts its own too, since its doc comments change with the source text, and reloads the
@@ -15,18 +24,39 @@
  * inspector asks for through Vite's own `/__open-in-editor`, so the editor is whichever Vite already
  * launches.
  */
-import { relative, resolve } from 'node:path';
+import { existsSync, readFileSync } from 'node:fs';
+import { join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import type { Plugin } from 'vite';
 
-import { beside, HOT_INDEX, HOT_SET, hotLocale, installInspector, keeper, unseenMessage, unseenOf, type Prune } from './tools/bundle.ts';
+import {
+  AREA,
+  areaModule,
+  areasNamed,
+  lazyAreas,
+  beside,
+  HOT_INDEX,
+  HOT_SET,
+  hotLocale,
+  importingAreas,
+  inAreas,
+  installInspector,
+  keeper,
+  membersOf,
+  splitIndex,
+  unseenMessage,
+  unseenOf,
+  type Groups,
+  type Prune,
+} from './tools/bundle.ts';
 import { CatalogError, type EntryLocation } from './tools/catalog.ts';
+import { areaGroups } from './tools/chunks.ts';
 import { compileLocale, localeExpression } from './tools/compile.ts';
 import { loadConfig, type ProsebookConfig, type ResolvedConfig } from './tools/config.ts';
 import { inspectorEndpoints, nodeMiddleware, redirect } from './tools/endpoints.ts';
-import { generate, type Generated } from './tools/generate.ts';
-import { keyRefs, unseenReads, type KeyRefs, type Reads } from './tools/scan.ts';
+import { generate, writeFiles, type Generated } from './tools/generate.ts';
+import { keyRefs, SFC, unseenReads, type KeyRefs, type Reads } from './tools/scan.ts';
 
 export interface ProsebookPluginOptions {
   /** The config, inline. Without it, `prosebook.config.*` at `root` is read. */
@@ -42,19 +72,37 @@ export interface ProsebookPluginOptions {
    * pruned. `loose` prunes without that check; `false` ships every message.
    */
   prune?: Prune;
-  /** Keys a build always keeps, exactly or as `prefix.*`: for keys built at runtime from data. */
+  /**
+   * Keys a build always keeps, exactly or as `prefix.*`: for keys built at runtime from data. With
+   * `split`, their areas load with the catalog.
+   */
   keep?: string[];
+  /**
+   * Split each locale by area, so a lazy route loads only the messages it reads: a module that names
+   * an area's keys imports that area, which the bundler places beside it, and a lazy locale loads
+   * each area as it is needed. In the browser only: a server render loads whole locales, and its
+   * catalog lists each area's files, which a copy's `preload` hands on as the render reads them.
+   */
+  split?: boolean;
   /** In dev, Alt-click a string on the page to open its entry in the editor. On by default. */
   inspect?: boolean;
 }
 
 const PLACEHOLDER = /__PROSEBOOK_LOCALE_(\d+)__/g;
-const SCRIPT = /\.[cm]?[jt]sx?$/;
+const SCRIPT = /\.(?:[cm]?[jt]sx?|vue|svelte)$/;
 const DEV = 'virtual:prosebook/dev';
 const DEV_ID = '\0prosebook/dev';
+const AREA_ID = '\0prosebook/area/';
 
 const normalize = (path: string) => resolve(path).replaceAll('\\', '/');
 
+/** Where a split client build leaves its area files for the server build: apart from the source and the output. */
+const areaFilesPath = (root: string) => join(root, 'node_modules', '.prosebook', 'area-files.json');
+
+/** The index with `areaFiles` among its catalog's fields. */
+const withAreaFiles = (index: string, files: unknown) =>
+  index.replace(/defineCatalog(?:<[^>]*>)?\(\{/, (call) => `${call}\n  areaFiles: ${JSON.stringify(files)},`);
+
 const inspectorPath = beside(import.meta.url, 'inspector');
 // prosebook's own modules, which read keys handed to them: `<Text>` calls `rich(props.id)`.
 const ownDir = normalize(fileURLToPath(new URL('.', import.meta.url)));
@@ -69,7 +117,9 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
   let refs: KeyRefs = { exact: new Set(), prefixes: new Set() };
   const reads = new Map<string, Reads>();
   const prune = options.prune ?? 'strict';
-  const placeholders: string[] = [];
+  // What each placeholder stands for: a locale's messages, or with `split`, some areas' of them.
+  const placeholders: { locale: string; areas?: string[] }[] = [];
+  let groups: Groups = new Map();
   const shipped = { total: 0, kept: 0 };
 
   const describe = (e: unknown) => (e instanceof CatalogError ? e.message : e instanceof Error ? (e.stack ?? e.message) : String(e));
@@ -88,6 +138,10 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
     return path === `${out}/index.ts` || path === `${out}/index.js`;
   };
 
+  // Split in the browser only: a server render's copies, one per request, load whole locales.
+  const splitting = (ssr: boolean | undefined) => options.split === true && ssr !== true && generated !== undefined;
+  const placeholder = (locale: string, areas?: string[]) => `__PROSEBOOK_LOCALE_${placeholders.push({ locale, areas }) - 1}__`;
+
   return {
     name: 'prosebook',
 
@@ -99,7 +153,9 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
     },
 
     resolveId(id) {
-      return id === DEV ? DEV_ID : null;
+      if (id === DEV) return DEV_ID;
+      if (id.startsWith(AREA)) return AREA_ID + id.slice(AREA.length);
+      return null;
     },
 
     buildStart() {
@@ -109,8 +165,9 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
         this.error(describe(e));
       }
       refs = { exact: new Set(), prefixes: new Set() };
-      kept = keeper(refs, options.keep);
+      kept = prune === false ? () => true : keeper(refs, options.keep);
       reads.clear();
+      groups = building && options.split === true && generated !== undefined ? areaGroups(config, generated, options.keep) : new Map();
       placeholders.length = 0;
       shipped.total = shipped.kept = 0;
     },
@@ -123,6 +180,8 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
         if (!path.endsWith('.yaml') || !dirs.some((d) => path.startsWith(`${d}/`))) return;
         try {
           generated = generate(config);
+          // An area's module names the locales, which an edit may have added to.
+          for (const [id, mod] of server.moduleGraph.idToModuleMap) if (id.startsWith(AREA_ID)) server.moduleGraph.invalidateModule(mod);
           server.config.logger.info(`prosebook: regenerated from ${relative(config.root, path).replaceAll('\\', '/')}`, {
             timestamp: true,
           });
@@ -142,16 +201,26 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
       server.middlewares.use(nodeMiddleware(inspectorEndpoints(config, { base, open: editor })));
     },
 
-    load(id) {
+    load(id, loadOptions) {
       if (id === DEV_ID) {
         if (options.inspect === false) return HOT_SET;
         return HOT_SET + installInspector(inspectorPath, base);
       }
+      if (id.startsWith(AREA_ID) && generated !== undefined) {
+        const [area = '', locale] = id.slice(AREA_ID.length).split('/');
+        if (locale !== undefined) return `export default ${placeholder(locale, membersOf(groups, area))};\n`;
+        return areaModule(config, generated, area, building ? (l) => placeholder(l, [area]) : undefined, undefined, groups);
+      }
+      if (splitting(loadOptions?.ssr) && isIndex(id)) return splitIndex(config, generated!, options.keep);
+      if (building && options.split === true && loadOptions?.ssr === true && isIndex(id)) {
+        const path = areaFilesPath(viteRoot);
+        if (existsSync(path)) return withAreaFiles(readFileSync(id.split('?', 1)[0]!, 'utf8'), JSON.parse(readFileSync(path, 'utf8')));
+        this.warn('no split client build to link area files from: build the client before the server, or `preload` is handed nothing');
+      }
       if (!building || prune === false || generated === undefined) return null;
       const locale = localeOf(id);
       if (locale === undefined) return null;
-      placeholders.push(locale);
-      return `export default __PROSEBOOK_LOCALE_${placeholders.length - 1}__;\n`;
+      return `export default ${placeholder(locale)};\n`;
     },
 
     // Before other plugins, so a read is found in the source as written: `<Text id>` still JSX, and
@@ -159,21 +228,31 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
     transform: {
       order: 'pre',
       handler(code, id, transformOptions) {
+        const ssr = transformOptions?.ssr;
         if (!building) {
           const locale = localeOf(id);
           if (locale !== undefined) return { code: code + hotLocale(locale), map: null };
-          if (!isIndex(id)) return null;
-          // A server render has no page to inspect, and its copies are made per request.
-          const dev = transformOptions?.ssr === true ? '' : `import ${JSON.stringify(DEV)};\n`;
-          return { code: dev + code + HOT_INDEX, map: null };
+          if (isIndex(id)) {
+            // A server render has no page to inspect, and its copies are made per request.
+            const dev = ssr === true ? '' : `import ${JSON.stringify(DEV)};\n`;
+            return { code: dev + code + HOT_INDEX, map: null };
+          }
+          // The index's `Messages` type names every key, and is read here before its types are stripped.
+        } else if (localeOf(id) !== undefined || isIndex(id)) {
+          return null;
         }
-        if (prune === false || id.includes('/node_modules/') || id.startsWith('\0')) return null;
-        // The index's `Messages` type names every key, and is read here before its types are stripped.
-        if (localeOf(id) !== undefined || isIndex(id)) return null;
-        keyRefs(code, refs);
+        if (id.includes('/node_modules/') || id.startsWith('\0')) return null;
         const path = id.split('?', 1)[0]!;
-        if (prune === 'strict' && SCRIPT.test(path) && !normalize(path).startsWith(`${ownDir}/`)) reads.set(id, unseenReads(path, code));
-        return null;
+        // A component file is read whole, as written; the parts its compiler splits off (`?vue&type=script`) are not again.
+        const part = SFC.test(path) && path !== id;
+        const own = normalize(path).startsWith(`${ownDir}/`);
+        if (building && prune !== false) {
+          keyRefs(code, refs);
+          if (prune === 'strict' && SCRIPT.test(path) && !part && !own) reads.set(id, unseenReads(path, code));
+        }
+        if (!splitting(ssr) || !SCRIPT.test(path) || part || own) return null;
+        const areas = areasNamed(code, lazyAreas(generated!, options.keep));
+        return areas.length === 0 ? null : { code: importingAreas(code, path, areas), map: null };
       },
     },
 
@@ -188,8 +267,9 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
       if (!code.includes('__PROSEBOOK_LOCALE_') || generated === undefined) return null;
       const entries = generated.entries;
       const replaced = code.replace(PLACEHOLDER, (_match, index: string) => {
-        const locale = placeholders[Number(index)]!;
-        const list = entries.get(locale) ?? [];
+        const { locale, areas } = placeholders[Number(index)]!;
+        const all = entries.get(locale) ?? [];
+        const list = areas === undefined ? all : inAreas(all, areas);
         const compiled = compileLocale(list, kept);
         shipped.total += list.length;
         shipped.kept += compiled.rows.length;
@@ -198,11 +278,24 @@ export function prosebook(options: ProsebookPluginOptions = {}): Plugin {
       return { code: replaced, map: null };
     },
 
-    generateBundle() {
+    generateBundle(_output, bundle) {
+      if (building && options.split === true && this.environment.config.consumer === 'client') {
+        // Each lazy locale's part of a group, for the areas in it that locale translates.
+        const files: Record<string, Record<string, string>> = {};
+        for (const chunk of Object.values(bundle)) {
+          if (chunk.type !== 'chunk' || chunk.facadeModuleId?.startsWith(AREA_ID) !== true) continue;
+          const [lead = '', locale] = chunk.facadeModuleId.slice(AREA_ID.length).split('/');
+          if (locale === undefined) continue;
+          const own = generated?.entries.get(locale) ?? [];
+          for (const area of membersOf(groups, lead))
+            if (inAreas(own, [area]).length > 0) (files[area] ??= {})[locale] = base + chunk.fileName;
+        }
+        writeFiles(new Map([[areaFilesPath(viteRoot), `${JSON.stringify(files, null, 2)}\n`]]));
+      }
       if (shipped.total === 0) return;
-      this.info(
-        `shipped ${shipped.kept} of ${shipped.total} messages across ${placeholders.length} locale(s); pruned ${shipped.total - shipped.kept} no code names`,
-      );
+      const locales = new Set(placeholders.map((p) => p.locale)).size;
+      const pruned = prune === false ? '' : `; pruned ${shipped.total - shipped.kept} no code names`;
+      this.info(`shipped ${shipped.kept} of ${shipped.total} messages across ${locales} locale(s)${pruned}`);
     },
   };
 }

package/src/vue/index.ts

@@ -0,0 +1,117 @@
+/**
+ * `prosebook/vue`: the catalog in Vue components.
+ *
+ * `useCopy()` reads through a ref the copy bumps on every change, so a template or `computed` that
+ * reads a message runs again when the locale switches, with nothing to watch by hand. `rich` returns a
+ * `VNode`, which a render function returns as it is and a template renders with
+ * `<component :is="...">`; `<Text>` renders one in a template, its tags from slots.
+ */
+import {
+  computed,
+  defineComponent,
+  Fragment,
+  h,
+  inject,
+  onScopeDispose,
+  provide,
+  shallowRef,
+  type App,
+  type ComputedRef,
+  type InjectionKey,
+  type Plugin,
+  type SetupContext,
+  type Slot,
+  type VNode,
+  type VNodeChild,
+} from 'vue';
+
+import { bindCopy, type BoundCopy, type LooseTextProps } from '#src/runtime/bind.ts';
+import type { Copy } from '#src/runtime/copy.ts';
+import type { RegisteredLocale, RegisteredMessages, TagFn } from '#src/runtime/types.ts';
+
+type M = RegisteredMessages;
+
+/** `Copy`, with `rich` returning a `VNode`, whose reads re-render what calls them. */
+export type VueCopy = BoundCopy<VNodeChild, VNode>;
+
+type Tags = { readonly [tag: string]: TagFn<VNodeChild> };
+
+export interface CopyOptions {
+  /** Tag renderers every rich read gets, beside the copy's own: `link: (chunks) => h('a', { href }, chunks)`. */
+  tags?: Tags;
+}
+
+const KEY: InjectionKey<VueCopy> = Symbol('prosebook');
+
+/** The reader and what stops it following the copy. */
+function bound(copy: Copy, tags: Tags = {}): [VueCopy, () => void] {
+  const version = shallowRef(copy.version);
+  const stop = copy.subscribe(() => {
+    version.value = copy.version;
+  });
+  const reader = bindCopy<VNodeChild, VNode>(copy, tags, {
+    track: () => void version.value,
+    whole: (parts) => h(Fragment, null, parts as VNodeChild[]),
+  });
+  return [reader, stop];
+}
+
+/** The copy for the whole app: `app.use(copyPlugin(copy, { tags }))`. */
+export function copyPlugin(copy: Copy, options: CopyOptions = {}): Plugin {
+  return {
+    install(app: App) {
+      const [reader, stop] = bound(copy, options.tags);
+      app.provide(KEY, reader);
+      app.onUnmount(stop);
+    },
+  };
+}
+
+/** The copy for this component and those under it, in place of the app's. Call it in `setup`. */
+export function provideCopy(copy: Copy, options: CopyOptions = {}): VueCopy {
+  const [reader, stop] = bound(copy, options.tags);
+  provide(KEY, reader);
+  onScopeDispose(stop);
+  return reader;
+}
+
+/** The catalog, in the current locale. A template or `computed` reading it runs again when the locale changes, or in dev the catalog. */
+export function useCopy(): VueCopy {
+  const reader = inject(KEY, null);
+  if (reader === null) throw new Error('prosebook: useCopy() needs copyPlugin(copy) installed, or provideCopy(copy) above it');
+  return reader;
+}
+
+/** The current locale, as a ref. */
+export function useLocale(): ComputedRef<RegisteredLocale> {
+  const reader = useCopy();
+  return computed(() => reader.locale);
+}
+
+/** A slot per tag: each gets what the tag wraps as `chunks`, a `VNode` to render with `<component :is="chunks" />`. */
+export type TextSlots = { [tag: string]: Slot<{ chunks: VNode }> | undefined };
+
+export type TextProps<K extends Extract<keyof M, string>> = LooseTextProps<K, VNodeChild>;
+
+/**
+ * A message in a template: `<Text id="cart.items" :values="{ count }" />`. Its tags render through
+ * a slot of the same name, a function in `values` or the provider's renderers, in that order.
+ *
+ * ```vue
+ * <Text id="cart.terms">
+ *   <template #link="{ chunks }"><a href="/terms"><component :is="chunks" /></a></template>
+ * </Text>
+ * ```
+ */
+export const Text = defineComponent(
+  (props: { id: string; values?: object }, { slots }: SetupContext) => {
+    const copy = useCopy();
+    return () => {
+      const fromSlots: Record<string, unknown> = {};
+      for (const [name, slot] of Object.entries(slots))
+        if (slot !== undefined) fromSlots[name] = (chunks: VNodeChild[]) => slot({ chunks: h(Fragment, null, chunks) });
+      return copy.rich(props.id as never, { ...fromSlots, ...props.values } as never);
+    };
+  },
+  { name: 'Text', props: ['id', 'values'] },
+) as unknown as <K extends Extract<keyof M, string>>(props: TextProps<K>, context: { slots: TextSlots }) => VNode;