@module-federation/bridge-react 0.0.0-next-20250208084948 → 0.0.0-next-20250214035103

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250208084948
+## 0.0.0-next-20250214035103
 
 ### Patch Changes
 
-- c3387db: fix: the bridge-react package was failing when used with React 16 due to missing react-dom/client module
-  - @module-federation/sdk@0.0.0-next-20250208084948
-  - @module-federation/bridge-shared@0.0.0-next-20250208084948
+- 4ef21d2: chore: adjust bridge-react to structure directory
+- Updated dependencies [cb463da]
+  - @module-federation/sdk@0.0.0-next-20250214035103
+  - @module-federation/bridge-shared@0.0.0-next-20250214035103
+
+## 0.8.11
+
+### Patch Changes
+
+- 646314d: fix: the bridge-react package was failing when used with React 16 due to missing react-dom/client module
+  - @module-federation/sdk@0.8.11
+  - @module-federation/bridge-shared@0.8.11
 
 ## 0.8.10
 

package/__tests__/router.spec.tsx

@@ -8,8 +8,8 @@ import {
   Outlet,
   createBrowserRouter,
 } from 'react-router-dom';
-import { BrowserRouter, RouterProvider } from '../src/router';
-import { RouterContext } from '../src/context';
+import { BrowserRouter, RouterProvider } from '../src/router/default';
+import { RouterContext } from '../src/provider/context';
 import { getHtml, getWindowImpl } from './util';
 
 describe('react router proxy', () => {

package/dist/index.cjs.js

@@ -1,26 +1,4 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const context = require("./context-BwD5jfgB.cjs");
@@ -234,7 +212,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.8.10";
+  RemoteApp2["__APP_VERSION__"] = "0.8.11";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -365,6 +343,20 @@ function createRemoteComponent(info) {
     }
   );
 }
+const isReact18 = ReactDOM.version.startsWith("18");
+function createRoot(container, options) {
+  if (isReact18) {
+    return ReactDOM.createRoot(container, options);
+  }
+  return {
+    render(children) {
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -414,13 +406,9 @@ function createBridgeComponent(bridgeInfo) {
             bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
           ).then((root) => rootMap.set(info.dom, root));
         } else {
-          import("react-dom/client").then(
-            (ReactDOMClient) => {
-              const root = ReactDOMClient.createRoot(info.dom);
-              root.render(rootComponentWithErrorBoundary);
-              rootMap.set(info.dom, root);
-            }
-          );
+          const root = createRoot(info.dom);
+          root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },

package/dist/index.es.js

@@ -193,7 +193,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.8.10";
+  RemoteApp2["__APP_VERSION__"] = "0.8.11";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -324,6 +324,20 @@ function createRemoteComponent(info) {
     }
   );
 }
