@verbaly/react 0.2.0 → 0.4.0

package/README.md

@@ -0,0 +1,53 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/AronSoto/verbaly/develop/assets/logo-light.png" alt="Verbaly" width="300" />
+</p>
+
+<p align="center"><em>React bindings for Verbaly — hooks over the reactive core.</em></p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@verbaly/react"><img src="https://img.shields.io/npm/v/@verbaly/react?logo=npm&color=cb3837" alt="npm version" /></a>
+  <a href="https://github.com/AronSoto/verbaly/blob/develop/LICENSE"><img src="https://img.shields.io/npm/l/@verbaly/react?color=blue" alt="Apache-2.0" /></a>
+</p>
+
+---
+
+React hooks for [Verbaly](https://github.com/AronSoto/verbaly) — a thin layer (React 18/19) over the reactive core via `useSyncExternalStore`.
+
+## Install
+
+```bash
+pnpm add verbaly @verbaly/react
+```
+
+```tsx
+import { VerbalyProvider, useT, useLocale } from '@verbaly/react';
+import { verbaly } from 'virtual:verbaly';
+
+<VerbalyProvider instance={verbaly}>
+  <App />
+</VerbalyProvider>;
+
+function Inbox() {
+  const t = useT();
+  return <p>{t('inbox', { count: 3 })}</p>;
+}
+```
+
+### Rich text — `<Trans>`
+
+Interpolate elements with named tags in the message:
+
+```tsx
+import { Trans } from '@verbaly/react';
+
+// message: Read the <terms>terms</terms> first
+<Trans id="agree" components={{ terms: <a href="/terms" /> }} />;
+```
+
+📖 Docs: **https://verbaly-web.vercel.app/docs/frameworks**
+
+> ⚠️ Early development (`0.x`) — API not stable yet.
+
+## License
+
+[Apache-2.0](https://github.com/AronSoto/verbaly/blob/develop/LICENSE) © Aron Soto

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
+var import_verbaly = require("verbaly");
 var VerbalyContext = (0, import_react.createContext)(null);
 function VerbalyProvider(props) {
   return (0, import_react.createElement)(
@@ -63,37 +64,15 @@ function useVersion(instance) {
 function Trans(props) {
   const t = useT();
   const text = t(props.id, props.values);
-  return (0, import_react.createElement)(import_react.Fragment, null, ...renderTags(text, props.components ?? {}));
+  return (0, import_react.createElement)(import_react.Fragment, null, ...toNodes((0, import_verbaly.parseTags)(text), props.components ?? {}));
 }
-var TAG = /<(\/?)([a-zA-Z][\w-]*)(\/?)>/g;
-function renderTags(text, components) {
-  const tag = new RegExp(TAG.source, "g");
-  let pos = 0;
-  let key = 0;
-  const walk = (stop) => {
-    const out = [];
-    let m;
-    while ((m = tag.exec(text)) !== null) {
-      const [full, closing, name, selfClose] = m;
-      if (m.index > pos) out.push(text.slice(pos, m.index));
-      pos = m.index + full.length;
-      if (closing) {
-        if (name === stop) return out;
-        out.push(full);
-      } else if (selfClose) {
-        const el = components[name];
-        out.push(el ? (0, import_react.cloneElement)(el, { key: key++ }) : full);
-      } else {
-        const children = walk(name);
-        const el = components[name];
-        if (el) out.push((0, import_react.cloneElement)(el, { key: key++ }, ...children));
-        else out.push(...children);
-      }
-    }
-    if (pos < text.length) out.push(text.slice(pos));
-    return out;
-  };
-  return walk(null);
+function toNodes(nodes, components) {
+  return nodes.map((node, i) => {
+    if (typeof node === "string") return node;
+    const children = toNodes(node.children, components);
+    const el = components[node.name];
+    return el ? (0, import_react.cloneElement)(el, { key: i }, ...children) : (0, import_react.createElement)(import_react.Fragment, { key: i }, ...children);
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {\r\n  cloneElement,\r\n  createContext,\r\n  createElement,\r\n  Fragment,\r\n  useContext,\r\n  useSyncExternalStore,\r\n  type ReactElement,\r\n  type ReactNode,\r\n} from 'react';\r\nimport type { DictionaryInput, Params, TFunction, Verbaly } from 'verbaly';\r\n\r\nconst VerbalyContext = createContext<Verbaly | null>(null);\r\n\r\nexport interface VerbalyProviderProps<D extends DictionaryInput> {\r\n  instance: Verbaly<D>;\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function VerbalyProvider<D extends DictionaryInput>(\r\n  props: VerbalyProviderProps<D>,\r\n): ReactElement {\r\n  return createElement(\r\n    VerbalyContext.Provider,\r\n    { value: props.instance as unknown as Verbaly },\r\n    props.children,\r\n  );\r\n}\r\n\r\nexport function useVerbaly<D extends DictionaryInput = DictionaryInput>(): Verbaly<D> {\r\n  const instance = useContext(VerbalyContext);\r\n  if (!instance) {\r\n    throw new Error('[verbaly] useVerbaly requires a <VerbalyProvider>');\r\n  }\r\n  return instance as unknown as Verbaly<D>;\r\n}\r\n\r\nexport function useT<D extends DictionaryInput = DictionaryInput>(): TFunction<D> {\r\n  const instance = useVerbaly<D>();\r\n  useVersion(instance);\r\n  return instance.t;\r\n}\r\n\r\nexport function useLocale(): [string, (locale: string) => void] {\r\n  const instance = useVerbaly();\r\n  useVersion(instance);\r\n  return [instance.locale, instance.setLocale];\r\n}\r\n\r\nfunction useVersion<D extends DictionaryInput>(instance: Verbaly<D>): void {\r\n  useSyncExternalStore(\r\n    instance.subscribe,\r\n    () => instance.version,\r\n    () => instance.version,\r\n  );\r\n}\r\n\r\nexport interface TransProps {\r\n  id: string;\r\n  values?: Params;\r\n  components?: Record<string, ReactElement>;\r\n}\r\n\r\n// translated message + element interpolation\r\nexport function Trans(props: TransProps): ReactElement {\r\n  const t = useT();\r\n  const text = (t as unknown as (id: string, values?: Params) => string)(props.id, props.values);\r\n  return createElement(Fragment, null, ...renderTags(text, props.components ?? {}));\r\n}\r\n\r\nconst TAG = /<(\\/?)([a-zA-Z][\\w-]*)(\\/?)>/g;\r\n\r\nfunction renderTags(text: string, components: Record<string, ReactElement>): ReactNode[] {\r\n  const tag = new RegExp(TAG.source, 'g');\r\n  let pos = 0;\r\n  let key = 0;\r\n\r\n  const walk = (stop: string | null): ReactNode[] => {\r\n    const out: ReactNode[] = [];\r\n    let m: RegExpExecArray | null;\r\n    while ((m = tag.exec(text)) !== null) {\r\n      const [full, closing, name, selfClose] = m;\r\n      if (m.index > pos) out.push(text.slice(pos, m.index));\r\n      pos = m.index + full.length;\r\n      if (closing) {\r\n        if (name === stop) return out;\r\n        out.push(full); // stray close → literal\r\n      } else if (selfClose) {\r\n        const el = components[name!];\r\n        out.push(el ? cloneElement(el, { key: key++ }) : full);\r\n      } else {\r\n        const children = walk(name!);\r\n        const el = components[name!];\r\n        if (el) out.push(cloneElement(el, { key: key++ }, ...children));\r\n        else out.push(...children); // unknown tag → text\r\n      }\r\n    }\r\n    if (pos < text.length) out.push(text.slice(pos));\r\n    return out;\r\n  };\r\n  return walk(null);\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBASO;AAGP,IAAM,qBAAiB,4BAA8B,IAAI;AAOlD,SAAS,gBACd,OACc;AACd,aAAO;AAAA,IACL,eAAe;AAAA,IACf,EAAE,OAAO,MAAM,SAA+B;AAAA,IAC9C,MAAM;AAAA,EACR;AACF;AAEO,SAAS,aAAsE;AACpF,QAAM,eAAW,yBAAW,cAAc;AAC1C,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AACA,SAAO;AACT;AAEO,SAAS,OAAkE;AAChF,QAAM,WAAW,WAAc;AAC/B,aAAW,QAAQ;AACnB,SAAO,SAAS;AAClB;AAEO,SAAS,YAAgD;AAC9D,QAAM,WAAW,WAAW;AAC5B,aAAW,QAAQ;AACnB,SAAO,CAAC,SAAS,QAAQ,SAAS,SAAS;AAC7C;AAEA,SAAS,WAAsC,UAA4B;AACzE;AAAA,IACE,SAAS;AAAA,IACT,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,EACjB;AACF;AASO,SAAS,MAAM,OAAiC;AACrD,QAAM,IAAI,KAAK;AACf,QAAM,OAAQ,EAAyD,MAAM,IAAI,MAAM,MAAM;AAC7F,aAAO,4BAAc,uBAAU,MAAM,GAAG,WAAW,MAAM,MAAM,cAAc,CAAC,CAAC,CAAC;AAClF;AAEA,IAAM,MAAM;AAEZ,SAAS,WAAW,MAAc,YAAuD;AACvF,QAAM,MAAM,IAAI,OAAO,IAAI,QAAQ,GAAG;AACtC,MAAI,MAAM;AACV,MAAI,MAAM;AAEV,QAAM,OAAO,CAAC,SAAqC;AACjD,UAAM,MAAmB,CAAC;AAC1B,QAAI;AACJ,YAAQ,IAAI,IAAI,KAAK,IAAI,OAAO,MAAM;AACpC,YAAM,CAAC,MAAM,SAAS,MAAM,SAAS,IAAI;AACzC,UAAI,EAAE,QAAQ,IAAK,KAAI,KAAK,KAAK,MAAM,KAAK,EAAE,KAAK,CAAC;AACpD,YAAM,EAAE,QAAQ,KAAK;AACrB,UAAI,SAAS;AACX,YAAI,SAAS,KAAM,QAAO;AAC1B,YAAI,KAAK,IAAI;AAAA,MACf,WAAW,WAAW;AACpB,cAAM,KAAK,WAAW,IAAK;AAC3B,YAAI,KAAK,SAAK,2BAAa,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,IAAI;AAAA,MACvD,OAAO;AACL,cAAM,WAAW,KAAK,IAAK;AAC3B,cAAM,KAAK,WAAW,IAAK;AAC3B,YAAI,GAAI,KAAI,SAAK,2BAAa,IAAI,EAAE,KAAK,MAAM,GAAG,GAAG,QAAQ,CAAC;AAAA,YACzD,KAAI,KAAK,GAAG,QAAQ;AAAA,MAC3B;AAAA,IACF;AACA,QAAI,MAAM,KAAK,OAAQ,KAAI,KAAK,KAAK,MAAM,GAAG,CAAC;AAC/C,WAAO;AAAA,EACT;AACA,SAAO,KAAK,IAAI;AAClB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {\n  cloneElement,\n  createContext,\n  createElement,\n  Fragment,\n  useContext,\n  useSyncExternalStore,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport {\n  parseTags,\n  type DictionaryInput,\n  type Params,\n  type TagNode,\n  type TFunction,\n  type Verbaly,\n} from 'verbaly';\n\nconst VerbalyContext = createContext<Verbaly | null>(null);\n\nexport interface VerbalyProviderProps<D extends DictionaryInput> {\n  instance: Verbaly<D>;\n  children?: ReactNode;\n}\n\nexport function VerbalyProvider<D extends DictionaryInput>(\n  props: VerbalyProviderProps<D>,\n): ReactElement {\n  return createElement(\n    VerbalyContext.Provider,\n    { value: props.instance as unknown as Verbaly },\n    props.children,\n  );\n}\n\nexport function useVerbaly<D extends DictionaryInput = DictionaryInput>(): Verbaly<D> {\n  const instance = useContext(VerbalyContext);\n  if (!instance) {\n    throw new Error('[verbaly] useVerbaly requires a <VerbalyProvider>');\n  }\n  return instance as unknown as Verbaly<D>;\n}\n\nexport function useT<D extends DictionaryInput = DictionaryInput>(): TFunction<D> {\n  const instance = useVerbaly<D>();\n  useVersion(instance);\n  return instance.t;\n}\n\nexport function useLocale(): [string, (locale: string) => void] {\n  const instance = useVerbaly();\n  useVersion(instance);\n  return [instance.locale, instance.setLocale];\n}\n\nfunction useVersion<D extends DictionaryInput>(instance: Verbaly<D>): void {\n  useSyncExternalStore(\n    instance.subscribe,\n    () => instance.version,\n    () => instance.version,\n  );\n}\n\nexport interface TransProps {\n  id: string;\n  values?: Params;\n  components?: Record<string, ReactElement>;\n}\n\n// translated message + element interpolation\nexport function Trans(props: TransProps): ReactElement {\n  const t = useT();\n  const text = (t as unknown as (id: string, values?: Params) => string)(props.id, props.values);\n  return createElement(Fragment, null, ...toNodes(parseTags(text), props.components ?? {}));\n}\n\nfunction toNodes(nodes: TagNode[], components: Record<string, ReactElement>): ReactNode[] {\n  return nodes.map((node, i) => {\n    if (typeof node === 'string') return node;\n    const children = toNodes(node.children, components);\n    const el = components[node.name];\n    return el\n      ? cloneElement(el, { key: i }, ...children)\n      : createElement(Fragment, { key: i }, ...children);\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBASO;AACP,qBAOO;AAEP,IAAM,qBAAiB,4BAA8B,IAAI;AAOlD,SAAS,gBACd,OACc;AACd,aAAO;AAAA,IACL,eAAe;AAAA,IACf,EAAE,OAAO,MAAM,SAA+B;AAAA,IAC9C,MAAM;AAAA,EACR;AACF;AAEO,SAAS,aAAsE;AACpF,QAAM,eAAW,yBAAW,cAAc;AAC1C,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AACA,SAAO;AACT;AAEO,SAAS,OAAkE;AAChF,QAAM,WAAW,WAAc;AAC/B,aAAW,QAAQ;AACnB,SAAO,SAAS;AAClB;AAEO,SAAS,YAAgD;AAC9D,QAAM,WAAW,WAAW;AAC5B,aAAW,QAAQ;AACnB,SAAO,CAAC,SAAS,QAAQ,SAAS,SAAS;AAC7C;AAEA,SAAS,WAAsC,UAA4B;AACzE;AAAA,IACE,SAAS;AAAA,IACT,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,EACjB;AACF;AASO,SAAS,MAAM,OAAiC;AACrD,QAAM,IAAI,KAAK;AACf,QAAM,OAAQ,EAAyD,MAAM,IAAI,MAAM,MAAM;AAC7F,aAAO,4BAAc,uBAAU,MAAM,GAAG,YAAQ,0BAAU,IAAI,GAAG,MAAM,cAAc,CAAC,CAAC,CAAC;AAC1F;AAEA,SAAS,QAAQ,OAAkB,YAAuD;AACxF,SAAO,MAAM,IAAI,CAAC,MAAM,MAAM;AAC5B,QAAI,OAAO,SAAS,SAAU,QAAO;AACrC,UAAM,WAAW,QAAQ,KAAK,UAAU,UAAU;AAClD,UAAM,KAAK,WAAW,KAAK,IAAI;AAC/B,WAAO,SACH,2BAAa,IAAI,EAAE,KAAK,EAAE,GAAG,GAAG,QAAQ,QACxC,4BAAc,uBAAU,EAAE,KAAK,EAAE,GAAG,GAAG,QAAQ;AAAA,EACrD,CAAC;AACH;","names":[]}

package/dist/index.js

@@ -7,6 +7,9 @@ import {
   useContext,
   useSyncExternalStore
 } from "react";
+import {
+  parseTags
+} from "verbaly";
 var VerbalyContext = createContext(null);
 function VerbalyProvider(props) {
   return createElement(
@@ -42,37 +45,15 @@ function useVersion(instance) {
 function Trans(props) {
   const t = useT();
   const text = t(props.id, props.values);
-  return createElement(Fragment, null, ...renderTags(text, props.components ?? {}));
+  return createElement(Fragment, null, ...toNodes(parseTags(text), props.components ?? {}));
 }
-var TAG = /<(\/?)([a-zA-Z][\w-]*)(\/?)>/g;
-function renderTags(text, components) {
-  const tag = new RegExp(TAG.source, "g");
-  let pos = 0;
-  let key = 0;
-  const walk = (stop) => {
-    const out = [];
-    let m;
-    while ((m = tag.exec(text)) !== null) {
-      const [full, closing, name, selfClose] = m;
-      if (m.index > pos) out.push(text.slice(pos, m.index));
-      pos = m.index + full.length;
-      if (closing) {
-        if (name === stop) return out;
-        out.push(full);
-      } else if (selfClose) {
-        const el = components[name];
-        out.push(el ? cloneElement(el, { key: key++ }) : full);
-      } else {
-        const children = walk(name);
-        const el = components[name];
-        if (el) out.push(cloneElement(el, { key: key++ }, ...children));
-        else out.push(...children);
-      }
-    }
-    if (pos < text.length) out.push(text.slice(pos));
-    return out;
-  };
-  return walk(null);
+function toNodes(nodes, components) {
+  return nodes.map((node, i) => {
+    if (typeof node === "string") return node;
+    const children = toNodes(node.children, components);
+    const el = components[node.name];
+    return el ? cloneElement(el, { key: i }, ...children) : createElement(Fragment, { key: i }, ...children);
+  });
 }
 export {
   Trans,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {\r\n  cloneElement,\r\n  createContext,\r\n  createElement,\r\n  Fragment,\r\n  useContext,\r\n  useSyncExternalStore,\r\n  type ReactElement,\r\n  type ReactNode,\r\n} from 'react';\r\nimport type { DictionaryInput, Params, TFunction, Verbaly } from 'verbaly';\r\n\r\nconst VerbalyContext = createContext<Verbaly | null>(null);\r\n\r\nexport interface VerbalyProviderProps<D extends DictionaryInput> {\r\n  instance: Verbaly<D>;\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function VerbalyProvider<D extends DictionaryInput>(\r\n  props: VerbalyProviderProps<D>,\r\n): ReactElement {\r\n  return createElement(\r\n    VerbalyContext.Provider,\r\n    { value: props.instance as unknown as Verbaly },\r\n    props.children,\r\n  );\r\n}\r\n\r\nexport function useVerbaly<D extends DictionaryInput = DictionaryInput>(): Verbaly<D> {\r\n  const instance = useContext(VerbalyContext);\r\n  if (!instance) {\r\n    throw new Error('[verbaly] useVerbaly requires a <VerbalyProvider>');\r\n  }\r\n  return instance as unknown as Verbaly<D>;\r\n}\r\n\r\nexport function useT<D extends DictionaryInput = DictionaryInput>(): TFunction<D> {\r\n  const instance = useVerbaly<D>();\r\n  useVersion(instance);\r\n  return instance.t;\r\n}\r\n\r\nexport function useLocale(): [string, (locale: string) => void] {\r\n  const instance = useVerbaly();\r\n  useVersion(instance);\r\n  return [instance.locale, instance.setLocale];\r\n}\r\n\r\nfunction useVersion<D extends DictionaryInput>(instance: Verbaly<D>): void {\r\n  useSyncExternalStore(\r\n    instance.subscribe,\r\n    () => instance.version,\r\n    () => instance.version,\r\n  );\r\n}\r\n\r\nexport interface TransProps {\r\n  id: string;\r\n  values?: Params;\r\n  components?: Record<string, ReactElement>;\r\n}\r\n\r\n// translated message + element interpolation\r\nexport function Trans(props: TransProps): ReactElement {\r\n  const t = useT();\r\n  const text = (t as unknown as (id: string, values?: Params) => string)(props.id, props.values);\r\n  return createElement(Fragment, null, ...renderTags(text, props.components ?? {}));\r\n}\r\n\r\nconst TAG = /<(\\/?)([a-zA-Z][\\w-]*)(\\/?)>/g;\r\n\r\nfunction renderTags(text: string, components: Record<string, ReactElement>): ReactNode[] {\r\n  const tag = new RegExp(TAG.source, 'g');\r\n  let pos = 0;\r\n  let key = 0;\r\n\r\n  const walk = (stop: string | null): ReactNode[] => {\r\n    const out: ReactNode[] = [];\r\n    let m: RegExpExecArray | null;\r\n    while ((m = tag.exec(text)) !== null) {\r\n      const [full, closing, name, selfClose] = m;\r\n      if (m.index > pos) out.push(text.slice(pos, m.index));\r\n      pos = m.index + full.length;\r\n      if (closing) {\r\n        if (name === stop) return out;\r\n        out.push(full); // stray close → literal\r\n      } else if (selfClose) {\r\n        const el = components[name!];\r\n        out.push(el ? cloneElement(el, { key: key++ }) : full);\r\n      } else {\r\n        const children = walk(name!);\r\n        const el = components[name!];\r\n        if (el) out.push(cloneElement(el, { key: key++ }, ...children));\r\n        else out.push(...children); // unknown tag → text\r\n      }\r\n    }\r\n    if (pos < text.length) out.push(text.slice(pos));\r\n    return out;\r\n  };\r\n  return walk(null);\r\n}\r\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,IAAM,iBAAiB,cAA8B,IAAI;AAOlD,SAAS,gBACd,OACc;AACd,SAAO;AAAA,IACL,eAAe;AAAA,IACf,EAAE,OAAO,MAAM,SAA+B;AAAA,IAC9C,MAAM;AAAA,EACR;AACF;AAEO,SAAS,aAAsE;AACpF,QAAM,WAAW,WAAW,cAAc;AAC1C,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AACA,SAAO;AACT;AAEO,SAAS,OAAkE;AAChF,QAAM,WAAW,WAAc;AAC/B,aAAW,QAAQ;AACnB,SAAO,SAAS;AAClB;AAEO,SAAS,YAAgD;AAC9D,QAAM,WAAW,WAAW;AAC5B,aAAW,QAAQ;AACnB,SAAO,CAAC,SAAS,QAAQ,SAAS,SAAS;AAC7C;AAEA,SAAS,WAAsC,UAA4B;AACzE;AAAA,IACE,SAAS;AAAA,IACT,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,EACjB;AACF;AASO,SAAS,MAAM,OAAiC;AACrD,QAAM,IAAI,KAAK;AACf,QAAM,OAAQ,EAAyD,MAAM,IAAI,MAAM,MAAM;AAC7F,SAAO,cAAc,UAAU,MAAM,GAAG,WAAW,MAAM,MAAM,cAAc,CAAC,CAAC,CAAC;AAClF;AAEA,IAAM,MAAM;AAEZ,SAAS,WAAW,MAAc,YAAuD;AACvF,QAAM,MAAM,IAAI,OAAO,IAAI,QAAQ,GAAG;AACtC,MAAI,MAAM;AACV,MAAI,MAAM;AAEV,QAAM,OAAO,CAAC,SAAqC;AACjD,UAAM,MAAmB,CAAC;AAC1B,QAAI;AACJ,YAAQ,IAAI,IAAI,KAAK,IAAI,OAAO,MAAM;AACpC,YAAM,CAAC,MAAM,SAAS,MAAM,SAAS,IAAI;AACzC,UAAI,EAAE,QAAQ,IAAK,KAAI,KAAK,KAAK,MAAM,KAAK,EAAE,KAAK,CAAC;AACpD,YAAM,EAAE,QAAQ,KAAK;AACrB,UAAI,SAAS;AACX,YAAI,SAAS,KAAM,QAAO;AAC1B,YAAI,KAAK,IAAI;AAAA,MACf,WAAW,WAAW;AACpB,cAAM,KAAK,WAAW,IAAK;AAC3B,YAAI,KAAK,KAAK,aAAa,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,IAAI;AAAA,MACvD,OAAO;AACL,cAAM,WAAW,KAAK,IAAK;AAC3B,cAAM,KAAK,WAAW,IAAK;AAC3B,YAAI,GAAI,KAAI,KAAK,aAAa,IAAI,EAAE,KAAK,MAAM,GAAG,GAAG,QAAQ,CAAC;AAAA,YACzD,KAAI,KAAK,GAAG,QAAQ;AAAA,MAC3B;AAAA,IACF;AACA,QAAI,MAAM,KAAK,OAAQ,KAAI,KAAK,KAAK,MAAM,GAAG,CAAC;AAC/C,WAAO;AAAA,EACT;AACA,SAAO,KAAK,IAAI;AAClB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {\n  cloneElement,\n  createContext,\n  createElement,\n  Fragment,\n  useContext,\n  useSyncExternalStore,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport {\n  parseTags,\n  type DictionaryInput,\n  type Params,\n  type TagNode,\n  type TFunction,\n  type Verbaly,\n} from 'verbaly';\n\nconst VerbalyContext = createContext<Verbaly | null>(null);\n\nexport interface VerbalyProviderProps<D extends DictionaryInput> {\n  instance: Verbaly<D>;\n  children?: ReactNode;\n}\n\nexport function VerbalyProvider<D extends DictionaryInput>(\n  props: VerbalyProviderProps<D>,\n): ReactElement {\n  return createElement(\n    VerbalyContext.Provider,\n    { value: props.instance as unknown as Verbaly },\n    props.children,\n  );\n}\n\nexport function useVerbaly<D extends DictionaryInput = DictionaryInput>(): Verbaly<D> {\n  const instance = useContext(VerbalyContext);\n  if (!instance) {\n    throw new Error('[verbaly] useVerbaly requires a <VerbalyProvider>');\n  }\n  return instance as unknown as Verbaly<D>;\n}\n\nexport function useT<D extends DictionaryInput = DictionaryInput>(): TFunction<D> {\n  const instance = useVerbaly<D>();\n  useVersion(instance);\n  return instance.t;\n}\n\nexport function useLocale(): [string, (locale: string) => void] {\n  const instance = useVerbaly();\n  useVersion(instance);\n  return [instance.locale, instance.setLocale];\n}\n\nfunction useVersion<D extends DictionaryInput>(instance: Verbaly<D>): void {\n  useSyncExternalStore(\n    instance.subscribe,\n    () => instance.version,\n    () => instance.version,\n  );\n}\n\nexport interface TransProps {\n  id: string;\n  values?: Params;\n  components?: Record<string, ReactElement>;\n}\n\n// translated message + element interpolation\nexport function Trans(props: TransProps): ReactElement {\n  const t = useT();\n  const text = (t as unknown as (id: string, values?: Params) => string)(props.id, props.values);\n  return createElement(Fragment, null, ...toNodes(parseTags(text), props.components ?? {}));\n}\n\nfunction toNodes(nodes: TagNode[], components: Record<string, ReactElement>): ReactNode[] {\n  return nodes.map((node, i) => {\n    if (typeof node === 'string') return node;\n    const children = toNodes(node.children, components);\n    const el = components[node.name];\n    return el\n      ? cloneElement(el, { key: i }, ...children)\n      : createElement(Fragment, { key: i }, ...children);\n  });\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,OAMK;AAEP,IAAM,iBAAiB,cAA8B,IAAI;AAOlD,SAAS,gBACd,OACc;AACd,SAAO;AAAA,IACL,eAAe;AAAA,IACf,EAAE,OAAO,MAAM,SAA+B;AAAA,IAC9C,MAAM;AAAA,EACR;AACF;AAEO,SAAS,aAAsE;AACpF,QAAM,WAAW,WAAW,cAAc;AAC1C,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AACA,SAAO;AACT;AAEO,SAAS,OAAkE;AAChF,QAAM,WAAW,WAAc;AAC/B,aAAW,QAAQ;AACnB,SAAO,SAAS;AAClB;AAEO,SAAS,YAAgD;AAC9D,QAAM,WAAW,WAAW;AAC5B,aAAW,QAAQ;AACnB,SAAO,CAAC,SAAS,QAAQ,SAAS,SAAS;AAC7C;AAEA,SAAS,WAAsC,UAA4B;AACzE;AAAA,IACE,SAAS;AAAA,IACT,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,EACjB;AACF;AASO,SAAS,MAAM,OAAiC;AACrD,QAAM,IAAI,KAAK;AACf,QAAM,OAAQ,EAAyD,MAAM,IAAI,MAAM,MAAM;AAC7F,SAAO,cAAc,UAAU,MAAM,GAAG,QAAQ,UAAU,IAAI,GAAG,MAAM,cAAc,CAAC,CAAC,CAAC;AAC1F;AAEA,SAAS,QAAQ,OAAkB,YAAuD;AACxF,SAAO,MAAM,IAAI,CAAC,MAAM,MAAM;AAC5B,QAAI,OAAO,SAAS,SAAU,QAAO;AACrC,UAAM,WAAW,QAAQ,KAAK,UAAU,UAAU;AAClD,UAAM,KAAK,WAAW,KAAK,IAAI;AAC/B,WAAO,KACH,aAAa,IAAI,EAAE,KAAK,EAAE,GAAG,GAAG,QAAQ,IACxC,cAAc,UAAU,EAAE,KAAK,EAAE,GAAG,GAAG,QAAQ;AAAA,EACrD,CAAC;AACH;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbaly/react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "React bindings for Verbaly — hooks over the reactive core.",
   "keywords": [
     "i18n",
@@ -43,7 +43,7 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "verbaly": "^0.2.0"
+    "verbaly": "^0.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",
@@ -51,7 +51,7 @@
     "happy-dom": "^20.10.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "verbaly": "0.2.0"
+    "verbaly": "0.4.0"
   },
   "scripts": {
     "build": "tsup",