react-intlayer 1.2.0 → 2.0.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/dist/cjs/IntlayerProvider.cjs +1 -1
- package/dist/cjs/IntlayerProvider.cjs.map +1 -1
- package/dist/cjs/cli/react-intlayer.cjs +68 -0
- package/dist/cjs/cli/react-intlayer.cjs.map +1 -0
- package/dist/cjs/cli/react-intlayer.d.ts +1 -0
- package/dist/cjs/{ContentEditor/contentRender.cjs → client/ContentEditionLayout.cjs} +9 -14
- package/dist/cjs/client/ContentEditionLayout.cjs.map +1 -0
- package/dist/cjs/client/ContentEditionLayout.d.ts +6 -0
- package/dist/cjs/client/IntlayerClientProvider.cjs +35 -2
- package/dist/cjs/client/IntlayerClientProvider.cjs.map +1 -1
- package/dist/cjs/client/IntlayerClientProvider.d.ts +2 -1
- package/dist/cjs/client/getBrowserLocale.cjs +170 -0
- package/dist/cjs/client/getBrowserLocale.cjs.map +1 -0
- package/dist/cjs/client/getBrowserLocale.d.ts +26 -0
- package/dist/cjs/client/index.cjs +6 -0
- package/dist/cjs/client/index.cjs.map +1 -1
- package/dist/cjs/client/index.d.ts +2 -0
- package/dist/cjs/client/useContent.cjs +2 -2
- package/dist/cjs/client/useContent.cjs.map +1 -1
- package/dist/cjs/client/useContent.d.ts +1 -2
- package/dist/cjs/client/useLocale.cjs +5 -3
- package/dist/cjs/client/useLocale.cjs.map +1 -1
- package/dist/cjs/client/useLocale.d.ts +1 -0
- package/dist/cjs/client/useLocaleBase.cjs +49 -0
- package/dist/cjs/client/useLocaleBase.cjs.map +1 -0
- package/dist/cjs/client/useLocaleBase.d.ts +14 -0
- package/dist/cjs/client/useLocaleCookie.cjs +1 -1
- package/dist/cjs/client/useLocaleCookie.cjs.map +1 -1
- package/dist/cjs/client/useTraduction.cjs.map +1 -1
- package/dist/cjs/client/useTraduction.d.ts +6 -5
- package/dist/cjs/craco/craco.config.cjs +32 -0
- package/dist/cjs/craco/craco.config.cjs.map +1 -0
- package/dist/cjs/craco/craco.config.d.ts +2 -0
- package/dist/cjs/craco/intlayerCracoPlugin.cjs +89 -0
- package/dist/cjs/craco/intlayerCracoPlugin.cjs.map +1 -0
- package/dist/cjs/craco/intlayerCracoPlugin.d.ts +26 -0
- package/dist/cjs/getEnumeration.cjs +0 -4
- package/dist/cjs/getEnumeration.cjs.map +1 -1
- package/dist/cjs/getEnumeration.d.ts +8 -5
- package/dist/cjs/getTranslation.cjs +1 -5
- package/dist/cjs/getTranslation.cjs.map +1 -1
- package/dist/cjs/getTranslation.d.ts +3 -2
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/processDictionary/{contentDictionary.d.cjs → contentDictionary.cjs} +3 -3
- package/dist/cjs/processDictionary/contentDictionary.cjs.map +1 -0
- package/dist/cjs/processDictionary/contentDictionary.d.ts +16 -0
- package/dist/cjs/processDictionary/index.cjs +118 -21
- package/dist/cjs/processDictionary/index.cjs.map +1 -1
- package/dist/cjs/processDictionary/index.d.ts +5 -4
- package/dist/cjs/server/IntlayerServerProvider.cjs +1 -1
- package/dist/cjs/server/IntlayerServerProvider.cjs.map +1 -1
- package/dist/cjs/server/getLocaleTranslation.cjs +1 -1
- package/dist/cjs/server/getLocaleTranslation.cjs.map +1 -1
- package/dist/cjs/server/useTraduction.cjs.map +1 -1
- package/dist/cjs/server/useTraduction.d.ts +4 -3
- package/dist/cjs/useIntlayerBase.cjs +3 -0
- package/dist/cjs/useIntlayerBase.cjs.map +1 -1
- package/dist/cjs/vite/intlayerPlugin.cjs +60 -0
- package/dist/cjs/vite/intlayerPlugin.cjs.map +1 -0
- package/dist/cjs/vite/intlayerPlugin.d.ts +17 -0
- package/dist/esm/IntlayerProvider.mjs +3 -2
- package/dist/esm/IntlayerProvider.mjs.map +1 -1
- package/dist/esm/chunk-ZNCO4QRF.mjs +9 -0
- package/dist/esm/cli/react-intlayer.d.mts +1 -0
- package/dist/esm/cli/react-intlayer.mjs +45 -0
- package/dist/esm/cli/react-intlayer.mjs.map +1 -0
- package/dist/esm/client/ContentEditionLayout.d.mts +6 -0
- package/dist/esm/client/ContentEditionLayout.mjs +11 -0
- package/dist/esm/client/ContentEditionLayout.mjs.map +1 -0
- package/dist/esm/client/IntlayerClientProvider.d.mts +2 -1
- package/dist/esm/client/IntlayerClientProvider.mjs +42 -7
- package/dist/esm/client/IntlayerClientProvider.mjs.map +1 -1
- package/dist/esm/client/getBrowserLocale.d.mts +26 -0
- package/dist/esm/client/getBrowserLocale.mjs +146 -0
- package/dist/esm/client/getBrowserLocale.mjs.map +1 -0
- package/dist/esm/client/index.d.mts +2 -0
- package/dist/esm/client/index.mjs +5 -0
- package/dist/esm/client/index.mjs.map +1 -1
- package/dist/esm/client/useContent.d.mts +1 -2
- package/dist/esm/client/useContent.mjs +3 -2
- package/dist/esm/client/useContent.mjs.map +1 -1
- package/dist/esm/client/useIntlayer.mjs +1 -0
- package/dist/esm/client/useIntlayer.mjs.map +1 -1
- package/dist/esm/client/useLocale.d.mts +1 -0
- package/dist/esm/client/useLocale.mjs +7 -4
- package/dist/esm/client/useLocale.mjs.map +1 -1
- package/dist/esm/client/useLocaleBase.d.mts +14 -0
- package/dist/esm/client/useLocaleBase.mjs +26 -0
- package/dist/esm/client/useLocaleBase.mjs.map +1 -0
- package/dist/esm/client/useLocaleCookie.mjs +3 -4
- package/dist/esm/client/useLocaleCookie.mjs.map +1 -1
- package/dist/esm/client/useTraduction.d.mts +6 -5
- package/dist/esm/client/useTraduction.mjs +1 -0
- package/dist/esm/client/useTraduction.mjs.map +1 -1
- package/dist/esm/craco/craco.config.d.mts +2 -0
- package/dist/esm/craco/craco.config.mjs +17 -0
- package/dist/esm/craco/craco.config.mjs.map +1 -0
- package/dist/esm/craco/intlayerCracoPlugin.d.mts +26 -0
- package/dist/esm/craco/intlayerCracoPlugin.mjs +54 -0
- package/dist/esm/craco/intlayerCracoPlugin.mjs.map +1 -0
- package/dist/esm/getEnumeration.d.mts +8 -5
- package/dist/esm/getEnumeration.mjs +1 -4
- package/dist/esm/getEnumeration.mjs.map +1 -1
- package/dist/esm/getTranslation.d.mts +3 -2
- package/dist/esm/getTranslation.mjs +3 -8
- package/dist/esm/getTranslation.mjs.map +1 -1
- package/dist/esm/index.d.mts +2 -0
- package/dist/esm/index.mjs +6 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/processDictionary/contentDictionary.d.mts +16 -0
- package/dist/esm/processDictionary/contentDictionary.mjs +1 -0
- package/dist/esm/processDictionary/contentDictionary.mjs.map +1 -0
- package/dist/esm/processDictionary/index.d.mts +5 -4
- package/dist/esm/processDictionary/index.mjs +122 -25
- package/dist/esm/processDictionary/index.mjs.map +1 -1
- package/dist/esm/server/IntlayerServerProvider.mjs +3 -4
- package/dist/esm/server/IntlayerServerProvider.mjs.map +1 -1
- package/dist/esm/server/getLocaleTranslation.mjs +3 -2
- package/dist/esm/server/getLocaleTranslation.mjs.map +1 -1
- package/dist/esm/server/index.mjs +1 -0
- package/dist/esm/server/index.mjs.map +1 -1
- package/dist/esm/server/serverContext.mjs +1 -0
- package/dist/esm/server/serverContext.mjs.map +1 -1
- package/dist/esm/server/useIntlayer.mjs +1 -0
- package/dist/esm/server/useIntlayer.mjs.map +1 -1
- package/dist/esm/server/useTraduction.d.mts +4 -3
- package/dist/esm/server/useTraduction.mjs +1 -0
- package/dist/esm/server/useTraduction.mjs.map +1 -1
- package/dist/esm/useIntlayerBase.mjs +4 -0
- package/dist/esm/useIntlayerBase.mjs.map +1 -1
- package/dist/esm/vite/intlayerPlugin.d.mts +17 -0
- package/dist/esm/vite/intlayerPlugin.mjs +36 -0
- package/dist/esm/vite/intlayerPlugin.mjs.map +1 -0
- package/package.json +37 -6
- package/src/IntlayerProvider.tsx +2 -2
- package/src/cli/react-intlayer.ts +60 -0
- package/src/client/ContentEditionLayout.tsx +15 -0
- package/src/client/IntlayerClientProvider.tsx +50 -12
- package/src/client/getBrowserLocale.tsx +192 -0
- package/src/client/index.ts +2 -0
- package/src/client/useContent.ts +2 -2
- package/src/client/useLocale.ts +5 -4
- package/src/client/useLocaleBase.ts +24 -0
- package/src/client/useLocaleCookie.ts +2 -5
- package/src/client/useTraduction.ts +6 -5
- package/src/craco/craco.config.ts +11 -0
- package/src/craco/intlayerCracoPlugin.ts +89 -0
- package/src/getEnumeration.ts +8 -10
- package/src/getTranslation.ts +5 -12
- package/src/index.ts +2 -1
- package/src/processDictionary/{contentDictionary.d.ts → contentDictionary.ts} +6 -5
- package/src/processDictionary/index.ts +159 -25
- package/src/server/IntlayerServerProvider.tsx +2 -5
- package/src/server/getLocaleTranslation.ts +2 -2
- package/src/server/useTraduction.ts +4 -3
- package/src/useIntlayerBase.ts +3 -0
- package/src/vite/intlayerPlugin.ts +59 -0
- package/dist/cjs/ContentEditor/ContentEditor.cjs +0 -110
- package/dist/cjs/ContentEditor/ContentEditor.cjs.map +0 -1
- package/dist/cjs/ContentEditor/ContentEditor.d.ts +0 -8
- package/dist/cjs/ContentEditor/contentRender.cjs.map +0 -1
- package/dist/cjs/ContentEditor/contentRender.d.ts +0 -3
- package/dist/cjs/ContentEditor/index.cjs +0 -25
- package/dist/cjs/ContentEditor/index.cjs.map +0 -1
- package/dist/cjs/ContentEditor/index.d.ts +0 -3
- package/dist/cjs/processDictionary/contentDictionary.d.cjs.map +0 -1
- package/dist/cjs/processDictionary/contentDictionary.d.d.ts +0 -29
- package/dist/esm/ContentEditor/ContentEditor.d.mts +0 -8
- package/dist/esm/ContentEditor/ContentEditor.mjs +0 -91
- package/dist/esm/ContentEditor/ContentEditor.mjs.map +0 -1
- package/dist/esm/ContentEditor/contentRender.d.mts +0 -3
- package/dist/esm/ContentEditor/contentRender.mjs +0 -13
- package/dist/esm/ContentEditor/contentRender.mjs.map +0 -1
- package/dist/esm/ContentEditor/index.d.mts +0 -3
- package/dist/esm/ContentEditor/index.mjs +0 -3
- package/dist/esm/ContentEditor/index.mjs.map +0 -1
- package/dist/esm/processDictionary/contentDictionary.d.d.mts +0 -29
- package/dist/esm/processDictionary/contentDictionary.d.mjs +0 -1
- package/src/ContentEditor/ContentEditor.tsx +0 -116
- package/src/ContentEditor/contentRender.tsx +0 -11
- package/src/ContentEditor/index.tsx +0 -2
- /package/dist/esm/{processDictionary/contentDictionary.d.mjs.map → chunk-ZNCO4QRF.mjs.map} +0 -0
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
-
import {
|
|
3
|
-
type Locales,
|
|
4
|
-
intlayerIntlConfiguration,
|
|
5
|
-
} from '@intlayer/config/client';
|
|
2
|
+
import { type Locales, getConfiguration } from '@intlayer/config/client';
|
|
6
3
|
import {
|
|
7
4
|
NodeType,
|
|
8
5
|
type QuantityContent,
|
|
9
6
|
type LanguageContent,
|
|
7
|
+
findMatchingCondition,
|
|
8
|
+
type KeyPath,
|
|
10
9
|
} from '@intlayer/core';
|
|
10
|
+
import { renderContentEditor } from 'intlayer-editor/client';
|
|
11
|
+
import { type ReactElement, createElement, type ReactNode } from 'react';
|
|
11
12
|
import { getEnumeration } from '../getEnumeration';
|
|
12
13
|
import { getTranslation } from '../getTranslation';
|
|
13
14
|
import type {
|
|
@@ -17,23 +18,42 @@ import type {
|
|
|
17
18
|
TransformedContentValue,
|
|
18
19
|
} from './contentDictionary';
|
|
19
20
|
|
|
20
|
-
const
|
|
21
|
+
const {
|
|
22
|
+
internationalization: { defaultLocale },
|
|
23
|
+
} = getConfiguration();
|
|
21
24
|
|
|
22
25
|
const processTranslation = (
|
|
23
26
|
languageContent: LanguageContent<ContentValue>,
|
|
24
|
-
locale: Locales
|
|
27
|
+
locale: Locales,
|
|
28
|
+
dictionaryId: string,
|
|
29
|
+
dictionaryPath: string,
|
|
30
|
+
keyPath: KeyPath[] = []
|
|
25
31
|
): TransformedContent => {
|
|
26
32
|
const translationResult: ContentValue = getTranslation<ContentValue>(
|
|
27
33
|
languageContent,
|
|
28
34
|
locale
|
|
29
35
|
);
|
|
30
36
|
|
|
31
|
-
|
|
37
|
+
const resultKeyPath: KeyPath[] = [
|
|
38
|
+
...keyPath,
|
|
39
|
+
{ type: NodeType.Translation, key: locale },
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
return processDictionary(
|
|
43
|
+
translationResult as Content,
|
|
44
|
+
dictionaryId,
|
|
45
|
+
dictionaryPath,
|
|
46
|
+
resultKeyPath,
|
|
47
|
+
locale
|
|
48
|
+
);
|
|
32
49
|
};
|
|
33
50
|
|
|
34
51
|
const processEnumeration = (
|
|
35
52
|
enumerationContent: QuantityContent<ContentValue>,
|
|
36
|
-
locale: Locales
|
|
53
|
+
locale: Locales,
|
|
54
|
+
dictionaryId: string,
|
|
55
|
+
dictionaryPath: string,
|
|
56
|
+
keyPath: KeyPath[] = []
|
|
37
57
|
): TransformedContentValue => {
|
|
38
58
|
return (quantity: number): TransformedContentValue => {
|
|
39
59
|
const enumerationResult: ContentValue = getEnumeration<ContentValue>(
|
|
@@ -41,44 +61,126 @@ const processEnumeration = (
|
|
|
41
61
|
quantity
|
|
42
62
|
);
|
|
43
63
|
|
|
64
|
+
const matchingCondition = findMatchingCondition(
|
|
65
|
+
enumerationContent,
|
|
66
|
+
quantity
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
const resultKeyPath: KeyPath[] = [
|
|
70
|
+
...keyPath,
|
|
71
|
+
{ type: NodeType.Enumeration, key: matchingCondition.toString() },
|
|
72
|
+
];
|
|
73
|
+
|
|
44
74
|
//
|
|
45
|
-
return processDictionary(
|
|
75
|
+
return processDictionary(
|
|
76
|
+
enumerationResult as Content,
|
|
77
|
+
dictionaryId,
|
|
78
|
+
dictionaryPath,
|
|
79
|
+
resultKeyPath,
|
|
80
|
+
locale
|
|
81
|
+
);
|
|
46
82
|
};
|
|
47
83
|
};
|
|
48
84
|
|
|
85
|
+
const isReactNode = (node: Record<string, unknown>): boolean =>
|
|
86
|
+
typeof node?.key !== 'undefined' && typeof node?.props !== 'undefined';
|
|
87
|
+
|
|
49
88
|
export const processNode = (
|
|
50
89
|
field: ContentValue | undefined,
|
|
51
|
-
locale: Locales
|
|
90
|
+
locale: Locales,
|
|
91
|
+
dictionaryId: string,
|
|
92
|
+
dictionaryPath: string,
|
|
93
|
+
keyPath: KeyPath[] = []
|
|
52
94
|
): TransformedContentValue => {
|
|
53
|
-
if (typeof field
|
|
54
|
-
|
|
55
|
-
|
|
95
|
+
if (typeof field === 'object') {
|
|
96
|
+
if (field.nodeType === NodeType.Translation) {
|
|
97
|
+
return processTranslation(
|
|
98
|
+
field as LanguageContent<ContentValue>,
|
|
99
|
+
locale,
|
|
100
|
+
dictionaryId,
|
|
101
|
+
dictionaryPath,
|
|
102
|
+
keyPath
|
|
103
|
+
);
|
|
104
|
+
}
|
|
56
105
|
|
|
57
|
-
|
|
58
|
-
|
|
106
|
+
if (field.nodeType === NodeType.Enumeration) {
|
|
107
|
+
return processEnumeration(
|
|
108
|
+
field satisfies QuantityContent<ContentValue>,
|
|
109
|
+
locale,
|
|
110
|
+
dictionaryId,
|
|
111
|
+
dictionaryPath,
|
|
112
|
+
keyPath
|
|
113
|
+
);
|
|
114
|
+
}
|
|
59
115
|
}
|
|
60
116
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
117
|
+
return processDictionary(
|
|
118
|
+
field as Content,
|
|
119
|
+
dictionaryId,
|
|
120
|
+
dictionaryPath,
|
|
121
|
+
keyPath,
|
|
122
|
+
locale
|
|
123
|
+
);
|
|
124
|
+
};
|
|
67
125
|
|
|
68
|
-
|
|
69
|
-
|
|
126
|
+
// This function recursively creates React elements from a given JSON-like structure
|
|
127
|
+
const createReactElement = (element: ReactElement) => {
|
|
128
|
+
if (typeof element === 'string') {
|
|
129
|
+
// If it's a string, simply return it (used for text content)
|
|
130
|
+
return element;
|
|
70
131
|
}
|
|
71
132
|
|
|
72
|
-
|
|
133
|
+
// Destructure the component properties
|
|
134
|
+
|
|
135
|
+
const convertChildrenAsArray = (element: ReactElement): ReactElement => {
|
|
136
|
+
if (element?.props && typeof element.props.children === 'object') {
|
|
137
|
+
const childrenResult: ReactNode[] = [];
|
|
138
|
+
const { children } = element.props;
|
|
139
|
+
|
|
140
|
+
// Create the children elements recursively, if any
|
|
141
|
+
Object.keys(children).forEach((key) => {
|
|
142
|
+
childrenResult.push(createReactElement(children[key]));
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
return {
|
|
146
|
+
...element,
|
|
147
|
+
props: { ...element.props, children: childrenResult },
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
return {
|
|
152
|
+
...element,
|
|
153
|
+
props: { ...element.props, children: element.props.children },
|
|
154
|
+
};
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
const fixedElement = convertChildrenAsArray(element);
|
|
158
|
+
|
|
159
|
+
const { type, props } = fixedElement;
|
|
160
|
+
|
|
161
|
+
// Create and return the React element
|
|
162
|
+
return createElement(type ?? 'div', props, ...props.children);
|
|
73
163
|
};
|
|
74
164
|
|
|
165
|
+
const traceKeys: string[] = ['filePath', 'id', 'nodeType'];
|
|
166
|
+
|
|
75
167
|
/**
|
|
76
168
|
* Function that process a dictionary and return the result to be used in the application.
|
|
77
169
|
*/
|
|
78
170
|
export const processDictionary = (
|
|
79
171
|
content: Content,
|
|
172
|
+
dictionaryId: string,
|
|
173
|
+
dictionaryPath: string,
|
|
174
|
+
keyPath: KeyPath[] = [],
|
|
80
175
|
locale: Locales = defaultLocale
|
|
81
176
|
): TransformedContent => {
|
|
177
|
+
// If it's a React element, render it
|
|
178
|
+
if (isReactNode(content)) {
|
|
179
|
+
return createReactElement(
|
|
180
|
+
content as unknown as ReactElement
|
|
181
|
+
) as unknown as TransformedContent;
|
|
182
|
+
}
|
|
183
|
+
|
|
82
184
|
if (content && typeof content === 'object') {
|
|
83
185
|
const result: TransformedContent = {};
|
|
84
186
|
|
|
@@ -86,12 +188,44 @@ export const processDictionary = (
|
|
|
86
188
|
for (const key of Object.keys(content)) {
|
|
87
189
|
const field = content[key];
|
|
88
190
|
|
|
89
|
-
|
|
191
|
+
if (traceKeys.includes(key)) {
|
|
192
|
+
result[key] = field as TransformedContentValue;
|
|
193
|
+
continue;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
const resultKeyPath: KeyPath[] = [
|
|
197
|
+
...keyPath,
|
|
198
|
+
{ type: 'ObjectExpression', key },
|
|
199
|
+
];
|
|
200
|
+
|
|
201
|
+
result[key] = processNode(
|
|
202
|
+
field,
|
|
203
|
+
locale,
|
|
204
|
+
dictionaryId,
|
|
205
|
+
dictionaryPath,
|
|
206
|
+
resultKeyPath
|
|
207
|
+
);
|
|
90
208
|
}
|
|
91
209
|
|
|
92
210
|
return result;
|
|
93
211
|
}
|
|
94
212
|
|
|
213
|
+
if (typeof content === 'string') {
|
|
214
|
+
try {
|
|
215
|
+
// renderContentEditor come from intlayer-editor, which is an optional dependency.
|
|
216
|
+
// intlayer-editor should be installed in the project to use the content editor.
|
|
217
|
+
return renderContentEditor(
|
|
218
|
+
content,
|
|
219
|
+
dictionaryId,
|
|
220
|
+
dictionaryPath,
|
|
221
|
+
keyPath
|
|
222
|
+
);
|
|
223
|
+
} catch (e) {
|
|
224
|
+
// If renderContentEditor not available, it will return the content as is.
|
|
225
|
+
return content;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
95
229
|
// If it's a string, number, or function, return it
|
|
96
230
|
return content;
|
|
97
231
|
};
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
type Locales,
|
|
3
|
-
intlayerIntlConfiguration,
|
|
4
|
-
} from '@intlayer/config/client';
|
|
1
|
+
import { type Locales, getConfiguration } from '@intlayer/config/client';
|
|
5
2
|
import type { FC, PropsWithChildren } from 'react';
|
|
6
3
|
import { createServerContext, getServerContext } from './serverContext';
|
|
7
4
|
|
|
@@ -9,7 +6,7 @@ import { createServerContext, getServerContext } from './serverContext';
|
|
|
9
6
|
* Context that store the current locale on the server side
|
|
10
7
|
*/
|
|
11
8
|
export const IntlayerServerContext = createServerContext<Locales>(
|
|
12
|
-
|
|
9
|
+
getConfiguration().internationalization.defaultLocale
|
|
13
10
|
);
|
|
14
11
|
|
|
15
12
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getConfiguration } from '@intlayer/config/client';
|
|
2
2
|
import { type LanguageContent, getTranslationContent } from '@intlayer/core';
|
|
3
3
|
import { IntlayerServerContext } from './IntlayerServerProvider';
|
|
4
4
|
import { getServerContext } from './serverContext';
|
|
@@ -12,7 +12,7 @@ export const getLocaleTranslation = <Content>(
|
|
|
12
12
|
const locale = getServerContext(IntlayerServerContext);
|
|
13
13
|
const content = getTranslationContent<Content>(
|
|
14
14
|
languageContent,
|
|
15
|
-
locale ??
|
|
15
|
+
locale ?? getConfiguration().internationalization.defaultLocale
|
|
16
16
|
);
|
|
17
17
|
|
|
18
18
|
return {
|
|
@@ -13,12 +13,13 @@ import { getServerContext } from './serverContext';
|
|
|
13
13
|
*
|
|
14
14
|
* Usage:
|
|
15
15
|
*
|
|
16
|
-
*
|
|
16
|
+
* ```ts
|
|
17
|
+
* const content = useTraduction<string>({
|
|
17
18
|
* en: 'Hello',
|
|
18
19
|
* fr: 'Bonjour',
|
|
19
|
-
* },
|
|
20
|
-
* 'fr');
|
|
20
|
+
* }, 'fr');
|
|
21
21
|
* // 'Bonjour'
|
|
22
|
+
* ```
|
|
22
23
|
*
|
|
23
24
|
* Using TypeScript:
|
|
24
25
|
* - this function will require each locale to be defined if defined in the project configuration.
|
package/src/useIntlayerBase.ts
CHANGED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { join, relative, resolve } from 'path';
|
|
2
|
+
import { watch } from '@intlayer/chokidar';
|
|
3
|
+
import { getConfiguration, formatEnvVariable } from '@intlayer/config';
|
|
4
|
+
import { loadEnv, type Plugin } from 'vite';
|
|
5
|
+
|
|
6
|
+
// Plugin options type definition
|
|
7
|
+
type PluginOptions = {
|
|
8
|
+
// Custom options for your plugin, if any
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
*
|
|
13
|
+
* A Vite plugin that integrates IntLayer configuration into the build process
|
|
14
|
+
*
|
|
15
|
+
* ```ts
|
|
16
|
+
* // Example usage of the plugin in a Vite configuration
|
|
17
|
+
* export default defineConfig({
|
|
18
|
+
* plugins: [ intLayerPlugin() ],
|
|
19
|
+
* });
|
|
20
|
+
* ```
|
|
21
|
+
* */
|
|
22
|
+
export const intLayerPlugin = (_pluginOptions: PluginOptions = {}): Plugin => ({
|
|
23
|
+
name: 'vite-intlayer-plugin',
|
|
24
|
+
|
|
25
|
+
config: (config, { mode }) => {
|
|
26
|
+
const intlayerConfig = getConfiguration();
|
|
27
|
+
|
|
28
|
+
// Set all configuration values as environment variables
|
|
29
|
+
const env = formatEnvVariable('vite');
|
|
30
|
+
|
|
31
|
+
process.env = { ...process.env, ...loadEnv(mode, process.cwd()), ...env };
|
|
32
|
+
|
|
33
|
+
const { mainDir, baseDir } = intlayerConfig.content;
|
|
34
|
+
const dictionariesPath = join(mainDir, 'dictionaries.mjs');
|
|
35
|
+
const relativeDictionariesPath = relative(baseDir, dictionariesPath);
|
|
36
|
+
|
|
37
|
+
// Update Vite's resolve alias
|
|
38
|
+
config.resolve = {
|
|
39
|
+
...config.resolve,
|
|
40
|
+
alias: {
|
|
41
|
+
...config.resolve?.alias,
|
|
42
|
+
'@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
return config;
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
buildStart: () => {
|
|
50
|
+
// Code to run when Vite build starts
|
|
51
|
+
watch({
|
|
52
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
53
|
+
persistent: (import.meta as any).env === 'development',
|
|
54
|
+
});
|
|
55
|
+
},
|
|
56
|
+
configureServer: () => {
|
|
57
|
+
// Custom server configuration, if needed
|
|
58
|
+
},
|
|
59
|
+
});
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
"use client";
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
-
var ContentEditor_exports = {};
|
|
21
|
-
__export(ContentEditor_exports, {
|
|
22
|
-
ContentEditor: () => ContentEditor
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(ContentEditor_exports);
|
|
25
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
-
var import_react = require("react");
|
|
27
|
-
const PRESS_DETECT_DURATION = 500;
|
|
28
|
-
const ContentEditor = ({ children }) => {
|
|
29
|
-
const divRef = (0, import_react.useRef)(null);
|
|
30
|
-
const [isEditing, setIsEditing] = (0, import_react.useState)(false);
|
|
31
|
-
const pressTimerRef = (0, import_react.useRef)(null);
|
|
32
|
-
const handleOnLongPress = () => {
|
|
33
|
-
setIsEditing(true);
|
|
34
|
-
};
|
|
35
|
-
const startPressTimer = () => {
|
|
36
|
-
pressTimerRef.current = setTimeout(() => {
|
|
37
|
-
handleOnLongPress();
|
|
38
|
-
}, PRESS_DETECT_DURATION);
|
|
39
|
-
};
|
|
40
|
-
const clearPressTimer = () => {
|
|
41
|
-
if (pressTimerRef.current) {
|
|
42
|
-
clearTimeout(pressTimerRef.current);
|
|
43
|
-
pressTimerRef.current = null;
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
const handleMouseDown = () => {
|
|
47
|
-
clearPressTimer();
|
|
48
|
-
startPressTimer();
|
|
49
|
-
};
|
|
50
|
-
const handleMouseUp = () => {
|
|
51
|
-
clearPressTimer();
|
|
52
|
-
};
|
|
53
|
-
const handleClickOutside = (0, import_react.useCallback)(
|
|
54
|
-
(event) => {
|
|
55
|
-
if (divRef.current && !divRef.current.contains(event.target)) {
|
|
56
|
-
setIsEditing(false);
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
[divRef]
|
|
60
|
-
);
|
|
61
|
-
(0, import_react.useEffect)(() => {
|
|
62
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
63
|
-
return () => {
|
|
64
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
65
|
-
clearPressTimer();
|
|
66
|
-
};
|
|
67
|
-
}, [handleClickOutside]);
|
|
68
|
-
const handleOnClick = (e) => {
|
|
69
|
-
if (isEditing) {
|
|
70
|
-
e.preventDefault();
|
|
71
|
-
e.stopPropagation();
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const handleOnBlur = () => {
|
|
75
|
-
setIsEditing(false);
|
|
76
|
-
};
|
|
77
|
-
const onContentChange = (_e) => {
|
|
78
|
-
};
|
|
79
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
80
|
-
"div",
|
|
81
|
-
{
|
|
82
|
-
role: "textbox",
|
|
83
|
-
tabIndex: 0,
|
|
84
|
-
onKeyUp: () => null,
|
|
85
|
-
contentEditable: isEditing,
|
|
86
|
-
onInput: onContentChange,
|
|
87
|
-
onClick: handleOnClick,
|
|
88
|
-
onMouseDown: handleMouseDown,
|
|
89
|
-
onMouseUp: handleMouseUp,
|
|
90
|
-
onMouseLeave: handleMouseUp,
|
|
91
|
-
onTouchStart: handleMouseDown,
|
|
92
|
-
onTouchEnd: handleMouseUp,
|
|
93
|
-
onTouchCancel: handleMouseUp,
|
|
94
|
-
onBlur: handleOnBlur,
|
|
95
|
-
suppressContentEditableWarning: true,
|
|
96
|
-
style: isEditing ? {
|
|
97
|
-
backgroundColor: "transparent",
|
|
98
|
-
cursor: "text",
|
|
99
|
-
display: "inline"
|
|
100
|
-
} : { cursor: "pointer", display: "inline" },
|
|
101
|
-
ref: divRef,
|
|
102
|
-
children
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
};
|
|
106
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
107
|
-
0 && (module.exports = {
|
|
108
|
-
ContentEditor
|
|
109
|
-
});
|
|
110
|
-
//# sourceMappingURL=ContentEditor.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useState,\n useRef,\n useCallback,\n type FC,\n type MouseEventHandler,\n} from 'react';\n\ntype ContentEditorProps = {\n children?: string;\n};\n\nconst PRESS_DETECT_DURATION = 500;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({ children }) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isEditing, setIsEditing] = useState(false);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleOnLongPress = () => {\n setIsEditing(true);\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, PRESS_DETECT_DURATION);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsEditing(false);\n }\n },\n [divRef]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isEditing) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsEditing(false);\n };\n\n const onContentChange = (_e: React.FormEvent<HTMLDivElement>) => {\n // console.log(e.currentTarget.textContent);\n };\n\n return (\n <div\n role=\"textbox\"\n tabIndex={0}\n onKeyUp={() => null}\n contentEditable={isEditing}\n onInput={onContentChange}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n suppressContentEditableWarning={true} // To suppress the warning for controlled components\n style={\n isEditing\n ? {\n backgroundColor: 'transparent',\n cursor: 'text',\n display: 'inline',\n }\n : { cursor: 'pointer', display: 'inline' }\n }\n ref={divRef}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsFI;AApFJ,mBAOO;AAMP,MAAM,wBAAwB;AAEvB,MAAM,gBAAwC,CAAC,EAAE,SAAS,MAAM;AACrE,QAAM,aAAS,qBAAuB,IAAI;AAC1C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,oBAAgB,qBAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAkB;AAAA,IACpB,GAAG,qBAAqB;AAAA,EAC1B;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAgB;AAChB,oBAAgB;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAgB;AAAA,EAClB;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,8BAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,sBAAgB;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,WAAW;AACb,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,kBAAkB,CAAC,OAAwC;AAAA,EAEjE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,gCAAgC;AAAA,MAChC,OACE,YACI;AAAA,QACE,iBAAiB;AAAA,QACjB,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,IACA,EAAE,QAAQ,WAAW,SAAS,SAAS;AAAA,MAE7C,KAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ContentEditor/contentRender.tsx"],"sourcesContent":["import { ContentEditor } from './ContentEditor';\n\nexport const contentRender = (content: string) => {\n const isEditable = process.env.NODE_ENV === 'development';\n\n if (isEditable && ContentEditor) {\n return (<ContentEditor>{content}</ContentEditor>) as unknown as string;\n }\n\n return content;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMY;AANZ,2BAA8B;AAEvB,MAAM,gBAAgB,CAAC,YAAoB;AAChD,QAAM,aAAa,QAAQ,IAAI,aAAa;AAE5C,MAAI,cAAc,oCAAe;AAC/B,WAAQ,4CAAC,sCAAe,mBAAQ;AAAA,EAClC;AAEA,SAAO;AACT;","names":[]}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
var ContentEditor_exports = {};
|
|
17
|
-
module.exports = __toCommonJS(ContentEditor_exports);
|
|
18
|
-
__reExport(ContentEditor_exports, require('./ContentEditor.cjs'), module.exports);
|
|
19
|
-
__reExport(ContentEditor_exports, require('./contentRender.cjs'), module.exports);
|
|
20
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
21
|
-
0 && (module.exports = {
|
|
22
|
-
...require('./ContentEditor.cjs'),
|
|
23
|
-
...require('./contentRender.cjs')
|
|
24
|
-
});
|
|
25
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ContentEditor/index.tsx"],"sourcesContent":["export * from './ContentEditor';\nexport * from './contentRender';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kCAAc,4BAAd;AACA,kCAAc,4BADd;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/processDictionary/contentDictionary.d.ts"],"sourcesContent":["import { type TranslationContent } from '@intlayer/core';\n\nexport type ContentValue =\n | string\n | {\n [key: string]: ContentValue;\n }\n | TranslationContent<unknown>;\n\nexport type Content = Record<string, ContentValue | undefined>;\n\nexport type TransformedContentValue =\n | string\n | {\n [key: string]: TransformedContentValue;\n }\n | undefined\n | ((quantity: number) => TransformedContentValue);\n\nexport type TransformedContent = Record<\n string,\n TransformedContentValue | undefined\n>;\n\nexport type ContentDictionary = Content & {\n id: string;\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { TranslationContent } from '@intlayer/core';
|
|
2
|
-
|
|
3
|
-
type ContentValue =
|
|
4
|
-
| string
|
|
5
|
-
| {
|
|
6
|
-
[key: string]: ContentValue;
|
|
7
|
-
}
|
|
8
|
-
| TranslationContent<unknown>;
|
|
9
|
-
|
|
10
|
-
type Content = Record<string, ContentValue | undefined>;
|
|
11
|
-
|
|
12
|
-
type TransformedContentValue =
|
|
13
|
-
| string
|
|
14
|
-
| {
|
|
15
|
-
[key: string]: TransformedContentValue;
|
|
16
|
-
}
|
|
17
|
-
| undefined
|
|
18
|
-
| ((quantity: number) => TransformedContentValue);
|
|
19
|
-
|
|
20
|
-
type TransformedContent = Record<
|
|
21
|
-
string,
|
|
22
|
-
TransformedContentValue | undefined
|
|
23
|
-
>;
|
|
24
|
-
|
|
25
|
-
type ContentDictionary = Content & {
|
|
26
|
-
id: string;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export type { Content, ContentDictionary, ContentValue, TransformedContent, TransformedContentValue };
|