chore: modify tempplate

module-federation · Jan 21, 2025 · a533fff · a533fff
1 parent 5af6ae0
commit a533fff
Show file tree

Hide file tree

Showing 21 changed files with 107 additions and 444 deletions.
diff --git a/packages/create-module-federation/package.json b/packages/create-module-federation/package.json
@@ -3,7 +3,7 @@
   "description": "Create a new Module Federation project",
   "public": true,
   "sideEffects": false,
-  "version": "0.0.0",
+  "version": "0.0.0-1737428758075",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -18,11 +18,14 @@
     "build": "rslib build"
   },
   "main": "./dist/index.js",
+  "engines": {
+    "node": ">=16.7.0"
+  },
   "bin": {
     "create-module-federation": "./dist/index.js"
   },
   "files": [
-    "template",
+    "templates",
     "dist"
   ],
   "dependencies": {

diff --git a/packages/create-module-federation/project.json b/packages/create-module-federation/project.json
@@ -32,17 +32,16 @@
       }
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "packages/create-module-federation/jest.config.js",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "parallel": false,
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": ["echo 'no test'"]
       }
     },
     "pre-release": {

diff --git a/packages/create-module-federation/src/create.ts b/packages/create-module-federation/src/create.ts
@@ -4,6 +4,7 @@
  */
 import path from 'path';
 import fs from 'fs';
+import { fileURLToPath } from 'url';
 import {
   cancel,
   isCancel,
@@ -18,6 +19,10 @@ import { logger } from 'rslog';
 import { FsMaterial } from './materials/FsMaterial';
 import { HandlebarsAPI } from './handlebars';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageDir = path.resolve(__dirname, '..');
+
 type Argv = {
   help?: boolean;
   dir?: string;
@@ -93,9 +98,11 @@ function checkCancel<T>(value: unknown) {
  * 5. Input: '/root/path/to/foo'
  *    Output: folder -> `'/root/path/to/foo'` folder, `package.json#name` -> `foo`
  */
-function formatDir(input: string) {
+function formatProjectName(input: string) {
+  const formatted = input.trim().replace(/\/+$/g, '');
   return {
-    targetDir: input.trim().replace(/\/+$/g, ''),
+    packageName: input,
+    targetDir: formatted,
   };
 }
 
@@ -118,37 +125,6 @@ async function getAppTemplateName(
     return `${template}-ts`;
   }
 
-  let providerInfo: ProviderInfo = {
-    name: '',
-    entry: '',
-  };
-
-  if (roleType === 'consumer') {
-    const providerName = checkCancel<string>(
-      await text({
-        message:
-          'Please input your provider name (You can skip by press "enter"):',
-        defaultValue: '',
-      }),
-    );
-
-    if (providerName) {
-      providerInfo.name = providerName;
-
-      const providerEntry = checkCancel<string>(
-        await text({
-          message: `Please input your provider("${providerName}") entry:`,
-          validate(value) {
-            if (value.length === 0) {
-              return 'Entry is required';
-            }
-          },
-        }),
-      );
-      providerInfo.entry = providerEntry;
-    }
-  }
-
   return `${roleType}-${framework}-ts`;
 }
 
@@ -187,7 +163,7 @@ async function getLibTemplateName({ template }: Argv) {
     return `${roleType}-${templateName}-ts`;
   }
 
-  return `${roleType}-${templateName}-[${Object.keys(tools)}]-ts`;
+  return `${roleType}-${templateName}-${tools[0]}-ts`;
 }
 
 function getTemplateName(
@@ -263,7 +239,7 @@ async function forgeTemplate({
     },
     argv,
   );
-  const material = new FsMaterial(__dirname);
+  const material = new FsMaterial(packageDir);
 
   const renderTemplate = async (templateDir: string) => {
     const templatePattern = `${templateDir}**/*`;
@@ -331,24 +307,20 @@ export async function create({
   const pkgInfo = pkgFromUserAgent(process.env['npm_config_user_agent']);
   const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
 
-  const mfName =
-    argv.dir ??
-    checkCancel<string>(
-      await text({
-        message: 'Please input Module Federation name:',
-        placeholder: 'mf-project-name',
-        defaultValue: 'mf-project-name',
-        validate(value) {
-          if (value.length === 0) {
-            return 'Name is required';
-          }
-        },
-      }),
-    );
-
-  const dir = argv.dir || 'mf-project';
+  const mfName = checkCancel<string>(
+    await text({
+      message: 'Please input Module Federation name:',
+      placeholder: 'mf_project_name',
+      defaultValue: 'mf_project_name',
+      validate(value) {
+        if (value.length === 0) {
+          return 'Name is required';
+        }
+      },
+    }),
+  );
 
-  const { targetDir } = formatDir(dir);
+  const { targetDir } = formatProjectName(path.join(argv.dir || '', mfName));
   const distFolder = path.isAbsolute(targetDir)
     ? targetDir
     : path.join(cwd, targetDir);

diff --git a/packages/create-module-federation/src/handlebars/index.ts b/packages/create-module-federation/src/handlebars/index.ts
@@ -34,7 +34,9 @@ export class HandlebarsAPI {
     }
     await outputFs(
       target,
-      renderString(resourceValue.content, parameters),
+      templateResource.resourceKey.endsWith('.handlebars')
+        ? renderString(resourceValue.content, parameters)
+        : resourceValue.content,
       outputFilePath,
       { encoding: 'utf-8' },
     );

diff --git a/packages/create-module-federation/src/index.ts b/packages/create-module-federation/src/index.ts
@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 import { create } from './create';
 
 interface Template {

diff --git a/...ate-module-federation/templates/consumer-modern-ts/module-federation.config.ts.handlebars b/...ate-module-federation/templates/consumer-modern-ts/module-federation.config.ts.handlebars
@@ -3,7 +3,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: '{{mfName}}',
   remotes: {
-    'provider': 'provider@http://localhost:8080/mf-manifest.json',
+    'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },

diff --git a/packages/create-module-federation/templates/consumer-modern-ts/src/routes/page.tsx b/packages/create-module-federation/templates/consumer-modern-ts/src/routes/page.tsx
@@ -1,6 +1,5 @@
 import { Helmet } from '@modern-js/runtime/head';
 import './index.css';
-import { ComponentInspector } from '../components/ComponentInspector';
 import Header from 'provider/Header';
 import Description from 'provider/Description';
 import Footer from 'provider/Footer';
@@ -16,17 +15,9 @@ const Index = () => (
     </Helmet>
 
     <div className="landing-page">
-      <ComponentInspector componentName="Header" mfName="provider">
-        <Header />
-      </ComponentInspector>
-
-      <ComponentInspector componentName="Description" mfName="provider">
-        <Description />
-      </ComponentInspector>
-
-      <ComponentInspector componentName="Footer" mfName="provider">
-        <Footer />
-      </ComponentInspector>
+      <Header />
+      <Description />
+      <Footer />
     </div>
   </div>
 );

diff --git a/...te-module-federation/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars b/...te-module-federation/templates/consumer-rsbuild-ts/module-federation.config.ts.handlebars
@@ -0,0 +1,12 @@
+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',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
diff --git a/packages/create-module-federation/templates/consumer-rsbuild-ts/src/App.tsx b/packages/create-module-federation/templates/consumer-rsbuild-ts/src/App.tsx
@@ -1,23 +1,14 @@
 import './App.css';
-import { ComponentInspector } from './components/ComponentInspector';
 import Header from 'provider/Header';
 import Description from 'provider/Description';
 import Footer from 'provider/Footer';
 
 const App = () => {
   return (
     <div className="content">
-      <ComponentInspector componentName="Header" mfName="provider">
-        <Header />
-      </ComponentInspector>
-
-      <ComponentInspector componentName="Description" mfName="provider">
-        <Description />
-      </ComponentInspector>
-
-      <ComponentInspector componentName="Footer" mfName="provider">
-        <Footer />
-      </ComponentInspector>
+      <Header />
+      <Description />
+      <Footer />
     </div>
   );
 };

diff --git a/...es/create-module-federation/templates/modern-common/src/components/ComponentInspector.css b/...es/create-module-federation/templates/modern-common/src/components/ComponentInspector.css