create-module-federation 0.0.0-1737428758075 → 0.0.0-fix-lazy-comile-20250928105735
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 +40 -1
- package/dist/index.js +85 -64
- package/package.json +11 -8
- package/templates/consumer-modern-ts/modern.config.ts +15 -0
- package/templates/consumer-modern-ts/module-federation.config.ts.handlebars +12 -0
- package/templates/consumer-modern-ts/src/routes/page.tsx +21 -0
- package/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars +13 -0
- package/templates/consumer-rsbuild-ts/rsbuild.config.ts +8 -0
- package/templates/consumer-rsbuild-ts/src/App.tsx +12 -0
- package/templates/lib-common/module-federation.config.ts.handlebars +17 -0
- package/templates/lib-common/rslib.config.ts +52 -0
- package/templates/lib-common/src/index.css +53 -0
- package/templates/lib-common/src/index.tsx +19 -0
- package/templates/lib-common/tsconfig.json +14 -0
- package/templates/modern-common/.browserslistrc +5 -0
- package/templates/modern-common/.nvmrc +1 -0
- package/templates/modern-common/.vscode/extensions.json +14 -0
- package/templates/modern-common/.vscode/settings.json +88 -0
- package/templates/modern-common/README.md +37 -0
- package/templates/modern-common/biome.json +34 -0
- package/templates/modern-common/package.json.handlebars +45 -0
- package/templates/modern-common/src/modern-app-env.d.ts +3 -0
- package/templates/modern-common/src/modern.runtime.ts +3 -0
- package/templates/modern-common/src/routes/index.css +41 -0
- package/templates/modern-common/src/routes/layout.tsx +9 -0
- package/templates/modern-common/tsconfig.json +15 -0
- package/templates/provider-modern-ts/modern.config.ts +18 -0
- package/templates/provider-modern-ts/module-federation.config.ts.handlebars +12 -0
- package/templates/provider-modern-ts/src/components/ProviderComponent.css +52 -0
- package/templates/provider-modern-ts/src/components/ProviderComponent.tsx +19 -0
- package/templates/provider-modern-ts/src/routes/page.tsx +21 -0
- package/templates/provider-rsbuild-ts/module-federation.config.ts.handlebars +12 -0
- package/templates/provider-rsbuild-ts/rsbuild.config.ts +11 -0
- package/templates/provider-rsbuild-ts/src/App.tsx +12 -0
- package/templates/provider-rsbuild-ts/src/components/ProviderComponent.css +52 -0
- package/templates/provider-rsbuild-ts/src/components/ProviderComponent.tsx +19 -0
- package/templates/provider-rslib-storybook-ts/.storybook/main.ts.handlebars +41 -0
- package/templates/provider-rslib-storybook-ts/README.md +27 -0
- package/templates/provider-rslib-storybook-ts/package.json.handlebars +50 -0
- package/templates/provider-rslib-storybook-ts/stories/Index.stories.tsx +11 -0
- package/templates/provider-rslib-ts/README.md +19 -0
- package/templates/provider-rslib-ts/package.json.handlebars +35 -0
- package/templates/rsbuild-common/README.md +29 -0
- package/templates/rsbuild-common/package.json.handlebars +22 -0
- package/templates/rsbuild-common/public/.gitkeep +0 -0
- package/templates/rsbuild-common/src/App.css +15 -0
- package/templates/rsbuild-common/src/bootstrap.tsx +13 -0
- package/templates/rsbuild-common/src/env.d.ts +1 -0
- package/templates/rsbuild-common/src/index.tsx +1 -0
- package/templates/rsbuild-common/tsconfig.json +26 -0
package/README.md
CHANGED
|
@@ -1 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://module-federation.io/" target="blank"><img src="https://module-federation.io/module-federation.svg" alt="Module Federation 2.0" /></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
# create-module-federation
|
|
6
|
+
|
|
7
|
+
Create a new Module Federation project.
|
|
8
|
+
|
|
9
|
+
<p>
|
|
10
|
+
<a href="https://npmjs.com/package/create-module-federation">
|
|
11
|
+
<img src="https://img.shields.io/npm/v/create-module-federation?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
|
|
12
|
+
</a>
|
|
13
|
+
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
|
|
14
|
+
<a href="https://npmcharts.com/compare/create-module-federation?minimal=true"><img src="https://img.shields.io/npm/dm/create-module-federation.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
Using `npm create`:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm create module-federation@latest
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Using CLI flags:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npx create-module-federation --dir my-project --template provider-modern --name provider
|
|
29
|
+
|
|
30
|
+
# Using abbreviations
|
|
31
|
+
npx create-module-federation -d my-project -t provider-modern -n provider
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Documentation
|
|
35
|
+
|
|
36
|
+
See [Documentation](https://module-federation.io/guide/start/quick-start).
|
|
37
|
+
|
|
38
|
+
## License
|
|
39
|
+
|
|
40
|
+
[MIT](https://github.com/module-federation/core/blob/main/LICENSE).
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
1
2
|
import * as __WEBPACK_EXTERNAL_MODULE_path__ from "path";
|
|
2
3
|
import * as __WEBPACK_EXTERNAL_MODULE_fs__ from "fs";
|
|
4
|
+
import * as __WEBPACK_EXTERNAL_MODULE_child_process__ from "child_process";
|
|
5
|
+
import * as __WEBPACK_EXTERNAL_MODULE_url__ from "url";
|
|
3
6
|
import * as __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__ from "@clack/prompts";
|
|
4
7
|
import * as __WEBPACK_EXTERNAL_MODULE_minimist__ from "minimist";
|
|
5
8
|
import * as __WEBPACK_EXTERNAL_MODULE_rslog__ from "rslog";
|
|
@@ -75,7 +78,7 @@ class HandlebarsAPI {
|
|
|
75
78
|
if (templateResource._type !== FS_RESOURCE) throw new Error('resource not match');
|
|
76
79
|
const resourceValue = await templateResource.value();
|
|
77
80
|
if ('string' != typeof resourceValue.content) throw new Error(`resource.value is not string, resourceValue=${resourceValue}`);
|
|
78
|
-
await outputFs(target, renderString(resourceValue.content, parameters), outputFilePath, {
|
|
81
|
+
await outputFs(target, templateResource.resourceKey.endsWith('.handlebars') ? renderString(resourceValue.content, parameters) : resourceValue.content, outputFilePath, {
|
|
79
82
|
encoding: 'utf-8'
|
|
80
83
|
});
|
|
81
84
|
}
|
|
@@ -89,6 +92,16 @@ class HandlebarsAPI {
|
|
|
89
92
|
}));
|
|
90
93
|
}
|
|
91
94
|
}
|
|
95
|
+
const create_filename = (0, __WEBPACK_EXTERNAL_MODULE_url__.fileURLToPath)(import.meta.url);
|
|
96
|
+
const create_dirname = __WEBPACK_EXTERNAL_MODULE_path__["default"].dirname(create_filename);
|
|
97
|
+
const packageDir = __WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(create_dirname, '..');
|
|
98
|
+
const OTHER_TYPE = {
|
|
99
|
+
zephyr: {
|
|
100
|
+
label: 'zephyr',
|
|
101
|
+
packageName: 'zephyr-apps@latest',
|
|
102
|
+
hint: 'create zephyr-apps@latest'
|
|
103
|
+
}
|
|
104
|
+
};
|
|
92
105
|
function upperFirst(str) {
|
|
93
106
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
94
107
|
}
|
|
@@ -101,11 +114,12 @@ function logHelpMessage(name, templates) {
|
|
|
101
114
|
-h, --help display help for command
|
|
102
115
|
-d, --dir create project in specified directory
|
|
103
116
|
-t, --template specify the template to use
|
|
117
|
+
-n, --name specify the mf name
|
|
118
|
+
-r, --role specify the mf role type: provider or consumer
|
|
104
119
|
--override override files in target directory
|
|
105
120
|
|
|
106
121
|
Templates:
|
|
107
|
-
|
|
108
|
-
${templates.join(', ')}
|
|
122
|
+
${templates.filter((t)=>!t.startsWith('zephyr')).join(', ')}
|
|
109
123
|
`);
|
|
110
124
|
}
|
|
111
125
|
function pkgFromUserAgent(userAgent) {
|
|
@@ -125,9 +139,11 @@ function checkCancel(value) {
|
|
|
125
139
|
if ((0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.isCancel)(value)) cancelAndExit();
|
|
126
140
|
return value;
|
|
127
141
|
}
|
|
128
|
-
function
|
|
142
|
+
function formatProjectName(input) {
|
|
143
|
+
const formatted = input.trim().replace(/\/+$/g, '');
|
|
129
144
|
return {
|
|
130
|
-
|
|
145
|
+
packageName: input,
|
|
146
|
+
targetDir: formatted
|
|
131
147
|
};
|
|
132
148
|
}
|
|
133
149
|
function isEmptyDir(path) {
|
|
@@ -136,29 +152,9 @@ function isEmptyDir(path) {
|
|
|
136
152
|
}
|
|
137
153
|
async function getAppTemplateName({ roleType, framework }, { template }) {
|
|
138
154
|
if (template) return `${template}-ts`;
|
|
139
|
-
let providerInfo = {
|
|
140
|
-
name: '',
|
|
141
|
-
entry: ''
|
|
142
|
-
};
|
|
143
|
-
if ('consumer' === roleType) {
|
|
144
|
-
const providerName = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
|
|
145
|
-
message: 'Please input your provider name (You can skip by press "enter"):',
|
|
146
|
-
defaultValue: ''
|
|
147
|
-
}));
|
|
148
|
-
if (providerName) {
|
|
149
|
-
providerInfo.name = providerName;
|
|
150
|
-
const providerEntry = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
|
|
151
|
-
message: `Please input your provider("${providerName}") entry:`,
|
|
152
|
-
validate (value) {
|
|
153
|
-
if (0 === value.length) return 'Entry is required';
|
|
154
|
-
}
|
|
155
|
-
}));
|
|
156
|
-
providerInfo.entry = providerEntry;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
155
|
return `${roleType}-${framework}-ts`;
|
|
160
156
|
}
|
|
161
|
-
async function getLibTemplateName({ template }) {
|
|
157
|
+
async function getLibTemplateName({ template, role }) {
|
|
162
158
|
if (template) return `${template}-ts`;
|
|
163
159
|
const templateName = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
|
|
164
160
|
message: 'Select template',
|
|
@@ -179,9 +175,9 @@ async function getLibTemplateName({ template }) {
|
|
|
179
175
|
}
|
|
180
176
|
].filter(Boolean)
|
|
181
177
|
}));
|
|
182
|
-
const roleType =
|
|
178
|
+
const roleType = role || "provider";
|
|
183
179
|
if (!tools || !Object.keys(tools).length) return `${roleType}-${templateName}-ts`;
|
|
184
|
-
return `${roleType}-${templateName}
|
|
180
|
+
return `${roleType}-${templateName}-${tools[0]}-ts`;
|
|
185
181
|
}
|
|
186
182
|
function getTemplateName({ projectType, roleType, framework }, args) {
|
|
187
183
|
if ('app' === projectType) return getAppTemplateName({
|
|
@@ -193,10 +189,31 @@ function getTemplateName({ projectType, roleType, framework }, args) {
|
|
|
193
189
|
function getTemplateDir(templateName) {
|
|
194
190
|
return `templates/${templateName}/`;
|
|
195
191
|
}
|
|
192
|
+
async function getProjectType(template) {
|
|
193
|
+
if (!template) return checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
|
|
194
|
+
message: 'Please select the type of project you want to create:',
|
|
195
|
+
options: [
|
|
196
|
+
{
|
|
197
|
+
value: "app",
|
|
198
|
+
label: 'Application'
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
value: "lib",
|
|
202
|
+
label: 'Lib'
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
value: "zephyr",
|
|
206
|
+
label: 'Zephyr Powered (Learn more at https://zephyr-cloud.io)'
|
|
207
|
+
}
|
|
208
|
+
]
|
|
209
|
+
}));
|
|
210
|
+
if (template.includes('lib')) return "lib";
|
|
211
|
+
return "app";
|
|
212
|
+
}
|
|
196
213
|
async function forgeTemplate({ projectType, argv, templateParameters, distFolder }) {
|
|
197
214
|
let framework = 'modern';
|
|
198
|
-
let roleType =
|
|
199
|
-
if ('app' === projectType) {
|
|
215
|
+
let roleType = "provider";
|
|
216
|
+
if (!argv?.template && 'app' === projectType) {
|
|
200
217
|
framework = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
|
|
201
218
|
message: 'Select template',
|
|
202
219
|
options: [
|
|
@@ -210,7 +227,7 @@ async function forgeTemplate({ projectType, argv, templateParameters, distFolder
|
|
|
210
227
|
}
|
|
211
228
|
]
|
|
212
229
|
}));
|
|
213
|
-
roleType = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
|
|
230
|
+
roleType = argv.role || checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
|
|
214
231
|
message: 'Please select the role of project you want to create:',
|
|
215
232
|
initialValue: 'provider',
|
|
216
233
|
options: [
|
|
@@ -230,7 +247,7 @@ async function forgeTemplate({ projectType, argv, templateParameters, distFolder
|
|
|
230
247
|
framework,
|
|
231
248
|
roleType
|
|
232
249
|
}, argv);
|
|
233
|
-
const material = new FsMaterial(
|
|
250
|
+
const material = new FsMaterial(packageDir);
|
|
234
251
|
const renderTemplate = async (templateDir)=>{
|
|
235
252
|
const templatePattern = `${templateDir}**/*`;
|
|
236
253
|
const resourceMap = await material.find(templatePattern, {
|
|
@@ -250,8 +267,9 @@ async function forgeTemplate({ projectType, argv, templateParameters, distFolder
|
|
|
250
267
|
};
|
|
251
268
|
const templateDir = getTemplateDir(templateName);
|
|
252
269
|
let commonTemplateDir = '';
|
|
253
|
-
|
|
254
|
-
|
|
270
|
+
if ("lib" === projectType) commonTemplateDir = 'templates/lib-common/';
|
|
271
|
+
else if ('app' === projectType) commonTemplateDir = `templates/${framework}-common/`;
|
|
272
|
+
if (commonTemplateDir) await renderTemplate(commonTemplateDir);
|
|
255
273
|
await renderTemplate(templateDir);
|
|
256
274
|
}
|
|
257
275
|
async function create({ name, templates }) {
|
|
@@ -259,28 +277,43 @@ async function create({ name, templates }) {
|
|
|
259
277
|
alias: {
|
|
260
278
|
h: 'help',
|
|
261
279
|
d: 'dir',
|
|
262
|
-
t: 'template'
|
|
280
|
+
t: 'template',
|
|
281
|
+
n: 'name',
|
|
282
|
+
r: 'role'
|
|
263
283
|
}
|
|
264
284
|
});
|
|
265
285
|
console.log('');
|
|
266
|
-
__WEBPACK_EXTERNAL_MODULE_rslog__.logger.greet(
|
|
267
|
-
if (argv.help)
|
|
268
|
-
logHelpMessage(name, templates);
|
|
269
|
-
return;
|
|
270
|
-
}
|
|
286
|
+
__WEBPACK_EXTERNAL_MODULE_rslog__.logger.greet(`\u{25C6} Create ${upperFirst(name)} Project`);
|
|
287
|
+
if (argv.help) return void logHelpMessage(name, templates);
|
|
271
288
|
const cwd = process.cwd();
|
|
272
289
|
const pkgInfo = pkgFromUserAgent(process.env['npm_config_user_agent']);
|
|
273
290
|
const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
|
|
274
|
-
const
|
|
291
|
+
const mfVersion = "0.0.0-fix-lazy-comile-20250928105735";
|
|
292
|
+
argv.template = templates.includes(argv.template || '') ? argv.template : void 0;
|
|
293
|
+
const projectType = await getProjectType(argv.template);
|
|
294
|
+
if ("zephyr" === projectType) {
|
|
295
|
+
const zephyrPackage = OTHER_TYPE['zephyr'].packageName;
|
|
296
|
+
const zephyrCommand = `${pkgManager} create ${zephyrPackage}`;
|
|
297
|
+
(0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.note)(`Running: ${zephyrCommand}`, 'Launching Zephyr setup');
|
|
298
|
+
(0, __WEBPACK_EXTERNAL_MODULE_child_process__.spawnSync)(pkgManager, [
|
|
299
|
+
'create',
|
|
300
|
+
zephyrPackage
|
|
301
|
+
], {
|
|
302
|
+
stdio: 'inherit',
|
|
303
|
+
shell: true
|
|
304
|
+
});
|
|
305
|
+
(0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.outro)('Done.');
|
|
306
|
+
return;
|
|
307
|
+
}
|
|
308
|
+
const mfName = argv.name || checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
|
|
275
309
|
message: 'Please input Module Federation name:',
|
|
276
|
-
placeholder: '
|
|
277
|
-
defaultValue: '
|
|
310
|
+
placeholder: 'mf_project_name',
|
|
311
|
+
defaultValue: 'mf_project_name',
|
|
278
312
|
validate (value) {
|
|
279
313
|
if (0 === value.length) return 'Name is required';
|
|
280
314
|
}
|
|
281
315
|
}));
|
|
282
|
-
const
|
|
283
|
-
const { targetDir } = formatDir(dir);
|
|
316
|
+
const { targetDir } = formatProjectName(__WEBPACK_EXTERNAL_MODULE_path__["default"].join(argv.dir || mfName));
|
|
284
317
|
const distFolder = __WEBPACK_EXTERNAL_MODULE_path__["default"].isAbsolute(targetDir) ? targetDir : __WEBPACK_EXTERNAL_MODULE_path__["default"].join(cwd, targetDir);
|
|
285
318
|
if (!argv.override && __WEBPACK_EXTERNAL_MODULE_fs__["default"].existsSync(distFolder) && !isEmptyDir(distFolder)) {
|
|
286
319
|
const option = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
|
|
@@ -298,42 +331,30 @@ async function create({ name, templates }) {
|
|
|
298
331
|
}));
|
|
299
332
|
if ('no' === option) cancelAndExit();
|
|
300
333
|
}
|
|
301
|
-
const projectType = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
|
|
302
|
-
message: 'Please select the type of project you want to create:',
|
|
303
|
-
options: [
|
|
304
|
-
{
|
|
305
|
-
value: 'app',
|
|
306
|
-
label: 'Application'
|
|
307
|
-
},
|
|
308
|
-
{
|
|
309
|
-
value: 'lib',
|
|
310
|
-
label: 'Lib'
|
|
311
|
-
}
|
|
312
|
-
]
|
|
313
|
-
}));
|
|
314
334
|
await forgeTemplate({
|
|
315
335
|
projectType,
|
|
316
336
|
argv,
|
|
317
337
|
templateParameters: {
|
|
318
|
-
mfName
|
|
338
|
+
mfName,
|
|
339
|
+
mfVersion
|
|
319
340
|
},
|
|
320
341
|
distFolder
|
|
321
342
|
});
|
|
322
343
|
const nextSteps = [
|
|
323
344
|
`cd ${targetDir}`,
|
|
324
345
|
`${pkgManager} install`,
|
|
325
|
-
`${pkgManager} run dev`
|
|
346
|
+
`${pkgManager} run ${"lib" === projectType ? 'mf-dev' : 'dev'}`
|
|
326
347
|
];
|
|
327
348
|
(0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.note)(nextSteps.join('\n'), 'Next steps');
|
|
328
349
|
(0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.outro)('Done.');
|
|
329
350
|
}
|
|
330
351
|
const TEMPLATES = [
|
|
331
352
|
'provider-modern',
|
|
332
|
-
'consumer-modern',
|
|
333
353
|
'provider-rsbuild',
|
|
334
|
-
'
|
|
335
|
-
'rslib',
|
|
336
|
-
'
|
|
354
|
+
'provider-rslib',
|
|
355
|
+
'provider-rslib-storybook',
|
|
356
|
+
'consumer-modern',
|
|
357
|
+
'consumer-rsbuild'
|
|
337
358
|
];
|
|
338
359
|
create({
|
|
339
360
|
name: 'Module Federation',
|
package/package.json
CHANGED
|
@@ -3,26 +3,26 @@
|
|
|
3
3
|
"description": "Create a new Module Federation project",
|
|
4
4
|
"public": true,
|
|
5
5
|
"sideEffects": false,
|
|
6
|
-
"version": "0.0.0-
|
|
6
|
+
"version": "0.0.0-fix-lazy-comile-20250928105735",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
|
-
"url": "https://github.com/module-federation/core
|
|
10
|
+
"url": "git+https://github.com/module-federation/core.git",
|
|
11
11
|
"directory": "packages/create-module-federation"
|
|
12
12
|
},
|
|
13
13
|
"publishConfig": {
|
|
14
14
|
"access": "public"
|
|
15
15
|
},
|
|
16
16
|
"type": "module",
|
|
17
|
-
"scripts": {
|
|
18
|
-
"build": "rslib build"
|
|
19
|
-
},
|
|
20
17
|
"main": "./dist/index.js",
|
|
18
|
+
"engines": {
|
|
19
|
+
"node": ">=16.7.0"
|
|
20
|
+
},
|
|
21
21
|
"bin": {
|
|
22
22
|
"create-module-federation": "./dist/index.js"
|
|
23
23
|
},
|
|
24
24
|
"files": [
|
|
25
|
-
"
|
|
25
|
+
"templates",
|
|
26
26
|
"dist"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
@@ -38,7 +38,10 @@
|
|
|
38
38
|
"@types/glob": "7.2.0",
|
|
39
39
|
"@types/minimist": "^1.2.5",
|
|
40
40
|
"@types/fs-extra": "9.0.6",
|
|
41
|
-
"@rslib/core": "^0.
|
|
41
|
+
"@rslib/core": "^0.9.0",
|
|
42
42
|
"rsbuild-plugin-publint": "^0.2.1"
|
|
43
|
+
},
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "rslib build"
|
|
43
46
|
}
|
|
44
|
-
}
|
|
47
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
2
|
+
import { moduleFederationPlugin } from '@module-federation/modern-js';
|
|
3
|
+
|
|
4
|
+
// https://modernjs.dev/en/configure/app/usage
|
|
5
|
+
export default defineConfig({
|
|
6
|
+
runtime: {
|
|
7
|
+
router: true,
|
|
8
|
+
},
|
|
9
|
+
plugins: [
|
|
10
|
+
appTools({
|
|
11
|
+
bundler: 'rspack', // Set to 'webpack' to enable webpack
|
|
12
|
+
}),
|
|
13
|
+
moduleFederationPlugin(),
|
|
14
|
+
],
|
|
15
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createModuleFederationConfig } from '@module-federation/modern-js';
|
|
2
|
+
|
|
3
|
+
export default createModuleFederationConfig({
|
|
4
|
+
name: '{{mfName}}',
|
|
5
|
+
remotes: {
|
|
6
|
+
'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
|
|
7
|
+
},
|
|
8
|
+
shared: {
|
|
9
|
+
react: { singleton: true },
|
|
10
|
+
'react-dom': { singleton: true },
|
|
11
|
+
},
|
|
12
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Helmet } from '@modern-js/runtime/head';
|
|
2
|
+
import './index.css';
|
|
3
|
+
import Provider from 'provider';
|
|
4
|
+
|
|
5
|
+
const Index = () => (
|
|
6
|
+
<div className="container-box">
|
|
7
|
+
<Helmet>
|
|
8
|
+
<link
|
|
9
|
+
rel="icon"
|
|
10
|
+
type="image/x-icon"
|
|
11
|
+
href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
|
|
12
|
+
/>
|
|
13
|
+
</Helmet>
|
|
14
|
+
|
|
15
|
+
<div className="landing-page">
|
|
16
|
+
<Provider />
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
export default Index;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
|
|
2
|
+
|
|
3
|
+
export default createModuleFederationConfig({
|
|
4
|
+
name: '{{mfName}}',
|
|
5
|
+
remotes: {
|
|
6
|
+
'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
|
|
7
|
+
},
|
|
8
|
+
shareStrategy: 'loaded-first',
|
|
9
|
+
shared: {
|
|
10
|
+
react: { singleton: true },
|
|
11
|
+
'react-dom': { singleton: true },
|
|
12
|
+
},
|
|
13
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { defineConfig } from '@rsbuild/core';
|
|
2
|
+
import { pluginReact } from '@rsbuild/plugin-react';
|
|
3
|
+
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
|
|
4
|
+
import moduleFederationConfig from './module-federation.config';
|
|
5
|
+
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
|
|
8
|
+
});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import {createModuleFederationConfig} from '@module-federation/rsbuild-plugin';
|
|
2
|
+
import pkg from './package.json';
|
|
3
|
+
|
|
4
|
+
export default createModuleFederationConfig({
|
|
5
|
+
name: pkg.name,
|
|
6
|
+
exposes: {
|
|
7
|
+
'.': './src/index.tsx',
|
|
8
|
+
},
|
|
9
|
+
shared: {
|
|
10
|
+
react: {
|
|
11
|
+
singleton: true,
|
|
12
|
+
},
|
|
13
|
+
'react-dom': {
|
|
14
|
+
singleton: true,
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
})
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { pluginReact } from '@rsbuild/plugin-react';
|
|
2
|
+
import { defineConfig } from '@rslib/core';
|
|
3
|
+
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
|
|
4
|
+
import moduleFederationConfig from './module-federation.config';
|
|
5
|
+
import pkg from './package.json';
|
|
6
|
+
|
|
7
|
+
const shared = {
|
|
8
|
+
dts: {
|
|
9
|
+
bundle: false,
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default defineConfig({
|
|
14
|
+
lib: [
|
|
15
|
+
{
|
|
16
|
+
...shared,
|
|
17
|
+
format: 'esm',
|
|
18
|
+
output: {
|
|
19
|
+
distPath: {
|
|
20
|
+
root: './dist/esm',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
...shared,
|
|
26
|
+
format: 'cjs',
|
|
27
|
+
output: {
|
|
28
|
+
distPath: {
|
|
29
|
+
root: './dist/cjs',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
...shared,
|
|
35
|
+
format: 'mf',
|
|
36
|
+
output: {
|
|
37
|
+
// set unpkg cdn as assetPrefix if you want to publish
|
|
38
|
+
assetPrefix:
|
|
39
|
+
process.env.NODE_ENV === 'production'
|
|
40
|
+
? `https://unpkg.com/${pkg.name}@latest/dist/mf/`
|
|
41
|
+
: undefined,
|
|
42
|
+
distPath: {
|
|
43
|
+
root: './dist/mf',
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
server: {
|
|
49
|
+
port: 3001,
|
|
50
|
+
},
|
|
51
|
+
plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
|
|
52
|
+
});
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
height: 60vh;
|
|
7
|
+
padding: 10vh;
|
|
8
|
+
background: linear-gradient(45deg, #3a65f2, #6a5acd, #8a2be2, #023cfc);
|
|
9
|
+
background-size: 400% 400%;
|
|
10
|
+
animation: gradientFlow 6s ease infinite;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.icon-container {
|
|
14
|
+
width: 180px;
|
|
15
|
+
margin-bottom: 20px;
|
|
16
|
+
position: relative;
|
|
17
|
+
transition: all 0.3s ease;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.logo-image {
|
|
21
|
+
width: 100%;
|
|
22
|
+
transition: opacity 0.3s ease;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.title {
|
|
26
|
+
font-size: 3rem;
|
|
27
|
+
color: #fff;
|
|
28
|
+
margin-bottom: 20px;
|
|
29
|
+
animation: fadeInUp 1s ease-out;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@keyframes gradientFlow {
|
|
33
|
+
0% {
|
|
34
|
+
background-position: 0% 50%;
|
|
35
|
+
}
|
|
36
|
+
50% {
|
|
37
|
+
background-position: 100% 50%;
|
|
38
|
+
}
|
|
39
|
+
100% {
|
|
40
|
+
background-position: 0% 50%;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes fadeInUp {
|
|
45
|
+
from {
|
|
46
|
+
opacity: 0;
|
|
47
|
+
transform: translateY(20px);
|
|
48
|
+
}
|
|
49
|
+
to {
|
|
50
|
+
opacity: 1;
|
|
51
|
+
transform: translateY(0);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.css';
|
|
3
|
+
|
|
4
|
+
const Provider: React.FC = () => {
|
|
5
|
+
return (
|
|
6
|
+
<div className="container">
|
|
7
|
+
<div className="icon-container">
|
|
8
|
+
<img
|
|
9
|
+
src="https://module-federation.io/svg.svg"
|
|
10
|
+
alt="logo"
|
|
11
|
+
className="logo-image"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
<h1 className="title">Hello Module Federation 2.0</h1>
|
|
15
|
+
</div>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export default Provider;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"lib": ["DOM", "ES2021"],
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"jsx": "react-jsx",
|
|
6
|
+
"strict": true,
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"isolatedModules": true,
|
|
9
|
+
"resolveJsonModule": true,
|
|
10
|
+
"moduleResolution": "bundler",
|
|
11
|
+
"useDefineForClassFields": true
|
|
12
|
+
},
|
|
13
|
+
"include": ["src"]
|
|
14
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
lts/hydrogen
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"recommendations": [
|
|
3
|
+
"styled-components.vscode-styled-components",
|
|
4
|
+
"EditorConfig.editorconfig",
|
|
5
|
+
"streetsidesoftware.code-spell-checker",
|
|
6
|
+
"codezombiech.gitignore",
|
|
7
|
+
"aaron-bond.better-comments",
|
|
8
|
+
"jasonnutter.search-node-modules",
|
|
9
|
+
"jock.svg",
|
|
10
|
+
"mikestead.dotenv",
|
|
11
|
+
"vscode-icons-team.vscode-icons",
|
|
12
|
+
"biomejs.biome"
|
|
13
|
+
]
|
|
14
|
+
}
|