prosebook 0.4.0 → 0.5.0

package/src/bun.ts

@@ -11,6 +11,12 @@
  * locale module accepts its own update and hands the new messages to every copy, as under Vite. The
  * index starts the inspector on the page too, whose endpoints are `inspector()`'s routes, spread into
  * `Bun.serve`'s; an entry opens in the editor `Bun.openInEditor` finds.
+ *
+ * With `split`, the page's catalog is split by area as the Vite plugin's is (`tools/bundle.ts`): each
+ * source file under `scan.dirs` naming an area's keys imports the area, a module of the plugin's own
+ * namespace. Bun has no transform hook, so those files are read here and handed back. A build knows
+ * the keys it keeps before it loads anything, so each area loads already pruned, and which areas
+ * share a chunk (`tools/chunks.ts`), so a lazy locale's part is a file per group of them.
  */
 import { readFileSync } from 'node:fs';
 import { basename, resolve } from 'node:path';
@@ -18,19 +24,29 @@ import { basename, resolve } from 'node:path';
 import type { BunPlugin } from 'bun';
 
 import {
+  AREA,
+  areaModule,
+  areasNamed,
+  lazyAreas,
   beside,
   HOT_INDEX,
   HOT_SET,
   hotLocale,
+  importingAreas,
+  inAreas,
   installInspector,
   keeper,
+  membersOf,
   prunedModule,
   scanSources,
+  splitIndex,
   unseenMessage,
   watchCatalog,
   type Prune,
 } from './tools/bundle.ts';
 import { CatalogError } from './tools/catalog.ts';
+import { areaGroups } from './tools/chunks.ts';
+import { compileLocale, localeExpression, type Entry } from './tools/compile.ts';
 import { loadConfig, type ProsebookConfig } from './tools/config.ts';
 import { inspectorEndpoints } from './tools/endpoints.ts';
 import { generate } from './tools/generate.ts';
@@ -46,16 +62,28 @@ export interface ProsebookBunOptions {
    * 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 in the page, as the Vite plugin's `split` does, so a lazy route loads
+   * only the messages it reads. `Bun.build` needs `splitting: true`. A server's own code loads whole
+   * locales.
+   */
+  split?: boolean;
   /** Under the dev server, Alt-click a string on the page to open its entry in the editor. On by default. */
   inspect?: boolean;
 }
 
 const inspectorPath = beside(import.meta.url, 'inspector');
+const NAMESPACE = 'prosebook-area';
 
 const describe = (e: unknown) => (e instanceof CatalogError ? e.message : e instanceof Error ? (e.stack ?? e.message) : String(e));
 const escape = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/** A folder's path as a pattern, by either separator: Bun gives paths with either on Windows. */
