feat: support proxy bridge export #2875
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: b02d9f0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 38 packages
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 |
✅ Deploy Preview for module-federation-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![squadronai[bot]](https://avatars.githubusercontent.com/in/901096?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary
The pull request introduces a new feature to support proxy bridge export in the onload hook. The changes span across several packages and modules, including bridge-react, vue3-bridge, and the runtime package.
Key changes:
- Added a listener when the moduleInfo is ready to support the proxy bridge export functionality.
- Integrated the proxy bridge export handling in the onload hook for both the React and Vue3 bridge components.
- Introduced a new plugin system in the bridge-react and vue3-bridge packages, allowing for customization of the bridge rendering and destruction lifecycle.
- Refactored the module name handling logic in the runtime package to ensure consistent formatting, which is important for the proxy bridge export feature.
- Added new lifecycle hooks, such as
beforeBridgeRenderandbeforeBridgeDestroy, to allow other parts of the application to hook into the bridge component lifecycle. - Improved the handling of global and module-specific snapshots in the runtime package, enhancing the overall organization and readability of the code.
These changes aim to enhance the functionality and flexibility of the bridge components, enabling better integration with existing codebases and supporting the proxy bridge export use case.
File Summaries
| File | Summary |
|---|---|
| packages/bridge/bridge-react/src/create.tsx | The code changes introduce a new feature to support proxy bridge export in the onload hook. The changes include adding a listener when the moduleInfo is ready and updating the RemoteApp component to handle the proxy bridge export functionality. |
| packages/bridge/bridge-react/src/index.ts | The code changes introduce a new export for the BridgeRuntimePlugin type from the ./lifecycle module, which likely provides additional functionality or customization options for the bridge implementation. |
| packages/bridge/bridge-react/src/lifecycle.ts | This code introduces a new plugin system for the bridge-react package, which allows for customization of the bridge rendering and destruction lifecycle. The changes include adding a new pluginSystem instance with two hooks: beforeBridgeRender and beforeBridgeDestroy. These hooks can be used by other plugins to perform actions before the bridge is rendered or destroyed. |
| packages/bridge/bridge-react/src/provider.tsx | The code changes introduce new functionality to support proxy bridge export in the onload hook. The key modifications include adding a listener when the moduleInfo is ready, and adding new hooks for before bridge render and before bridge destroy operations. These changes aim to enhance the functionality and flexibility of the bridge component. |
| packages/bridge/bridge-react/src/remote/index.tsx | The code changes add a new lifecycle hook to the remote application wrapper component. This hook is used to emit events before the remote component is rendered and before it is destroyed. The purpose of these events is to allow other parts of the application to hook into the lifecycle of the remote component and perform additional actions as needed. |
| packages/bridge/vue3-bridge/src/create.ts | The code changes introduce a new feature to support proxy bridge export in the onload hook. The key modifications include adding a listener when the moduleInfo is ready and integrating the useRoute function from the vue-router library to handle the proxy bridge export functionality. |
| packages/bridge/vue3-bridge/src/index.ts | The code changes introduce a new export for the BridgeRuntimePlugin type, which is likely related to the support for proxy bridge export in the onload hook. This enhancement allows for more flexibility and customization in the bridge component creation process. |
| packages/bridge/vue3-bridge/src/lifecycle.ts | The code changes introduce a new plugin system for the Vue3 bridge module. It adds a pluginSystem object that defines two hooks: beforeBridgeRender and beforeBridgeDestroy. These hooks can be used by other plugins to extend the functionality of the bridge module. |
| packages/bridge/vue3-bridge/src/provider.ts | The code changes introduce a new feature to support proxy bridge export in the onload hook. It adds a listener when the moduleInfo is ready and provides a new lifecycle hook for the createBridgeComponent function to handle the rendering and destruction of the bridge component. |
| packages/bridge/vue3-bridge/src/remoteApp.tsx | The code changes introduce a new feature to support proxy bridge export in the onload hook. It adds a listener when the moduleInfo is ready and emits events before the bridge render and destroy operations. These changes aim to enhance the functionality of the remote application component in the Vue3 bridge. |
| packages/runtime/src/helpers.ts | The code changes add a new listener when the moduleInfo is ready and support proxy bridge export in the onload hook. This enhancement allows for improved handling of proxy bridge exports within the application. |
| packages/runtime/src/module/index.ts | The code changes add a new utility function processModuleAlias to handle the module name format, and update the wrapModuleFactory method to use the processed module name as the symbol name. This ensures that the module name is always in a consistent format, which is important for the proxy bridge export functionality. |
| packages/runtime/src/plugins/snapshot/SnapshotHandler.ts | The code changes introduce a new afterLoadSnapshot hook in the SnapshotHandler class. This hook is triggered after the remote snapshot is loaded, allowing for additional processing or actions to be performed on the loaded snapshot data. The changes also refactor the logic for handling global and module-specific snapshots, improving the organization and readability of the code. |
| packages/runtime/src/type/config.ts | The code changes introduce a new interface called RemoteInfoCommon and add a listener when moduleInfo is ready. Additionally, the changes support proxy bridge export in the onload hook. |
| packages/runtime/src/type/plugin.ts | The code changes introduce a new type LifeCycle that combines several partial types, including CoreLifeCyclePartial, SnapshotLifeCycleCyclePartial, SharedLifeCycleCyclePartial, RemoteLifeCycleCyclePartial, and ModuleLifeCycleCyclePartial. The FederationRuntimePlugin type is then defined as an intersection of the LifeCycle type and an optional generic type T. |
| packages/runtime/src/utils/plugin.ts | The code changes introduce a new feature to support proxy bridge export in the onload hook. The changes include adding a listener when the moduleInfo is ready and extending the registerPlugins function to accept a generic type parameter for the plugin system. |
| packages/runtime/src/utils/tool.ts | The code changes introduce a new utility function called processModuleAlias that takes a module name and a sub-path, and returns a processed module name. The function handles cases where the module name ends with a slash and the sub-path starts with a dot, ensuring the resulting module name is properly formatted. |
|
@squadronai review |
There was a problem hiding this comment.
Incremental Review
Comments posted: 6
Configuration
Squadron Mode: essential
Commits Reviewed
b90fa7ded8786022d900081dd7c871f317c5e4b9...f716f180a28d1e7b017db7827045725136fb6d66
Files Reviewed
- packages/bridge/bridge-react/src/provider.tsx
- packages/bridge/vue3-bridge/src/provider.ts
- packages/runtime/src/plugins/snapshot/SnapshotHandler.ts
Files Ignored
These files were ignored due to the filter in the squadron.yaml file.
- .changeset/great-feet-rule.md
There was a problem hiding this comment.
Incremental Review
Comments posted: 6
Configuration
Squadron Mode: essential
Commits Reviewed
865c00bc542e904e24fbcc58c0bb0ec9c8a68c7a...edaffa2490e9c7543640d4c65b6c02602449afed
Files Reviewed
- packages/bridge/bridge-react/src/provider.tsx
- packages/bridge/vue3-bridge/src/provider.ts
- packages/runtime/src/plugins/snapshot/SnapshotHandler.ts
Files Ignored
These files were ignored due to the filter in the squadron.yaml file.
- .changeset/great-feet-rule.md
…universe into feat/isolated-monitor
There was a problem hiding this comment.
Incremental Review
Comments posted: 14
Configuration
Squadron Mode: essential
Commits Reviewed
865c00bc542e904e24fbcc58c0bb0ec9c8a68c7a...fe9ad08d004c3326f7e94ab4862da605264f4465
Files Reviewed
- packages/bridge/bridge-react/src/create.tsx
- packages/bridge/bridge-react/src/index.ts
- packages/bridge/bridge-react/src/lifecycle.ts
- packages/bridge/bridge-react/src/provider.tsx
- packages/bridge/bridge-react/src/remote/index.tsx
- packages/bridge/vue3-bridge/src/create.ts
- packages/bridge/vue3-bridge/src/index.ts
- packages/bridge/vue3-bridge/src/lifecycle.ts
- packages/bridge/vue3-bridge/src/provider.ts
- packages/bridge/vue3-bridge/src/remoteApp.tsx
- packages/runtime/src/helpers.ts
- packages/runtime/src/module/index.ts
- packages/runtime/src/plugins/snapshot/SnapshotHandler.ts
- packages/runtime/src/utils/plugin.ts
- packages/runtime/src/utils/tool.ts
Files Ignored
These files were ignored due to the filter in the squadron.yaml file.
- .changeset/great-feet-rule.md
- packages/bridge/bridge-react/package.json
- packages/bridge/vue3-bridge/package.json
- pnpm-lock.yaml
There was a problem hiding this comment.
Incremental Review
Comments posted: 12
Configuration
Squadron Mode: essential
Commits Reviewed
df760311c10d48b8a08fe7a8236a9b04c1935c90...72577844122be3a0fdfccb4d37cb0443ccf271e8
Files Reviewed
- packages/bridge/bridge-react/src/create.tsx
- packages/bridge/bridge-react/src/index.ts
- packages/bridge/bridge-react/src/lifecycle.ts
- packages/bridge/bridge-react/src/provider.tsx
- packages/bridge/bridge-react/src/remote/index.tsx
- packages/bridge/vue3-bridge/src/create.ts
- packages/bridge/vue3-bridge/src/index.ts
- packages/bridge/vue3-bridge/src/lifecycle.ts
- packages/bridge/vue3-bridge/src/provider.ts
- packages/bridge/vue3-bridge/src/remoteApp.tsx
- packages/runtime/src/helpers.ts
- packages/runtime/src/module/index.ts
- packages/runtime/src/plugins/snapshot/SnapshotHandler.ts
- packages/runtime/src/type/config.ts
- packages/runtime/src/type/plugin.ts
- packages/runtime/src/utils/plugin.ts
- packages/runtime/src/utils/tool.ts
Files Ignored
These files were ignored due to the filter in the squadron.yaml file.
- .changeset/great-feet-rule.md
- packages/bridge/bridge-react/package.json
- packages/bridge/vue3-bridge/package.json
- pnpm-lock.yaml
There was a problem hiding this comment.
Incremental Review
Comments posted: 0
Configuration
Squadron Mode: essential
Commits Reviewed
72577844122be3a0fdfccb4d37cb0443ccf271e8...14a30fa47a052733c2efdda5021e530e196380fa
Files Reviewed
- packages/bridge/vue3-bridge/src/lifecycle.ts
Files Ignored
These files were ignored due to the filter in the squadron.yaml file.
- .changeset/great-feet-rule.md
- packages/bridge/bridge-react/package.json
- packages/bridge/vue3-bridge/package.json
- pnpm-lock.yaml
There was a problem hiding this comment.
Incremental Review
Comments posted: 4
Configuration
Squadron Mode: essential
Commits Reviewed
14a30fa47a052733c2efdda5021e530e196380fa...b47ea80f6142d37e9764123c1eef19606f77e19e
Files Reviewed
- packages/bridge/bridge-react/src/lifecycle.ts
- packages/bridge/bridge-react/src/provider.tsx
- packages/bridge/bridge-react/src/remote/index.tsx
- packages/bridge/vue3-bridge/src/lifecycle.ts
- packages/bridge/vue3-bridge/src/remoteApp.tsx
Files Ignored
These files were ignored due to the filter in the squadron.yaml file.
- .changeset/great-feet-rule.md
- packages/bridge/bridge-react/package.json
- packages/bridge/vue3-bridge/package.json
- pnpm-lock.yaml
|
|
||
| const registerPlugin = helper.global.registerPlugins; | ||
| const pluginHelper = helper.global.pluginHelper; | ||
| const host = getInstance()!; |
There was a problem hiding this comment.
The non-null assertion operator (!) is used here. While it may be intentional, it's generally good practice to handle potential null cases explicitly. Consider adding a check for getInstance() being null or undefined before proceeding.
For example:
Suggested change
| const host = getInstance()!; | |
| const host = getInstance(); | |
| if (!host) { | |
| throw new Error('Failed to get instance'); | |
| } |
This approach provides better error handling and type safety.
Comment on lines
22
to
25
| render?: ( | ||
| App: React.ReactElement, | ||
| id?: HTMLElement | string, | ||
| ) => RootType | Promise<RootType>; |
There was a problem hiding this comment.
The render function in ProviderFnParams has an optional id parameter of type HTMLElement | string, but it's not used in the implementation. Consider removing it if it's not needed, or update the implementation to use it:
Suggested change
| render?: ( | |
| App: React.ReactElement, | |
| id?: HTMLElement | string, | |
| ) => RootType | Promise<RootType>; | |
| render?: ( | |
| App: React.ReactElement, | |
| container: HTMLElement | |
| ) => RootType | Promise<RootType>; |
This change makes the function signature more consistent with its usage and removes unused parameters.
Comment on lines
+74
to
+81
| if ( | ||
| bridgeInfo?.hooks && | ||
| bridgeInfo?.hooks.beforeBridgeRender && | ||
| typeof bridgeInfo?.hooks.beforeBridgeRender === 'function' | ||
| ) { | ||
| bridgeInfo.hooks.beforeBridgeRender(info); | ||
| // bridgeInfo?.beforeBridgeRender?.(info); | ||
| } |
There was a problem hiding this comment.
The condition for calling the beforeBridgeRender hook can be simplified. Consider using optional chaining to make the code more concise:
Suggested change
| if ( | |
| bridgeInfo?.hooks && | |
| bridgeInfo?.hooks.beforeBridgeRender && | |
| typeof bridgeInfo?.hooks.beforeBridgeRender === 'function' | |
| ) { | |
| bridgeInfo.hooks.beforeBridgeRender(info); | |
| // bridgeInfo?.beforeBridgeRender?.(info); | |
| } | |
| bridgeInfo.hooks?.beforeBridgeRender?.(info); |
This change reduces the number of checks and makes the code more readable.
Comment on lines
84
to
86
| if (atLeastReact18(React)) { | ||
| if (bridgeInfo?.render) { | ||
| // in case bridgeInfo?.render is an async function, resolve this to promise |
There was a problem hiding this comment.
The rendering logic for React 18 can be simplified. Instead of checking for bridgeInfo?.render separately, consider using a default value:
Suggested change
| if (atLeastReact18(React)) { | |
| if (bridgeInfo?.render) { | |
| // in case bridgeInfo?.render is an async function, resolve this to promise | |
| if (atLeastReact18(React)) { | |
| const renderFn = bridgeInfo?.render || ((App, container) => { | |
| const root = ReactDOMClient.createRoot(container); | |
| root.render(App); | |
| return root; | |
| }); | |
| Promise.resolve(renderFn(rootComponentWithErrorBoundary, info.dom)) | |
| .then((root: RootType) => rootMap.set(info.dom, root)); | |
| } else { | |
| // ... (existing React 17 logic) | |
| } |
This approach unifies the rendering logic for React 18 and handles both custom and default rendering methods consistently.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Related Issue
Types of changes
Checklist