@verbaly/react 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -0
- package/dist/index.cjs +9 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +11 -30
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/AronSoto/verbaly/develop/assets/logo-light.png" alt="Verbaly" width="300" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p align="center"><em>React bindings for Verbaly — hooks over the reactive core.</em></p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<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>
|
|
9
|
+
<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>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
React hooks for [Verbaly](https://github.com/AronSoto/verbaly) — a thin layer (React 18/19) over the reactive core via `useSyncExternalStore`.
|
|
15
|
+
|
|
16
|
+
## Install
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add verbaly @verbaly/react
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { VerbalyProvider, useT, useLocale } from '@verbaly/react';
|
|
24
|
+
import { verbaly } from 'virtual:verbaly';
|
|
25
|
+
|
|
26
|
+
<VerbalyProvider instance={verbaly}>
|
|
27
|
+
<App />
|
|
28
|
+
</VerbalyProvider>;
|
|
29
|
+
|
|
30
|
+
function Inbox() {
|
|
31
|
+
const t = useT();
|
|
32
|
+
return <p>{t('inbox', { count: 3 })}</p>;
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Rich text — `<Trans>`
|
|
37
|
+
|
|
38
|
+
Interpolate elements with named tags in the message:
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { Trans } from '@verbaly/react';
|
|
42
|
+
|
|
43
|
+
// message: Read the <terms>terms</terms> first
|
|
44
|
+
<Trans id="agree" components={{ terms: <a href="/terms" /> }} />;
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
📖 Docs: **https://verbaly-web.vercel.app/docs/frameworks**
|
|
48
|
+
|
|
49
|
+
> ⚠️ Early development (`0.x`) — API not stable yet.
|
|
50
|
+
|
|
51
|
+
## License
|
|
52
|
+
|
|
53
|
+
[Apache-2.0](https://github.com/AronSoto/verbaly/blob/develop/LICENSE) © Aron Soto
|
package/dist/index.cjs
CHANGED
|
@@ -28,6 +28,7 @@ __export(index_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(index_exports);
|
|
30
30
|
var import_react = require("react");
|
|
31
|
+
var import_verbaly = require("verbaly");
|
|
31
32
|
var VerbalyContext = (0, import_react.createContext)(null);
|
|
32
33
|
function VerbalyProvider(props) {
|
|
33
34
|
return (0, import_react.createElement)(
|
|
@@ -63,37 +64,15 @@ function useVersion(instance) {
|
|
|
63
64
|
function Trans(props) {
|
|
64
65
|
const t = useT();
|
|
65
66
|
const text = t(props.id, props.values);
|
|
66
|
-
return (0, import_react.createElement)(import_react.Fragment, null, ...
|
|
67
|
+
return (0, import_react.createElement)(import_react.Fragment, null, ...toNodes((0, import_verbaly.parseTags)(text), props.components ?? {}));
|
|
67
68
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
let m;
|
|
76
|
-
while ((m = tag.exec(text)) !== null) {
|
|
77
|
-
const [full, closing, name, selfClose] = m;
|
|
78
|
-
if (m.index > pos) out.push(text.slice(pos, m.index));
|
|
79
|
-
pos = m.index + full.length;
|
|
80
|
-
if (closing) {
|
|
81
|
-
if (name === stop) return out;
|
|
82
|
-
out.push(full);
|
|
83
|
-
} else if (selfClose) {
|
|
84
|
-
const el = components[name];
|
|
85
|
-
out.push(el ? (0, import_react.cloneElement)(el, { key: key++ }) : full);
|
|
86
|
-
} else {
|
|
87
|
-
const children = walk(name);
|
|
88
|
-
const el = components[name];
|
|
89
|
-
if (el) out.push((0, import_react.cloneElement)(el, { key: key++ }, ...children));
|
|
90
|
-
else out.push(...children);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
if (pos < text.length) out.push(text.slice(pos));
|
|
94
|
-
return out;
|
|
95
|
-
};
|
|
96
|
-
return walk(null);
|
|
69
|
+
function toNodes(nodes, components) {
|
|
70
|
+
return nodes.map((node, i) => {
|
|
71
|
+
if (typeof node === "string") return node;
|
|
72
|
+
const children = toNodes(node.children, components);
|
|
73
|
+
const el = components[node.name];
|
|
74
|
+
return el ? (0, import_react.cloneElement)(el, { key: i }, ...children) : (0, import_react.createElement)(import_react.Fragment, { key: i }, ...children);
|
|
75
|
+
});
|
|
97
76
|
}
|
|
98
77
|
// Annotate the CommonJS export names for ESM import in node:
|
|
99
78
|
0 && (module.exports = {
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +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
|
|
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 {\r\n parseTags,\r\n type DictionaryInput,\r\n type Params,\r\n type TagNode,\r\n type TFunction,\r\n type Verbaly,\r\n} 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, ...toNodes(parseTags(text), props.components ?? {}));\r\n}\r\n\r\nfunction toNodes(nodes: TagNode[], components: Record<string, ReactElement>): ReactNode[] {\r\n return nodes.map((node, i) => {\r\n if (typeof node === 'string') return node;\r\n const children = toNodes(node.children, components);\r\n const el = components[node.name];\r\n return el\r\n ? cloneElement(el, { key: i }, ...children)\r\n : createElement(Fragment, { key: i }, ...children);\r\n });\r\n}\r\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
CHANGED
|
@@ -7,6 +7,9 @@ import {
|
|
|
7
7
|
useContext,
|
|
8
8
|
useSyncExternalStore
|
|
9
9
|
} from "react";
|
|
10
|
+
import {
|
|
11
|
+
parseTags
|
|
12
|
+
} from "verbaly";
|
|
10
13
|
var VerbalyContext = createContext(null);
|
|
11
14
|
function VerbalyProvider(props) {
|
|
12
15
|
return createElement(
|
|
@@ -42,37 +45,15 @@ function useVersion(instance) {
|
|
|
42
45
|
function Trans(props) {
|
|
43
46
|
const t = useT();
|
|
44
47
|
const text = t(props.id, props.values);
|
|
45
|
-
return createElement(Fragment, null, ...
|
|
48
|
+
return createElement(Fragment, null, ...toNodes(parseTags(text), props.components ?? {}));
|
|
46
49
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
let m;
|
|
55
|
-
while ((m = tag.exec(text)) !== null) {
|
|
56
|
-
const [full, closing, name, selfClose] = m;
|
|
57
|
-
if (m.index > pos) out.push(text.slice(pos, m.index));
|
|
58
|
-
pos = m.index + full.length;
|
|
59
|
-
if (closing) {
|
|
60
|
-
if (name === stop) return out;
|
|
61
|
-
out.push(full);
|
|
62
|
-
} else if (selfClose) {
|
|
63
|
-
const el = components[name];
|
|
64
|
-
out.push(el ? cloneElement(el, { key: key++ }) : full);
|
|
65
|
-
} else {
|
|
66
|
-
const children = walk(name);
|
|
67
|
-
const el = components[name];
|
|
68
|
-
if (el) out.push(cloneElement(el, { key: key++ }, ...children));
|
|
69
|
-
else out.push(...children);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
if (pos < text.length) out.push(text.slice(pos));
|
|
73
|
-
return out;
|
|
74
|
-
};
|
|
75
|
-
return walk(null);
|
|
50
|
+
function toNodes(nodes, components) {
|
|
51
|
+
return nodes.map((node, i) => {
|
|
52
|
+
if (typeof node === "string") return node;
|
|
53
|
+
const children = toNodes(node.children, components);
|
|
54
|
+
const el = components[node.name];
|
|
55
|
+
return el ? cloneElement(el, { key: i }, ...children) : createElement(Fragment, { key: i }, ...children);
|
|
56
|
+
});
|
|
76
57
|
}
|
|
77
58
|
export {
|
|
78
59
|
Trans,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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
|
|
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 {\r\n parseTags,\r\n type DictionaryInput,\r\n type Params,\r\n type TagNode,\r\n type TFunction,\r\n type Verbaly,\r\n} 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, ...toNodes(parseTags(text), props.components ?? {}));\r\n}\r\n\r\nfunction toNodes(nodes: TagNode[], components: Record<string, ReactElement>): ReactNode[] {\r\n return nodes.map((node, i) => {\r\n if (typeof node === 'string') return node;\r\n const children = toNodes(node.children, components);\r\n const el = components[node.name];\r\n return el\r\n ? cloneElement(el, { key: i }, ...children)\r\n : createElement(Fragment, { key: i }, ...children);\r\n });\r\n}\r\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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@verbaly/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "React bindings for Verbaly — hooks over the reactive core.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"i18n",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "^18.0.0 || ^19.0.0",
|
|
46
|
-
"verbaly": "^0.
|
|
46
|
+
"verbaly": "^0.3.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@types/react": "^19.2.17",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"happy-dom": "^20.10.6",
|
|
52
52
|
"react": "^19.2.7",
|
|
53
53
|
"react-dom": "^19.2.7",
|
|
54
|
-
"verbaly": "0.
|
|
54
|
+
"verbaly": "0.3.0"
|
|
55
55
|
},
|
|
56
56
|
"scripts": {
|
|
57
57
|
"build": "tsup",
|