@module-federation/bridge-react 0.0.0-fix-lazy-comile-20250925082726

package/src/remote/create.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { LoggerInstance } from '../utils';
+import RemoteApp from './component';
+import {
+  RemoteComponentParams,
+  RemoteComponentProps,
+  RemoteModule,
+} from '../types';
+
+type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
+
+function createLazyRemoteComponent<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo<T, E>) {
+  const exportName = info?.export || 'default';
+  return React.lazy(async () => {
+    LoggerInstance.debug(`createRemoteAppComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName,
+    });
+
+    try {
+      const m = (await info.loader()) as RemoteModule;
+      // @ts-ignore
+      const moduleName = m && m[Symbol.for('mf_module_id')];
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m, exportName },
+      );
+
+      // @ts-ignore
+      const exportFn = m[exportName];
+      if (exportName in m && typeof exportFn === 'function') {
+        const RemoteAppComponent = forwardRef<
+          HTMLDivElement,
+          RemoteComponentProps
+        >((props, ref) => {
+          return (
+            <RemoteApp
+              // change `name` key to `moduleName` to avoid same property `name` passed by user's props which may cause unexpected issues.
+              moduleName={moduleName}
+              providerInfo={exportFn}
+              exportName={info.export || 'default'}
+              fallback={info.fallback}
+              loading={info.loading}
+              ref={ref}
+              {...props}
+            />
+          );
+        });
+
+        return {
+          default: RemoteAppComponent,
+        };
+      } else {
+        LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m, exportName },
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName,
+          )}`,
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
+
+export function createRemoteAppComponent<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo<T, E>) {
+  const LazyComponent = createLazyRemoteComponent(info);
+  return forwardRef<HTMLDivElement, RemoteComponentProps>((props, ref) => {
+    return (
+      <ErrorBoundary
+        FallbackComponent={info.fallback as React.ComponentType<FallbackProps>}
+      >
+        <React.Suspense fallback={info.loading}>
+          <LazyComponent {...props} ref={ref} />
+        </React.Suspense>
+      </ErrorBoundary>
+    );
+  });
+}
+
+/**
+ * @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export function createRemoteComponent<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo<T, E>) {
+  LoggerInstance.warn(
+    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`,
+  );
+  return createRemoteAppComponent(info);
+}

package/src/router/default.tsx

@@ -0,0 +1,73 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+import * as ReactRouterDom from 'react-router-dom/';
+import { RouterContext } from '../provider/context';
+import { LoggerInstance } from '../utils';
+
+function WrapperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.debug(`WrapperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WrapperRouterProps: props,
+  });
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+function WrapperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.debug(`WrapperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WrapperRouterProviderProps: 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, {
+      basename: routerContextProps.basename || router?.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+export * from 'react-router-dom/';
+
+export { WrapperRouter as BrowserRouter };
+export { WrapperRouterProvider as RouterProvider };

package/src/router/v5.tsx

@@ -0,0 +1,43 @@
+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:
+    | 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}
+    />
+  );
+}
+
+// @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

@@ -0,0 +1,74 @@
+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/types.ts

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

@@ -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,87 @@
+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'),
+        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'),
+        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-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-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),
+  },
+});