@module-federation/bridge-react
Advanced tools
Comparing version 0.0.0-next-20241113075051 to 0.0.0-next-20241113082541
# @module-federation/bridge-react | ||
## 0.0.0-next-20241113075051 | ||
## 0.0.0-next-20241113082541 | ||
### Patch Changes | ||
- @module-federation/sdk@0.0.0-next-20241113075051 | ||
- @module-federation/bridge-shared@0.0.0-next-20241113075051 | ||
## 0.7.3 | ||
### Patch Changes | ||
- Updated dependencies [4ab9295] | ||
- @module-federation/sdk@0.7.3 | ||
- @module-federation/bridge-shared@0.7.3 | ||
## 0.7.2 | ||
### Patch Changes | ||
- @module-federation/sdk@0.7.2 | ||
- @module-federation/bridge-shared@0.7.2 | ||
## 0.7.1 | ||
### Patch Changes | ||
- 3082116: feat: feat: support lifecycyle hooks in module-deferation bridge | ||
- Updated dependencies [8712967] | ||
- Updated dependencies [6db4c5f] | ||
- @module-federation/sdk@0.7.1 | ||
- @module-federation/bridge-shared@0.7.1 | ||
- Updated dependencies [3082116] | ||
- @module-federation/runtime@0.0.0-next-20241113082541 | ||
- @module-federation/sdk@0.0.0-next-20241113082541 | ||
- @module-federation/bridge-shared@0.0.0-next-20241113082541 | ||
@@ -33,0 +15,0 @@ ## 0.7.0 |
"use strict"; | ||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); | ||
const React = require("react"); | ||
const context = require("./context-BBLu8BlQ.cjs"); | ||
const context = require("./context-BcJ-YlNr.cjs"); | ||
const ReactRouterDOM = require("react-router-dom"); | ||
const runtime = require("@module-federation/runtime"); | ||
const ReactDOM = require("react-dom"); | ||
@@ -140,7 +141,10 @@ function _interopNamespaceDefault(e2) { | ||
const providerInfoRef = React.useRef(null); | ||
const hostInstance = runtime.getInstance(); | ||
context.LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance); | ||
React.useEffect(() => { | ||
const renderTimeout = setTimeout(() => { | ||
var _a, _b, _c, _d, _e, _f; | ||
const providerReturn = providerInfo(); | ||
providerInfoRef.current = providerReturn; | ||
const renderProps = { | ||
let renderProps = { | ||
moduleName, | ||
@@ -158,3 +162,14 @@ dom: rootRef.current, | ||
); | ||
context.LoggerInstance.log( | ||
`createRemoteComponent LazyComponent hostInstance >>>`, | ||
hostInstance | ||
); | ||
const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit( | ||
renderProps | ||
)) || {}; | ||
renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps }; | ||
providerReturn.render(renderProps); | ||
(_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit( | ||
renderProps | ||
); | ||
}); | ||
@@ -164,3 +179,3 @@ return () => { | ||
setTimeout(() => { | ||
var _a, _b; | ||
var _a, _b, _c, _d, _e, _f, _g, _h; | ||
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) { | ||
@@ -171,5 +186,22 @@ context.LoggerInstance.log( | ||
); | ||
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({ | ||
(_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({ | ||
moduleName, | ||
dom: renderDom.current, | ||
basename, | ||
memoryRoute, | ||
fallback, | ||
...resProps | ||
}); | ||
(_e = providerInfoRef.current) == null ? void 0 : _e.destroy({ | ||
moduleName, | ||
dom: renderDom.current | ||
}); | ||
(_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({ | ||
moduleName, | ||
dom: renderDom.current, | ||
basename, | ||
memoryRoute, | ||
fallback, | ||
...resProps | ||
}); | ||
} | ||
@@ -179,6 +211,7 @@ }); | ||
}, []); | ||
const rootComponentClassName = `${context.getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`; | ||
return /* @__PURE__ */ React.createElement( | ||
"div", | ||
{ | ||
className: props == null ? void 0 : props.className, | ||
className: rootComponentClassName, | ||
style: props == null ? void 0 : props.style, | ||
@@ -189,3 +222,3 @@ ref: rootRef | ||
}; | ||
RemoteApp2["__APP_VERSION__"] = "0.7.3"; | ||
RemoteApp2["__APP_VERSION__"] = "0.7.0"; | ||
return /* @__PURE__ */ React.createElement(RemoteApp2, null); | ||
@@ -342,2 +375,4 @@ }); | ||
const rootMap = /* @__PURE__ */ new Map(); | ||
const instance = runtime.getInstance(); | ||
context.LoggerInstance.log(`createBridgeComponent remote instance`, instance); | ||
const RawComponent = (info) => { | ||
@@ -357,2 +392,3 @@ const { appInfo, propsInfo, ...restProps } = info; | ||
async render(info) { | ||
var _a, _b, _c, _d, _e, _f; | ||
context.LoggerInstance.log(`createBridgeComponent render Info`, info); | ||
@@ -367,2 +403,3 @@ const { | ||
} = info; | ||
const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {}; | ||
const rootComponentWithErrorBoundary = ( | ||
@@ -378,3 +415,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error | ||
}, | ||
propsInfo | ||
propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps } | ||
} | ||
@@ -397,7 +434,10 @@ )) | ||
} | ||
((_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)) || {}; | ||
}, | ||
async destroy(info) { | ||
var _a, _b, _c, _d, _e, _f; | ||
context.LoggerInstance.log(`createBridgeComponent destroy Info`, { | ||
dom: info.dom | ||
}); | ||
(_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info); | ||
if (context.atLeastReact18(React__namespace)) { | ||
@@ -410,2 +450,3 @@ const root = rootMap.get(info.dom); | ||
} | ||
(_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info); | ||
}, | ||
@@ -412,0 +453,0 @@ rawComponent: bridgeInfo.rootComponent, |
@@ -9,6 +9,4 @@ import { ComponentType } from 'react'; | ||
export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => { | ||
render(info: RenderFnParams & any): Promise<void>; | ||
destroy(info: { | ||
dom: HTMLElement; | ||
}): Promise<void>; | ||
render(info: RenderParams): Promise<void>; | ||
destroy(info: DestroyParams): Promise<void>; | ||
rawComponent: React_2.ComponentType<T>; | ||
@@ -25,2 +23,7 @@ __BRIDGE_FN__: (_args: T) => void; | ||
declare type DestroyParams = { | ||
moduleName: string; | ||
dom: HTMLElement; | ||
}; | ||
declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & { | ||
@@ -69,4 +72,6 @@ fallback?: never; | ||
declare type RenderParams = RenderFnParams & any; | ||
declare type RootType = HTMLElement | default_3.Root; | ||
export { } |
import * as React from "react"; | ||
import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react"; | ||
import { L as LoggerInstance, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-BcyT-d0V.js"; | ||
import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-CUbFnlO5.js"; | ||
import * as ReactRouterDOM from "react-router-dom"; | ||
import { getInstance } from "@module-federation/runtime"; | ||
import ReactDOM from "react-dom"; | ||
@@ -121,7 +122,10 @@ const ErrorBoundaryContext = createContext(null); | ||
const providerInfoRef = useRef(null); | ||
const hostInstance = getInstance(); | ||
LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance); | ||
useEffect(() => { | ||
const renderTimeout = setTimeout(() => { | ||
var _a, _b, _c, _d, _e, _f; | ||
const providerReturn = providerInfo(); | ||
providerInfoRef.current = providerReturn; | ||
const renderProps = { | ||
let renderProps = { | ||
moduleName, | ||
@@ -139,3 +143,14 @@ dom: rootRef.current, | ||
); | ||
LoggerInstance.log( | ||
`createRemoteComponent LazyComponent hostInstance >>>`, | ||
hostInstance | ||
); | ||
const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit( | ||
renderProps | ||
)) || {}; | ||
renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps }; | ||
providerReturn.render(renderProps); | ||
(_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit( | ||
renderProps | ||
); | ||
}); | ||
@@ -145,3 +160,3 @@ return () => { | ||
setTimeout(() => { | ||
var _a, _b; | ||
var _a, _b, _c, _d, _e, _f, _g, _h; | ||
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) { | ||
@@ -152,5 +167,22 @@ LoggerInstance.log( | ||
); | ||
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({ | ||
(_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({ | ||
moduleName, | ||
dom: renderDom.current, | ||
basename, | ||
memoryRoute, | ||
fallback, | ||
...resProps | ||
}); | ||
(_e = providerInfoRef.current) == null ? void 0 : _e.destroy({ | ||
moduleName, | ||
dom: renderDom.current | ||
}); | ||
(_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({ | ||
moduleName, | ||
dom: renderDom.current, | ||
basename, | ||
memoryRoute, | ||
fallback, | ||
...resProps | ||
}); | ||
} | ||
@@ -160,6 +192,7 @@ }); | ||
}, []); | ||
const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`; | ||
return /* @__PURE__ */ React__default.createElement( | ||
"div", | ||
{ | ||
className: props == null ? void 0 : props.className, | ||
className: rootComponentClassName, | ||
style: props == null ? void 0 : props.style, | ||
@@ -170,3 +203,3 @@ ref: rootRef | ||
}; | ||
RemoteApp2["__APP_VERSION__"] = "0.7.3"; | ||
RemoteApp2["__APP_VERSION__"] = "0.7.0"; | ||
return /* @__PURE__ */ React__default.createElement(RemoteApp2, null); | ||
@@ -323,2 +356,4 @@ }); | ||
const rootMap = /* @__PURE__ */ new Map(); | ||
const instance = getInstance(); | ||
LoggerInstance.log(`createBridgeComponent remote instance`, instance); | ||
const RawComponent = (info) => { | ||
@@ -338,2 +373,3 @@ const { appInfo, propsInfo, ...restProps } = info; | ||
async render(info) { | ||
var _a, _b, _c, _d, _e, _f; | ||
LoggerInstance.log(`createBridgeComponent render Info`, info); | ||
@@ -348,2 +384,3 @@ const { | ||
} = info; | ||
const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {}; | ||
const rootComponentWithErrorBoundary = ( | ||
@@ -359,3 +396,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error | ||
}, | ||
propsInfo | ||
propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps } | ||
} | ||
@@ -378,7 +415,10 @@ )) | ||
} | ||
((_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)) || {}; | ||
}, | ||
async destroy(info) { | ||
var _a, _b, _c, _d, _e, _f; | ||
LoggerInstance.log(`createBridgeComponent destroy Info`, { | ||
dom: info.dom | ||
}); | ||
(_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info); | ||
if (atLeastReact18(React)) { | ||
@@ -391,2 +431,3 @@ const root = rootMap.get(info.dom); | ||
} | ||
(_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info); | ||
}, | ||
@@ -393,0 +434,0 @@ rawComponent: bridgeInfo.rootComponent, |
@@ -5,3 +5,3 @@ "use strict"; | ||
const ReactRouterDom$1 = require("react-router-dom/index.js"); | ||
const context = require("./context-BBLu8BlQ.cjs"); | ||
const context = require("./context-BcJ-YlNr.cjs"); | ||
const ReactRouterDom = require("react-router-dom/index.js"); | ||
@@ -8,0 +8,0 @@ function _interopNamespaceDefault(e) { |
import React__default, { useContext } from "react"; | ||
import * as ReactRouterDom$1 from "react-router-dom/index.js"; | ||
import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js"; | ||
import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js"; | ||
export * from "react-router-dom/index.js"; | ||
@@ -5,0 +5,0 @@ function WraperRouter(props) { |
@@ -5,3 +5,3 @@ "use strict"; | ||
const ReactRouterDom = require("react-router-dom/dist/index.js"); | ||
const context = require("./context-BBLu8BlQ.cjs"); | ||
const context = require("./context-BcJ-YlNr.cjs"); | ||
function _interopNamespaceDefault(e) { | ||
@@ -8,0 +8,0 @@ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } }); |
import React__default, { useContext } from "react"; | ||
import * as ReactRouterDom from "react-router-dom/dist/index.js"; | ||
export * from "react-router-dom/dist/index.js"; | ||
import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js"; | ||
import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js"; | ||
function WraperRouter(props) { | ||
@@ -6,0 +6,0 @@ const { basename, ...propsRes } = props; |
@@ -5,3 +5,3 @@ "use strict"; | ||
const ReactRouterDom = require("react-router-dom/"); | ||
const context = require("./context-BBLu8BlQ.cjs"); | ||
const context = require("./context-BcJ-YlNr.cjs"); | ||
function _interopNamespaceDefault(e) { | ||
@@ -69,3 +69,3 @@ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } }); | ||
const BrowserRouterInstance = createBrowserRouter(routers, { | ||
basename: routerContextProps.basename, | ||
basename: routerContextProps.basename || (router == null ? void 0 : router.basename), | ||
future: router.future, | ||
@@ -72,0 +72,0 @@ window: router.window |
import React__default, { useContext } from "react"; | ||
import * as ReactRouterDom from "react-router-dom/"; | ||
export * from "react-router-dom/"; | ||
import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js"; | ||
import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js"; | ||
function WrapperRouter(props) { | ||
@@ -50,3 +50,3 @@ const { basename, ...propsRes } = props; | ||
const BrowserRouterInstance = createBrowserRouter(routers, { | ||
basename: routerContextProps.basename, | ||
basename: routerContextProps.basename || (router == null ? void 0 : router.basename), | ||
future: router.future, | ||
@@ -53,0 +53,0 @@ window: router.window |
{ | ||
"name": "@module-federation/bridge-react", | ||
"version": "0.0.0-next-20241113075051", | ||
"version": "0.0.0-next-20241113082541", | ||
"publishConfig": { | ||
@@ -44,4 +44,4 @@ "access": "public" | ||
"react-error-boundary": "^4.0.13", | ||
"@module-federation/bridge-shared": "0.0.0-next-20241113075051", | ||
"@module-federation/sdk": "0.0.0-next-20241113075051" | ||
"@module-federation/bridge-shared": "0.0.0-next-20241113082541", | ||
"@module-federation/sdk": "0.0.0-next-20241113082541" | ||
}, | ||
@@ -51,3 +51,4 @@ "peerDependencies": { | ||
"react-dom": ">=16.9.0", | ||
"react-router-dom": ">=4" | ||
"react-router-dom": ">=4", | ||
"@module-federation/runtime": "0.0.0-next-20241113082541" | ||
}, | ||
@@ -54,0 +55,0 @@ "devDependencies": { |
import React from 'react'; | ||
import { FederationHost } from '@module-federation/runtime'; | ||
import { createLogger } from '@module-federation/sdk'; | ||
@@ -44,1 +45,22 @@ | ||
} | ||
export const getModuleName = (id: string) => { | ||
if (!id) { | ||
return id; | ||
} | ||
// separate module name without detailed module path | ||
// @vmok-e2e/edenx-demo-app2/button -> @vmok-e2e/edenx-demo-app2 | ||
const idArray = id.split('/'); | ||
if (idArray.length < 2) { | ||
return id; | ||
} | ||
return idArray[0] + '/' + idArray[1]; | ||
}; | ||
export const getRootDomDefaultClassName = (moduleName: string) => { | ||
if (!moduleName) { | ||
return ''; | ||
} | ||
const name = getModuleName(moduleName).replace(/\@/, '').replace(/\//, '-'); | ||
return `bridge-root-component-${name}`; | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
114111
3101
8
+ Added@module-federation/bridge-shared@0.0.0-next-20241113082541(transitive)
+ Added@module-federation/error-codes@0.0.0-next-20241113082541(transitive)
+ Added@module-federation/runtime@0.0.0-next-20241113082541(transitive)
+ Added@module-federation/sdk@0.0.0-next-20241113082541(transitive)
- Removed@module-federation/bridge-shared@0.0.0-next-20241113075051(transitive)
- Removed@module-federation/sdk@0.0.0-next-20241113075051(transitive)
Updated@module-federation/bridge-shared@0.0.0-next-20241113082541