react-scripts-intlayer 4.0.0 → 4.0.3
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 +43 -234
- package/dist/cjs/intlayerCracoPlugin.cjs +1 -5
- package/dist/cjs/intlayerCracoPlugin.cjs.map +1 -1
- package/dist/esm/intlayerCracoPlugin.mjs +2 -6
- package/dist/esm/intlayerCracoPlugin.mjs.map +1 -1
- package/dist/types/intlayerCracoPlugin.d.ts +1 -1
- package/dist/types/intlayerCracoPlugin.d.ts.map +1 -1
- package/package.json +7 -26
- package/dist/cjs/removeUndefinedValueObject.cjs +0 -38
- package/dist/cjs/removeUndefinedValueObject.cjs.map +0 -1
- package/dist/esm/removeUndefinedValueObject.mjs +0 -15
- package/dist/esm/removeUndefinedValueObject.mjs.map +0 -1
- package/dist/types/removeUndefinedValueObject.d.ts +0 -2
- package/dist/types/removeUndefinedValueObject.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,275 +1,84 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<a href="https://www.npmjs.com/package/react-intlayer">
|
|
2
|
+
<a href="https://www.npmjs.com/package/react-scripts-intlayer">
|
|
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>
|
|
6
6
|
|
|
7
7
|
<div align="center">
|
|
8
|
-
<a href="https://www.npmjs.com/package/react-intlayer">
|
|
9
|
-
<img alt="npm" src="https://img.shields.io/npm/v/react-intlayer.svg?labelColor=49516F&color=8994BC" />
|
|
8
|
+
<a href="https://www.npmjs.com/package/react-scripts-intlayer">
|
|
9
|
+
<img alt="npm" src="https://img.shields.io/npm/v/react-scripts-intlayer.svg?labelColor=49516F&color=8994BC" />
|
|
10
10
|
</a>
|
|
11
|
-
<a href="https://npmjs.org/package/react-intlayer">
|
|
12
|
-
<img alt="downloads" src="https://badgen.net/npm/dm/react-intlayer?labelColor=49516F&color=8994BC" />
|
|
11
|
+
<a href="https://npmjs.org/package/react-scripts-intlayer">
|
|
12
|
+
<img alt="downloads" src="https://badgen.net/npm/dm/react-scripts-intlayer?labelColor=49516F&color=8994BC" />
|
|
13
13
|
</a>
|
|
14
|
-
<a href="https://npmjs.org/package/react-intlayer">
|
|
15
|
-
<img alt="types included" src="https://badgen.net/npm/types/react-intlayer?labelColor=49516F&color=8994BC"
|
|
14
|
+
<a href="https://npmjs.org/package/react-scripts-intlayer">
|
|
15
|
+
<img alt="types included" src="https://badgen.net/npm/types/react-scripts-intlayer?labelColor=49516F&color=8994BC"
|
|
16
16
|
/>
|
|
17
17
|
</a>
|
|
18
18
|
</div>
|
|
19
19
|
|
|
20
|
-
#
|
|
20
|
+
# react-scripts-intlayer: Use Intlayer in a React Create App application
|
|
21
21
|
|
|
22
|
-
**Intlayer** is
|
|
22
|
+
**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
**The `react-scripts-intlayer` package** Includes the `react-scripts-intlayer` commands and plugins for integrating Intlayer with the Create React App based application. These plugins are based on [craco](https://craco.js.org/) and includes additional configuration for the [Webpack](https://webpack.js.org/) bundler.
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
.
|
|
28
|
-
├── Component1
|
|
29
|
-
│ ├── index.content.ts
|
|
30
|
-
│ └── index.tsx
|
|
31
|
-
└── Component2
|
|
32
|
-
├── index.content.ts
|
|
33
|
-
└── index.tsx
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
// ./Component1/index.content.ts
|
|
38
|
-
|
|
39
|
-
import { type DeclarationContent, t } from "intlayer";
|
|
40
|
-
|
|
41
|
-
const component1Content = {
|
|
42
|
-
key: "component1",
|
|
43
|
-
content: {
|
|
44
|
-
myTranslatedContent: t({
|
|
45
|
-
en: "Hello World",
|
|
46
|
-
fr: "Bonjour le monde",
|
|
47
|
-
es: "Hola Mundo",
|
|
48
|
-
}),
|
|
49
|
-
},
|
|
50
|
-
} satisfies DeclarationContent;
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
// ./Component1/index.tsx
|
|
55
|
-
|
|
56
|
-
import { useIntlayer } from "react-intlayer";
|
|
57
|
-
|
|
58
|
-
export const Component1 = () => {
|
|
59
|
-
const { myTranslatedContent } = useIntlayer("component1");
|
|
60
|
-
|
|
61
|
-
return <span>{myTranslatedContent}</span>;
|
|
62
|
-
};
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
## Why Choose Intlayer?
|
|
66
|
-
|
|
67
|
-
- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
|
|
68
|
-
- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
|
|
69
|
-
- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
|
|
70
|
-
- **Simplified Setup**: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
|
|
71
|
-
- **Server Component Support**: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
|
|
72
|
-
- **Enhanced Routing**: Full support for Next.js app routing, adapting seamlessly to complex application structures.
|
|
26
|
+
## Configuration
|
|
73
27
|
|
|
74
|
-
|
|
28
|
+
The `react-scripts-intlayer` package works seamlessly with the [`react-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/index.md), and the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/index.md). Have a look at the relevant documentation for more information.
|
|
75
29
|
|
|
76
|
-
|
|
30
|
+
## Installation
|
|
77
31
|
|
|
78
|
-
|
|
32
|
+
Install the necessary package using your preferred package manager:
|
|
79
33
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
```bash
|
|
83
|
-
npm install intlayer react-intlayer
|
|
34
|
+
```bash packageManager="npm"
|
|
35
|
+
npm install react-scripts-intlayer
|
|
84
36
|
```
|
|
85
37
|
|
|
86
|
-
```bash
|
|
87
|
-
yarn add
|
|
38
|
+
```bash packageManager="yarn"
|
|
39
|
+
yarn add react-scripts-intlayer
|
|
88
40
|
```
|
|
89
41
|
|
|
90
|
-
```bash
|
|
91
|
-
pnpm add
|
|
42
|
+
```bash packageManager="pnpm"
|
|
43
|
+
pnpm add react-scripts-intlayer
|
|
92
44
|
```
|
|
93
45
|
|
|
94
|
-
##
|
|
95
|
-
|
|
96
|
-
Create a config file to configure the languages of your application:
|
|
97
|
-
|
|
98
|
-
```typescript
|
|
99
|
-
// intlayer.config.ts
|
|
46
|
+
## Usage
|
|
100
47
|
|
|
101
|
-
|
|
48
|
+
### CLI Commands
|
|
102
49
|
|
|
103
|
-
|
|
104
|
-
internationalization: {
|
|
105
|
-
locales: [
|
|
106
|
-
Locales.ENGLISH,
|
|
107
|
-
Locales.FRENCH,
|
|
108
|
-
Locales.SPANISH,
|
|
109
|
-
// Your other locales
|
|
110
|
-
],
|
|
111
|
-
defaultLocale: Locales.ENGLISH,
|
|
112
|
-
},
|
|
113
|
-
};
|
|
50
|
+
The `react-scripts-intlayer` package provides the following CLI commands:
|
|
114
51
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
To see all available parameters, refer to the [configuration documentation here](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
|
|
52
|
+
- `npx react-scripts-intlayer build`: Builds React application with the Intlayer configuration.
|
|
53
|
+
- `npx react-scripts-intlayer start`: Starts the development server with the Intlayer configuration.
|
|
119
54
|
|
|
120
|
-
|
|
55
|
+
### Replace package.json scripts
|
|
121
56
|
|
|
122
|
-
|
|
57
|
+
To use the `react-scripts-intlayer` package, you need to replace the `package.json` scripts with the following commands:
|
|
123
58
|
|
|
124
|
-
```json
|
|
59
|
+
```json fileName="package.json"
|
|
60
|
+
{
|
|
125
61
|
"scripts": {
|
|
126
|
-
"
|
|
127
|
-
"
|
|
128
|
-
|
|
129
|
-
},
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
Note: react-intlayer scripts are based on craco. You can also implement your own setup based on the intlayer craco plugin. [See example here](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
|
|
133
|
-
|
|
134
|
-
## Step 4: Declare Your Content
|
|
135
|
-
|
|
136
|
-
Create and manage your content dictionaries:
|
|
137
|
-
|
|
138
|
-
```tsx
|
|
139
|
-
// src/app.content.tsx
|
|
140
|
-
import { t, type DeclarationContent } from "intlayer";
|
|
141
|
-
import { type ReactNode } from "react";
|
|
142
|
-
|
|
143
|
-
const appContent = {
|
|
144
|
-
key: "app",
|
|
145
|
-
content: {
|
|
146
|
-
getStarted: t<ReactNode>({
|
|
147
|
-
en: (
|
|
148
|
-
<>
|
|
149
|
-
Edit <code>src/App.tsx</code> and save to reload
|
|
150
|
-
</>
|
|
151
|
-
),
|
|
152
|
-
fr: (
|
|
153
|
-
<>
|
|
154
|
-
Éditez <code>src/App.tsx</code> et enregistrez pour recharger
|
|
155
|
-
</>
|
|
156
|
-
),
|
|
157
|
-
es: (
|
|
158
|
-
<>
|
|
159
|
-
Edita <code>src/App.tsx</code> y guarda para recargar
|
|
160
|
-
</>
|
|
161
|
-
),
|
|
162
|
-
}),
|
|
163
|
-
reactLink: {
|
|
164
|
-
href: "https://reactjs.org",
|
|
165
|
-
content: t({
|
|
166
|
-
en: "Learn React",
|
|
167
|
-
fr: "Apprendre React",
|
|
168
|
-
es: "Aprender React",
|
|
169
|
-
}),
|
|
170
|
-
},
|
|
171
|
-
},
|
|
172
|
-
} satisfies DeclarationContent;
|
|
173
|
-
|
|
174
|
-
export default appContent;
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
[See how to declare your Intlayer declaration files](https://github.com/aymericzip/intlayer/blob/main/docs/en/content_declaration/get_started.md)
|
|
178
|
-
|
|
179
|
-
## Step 5: Utilize Intlayer in Your Code
|
|
180
|
-
|
|
181
|
-
Access your content dictionaries throughout your application:
|
|
182
|
-
|
|
183
|
-
```tsx
|
|
184
|
-
import logo from "./logo.svg";
|
|
185
|
-
import "./App.css";
|
|
186
|
-
import { IntlayerProvider, useIntlayer } from "react-intlayer";
|
|
187
|
-
import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
|
|
188
|
-
|
|
189
|
-
function AppContent() {
|
|
190
|
-
const content = useIntlayer("app");
|
|
191
|
-
|
|
192
|
-
return (
|
|
193
|
-
<header className="App-header">
|
|
194
|
-
<img src={logo} className="App-logo" alt="logo" />
|
|
195
|
-
|
|
196
|
-
{content.getStarted}
|
|
197
|
-
<a
|
|
198
|
-
className="App-link"
|
|
199
|
-
href={content.reactLink.href.value}
|
|
200
|
-
target="_blank"
|
|
201
|
-
rel="noopener noreferrer"
|
|
202
|
-
>
|
|
203
|
-
{content.reactLink.content}
|
|
204
|
-
</a>
|
|
205
|
-
</header>
|
|
206
|
-
);
|
|
62
|
+
"start": "react-scripts-intlayer start",
|
|
63
|
+
"build": "react-scripts-intlayer build"
|
|
64
|
+
}
|
|
207
65
|
}
|
|
208
|
-
|
|
209
|
-
function App() {
|
|
210
|
-
return (
|
|
211
|
-
<IntlayerProvider>
|
|
212
|
-
<div className="App">
|
|
213
|
-
{/* To use the useIntlayer hook properly, you should access your data in a children component */}
|
|
214
|
-
<AppContent />
|
|
215
|
-
</div>
|
|
216
|
-
<div className="absolute bottom-5 right-5 z-50">
|
|
217
|
-
<LocaleSwitcher />
|
|
218
|
-
</div>
|
|
219
|
-
</IntlayerProvider>
|
|
220
|
-
);
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
export default App;
|
|
224
66
|
```
|
|
225
67
|
|
|
226
|
-
|
|
227
|
-
>
|
|
228
|
-
> ```tsx
|
|
229
|
-
> <img src={content.image.src.value} alt={content.image.value} />
|
|
230
|
-
> ```
|
|
68
|
+
## Use custom Webpack configuration
|
|
231
69
|
|
|
232
|
-
|
|
70
|
+
`react-scripts-intlayer` is based on [craco](https://craco.js.org/), which allows you to customize the Webpack configuration.
|
|
71
|
+
If you need to customize the Webpack configuration, you can also implement your own setup based on the intlayer craco plugin. [See example here](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
|
|
233
72
|
|
|
234
|
-
|
|
73
|
+
## Read the full Intlayer guide for React Create App
|
|
235
74
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
import { useLocale } from "react-intlayer";
|
|
75
|
+
Intlayer provides a lot of features to help you internationalize your React application.
|
|
76
|
+
[See how to use intlayer with React Create App](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_create_react_app.md).
|
|
239
77
|
|
|
240
|
-
|
|
241
|
-
const { setLocale } = useLocale();
|
|
242
|
-
|
|
243
|
-
return (
|
|
244
|
-
<button onClick={() => setLocale(Locales.English)}>
|
|
245
|
-
Change Language to English
|
|
246
|
-
</button>
|
|
247
|
-
);
|
|
248
|
-
};
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
## Configure TypeScript
|
|
252
|
-
|
|
253
|
-
Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
Ensure your TypeScript configuration includes the autogenerated types.
|
|
260
|
-
|
|
261
|
-
```json5
|
|
262
|
-
// tsconfig.json
|
|
263
|
-
|
|
264
|
-
{
|
|
265
|
-
// your custom config
|
|
266
|
-
"include": [
|
|
267
|
-
"src",
|
|
268
|
-
"types", // <- Include the auto generated types
|
|
269
|
-
],
|
|
270
|
-
}
|
|
271
|
-
```
|
|
78
|
+
## Read about Intlayer
|
|
272
79
|
|
|
273
|
-
|
|
80
|
+
- [Intlayer Website](https://intlayer.org)
|
|
81
|
+
- [Intlayer Documentation](https://intlayer.org/docs)
|
|
82
|
+
- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
|
|
274
83
|
|
|
275
|
-
|
|
84
|
+
- [Ask your questions to our smart documentation](https://intlayer.org/docs/chat)
|
|
@@ -27,7 +27,6 @@ var import_path = require("path");
|
|
|
27
27
|
var import_config = require("@intlayer/config");
|
|
28
28
|
var import_webpack = require("@intlayer/webpack");
|
|
29
29
|
var import_webpack2 = require("webpack");
|
|
30
|
-
var import_removeUndefinedValueObject = require('./removeUndefinedValueObject.cjs');
|
|
31
30
|
const intlayerConfig = (0, import_config.getConfiguration)();
|
|
32
31
|
const env = (0, import_config.formatEnvVariable)("react_app");
|
|
33
32
|
const overrideWebpackConfig = ({
|
|
@@ -58,10 +57,7 @@ const overrideCracoConfig = ({
|
|
|
58
57
|
...cracoConfig.webpack,
|
|
59
58
|
plugins: {
|
|
60
59
|
...cracoConfig.webpack?.plugins,
|
|
61
|
-
add: [
|
|
62
|
-
new import_webpack2.EnvironmentPlugin((0, import_removeUndefinedValueObject.removeUndefinedValueObject)(env)),
|
|
63
|
-
new import_webpack.IntLayerPlugin()
|
|
64
|
-
]
|
|
60
|
+
add: [new import_webpack2.EnvironmentPlugin(env), new import_webpack.IntlayerPlugin()]
|
|
65
61
|
},
|
|
66
62
|
configure: {
|
|
67
63
|
...cracoConfig.webpack?.configure ?? {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/intlayerCracoPlugin.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\n\nimport { resolve, relative, join } from 'path';\nimport type {\n CracoConfig,\n CracoConfigOverride,\n CracoPlugin,\n WebpackConfigOverride,\n} from '@craco/types';\nimport {\n getConfiguration,\n formatEnvVariable,\n ESMxCJSRequire,\n} from '@intlayer/config';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/intlayerCracoPlugin.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\n\nimport { resolve, relative, join } from 'path';\nimport type {\n CracoConfig,\n CracoConfigOverride,\n CracoPlugin,\n WebpackConfigOverride,\n} from '@craco/types';\nimport {\n getConfiguration,\n formatEnvVariable,\n ESMxCJSRequire,\n} from '@intlayer/config';\nimport { IntlayerPlugin as IntlayerWebpackPlugin } from '@intlayer/webpack';\nimport {\n type Configuration as WebpackConfig,\n EnvironmentPlugin,\n} from 'webpack';\n\n// Get Intlayer configuration\nconst intlayerConfig = getConfiguration();\n\n// Format environment variables\nconst env: Record<string, string> = formatEnvVariable('react_app');\n\n// Custom CRACO plugin function to override webpack configuration\nexport const overrideWebpackConfig = ({\n webpackConfig,\n}: WebpackConfigOverride): WebpackConfig => {\n webpackConfig.externals = {\n ...(typeof webpackConfig.externals === 'object'\n ? webpackConfig.externals\n : {}),\n esbuild: 'esbuild',\n module: 'module',\n fs: 'fs',\n vm: 'vm',\n };\n\n (webpackConfig.module?.rules ?? []).push({\n test: /\\.node$/,\n use: 'node-loader',\n });\n\n // You can add any custom CRACO plugins here if needed\n // config.plugins.push(new CustomCracoPlugin());\n\n return webpackConfig;\n};\n\n// Return a CRACO configuration object\nexport const overrideCracoConfig = ({\n cracoConfig,\n}: CracoConfigOverride): CracoConfig => {\n const { mainDir, baseDir } = intlayerConfig.content;\n\n const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n return {\n ...cracoConfig,\n webpack: {\n ...cracoConfig.webpack,\n plugins: {\n ...cracoConfig.webpack?.plugins,\n add: [new EnvironmentPlugin(env), new IntlayerWebpackPlugin()],\n },\n configure: {\n ...(cracoConfig.webpack?.configure ?? {}),\n resolve: {\n ...(cracoConfig.webpack?.configure?.resolve ?? {}),\n fallback: {\n ...(cracoConfig.webpack?.configure?.resolve?.fallback ?? {}),\n process: ESMxCJSRequire.resolve('process/browser'),\n },\n },\n },\n\n alias: {\n ...cracoConfig.webpack?.alias,\n '@intlayer/dictionaries-entry': resolve('./', relativeDictionariesPath),\n },\n },\n };\n};\n\n/**\n * A CRACO plugin that adds the Intlayer configuration to the webpack configuration and sets the environment variables.\n *\n * Usage:\n *\n * ```ts\n * const cracoConfig: CracoConfig = {\n * plugins: [\n * {\n * plugin: intlayerCracoPlugin(),\n * },\n * ],\n * };\n *\n * export default cracoConfig;\n * ```\n *\n */\nexport const plugin: CracoPlugin = {\n overrideCracoConfig,\n overrideWebpackConfig,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAwC;AAOxC,oBAIO;AACP,qBAAwD;AACxD,IAAAA,kBAGO;AAGP,MAAM,qBAAiB,gCAAiB;AAGxC,MAAM,UAA8B,iCAAkB,WAAW;AAG1D,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAA4C;AAC1C,gBAAc,YAAY;AAAA,IACxB,GAAI,OAAO,cAAc,cAAc,WACnC,cAAc,YACd,CAAC;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,GAAC,cAAc,QAAQ,SAAS,CAAC,GAAG,KAAK;AAAA,IACvC,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,SAAO;AACT;AAGO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,MAAwC;AACtC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAE5C,QAAM,uBAAmB,kBAAK,SAAS,kBAAkB;AACzD,QAAM,+BAA2B,sBAAS,SAAS,gBAAgB;AAEnE,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,YAAY;AAAA,MACf,SAAS;AAAA,QACP,GAAG,YAAY,SAAS;AAAA,QACxB,KAAK,CAAC,IAAI,kCAAkB,GAAG,GAAG,IAAI,eAAAC,eAAsB,CAAC;AAAA,MAC/D;AAAA,MACA,WAAW;AAAA,QACT,GAAI,YAAY,SAAS,aAAa,CAAC;AAAA,QACvC,SAAS;AAAA,UACP,GAAI,YAAY,SAAS,WAAW,WAAW,CAAC;AAAA,UAChD,UAAU;AAAA,YACR,GAAI,YAAY,SAAS,WAAW,SAAS,YAAY,CAAC;AAAA,YAC1D,SAAS,6BAAe,QAAQ,iBAAiB;AAAA,UACnD;AAAA,QACF;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,GAAG,YAAY,SAAS;AAAA,QACxB,oCAAgC,qBAAQ,MAAM,wBAAwB;AAAA,MACxE;AAAA,IACF;AAAA,EACF;AACF;AAoBO,MAAM,SAAsB;AAAA,EACjC;AAAA,EACA;AACF;","names":["import_webpack","IntlayerWebpackPlugin"]}
|
|
@@ -5,11 +5,10 @@ import {
|
|
|
5
5
|
formatEnvVariable,
|
|
6
6
|
ESMxCJSRequire
|
|
7
7
|
} from "@intlayer/config";
|
|
8
|
-
import {
|
|
8
|
+
import { IntlayerPlugin as IntlayerWebpackPlugin } from "@intlayer/webpack";
|
|
9
9
|
import {
|
|
10
10
|
EnvironmentPlugin
|
|
11
11
|
} from "webpack";
|
|
12
|
-
import { removeUndefinedValueObject } from './removeUndefinedValueObject.mjs';
|
|
13
12
|
const intlayerConfig = getConfiguration();
|
|
14
13
|
const env = formatEnvVariable("react_app");
|
|
15
14
|
const overrideWebpackConfig = ({
|
|
@@ -40,10 +39,7 @@ const overrideCracoConfig = ({
|
|
|
40
39
|
...cracoConfig.webpack,
|
|
41
40
|
plugins: {
|
|
42
41
|
...cracoConfig.webpack?.plugins,
|
|
43
|
-
add: [
|
|
44
|
-
new EnvironmentPlugin(removeUndefinedValueObject(env)),
|
|
45
|
-
new IntLayerWebpackPlugin()
|
|
46
|
-
]
|
|
42
|
+
add: [new EnvironmentPlugin(env), new IntlayerWebpackPlugin()]
|
|
47
43
|
},
|
|
48
44
|
configure: {
|
|
49
45
|
...cracoConfig.webpack?.configure ?? {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/intlayerCracoPlugin.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\n\nimport { resolve, relative, join } from 'path';\nimport type {\n CracoConfig,\n CracoConfigOverride,\n CracoPlugin,\n WebpackConfigOverride,\n} from '@craco/types';\nimport {\n getConfiguration,\n formatEnvVariable,\n ESMxCJSRequire,\n} from '@intlayer/config';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/intlayerCracoPlugin.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\n\nimport { resolve, relative, join } from 'path';\nimport type {\n CracoConfig,\n CracoConfigOverride,\n CracoPlugin,\n WebpackConfigOverride,\n} from '@craco/types';\nimport {\n getConfiguration,\n formatEnvVariable,\n ESMxCJSRequire,\n} from '@intlayer/config';\nimport { IntlayerPlugin as IntlayerWebpackPlugin } from '@intlayer/webpack';\nimport {\n type Configuration as WebpackConfig,\n EnvironmentPlugin,\n} from 'webpack';\n\n// Get Intlayer configuration\nconst intlayerConfig = getConfiguration();\n\n// Format environment variables\nconst env: Record<string, string> = formatEnvVariable('react_app');\n\n// Custom CRACO plugin function to override webpack configuration\nexport const overrideWebpackConfig = ({\n webpackConfig,\n}: WebpackConfigOverride): WebpackConfig => {\n webpackConfig.externals = {\n ...(typeof webpackConfig.externals === 'object'\n ? webpackConfig.externals\n : {}),\n esbuild: 'esbuild',\n module: 'module',\n fs: 'fs',\n vm: 'vm',\n };\n\n (webpackConfig.module?.rules ?? []).push({\n test: /\\.node$/,\n use: 'node-loader',\n });\n\n // You can add any custom CRACO plugins here if needed\n // config.plugins.push(new CustomCracoPlugin());\n\n return webpackConfig;\n};\n\n// Return a CRACO configuration object\nexport const overrideCracoConfig = ({\n cracoConfig,\n}: CracoConfigOverride): CracoConfig => {\n const { mainDir, baseDir } = intlayerConfig.content;\n\n const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n return {\n ...cracoConfig,\n webpack: {\n ...cracoConfig.webpack,\n plugins: {\n ...cracoConfig.webpack?.plugins,\n add: [new EnvironmentPlugin(env), new IntlayerWebpackPlugin()],\n },\n configure: {\n ...(cracoConfig.webpack?.configure ?? {}),\n resolve: {\n ...(cracoConfig.webpack?.configure?.resolve ?? {}),\n fallback: {\n ...(cracoConfig.webpack?.configure?.resolve?.fallback ?? {}),\n process: ESMxCJSRequire.resolve('process/browser'),\n },\n },\n },\n\n alias: {\n ...cracoConfig.webpack?.alias,\n '@intlayer/dictionaries-entry': resolve('./', relativeDictionariesPath),\n },\n },\n };\n};\n\n/**\n * A CRACO plugin that adds the Intlayer configuration to the webpack configuration and sets the environment variables.\n *\n * Usage:\n *\n * ```ts\n * const cracoConfig: CracoConfig = {\n * plugins: [\n * {\n * plugin: intlayerCracoPlugin(),\n * },\n * ],\n * };\n *\n * export default cracoConfig;\n * ```\n *\n */\nexport const plugin: CracoPlugin = {\n overrideCracoConfig,\n overrideWebpackConfig,\n};\n"],"mappings":";AAGA,SAAS,SAAS,UAAU,YAAY;AAOxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB,6BAA6B;AACxD;AAAA,EAEE;AAAA,OACK;AAGP,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,MAA8B,kBAAkB,WAAW;AAG1D,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAA4C;AAC1C,gBAAc,YAAY;AAAA,IACxB,GAAI,OAAO,cAAc,cAAc,WACnC,cAAc,YACd,CAAC;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,GAAC,cAAc,QAAQ,SAAS,CAAC,GAAG,KAAK;AAAA,IACvC,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,SAAO;AACT;AAGO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,MAAwC;AACtC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAE5C,QAAM,mBAAmB,KAAK,SAAS,kBAAkB;AACzD,QAAM,2BAA2B,SAAS,SAAS,gBAAgB;AAEnE,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,YAAY;AAAA,MACf,SAAS;AAAA,QACP,GAAG,YAAY,SAAS;AAAA,QACxB,KAAK,CAAC,IAAI,kBAAkB,GAAG,GAAG,IAAI,sBAAsB,CAAC;AAAA,MAC/D;AAAA,MACA,WAAW;AAAA,QACT,GAAI,YAAY,SAAS,aAAa,CAAC;AAAA,QACvC,SAAS;AAAA,UACP,GAAI,YAAY,SAAS,WAAW,WAAW,CAAC;AAAA,UAChD,UAAU;AAAA,YACR,GAAI,YAAY,SAAS,WAAW,SAAS,YAAY,CAAC;AAAA,YAC1D,SAAS,eAAe,QAAQ,iBAAiB;AAAA,UACnD;AAAA,QACF;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,GAAG,YAAY,SAAS;AAAA,QACxB,gCAAgC,QAAQ,MAAM,wBAAwB;AAAA,MACxE;AAAA,IACF;AAAA,EACF;AACF;AAoBO,MAAM,SAAsB;AAAA,EACjC;AAAA,EACA;AACF;","names":[]}
|
|
@@ -3,7 +3,7 @@ import { type Configuration as WebpackConfig } from 'webpack';
|
|
|
3
3
|
export declare const overrideWebpackConfig: ({ webpackConfig, }: WebpackConfigOverride) => WebpackConfig;
|
|
4
4
|
export declare const overrideCracoConfig: ({ cracoConfig, }: CracoConfigOverride) => CracoConfig;
|
|
5
5
|
/**
|
|
6
|
-
* A CRACO plugin that adds the
|
|
6
|
+
* A CRACO plugin that adds the Intlayer configuration to the webpack configuration and sets the environment variables.
|
|
7
7
|
*
|
|
8
8
|
* Usage:
|
|
9
9
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"intlayerCracoPlugin.d.ts","sourceRoot":"","sources":["../../src/intlayerCracoPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACtB,MAAM,cAAc,CAAC;AAOtB,OAAO,EACL,KAAK,aAAa,IAAI,aAAa,EAEpC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"intlayerCracoPlugin.d.ts","sourceRoot":"","sources":["../../src/intlayerCracoPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACtB,MAAM,cAAc,CAAC;AAOtB,OAAO,EACL,KAAK,aAAa,IAAI,aAAa,EAEpC,MAAM,SAAS,CAAC;AASjB,eAAO,MAAM,qBAAqB,uBAE/B,qBAAqB,KAAG,aAoB1B,CAAC;AAGF,eAAO,MAAM,mBAAmB,qBAE7B,mBAAmB,KAAG,WA+BxB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,MAAM,EAAE,WAGpB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-scripts-intlayer",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.3",
|
|
4
4
|
"private": false,
|
|
5
|
-
"description": "
|
|
5
|
+
"description": "Integrate Intlayer with Create React App using custom React scripts for internationalization i18n and advanced Webpack configurations",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"intlayer",
|
|
8
8
|
"data",
|
|
@@ -40,16 +40,6 @@
|
|
|
40
40
|
"require": "./dist/cjs/index.cjs",
|
|
41
41
|
"import": "./dist/esm/index.mjs"
|
|
42
42
|
},
|
|
43
|
-
"./server": {
|
|
44
|
-
"types": "./dist/types/server/index.d.ts",
|
|
45
|
-
"require": "./dist/cjs/server/index.cjs",
|
|
46
|
-
"import": "./dist/esm/server/index.mjs"
|
|
47
|
-
},
|
|
48
|
-
"./editor": {
|
|
49
|
-
"types": "./dist/types/editor/index.d.ts",
|
|
50
|
-
"require": "./dist/cjs/editor/index.cjs",
|
|
51
|
-
"import": "./dist/esm/editor/index.mjs"
|
|
52
|
-
},
|
|
53
43
|
"./package.json": "./package.json"
|
|
54
44
|
},
|
|
55
45
|
"main": "dist/cjs/index.cjs",
|
|
@@ -73,12 +63,8 @@
|
|
|
73
63
|
"@craco/craco": "^7.1.0",
|
|
74
64
|
"node-loader": "^2.1.0",
|
|
75
65
|
"webpack": "^5.97.1",
|
|
76
|
-
"@intlayer/
|
|
77
|
-
"@intlayer/
|
|
78
|
-
"@intlayer/config": "4.0.0",
|
|
79
|
-
"@intlayer/webpack": "4.0.0",
|
|
80
|
-
"@intlayer/dictionaries-entry": "4.0.0",
|
|
81
|
-
"@intlayer/core": "4.0.0"
|
|
66
|
+
"@intlayer/config": "4.0.3",
|
|
67
|
+
"@intlayer/webpack": "4.0.3"
|
|
82
68
|
},
|
|
83
69
|
"devDependencies": {
|
|
84
70
|
"@craco/types": "^7.1.0",
|
|
@@ -95,8 +81,8 @@
|
|
|
95
81
|
"tsc-alias": "^1.8.10",
|
|
96
82
|
"tsup": "^8.3.5",
|
|
97
83
|
"typescript": "^5.7.3",
|
|
98
|
-
"@intlayer/backend": "4.0.0",
|
|
99
84
|
"@utils/eslint-config": "1.0.4",
|
|
85
|
+
"@intlayer/backend": "4.0.3",
|
|
100
86
|
"@utils/ts-config": "1.0.4",
|
|
101
87
|
"@utils/ts-config-types": "1.0.4",
|
|
102
88
|
"@utils/tsup-config": "1.0.4"
|
|
@@ -104,14 +90,9 @@
|
|
|
104
90
|
"peerDependencies": {
|
|
105
91
|
"react": ">=16.0.0",
|
|
106
92
|
"react-dom": ">=16.0.0",
|
|
107
|
-
"vite": ">=4.0.0",
|
|
108
93
|
"webpack": ">=5.0.0",
|
|
109
|
-
"@intlayer/
|
|
110
|
-
"@intlayer/
|
|
111
|
-
"@intlayer/core": "4.0.0",
|
|
112
|
-
"@intlayer/dictionaries-entry": "4.0.0",
|
|
113
|
-
"@intlayer/webpack": "4.0.0",
|
|
114
|
-
"intlayer": "4.0.0"
|
|
94
|
+
"@intlayer/config": "4.0.3",
|
|
95
|
+
"@intlayer/webpack": "4.0.3"
|
|
115
96
|
},
|
|
116
97
|
"engines": {
|
|
117
98
|
"node": ">=14.18"
|
|
@@ -1,38 +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 __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var removeUndefinedValueObject_exports = {};
|
|
20
|
-
__export(removeUndefinedValueObject_exports, {
|
|
21
|
-
removeUndefinedValueObject: () => removeUndefinedValueObject
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(removeUndefinedValueObject_exports);
|
|
24
|
-
const removeUndefinedValueObject = (obj) => {
|
|
25
|
-
const newObj = {};
|
|
26
|
-
for (const key in obj) {
|
|
27
|
-
if (obj[key] !== void 0) {
|
|
28
|
-
newObj[key] = obj[key];
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
Object.freeze(newObj);
|
|
32
|
-
return newObj;
|
|
33
|
-
};
|
|
34
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
35
|
-
0 && (module.exports = {
|
|
36
|
-
removeUndefinedValueObject
|
|
37
|
-
});
|
|
38
|
-
//# sourceMappingURL=removeUndefinedValueObject.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/removeUndefinedValueObject.ts"],"sourcesContent":["export const removeUndefinedValueObject = <T extends Record<string, unknown>>(\n obj: T\n): T => {\n const newObj: T = {} as T;\n\n for (const key in obj) {\n if (obj[key] !== undefined) {\n newObj[key] = obj[key];\n }\n }\n\n Object.freeze(newObj);\n\n return newObj;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,6BAA6B,CACxC,QACM;AACN,QAAM,SAAY,CAAC;AAEnB,aAAW,OAAO,KAAK;AACrB,QAAI,IAAI,GAAG,MAAM,QAAW;AAC1B,aAAO,GAAG,IAAI,IAAI,GAAG;AAAA,IACvB;AAAA,EACF;AAEA,SAAO,OAAO,MAAM;AAEpB,SAAO;AACT;","names":[]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import "./chunk-ZD7AOCMD.mjs";
|
|
2
|
-
const removeUndefinedValueObject = (obj) => {
|
|
3
|
-
const newObj = {};
|
|
4
|
-
for (const key in obj) {
|
|
5
|
-
if (obj[key] !== void 0) {
|
|
6
|
-
newObj[key] = obj[key];
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
Object.freeze(newObj);
|
|
10
|
-
return newObj;
|
|
11
|
-
};
|
|
12
|
-
export {
|
|
13
|
-
removeUndefinedValueObject
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=removeUndefinedValueObject.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/removeUndefinedValueObject.ts"],"sourcesContent":["export const removeUndefinedValueObject = <T extends Record<string, unknown>>(\n obj: T\n): T => {\n const newObj: T = {} as T;\n\n for (const key in obj) {\n if (obj[key] !== undefined) {\n newObj[key] = obj[key];\n }\n }\n\n Object.freeze(newObj);\n\n return newObj;\n};\n"],"mappings":";AAAO,MAAM,6BAA6B,CACxC,QACM;AACN,QAAM,SAAY,CAAC;AAEnB,aAAW,OAAO,KAAK;AACrB,QAAI,IAAI,GAAG,MAAM,QAAW;AAC1B,aAAO,GAAG,IAAI,IAAI,GAAG;AAAA,IACvB;AAAA,EACF;AAEA,SAAO,OAAO,MAAM;AAEpB,SAAO;AACT;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"removeUndefinedValueObject.d.ts","sourceRoot":"","sources":["../../src/removeUndefinedValueObject.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,OACrE,CAAC,KACL,CAYF,CAAC"}
|