prosebook 0.2.0 → 0.4.0

package/src/react/index.tsx

@@ -14,23 +14,23 @@ type M = RegisteredMessages;
 type L = RegisteredLocale;
 
 /** `Copy`, with `rich` returning a `ReactNode`. */
-export interface ReactCopy extends Omit<Copy<M, L>, 'rich'> {
+export interface ReactCopy extends Omit<Copy, 'rich'> {
   rich<K extends RichKey<M>>(this: void, key: K, ...values: RichParam<M[K], ReactNode>): ReactNode;
 }
 
-const CopyContext = createContext<{ copy: Copy<M, L>; tags: Tags } | null>(null);
+const CopyContext = createContext<{ copy: Copy; tags: Tags } | null>(null);
 
 type Tags = { readonly [tag: string]: TagFn<ReactNode> };
 
 export interface CopyProviderProps {
-  copy: Copy<M, L> | Copy;
+  copy: Copy;
   /** Tag renderers every rich read under this provider gets, beside the copy's own. */
   tags?: Tags;
   children?: ReactNode;
 }
 
 export function CopyProvider({ copy, tags, children }: CopyProviderProps) {
-  const value = useMemo(() => ({ copy: copy as Copy<M, L>, tags: { ...(copy.tags as unknown as Tags), ...tags } }), [copy, tags]);
+  const value = useMemo(() => ({ copy: copy, tags: { ...(copy.tags as unknown as Tags), ...tags } }), [copy, tags]);
   return <CopyContext value={value}>{children}</CopyContext>;
 }
 
@@ -59,7 +59,7 @@ export function useLocale(): L {
 }
 
 // Takes the version only so the reader is rebuilt, and its identity changes, when what it reads does.
-function readerFor(copy: Copy<M, L>, tags: Tags, version: number): ReactCopy {
+function readerFor(copy: Copy, tags: Tags, version: number): ReactCopy {
   return {
     locale: copy.locale,
     version,
@@ -108,5 +108,5 @@ export type TextProps<K extends Extract<keyof M, string>> = { id: K } & ValuesPr
 export function Text<K extends Extract<keyof M, string>>(props: TextProps<K>) {
   const copy = useCopy();
   const values = (props as { values?: object }).values;
-  return <>{copy.rich(props.id as RichKey<M>, values)}</>;
+  return <>{copy.rich(props.id, values as never)}</>;
 }

package/src/react/server.ts

@@ -0,0 +1,37 @@
+/**
+ * `prosebook/react/server`: the catalog in React Server Components, which can't use context. Apart
+ * from `prosebook/react`, whose module makes a context as it loads, which the server build refuses.
+ */
+import { cache } from 'react';
+
+import { createCopy, type Catalog, type Copy, type CopyOptions } from '#src/runtime/copy.ts';
+import type { MessageShapes } from '#src/runtime/types.ts';
+
+/** What a request asks for: a locale, or the locales it prefers, most preferred first. */
+type Asked<L extends string> = L | (string & {}) | readonly string[];
+
+/**
+ * A reader of one copy per request, ready to use: `locale` is asked once per request, and every
+ * server component rendering in it gets the same copy, in the locale negotiated from the answer.
+ * React's `cache` keeps it per request, so one request's locale never reaches another's.
+ *
+ * ```ts
+ * export const serverCopy = createServerCopy(catalog, async () => {
+ *   const picked = (await cookies()).get('locale')?.value;
+ *   const asked = acceptedLocales((await headers()).get('accept-language'));
+ *   return picked === undefined ? asked : [picked, ...asked];
+ * });
+ * const { t, locale } = await serverCopy();
+ * ```
+ */
+export function createServerCopy<M extends MessageShapes, L extends string>(
+  catalog: Catalog<M, L>,
+  locale: () => Asked<L> | Promise<Asked<L>>,
+  options: Omit<CopyOptions<L>, 'locale'> = {},
+): () => Promise<Copy<M, L>> {
+  return cache(async () => {
+    const copy = createCopy(catalog, { ...options, locale: await locale() });
+    await copy.ready;
+    return copy;
+  });
+}

package/src/runtime/copy.ts

@@ -43,6 +43,11 @@ export interface CopyOptions<L extends string> {
   tags?: { [tag: string]: AnyTagFn };
   /** What a key the catalog lacks reads as. Defaults to the key itself. */
   onMissing?: (key: string, locale: L) => string;
+  /**
+   * Told of a placeholder that had no value, or one `Intl` refused (`currency: 'euro'`): the message
+   * still renders, showing `{name}` there. Defaults to `console.error`.
+   */
+  onError?: (error: Error, key: string, locale: L) => void;
 }
 
 /** Its methods don't use `this`, so they can be passed around and destructured: `const { t } = copy`. */
@@ -92,9 +97,17 @@ export function createCopy<M extends MessageShapes, L extends string>(catalog: C
   const listeners = new Set<() => void>();
   const defaultTags = options.tags ?? {};
   const formatters = new Map<string, Intl.NumberFormat | Intl.DateTimeFormat | Intl.ListFormat | Intl.RelativeTimeFormat>();
+  // The key being rendered, which a helper's report names; none while the inspector renders it again.
+  let reading: string | undefined;
+  const helpers = (l: L) =>
+    createHelpers(l, (error) => {
+      if (reading === undefined) return;
+      if (options.onError) options.onError(error, reading, l);
+      else console.error(`prosebook: ${reading} in ${l}: ${error.message}`);
+    });
 
   for (const [locale, messages] of Object.entries(catalog.messages) as [L, CompiledMessages][])
-    loaded.set(locale, { messages, h: createHelpers(locale) });
+    loaded.set(locale, { messages, h: helpers(locale) });
 
   let locale = catalog.source;
   let chain: Layer[] = layers(chainOf(locale, catalog.locales, catalog.source));
@@ -127,7 +140,7 @@ export function createCopy<M extends MessageShapes, L extends string>(catalog: C
       const loader = catalog.loaders[l];
       if (loader === undefined) return Promise.reject(new Error(`prosebook: no messages for locale "${l}"`));
       p = loader().then((mod) => {
-        const layer = { messages: mod.default, h: createHelpers(l) };
+        const layer = { messages: mod.default, h: helpers(l) };
         loaded.set(l, layer);
         pending.delete(l);
         return layer;
@@ -163,7 +176,13 @@ export function createCopy<M extends MessageShapes, L extends string>(catalog: C
     const found = find(key);
     if (found === undefined) return options.onMissing ? options.onMissing(key, locale) : key;
     const [message, h] = found;
-    const out = typeof message === 'string' ? message : message(values, h);
+    reading = key;
+    let out: unknown;
+    try {
+      out = typeof message === 'string' ? message : message(values, h);
+    } finally {
+      reading = undefined;
+    }
     const read = (globalThis as DevHooks).__PROSEBOOK_READ__;
     if (read !== undefined) read(key, typeof out === 'string' ? out : textOf(message, values, h), h.locale);
     return out;

package/src/runtime/helpers.ts

@@ -1,34 +1,61 @@
 import type { Arms, Helpers, Values } from './types.ts';
 
+/** Formatters by options object, then by the options arguments gave, as JSON (`''` for none). */
+type Formatters<F> = Map<object | undefined, Map<string, F>>;
+
 /**
  * The helpers compiled messages call, for one locale. Formatters are built once per options object:
  * the generator hoists each message's options to a module-level constant, so identity is a stable key.
+ * Options an argument gives are built per call, so those are told apart by value.
+ *
+ * A value missing, or one `Intl` refuses, never throws: `n` and `d` give nothing back, and the message
+ * shows the placeholder's fallback through `e`, which hands `report` what went wrong.
  */
-export function createHelpers(locale: string): Helpers {
-  const numbers = new Map<Intl.NumberFormatOptions | undefined, Intl.NumberFormat>();
-  const dates = new Map<Intl.DateTimeFormatOptions | undefined, Intl.DateTimeFormat>();
-  let cardinal: Intl.PluralRules | undefined;
-  let ordinal: Intl.PluralRules | undefined;
+export function createHelpers(locale: string, report?: (error: Error) => void): Helpers {
+  const numbers: Formatters<Intl.NumberFormat> = new Map();
+  const dates: Formatters<Intl.DateTimeFormat> = new Map();
+  const rules: Formatters<Intl.PluralRules>[] = [new Map(), new Map()];
+  let failure: unknown;
+
+  function attempt(value: unknown, format: () => string): string | undefined {
+    failure = undefined;
+    // `value !== value`: NaN, which `Intl` prints as "NaN".
+    if (value === undefined || value === null || value !== value) return undefined;
+    try {
+      return format();
+    } catch (error) {
+      failure = error;
+      return undefined;
+    }
+  }
 
   return {
     locale,
-    n(value, options) {
-      let format = numbers.get(options);
-      if (format === undefined) numbers.set(options, (format = new Intl.NumberFormat(locale, options)));
-      return format.format(value);
+    n(value, options, given) {
+      return attempt(value, () => formatter(numbers, options, given, (o) => new Intl.NumberFormat(locale, o)).format(value));
     },
-    d(value, options) {
-      let format = dates.get(options);
-      if (format === undefined) dates.set(options, (format = new Intl.DateTimeFormat(locale, options)));
-      return format.format(value);
+    d(value, options, given) {
+      return attempt(value, () => formatter(dates, options, given, (o) => new Intl.DateTimeFormat(locale, o)).format(value));
     },
-    p(value, offset, isOrdinal, arms) {
+    e(fallback) {
+      const why = failure instanceof Error ? `could not be formatted: ${failure.message}` : 'has no value';
+      report?.(new Error(`${fallback} ${why}`, { cause: failure }));
+      failure = undefined;
+      return fallback;
+    },
+    p(value, offset, isOrdinal, arms, options, given) {
       const exact = arms[`=${value}`];
       if (exact !== undefined) return exact();
-      const rules = isOrdinal
-        ? (ordinal ??= new Intl.PluralRules(locale, { type: 'ordinal' }))
-        : (cardinal ??= new Intl.PluralRules(locale));
-      return pick(arms, rules.select(value - offset));
+      let category = 'other';
+      try {
+        const type = isOrdinal ? 'ordinal' : 'cardinal';
+        category = formatter(rules[+isOrdinal]!, options, given, (o) => new Intl.PluralRules(locale, { ...o, type })).select(
+          value - offset,
+        );
+      } catch {
+        // Options an argument gave that `Intl` refuses: the catch-all arm, as MF2 falls back to `*`.
+      }
+      return pick(arms, category);
     },
     s(value, arms) {
       return pick(arms, String(value));
@@ -40,6 +67,15 @@ export function createHelpers(locale: string): Helpers {
   };
 }
 
+function formatter<O extends object, F>(cache: Formatters<F>, options: O | undefined, given: O | undefined, make: (o?: O) => F): F {
+  let byGiven = cache.get(options);
+  if (byGiven === undefined) cache.set(options, (byGiven = new Map()));
+  const key = given === undefined ? '' : JSON.stringify(given);
+  let format = byGiven.get(key);
+  if (format === undefined) byGiven.set(key, (format = make(given === undefined ? options : { ...options, ...given })));
+  return format;
+}
+
 function pick(arms: Arms, arm: string): unknown {
   // ICU requires an `other` arm, and the generator refuses a message without one.
   return (Object.hasOwn(arms, arm) ? arms[arm]! : arms['other']!)();

package/src/runtime/locale.ts

@@ -44,6 +44,25 @@ export function preferredLocales(): string[] {
   return resolved ? [resolved] : [];
 }
 
+/**
+ * The locales an `Accept-Language` header asks for, most preferred first: ordered by `q`, ties in
+ * the header's order. `q=0` means "not this one", and `*` asks for nothing `negotiate`'s fallback
+ * doesn't already give, so both are left out, as is a part whose `q` isn't a number.
+ */
+export function acceptedLocales(header: string | null | undefined): string[] {
+  const weighed: { tag: string; q: number }[] = [];
+  for (const part of (header ?? '').split(',')) {
+    const [tag = '', ...params] = part.split(';').map((s) => s.trim());
+    if (tag === '' || tag === '*') continue;
+    const weight = params.find((p) => /^q\s*=/i.test(p));
+    const q = weight === undefined ? 1 : Number(weight.slice(weight.indexOf('=') + 1).trim());
+    if (Number.isNaN(q) || q <= 0) continue;
+    weighed.push({ tag, q });
+  }
+  // Array.prototype.sort is stable, so equal weights keep the header's order.
+  return weighed.sort((a, b) => b.q - a.q).map((w) => w.tag);
+}
+
 function languageOf(tag: string): string {
   return tag.split('-', 1)[0]!.toLowerCase();
 }

package/src/runtime/types.ts

@@ -42,12 +42,27 @@ export type DefaultTags = Register extends { tags: infer T extends string } ? T
  */
 export interface Helpers {
   readonly locale: string;
-  /** `{x, number, …}` and the `#` of a plural. */
-  n(value: number, options?: Intl.NumberFormatOptions): string;
-  /** `{x, date, …}` and `{x, time, …}`. */
-  d(value: Date | number, options?: Intl.DateTimeFormatOptions): string;
-  /** `{x, plural, …}` and `{x, selectordinal, …}`: picks an arm and renders it. */
-  p(value: number, offset: number, ordinal: boolean, arms: Arms): unknown;
+  /**
+   * `{x, number, …}` and the `#` of a plural; `given` holds the options arguments give, in MF2.
+   * Nothing where there is no value or `Intl` refuses it, so the message shows `e`'s fallback.
+   */
+  n(value: number, options?: Intl.NumberFormatOptions, given?: Intl.NumberFormatOptions): string | undefined;
+  /** `{x, date, …}` and `{x, time, …}`, as `n`. */
+  d(value: Date | number, options?: Intl.DateTimeFormatOptions, given?: Intl.DateTimeFormatOptions): string | undefined;
+  /** A placeholder's fallback, `{x}`, where it has no value or `n` or `d` gave nothing: reports why. */
+  e(fallback: string): string;
+  /**
+   * `{x, plural, …}` and `{x, selectordinal, …}`: picks an arm and renders it. MF2 passes the
+   * options its selector formats with, since those decide the category: `1.0` is `other` in English.
+   */
+  p(
+    value: number,
+    offset: number,
+    ordinal: boolean,
+    arms: Arms,
+    options?: Intl.PluralRulesOptions,
+    given?: Intl.PluralRulesOptions,
+  ): unknown;
   /** `{x, select, …}`. */
   s(value: unknown, arms: Arms): unknown;
   /** `<tag>…</tag>`: the tag's function from the values, or the bare children when there is none. */

package/src/tools/bundle.ts

@@ -0,0 +1,131 @@
+/**
+ * What the bundler integrations share: which messages a build ships, the reads that would show a key
+ * once their message is pruned, and the code a dev server appends so an edit swaps messages in place.
+ *
+ * Vite sees every module before it writes a chunk, so it prunes after the fact (`vite.ts`). Next's
+ * loaders and Bun's `onLoad` hand over a locale module before the code that reads it has been seen,
+ * so they read the source under `scan.dirs` first (`scanSources`) and load the locale already pruned.
+ */
+import { existsSync, readFileSync, watch } from 'node:fs';
+import { relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { compileLocale, localeModule, type Entry } from './compile.ts';
+import type { ResolvedConfig } from './config.ts';
+import { isReferenced, keyRefs, READERS, sourceFiles, unseenReads, type KeyRefs, type Reads, type UnseenRead } from './scan.ts';
+
+/** How a build prunes: `strict` also fails on a read whose key it can't see. */
+export type Prune = 'strict' | 'loose' | false;
+
+/** Whether a build keeps a key: some module names it, or `keep` lists it, exactly or as `prefix.*`. */
+export function keeper(refs: KeyRefs, keep: string[] = []): (key: string) => boolean {
+  return (key) => isReferenced(key, refs) || keep.some((k) => (k.endsWith('.*') ? key.startsWith(k.slice(0, -1)) : k === key));
+}
+
+/** The unseen reads that are a copy's: a name only counts once some module binds a reader to it. */
+export function unseenOf(reads: Iterable<Reads>): UnseenRead[] {
+  const all = [...reads];
+  const readers = new Set([...READERS, ...all.flatMap((r) => [...r.aliases])]);
+  return all.flatMap((r) => r.unseen).filter((u) => u.name === 'Text' || readers.has(u.name));
+}
+
+/** The error a strict build fails with, each read at its path from `root`. */
+export function unseenMessage(unseen: UnseenRead[], root: string): string {
+  const at = (file: string) => relative(root, file).replaceAll('\\', '/');
+  return [
+    `${unseen.length} read(s) whose key the build can't see, so their messages would be pruned and the key shown instead:`,
+    ...unseen.map((u) => `  ${at(u.file)}:${u.line}:${u.column}  ${u.code}`),
+    'Write each key at the read, as a literal or `area.${id}`; or, where every key it reads is written elsewhere or listed in `keep`, mark the line `prosebook-ignore`. `prune: "loose"` turns this check off.',
+  ].join('\n');
+}
+
+export interface SourceScan {
+  refs: KeyRefs;
+  unseen: UnseenRead[];
+}
+
+/**
+ * Every key the app's source names and, with `strict`, its unseen reads. The generated modules are
+ * left out, since they name every key.
+ */
+export function scanSources(config: ResolvedConfig, strict: boolean): SourceScan {
+  const refs: KeyRefs = { exact: new Set(), prefixes: new Set() };
+  const reads: Reads[] = [];
+  for (const file of sourceFiles(config.scan.dirs, config.scan.extensions, [config.out])) {
+    const code = readFileSync(file, 'utf8');
+    keyRefs(code, refs);
+    if (strict) reads.push(unseenReads(file, code));
+  }
+  return { refs, unseen: unseenOf(reads) };
+}
+
+/** Calls `change` once a burst of edits to the catalog or its translations settles. Returns the stop. */
+export function watchCatalog(config: ResolvedConfig, change: () => void): () => void {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  const watchers = [config.catalog, config.locales]
+    .filter((dir) => existsSync(dir))
+    .map((dir) =>
+      watch(dir, { recursive: true }, (_event, file) => {
+        if (file === null || !file.endsWith('.yaml')) return;
+        clearTimeout(timer);
+        timer = setTimeout(change, 50);
+      }),
+    );
+  return () => {
+    clearTimeout(timer);
+    for (const w of watchers) w.close();
+  };
+}
+
+/** A locale's module holding only the keys `kept`, as JavaScript, for a bundler to load in its place. */
+export function prunedModule(entries: Entry[], kept: (key: string) => boolean): string {
+  return localeModule(compileLocale(entries, kept), '// Pruned by prosebook: only the messages the code names.', false);
+}
+
+/**
+ * Appended to a locale module in dev. Accepts its own update and hands the new messages to every
+ * copy (`HotHook`); a page loaded before the hooks existed reloads instead.
+ */
+export const hotLocale = (locale: string) => `
+if (import.meta.hot) {
+  import.meta.hot.accept((next) => {
+    const hot = globalThis.__PROSEBOOK_HOT__;
+    if (next === undefined || hot === undefined) return import.meta.hot.invalidate();
+    for (const update of hot) update(${JSON.stringify(locale)}, next.default);
+  });
+}
+`;
+
+/** Appended to the index in dev: its doc comments change with every edit; only a new locale reloads. */
+export const HOT_INDEX = `
+if (import.meta.hot) {
+  import.meta.hot.accept((next) => {
+    if (next === undefined || next.catalog.locales.join() !== catalog.locales.join()) import.meta.hot.invalidate();
+  });
+}
+`;
+
+/**
+ * A locale module in dev under a bundler that runs it again when it changes, as Turbopack's Fast
+ * Refresh does, but has no `import.meta.hot`: each run hands its messages to every copy. The first
+ * run finds no copy holding the locale yet, so it changes nothing.
+ */
+export const notifyingLocale = (code: string, locale: string) =>
+  `${code.replace(/^export default /m, 'const messages = ')}
+export default messages;
+globalThis.__PROSEBOOK_HOT__?.forEach((update) => update(${JSON.stringify(locale)}, messages));
+`;
+
+/** Prepended to the index in dev, so the set every copy adds itself to exists before any copy does. */
+export const HOT_SET = 'globalThis.__PROSEBOOK_HOT__ ??= new Set();\n';
+
+/**
+ * A module of prosebook's own beside the one at `url`, which passes its `import.meta.url`: the source
+ * when run from source, the built file in dist.
+ */
+export const beside = (url: string, name: string) =>
+  fileURLToPath(new URL(`./${name}${url.endsWith('.ts') ? '.ts' : '.js'}`, url)).replaceAll('\\', '/');
+
+/** Code that starts the inspector (`inspector.ts`, imported from `path`) on the page, its endpoints under `base`. */
+export const installInspector = (path: string, base: string) =>
+  `import { install as installInspector } from ${JSON.stringify(path)};\ninstallInspector(${JSON.stringify({ base })});\n`;

package/src/tools/catalog.ts

@@ -179,7 +179,7 @@ function readEntry(
 
   let ast: MessageFormatElement[];
   try {
-    ast = readMessage(config.messageFormat, text, config.source);
+    ast = readMessage(config.messageFormat, text, config.source, config.isolate);
   } catch (e) {
     fail(syntaxError(config, text, e));
     return undefined;
@@ -260,7 +260,7 @@ function readLocales(
         }
         let ast: MessageFormatElement[];
         try {
-          ast = readMessage(config.messageFormat, value, locale);
+          ast = readMessage(config.messageFormat, value, locale, config.isolate);
         } catch (e) {
           error(syntaxError(config, value, e), key);
           continue;

package/src/tools/compile.ts

@@ -3,13 +3,26 @@
  *
  * A message with no placeholders becomes its string. Any other becomes `(a, h) => …`, where `a` holds
  * the arguments and `h` the locale's helpers (see `runtime/helpers.ts`): a plural is a call picking an
- * arm, a number is a call to a cached `Intl.NumberFormat`. One that calls no helper is `(a) => …`, so
- * the generated TypeScript passes `noUnusedParameters`. Formatting options are resolved here and
+ * arm, a number is a call to a cached `Intl.NumberFormat`. A placeholder without a value, or with one
+ * `Intl` refuses, shows as `{name}` and is reported (`h.e`) rather than throwing, so every such
+ * message uses `h`. Formatting options are resolved here and
  * hoisted to module constants, so a skeleton costs nothing at runtime and its formatter is built once.
+ * Options an argument gives (MF2's `currency=$code`) follow them as an object built per call, and the
+ * runtime keeps a formatter per value.
  */
 import { isDateElement, isNumberElement, isTimeElement } from '@formatjs/icu-messageformat-parser';
 
-import { dateOptions, numberOptions, staticLiteral, TYPE, walk, type MessageFormatElement } from './icu.ts';
+import {
+  dateOptions,
+  numberOptions,
+  optionArgsOf,
+  placeholderOf,
+  selectionOf,
+  staticLiteral,
+  TYPE,
+  type MessageFormatElement,
+  type OptionArgs,
+} from './icu.ts';
 
 export type Entry = readonly [key: string, ast: MessageFormatElement[]];
 
@@ -36,34 +49,67 @@ function access(name: string): string {
   return /^[A-Za-z_$][\w$]*$/.test(name) ? `a.${name}` : `a[${JSON.stringify(name)}]`;
 }
 
-function nodes(elements: MessageFormatElement[], hoisted: Hoisted, pound: string | null): string {
+/** The plural a `#` prints the value of. */
+type Pound = { name: string; offset: number } | null;
+
+function nodes(elements: MessageFormatElement[], hoisted: Hoisted, pound: Pound): string {
   if (elements.length === 0) return '""';
   const parts = elements.map((el) => node(el, hoisted, pound));
   return parts.length === 1 ? parts[0]! : `[${parts.join(', ')}]`;
 }
 
-function arms(options: Record<string, { value: MessageFormatElement[] }>, hoisted: Hoisted, pound: string | null): string {
+function arms(options: Record<string, { value: MessageFormatElement[] }>, hoisted: Hoisted, pound: Pound): string {
   const body = Object.entries(options).map(([arm, option]) => `${JSON.stringify(arm)}: () => ${nodes(option.value, hoisted, pound)}`);
   return `{ ${body.join(', ')} }`;
 }
 
-function node(el: MessageFormatElement, hoisted: Hoisted, pound: string | null): string {
-  if (isNumberElement(el)) return `h.n(${access(el.value)}${hoisted.arg(numberOptions(el))})`;
-  if (isDateElement(el) || isTimeElement(el)) return `h.d(${access(el.value)}${hoisted.arg(dateOptions(el))})`;
+/** The hoisted options, then the options arguments give as `{ currency: a.code }`, where there are any. */
+function formatting(options: object | undefined, args: OptionArgs | undefined, hoisted: Hoisted): string {
+  const given = Object.entries(args ?? {});
+  const fixed = hoisted.arg(options);
+  if (given.length === 0) return fixed;
+  return `${fixed || ', undefined'}, { ${given.map(([option, { arg }]) => `${option}: ${access(arg)}`).join(', ')} }`;
+}
+
+/** A string literal, its invisible direction marks escaped so the generated code shows them. */
+function text(value: string): string {
+  return JSON.stringify(value).replace(/[\u2066-\u2069]/g, (c) => `\\u${c.charCodeAt(0).toString(16)}`);
+}
+
+/**
+ * A placeholder's value, or its fallback (`{name}`, reported through `h.e`) where it has none or
+ * `Intl` refuses it, between the marks isolating its direction where it has them.
+ */
+function placed(el: MessageFormatElement, name: string, value: string): string {
+  const { fallback, isolate } = placeholderOf(el, name);
+  const shown = `${value} ?? h.e(${text(fallback)})`;
+  return isolate === undefined ? shown : `[${text(isolate[0])}, ${shown}, ${text(isolate[1])}]`;
+}
+
+function node(el: MessageFormatElement, hoisted: Hoisted, pound: Pound): string {
+  const formatted = (helper: string, name: string, options: object | undefined) =>
+    placed(el, name, `h.${helper}(${access(name)}${formatting(options, optionArgsOf(el), hoisted)})`);
+  if (isNumberElement(el)) return formatted('n', el.value, numberOptions(el));
+  if (isDateElement(el) || isTimeElement(el)) return formatted('d', el.value, dateOptions(el));
   switch (el.type) {
     case TYPE.literal:
       return JSON.stringify(el.value);
     case TYPE.argument:
-      return access(el.value);
+      return placed(el, el.value, access(el.value));
     case TYPE.pound:
-      return pound ?? '"#"';
+      // `#` is its plural's own value less its offset, formatted as a number.
+      if (pound === null) return '"#"';
+      return placed(el, pound.name, `h.n(${access(pound.name)}${pound.offset !== 0 ? ` - ${pound.offset}` : ''})`);
     case TYPE.select:
       return `h.s(${access(el.value)}, ${arms(el.options, hoisted, pound)})`;
     case TYPE.plural: {
-      // `#` is the plural's own value less its offset, formatted as a number.
+      // Read from MF2, a plural selects on the number as formatted, and on what `:integer` and `:percent` make of it.
+      const selection = selectionOf(el);
       const value = access(el.value);
-      const hash = `h.n(${value}${el.offset !== 0 ? ` - ${el.offset}` : ''})`;
-      return `h.p(${value}, ${el.offset}, ${el.pluralType === 'ordinal'}, ${arms(el.options, hoisted, hash)})`;
+      const on = selection?.value === 'round' ? `Math.round(${value})` : selection?.value === 'percent' ? `${value} * 100` : value;
+      const rules = selection === undefined ? '' : formatting(selection.options, selection.args, hoisted);
+      const own = { name: el.value, offset: el.offset };
+      return `h.p(${on}, ${el.offset}, ${el.pluralType === 'ordinal'}, ${arms(el.options, hoisted, own)}${rules})`;
     }
     case TYPE.tag:
       return `h.t(a, ${JSON.stringify(el.value)}, ${nodes(el.children, hoisted, pound)})`;
@@ -72,19 +118,10 @@ function node(el: MessageFormatElement, hoisted: Hoisted, pound: string | null):
   }
 }
 
-/** Whether the message calls a helper: everything but literals and plain placeholders does. */
-function usesHelpers(ast: MessageFormatElement[]): boolean {
-  let uses = false;
-  walk(ast, (el) => {
-    if (el.type !== TYPE.literal && el.type !== TYPE.argument) uses = true;
-  });
-  return uses;
-}
-
 function message(ast: MessageFormatElement[], hoisted: Hoisted): string {
   const literal = staticLiteral(ast);
   if (literal !== undefined) return JSON.stringify(literal);
-  return `(${usesHelpers(ast) ? 'a, h' : 'a'}) => ${nodes(ast, hoisted, null)}`;
+  return `(a, h) => ${nodes(ast, hoisted, null)}`;
 }
 
 export interface CompiledLocale {