react-intlayer 4.1.0 → 4.1.1
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 +8 -9
- package/dist/cjs/editor/IntlayerEditorProvider.cjs +16 -12
- package/dist/cjs/editor/IntlayerEditorProvider.cjs.map +1 -1
- package/dist/esm/editor/IntlayerEditorProvider.mjs +16 -12
- package/dist/esm/editor/IntlayerEditorProvider.mjs.map +1 -1
- package/dist/types/editor/IntlayerEditorProvider.d.ts.map +1 -1
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<a href="https://
|
|
2
|
+
<a href="https://intlayer.org">
|
|
3
3
|
<img src="https://raw.githubusercontent.com/aymericzip/intlayer/572ae9c9acafb74307b81530c1931a8e98990aef/docs/assets/logo.png" width="500" alt="intlayer" />
|
|
4
4
|
</a>
|
|
5
5
|
</div>
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
<a href="https://npmjs.org/package/react-intlayer">
|
|
15
15
|
<img alt="types included" src="https://badgen.net/npm/types/react-intlayer?labelColor=49516F&color=8994BC"
|
|
16
16
|
/>
|
|
17
|
-
</a>
|
|
18
17
|
</div>
|
|
19
18
|
|
|
20
19
|
# react-intlayer: Internationalize (i18n) an React application
|
|
@@ -55,7 +54,7 @@ With Intlayer, you can declare your content in a structured way anywhere in your
|
|
|
55
54
|
|
|
56
55
|
By default, Intlayer scans for files with the extension `.content.{ts,tsx,js,jsx,mjs,cjs}`.
|
|
57
56
|
|
|
58
|
-
> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://
|
|
57
|
+
> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://intlayer.org//doc/concept/configuration).
|
|
59
58
|
|
|
60
59
|
```bash codeFormat="typescript"
|
|
61
60
|
.
|
|
@@ -158,17 +157,17 @@ const Component1Example = () => {
|
|
|
158
157
|
|
|
159
158
|
Intlayer provides a lot of features to help you internationalize your React application.
|
|
160
159
|
|
|
161
|
-
**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and Vite and React](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md) guide for Vite and React Application, or the [React Internationalization (i18n) with Intlayer and React (CRA)](https://
|
|
160
|
+
**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and Vite and React](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md) guide for Vite and React Application, or the [React Internationalization (i18n) with Intlayer and React (CRA)](https://intlayer.org//doc/environment/create-react-app) guide for React Create App.**
|
|
162
161
|
|
|
163
162
|
## Functions provided by `react-intlayer` package
|
|
164
163
|
|
|
165
164
|
The `react-intlayer` package also provides some functions to help you to internationalize your application.
|
|
166
165
|
|
|
167
|
-
- [`t()`](https://
|
|
168
|
-
- [`useIntlayer()`](https://
|
|
169
|
-
- [`useDictionary()`](https://
|
|
170
|
-
- [`useLocale()`](https://
|
|
171
|
-
- [`useIntlayerAsync()`](https://
|
|
166
|
+
- [`t()`](https://intlayer.org//doc/packages/react-intlayer/t)
|
|
167
|
+
- [`useIntlayer()`](https://intlayer.org//doc/packages/react-intlayer/useIntlayer)
|
|
168
|
+
- [`useDictionary()`](https://intlayer.org//doc/packages/react-intlayer/useDictionary)
|
|
169
|
+
- [`useLocale()`](https://intlayer.org//doc/packages/react-intlayer/useLocale)
|
|
170
|
+
- [`useIntlayerAsync()`](https://intlayer.org//doc/packages/react-intlayer/useIntlayerAsync)
|
|
172
171
|
|
|
173
172
|
## Read about Intlayer
|
|
174
173
|
|
|
@@ -61,18 +61,22 @@ const IntlayerEditorProvider = ({ children }) => {
|
|
|
61
61
|
{
|
|
62
62
|
postMessage: (data) => {
|
|
63
63
|
if (typeof window === "undefined") return;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
64
|
+
if (editor.applicationURL.length > 0) {
|
|
65
|
+
window?.postMessage(
|
|
66
|
+
data,
|
|
67
|
+
// Use to restrict the origin of the editor for security reasons.
|
|
68
|
+
// Correspond to the current application URL to synchronize the locales states.
|
|
69
|
+
editor.applicationURL
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
if (editor.editorURL.length > 0) {
|
|
73
|
+
window.parent?.postMessage(
|
|
74
|
+
data,
|
|
75
|
+
// Use to restrict the origin of the editor for security reasons.
|
|
76
|
+
// Correspond to the current editor URL.
|
|
77
|
+
editor.editorURL
|
|
78
|
+
);
|
|
79
|
+
}
|
|
76
80
|
},
|
|
77
81
|
allowedOrigins: [editor.editorURL, editor.applicationURL],
|
|
78
82
|
mode: "client",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport {\n EditorProvider,\n useCrossURLPathState,\n useDictionariesRecordActions,\n
|
|
1
|
+
{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport {\n EditorProvider,\n useCrossURLPathState,\n useDictionariesRecordActions,\n useIframeClickInterceptor,\n useEditorEnabled,\n} from '@intlayer/editor-react';\nimport { useEffect, type FC, type PropsWithChildren } from 'react';\n\nconst IntlayerEditorHooksEnabled: FC = () => {\n /**\n * URL Messages\n */\n useCrossURLPathState(undefined, {\n receive: false,\n emit: true,\n });\n\n /**\n * Locale Dictionaries Messages\n */\n const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n useEffect(() => {\n setLocaleDictionaries(dictionaries);\n }, [setLocaleDictionaries]);\n\n /**\n * Click Messages\n */\n useIframeClickInterceptor();\n\n return <></>;\n};\n\nconst IntlayerEditorHook: FC = () => {\n const { enabled } = useEditorEnabled();\n\n return enabled ? <IntlayerEditorHooksEnabled /> : <></>;\n};\n\nexport const IntlayerEditorProvider: FC<PropsWithChildren> = ({ children }) => {\n const configuration = getConfiguration();\n\n const { editor } = configuration;\n\n return (\n <EditorProvider\n postMessage={(data: any) => {\n if (typeof window === 'undefined') return;\n\n if (editor.applicationURL.length > 0) {\n window?.postMessage(\n data,\n // Use to restrict the origin of the editor for security reasons.\n // Correspond to the current application URL to synchronize the locales states.\n editor.applicationURL\n );\n }\n\n if (editor.editorURL.length > 0) {\n window.parent?.postMessage(\n data,\n // Use to restrict the origin of the editor for security reasons.\n // Correspond to the current editor URL.\n editor.editorURL\n );\n }\n }}\n allowedOrigins={[editor.editorURL, editor.applicationURL]}\n mode=\"client\"\n configuration={configuration}\n >\n <IntlayerEditorHook />\n {children}\n </EditorProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CS;AAvCT,oBAAiC;AAMjC,gCAAyB;AACzB,0BAMO;AACP,mBAA2D;AAE3D,MAAM,6BAAiC,MAAM;AAI3C,gDAAqB,QAAW;AAAA,IAC9B,SAAS;AAAA,IACT,MAAM;AAAA,EACR,CAAC;AAKD,QAAM,EAAE,sBAAsB,QAAI,kDAA6B;AAE/D,8BAAU,MAAM;AACd,0BAAsB,0BAAAA,OAAY;AAAA,EACpC,GAAG,CAAC,qBAAqB,CAAC;AAK1B,qDAA0B;AAE1B,SAAO,2EAAE;AACX;AAEA,MAAM,qBAAyB,MAAM;AACnC,QAAM,EAAE,QAAQ,QAAI,sCAAiB;AAErC,SAAO,UAAU,4CAAC,8BAA2B,IAAK,2EAAE;AACtD;AAEO,MAAM,yBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,oBAAgB,gCAAiB;AAEvC,QAAM,EAAE,OAAO,IAAI;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,SAAc;AAC1B,YAAI,OAAO,WAAW,YAAa;AAEnC,YAAI,OAAO,eAAe,SAAS,GAAG;AACpC,kBAAQ;AAAA,YACN;AAAA;AAAA;AAAA,YAGA,OAAO;AAAA,UACT;AAAA,QACF;AAEA,YAAI,OAAO,UAAU,SAAS,GAAG;AAC/B,iBAAO,QAAQ;AAAA,YACb;AAAA;AAAA;AAAA,YAGA,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,MACA,gBAAgB,CAAC,OAAO,WAAW,OAAO,cAAc;AAAA,MACxD,MAAK;AAAA,MACL;AAAA,MAEA;AAAA,oDAAC,sBAAmB;AAAA,QACnB;AAAA;AAAA;AAAA,EACH;AAEJ;","names":["dictionaries"]}
|
|
@@ -34,18 +34,22 @@ const IntlayerEditorProvider = ({ children }) => {
|
|
|
34
34
|
{
|
|
35
35
|
postMessage: (data) => {
|
|
36
36
|
if (typeof window === "undefined") return;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
if (editor.applicationURL.length > 0) {
|
|
38
|
+
window?.postMessage(
|
|
39
|
+
data,
|
|
40
|
+
// Use to restrict the origin of the editor for security reasons.
|
|
41
|
+
// Correspond to the current application URL to synchronize the locales states.
|
|
42
|
+
editor.applicationURL
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
if (editor.editorURL.length > 0) {
|
|
46
|
+
window.parent?.postMessage(
|
|
47
|
+
data,
|
|
48
|
+
// Use to restrict the origin of the editor for security reasons.
|
|
49
|
+
// Correspond to the current editor URL.
|
|
50
|
+
editor.editorURL
|
|
51
|
+
);
|
|
52
|
+
}
|
|
49
53
|
},
|
|
50
54
|
allowedOrigins: [editor.editorURL, editor.applicationURL],
|
|
51
55
|
mode: "client",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport {\n EditorProvider,\n useCrossURLPathState,\n useDictionariesRecordActions,\n
|
|
1
|
+
{"version":3,"sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport {\n EditorProvider,\n useCrossURLPathState,\n useDictionariesRecordActions,\n useIframeClickInterceptor,\n useEditorEnabled,\n} from '@intlayer/editor-react';\nimport { useEffect, type FC, type PropsWithChildren } from 'react';\n\nconst IntlayerEditorHooksEnabled: FC = () => {\n /**\n * URL Messages\n */\n useCrossURLPathState(undefined, {\n receive: false,\n emit: true,\n });\n\n /**\n * Locale Dictionaries Messages\n */\n const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n useEffect(() => {\n setLocaleDictionaries(dictionaries);\n }, [setLocaleDictionaries]);\n\n /**\n * Click Messages\n */\n useIframeClickInterceptor();\n\n return <></>;\n};\n\nconst IntlayerEditorHook: FC = () => {\n const { enabled } = useEditorEnabled();\n\n return enabled ? <IntlayerEditorHooksEnabled /> : <></>;\n};\n\nexport const IntlayerEditorProvider: FC<PropsWithChildren> = ({ children }) => {\n const configuration = getConfiguration();\n\n const { editor } = configuration;\n\n return (\n <EditorProvider\n postMessage={(data: any) => {\n if (typeof window === 'undefined') return;\n\n if (editor.applicationURL.length > 0) {\n window?.postMessage(\n data,\n // Use to restrict the origin of the editor for security reasons.\n // Correspond to the current application URL to synchronize the locales states.\n editor.applicationURL\n );\n }\n\n if (editor.editorURL.length > 0) {\n window.parent?.postMessage(\n data,\n // Use to restrict the origin of the editor for security reasons.\n // Correspond to the current editor URL.\n editor.editorURL\n );\n }\n }}\n allowedOrigins={[editor.editorURL, editor.applicationURL]}\n mode=\"client\"\n configuration={configuration}\n >\n <IntlayerEditorHook />\n {children}\n </EditorProvider>\n );\n};\n"],"mappings":";AA2CS,wBAeL,YAfK;AAvCT,SAAS,wBAAwB;AAMjC,OAAO,kBAAkB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAkD;AAE3D,MAAM,6BAAiC,MAAM;AAI3C,uBAAqB,QAAW;AAAA,IAC9B,SAAS;AAAA,IACT,MAAM;AAAA,EACR,CAAC;AAKD,QAAM,EAAE,sBAAsB,IAAI,6BAA6B;AAE/D,YAAU,MAAM;AACd,0BAAsB,YAAY;AAAA,EACpC,GAAG,CAAC,qBAAqB,CAAC;AAK1B,4BAA0B;AAE1B,SAAO,gCAAE;AACX;AAEA,MAAM,qBAAyB,MAAM;AACnC,QAAM,EAAE,QAAQ,IAAI,iBAAiB;AAErC,SAAO,UAAU,oBAAC,8BAA2B,IAAK,gCAAE;AACtD;AAEO,MAAM,yBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,EAAE,OAAO,IAAI;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,SAAc;AAC1B,YAAI,OAAO,WAAW,YAAa;AAEnC,YAAI,OAAO,eAAe,SAAS,GAAG;AACpC,kBAAQ;AAAA,YACN;AAAA;AAAA;AAAA,YAGA,OAAO;AAAA,UACT;AAAA,QACF;AAEA,YAAI,OAAO,UAAU,SAAS,GAAG;AAC/B,iBAAO,QAAQ;AAAA,YACb;AAAA;AAAA;AAAA,YAGA,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,MACA,gBAAgB,CAAC,OAAO,WAAW,OAAO,cAAc;AAAA,MACxD,MAAK;AAAA,MACL;AAAA,MAEA;AAAA,4BAAC,sBAAmB;AAAA,QACnB;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntlayerEditorProvider.d.ts","sourceRoot":"","sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"IntlayerEditorProvider.d.ts","sourceRoot":"","sources":["../../../src/editor/IntlayerEditorProvider.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAa,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAkCnE,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,iBAAiB,CAoCxD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-intlayer",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Easily internationalize i18n your React applications with type-safe multilingual content management.",
|
|
6
6
|
"keywords": [
|
|
@@ -71,11 +71,11 @@
|
|
|
71
71
|
],
|
|
72
72
|
"dependencies": {
|
|
73
73
|
"js-cookie": "^3.0.5",
|
|
74
|
-
"@intlayer/
|
|
75
|
-
"@intlayer/
|
|
76
|
-
"@intlayer/
|
|
77
|
-
"@intlayer/
|
|
78
|
-
"@intlayer/
|
|
74
|
+
"@intlayer/core": "4.1.1",
|
|
75
|
+
"@intlayer/api": "4.1.1",
|
|
76
|
+
"@intlayer/config": "4.1.1",
|
|
77
|
+
"@intlayer/editor-react": "4.1.1",
|
|
78
|
+
"@intlayer/dictionaries-entry": "4.1.1"
|
|
79
79
|
},
|
|
80
80
|
"devDependencies": {
|
|
81
81
|
"@craco/types": "^7.1.0",
|
|
@@ -92,22 +92,22 @@
|
|
|
92
92
|
"tsc-alias": "^1.8.10",
|
|
93
93
|
"tsup": "^8.3.5",
|
|
94
94
|
"typescript": "^5.7.3",
|
|
95
|
-
"@intlayer/backend": "4.1.0",
|
|
96
95
|
"@utils/eslint-config": "1.0.4",
|
|
97
96
|
"@utils/ts-config": "1.0.4",
|
|
97
|
+
"@utils/ts-config-types": "1.0.4",
|
|
98
98
|
"@utils/tsup-config": "1.0.4",
|
|
99
|
-
"@
|
|
99
|
+
"@intlayer/backend": "4.1.1"
|
|
100
100
|
},
|
|
101
101
|
"peerDependencies": {
|
|
102
102
|
"react": ">=16.0.0",
|
|
103
103
|
"react-dom": ">=16.0.0",
|
|
104
104
|
"vite": ">=4.0.0",
|
|
105
|
-
"@intlayer/api": "4.1.
|
|
106
|
-
"@intlayer/core": "4.1.
|
|
107
|
-
"@intlayer/
|
|
108
|
-
"@intlayer/
|
|
109
|
-
"
|
|
110
|
-
"intlayer": "4.1.
|
|
105
|
+
"@intlayer/api": "4.1.1",
|
|
106
|
+
"@intlayer/core": "4.1.1",
|
|
107
|
+
"@intlayer/dictionaries-entry": "4.1.1",
|
|
108
|
+
"@intlayer/editor-react": "4.1.1",
|
|
109
|
+
"intlayer": "4.1.1",
|
|
110
|
+
"@intlayer/config": "4.1.1"
|
|
111
111
|
},
|
|
112
112
|
"engines": {
|
|
113
113
|
"node": ">=14.18"
|