Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@module-federation/bridge-react

Package Overview
Dependencies
Maintainers
0
Versions
301
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@module-federation/bridge-react - npm Package Compare versions

Comparing version 0.0.0-next-20241101074502 to 0.0.0-next-20241101093646

dist/context--mtFt3tp.cjs

29

CHANGELOG.md
# @module-federation/bridge-react
## 0.0.0-next-20241101074502
## 0.0.0-next-20241101093646
### Patch Changes
- @module-federation/sdk@0.0.0-next-20241101074502
- @module-federation/bridge-shared@0.0.0-next-20241101074502
- 3082116: feat: support module isolated reported
- Updated dependencies [3082116]
- @module-federation/runtime@0.0.0-next-20241101093646
- @module-federation/bridge-shared@0.0.0-next-20241101093646
## 0.6.14
### Patch Changes
- ad605d2: chore: unified logger
- Updated dependencies [ad605d2]
- @module-federation/bridge-shared@0.6.14
- @module-federation/sdk@0.6.14
## 0.6.13
### Patch Changes
- @module-federation/bridge-shared@0.6.13
## 0.6.12
### Patch Changes
- @module-federation/bridge-shared@0.6.12
## 0.6.11

@@ -32,0 +13,0 @@

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const React = require("react");
const context = require("./context-BVnJi3LE.cjs");
const context = require("./context--mtFt3tp.cjs");
const ReactRouterDOM = require("react-router-dom");
const runtime = require("@module-federation/runtime");
const ReactDOM = require("react-dom");
function _interopNamespaceDefault(e2) {
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
if (e2) {
for (const k in e2) {
if (e) {
for (const k in e) {
if (k !== "default") {
const d = Object.getOwnPropertyDescriptor(e2, k);
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e2[k]
get: () => e[k]
});

@@ -20,3 +21,3 @@ }

}
n.default = e2;
n.default = e;
return Object.freeze(n);

@@ -121,7 +122,16 @@ }

}
function e() {
const t = new PopStateEvent("popstate", { state: window.history.state });
window.dispatchEvent(t);
}
const getModuleName = (id) => {
const idArray = id.split("/");
if (idArray.length < 2) {
return id;
}
return idArray[0] + "/" + idArray[1];
};
const getRootDomDefaultClassName = (moduleName) => {
const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
return `bridge-root-component-${name}`;
};
const RemoteAppWrapper = React.forwardRef(function(props, ref) {
const host = runtime.getInstance();
context.LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
const RemoteApp2 = () => {

@@ -144,5 +154,6 @@ context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });

const renderTimeout = setTimeout(() => {
var _a, _b, _c, _d;
const providerReturn = providerInfo();
providerInfoRef.current = providerReturn;
const renderProps = {
let renderProps = {
moduleName,

@@ -160,2 +171,12 @@ dom: rootRef.current,

);
if ((host == null ? void 0 : host.bridgeHook) && ((_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender)) {
const beforeBridgeRenderRes = (_d = (_c = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _c.lifecycle) == null ? void 0 : _d.beforeBridgeRender.emit({
...renderProps
});
const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
renderProps = {
...renderProps,
...extraProps
};
}
providerReturn.render(renderProps);

@@ -166,3 +187,3 @@ });

setTimeout(() => {
var _a, _b;
var _a, _b, _c, _d, _e, _f;
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {

@@ -173,3 +194,13 @@ context.LoggerInstance.log(

);
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
if ((host == null ? void 0 : host.bridgeHook) && ((_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.afterBridgeDestroy)) {
(_e = (_d = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy.emit({
moduleName,
dom: renderDom.current,
basename,
memoryRoute,
fallback,
...resProps
});
}
(_f = providerInfoRef.current) == null ? void 0 : _f.destroy({
dom: renderDom.current

@@ -181,6 +212,7 @@ });

}, []);
const rootComponentClassName = `${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,

@@ -191,3 +223,3 @@ ref: rootRef

};
RemoteApp2["__APP_VERSION__"] = "0.6.14";
RemoteApp2["__APP_VERSION__"] = "0.6.11";
return /* @__PURE__ */ React.createElement(RemoteApp2, null);

@@ -249,3 +281,3 @@ });

});
e();
context.f();
}

@@ -343,3 +375,3 @@ setPathname(location.pathname);

function createBridgeComponent(bridgeInfo) {
return () => {
return (params) => {
const rootMap = /* @__PURE__ */ new Map();

@@ -360,2 +392,3 @@ const RawComponent = (info) => {

async render(info) {
var _a, _b;
context.LoggerInstance.log(`createBridgeComponent render Info`, info);

@@ -370,2 +403,5 @@ const {

} = info;
const beforeBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeRender) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeRender);
const beforeBridgeRenderRes = beforeBridgeRender && beforeBridgeRender(info);
const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
const rootComponentWithErrorBoundary = (

@@ -381,3 +417,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error

},
propsInfo
propsInfo: { ...propsInfo, ...extraProps }
}

@@ -400,7 +436,15 @@ ))

}
const afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeRender);
afterBridgeRender && afterBridgeRender(info);
},
async destroy(info) {
var _a, _b;
context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
dom: info.dom
});
if ((bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) && typeof (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) === "function") {
bridgeInfo.hooks.beforeBridgeDestroy(info);
}
const beforeBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeDestroy);
beforeBridgeDestroy && beforeBridgeDestroy(info);
if (context.atLeastReact18(React__namespace)) {

@@ -413,2 +457,4 @@ const root = rootMap.get(info.dom);

}
const afterBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeDestroy);
afterBridgeDestroy && afterBridgeDestroy(info);
},

@@ -415,0 +461,0 @@ rawComponent: bridgeInfo.rootComponent,

@@ -8,7 +8,14 @@ import { ComponentType } from 'react';

export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
render(info: RenderFnParams & any): Promise<void>;
destroy(info: {
dom: HTMLElement;
}): Promise<void>;
declare type BridgeHooks = {
beforeBridgeRender?: (params: RenderFnParams) => any;
afterBridgeRender?: (params: RenderFnParams) => any;
beforeBridgeDestroy?: (params: DestroyParams) => any;
afterBridgeDestroy?: (params: DestroyParams) => any;
};
export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): (params: {
hooks?: BridgeHooks;
}) => {
render(info: RenderParams): Promise<void>;
destroy(info: DestroyParams): Promise<void>;
rawComponent: React_2.ComponentType<T>;

@@ -25,2 +32,6 @@ __BRIDGE_FN__: (_args: T) => void;

declare type DestroyParams = {
dom: HTMLElement;
};
declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {

@@ -53,2 +64,3 @@ fallback?: never;

render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
hooks?: BridgeHooks;
};

@@ -70,4 +82,6 @@

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-9t7opEwi.js";
import { L as LoggerInstance, p as pathJoin, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
import * as ReactRouterDOM from "react-router-dom";
import { getInstance } from "@module-federation/runtime";
import ReactDOM from "react-dom";

@@ -101,7 +102,16 @@ const ErrorBoundaryContext = createContext(null);

}
function e() {
const t = new PopStateEvent("popstate", { state: window.history.state });
window.dispatchEvent(t);
}
const getModuleName = (id) => {
const idArray = id.split("/");
if (idArray.length < 2) {
return id;
}
return idArray[0] + "/" + idArray[1];
};
const getRootDomDefaultClassName = (moduleName) => {
const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
return `bridge-root-component-${name}`;
};
const RemoteAppWrapper = forwardRef(function(props, ref) {
const host = getInstance();
LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
const RemoteApp2 = () => {

@@ -124,5 +134,6 @@ LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });

const renderTimeout = setTimeout(() => {
var _a, _b, _c, _d;
const providerReturn = providerInfo();
providerInfoRef.current = providerReturn;
const renderProps = {
let renderProps = {
moduleName,

@@ -140,2 +151,12 @@ dom: rootRef.current,

);
if ((host == null ? void 0 : host.bridgeHook) && ((_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender)) {
const beforeBridgeRenderRes = (_d = (_c = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _c.lifecycle) == null ? void 0 : _d.beforeBridgeRender.emit({
...renderProps
});
const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
renderProps = {
...renderProps,
...extraProps
};
}
providerReturn.render(renderProps);

@@ -146,3 +167,3 @@ });

setTimeout(() => {
var _a, _b;
var _a, _b, _c, _d, _e, _f;
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {

@@ -153,3 +174,13 @@ LoggerInstance.log(

);
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
if ((host == null ? void 0 : host.bridgeHook) && ((_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.afterBridgeDestroy)) {
(_e = (_d = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy.emit({
moduleName,
dom: renderDom.current,
basename,
memoryRoute,
fallback,
...resProps
});
}
(_f = providerInfoRef.current) == null ? void 0 : _f.destroy({
dom: renderDom.current

@@ -161,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,

@@ -171,3 +203,3 @@ ref: rootRef

};
RemoteApp2["__APP_VERSION__"] = "0.6.14";
RemoteApp2["__APP_VERSION__"] = "0.6.11";
return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);

@@ -229,3 +261,3 @@ });

});
e();
f();
}

@@ -323,3 +355,3 @@ setPathname(location.pathname);

function createBridgeComponent(bridgeInfo) {
return () => {
return (params) => {
const rootMap = /* @__PURE__ */ new Map();

@@ -340,2 +372,3 @@ const RawComponent = (info) => {

async render(info) {
var _a, _b;
LoggerInstance.log(`createBridgeComponent render Info`, info);

@@ -350,2 +383,5 @@ const {

} = info;
const beforeBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeRender) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeRender);
const beforeBridgeRenderRes = beforeBridgeRender && beforeBridgeRender(info);
const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
const rootComponentWithErrorBoundary = (

@@ -361,3 +397,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error

},
propsInfo
propsInfo: { ...propsInfo, ...extraProps }
}

@@ -380,7 +416,15 @@ ))

}
const afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeRender);
afterBridgeRender && afterBridgeRender(info);
},
async destroy(info) {
var _a, _b;
LoggerInstance.log(`createBridgeComponent destroy Info`, {
dom: info.dom
});
if ((bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) && typeof (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) === "function") {
bridgeInfo.hooks.beforeBridgeDestroy(info);
}
const beforeBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeDestroy);
beforeBridgeDestroy && beforeBridgeDestroy(info);
if (atLeastReact18(React)) {

@@ -393,2 +437,4 @@ const root = rootMap.get(info.dom);

}
const afterBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeDestroy);
afterBridgeDestroy && afterBridgeDestroy(info);
},

@@ -395,0 +441,0 @@ rawComponent: bridgeInfo.rootComponent,

@@ -5,3 +5,3 @@ "use strict";

const ReactRouterDom$1 = require("react-router-dom/index.js");
const context = require("./context-BVnJi3LE.cjs");
const context = require("./context--mtFt3tp.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-9t7opEwi.js";
import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.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-BVnJi3LE.cjs");
const context = require("./context--mtFt3tp.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-9t7opEwi.js";
import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.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-BVnJi3LE.cjs");
const context = require("./context--mtFt3tp.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-9t7opEwi.js";
import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.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-20241101074502",
"version": "0.0.0-next-20241101093646",
"publishConfig": {

@@ -38,4 +38,3 @@ "access": "public"

"react-error-boundary": "^4.0.13",
"@module-federation/bridge-shared": "0.0.0-next-20241101074502",
"@module-federation/sdk": "0.0.0-next-20241101074502"
"@module-federation/bridge-shared": "0.0.0-next-20241101093646"
},

@@ -45,3 +44,4 @@ "peerDependencies": {

"react-dom": ">=16.9.0",
"react-router-dom": ">=4"
"react-router-dom": ">=4",
"@module-federation/runtime": "0.0.0-next-20241101093646"
},

@@ -48,0 +48,0 @@ "devDependencies": {

import React from 'react';
import { createLogger } from '@module-federation/sdk';
import { Logger } from '@module-federation/bridge-shared';
export const LoggerInstance = createLogger(
'[ Module Federation Bridge React ]',
);
export const LoggerInstance = new Logger('bridge-react');

@@ -8,0 +6,0 @@ type typeReact = typeof React;

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc