@krizaka/i18n 0.1.0-beta.1 → 0.1.0-beta.2

package/README.md

@@ -25,7 +25,7 @@ Node ≥ 20, ESM only. React (≥ 18) only for `./rich` and `./react`; TypeScrip
 | Entry | What | React |
 | :-- | :-- | :-- |
 | `@krizaka/i18n` | `createI18n`, `format`, `placeholdersOf`, `isPluralMessage`, the types | no |
-| `@krizaka/i18n/rich` | `<Rich text href? renderLink?>` | no hook — Server Components too |
+| `@krizaka/i18n/rich` | `<Rich text href? renderLink? renderBold? slots?>` | no hook — Server Components too |
 | `@krizaka/i18n/react` | `createI18nReact(i18n)` → `I18nProvider`, `useI18n` | client (`"use client"`) |
 | `@krizaka/i18n/check` | `checkMessages`, `findUnused`, `scanHardcoded`, `main` (the CLI, programmatic) | no |
 | `krizaka-i18n` (bin) | `check` · `scan` | no |
@@ -93,8 +93,14 @@ import { Rich } from "@krizaka/i18n/rich";
 <Rich text={t("legal.read")} href={["/terms", "/privacy"]} renderLink={({ href, children }) => <Link href={href!}>{children}</Link>} />
 ```
 
+```tsx
+<Rich text={t("auth.sent")} slots={{ email: <strong className="break-all">{email}</strong> }} />   // "{email}" → the node
+<Rich text={t("home.lead")} renderBold={(children) => <strong className="font-semibold text-fg">{children}</strong>} />
+```
+
 Messages are text, never HTML: an unknown or unbalanced tag is shown as written. Each `<a>` takes the next `href`; a
-link without one renders its words only. `<b>` and `<a>` may hold each other.
+link without one renders its words only. `<b>` and `<a>` may hold each other. `slots` puts a node in place of a
+`{name}` placeholder (one without a slot stays as written); `renderBold` styles the `<b>`.
 
 ## The CLI
 

package/dist/rich.d.ts

@@ -15,6 +15,13 @@ interface RichProps {
     href?: string | readonly string[];
     /** Renders a link (e.g. with `next/link`). Default: `<a href>`, or the plain words when the link has no href. */
     renderLink?: (link: RichLink) => ReactNode;
+    /** Renders a `<b>…</b>` (e.g. with the app's classes). Default: `<strong>`. */
+    renderBold?: (children: ReactNode) => ReactNode;
+    /**
+     * Nodes put in place of `{name}` placeholders (a link, an emphasised value): `slots={{ email: <strong>{email}</strong> }}`.
+     * A placeholder without a slot stays as written. Plain values go through `format` / `t` before, not here.
+     */
+    slots?: Readonly<Record<string, ReactNode>>;
 }
 /**
  * Renders a message with its markup — `<b>` → `<strong>`, `<a>` → a link — and everything else as text (never HTML:
@@ -24,8 +31,9 @@ interface RichProps {
  * ```tsx
  * <Rich text={t.home.lead} />
  * <Rich text="Read <a>the docs</a>, <b>now</b>." href="/docs" renderLink={({ href, children }) => <Link href={href!}>{children}</Link>} />