+const isReact18 = ReactDOM.version.startsWith("18");
+function createRoot(container, options) {
+  if (isReact18) {
+    return ReactDOM.createRoot(container, options);
+  }
+  return {
+    render(children) {
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -373,13 +387,9 @@ function createBridgeComponent(bridgeInfo) {
             bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
           ).then((root) => rootMap.set(info.dom, root));
         } else {
-          import("react-dom/client").then(
-            (ReactDOMClient) => {
-              const root = ReactDOMClient.createRoot(info.dom);
-              root.render(rootComponentWithErrorBoundary);
-              rootMap.set(info.dom, root);
-            }
-          );
+          const root = createRoot(info.dom);
+          root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250208084948",
+  "version": "0.0.0-next-20250214035103",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250208084948",
-    "@module-federation/sdk": "0.0.0-next-20250208084948"
+    "@module-federation/bridge-shared": "0.0.0-next-20250214035103",
+    "@module-federation/sdk": "0.0.0-next-20250214035103"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -68,7 +68,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250208084948"
+    "@module-federation/runtime": "0.0.0-next-20250214035103"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -1,5 +1,5 @@
-export { createRemoteComponent } from './create';
-export { createBridgeComponent } from './provider';
+export { createRemoteComponent } from './remote/create';
+export { createBridgeComponent } from './provider/create';
 export type {
   ProviderParams,
   RenderFnParams,

package/src/{compat.ts → provider/compat.ts}

@@ -11,7 +11,6 @@ interface Root {
   unmount(): void;
 }
 
-// Check if we're running React 18
 const isReact18 = ReactDOM.version.startsWith('18');
 
 /**
@@ -27,9 +26,10 @@ export function createRoot(
     return (ReactDOM as any).createRoot(container, options);
   }
 
-  // For React 16, simulate the new root API using render/unmountComponentAtNode
+  // For React 16/17, simulate the new root API using render/unmountComponentAtNode
   return {
     render(children: React.ReactNode) {
+      // @ts-ignore - React 17's render method is deprecated but still functional
       ReactDOM.render(children, container);
     },
     unmount() {
@@ -52,9 +52,10 @@ export function hydrateRoot(
     return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
   }
 
-  // For React 16, simulate the new root API using hydrate
+  // For React 16/17, simulate the new root API using hydrate
   return {
     render(children: React.ReactNode) {
+      // @ts-ignore - React 17's hydrate method is deprecated but still functional
       ReactDOM.hydrate(children, container);
     },
     unmount() {

package/src/{provider.tsx → provider/create.tsx}

@@ -6,7 +6,7 @@ import type {
 } from '@module-federation/bridge-shared';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
-import { LoggerInstance } from './utils';
+import { LoggerInstance } from '../utils';
 import { federationRuntime } from './plugin';
 import { createRoot } from './compat';
 
@@ -86,14 +86,9 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
             bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
           ).then((root: RootType) => rootMap.set(info.dom, root));
         } else {
-          // Dynamically import react-dom/client
-          import('react-dom/client').then(
-            (ReactDOMClient: typeof import('react-dom/client')) => {
-              const root = ReactDOMClient.createRoot(info.dom);
-              root.render(rootComponentWithErrorBoundary);
-              rootMap.set(info.dom, root);
-            },
-          );
+          const root = createRoot(info.dom);
+          root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
 
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};

package/src/{plugin.ts → provider/plugin.ts}

@@ -1,5 +1,7 @@
-import type { FederationRuntimePlugin } from '@module-federation/runtime';
-import type { FederationHost } from '@module-federation/runtime';
+import type {
+  FederationRuntimePlugin,
+  FederationHost,
+} from '@module-federation/runtime';
 
 export type FederationRuntimeType = {
   instance: FederationHost | null;

package/src/remote/{index.tsx → component.tsx}

@@ -10,7 +10,7 @@ import type { ProviderParams } from '@module-federation/bridge-shared';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
 import { LoggerInstance, pathJoin, getRootDomDefaultClassName } from '../utils';
-import { federationRuntime } from '../plugin';
+import { federationRuntime } from '../provider/plugin';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {

package/src/{create.tsx → remote/create.tsx}

@@ -3,8 +3,8 @@ import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
-import { LoggerInstance } from './utils';
-import RemoteApp from './remote';
+import { LoggerInstance } from '../utils';
+import RemoteApp from './component';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 
 export interface RenderFnParams extends ProviderParams {

package/src/{router.tsx → router/default.tsx}

@@ -1,8 +1,8 @@
 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 './context';
-import { LoggerInstance } from './utils';
+import { RouterContext } from '../provider/context';
+import { LoggerInstance } from '../utils';
 
 function WrapperRouter(
   props:

package/src/{router-v5.tsx → router/v5.tsx}

@@ -2,8 +2,8 @@ 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 './context';
-import { LoggerInstance } from './utils';
+import { RouterContext } from '../provider/context';
+import { LoggerInstance } from '../utils';
 
 function WraperRouter(
   props:

package/src/{router-v6.tsx → router/v6.tsx}

@@ -1,9 +1,8 @@
 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 './context';
-import { LoggerInstance } from './utils';
+import { RouterContext } from '../provider/context';
+import { LoggerInstance } from '../utils';
 
 function WraperRouter(
   props:

package/src/{utils.ts → utils/index.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createLogger } from '@module-federation/sdk';
+import { createLogger } from '@module-federation/sdk/logger';
 
 export const LoggerInstance = createLogger(
   '[ Module Federation Bridge React ]',

package/vite.config.ts

@@ -21,10 +21,10 @@ export default defineConfig({
     lib: {
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
-        plugin: path.resolve(__dirname, 'src/plugin.ts'),
-        router: path.resolve(__dirname, 'src/router.tsx'),
-        'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
-        'router-v6': path.resolve(__dirname, 'src/router-v6.tsx'),
+        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'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,