create-module-federation 0.0.0 → 0.11.0

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"
+  ]
+}

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

@@ -0,0 +1,88 @@
+{
+  "files.associations": {
+    ".code-workspace": "jsonc",
+    ".stylelintrc": "jsonc",
+    "stylelintrc": "jsonc",
+    "README": "markdown"
+  },
+  "search.useIgnoreFiles": true,
+  "search.exclude": {
+    "**/dist": true,
+    "**/*.log": true,
+    "**/*.pid": true,
+    "**/.git": true,
+    "**/node_modules": true
+  },
+  //
+  "editor.rulers": [80, 120],
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  //
+  "cSpell.diagnosticLevel": "Hint",
+  "javascript.validate.enable": false,
+  "typescript.validate.enable": true,
+  "css.validate": false,
+  "scss.validate": false,
+  "less.validate": false,
+  "[css]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "[scss]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "[less]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit"
+  },
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "emmet.triggerExpansionOnTab": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/templates/modern-common/README.md

@@ -0,0 +1,37 @@
+# Modern.js App
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Enable optional features or add a new entry:
+
+```bash
+pnpm new
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm serve
+```
+
+For more information, see the [Modern.js documentation](https://modernjs.dev/en).

package/templates/modern-common/biome.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "vcs": {
+    "enabled": true,
+    "defaultBranch": "main",
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "arrowParentheses": "asNeeded",
+      "jsxQuoteStyle": "double",
+      "lineWidth": 80
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "ignore": [".vscode/**/*", "node_modules/**/*", "dist/**/*"]
+  }
+}

package/templates/modern-common/package.json.handlebars

@@ -0,0 +1,45 @@
+{
+  "name": "{{ mfName }}",
+  "version": "0.1.0",
+  "scripts": {
+    "reset": "npx rimraf node_modules ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "biome check",
+    "prepare": "simple-git-hooks",
+    "upgrade": "modern upgrade"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
+      "biome check --files-ignore-unknown=true"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "dependencies": {
+    "@modern-js/runtime": "^2.65.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "^2.65.1",
+    "@modern-js/tsconfig": "^2.65.1",
+    "@biomejs/biome": "1.8.3",
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.2.4",
+    "@types/node": "~18.11.9",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "lint-staged": "~13.1.0",
+    "simple-git-hooks": "^2.11.1",
+    "rimraf": "^6.0.1",
+    "@module-federation/modern-js":"^{{mfVersion}}"
+  }
+}

package/templates/modern-common/src/modern-app-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types='@modern-js/app-tools/types' />
+/// <reference types='@modern-js/runtime/types' />
+/// <reference types='@modern-js/runtime/types/router' />

package/templates/modern-common/src/modern.runtime.ts

@@ -0,0 +1,3 @@
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+export default defineRuntimeConfig({});

package/templates/modern-common/src/routes/index.css

@@ -0,0 +1,41 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
+  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.container-box {
+  min-height: 100vh;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+
+.landing-page {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

package/templates/modern-common/src/routes/layout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from '@modern-js/runtime/router';
+
+export default function Layout() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}

package/templates/modern-common/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"],
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src", "shared", "config", "modern.config.ts"],
+  "exclude": ["**/node_modules"]
+}

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

@@ -0,0 +1,18 @@
+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(),
+  ],
+  server: {
+    port: 3001,
+  },
+});

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

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  exposes: {
+    '.': './src/components/ProviderComponent.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

package/templates/provider-modern-ts/src/components/ProviderComponent.css

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  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/provider-modern-ts/src/components/ProviderComponent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './ProviderComponent.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/provider-modern-ts/src/routes/page.tsx

@@ -0,0 +1,21 @@
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+import Provider from '../components/ProviderComponent';
+
+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/provider-rsbuild-ts/module-federation.config.ts.handlebars

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
+
+export default createModuleFederationConfig({
+  name: '{{mfName}}',
+  exposes: {
+    '.': './src/components/ProviderComponent.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

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

@@ -0,0 +1,11 @@
+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)],
+  server: {
+    port: 3001,
+  },
+});

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

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

package/templates/provider-rsbuild-ts/src/components/ProviderComponent.css

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  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/provider-rsbuild-ts/src/components/ProviderComponent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './ProviderComponent.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/provider-rslib-storybook-ts/.storybook/main.ts.handlebars

@@ -0,0 +1,41 @@
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  framework: {
+    name: getAbsolutePath('storybook-react-rsbuild'),
+    options: {},
+  },
+  addons: [
+    {
+      name: getAbsolutePath('storybook-addon-rslib'),
+      options: {
+        rslib: {
+          include: ['**/stories/**'],
+        },
+      },
+    },
+    {
+      name: '@module-federation/storybook-addon/preset',
+      options: {
+        remotes: {
+          provider: '{{mfName}}@http://localhost:3001/mf-manifest.json',
+        },
+      },
+    },
+  ],
+};
+
+export default config;