@module-federation/bridge-react 0.21.5 → 0.22.0

package/src/remote/createHelpers.tsx

@@ -0,0 +1,130 @@
+import React, { forwardRef } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { LoggerInstance } from '../utils';
+import {
+  RemoteComponentParams,
+  RemoteComponentProps,
+  RemoteModule,
+} from '../types';
+
+export type LazyRemoteComponentInfo<
+  T,
+  _E extends keyof T,
+> = RemoteComponentParams<T>;
+
+/**
+ * Creates a factory function for creating lazy remote components
+ * @param RemoteApp The RemoteAppWrapper component to use (with or without router)
+ */
+export function createLazyRemoteComponentFactory(
+  RemoteApp: React.ComponentType<any>,
+) {
+  return 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;
+      }
+    });
+  };
+}
+
+/**
+ * Creates a factory function for creating remote app components
+ * @param RemoteApp The RemoteAppWrapper component to use (with or without router)
+ */
+export function createRemoteAppComponentFactory(
+  RemoteApp: React.ComponentType<any>,
+) {
+  const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+
+  return 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>
+      );
+    });
+  };
+}
+
+/**
+ * Creates the deprecated createRemoteComponent function
+ */
+export function createDeprecatedRemoteComponentFactory<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(createFn: (info: LazyRemoteComponentInfo<T, E>) => any) {
+  return function createRemoteComponent(info: LazyRemoteComponentInfo<T, E>) {
+    LoggerInstance.warn(
+      `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`,
+    );
+    return createFn(info);
+  };
+}

package/src/remote/{component.tsx → router-component/component.tsx}

@@ -1,115 +1,8 @@
-import React, {
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  forwardRef,
-} from 'react';
+import React, { useContext, useEffect, useState, forwardRef } from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
-import { LoggerInstance, pathJoin, getRootDomDefaultClassName } from '../utils';
-import { federationRuntime } from '../provider/plugin';
-import { RemoteComponentProps, RemoteAppParams } from '../types';
-
-const RemoteAppWrapper = forwardRef(function (
-  props: RemoteAppParams & RemoteComponentProps,
-  ref,
-) {
-  const {
-    moduleName,
-    memoryRoute,
-    basename,
-    providerInfo,
-    className,
-    style,
-    fallback,
-    loading,
-    ...resProps
-  } = props;
-
-  const instance = federationRuntime.instance;
-  const rootRef: React.MutableRefObject<HTMLDivElement | null> =
-    ref && 'current' in ref
-      ? (ref as React.MutableRefObject<HTMLDivElement | null>)
-      : useRef(null);
-
-  const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
-  const providerInfoRef = useRef<any>(null);
-  const [initialized, setInitialized] = useState(false);
-
-  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
-
-  // 初始化远程组件
-  useEffect(() => {
-    if (initialized) return;
-    const providerReturn = providerInfo();
-    providerInfoRef.current = providerReturn;
-    setInitialized(true);
-
-    return () => {
-      if (providerInfoRef.current?.destroy) {
-        LoggerInstance.debug(
-          `createRemoteAppComponent LazyComponent destroy >>>`,
-          { moduleName, basename, dom: renderDom.current },
-        );
-
-        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps,
-        });
-
-        providerInfoRef.current?.destroy({
-          moduleName,
-          dom: renderDom.current,
-        });
-
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps,
-        });
-      }
-    };
-  }, [moduleName]);
-
-  // trigger render after props updated
-  useEffect(() => {
-    if (!initialized || !providerInfoRef.current) return;
-
-    let renderProps = {
-      moduleName,
-      dom: rootRef.current,
-      basename,
-      memoryRoute,
-      fallback,
-      ...resProps,
-    };
-    renderDom.current = rootRef.current;
-
-    const beforeBridgeRenderRes =
-      instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(renderProps) ||
-      {};
-    // @ts-ignore
-    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-    providerInfoRef.current.render(renderProps);
-    instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
-  }, [initialized, ...Object.values(props)]);
-
-  // bridge-remote-root
-  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ''}`;
-  return (
-    <div className={rootComponentClassName} style={style} ref={rootRef}>
-      {loading}
-    </div>
-  );
-});
+import { LoggerInstance, pathJoin } from '../../utils';
+import { RemoteAppWrapper } from '../RemoteAppWrapper';
 
 interface ExtraDataProps {
   basename?: string;

package/src/remote/router-component/create.tsx

@@ -0,0 +1,23 @@
+import RemoteApp from './component';
+import {
+  createLazyRemoteComponentFactory,
+  createRemoteAppComponentFactory,
+  createDeprecatedRemoteComponentFactory,
+  type LazyRemoteComponentInfo,
+} from '../createHelpers';
+
+export type { LazyRemoteComponentInfo };
+
+const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+
+export const createRemoteAppComponent =
+  createRemoteAppComponentFactory(RemoteApp);
+
+/**
+ * @deprecated createRemoteComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export const createRemoteComponent = createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent,
+);
+
+export { createLazyRemoteComponent };

package/src/remote/router-component/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Default entry point with React Router support
+ * Re-exports from router/create.tsx
+ */
+export {
+  createRemoteAppComponent,
+  createRemoteComponent,
+  createLazyRemoteComponent,
+  type LazyRemoteComponentInfo,
+} from './create';

package/vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
     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'),

package/src/remote/create.tsx

@@ -1,106 +0,0 @@
-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';
-
-export 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);
-}