@module-federation/bridge-react 2.3.2 → 2.4.0

package/src/router/v5.tsx

@@ -1,43 +0,0 @@
-import React, { useContext } from 'react';
-// The upper alias react-router-dom$ into this file avoids the loop
-// @ts-ignore
-import * as ReactRouterDom from 'react-router-dom/index.js';
-import { RouterContext } from '../provider/context';
-import { LoggerInstance } from '../utils';
-
-function WraperRouter(props: Record<string, unknown>) {
-  const { basename, ...propsRes } = props;
-  const routerContextProps = useContext(RouterContext) || {};
-  const MemoryRouter =
-    ReactRouterDom.MemoryRouter as unknown as React.ComponentType<any>;
-  const BrowserRouter =
-    ReactRouterDom.BrowserRouter as unknown as React.ComponentType<any>;
-
-  LoggerInstance.debug(`WraperRouter info >>>`, {
-    ...routerContextProps,
-    routerContextProps,
-    WraperRouterProps: props,
-  });
-
-  if (routerContextProps?.memoryRoute) {
-    return (
-      <MemoryRouter
-        {...props}
-        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
-      />
-    );
-  }
-  return (
-    <BrowserRouter
-      {...propsRes}
-      basename={routerContextProps?.basename || basename}
-    />
-  );
-}
-
-// @ts-ignore
-// because export directly from react-router-dom/index.js will cause build falied.
-// it will be replace by react-router-dom/index.js in building phase
-export * from 'react-router-dom/';
-
-export { WraperRouter as BrowserRouter };

package/src/router/v6.tsx

@@ -1,74 +0,0 @@
-import React, { useContext } from 'react';
-// The upper alias react-router-dom$ into this file avoids the loop
-import * as ReactRouterDom from 'react-router-dom/dist/index.js';
-import { RouterContext } from '../provider/context';
-import { LoggerInstance } from '../utils';
-
-function WraperRouter(
-  props:
-    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
-    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
-) {
-  const { basename, ...propsRes } = props;
-  const routerContextProps = useContext(RouterContext) || {};
-
-  LoggerInstance.debug(`WraperRouter info >>>`, {
-    ...routerContextProps,
-    routerContextProps,
-    WraperRouterProps: props,
-  });
-
-  if (routerContextProps?.memoryRoute) {
-    return (
-      <ReactRouterDom.MemoryRouter
-        {...props}
-        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
-      />
-    );
-  }
-  return (
-    <ReactRouterDom.BrowserRouter
-      {...propsRes}
-      basename={routerContextProps?.basename || basename}
-    />
-  );
-}
-
-function WraperRouterProvider(
-  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
-) {
-  const { router, ...propsRes } = props;
-  const routerContextProps = useContext(RouterContext) || {};
-  const routers = router.routes;
-  LoggerInstance.debug(`WraperRouterProvider info >>>`, {
-    ...routerContextProps,
-    routerContextProps,
-    WraperRouterProviderProps: props,
-    router,
-  });
-  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
-  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
-  const createBrowserRouter = (ReactRouterDom as any)[
-    'create' + 'BrowserRouter'
-  ];
-
-  if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = createMemoryRouter(routers, {
-      initialEntries: [routerContextProps?.memoryRoute.entryPath],
-    });
-    return <RouterProvider router={MemeoryRouterInstance} />;
-  } else {
-    const BrowserRouterInstance = createBrowserRouter(routers, {
-      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
-      basename: routerContextProps.basename || router.basename,
-      future: router.future,
-      window: router.window,
-    });
-    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
-  }
-}
-
-// export * from 'react-router-dom/dist/index.js';
-export * from 'react-router-dom/';
-export { WraperRouter as BrowserRouter };
-export { WraperRouterProvider as RouterProvider };

package/src/router/v7.tsx

@@ -1,75 +0,0 @@
-import React, { useContext } from 'react';
-// The upper alias react-router$ into this file avoids the loop
-// React Router v7 uses different dist structure, we'll import from the main entry
-import * as ReactRouterDom from 'react-router';
-import { RouterContext } from '../provider/context';
-import { LoggerInstance } from '../utils';
-
-function WraperRouter(props: Record<string, unknown>) {
-  const { basename, ...propsRes } = props;
-  const routerContextProps = useContext(RouterContext) || {};
-  const MemoryRouter =
-    ReactRouterDom.MemoryRouter as unknown as React.ComponentType<any>;
-  const BrowserRouter =
-    ReactRouterDom.BrowserRouter as unknown as React.ComponentType<any>;
-
-  LoggerInstance.debug(`WraperRouter info >>>`, {
-    ...routerContextProps,
-    routerContextProps,
-    WraperRouterProps: props,
-  });
-
-  if (routerContextProps?.memoryRoute) {
-    return (
-      <MemoryRouter
-        {...props}
-        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
-      />
-    );
-  }
-  return (
-    <BrowserRouter
-      {...propsRes}
-      basename={routerContextProps?.basename || basename}
-    />
-  );
-}
-
-function WraperRouterProvider(props: Record<string, unknown>) {
-  const { router, ...propsRes } = props as { router: any };
-  const routerContextProps = useContext(RouterContext) || {};
-  const routers = router.routes;
-  LoggerInstance.debug(`WraperRouterProvider info >>>`, {
-    ...routerContextProps,
-    routerContextProps,
-    WraperRouterProviderProps: props,
-    router,
-  });
-  const RouterProvider = (ReactRouterDom as any)[
-    'Router' + 'Provider'
-  ] as React.ComponentType<any>;
-  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
-  const createBrowserRouter = (ReactRouterDom as any)[
-    'create' + 'BrowserRouter'
-  ];
-
-  if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = createMemoryRouter(routers, {
-      initialEntries: [routerContextProps?.memoryRoute.entryPath],
-    });
-    return <RouterProvider router={MemeoryRouterInstance} />;
-  } else {
-    const BrowserRouterInstance = createBrowserRouter(routers, {
-      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
-      basename: routerContextProps.basename || router.basename,
-      future: router.future,
-      window: router.window,
-    });
-    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
-  }
-}
-
-// Export all from react-router for v7 compatibility
-export * from 'react-router';
-export { WraperRouter as BrowserRouter };
-export { WraperRouterProvider as RouterProvider };

