feat(module-federation/bridge): Enhance Bridge capabilities and fix some issues #2792

danpeen · 2024-07-24T08:10:41Z

Description

In this pr i have supported:

support provider.render can be provided by user, so that user can customize their render login. the usage is like this:

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

export const provider = createBridgeComponent({
  rootComponent: App,
  render: () => { user render logic}
});

support pass ref and other props, thus user can get the render root dom . The usage is like this:

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

const App = () => { 
    const ref = useRef<HTMLElement>(null);
    useEffect(() => {
      const refTimeout = setTimeout(() => {
        if (ref && ref.current) {
          ref.current.style.backgroundColor = 'salmon';
        }
      }, 2000)
      return () => {
          clearTimeout(refTimeout);
      }
    }, [])
    return (<Remote1App msg={'hello remote1'} ref={ref} />)
}

some fixing about types hit and react-router-dom proxy

Related Issue

Types of changes

Docs change / refactoring / dependency upgrade
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Checklist

I have added tests to cover my changes.
All new and existing tests passed.
I have updated the documentation.

changeset-bot · 2024-07-24T08:10:45Z

🦋 Changeset detected

Latest commit: 87b0110

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 36 packages

Name	Type
@module-federation/bridge-react-webpack-plugin	Patch
@module-federation/bridge-shared	Patch
@module-federation/bridge-react	Patch
@module-federation/bridge-vue3	Patch
@module-federation/enhanced	Patch
@module-federation/rspack	Patch
host	Patch
host-v5	Patch
remote1	Patch
remote2	Patch
remote4	Patch
host-vue3	Patch
remote3	Patch
@module-federation/modern-js	Patch
@module-federation/nextjs-mf	Patch
@module-federation/node	Patch
3008-runtime-remote	Patch
@module-federation/modernjs	Patch
modernjs-ssr-dynamic-nested-remote	Patch
modernjs-ssr-dynamic-remote-new-version	Patch
modernjs-ssr-dynamic-remote	Patch
modernjs-ssr-host	Patch
modernjs-ssr-nested-remote	Patch
modernjs-ssr-remote-new-version	Patch
modernjs-ssr-remote	Patch
@module-federation/runtime	Patch
@module-federation/webpack-bundler-runtime	Patch
@module-federation/sdk	Patch
@module-federation/runtime-tools	Patch
@module-federation/managers	Patch
@module-federation/manifest	Patch
@module-federation/dts-plugin	Patch
@module-federation/third-party-dts-extractor	Patch
@module-federation/devtools	Patch
@module-federation/esbuild	Patch
@module-federation/utilities	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2024-07-24T08:10:58Z

✅ Deploy Preview for module-federation-docs ready!

Name	Link
🔨 Latest commit	`87b0110`
🔍 Latest deploy log	https://app.netlify.com/sites/module-federation-docs/deploys/66be168d1476e40008cefa45
😎 Deploy Preview	https://deploy-preview-2792--module-federation-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

squadronai

Summary

This pull request enhances the capabilities of the Module Federation Bridge and fixes some issues. The key changes are:

Introduced support for a custom provider.render function, allowing users to customize the rendering logic of the bridge component.
Added support for passing ref and other props to remote components, enabling users to access the rendered DOM elements.
Fixed issues related to types and React Router DOM proxy functionality.

These changes aim to improve the flexibility and usability of the Module Federation Bridge, providing users with more control over the rendering and integration of remote components within their applications.

File Summaries

