pi-mono/packages/chord/src/react
Mario Zechner 3d11c3510b feat(chord): messages and languages in the app kit (i18n)
defineMessages with typed t, t.message/t.render for messages as data, the Translations registry with fallbacks and
conflicts, a locale preference per principal with the device as default and a live switch, useMessages and
scope.messages, formatTime/formatNumber. The tutorial gains a chapter on languages.
2026-11-03 20:25:53 +00:00
..
hooks.ts feat(chord): messages and languages in the app kit (i18n) 2026-11-03 20:25:53 +00:00
index.ts feat(chord): messages and languages in the app kit (i18n) 2026-11-03 20:25:53 +00:00
README.md feat(chord): messages and languages in the app kit (i18n) 2026-11-03 20:25:53 +00:00
stores.ts feat(chord): Chord v2 is the package's root 2026-11-02 22:36:55 +00:00

react

React bindings (slice 11 §3, decision "Slice 11, P7"): @earendil-works/chord/react; optional (React is an optional peer), non-React apps never load it. No components, no styling.

  • HostProvider({ host }), useHost().
  • useHold(Type, params): a reference held while the component is mounted, released on unmount, held again when its params change (compared by value); undefined on the first render.
  • useWatch(watchable): its current value (undefined while it has none), re-rendering on change (useSyncExternalStore over watchStore).
  • useRegistry(R): the registry's composed value; useRefState(ref): the reference's state.
  • useMessages(t): { t, locale }, a plugin's messages bound to the host's language (followed by startPage), re-rendering when the locale or a translation changes; before a language is followed, the first catalog.
  • usePageState(key, initial): useState's pair, the value kept by the page (its host's life) under key (surfaces/page-state.ts, shared with TuiScope.pageState), so a component remounted by a plugin reload keeps it.
  • A component unmounted by a reload has not left (design §21): its releases are plain releases. A component of a reloaded plugin is a new function and remounts, its useState starting over: what must survive is page state.

Tests: test/node/react/ (stores.test.ts in Node, hooks.test.ts in a real browser); the page state alone in test/surfaces/page-state.test.ts.