React Bridge（for React v16-v19）#

// ./src/export-app.tsx
import App from './src/App.tsx';
import { createBridgeComponent } from '@module-federation/bridge-react';

export default createBridgeComponent({
  rootComponent: App
});

// ./src/App.tsx
import { createRemoteComponent } from '@module-federation/bridge-react';
import { loadRemote } from '@module-federation/runtime';

// Define FallbackError component
const FallbackErrorComp = ({ error }: { error: Error }) => {
  return (
    <div>
      <h1>Error loading remote component</h1>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>
        resetErrorBoundary(try again)
      </button>
    </div>
  );
};

// Define FallbackLoading component
const FallbackComp = <div data-test-id="loading">loading...</div>;

// Use createRemoteComponent to create remote component
const Remote1App = createRemoteComponent({
  // loader is used to load remote modules, e.g.: loadRemote('remote1/export-app'), import('remote1/export-app')
  loader: () => loadRemote('remote1/export-app'),
  // fallback is used for displaying components when remote module loading fails
  fallback: FallbackErrorComp,
  // loading is used for displaying components when loading remote modules
  loading: FallbackComp,
});

const App = () => {
  return (
    <BrowserRouter basename="/">
      <Routes>
        <Route path="/" Component={Home} />
        <Route
          path="/remote1/*"
          // Use Remote1App component, will be lazy loaded
          Component={() => (
            <Remote1App
              // Set basename for remote application
              basename="/remote1"
              // Other properties will be passed to remote component
              props1={'props_value'}
              props2={'another_props_value'}
            />
          )}
        />
      </Routes>
    </BrowserRouter>
  );
};

/**
 * Create a bridge component for remote loading
 * @param bridgeInfo - Bridge component configuration information
 * @returns Returns a function that provides render and destroy methods
 */
function createBridgeComponent<T>(
  bridgeInfo: ProviderFnParams<T>
): () => {
  render(info: RenderFnParams): Promise<void>;
  destroy(info: DestroyParams): Promise<void>;
};

/**
 * Bridge component configuration information
 */
interface ProviderFnParams<T> {
  /** Root component to be remotely loaded */
  rootComponent: React.ComponentType<T>;
  
  /** 
   * Custom render function for custom rendering logic
   * @param App - React element
   * @param id - DOM element or string ID
   * @returns React root element or Promise
   */
  render?: (
    App: React.ReactElement,
    id?: HTMLElement | string,
  ) => RootType | Promise<RootType>;
  
  /** 
   * Custom createRoot function for React 18 and above
   * @param container - DOM container
   * @param options - CreateRoot options
   * @returns React root node
   */
  createRoot?: (
    container: Element | DocumentFragment,
    options?: CreateRootOptions,
  ) => Root;
  
  /**
   * Default options for createRoot in 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;
}

/**
 * Create remote React component
 * @param options - Remote component configuration options
 * @returns Returns a React component that can receive props and render remote component
 */
function createRemoteComponent<T, E extends keyof T = 'default'>(
  options: RemoteComponentParams<T, E>
): React.ForwardRefExoticComponent<
  React.PropsWithoutRef<RemoteComponentProps> & React.RefAttributes<HTMLDivElement>
>;

/**
 * Remote component configuration parameters
 */
interface RemoteComponentParams<
  T = Record<string, unknown>,
  E extends keyof T = keyof T
> {
  /** 
   * Function to load remote module
   * Example: () => loadRemote('remote1/export-app') or () => import('remote1/export-app')
   */
  loader: () => Promise<T>;
  
  /** Component displayed when loading remote module */
  loading: React.ReactNode;
  
  /** Error component displayed when loading or rendering remote module fails */
  fallback: React.ComponentType<{ error: Error }>;
  
  /** 
   * Specify module export name
   * Default is 'default'
   */
  export?: E;
}

/**
 * Remote component properties
 */
interface RemoteComponentProps<T = Record<string, unknown>> {
  /** Properties passed to remote component */
  props?: T;

  /** 
   * Memory route configuration, used to control child application routing as memoryRouter
   * Will not directly display URL in browser address bar
   */
  memoryRoute?: { entryPath: string };
  
  /** Base path name */
  basename?: string;
  
  /** Style */
  style?: React.CSSProperties;
  
  /** Class name */
  className?: string;
}

// remote
export const provider = createBridgeComponent({
  rootComponent: App
});

// host
const Remote1App = createRemoteComponent({
  loader: () => loadRemote('remote1/export-app'),
  export: 'provider', // Specify to use provider export
  fallback: FallbackErrorComp,
  loading: FallbackComp,
});

function App() {
  return (
    <BrowserRouter basename="/">
      <Routes>
        <Route
          path="/remote1/*"
          Component={() => (
            <Remote1App
              className={styles.remote1}
              style={{ color: 'red' }}
              // Use memoryRoute to control child application routing as memoryRouter
              // Will not directly display URL in browser address bar
              memoryRoute={{ entryPath: '/detail' }}
              // Other properties will be passed to remote component
              props1={'props_value'}
              props2={'another_props_value'}
              ref={ref}
            />
          )}
        />
      </Routes>
    </BrowserRouter>
  );
}

import { createBridgeComponent } from '@module-federation/bridge-react';

export default createBridgeComponent({
  rootComponent: App,
  // Set default createRoot options for all instances using this component
  defaultRootOptions: {
    identifierPrefix: 'my-app-',
    onRecoverableError: (error) => {
      console.error('Recoverable rendering error:', error);
    }
  }
});

// In the consumer application
const RemoteApp = createRemoteComponent({
  url: 'http://localhost:3001/remoteEntry.js',
  scope: 'remote',
  module: './App',
});

// Pass rootOptions when rendering
<RemoteApp 
  props={{ message: 'Hello' }} 
  rootOptions={{
    identifierPrefix: 'instance-',
    onRecoverableError: (error) => {
      console.error('Recoverable error for this instance:', error);
    }
  }}
/>