File	Summary
packages/bridge/bridge-react-webpack-plugin/src/index.ts	The code updates the webpack configuration by modifying the resolve alias. It adds a new alias entry for the target file path while preserving existing aliases, ensuring that the new alias can be overridden by user-defined aliases.
packages/bridge/bridge-shared/src/type.ts	The code defines two interfaces: ProviderParams and RenderFnParams. ProviderParams includes optional properties for module configuration, while RenderFnParams extends ProviderParams and adds a required 'dom' property of type HTMLElement.
packages/bridge/bridge-react/src/create.tsx	The code enhances the bridge component's functionality by adding support for custom rendering, ref passing, and prop forwarding. It introduces a new interface for render function parameters and improves type definitions for remote components.
packages/bridge/bridge-react/src/provider.tsx	The code enhances the bridge component's functionality by adding support for custom rendering, ref passing, and improved error handling. It introduces a flexible rendering mechanism that adapts to different React versions and allows users to provide their own render logic.
packages/bridge/bridge-react/src/remote/index.tsx	The code enhances a React bridge component for module federation. It introduces support for custom render logic, passing refs and props to remote components, and improves type handling and React Router DOM proxy functionality.
packages/bridge/bridge-react/src/router-v5.tsx	The code enhances router functionality by introducing WrapperRouter and WrapperRouterProvider components. These components adapt routing behavior based on context, supporting both memory and browser routing scenarios with improved flexibility for module federation.
packages/bridge/bridge-react/src/router-v6.tsx	The code enhances router functionality by introducing WrapperRouter and WrapperRouterProvider components. These components dynamically choose between memory and browser routers based on context, allowing for flexible routing configurations in different environments.
packages/dts-plugin/src/core/configurations/remotePlugin.ts	The code configures TypeScript compiler options by merging default options with user-defined options from tsconfig.json. It also prepares a list of files to compile, including exposed components, declaration files, and additional specified files.
packages/manifest/src/StatsManager.ts	The code filters files from a remote entry chunk, excluding hot update and CSS files. It then asserts that at least one file is found and that there is exactly one file for the remote entry chunk.
packages/node/src/index.ts	The code exports several plugins related to module federation and chunk management in a webpack environment. These plugins include ChunkCorrelationPlugin, RemotePublicPathPlugin, EntryChunkTrackerPlugin, and UniverseEntryChunkTrackerPlugin.
packages/node/src/plugins/UniverseEntryChunkTrackerPlugin.ts	The UniverseEntryChunkTrackerPlugin is implemented to track entry chunks in a webpack compilation. It injects a script that adds module filenames to a global cache set and uses webpack's EntryPlugin to include this script in the build process.
packages/runtime/src/utils/preload.ts	The code enhances remote module loading functionality by adding hooks for script creation and handling different scenarios for loading remote entries. It also improves error handling and type checking for script element creation.
packages/enhanced/src/wrapper/ModuleFederationPlugin.ts	The code defines a ModuleFederationPlugin class with methods for applying the plugin to a webpack compiler and retrieving stats resource information. It imports necessary types and utilities for module federation and webpack integration.
packages/runtime/src/type/config.ts	The code defines types for configuration options in a module federation system. It includes properties for scope, dependencies, loading strategy, and a loaded flag. Additionally, it introduces a SharedGetter type for module loading functions.
packages/runtime/src/utils/share.ts	The code enhances the configuration of shared modules by merging user-provided settings with default values. It handles various properties including 'loaded', 'version', and 'scope', providing flexibility in how these are defined and processed.
packages/bridge/bridge-react/src/router.tsx	The code enhances router functionality by introducing wrapper components for BrowserRouter and RouterProvider. These wrappers add support for memory routing and custom basenames, improving flexibility in routing configurations.

Commits reviewed:

67fa05bad65536ba0315051b0c868901a97187f1...5b1bbc47a7d016fb7f1da3b153474214a56944ba

squadronai · 2024-07-26T08:40:13Z

packages/bridge/bridge-react-webpack-plugin/src/index.ts

+ const updatedAlias = {
+ // allow this config to be override
+ [this.alias]: targetFilePath,
+ ...originalAlias, 
+ };


The current implementation might unintentionally override user-defined aliases. Reverse the order of the spread operator and the new alias to prioritize user configurations:

Suggested change

const updatedAlias = {

// allow this config to be override

[this.alias]: targetFilePath,

...originalAlias,

};

const updatedAlias = {

...originalAlias,

// allow this config to be override

[this.alias]: targetFilePath,

};

This change ensures that user-defined aliases take precedence over the plugin's default alias.

squadronai · 2024-07-26T08:40:13Z

packages/bridge/bridge-react/src/create.tsx

 export interface RenderFnParams extends ProviderParams {
 dom?: any;
 }
