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.
Files changed (184) hide show
  1. package/dist/cjs/IntlayerProvider.cjs +1 -1
  2. package/dist/cjs/IntlayerProvider.cjs.map +1 -1
  3. package/dist/cjs/cli/react-intlayer.cjs +68 -0
  4. package/dist/cjs/cli/react-intlayer.cjs.map +1 -0
  5. package/dist/cjs/cli/react-intlayer.d.ts +1 -0
  6. package/dist/cjs/{ContentEditor/contentRender.cjs → client/ContentEditionLayout.cjs} +9 -14
  7. package/dist/cjs/client/ContentEditionLayout.cjs.map +1 -0
  8. package/dist/cjs/client/ContentEditionLayout.d.ts +6 -0
  9. package/dist/cjs/client/IntlayerClientProvider.cjs +35 -2
  10. package/dist/cjs/client/IntlayerClientProvider.cjs.map +1 -1
  11. package/dist/cjs/client/IntlayerClientProvider.d.ts +2 -1
  12. package/dist/cjs/client/getBrowserLocale.cjs +170 -0
  13. package/dist/cjs/client/getBrowserLocale.cjs.map +1 -0
  14. package/dist/cjs/client/getBrowserLocale.d.ts +26 -0
  15. package/dist/cjs/client/index.cjs +6 -0
  16. package/dist/cjs/client/index.cjs.map +1 -1
  17. package/dist/cjs/client/index.d.ts +2 -0
  18. package/dist/cjs/client/useContent.cjs +2 -2
  19. package/dist/cjs/client/useContent.cjs.map +1 -1
  20. package/dist/cjs/client/useContent.d.ts +1 -2
  21. package/dist/cjs/client/useLocale.cjs +5 -3
  22. package/dist/cjs/client/useLocale.cjs.map +1 -1
  23. package/dist/cjs/client/useLocale.d.ts +1 -0
  24. package/dist/cjs/client/useLocaleBase.cjs +49 -0
  25. package/dist/cjs/client/useLocaleBase.cjs.map +1 -0
  26. package/dist/cjs/client/useLocaleBase.d.ts +14 -0
  27. package/dist/cjs/client/useLocaleCookie.cjs +1 -1
  28. package/dist/cjs/client/useLocaleCookie.cjs.map +1 -1
  29. package/dist/cjs/client/useTraduction.cjs.map +1 -1
  30. package/dist/cjs/client/useTraduction.d.ts +6 -5
  31. package/dist/cjs/craco/craco.config.cjs +32 -0
  32. package/dist/cjs/craco/craco.config.cjs.map +1 -0
  33. package/dist/cjs/craco/craco.config.d.ts +2 -0
  34. package/dist/cjs/craco/intlayerCracoPlugin.cjs +89 -0
  35. package/dist/cjs/craco/intlayerCracoPlugin.cjs.map +1 -0
  36. package/dist/cjs/craco/intlayerCracoPlugin.d.ts +26 -0
  37. package/dist/cjs/getEnumeration.cjs +0 -4
  38. package/dist/cjs/getEnumeration.cjs.map +1 -1
  39. package/dist/cjs/getEnumeration.d.ts +8 -5
  40. package/dist/cjs/getTranslation.cjs +1 -5
  41. package/dist/cjs/getTranslation.cjs.map +1 -1
  42. package/dist/cjs/getTranslation.d.ts +3 -2
  43. package/dist/cjs/index.cjs +4 -0
  44. package/dist/cjs/index.cjs.map +1 -1
  45. package/dist/cjs/index.d.ts +2 -0
  46. package/dist/cjs/processDictionary/{contentDictionary.d.cjs → contentDictionary.cjs} +3 -3
  47. package/dist/cjs/processDictionary/contentDictionary.cjs.map +1 -0
  48. package/dist/cjs/processDictionary/contentDictionary.d.ts +16 -0
  49. package/dist/cjs/processDictionary/index.cjs +118 -21
  50. package/dist/cjs/processDictionary/index.cjs.map +1 -1
  51. package/dist/cjs/processDictionary/index.d.ts +5 -4
  52. package/dist/cjs/server/IntlayerServerProvider.cjs +1 -1
  53. package/dist/cjs/server/IntlayerServerProvider.cjs.map +1 -1
  54. package/dist/cjs/server/getLocaleTranslation.cjs +1 -1
  55. package/dist/cjs/server/getLocaleTranslation.cjs.map +1 -1
  56. package/dist/cjs/server/useTraduction.cjs.map +1 -1
  57. package/dist/cjs/server/useTraduction.d.ts +4 -3
  58. package/dist/cjs/useIntlayerBase.cjs +3 -0
  59. package/dist/cjs/useIntlayerBase.cjs.map +1 -1
  60. package/dist/cjs/vite/intlayerPlugin.cjs +60 -0
  61. package/dist/cjs/vite/intlayerPlugin.cjs.map +1 -0
  62. package/dist/cjs/vite/intlayerPlugin.d.ts +17 -0
  63. package/dist/esm/IntlayerProvider.mjs +3 -2
  64. package/dist/esm/IntlayerProvider.mjs.map +1 -1
  65. package/dist/esm/chunk-ZNCO4QRF.mjs +9 -0
  66. package/dist/esm/cli/react-intlayer.d.mts +1 -0
  67. package/dist/esm/cli/react-intlayer.mjs +45 -0
  68. package/dist/esm/cli/react-intlayer.mjs.map +1 -0
  69. package/dist/esm/client/ContentEditionLayout.d.mts +6 -0
  70. package/dist/esm/client/ContentEditionLayout.mjs +11 -0
  71. package/dist/esm/client/ContentEditionLayout.mjs.map +1 -0
  72. package/dist/esm/client/IntlayerClientProvider.d.mts +2 -1
  73. package/dist/esm/client/IntlayerClientProvider.mjs +42 -7
  74. package/dist/esm/client/IntlayerClientProvider.mjs.map +1 -1
  75. package/dist/esm/client/getBrowserLocale.d.mts +26 -0
  76. package/dist/esm/client/getBrowserLocale.mjs +146 -0
  77. package/dist/esm/client/getBrowserLocale.mjs.map +1 -0
  78. package/dist/esm/client/index.d.mts +2 -0
  79. package/dist/esm/client/index.mjs +5 -0
  80. package/dist/esm/client/index.mjs.map +1 -1
  81. package/dist/esm/client/useContent.d.mts +1 -2
  82. package/dist/esm/client/useContent.mjs +3 -2
  83. package/dist/esm/client/useContent.mjs.map +1 -1
  84. package/dist/esm/client/useIntlayer.mjs +1 -0
  85. package/dist/esm/client/useIntlayer.mjs.map +1 -1
  86. package/dist/esm/client/useLocale.d.mts +1 -0
  87. package/dist/esm/client/useLocale.mjs +7 -4
  88. package/dist/esm/client/useLocale.mjs.map +1 -1
  89. package/dist/esm/client/useLocaleBase.d.mts +14 -0
  90. package/dist/esm/client/useLocaleBase.mjs +26 -0
  91. package/dist/esm/client/useLocaleBase.mjs.map +1 -0
  92. package/dist/esm/client/useLocaleCookie.mjs +3 -4
  93. package/dist/esm/client/useLocaleCookie.mjs.map +1 -1
  94. package/dist/esm/client/useTraduction.d.mts +6 -5
  95. package/dist/esm/client/useTraduction.mjs +1 -0
  96. package/dist/esm/client/useTraduction.mjs.map +1 -1
  97. package/dist/esm/craco/craco.config.d.mts +2 -0
  98. package/dist/esm/craco/craco.config.mjs +17 -0
  99. package/dist/esm/craco/craco.config.mjs.map +1 -0
  100. package/dist/esm/craco/intlayerCracoPlugin.d.mts +26 -0
  101. package/dist/esm/craco/intlayerCracoPlugin.mjs +54 -0
  102. package/dist/esm/craco/intlayerCracoPlugin.mjs.map +1 -0
  103. package/dist/esm/getEnumeration.d.mts +8 -5
  104. package/dist/esm/getEnumeration.mjs +1 -4
  105. package/dist/esm/getEnumeration.mjs.map +1 -1
  106. package/dist/esm/getTranslation.d.mts +3 -2
  107. package/dist/esm/getTranslation.mjs +3 -8
  108. package/dist/esm/getTranslation.mjs.map +1 -1
  109. package/dist/esm/index.d.mts +2 -0
  110. package/dist/esm/index.mjs +6 -1
  111. package/dist/esm/index.mjs.map +1 -1
  112. package/dist/esm/processDictionary/contentDictionary.d.mts +16 -0
  113. package/dist/esm/processDictionary/contentDictionary.mjs +1 -0
  114. package/dist/esm/processDictionary/contentDictionary.mjs.map +1 -0
  115. package/dist/esm/processDictionary/index.d.mts +5 -4
  116. package/dist/esm/processDictionary/index.mjs +122 -25
  117. package/dist/esm/processDictionary/index.mjs.map +1 -1
  118. package/dist/esm/server/IntlayerServerProvider.mjs +3 -4
  119. package/dist/esm/server/IntlayerServerProvider.mjs.map +1 -1
  120. package/dist/esm/server/getLocaleTranslation.mjs +3 -2
  121. package/dist/esm/server/getLocaleTranslation.mjs.map +1 -1
  122. package/dist/esm/server/index.mjs +1 -0
  123. package/dist/esm/server/index.mjs.map +1 -1
  124. package/dist/esm/server/serverContext.mjs +1 -0
  125. package/dist/esm/server/serverContext.mjs.map +1 -1
  126. package/dist/esm/server/useIntlayer.mjs +1 -0
  127. package/dist/esm/server/useIntlayer.mjs.map +1 -1
  128. package/dist/esm/server/useTraduction.d.mts +4 -3
  129. package/dist/esm/server/useTraduction.mjs +1 -0
  130. package/dist/esm/server/useTraduction.mjs.map +1 -1
  131. package/dist/esm/useIntlayerBase.mjs +4 -0
  132. package/dist/esm/useIntlayerBase.mjs.map +1 -1
  133. package/dist/esm/vite/intlayerPlugin.d.mts +17 -0
  134. package/dist/esm/vite/intlayerPlugin.mjs +36 -0
  135. package/dist/esm/vite/intlayerPlugin.mjs.map +1 -0
  136. package/package.json +37 -6
  137. package/src/IntlayerProvider.tsx +2 -2
  138. package/src/cli/react-intlayer.ts +60 -0
  139. package/src/client/ContentEditionLayout.tsx +15 -0
  140. package/src/client/IntlayerClientProvider.tsx +50 -12
  141. package/src/client/getBrowserLocale.tsx +192 -0
  142. package/src/client/index.ts +2 -0
  143. package/src/client/useContent.ts +2 -2
  144. package/src/client/useLocale.ts +5 -4
  145. package/src/client/useLocaleBase.ts +24 -0
  146. package/src/client/useLocaleCookie.ts +2 -5
  147. package/src/client/useTraduction.ts +6 -5
  148. package/src/craco/craco.config.ts +11 -0
  149. package/src/craco/intlayerCracoPlugin.ts +89 -0
  150. package/src/getEnumeration.ts +8 -10
  151. package/src/getTranslation.ts +5 -12
  152. package/src/index.ts +2 -1
  153. package/src/processDictionary/{contentDictionary.d.ts → contentDictionary.ts} +6 -5
  154. package/src/processDictionary/index.ts +159 -25
  155. package/src/server/IntlayerServerProvider.tsx +2 -5
  156. package/src/server/getLocaleTranslation.ts +2 -2
  157. package/src/server/useTraduction.ts +4 -3
  158. package/src/useIntlayerBase.ts +3 -0
  159. package/src/vite/intlayerPlugin.ts +59 -0
  160. package/dist/cjs/ContentEditor/ContentEditor.cjs +0 -110
  161. package/dist/cjs/ContentEditor/ContentEditor.cjs.map +0 -1
  162. package/dist/cjs/ContentEditor/ContentEditor.d.ts +0 -8
  163. package/dist/cjs/ContentEditor/contentRender.cjs.map +0 -1
  164. package/dist/cjs/ContentEditor/contentRender.d.ts +0 -3
  165. package/dist/cjs/ContentEditor/index.cjs +0 -25
  166. package/dist/cjs/ContentEditor/index.cjs.map +0 -1
  167. package/dist/cjs/ContentEditor/index.d.ts +0 -3
  168. package/dist/cjs/processDictionary/contentDictionary.d.cjs.map +0 -1
  169. package/dist/cjs/processDictionary/contentDictionary.d.d.ts +0 -29
  170. package/dist/esm/ContentEditor/ContentEditor.d.mts +0 -8
  171. package/dist/esm/ContentEditor/ContentEditor.mjs +0 -91
  172. package/dist/esm/ContentEditor/ContentEditor.mjs.map +0 -1
  173. package/dist/esm/ContentEditor/contentRender.d.mts +0 -3
  174. package/dist/esm/ContentEditor/contentRender.mjs +0 -13
  175. package/dist/esm/ContentEditor/contentRender.mjs.map +0 -1
  176. package/dist/esm/ContentEditor/index.d.mts +0 -3
  177. package/dist/esm/ContentEditor/index.mjs +0 -3
  178. package/dist/esm/ContentEditor/index.mjs.map +0 -1
  179. package/dist/esm/processDictionary/contentDictionary.d.d.mts +0 -29
  180. package/dist/esm/processDictionary/contentDictionary.d.mjs +0 -1
  181. package/src/ContentEditor/ContentEditor.tsx +0 -116
  182. package/src/ContentEditor/contentRender.tsx +0 -11
  183. package/src/ContentEditor/index.tsx +0 -2
  184. /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 defaultLocale = intlayerIntlConfiguration.defaultLocale;
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
- return processDictionary(translationResult as Content, locale);
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(enumerationResult as Content, locale);
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 !== 'object' || field === null) {
54
- return field;
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
- if (field.nodeType === NodeType.Translation) {
58
- return processTranslation(field as LanguageContent<ContentValue>, locale);
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
- if (field.nodeType === NodeType.Enumeration) {
62
- return processEnumeration(
63
- field satisfies QuantityContent<ContentValue>,
64
- locale
65
- );
66
- }
117
+ return processDictionary(
118
+ field as Content,
119
+ dictionaryId,
120
+ dictionaryPath,
121
+ keyPath,
122
+ locale
123
+ );
124
+ };
67
125
 
68
- if (typeof (field as any).type === 'undefined') {
69
- return processDictionary(field as Content, locale);
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
- return field as TransformedContentValue;
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
- result[key] = processNode(field, locale);
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
- intlayerIntlConfiguration.defaultLocale
9
+ getConfiguration().internationalization.defaultLocale
13
10
  );
14
11
 
15
12
  /**
@@ -1,4 +1,4 @@
1
- import { intlayerIntlConfiguration } from '@intlayer/config/client';
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 ?? intlayerIntlConfiguration.defaultLocale
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
- * const content = getTranslation<string>({
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.
@@ -30,6 +30,9 @@ export const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(
30
30
 
31
31
  return processDictionary(
32
32
  dictionary,
33
+ id,
34
+ dictionary.filePath as string,
35
+ [],
33
36
  locale
34
37
  ) as IntlayerDictionaryTypesConnector[T];
35
38
  };
@@ -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,8 +0,0 @@
1
- import { FC } from 'react';
2
-
3
- type ContentEditorProps = {
4
- children?: string;
5
- };
6
- declare const ContentEditor: FC<ContentEditorProps>;
7
-
8
- export { ContentEditor };
@@ -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,3 +0,0 @@
1
- declare const contentRender: (content: string) => string;
2
-
3
- export { contentRender };
@@ -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,3 +0,0 @@
1
- export { ContentEditor } from './ContentEditor.js';
2
- export { contentRender } from './contentRender.js';
3
- import 'react';
@@ -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 };
@@ -1,8 +0,0 @@
1
- import { FC } from 'react';
2
-
3
- type ContentEditorProps = {
4
- children?: string;
5
- };
6
- declare const ContentEditor: FC<ContentEditorProps>;
7
-
8
- export { ContentEditor };