create-module-federation 0.0.0-1737428758075 → 0.0.0-feat-support-bridge-react-router-v7-20251015110202

package/README.md

@@ -1 +1,40 @@
-# `create-module-federation`
+<p align="center">
+  <a href="https://module-federation.io/" target="blank"><img src="https://module-federation.io/module-federation.svg" alt="Module Federation 2.0" /></a>
+</p>
+
+# create-module-federation
+
+Create a new Module Federation project.
+
+<p>
+  <a href="https://npmjs.com/package/create-module-federation">
+   <img src="https://img.shields.io/npm/v/create-module-federation?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
+  <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>
+</p>
+
+## Usage
+
+Using `npm create`:
+
+```bash
+npm create module-federation@latest
+```
+
+Using CLI flags:
+
+```bash
+npx create-module-federation --dir my-project --template provider-modern --name provider
+
+# Using abbreviations
+npx create-module-federation -d my-project -t provider-modern -n provider
+```
+
+## Documentation
+
+See [Documentation](https://module-federation.io/guide/start/quick-start).
+
+## License
+
+[MIT](https://github.com/module-federation/core/blob/main/LICENSE).

package/dist/index.js

@@ -1,5 +1,8 @@
+#!/usr/bin/env node
 import * as __WEBPACK_EXTERNAL_MODULE_path__ from "path";
 import * as __WEBPACK_EXTERNAL_MODULE_fs__ from "fs";
+import * as __WEBPACK_EXTERNAL_MODULE_child_process__ from "child_process";
+import * as __WEBPACK_EXTERNAL_MODULE_url__ from "url";
 import * as __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__ from "@clack/prompts";
 import * as __WEBPACK_EXTERNAL_MODULE_minimist__ from "minimist";
 import * as __WEBPACK_EXTERNAL_MODULE_rslog__ from "rslog";
@@ -75,7 +78,7 @@ class HandlebarsAPI {
         if (templateResource._type !== FS_RESOURCE) throw new Error('resource not match');
         const resourceValue = await templateResource.value();
         if ('string' != typeof resourceValue.content) throw new Error(`resource.value is not string, resourceValue=${resourceValue}`);
-        await outputFs(target, renderString(resourceValue.content, parameters), outputFilePath, {
+        await outputFs(target, templateResource.resourceKey.endsWith('.handlebars') ? renderString(resourceValue.content, parameters) : resourceValue.content, outputFilePath, {
             encoding: 'utf-8'
         });
     }
@@ -89,6 +92,16 @@ class HandlebarsAPI {
         }));
     }
 }
+const create_filename = (0, __WEBPACK_EXTERNAL_MODULE_url__.fileURLToPath)(import.meta.url);
+const create_dirname = __WEBPACK_EXTERNAL_MODULE_path__["default"].dirname(create_filename);
+const packageDir = __WEBPACK_EXTERNAL_MODULE_path__["default"].resolve(create_dirname, '..');
+const OTHER_TYPE = {
+    zephyr: {
+        label: 'zephyr',
+        packageName: 'zephyr-apps@latest',
+        hint: 'create zephyr-apps@latest'
+    }
+};
 function upperFirst(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
@@ -101,11 +114,12 @@ function logHelpMessage(name, templates) {
      -h, --help       display help for command
      -d, --dir        create project in specified directory
      -t, --template   specify the template to use
+     -n, --name       specify the mf name
+     -r, --role       specify the mf role type: provider or consumer
      --override       override files in target directory
 
    Templates:
-
-     ${templates.join(', ')}
+     ${templates.filter((t)=>!t.startsWith('zephyr')).join(', ')}
 `);
 }
 function pkgFromUserAgent(userAgent) {
@@ -125,9 +139,11 @@ function checkCancel(value) {
     if ((0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.isCancel)(value)) cancelAndExit();
     return value;
 }
-function formatDir(input) {
+function formatProjectName(input) {
+    const formatted = input.trim().replace(/\/+$/g, '');
     return {
-        targetDir: input.trim().replace(/\/+$/g, '')
+        packageName: input,
+        targetDir: formatted
     };
 }
 function isEmptyDir(path) {
@@ -136,29 +152,9 @@ function isEmptyDir(path) {
 }
 async function getAppTemplateName({ roleType, framework }, { template }) {
     if (template) return `${template}-ts`;
-    let providerInfo = {
-        name: '',
-        entry: ''
-    };
-    if ('consumer' === roleType) {
-        const providerName = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
-            message: 'Please input your provider name (You can skip by press "enter"):',
-            defaultValue: ''
-        }));
-        if (providerName) {
-            providerInfo.name = providerName;
-            const providerEntry = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
-                message: `Please input your provider("${providerName}") entry:`,
-                validate (value) {
-                    if (0 === value.length) return 'Entry is required';
-                }
-            }));
-            providerInfo.entry = providerEntry;
-        }
-    }
     return `${roleType}-${framework}-ts`;
 }
-async function getLibTemplateName({ template }) {
+async function getLibTemplateName({ template, role }) {
     if (template) return `${template}-ts`;
     const templateName = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
         message: 'Select template',
@@ -179,9 +175,9 @@ async function getLibTemplateName({ template }) {
             }
         ].filter(Boolean)
     }));
-    const roleType = 'provider';
+    const roleType = role || "provider";
     if (!tools || !Object.keys(tools).length) return `${roleType}-${templateName}-ts`;
-    return `${roleType}-${templateName}-[${Object.keys(tools)}]-ts`;
+    return `${roleType}-${templateName}-${tools[0]}-ts`;
 }
 function getTemplateName({ projectType, roleType, framework }, args) {
     if ('app' === projectType) return getAppTemplateName({
@@ -193,10 +189,31 @@ function getTemplateName({ projectType, roleType, framework }, args) {
 function getTemplateDir(templateName) {
     return `templates/${templateName}/`;
 }
+async function getProjectType(template) {
+    if (!template) return checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
+        message: 'Please select the type of project you want to create:',
+        options: [
+            {
+                value: "app",
+                label: 'Application'
+            },
+            {
+                value: "lib",
+                label: 'Lib'
+            },
+            {
+                value: "zephyr",
+                label: 'Zephyr Powered (Learn more at https://zephyr-cloud.io)'
+            }
+        ]
+    }));
+    if (template.includes('lib')) return "lib";
+    return "app";
+}
 async function forgeTemplate({ projectType, argv, templateParameters, distFolder }) {
     let framework = 'modern';
-    let roleType = 'provider';
-    if ('app' === projectType) {
+    let roleType = "provider";
+    if (!argv?.template && 'app' === projectType) {
         framework = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
             message: 'Select template',
             options: [
@@ -210,7 +227,7 @@ async function forgeTemplate({ projectType, argv, templateParameters, distFolder
                 }
             ]
         }));
-        roleType = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
+        roleType = argv.role || checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
             message: 'Please select the role of project you want to create:',
             initialValue: 'provider',
             options: [
@@ -230,7 +247,7 @@ async function forgeTemplate({ projectType, argv, templateParameters, distFolder
         framework,
         roleType
     }, argv);
-    const material = new FsMaterial(__dirname);
+    const material = new FsMaterial(packageDir);
     const renderTemplate = async (templateDir)=>{
         const templatePattern = `${templateDir}**/*`;
         const resourceMap = await material.find(templatePattern, {
@@ -250,8 +267,9 @@ async function forgeTemplate({ projectType, argv, templateParameters, distFolder
     };
     const templateDir = getTemplateDir(templateName);
     let commonTemplateDir = '';
-    commonTemplateDir = 'lib' === projectType ? 'templates/lib-common/' : `templates/${framework}-common/`;
-    await renderTemplate(commonTemplateDir);
+    if ("lib" === projectType) commonTemplateDir = 'templates/lib-common/';
+    else if ('app' === projectType) commonTemplateDir = `templates/${framework}-common/`;
+    if (commonTemplateDir) await renderTemplate(commonTemplateDir);
     await renderTemplate(templateDir);
 }
 async function create({ name, templates }) {
@@ -259,28 +277,43 @@ async function create({ name, templates }) {
         alias: {
             h: 'help',
             d: 'dir',
-            t: 'template'
+            t: 'template',
+            n: 'name',
+            r: 'role'
         }
     });
     console.log('');
-    __WEBPACK_EXTERNAL_MODULE_rslog__.logger.greet(`◆  Create ${upperFirst(name)} Project`);
-    if (argv.help) {
-        logHelpMessage(name, templates);
-        return;
-    }
+    __WEBPACK_EXTERNAL_MODULE_rslog__.logger.greet(`\u{25C6}  Create ${upperFirst(name)} Project`);
+    if (argv.help) return void logHelpMessage(name, templates);
     const cwd = process.cwd();
     const pkgInfo = pkgFromUserAgent(process.env['npm_config_user_agent']);
     const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
-    const mfName = argv.dir ?? checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
+    const mfVersion = "0.0.0-feat-support-bridge-react-router-v7-20251015110202";
+    argv.template = templates.includes(argv.template || '') ? argv.template : void 0;
+    const projectType = await getProjectType(argv.template);
+    if ("zephyr" === projectType) {
+        const zephyrPackage = OTHER_TYPE['zephyr'].packageName;
+        const zephyrCommand = `${pkgManager} create ${zephyrPackage}`;
+        (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.note)(`Running: ${zephyrCommand}`, 'Launching Zephyr setup');
+        (0, __WEBPACK_EXTERNAL_MODULE_child_process__.spawnSync)(pkgManager, [
+            'create',
+            zephyrPackage
+        ], {
+            stdio: 'inherit',
+            shell: true
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.outro)('Done.');
+        return;
+    }
+    const mfName = argv.name || checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.text)({
         message: 'Please input Module Federation name:',
-        placeholder: 'mf-project-name',
-        defaultValue: 'mf-project-name',
+        placeholder: 'mf_project_name',
+        defaultValue: 'mf_project_name',
         validate (value) {
             if (0 === value.length) return 'Name is required';
         }
     }));
-    const dir = argv.dir || 'mf-project';
-    const { targetDir } = formatDir(dir);
+    const { targetDir } = formatProjectName(__WEBPACK_EXTERNAL_MODULE_path__["default"].join(argv.dir || mfName));
     const distFolder = __WEBPACK_EXTERNAL_MODULE_path__["default"].isAbsolute(targetDir) ? targetDir : __WEBPACK_EXTERNAL_MODULE_path__["default"].join(cwd, targetDir);
     if (!argv.override && __WEBPACK_EXTERNAL_MODULE_fs__["default"].existsSync(distFolder) && !isEmptyDir(distFolder)) {
         const option = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
@@ -298,42 +331,30 @@ async function create({ name, templates }) {
         }));
         if ('no' === option) cancelAndExit();
     }
-    const projectType = checkCancel(await (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.select)({
-        message: 'Please select the type of project you want to create:',
-        options: [
-            {
-                value: 'app',
-                label: 'Application'
-            },
-            {
-                value: 'lib',
-                label: 'Lib'
-            }
-        ]
-    }));
     await forgeTemplate({
         projectType,
         argv,
         templateParameters: {
-            mfName
+            mfName,
+            mfVersion
         },
         distFolder
     });
     const nextSteps = [
         `cd ${targetDir}`,
         `${pkgManager} install`,
-        `${pkgManager} run dev`
+        `${pkgManager} run ${"lib" === projectType ? 'mf-dev' : 'dev'}`
     ];
     (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.note)(nextSteps.join('\n'), 'Next steps');
     (0, __WEBPACK_EXTERNAL_MODULE__clack_prompts_3cae1695__.outro)('Done.');
 }
 const TEMPLATES = [
     'provider-modern',
-    'consumer-modern',
     'provider-rsbuild',
-    'consumer-rsbuild',
-    'rslib',
-    'rslib-storybook'
+    'provider-rslib',
+    'provider-rslib-storybook',
+    'consumer-modern',
+    'consumer-rsbuild'
 ];
 create({
     name: 'Module Federation',

package/package.json

@@ -3,26 +3,26 @@
   "description": "Create a new Module Federation project",
   "public": true,
   "sideEffects": false,
-  "version": "0.0.0-1737428758075",
+  "version": "0.0.0-feat-support-bridge-react-router-v7-20251015110202",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/module-federation/core/",
+    "url": "git+https://github.com/module-federation/core.git",
     "directory": "packages/create-module-federation"
   },
   "publishConfig": {
     "access": "public"
   },
   "type": "module",
-  "scripts": {
-    "build": "rslib build"
-  },
   "main": "./dist/index.js",
+  "engines": {
+    "node": ">=16.7.0"
+  },
   "bin": {
     "create-module-federation": "./dist/index.js"
   },
   "files": [
-    "template",
+    "templates",
     "dist"
   ],
   "dependencies": {
@@ -38,7 +38,10 @@
     "@types/glob": "7.2.0",
     "@types/minimist": "^1.2.5",
     "@types/fs-extra": "9.0.6",
-    "@rslib/core": "^0.3.1",
+    "@rslib/core": "^0.9.0",
     "rsbuild-plugin-publint": "^0.2.1"
+  },
+  "scripts": {
+    "build": "rslib build"
   }
-}
+}

package/templates/consumer-modern-ts/modern.config.ts

@@ -0,0 +1,15 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack', // Set to 'webpack' to enable webpack
+    }),
+    moduleFederationPlugin(),
+  ],
+});

package/templates/consumer-modern-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  remotes: {
+    'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/consumer-modern-ts/src/routes/page.tsx

@@ -0,0 +1,21 @@
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+import Provider from 'provider';
+
+const Index = () => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+
+    <div className="landing-page">
+      <Provider />
+    </div>
+  </div>
+);
+
+export default Index;

package/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,13 @@
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  remotes: {
+    'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+  },
+  shareStrategy: 'loaded-first',
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/consumer-rsbuild-ts/rsbuild.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import moduleFederationConfig from './module-federation.config';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+});

package/templates/consumer-rsbuild-ts/src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+import Provider from 'provider';
+
+const App = () => {
+  return (
+    <div className="content">
+      <Provider />
+    </div>
+  );
+};
+
+export default App;

package/templates/lib-common/module-federation.config.ts.handlebars

@@ -0,0 +1,17 @@
+import {createModuleFederationConfig} from '@module-federation/rsbuild-plugin';
+import pkg from './package.json';
+
+export default createModuleFederationConfig({
+  name: pkg.name,
+  exposes: {
+    '.': './src/index.tsx',
+  },
+  shared: {
+    react: {
+      singleton: true,
+    },
+    'react-dom': {
+      singleton: true,
+    },
+  },
+})

package/templates/lib-common/rslib.config.ts

@@ -0,0 +1,52 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import moduleFederationConfig from './module-federation.config';
+import pkg from './package.json';
+
+const shared = {
+  dts: {
+    bundle: false,
+  },
+};
+
+export default defineConfig({
+  lib: [
+    {
+      ...shared,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'cjs',
+      output: {
+        distPath: {
+          root: './dist/cjs',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'mf',
+      output: {
+        // set unpkg cdn as assetPrefix if you want to publish
+        assetPrefix:
+          process.env.NODE_ENV === 'production'
+            ? `https://unpkg.com/${pkg.name}@latest/dist/mf/`
+            : undefined,
+        distPath: {
+          root: './dist/mf',
+        },
+      },
+    },
+  ],
+  server: {
+    port: 3001,
+  },
+  plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+});

package/templates/lib-common/src/index.css

@@ -0,0 +1,53 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60vh;
+  padding: 10vh;
+  background: linear-gradient(45deg, #3a65f2, #6a5acd, #8a2be2, #023cfc);
+  background-size: 400% 400%;
+  animation: gradientFlow 6s ease infinite;
+}
+
+.icon-container {
+  width: 180px;
+  margin-bottom: 20px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.logo-image {
+  width: 100%;
+  transition: opacity 0.3s ease;
+}
+
+.title {
+  font-size: 3rem;
+  color: #fff;
+  margin-bottom: 20px;
+  animation: fadeInUp 1s ease-out;
+}
+
+@keyframes gradientFlow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/templates/lib-common/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.css';
+
+const Provider: React.FC = () => {
+  return (
+    <div className="container">
+      <div className="icon-container">
+        <img
+          src="https://module-federation.io/svg.svg"
+          alt="logo"
+          className="logo-image"
+        />
+      </div>
+      <h1 className="title">Hello Module Federation 2.0</h1>
+    </div>
+  );
+};
+
+export default Provider;

package/templates/lib-common/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2021"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}

package/templates/modern-common/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10

package/templates/modern-common/.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

package/templates/modern-common/.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "styled-components.vscode-styled-components",
+    "EditorConfig.editorconfig",
+    "streetsidesoftware.code-spell-checker",
+    "codezombiech.gitignore",
+    "aaron-bond.better-comments",
+    "jasonnutter.search-node-modules",
+    "jock.svg",
+    "mikestead.dotenv",
+    "vscode-icons-team.vscode-icons",
+    "biomejs.biome"
+  ]
+}