-
 interface RemoteModule {
 provider: () => {
 render: (
- info: ProviderParams & {
- dom: any;
- },
+ info: RenderFnParams,
 ) => void;
 destroy: (info: { dom: any }) => void;
 };


The 'RemoteModule' interface defines 'provider' as a function returning an object with 'render' and 'destroy' methods. Consider making these methods optional to allow for more flexible implementations:

Suggested change

export interface RenderFnParams extends ProviderParams {

dom?: any;

}

interface RemoteModule {

provider: () => {

render: (

info: ProviderParams & {

dom: any;

},

info: RenderFnParams,

) => void;

destroy: (info: { dom: any }) => void;

};

interface RemoteModule {

provider: () => {

render?: (

info: RenderFnParams,

) => void;

destroy?: (info: { dom: any }) => void;

};

}

packages/bridge/bridge-react/src/create.tsx

squadronai · 2024-07-26T08:40:14Z

packages/bridge/bridge-react/src/provider.tsx

+ if (bridgeInfo?.render) {
+ Promise.resolve(bridgeInfo?.render(
+ <RawComponent
+ propsInfo={propsInfo}
+ appInfo={{
+ name,
+ basename,
+ memoryRoute,
+ }}
+ />,
+ info.dom
+ )).then((root: RootType) => rootMap.set(info.dom, root));


The custom render function is called with a Promise.resolve, which may not be necessary. Consider simplifying the code:

Suggested change

if (bridgeInfo?.render) {

Promise.resolve(bridgeInfo?.render(

<RawComponent

propsInfo={propsInfo}

appInfo={{

name,

basename,

memoryRoute,

}}

/>,

info.dom

)).then((root: RootType) => rootMap.set(info.dom, root));

if (bridgeInfo?.render) {

const root = await bridgeInfo.render(

<RawComponent

propsInfo={propsInfo}

appInfo={{

name,

basename,

memoryRoute,

}}

/>,

info.dom

);

rootMap.set(info.dom, root);

}

This change removes the unnecessary Promise.resolve and simplifies the code structure.

squadronai · 2024-07-26T08:40:14Z

packages/bridge/bridge-react/src/provider.tsx

+ async destroy(info: { dom: HTMLElement }) {
 LoggerInstance.log(`createBridgeComponent destroy Info`, {
 dom: info.dom,
 });
 if (atLeastReact18(React)) {
 const root = rootMap.get(info.dom);
- root?.unmount();
+ (root as ReactDOMClient.Root)?.unmount();
 } else {
 ReactDOM.unmountComponentAtNode(info.dom);
 }


The destroy method doesn't remove the root from the rootMap after unmounting. Add cleanup to prevent memory leaks:

Suggested change

async destroy(info: { dom: HTMLElement }) {

LoggerInstance.log(`createBridgeComponent destroy Info`, {

dom: info.dom,

});

if (atLeastReact18(React)) {

const root = rootMap.get(info.dom);

root?.unmount();

(root as ReactDOMClient.Root)?.unmount();

} else {

ReactDOM.unmountComponentAtNode(info.dom);

}

async destroy(info: { dom: HTMLElement }) {

LoggerInstance.log(`createBridgeComponent destroy Info`, {

dom: info.dom,

});

if (atLeastReact18(React)) {

const root = rootMap.get(info.dom);

(root as ReactDOMClient.Root)?.unmount();

rootMap.delete(info.dom);

} else {

ReactDOM.unmountComponentAtNode(info.dom);

}

}

This ensures that the rootMap is properly cleaned up when components are destroyed.

squadronai · 2024-07-26T08:40:14Z

packages/bridge/bridge-react/src/router-v6.tsx

+ const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+ const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+ const createBrowserRouter = (ReactRouterDom as any)[
+ 'create' + 'BrowserRouter'
+ ];


Replace dynamic property access with direct imports to improve code readability and maintainability.

Suggested change

const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];

const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];

const createBrowserRouter = (ReactRouterDom as any)[

'create' + 'BrowserRouter'

];

import { RouterProvider, createMemoryRouter, createBrowserRouter } from 'react-router-dom/dist/index.js';

// Then use these imported functions directly

This change will make the code more explicit and easier to understand, while also potentially improving performance by allowing better static analysis and tree-shaking.

squadronai · 2024-07-26T08:40:14Z

packages/bridge/bridge-react/src/router-v6.tsx

+ routerContextProps,
+ WraperRouterProps: props,
+ });
+ if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;


The condition if (!routerContextProps) is always false because of the fallback to an empty object on line 14. This renders the check ineffective. Consider removing this condition or adjusting the logic if there's a specific scenario you're trying to handle.

squadronai · 2024-07-26T08:40:14Z

packages/bridge/bridge-react/src/router-v6.tsx

+ if (!routerContextProps) return <RouterProvider {...props} />;
+
+ if (routerContextProps.memoryRoute) {
+ const MemeoryRouterInstance = createMemoryRouter(routers, {


Correct the typo in 'MemeoryRouterInstance' to 'MemoryRouterInstance' for consistency and clarity.

Suggested change

const MemeoryRouterInstance = createMemoryRouter(routers, {

const MemoryRouterInstance = createMemoryRouter(routers, {

squadronai · 2024-07-26T08:40:14Z

packages/bridge/bridge-react/src/router.tsx

 const createBrowserRouter = (ReactRouterDom as any)[
 'create' + 'BrowserRouter'
 ];


Replace the string concatenation method used to access router creation functions with direct property access. This improves code readability and reduces the risk of runtime errors.

Suggested change

const createBrowserRouter = (ReactRouterDom as any)[

'create' + 'BrowserRouter'

];

const createBrowserRouter = (ReactRouterDom as any).createBrowserRouter;

Apply this change to the 'createMemoryRouter' assignment as well.

squadronai · 2024-07-26T08:40:15Z

packages/bridge/bridge-react/src/router.tsx

@@ -52,6 +53,7 @@ function WraperRouterProvider(
 const createBrowserRouter = (ReactRouterDom as any)[
 'create' + 'BrowserRouter'
 ];
+
 if (!routerContextProps) return <RouterProvider {...props} />;


Add a type check for 'props' before spreading it into RouterProvider. This ensures type safety and prevents potential runtime errors if 'props' is undefined or null.

Suggested change

if (!routerContextProps) return <RouterProvider {...props} />;

if (!routerContextProps) return <RouterProvider {...(props || {})} />;

zhoushaw · 2024-08-12T03:41:43Z

.github/workflows/e2e-router.yml

+
+ - name: Run condition check script
+ id: check-ci
+ run: node tools/scripts/ci-is-affected.mjs --appName=3005-runtime-host


You need to include the subapp in the app name as well

zhoushaw · 2024-08-12T03:52:30Z

apps/website-new/docs/zh/practice/bridge/react-bridge.mdx

@@ -1,6 +1,6 @@
 # React Bridge

-`@module-federation/bridge-react` 提供了用于 React 应用的 `bridge` 工具函数，其提供的 `createBridgeComponent` 可用于导出应用级别模块，`createRemoteComponent` 用于加载应用级别模块。[Demo](https://github.com/module-federation/core/core/tree/main/apps/router-demo)
+`@module-federation/bridge-react` 提供了用于 React 应用的 `bridge` 工具函数，其提供的 `createBridgeComponent` 可用于导出应用级别模块，`createRemoteComponent` 用于加载应用级别模块。[Demo](https://github.com/module-federation/core/tree/main/apps/router-demo)


Increases which parameters can be passed to the created component

zhoushaw · 2024-08-13T06:47:34Z

apps/router-demo/router-remote4-2004/CHANGELOG.md

@@ -0,0 +1,113 @@
+# remote2
+
+## 1.0.15


This file can be deleted

zhoushaw · 2024-08-13T06:52:48Z

packages/bridge/bridge-react/src/provider.tsx

 }
 },
- destroy(info: { dom: HTMLElement }) {
+ async destroy(info: { dom: HTMLElement }) {


Need to eliminate asynchrony

zhoushaw · 2024-08-13T06:56:02Z

packages/bridge/bridge-react/vite.config.ts

@@ -22,6 +22,8 @@ export default defineConfig({
 entry: {
 index: path.resolve(__dirname, 'src/index.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'),


The rollup plugin can be used to optimize the two router code issues

danpeen added 16 commits July 15, 2024 11:37

fix: fix issue for applying mf-bridge to edenx applications

b19587a

feat: allow react-router-dom alias can be overwritten

944b241

feat: wip 接入中

6c07d69

feat: support render can be provided by user in mf-bridge

c511202

chore: fix package @module-federation/bridge-vue3 lack of dist

d0b8ce2

chore: fix package @module-federation/bridge-vue3 lack of dist

f98cd57

chore: fix package @module-federation/bridge-vue3 lack of dist

2d19a6c

fix: fix mf-bridge types issue

5e45a26

feat: adjust alias sequence

73d33cc

feat: adjust alias sequence updates

54845f2

feat: fix the react-ruter-dom v5 app error

f532954

chore: delete useless code

1191aec

feat: support get root component ref

9cfebcf

feat: optimize code in router-host-2000 app

0e2a486

fix: fix mf-bridge type issue

4975169

chore(workflow): merge main

9699311

github-actions bot added the change: fix label Jul 24, 2024

danpeen changed the title ~~fix: fix some issue in module-federation/bridge~~ feat(module-federation/bridge): Enhance Bridge capabilities and fix some issues Jul 24, 2024

github-actions bot added change: feat and removed change: fix labels Jul 24, 2024

zhoushaw self-requested a review July 24, 2024 08:31

danpeen added 4 commits July 25, 2024 11:48

feat: support set className and style for remote-module

f69a74e

feat: optimize types

51f8dac

feat(website-doc): optimize website docs about mf-bridge

bf99d29

feat: support pass dom to load remote

042da07

squadronai bot reviewed Jul 26, 2024

View reviewed changes

danpeen added 2 commits July 26, 2024 16:43

chore(workflow): add changeset

67fa05b

chore: add unit tests for bridge-react

04480a0

danpeen and others added 17 commits August 6, 2024 12:14

chore: delete impossible conditional statement

fa6aba4

chore: update changeset

38d001c

feat: add withErrorBoundary demo

7c7ab86

feat: change key to to avoid same property key passed by user's props

74459eb

chore: add e2e test case

18e1c0a

chore: merge main and solve conflicts

6bc3a47

feat: add e2e tests for router-demo

d5f3392

chore: add e2e job for e2e-router

955e6b2

chore: fix code format check fail

8211a4b

feat: add error remote demo

0196c57

feat: add errorBoundary for remote module

eb42c4a

chore: update lock

a52efbf

chore: change rootComponent name

89dd32c

chore: merge main

35aba94

chore: fix router-demo e2e fail

dfa6666

chore: fix lock conflicts

2b8aab4

Merge branch 'main' into fix/mf-bridge

a69c4ec

zhoushaw reviewed Aug 12, 2024

View reviewed changes

chore: update e2e-router demo condition check scripts

5f76a79

zhoushaw reviewed Aug 13, 2024

View reviewed changes

danpeen added 5 commits August 14, 2024 15:31

feat: add retry-plugin in runtime

c132efa

feat: add retry-plugin in runtime

19f1545

feat: optimize router export

43177fd

feat: optimiz docs for bridge

fac42f8

chore: fix conflict

87b0110

zhoushaw approved these changes Aug 16, 2024

View reviewed changes

zhoushaw merged commit 49d6135 into main Aug 16, 2024
16 checks passed

zhoushaw deleted the fix/mf-bridge branch August 16, 2024 02:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module-federation/bridge): Enhance Bridge capabilities and fix some issues #2792

feat(module-federation/bridge): Enhance Bridge capabilities and fix some issues #2792

danpeen commented Jul 24, 2024 •

edited

Loading

changeset-bot bot commented Jul 24, 2024 •

edited

Loading

netlify bot commented Jul 24, 2024 •

edited

Loading

squadronai bot left a comment •

edited

Loading

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

squadronai bot Jul 26, 2024

zhoushaw Aug 12, 2024

zhoushaw Aug 12, 2024

zhoushaw Aug 13, 2024

zhoushaw Aug 13, 2024

zhoushaw Aug 13, 2024

	const MemeoryRouterInstance = createMemoryRouter(routers, {
	const MemoryRouterInstance = createMemoryRouter(routers, {

	if (!routerContextProps) return <RouterProvider {...props} />;
	if (!routerContextProps) return <RouterProvider {...(props \|\| {})} />;

feat(module-federation/bridge): Enhance Bridge capabilities and fix some issues #2792

feat(module-federation/bridge): Enhance Bridge capabilities and fix some issues #2792

Conversation

danpeen commented Jul 24, 2024 • edited Loading

Description

Related Issue

Types of changes

Checklist

changeset-bot bot commented Jul 24, 2024 • edited Loading

🦋 Changeset detected

netlify bot commented Jul 24, 2024 • edited Loading

✅ Deploy Preview for module-federation-docs ready!

squadronai bot left a comment • edited Loading

Choose a reason for hiding this comment

Summary

Commits reviewed:

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

squadronai bot Jul 26, 2024

Choose a reason for hiding this comment

zhoushaw Aug 12, 2024

Choose a reason for hiding this comment

zhoushaw Aug 12, 2024

Choose a reason for hiding this comment

zhoushaw Aug 13, 2024

Choose a reason for hiding this comment

zhoushaw Aug 13, 2024

Choose a reason for hiding this comment

zhoushaw Aug 13, 2024

Choose a reason for hiding this comment

danpeen commented Jul 24, 2024 •

edited

Loading

changeset-bot bot commented Jul 24, 2024 •

edited

Loading

netlify bot commented Jul 24, 2024 •

edited

Loading

squadronai bot left a comment •

edited

Loading