prosebook 0.4.0 → 0.5.0

package/src/tools/native/swift.ts

@@ -3,6 +3,7 @@
  * message, and a file-private enum holding what formats them.
  */
 import type { NativeTarget } from '#src/tools/config.ts';
+import { pieceExpr, type DateSpec } from './date.ts';
 import { camel, checkNames, conditionCode, float, leading, stringLiteral, wordsOf } from './emit.ts';
 import type { NativeMessage, NativeModel, Part } from './model.ts';
 import type { NumberSpec } from './number.ts';
@@ -36,6 +37,7 @@ function value(part: Exclude<Part, { type: 'text' }>, indent: string, rt: string
     const of = part.offset === 0 ? argName(part.arg) : `${argName(part.arg)} - ${float(part.offset)}`;
     return `${rt}.number(${of}, ${rt}.f${part.format}, ${lit(part.fallback)})`;
   }
+  if (part.type === 'date') return `${rt}.d${part.format}(${argName(part.arg)})`;
   if (part.type === 'select') {
     const arms = part.arms.map((a) => `${inner}case ${lit(a.key)}: return ${expr(a.parts, inner, rt)}\n`).join('');
     return `{ () -> String in\n${inner}switch ${argName(part.arg)} {\n${arms}${inner}default: return ${expr(part.other, inner, rt)}\n${inner}}\n${indent}}()`;
@@ -66,10 +68,17 @@ function member(m: NativeMessage, name: string, rt: string, number: NumberProtoc
   const head = doc(argDocs.length > 0 ? [...m.doc, '', ...argDocs] : m.doc, '    ');
   const body = `        switch self {\n${cases((parts) => expr(parts, '        ', rt))}        }\n`;
   if (m.args.length === 0) return `${head}    public var ${name}: String {\n${body}    }\n`;
-  const params = m.args.map((a) => `${argName(a.name)}: ${a.type === 'number' ? `some ${number.type}` : 'String'}`).join(', ');
+  const params = m.args
+    .map((a) => `${argName(a.name)}: ${a.type === 'number' ? `some ${number.type}` : a.type === 'date' ? 'Date' : 'String'}`)
+    .join(', ');
   const numbers = m.args
-    .filter((a) => a.type === 'number')
-    .map((a) => `        let ${argName(a.name)} = ${argName(a.name)}.${number.value}\n`)
+    .map((a) =>
+      a.type === 'number'
+        ? `        let ${argName(a.name)} = ${argName(a.name)}.${number.value}\n`
+        : a.type === 'date'
+          ? `        let ${argName(a.name)} = ${rt}.clock(${argName(a.name)})\n`
+          : '',
+    )
     .join('');
   return `${head}    public func ${name}(${params}) -> String {\n${numbers}${body}    }\n`;
 }
@@ -97,6 +106,51 @@ function formatConst(spec: NumberSpec, i: number): string {
   return `    static let f${i} = Format(\n${fields.map((f) => `        ${f}`).join(',\n')}\n    )\n`;
 }
 
+/** A date format as a function of the clock's fields. */
+function dateFn(spec: DateSpec, i: number): string {
+  const digits = spec.digits === undefined ? 'nil' : `g${i}`;
+  const at = (field: string) => `t.${field}`;
+  const lines = spec.pieces.map((piece) => {
+    if (piece.type === 'text') return `s += ${lit(piece.value)}`;
+    if (piece.type === 'name') return `s += [${piece.names.map(lit).join(', ')}][${pieceExpr(piece, at)}]`;
+    return `s += pad(${pieceExpr(piece, at)}, ${piece.pad}, ${digits})`;
+  });
+  const table = spec.digits === undefined ? '' : `    static let g${i} = [${spec.digits.map(lit).join(', ')}]\n`;
+  const body = lines.map((l) => `        ${l}\n`).join('');
+  return `${table}    static func d${i}(_ t: Clock) -> String {\n        var s = ""\n${body}        return s\n    }\n`;
+}
+
+const DATE = `
+    /// A date as the clock shows it in the device's time zone; \`weekday\` is 0 for Sunday.
+    struct Clock {
+        let year: Int
+        let month: Int
+        let day: Int
+        let hour: Int
+        let minute: Int
+        let second: Int
+        let weekday: Int
+    }
+
+    static func clock(_ date: Date) -> Clock {
+        var calendar = Calendar(identifier: .gregorian)
+        calendar.timeZone = .current
+        let c = calendar.dateComponents([.year, .month, .day, .hour, .minute, .second, .weekday], from: date)
+        return Clock(
+            year: c.year ?? 0, month: c.month ?? 1, day: c.day ?? 1, hour: c.hour ?? 0, minute: c.minute ?? 0,
+            second: c.second ?? 0, weekday: (c.weekday ?? 1) - 1
+        )
+    }
+
+    /// \`value\` written with at least \`width\` digits, in \`digits\` where the locale has its own.
+    private static func pad(_ value: Int, _ width: Int, _ digits: [String]?) -> String {
+        var text = String(value)
+        while text.count < width { text = "0" + text }
+        guard let digits else { return text }
+        return text.map { c in c.wholeNumberValue.map { digits[$0] } ?? String(c) }.joined()
+    }
+`;
+
 const NUMBER = `
     /// A number format, taken apart when the file was generated.
     struct Format {
@@ -265,6 +319,8 @@ export function swiftFile(model: NativeModel, target: NativeTarget & { name: str
   const number = { type: `${name}Number`, value: `${name.charAt(0).toLowerCase()}${name.slice(1)}Value` };
   const members = model.messages.map((m, i) => member(m, names[i]![1], rt, number)).join('\n');
   const usesNumbers = model.messages.some((m) => m.args.some((a) => a.type === 'number'));
+  const usesDates = model.dates.length > 0;
+  const usesFormats = model.formats.length + model.rules.length > 0;
   const numberProtocol = !usesNumbers
     ? ''
     : `
@@ -285,12 +341,12 @@ ${NUMBER_TYPES.map((t) => `extension ${t}: ${number.type} { public var ${number.
     })
     .join('\n');
   const runtime =
-    model.formats.length + model.rules.length === 0
+    !usesFormats && !usesDates
       ? ''
       : `
 /// What formats the messages, generated with them.
-private enum ${rt} {${NUMBER}${model.rules.length > 0 ? PLURAL : ''}
-${model.formats.map(formatConst).join('\n')}${rules === '' ? '' : `\n${rules}`}}
+private enum ${rt} {${usesFormats ? NUMBER : ''}${model.rules.length > 0 ? PLURAL : ''}${usesDates ? DATE : ''}
+${[...model.formats.map(formatConst), ...model.dates.map(dateFn)].join('\n')}${rules === '' ? '' : `\n${rules}`}}
 `;
 
   return `${banner}

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}`);
     },
   };
 }