package/src/types.ts

@@ -1,147 +0,0 @@
-import * as React from 'react';
-import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
-
-/**
- * Options for creating a React root
- */
-export interface CreateRootOptions {
-  identifierPrefix?: string;
-  onRecoverableError?: (error: unknown) => void;
-  transitionCallbacks?: unknown;
-}
-
-/**
- * Interface for a React root object
- */
-export interface Root {
-  render(children: React.ReactNode): void;
-  unmount(): void;
-}
-
-/**
- * Type for a root element, which can be either an HTMLElement or a React root
- */
-export type RootType = HTMLElement | Root;
-
-/**
- * Parameters for the render function
- */
-export interface RenderParams {
-  moduleName?: string;
-  basename?: string;
-  memoryRoute?: {
-    entryPath: string;
-    initialState?: Record<string, unknown>;
-  };
-  dom: HTMLElement;
-  /**
-   * Options to pass to createRoot for React 18 and 19
-   * @example
-   * {
-   *   identifierPrefix: 'app-',
-   *   onRecoverableError: (err) => console.error(err)
-   * }
-   */
-  rootOptions?: CreateRootOptions;
-  [key: string]: unknown;
-}
-
-/**
- * Parameters for the destroy function
- */
-export interface DestroyParams {
-  moduleName: string;
-  dom: HTMLElement;
-}
-
-/**
- * Parameters for the provider function
- */
-export interface ProviderParams {
-  moduleName?: string;
-  basename?: string;
-  memoryRoute?: {
-    entryPath: string;
-    initialState?: Record<string, unknown>;
-  };
-  style?: React.CSSProperties;
-  className?: string;
-}
-
-/**
- * Parameters for the render function, extending ProviderParams
- */
-export interface RenderFnParams extends ProviderParams {
-  dom: HTMLElement;
-  fallback?: React.ComponentType<{ error: Error }>;
-  [key: string]: unknown;
-}
-
-/**
- * Parameters for the provider function
- */
-export interface ProviderFnParams<T> {
-  rootComponent: React.ComponentType<T>;
-  render?: (
-    App: React.ReactElement,
-    id?: HTMLElement | string,
-  ) => RootType | Promise<RootType>;
-  createRoot?: (
-    container: Element | DocumentFragment,
-    options?: CreateRootOptions,
-  ) => Root;
-  /**
-   * Default options to pass to createRoot for React 18 and 19
-   * These options will be used when creating a root unless overridden by rootOptions in render params
-   * @example
-   * {
-   *   identifierPrefix: 'app-',
-   *   onRecoverableError: (err) => console.error(err)
-   * }
-   */
-  defaultRootOptions?: CreateRootOptions;
-}
-
-/**
- * Parameters for the remote component
- */
-export interface RemoteComponentProps<T = Record<string, unknown>> {
-  props?: T;
-  fallback?: React.ComponentType<{ error: Error }>;
-  loading?: React.ReactNode;
-  [key: string]: unknown;
-}
-
-/**
- * Parameters for the remote component loader
- */
-export interface RemoteComponentParams<
-  T = Record<string, unknown>,
-  E extends keyof T = keyof T,
-> {
-  loader: () => Promise<T>;
-  loading: React.ReactNode;
-  fallback: React.ComponentType<{ error: Error }>;
-  export?: E;
-  props?: T;
-}
-
-/**
- * Interface for a remote module provider
- */
-export interface RemoteModule {
-  provider: () => {
-    render: (info: RenderFnParams) => void;
-    destroy: (info: { dom: any }) => void;
-  };
-}
-
-/**
- * Parameters for a remote app component
- */
-export interface RemoteAppParams extends ProviderParams {
-  moduleName: string;
-  providerInfo: NonNullable<RemoteModule['provider']>;
-  exportName: string | number | symbol;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-}

package/src/utils/index.ts

@@ -1,44 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,42 +0,0 @@
-{
-  "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

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

package/tsconfig.spec.json

@@ -1,26 +0,0 @@
-{
-  "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

@@ -1,112 +0,0 @@
-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

@@ -1,27 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import tsconfigPaths from 'vite-tsconfig-paths';
-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(), tsconfigPaths()],
-  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')],
-  },
-});