@module-federation/bridge-react 0.0.0-docs-remove-invalid-lark-link-20251205062649

package/src/utils/index.ts

@@ -0,0 +1,44 @@
+import { createLogger } from '@module-federation/sdk';
+
+export const LoggerInstance = createLogger(
+  '[ Module Federation Bridge React ]',
+);
+
+export function pathJoin(...args: string[]) {
+  const res = args.reduce((res, path: string) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== 'string') {
+      return res;
+    }
+    if (nPath[0] !== '/') {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === '/') {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res + nPath;
+  }, '');
+  return res || '/';
+}
+
+export const getModuleName = (id: string) => {
+  if (!id) {
+    return id;
+  }
+  // separate module name without detailed module path
+  // @vmok-e2e/edenx-demo-app2/button -> @vmok-e2e/edenx-demo-app2
+  const idArray = id.split('/');
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + '/' + idArray[1];
+};
+
+export const getRootDomDefaultClassName = (moduleName: string) => {
+  if (!moduleName) {
+    return '';
+  }
+  const name = getModuleName(moduleName).replace(/\@/, '').replace(/\//, '-');
+  return `bridge-root-component-${name}`;
+};

package/src/v18.ts

@@ -0,0 +1,9 @@
+export { createBridgeComponent } from './provider/versions/v18';
+export type { CreateRootOptions, Root } from './provider/versions/v18';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+} from './types';

package/src/v19.ts

@@ -0,0 +1,9 @@
+export { createBridgeComponent } from './provider/versions/v19';
+export type { CreateRootOptions, Root } from './provider/versions/v19';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+} from './types';

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+
+    /* Bundler mode */
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+
+    "declarationDir": "./dist/types",
+    "rootDir": "./src",
+    "module": "commonjs",
+    "target": "es2015",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"],
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/remoteApp.tsx",
+    "src/create.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "jsx": "react-jsx",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.test.js",
+    "**/*.test.jsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts",
+    "__tests__/**/*"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,112 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import dts from 'vite-plugin-dts';
+import packageJson from './package.json';
+
+const perDepsKeys = Object.keys(packageJson.peerDependencies);
+
+export default defineConfig({
+  plugins: [
+    // 添加我们的自定义插件
+    dts({
+      rollupTypes: true,
+      bundledPackages: [
+        '@module-federation/bridge-shared',
+        'react-error-boundary',
+      ],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, 'src/index.ts'),
+        base: path.resolve(__dirname, 'src/base.ts'),
+        plugin: path.resolve(__dirname, 'src/provider/plugin.ts'),
+        router: path.resolve(__dirname, 'src/router/default.tsx'),
+        'router-v5': path.resolve(__dirname, 'src/router/v5.tsx'),
+        'router-v6': path.resolve(__dirname, 'src/router/v6.tsx'),
+        'router-v7': path.resolve(__dirname, 'src/router/v7.tsx'),
+        v18: path.resolve(__dirname, 'src/v18.ts'),
+        v19: path.resolve(__dirname, 'src/v19.ts'),
+        'lazy-load-component-plugin': path.resolve(
+          __dirname,
+          'src/plugins/lazy-load-component-plugin.ts',
+        ),
+        'data-fetch-server-middleware': path.resolve(
+          __dirname,
+          'src/lazy/data-fetch/data-fetch-server-middleware.ts',
+        ),
+        'lazy-utils': path.resolve(__dirname, 'src/lazy/utils.ts'),
+        'data-fetch-utils': path.resolve(
+          __dirname,
+          'src/lazy/data-fetch/index.ts',
+        ),
+      },
+      formats: ['cjs', 'es'],
+      fileName: (format, entryName) => `${entryName}.${format}.js`,
+    },
+    rollupOptions: {
+      external: [
+        ...perDepsKeys,
+        '@remix-run/router',
+        /react-dom\/.*/,
+        'react-router',
+        'react-router/',
+        'react-router/index.js',
+        'react-router/dist/index.js',
+        'react-router/dist/development/index.js',
+        'react-router/dist/production/index.js',
+        /^react-router\/.*/,
+        'react-router-dom/',
+        'react-router-dom/index.js',
+        'react-router-dom/dist/index.js',
+      ],
+      plugins: [
+        {
+          name: 'modify-output-plugin',
+          generateBundle(options, bundle) {
+            for (const fileName in bundle) {
+              const chunk = bundle[fileName];
+              if (fileName.includes('router-v6') && chunk.type === 'chunk') {
+                chunk.code = chunk.code.replace(
+                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
+                  /react-router-dom\/(?=[\'\"\`])/g,
+                  'react-router-dom/dist/index.js',
+                );
+              }
+
+              if (fileName.includes('router-v7') && chunk.type === 'chunk') {
+                // Replace 'react-router' with the correct v7 dist path based on environment
+                const isProduction = process.env.NODE_ENV === 'production';
+                const distPath = isProduction
+                  ? 'react-router/dist/production/index.js'
+                  : 'react-router/dist/development/index.js';
+
+                chunk.code = chunk.code.replace(
+                  /from\s+['"`]react-router['"`]/g,
+                  `from '${distPath}'`,
+                );
+                chunk.code = chunk.code.replace(
+                  /export\s+\*\s+from\s+['"`]react-router['"`]/g,
+                  `export * from '${distPath}'`,
+                );
+              }
+
+              if (fileName.includes('router-v5') && chunk.type === 'chunk') {
+                chunk.code = chunk.code.replace(
+                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v5 dist file structure
+                  /react-router-dom\/(?=[\'\"\`])/g,
+                  'react-router-dom/index.js',
+                );
+              }
+            }
+          },
+        },
+      ],
+    },
+    minify: false,
+  },
+  define: {
+    __APP_VERSION__: JSON.stringify(packageJson.version),
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vitest/config';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+export default defineConfig({
+  define: {
+    __DEV__: true,
+    __TEST__: true,
+    __BROWSER__: false,
+    __VERSION__: '"unknown"',
+    __APP_VERSION__: '"0.0.0"',
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
+  },
+  plugins: [react(), nxViteTsPaths()],
+  test: {
+    environment: 'jsdom',
+    include: [
+      path.resolve(__dirname, '__tests__/*.spec.ts'),
+      path.resolve(__dirname, '__tests__/*.spec.tsx'),
+    ],
+    globals: true,
+    testTimeout: 10000,
+    setupFiles: [path.resolve(__dirname, '__tests__/setupTests.ts')],
+  },
+});