+const folderPattern = (path: string) => path.split(/[\\/]/).map(escape).join('[\\\\/]');
 
 export function prosebook(options: ProsebookBunOptions = {}): BunPlugin {
   return {
@@ -63,25 +91,25 @@ export function prosebook(options: ProsebookBunOptions = {}): BunPlugin {
     async setup(build) {
       const config = await loadConfig(resolve(options.root ?? process.cwd()), options.config);
       let generated = generate(config);
-      // The generated modules, by path as Bun gives it: either separator on Windows.
-      const folder = config.out.split(/[\\/]/).map(escape).join('[\\\\/]');
-      const filter = new RegExp(`^${folder}[\\\\/][^\\\\/]+\\.[jt]s$`);
+      // The generated modules, by path as Bun gives it.
+      const filter = new RegExp(`^${folderPattern(config.out)}[\\\\/][^\\\\/]+\\.[jt]s$`);
       const nameOf = (path: string) => basename(path).replace(/\.[jt]s$/, '');
+      const building = 'entrypoints' in build.config;
+      const split = options.split === true;
+      if (building && split && build.config.splitting !== true)
+        throw new Error('prosebook: `split` needs `splitting: true` in Bun.build, or every area ships in the entry chunk');
+      // A full-stack build, one `Bun.build` of a server and the pages it imports, names the side it
+      // loads for (undocumented, and not in Bun's types); any other build is for its target.
+      const client = (args: object) => ('side' in args ? args.side === 'client' : (build.config.target ?? 'browser') === 'browser');
 
-      if ('entrypoints' in build.config) {
-        const prune = options.prune ?? 'strict';
-        if (prune === false) return;
+      const prune = options.prune ?? 'strict';
+      let kept: (key: string) => boolean = () => true;
+      if (building && prune !== false) {
         const { refs, unseen } = scanSources(config, prune === 'strict');
         if (unseen.length > 0) throw new Error(unseenMessage(unseen, config.root));
-        const kept = keeper(refs, options.keep);
-        build.onLoad({ filter }, ({ path }) => {
-          const entries = generated.entries.get(nameOf(path));
-          return entries === undefined ? undefined : { contents: prunedModule(entries, kept), loader: 'js' };
-        });
-        return;
+        kept = keeper(refs, options.keep);
       }
-
-      const dev = process.env.NODE_ENV !== 'production';
+      const dev = !building && process.env.NODE_ENV !== 'production';
       const inspector = dev && options.inspect !== false ? installInspector(inspectorPath, '/') : '';
       if (dev) {
         watchCatalog(config, () => {
@@ -92,11 +120,40 @@ export function prosebook(options: ProsebookBunOptions = {}): BunPlugin {
           }
         });
       }
-      build.onLoad({ filter }, ({ path }) => {
-        const name = nameOf(path);
-        const loader = path.endsWith('.ts') ? 'ts' : 'js';
-        if (generated.entries.has(name)) return { contents: readFileSync(path, 'utf8') + hotLocale(name), loader };
-        return name === 'index' ? { contents: HOT_SET + inspector + readFileSync(path, 'utf8') + HOT_INDEX, loader } : undefined;
+
+      build.onLoad({ filter }, (args) => {
+        const name = nameOf(args.path);
+        if (name === 'index' && split && client(args)) {
+          const index = splitIndex(config, generated, options.keep);
+          return { contents: building ? index : HOT_SET + inspector + index + HOT_INDEX, loader: 'js' };
+        }
+        const entries = generated.entries.get(name);
+        if (building) return entries === undefined || prune === false ? undefined : { contents: prunedModule(entries, kept), loader: 'js' };
+        const loader = args.path.endsWith('.ts') ? 'ts' : 'js';
+        if (entries !== undefined) return { contents: readFileSync(args.path, 'utf8') + hotLocale(name), loader };
+        return name === 'index' ? { contents: HOT_SET + inspector + readFileSync(args.path, 'utf8') + HOT_INDEX, loader } : undefined;
+      });
+      if (!split) return;
+
+      const groups = building ? areaGroups(config, generated, options.keep) : new Map<string, string>();
+      // `cart`, or in a build `cart/de`, a lazy locale's part of the group `cart` leads.
+      build.onResolve({ filter: new RegExp(`^${escape(AREA)}`) }, ({ path }) => ({ path: path.slice(AREA.length), namespace: NAMESPACE }));
+      build.onLoad({ filter: /.*/, namespace: NAMESPACE }, ({ path }) => {
+        const [area = '', locale] = path.split('/');
+        if (locale !== undefined) {
+          const entries = inAreas(generated.entries.get(locale) ?? [], membersOf(groups, area));
+          return { contents: prunedModule(entries, kept), loader: 'js' };
+        }
+        const inline = building ? (_locale: string, entries: Entry[]) => localeExpression(compileLocale(entries, kept)) : undefined;
+        return { contents: areaModule(config, generated, area, inline, undefined, groups), loader: 'js' };
+      });
+      const dirs = config.scan.dirs.map((dir) => folderPattern(resolve(config.root, dir))).join('|');
+      const out = new RegExp(`^${folderPattern(config.out)}[\\\\/]`);
+      build.onLoad({ filter: new RegExp(`^(?:${dirs})[\\\\/].*\\.[cm]?[jt]sx?$`) }, (args) => {
+        if (!client(args) || out.test(args.path) || /[\\/]node_modules[\\/]/.test(args.path)) return undefined;
+        const code = readFileSync(args.path, 'utf8');
+        const areas = areasNamed(code, lazyAreas(generated, options.keep));
+        return areas.length === 0 ? undefined : { contents: importingAreas(code, args.path, areas), loader: args.loader };
       });
     },
   };

package/src/cli.ts

@@ -4,13 +4,14 @@
  * ones CI needs in one go.
  */
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { join, relative, resolve } from 'node:path';
+import { dirname, extname, join, relative, resolve } from 'node:path';
 import { parseArgs } from 'node:util';
 
 import { watchCatalog } from './tools/bundle.ts';
-import { CatalogError, entryLocator, whereOf, type Catalog, type Problem } from './tools/catalog.ts';
+import { CatalogError, entryLocator, SCHEMA_LINE, whereOf, type Catalog, type Problem } from './tools/catalog.ts';
 import { CONFIG_FILES, loadConfig, type ResolvedConfig } from './tools/config.ts';
 import { applyFixes, importTranslations } from './tools/entry.ts';
+import { exportOf, type ExchangeFormat } from './tools/exchange.ts';
 import { applyExtract, planExtract } from './tools/extract.ts';
 import { generate, render } from './tools/generate.ts';
 import { lint, type Finding } from './tools/lint.ts';
@@ -34,8 +35,11 @@ Commands:
   accept <locale> [keys]  Mark stale translations as still right  (--all for every stale one)
   todo <locale>           Print the missing and stale entries of a locale, ready to translate
                           (--prompt: as a prompt for a model, saying how to reply)
-  import <locale> [file]  Write translations from todo's YAML filled in, or a model's reply to --prompt
-                          (stdin without a file); each is checked first, and one that fails is left out
+  export <locale> [file]  Write the entries todo lists as XLIFF 2.0 or JSON, for a translation tool
+                          (--all: every entry; the format from the file's extension, or --format)
+  import <locale> [file]  Write translations from todo's YAML filled in, a model's reply to --prompt,
+                          or a tool's XLIFF or JSON (stdin without a file); each is checked first,
+                          and one that fails is left out
   scan                    Find hardcoded text in JSX and catalog keys no code reads  (--strict)
   extract [paths]         Move hardcoded JSX text into the catalog and rewrite the code to read it
                           (dry run unless --write; --area <name> puts every entry in one area)
@@ -47,10 +51,12 @@ Options:
   --root <dir>            Project root (default: the current directory)
   --format <text|sarif>   With lint, scan, status and check: sarif writes a SARIF 2.1.0 log to stdout
                           for code scanning, and the usual text to stderr
+  --format <xliff|json>   With export: the file's format (XLIFF by default on stdout)
   -h, --help              Show this help
 `;
 
 const SARIF_COMMANDS = ['lint', 'scan', 'status', 'check'];
+const EXCHANGE_FORMATS: Record<string, ExchangeFormat> = { xliff: 'xliff', xlf: 'xliff', json: 'json' };
 
 /** What the checks that aren't lint rules hold the project to, for the rules in a SARIF log. */
 const RULES = {
@@ -91,7 +97,12 @@ async function main(argv: string[]): Promise<number> {
     out(HELP);
     return 0;
   }
-  if (values.format !== undefined && values.format !== 'text' && values.format !== 'sarif') {
+  if (command === 'export') {
+    if (values.format !== undefined && EXCHANGE_FORMATS[values.format] === undefined) {
+      err(`prosebook: export writes xliff or json, not "${values.format}"`);
+      return 1;
+    }
+  } else if (values.format !== undefined && values.format !== 'text' && values.format !== 'sarif') {
     err(`prosebook: --format is text or sarif, not "${values.format}"`);
     return 1;
   }
@@ -123,6 +134,8 @@ async function main(argv: string[]): Promise<number> {
         return runAccept(config, rest, values.all === true);
       case 'todo':
         return runTodo(config, rest[0], values.prompt === true);
+      case 'export':
+        return runExport(config, rest[0], rest[1], values.format, values.all === true);
       case 'import':
         return runImport(config, rest[0], rest[1]);
       case 'scan':
@@ -187,10 +200,17 @@ function runGenerate(config: ResolvedConfig, check: boolean, report?: SarifRepor
       out(`prosebook: generated files are up to date (${summary})`);
       return 0;
     }
-    err(`prosebook: out of date, run \`prosebook generate\`:\n  ${changed.map((p) => rel(config, p)).join('\n  ')}`);
+    // A catalog file is listed for its schema line, which generate adds.
+    const why = (p: string) =>
+      dirname(p) === config.catalog && p.endsWith('.yaml')
+        ? `its first line isn't \`${SCHEMA_LINE}\`, so editors can't find the schema`
+        : 'out of date';
+    err(
+      `prosebook: out of date, run \`prosebook generate\`:\n  ${changed.map((p) => `${rel(config, p)}${why(p) === 'out of date' ? '' : `: ${why(p)}`}`).join('\n  ')}`,
+    );
     report?.rule('out-of-date', RULES['out-of-date']);
     for (const p of changed)
-      report?.add({ rule: 'out-of-date', level: 'error', message: 'out of date: run `prosebook generate`', file: rel(config, p) });
+      report?.add({ rule: 'out-of-date', level: 'error', message: `${why(p)}: run \`prosebook generate\``, file: rel(config, p) });
     return 1;
   }
   out(`prosebook: ${changed.length === 0 ? 'nothing changed' : `wrote ${changed.length} file(s)`} (${summary})`);
@@ -352,6 +372,40 @@ function runTodo(config: ResolvedConfig, locale: string | undefined, prompt: boo
   return 0;
 }
 
+function runExport(
+  config: ResolvedConfig,
+  locale: string | undefined,
+  file: string | undefined,
+  named: string | undefined,
+  all: boolean,
+): number {
+  if (locale === undefined) {
+    err('Usage: prosebook export <locale> [file] [--all] [--format xliff|json]');
+    return 1;
+  }
+  const format = EXCHANGE_FORMATS[named ?? (file === undefined ? 'xliff' : extname(file).slice(1).toLowerCase())];
+  if (format === undefined) {
+    err(`prosebook: ${file} is neither .xlf nor .json: name the format with --format xliff or --format json`);
+    return 1;
+  }
+  const { catalog, stale } = render(config);
+  const exported = exportOf(config, catalog, stale.get(locale) ?? new Map(), locale, format, all);
+  if (exported.count === 0) {
+    err(`prosebook: ${locale} is complete; --all exports every entry`);
+    return 0;
+  }
+  if (file === undefined) {
+    process.stdout.write(exported.text);
+    return 0;
+  }
+  const path = resolve(file);
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, exported.text);
+  out(`prosebook: exported ${exported.count} entr${exported.count === 1 ? 'y' : 'ies'} for ${locale} to ${file}`);
+  if (locale !== config.source) out(`Translate them, then \`prosebook import ${locale} ${file}\`.`);
+  return 0;
+}
+
 function runImport(config: ResolvedConfig, locale: string | undefined, file: string | undefined): number {
   if (locale === undefined || ((file === undefined || file === '-') && process.stdin.isTTY)) {
     err('Usage: prosebook import <locale> <file>, or the reply on stdin');
@@ -488,7 +542,7 @@ export default defineConfig({
 });
 `;
 
-const SAMPLE_CATALOG = `# yaml-language-server: $schema=./catalog.schema.json
+const SAMPLE_CATALOG = `${SCHEMA_LINE}
 app.title:
   kind: name
   surface: title

package/src/index.ts

@@ -5,7 +5,7 @@
  * `prosebook generate` compiles it into typed modules, one per locale, whose messages are plain
  * functions: this runtime looks them up, picks the locale and falls back, and parses nothing.
  */
-export { createCopy, defineCatalog, type Catalog, type Copy, type CopyOptions } from './runtime/copy.ts';
+export { addArea, createCopy, defineCatalog, type Catalog, type Copy, type CopyOptions } from './runtime/copy.ts';
 export { acceptedLocales, chainOf, negotiate, preferredLocales } from './runtime/locale.ts';
 export { createHelpers, flatten } from './runtime/helpers.ts';
 export type {

package/src/next-loader.ts

@@ -3,14 +3,26 @@
  * locale module `withProsebook` has already pruned, since that reads the source once for every
  * locale. In dev, in the browser, it puts what `withProsebook` hands it before the index (the hot
  * hooks, and the inspector), and makes each locale module update the copies holding it whenever Fast
- * Refresh runs it again.
+ * Refresh runs it again. With `split`, it also runs over the app's own source in the browser, and
+ * appends to each file an import of every area whose keys it names, from the folder of area files
+ * `withProsebook` writes.
  */
-import { notifyingLocale } from './tools/bundle.ts';
+import { dirname, isAbsolute, join, resolve } from 'node:path';
 
-export type LoaderOptions = { code: string } | { prepend: string } | { locale: string };
+import { areaFile, areasNamed, importingAreas, notifyingLocale, relativeImport } from './tools/bundle.ts';
 
-export default function loader(this: { getOptions(): LoaderOptions }, source: string): string {
+export type LoaderOptions = { code: string } | { prepend: string } | { locale: string } | { areas: string[]; dir: string };
+
+type Context = { getOptions(): LoaderOptions; resourcePath?: string; rootContext?: string };
+
+export default function loader(this: Context, source: string): string {
+  const { resourcePath = '', rootContext = process.cwd() } = this;
   const options = this.getOptions();
   if ('code' in options) return options.code;
-  return 'prepend' in options ? options.prepend + source : notifyingLocale(source, options.locale);
+  if ('prepend' in options) return options.prepend + source;
+  if ('locale' in options) return notifyingLocale(source, options.locale);
+  const areas = areasNamed(source, new Set(options.areas));
+  if (areas.length === 0) return source;
+  const file = isAbsolute(resourcePath) ? resourcePath : resolve(rootContext, resourcePath);
+  return importingAreas(source, file, areas, (area) => relativeImport(dirname(file), join(options.dir, areaFile(area))));
 }

package/src/next.ts

@@ -14,6 +14,12 @@
  * route of the app without a file in it, so a server of their own answers them on a local port, and a
  * rewrite sends `/__prosebook/*` there; an entry opens through Next's own `/__nextjs_launch-editor`.
  *
+ * With `split`, client components get the catalog split by area, as under Vite (`tools/bundle.ts`).
+ * Turbopack has no virtual modules, so the areas are files, written under `node_modules/.prosebook`,
+ * where they are a dependency's code to Turbopack and not the app's; and it has no transform hook, so
+ * a loader rule over the app's own source in the browser appends the imports of the areas each file
+ * names. Server components and the server render read whole locales.
+ *
  * Turbopack only: Next 16 fails a Turbopack build whose config has a `webpack` key, so none is added.
  */
 import { createServer } from 'node:http';
@@ -22,20 +28,31 @@ import { join, relative, resolve } from 'node:path';
 
 import type { LoaderOptions } from './next-loader.ts';
 import {
+  areaFile,
+  areaModule,
+  areasOf,
   beside,
+  fileSpecifiers,
   HOT_SET,
+  inAreas,
   installInspector,
   keeper,
+  lazyAreas,
+  membersOf,
   prunedModule,
   scanSources,
+  splitIndex,
   unseenMessage,
   watchCatalog,
   type Prune,
 } from './tools/bundle.ts';
 import { CatalogError } from './tools/catalog.ts';
+import { areaGroups } from './tools/chunks.ts';
+import { compileLocale, localeExpression } from './tools/compile.ts';
+import type { Entry } 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 { generate, writeFiles, type Generated } from './tools/generate.ts';
 
 export interface ProsebookNextOptions {
   /** The config, inline. Without it, `prosebook.config.*` at `root` is read. */
@@ -48,8 +65,16 @@ export interface ProsebookNextOptions {
    * 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 in client components, as the Vite plugin's `split` does, so a route's
+   * client code brings only the messages it reads. Server components read whole locales.
+   */
+  split?: boolean;
   /** In dev, Alt-click a string on the page to open its entry in the editor. On by default. */
   inspect?: boolean;
 }
@@ -89,23 +114,26 @@ export function withProsebook<C extends object>(
       throw new Error("prosebook: Turbopack doesn't resolve `./en.js` to `en.ts`: set `importExtension: ''` in the prosebook config");
     const generated = generate(config);
     if (phase === DEV) {
-      watch(config);
-      if (options.inspect === false) return withRules(resolved, hotRules(config, generated, HOT_SET));
+      watch(config, options);
+      if (options.inspect === false) return withRules(resolved, hotRules(config, generated, HOT_SET, options));
       const base = `${(resolved as { basePath?: string }).basePath ?? ''}/`;
       // A relative import, which Turbopack resolves as it would the app's own.
       const path = relative(config.out, inspectorPath).replaceAll('\\', '/');
       const prepend = HOT_SET + installInspector(path.startsWith('.') ? path : `./${path}`, base);
-      return withRewrite(withRules(resolved, hotRules(config, generated, prepend)), await serveInspector(config, base));
+      return withRewrite(withRules(resolved, hotRules(config, generated, prepend, options)), await serveInspector(config, base));
     }
     const prune = options.prune ?? 'strict';
-    if (prune === false) return resolved;
-    return withRules(resolved, prunedRules(config, generated, prune, options.keep));
+    if (prune === false && options.split !== true) return resolved;
+    return withRules(resolved, buildRules(config, generated, prune, options));
   };
 }
 
+/** The app's rules and ours: where both have one for a glob, theirs first, then ours, in a list. */
 function withRules<C extends object>(resolved: C, rules: Rules): C {
   const turbopack = (resolved as { turbopack?: { rules?: Rules } }).turbopack;
-  return { ...resolved, turbopack: { ...turbopack, rules: { ...turbopack?.rules, ...rules } } };
+  const all: Rules = { ...turbopack?.rules };
+  for (const [glob, rule] of Object.entries(rules)) all[glob] = glob in all ? [all[glob], rule].flat() : rule;
+  return { ...resolved, turbopack: { ...turbopack, rules: all } };
 }
 
 /** Sends `/__prosebook/*` to the inspector's server, before any of the app's own rewrites. */
@@ -146,12 +174,13 @@ function serveInspector(config: ResolvedConfig, base: string): Promise<number> {
   return port;
 }
 
-function watch(config: ResolvedConfig): void {
+function watch(config: ResolvedConfig, options: ProsebookNextOptions): void {
   if (watching.has(config.catalog)) return;
   watching.add(config.catalog);
   watchCatalog(config, () => {
     try {
-      generate(config);
+      const generated = generate(config);
+      if (options.split === true) writeAreas(config, generated);
       console.info(`prosebook: regenerated ${relative(config.root, config.out).replaceAll('\\', '/')}`);
     } catch (e) {
       console.error(describe(e));
@@ -173,16 +202,91 @@ function rule(config: ResolvedConfig, name: string, options: LoaderOptions, brow
  * In the browser: the index starts with `prepend`, the hot hooks and the inspector, there before any
  * copy exists, and each locale updates the copies.
  */
-function hotRules(config: ResolvedConfig, generated: Generated, prepend: string): Rules {
+function hotRules(config: ResolvedConfig, generated: Generated, prepend: string, options: ProsebookNextOptions): Rules {
   const locales = [...generated.entries.keys()].map((locale) => rule(config, locale, { locale }, true));
+  if (options.split === true) return Object.fromEntries([...locales, ...splitRules(config, generated, options, prepend)]);
   return Object.fromEntries([rule(config, 'index', { prepend }, true), ...locales]);
 }
 
-function prunedRules(config: ResolvedConfig, generated: Generated, prune: 'strict' | 'loose', keep?: string[]): Rules {
-  const { refs, unseen } = scanSources(config, prune === 'strict');
-  if (unseen.length > 0) throw new Error(unseenMessage(unseen, config.root));
-  const kept = keeper(refs, keep);
-  return Object.fromEntries([...generated.entries].map(([locale, entries]) => rule(config, locale, { code: prunedModule(entries, kept) })));
+function buildRules(config: ResolvedConfig, generated: Generated, prune: Prune, options: ProsebookNextOptions): Rules {
+  let kept: (key: string) => boolean = () => true;
+  if (prune !== false) {
+    const { refs, unseen } = scanSources(config, prune === 'strict');
+    if (unseen.length > 0) throw new Error(unseenMessage(unseen, config.root));
+    kept = keeper(refs, options.keep);
+  }
+  const locales =
+    prune === false ? [] : [...generated.entries].map(([locale, entries]) => rule(config, locale, { code: prunedModule(entries, kept) }));
+  return Object.fromEntries([...locales, ...(options.split === true ? splitRules(config, generated, options, '', kept) : [])]);
+}
+
+/** Where a split catalog's area files go: out of the app's source, where Turbopack takes them for a dependency's. */
+const areasDir = (config: ResolvedConfig) => join(config.root, 'node_modules', '.prosebook', 'areas');
+
+/**
+ * Writes each area's file, and in a build, with `kept`, each lazy locale's part of each group of
+ * areas that share a chunk (`tools/chunks.ts`), pruned; in dev an area holds its locales' generated
+ * modules whole, so their own updates reach the copies.
+ */
+function writeAreas(config: ResolvedConfig, generated: Generated, kept?: (key: string) => boolean, keep?: string[]): void {
+  const dir = areasDir(config);
+  const where = fileSpecifiers(dir, dir);
+  const inline = kept === undefined ? undefined : (_locale: string, entries: Entry[]) => localeExpression(compileLocale(entries, kept));
+  const groups = kept === undefined ? new Map<string, string>() : areaGroups(config, generated, keep);
+  const files = new Map<string, string>();
+  for (const area of areasOf(generated)) files.set(join(dir, areaFile(area)), areaModule(config, generated, area, inline, where, groups));
+  if (kept === undefined) {
+    writeFiles(files);
+    return;
+  }
+  for (const lead of new Set(groups.values())) {
+    for (const [locale, entries] of generated.entries) {
+      const parts = inAreas(entries, membersOf(groups, lead));
+      if (parts.length > 0 && locale !== config.source && !config.bundled.includes(locale))
+        files.set(join(dir, areaFile(lead, locale)), prunedModule(parts, kept));
+    }
+  }
+  writeFiles(files);
+}
+
+/**
+ * In the browser: the index of a split catalog after `prepend`, and a rule per kind of source file
+ * under `scan.dirs` that names an area's keys, which appends its imports of those areas.
+ */
+function splitRules(
+  config: ResolvedConfig,
+  generated: Generated,
+  options: ProsebookNextOptions,
+  prepend: string,
+  kept?: (key: string) => boolean,
+) {
+  writeAreas(config, generated, kept, options.keep);
+  const index = rule(
+    config,
+    'index',
+    { code: prepend + splitIndex(config, generated, options.keep, fileSpecifiers(config.out, areasDir(config))) },
+    true,
+  );
+  const areas = [...lazyAreas(generated, options.keep)];
+  if (areas.length === 0) return [index];
+  const under = (dir: string) => escape(relative(config.root, dir).replaceAll('\\', '/'));
+  const dirs = config.scan.dirs.map(under).filter((d) => d !== '');
+  const condition = {
+    all: [
+      'browser',
+      { not: 'foreign' },
+      ...(dirs.length > 0 && dirs.length === config.scan.dirs.length ? [{ path: new RegExp(`(?:^|/)(?:${dirs.join('|')})/`) }] : []),
+      { not: { path: new RegExp(`(?:^|/)${under(config.out)}/`) } },
+      // As `keyRefs` reads a key: a quote, then the area.
+      { content: new RegExp(`['"\`](?:${areas.map(escape).join('|')})\\.`) },
+    ],
+  };
+  const loaderOptions: LoaderOptions = { areas, dir: areasDir(config) };
+  const sources = ['*.ts', '*.tsx', '*.js', '*.jsx'].map((glob): [string, unknown] => [
+    glob,
+    { condition, loaders: [{ loader: loaderPath, options: loaderOptions }], as: glob },
+  ]);
+  return [index, ...sources];
 }
 
 export default withProsebook;

package/src/preact/index.ts

@@ -0,0 +1,91 @@
+/**
+ * `prosebook/preact`: the catalog in Preact components, as `prosebook/react` has it in React's.
+ *
+ * Written with `preact/hooks` alone, so it needs no `preact/compat`.
+ */
+import { createContext, Fragment, h, isValidElement, type ComponentChildren, type VNode } from 'preact';
+import { useContext, useEffect, useMemo, useState } from 'preact/hooks';
+
+import { bindCopy, type BoundCopy, type TextProps as Props } 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`. */
+export type PreactCopy = BoundCopy<ComponentChildren, VNode>;
+
+type Tags = { readonly [tag: string]: TagFn<ComponentChildren> };
+
+const CopyContext = createContext<{ copy: Copy; tags: Tags } | null>(null);
+
+export interface CopyProviderProps {
+  copy: Copy;
+  /** Tag renderers every rich read under this provider gets, beside the copy's own. */
+  tags?: Tags;
+  children?: ComponentChildren;
+}
+
+export function CopyProvider({ copy, tags = {}, children }: CopyProviderProps) {
+  const value = useMemo(() => ({ copy, tags }), [copy, tags]);
+  return h(CopyContext.Provider, { value }, children);
+}
+
+function useContextOf(hook: string) {
+  const context = useContext(CopyContext);
+  if (context === null) throw new Error(`prosebook: ${hook}() needs a <CopyProvider> above it`);
+  return context;
+}
+
+/** Renders the component again after each change to what the copy reads: a locale switch, or in dev a catalog edit. */
+function useVersion(copy: Copy): number {
+  const [, rerender] = useState(0);
+  const version = copy.version;
+  // Preact has no useSyncExternalStore outside compat: the effect subscribes once the component mounts.
+  useEffect(() => {
+    const update = () => rerender((n) => n + 1);
+    const stop = copy.subscribe(update);
+    // A change between this render and the subscription would otherwise go unseen.
+    if (copy.version !== version) update();
+    return stop;
+  }, [copy]);
+  return version;
+}
+
+/** The catalog, in the current locale. Renders the component again when the locale changes, or in dev the catalog. */
+export function useCopy(): PreactCopy {
+  const { copy, tags } = useContextOf('useCopy');
+  const version = useVersion(copy);
+  // Rebuilt on each version, so its identity changes when what it reads does.
+  return useMemo(() => bindCopy(copy, tags, { tag, whole }), [copy, tags, version]);
+}
+
+/** The current locale alone, for components that only format or switch. */
+export function useLocale(): RegisteredLocale {
+  const { copy } = useContextOf('useLocale');
+  useVersion(copy);
+  return copy.locale;
+}
+
+const tag = (render: (chunks: never) => unknown, chunks: unknown[]) => render(keyed(chunks) as never);
+const whole = (parts: unknown[]): VNode => h(Fragment, null, keyed(parts));
+
+/** Text joined where it can be, and each element under its own key, as `prosebook/react` does. */
+function keyed(parts: unknown[]): ComponentChildren[] {
+  if (parts.every((p) => typeof p === 'string')) return [parts.join('')];
+  return parts.map((p, i) =>
+    isValidElement(p) || typeof p === 'object' ? h(Fragment, { key: i }, p as ComponentChildren) : (p as ComponentChildren),
+  );
+}
+
+export type TextProps<K extends Extract<keyof M, string>> = Props<K, ComponentChildren>;
+
+/**
+ * A message as an element: `<Text id="cart.items" values={{ count }} />`. Rich messages render their
+ * tags through the provider's renderers and any given in `values`.
+ */
+export function Text<K extends Extract<keyof M, string>>(props: TextProps<K>): VNode {
+  const copy = useCopy();
+  const values = (props as { values?: object }).values;
+  return copy.rich(props.id as never, values as never);
+}