+ * <Rich text="We sent a link to {email}." slots={{ email: <strong>{email}</strong> }} />
  * ```
  */
-declare function Rich({ text, href, renderLink }: RichProps): ReactNode;
+declare function Rich({ text, href, renderLink, renderBold, slots }: RichProps): ReactNode;
 
 export { Rich, type RichLink, type RichProps, Rich as default };

package/dist/rich.js

@@ -2,12 +2,23 @@
 import { Fragment } from "react";
 import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
 var TAG = /<(b|a)>([\s\S]*?)<\/\1>/g;
+var SLOT = /\{(\w+)\}/;
 function defaultLink({ href, children }) {
   return href === void 0 ? children : /* @__PURE__ */ jsx("a", { href, children });
 }
-function Rich({ text, href, renderLink = defaultLink }) {
+function defaultBold(children) {
+  return /* @__PURE__ */ jsx("strong", { children });
+}
+function Rich({ text, href, renderLink = defaultLink, renderBold = defaultBold, slots }) {
   const hrefs = typeof href === "string" ? [href] : href ?? [];
   let links = 0;
+  const plain = (source, key) => {
+    if (!slots) return /* @__PURE__ */ jsx(Fragment, { children: source }, key);
+    const parts = source.split(SLOT);
+    return /* @__PURE__ */ jsx(Fragment, { children: parts.map(
+      (part, i) => i % 2 === 0 ? part : /* @__PURE__ */ jsx(Fragment, { children: Object.hasOwn(slots, part) ? slots[part] : `{${part}}` }, i)
+    ) }, key);
+  };
   const render = (source, prefix) => {
     const out = [];
     let last = 0;
@@ -15,9 +26,9 @@ function Rich({ text, href, renderLink = defaultLink }) {
       const [whole, tag, inner] = match;
       const at = match.index;
       const key = `${prefix}${out.length}`;
-      if (at > last) out.push(/* @__PURE__ */ jsx(Fragment, { children: source.slice(last, at) }, `${key}t`));
+      if (at > last) out.push(plain(source.slice(last, at), `${key}t`));
       if (tag === "b") {
-        out.push(/* @__PURE__ */ jsx("strong", { children: render(inner, `${key}.`) }, key));
+        out.push(/* @__PURE__ */ jsx(Fragment, { children: renderBold(render(inner, `${key}.`)) }, key));
       } else {
         const index = links++;
         out.push(
@@ -26,7 +37,7 @@ function Rich({ text, href, renderLink = defaultLink }) {
       }
       last = at + whole.length;
     }
-    if (last < source.length) out.push(/* @__PURE__ */ jsx(Fragment, { children: source.slice(last) }, `${prefix}end`));
+    if (last < source.length) out.push(plain(source.slice(last), `${prefix}end`));
     return out;
   };
   return /* @__PURE__ */ jsx(Fragment2, { children: render(text, "") });

package/dist/rich.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/rich.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from \"react\";\n\n/** What `renderLink` receives for each `<a>…</a>` of a message, in order of appearance. */\nexport interface RichLink {\n  /** The href given for this link (`href[index]`, or `href` itself when it is a string), if any. */\n  href: string | undefined;\n  /** The position of the link in the message: 0 for the first `<a>`. */\n  index: number;\n  children: ReactNode;\n}\n\nexport interface RichProps {\n  /** The message: plain text with `<b>…</b>` emphasis and `<a>…</a>` links, the only markup messages may carry. */\n  text: string;\n  /** The target of each `<a>`, in order (a string for a single link). The words stay in the message, the URL in code. */\n  href?: string | readonly string[];\n  /** Renders a link (e.g. with `next/link`). Default: `<a href>`, or the plain words when the link has no href. */\n  renderLink?: (link: RichLink) => ReactNode;\n}\n\nconst TAG = /<(b|a)>([\\s\\S]*?)<\\/\\1>/g;\n\nfunction defaultLink({ href, children }: RichLink): ReactNode {\n  return href === undefined ? children : <a href={href}>{children}</a>;\n}\n\n/**\n * Renders a message with its markup — `<b>` → `<strong>`, `<a>` → a link — and everything else as text (never HTML:\n * no `dangerouslySetInnerHTML`, an unknown or unbalanced tag is shown as written). `<b>` and `<a>` may hold each other.\n * No hook, no context: usable in a Server Component.\n *\n * ```tsx\n * <Rich text={t.home.lead} />\n * <Rich text=\"Read <a>the docs</a>, <b>now</b>.\" href=\"/docs\" renderLink={({ href, children }) => <Link href={href!}>{children}</Link>} />\n * ```\n */\nexport function Rich({ text, href, renderLink = defaultLink }: RichProps): ReactNode {\n  const hrefs = typeof href === \"string\" ? [href] : (href ?? []);\n  let links = 0;\n\n  // The match is lazy: inside <b>…</b> there is no </b>, so only an <a> can match there (and the other way round).\n  const render = (source: string, prefix: string): ReactNode[] => {\n    const out: ReactNode[] = [];\n    let last = 0;\n    for (const match of source.matchAll(TAG)) {\n      const [whole, tag, inner] = match as unknown as [string, \"a\" | \"b\", string];\n      const at = match.index as number;\n      const key = `${prefix}${out.length}`;\n      if (at > last) out.push(<Fragment key={`${key}t`}>{source.slice(last, at)}</Fragment>);\n      if (tag === \"b\") {\n        out.push(<strong key={key}>{render(inner, `${key}.`)}</strong>);\n      } else {\n        const index = links++;\n        out.push(\n          <Fragment key={key}>{renderLink({ href: hrefs[index], index, children: render(inner, `${key}.`) })}</Fragment>,\n        );\n      }\n      last = at + whole.length;\n    }\n    if (last < source.length) out.push(<Fragment key={`${prefix}end`}>{source.slice(last)}</Fragment>);\n    return out;\n  };\n\n  return <>{render(text, \"\")}</>;\n}\n\nexport default Rich;\n"],"mappings":";AAAA,SAAS,gBAAgC;AAuBA,SAwChC,YAAAA,WAxCgC;AAHzC,IAAM,MAAM;AAEZ,SAAS,YAAY,EAAE,MAAM,SAAS,GAAwB;AAC5D,SAAO,SAAS,SAAY,WAAW,oBAAC,OAAE,MAAa,UAAS;AAClE;AAYO,SAAS,KAAK,EAAE,MAAM,MAAM,aAAa,YAAY,GAAyB;AACnF,QAAM,QAAQ,OAAO,SAAS,WAAW,CAAC,IAAI,IAAK,QAAQ,CAAC;AAC5D,MAAI,QAAQ;AAGZ,QAAM,SAAS,CAAC,QAAgB,WAAgC;AAC9D,UAAM,MAAmB,CAAC;AAC1B,QAAI,OAAO;AACX,eAAW,SAAS,OAAO,SAAS,GAAG,GAAG;AACxC,YAAM,CAAC,OAAO,KAAK,KAAK,IAAI;AAC5B,YAAM,KAAK,MAAM;AACjB,YAAM,MAAM,GAAG,MAAM,GAAG,IAAI,MAAM;AAClC,UAAI,KAAK,KAAM,KAAI,KAAK,oBAAC,YAA0B,iBAAO,MAAM,MAAM,EAAE,KAAjC,GAAG,GAAG,GAA6B,CAAW;AACrF,UAAI,QAAQ,KAAK;AACf,YAAI,KAAK,oBAAC,YAAkB,iBAAO,OAAO,GAAG,GAAG,GAAG,KAA7B,GAA+B,CAAS;AAAA,MAChE,OAAO;AACL,cAAM,QAAQ;AACd,YAAI;AAAA,UACF,oBAAC,YAAoB,qBAAW,EAAE,MAAM,MAAM,KAAK,GAAG,OAAO,UAAU,OAAO,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAlF,GAAoF;AAAA,QACrG;AAAA,MACF;AACA,aAAO,KAAK,MAAM;AAAA,IACpB;AACA,QAAI,OAAO,OAAO,OAAQ,KAAI,KAAK,oBAAC,YAA+B,iBAAO,MAAM,IAAI,KAAlC,GAAG,MAAM,KAA2B,CAAW;AACjG,WAAO;AAAA,EACT;AAEA,SAAO,oBAAAA,WAAA,EAAG,iBAAO,MAAM,EAAE,GAAE;AAC7B;AAEA,IAAO,eAAQ;","names":["Fragment"]}
+{"version":3,"sources":["../src/rich.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from \"react\";\n\n/** What `renderLink` receives for each `<a>…</a>` of a message, in order of appearance. */\nexport interface RichLink {\n  /** The href given for this link (`href[index]`, or `href` itself when it is a string), if any. */\n  href: string | undefined;\n  /** The position of the link in the message: 0 for the first `<a>`. */\n  index: number;\n  children: ReactNode;\n}\n\nexport interface RichProps {\n  /** The message: plain text with `<b>…</b>` emphasis and `<a>…</a>` links, the only markup messages may carry. */\n  text: string;\n  /** The target of each `<a>`, in order (a string for a single link). The words stay in the message, the URL in code. */\n  href?: string | readonly string[];\n  /** Renders a link (e.g. with `next/link`). Default: `<a href>`, or the plain words when the link has no href. */\n  renderLink?: (link: RichLink) => ReactNode;\n  /** Renders a `<b>…</b>` (e.g. with the app's classes). Default: `<strong>`. */\n  renderBold?: (children: ReactNode) => ReactNode;\n  /**\n   * Nodes put in place of `{name}` placeholders (a link, an emphasised value): `slots={{ email: <strong>{email}</strong> }}`.\n   * A placeholder without a slot stays as written. Plain values go through `format` / `t` before, not here.\n   */\n  slots?: Readonly<Record<string, ReactNode>>;\n}\n\nconst TAG = /<(b|a)>([\\s\\S]*?)<\\/\\1>/g;\n\nconst SLOT = /\\{(\\w+)\\}/;\n\nfunction defaultLink({ href, children }: RichLink): ReactNode {\n  return href === undefined ? children : <a href={href}>{children}</a>;\n}\n\nfunction defaultBold(children: ReactNode): ReactNode {\n  return <strong>{children}</strong>;\n}\n\n/**\n * Renders a message with its markup — `<b>` → `<strong>`, `<a>` → a link — and everything else as text (never HTML:\n * no `dangerouslySetInnerHTML`, an unknown or unbalanced tag is shown as written). `<b>` and `<a>` may hold each other.\n * No hook, no context: usable in a Server Component.\n *\n * ```tsx\n * <Rich text={t.home.lead} />\n * <Rich text=\"Read <a>the docs</a>, <b>now</b>.\" href=\"/docs\" renderLink={({ href, children }) => <Link href={href!}>{children}</Link>} />\n * <Rich text=\"We sent a link to {email}.\" slots={{ email: <strong>{email}</strong> }} />\n * ```\n */\nexport function Rich({ text, href, renderLink = defaultLink, renderBold = defaultBold, slots }: RichProps): ReactNode {\n  const hrefs = typeof href === \"string\" ? [href] : (href ?? []);\n  let links = 0;\n\n  /** Plain text, with its `{slot}` placeholders replaced by their nodes. */\n  const plain = (source: string, key: string): ReactNode => {\n    if (!slots) return <Fragment key={key}>{source}</Fragment>;\n    const parts = source.split(SLOT);\n    return (\n      <Fragment key={key}>\n        {parts.map((part, i) =>\n          i % 2 === 0 ? part : <Fragment key={i}>{Object.hasOwn(slots, part) ? slots[part] : `{${part}}`}</Fragment>,\n        )}\n      </Fragment>\n    );\n  };\n\n  // The match is lazy: inside <b>…</b> there is no </b>, so only an <a> can match there (and the other way round).\n  const render = (source: string, prefix: string): ReactNode[] => {\n    const out: ReactNode[] = [];\n    let last = 0;\n    for (const match of source.matchAll(TAG)) {\n      const [whole, tag, inner] = match as unknown as [string, \"a\" | \"b\", string];\n      const at = match.index as number;\n      const key = `${prefix}${out.length}`;\n      if (at > last) out.push(plain(source.slice(last, at), `${key}t`));\n      if (tag === \"b\") {\n        out.push(<Fragment key={key}>{renderBold(render(inner, `${key}.`))}</Fragment>);\n      } else {\n        const index = links++;\n        out.push(\n          <Fragment key={key}>{renderLink({ href: hrefs[index], index, children: render(inner, `${key}.`) })}</Fragment>,\n        );\n      }\n      last = at + whole.length;\n    }\n    if (last < source.length) out.push(plain(source.slice(last), `${prefix}end`));\n    return out;\n  };\n\n  return <>{render(text, \"\")}</>;\n}\n\nexport default Rich;\n"],"mappings":";AAAA,SAAS,gBAAgC;AAgCA,SA0DhC,YAAAA,WA1DgC;AALzC,IAAM,MAAM;AAEZ,IAAM,OAAO;AAEb,SAAS,YAAY,EAAE,MAAM,SAAS,GAAwB;AAC5D,SAAO,SAAS,SAAY,WAAW,oBAAC,OAAE,MAAa,UAAS;AAClE;AAEA,SAAS,YAAY,UAAgC;AACnD,SAAO,oBAAC,YAAQ,UAAS;AAC3B;AAaO,SAAS,KAAK,EAAE,MAAM,MAAM,aAAa,aAAa,aAAa,aAAa,MAAM,GAAyB;AACpH,QAAM,QAAQ,OAAO,SAAS,WAAW,CAAC,IAAI,IAAK,QAAQ,CAAC;AAC5D,MAAI,QAAQ;AAGZ,QAAM,QAAQ,CAAC,QAAgB,QAA2B;AACxD,QAAI,CAAC,MAAO,QAAO,oBAAC,YAAoB,oBAAN,GAAa;AAC/C,UAAM,QAAQ,OAAO,MAAM,IAAI;AAC/B,WACE,oBAAC,YACE,gBAAM;AAAA,MAAI,CAAC,MAAM,MAChB,IAAI,MAAM,IAAI,OAAO,oBAAC,YAAkB,iBAAO,OAAO,OAAO,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,OAAvD,CAA2D;AAAA,IACjG,KAHa,GAIf;AAAA,EAEJ;AAGA,QAAM,SAAS,CAAC,QAAgB,WAAgC;AAC9D,UAAM,MAAmB,CAAC;AAC1B,QAAI,OAAO;AACX,eAAW,SAAS,OAAO,SAAS,GAAG,GAAG;AACxC,YAAM,CAAC,OAAO,KAAK,KAAK,IAAI;AAC5B,YAAM,KAAK,MAAM;AACjB,YAAM,MAAM,GAAG,MAAM,GAAG,IAAI,MAAM;AAClC,UAAI,KAAK,KAAM,KAAI,KAAK,MAAM,OAAO,MAAM,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAChE,UAAI,QAAQ,KAAK;AACf,YAAI,KAAK,oBAAC,YAAoB,qBAAW,OAAO,OAAO,GAAG,GAAG,GAAG,CAAC,KAAzC,GAA2C,CAAW;AAAA,MAChF,OAAO;AACL,cAAM,QAAQ;AACd,YAAI;AAAA,UACF,oBAAC,YAAoB,qBAAW,EAAE,MAAM,MAAM,KAAK,GAAG,OAAO,UAAU,OAAO,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAlF,GAAoF;AAAA,QACrG;AAAA,MACF;AACA,aAAO,KAAK,MAAM;AAAA,IACpB;AACA,QAAI,OAAO,OAAO,OAAQ,KAAI,KAAK,MAAM,OAAO,MAAM,IAAI,GAAG,GAAG,MAAM,KAAK,CAAC;AAC5E,WAAO;AAAA,EACT;AAEA,SAAO,oBAAAA,WAAA,EAAG,iBAAO,MAAM,EAAE,GAAE;AAC7B;AAEA,IAAO,eAAQ;","names":["Fragment"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/i18n",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "description": "The i18n engine of every Krizaka app: typed message keys and placeholders from en.json, format(), plurals through @krizaka/intl, <Rich> (<b>, <a>), a React provider, and the krizaka-i18n CLI that checks catalogues and finds hard-coded strings.",
   "keywords": [
     "krizaka",