New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@module-federation/bridge-react

Package Overview
Dependencies
Maintainers
0
Versions
372
Alerts
File Explorer

Advanced tools

License
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-20240822063818 to 0.0.0-next-20240822090000

13

CHANGELOG.md
# @module-federation/bridge-react
## 0.0.0-next-20240822063818
## 0.0.0-next-20240822090000
### Patch Changes
- @module-federation/bridge-shared@0.0.0-next-20240822063818
- 3082116: feat: support module isolated reported
- @module-federation/bridge-shared@0.0.0-next-20240822090000
## 0.5.0
### Patch Changes
- 49d6135: feat(@module-federation/bridge): enhance Bridge capabilities and fix some issues
- Updated dependencies [49d6135]
- @module-federation/bridge-shared@0.5.0
## 0.4.0

@@ -18,0 +11,0 @@

254

dist/index.cjs.js

@@ -120,67 +120,51 @@ "use strict";

}
const RemoteAppWrapper = React.forwardRef(function(props, ref) {
const RemoteApp2 = () => {
context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
const {
moduleName,
memoryRoute,
basename,
providerInfo,
className,
style,
fallback,
...resProps
} = props;
const rootRef = ref && "current" in ref ? ref : React.useRef(null);
const renderDom = React.useRef(null);
const providerInfoRef = React.useRef(null);
React.useEffect(() => {
const renderTimeout = setTimeout(() => {
const providerReturn = providerInfo();
providerInfoRef.current = providerReturn;
const renderProps = {
moduleName,
dom: rootRef.current,
basename,
memoryRoute,
fallback,
...resProps
};
renderDom.current = rootRef.current;
context.LoggerInstance.log(
`createRemoteComponent LazyComponent render >>>`,
renderProps
);
providerReturn.render(renderProps);
const RemoteApp = ({
name,
memoryRoute,
basename,
providerInfo,
...resProps
}) => {
const rootRef = React.useRef(null);
const renderDom = React.useRef(null);
const providerInfoRef = React.useRef(null);
React.useEffect(() => {
const renderTimeout = setTimeout(() => {
const providerReturn = providerInfo();
providerInfoRef.current = providerReturn;
const renderProps = {
name,
dom: rootRef.current,
basename,
memoryRoute,
...resProps
};
renderDom.current = rootRef.current;
context.LoggerInstance.log(
`createRemoteComponent LazyComponent render >>>`,
renderProps
);
providerReturn.render(renderProps);
});
return () => {
clearTimeout(renderTimeout);
setTimeout(() => {
var _a, _b;
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
context.LoggerInstance.log(
`createRemoteComponent LazyComponent destroy >>>`,
{ name, basename, dom: renderDom.current }
);
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
dom: renderDom.current
});
}
});
return () => {
clearTimeout(renderTimeout);
setTimeout(() => {
var _a, _b;
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
context.LoggerInstance.log(
`createRemoteComponent LazyComponent destroy >>>`,
{ moduleName, basename, dom: renderDom.current }
);
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
dom: renderDom.current
});
}
});
};
}, []);
return /* @__PURE__ */ React.createElement(
"div",
{
className: props == null ? void 0 : props.className,
style: props == null ? void 0 : props.style,
ref: rootRef
}
);
};
RemoteApp2["__APP_VERSION__"] = "0.5.0";
return /* @__PURE__ */ React.createElement(RemoteApp2, null);
});
};
}, []);
return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
};
RemoteApp["__APP_VERSION__"] = "0.4.0";
function withRouterData(WrappedComponent) {
const Component = React.forwardRef(function(props, ref) {
return (props) => {
var _a;

@@ -243,9 +227,6 @@ let enableDispathPopstate = false;

}
return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename, ref });
});
return React.forwardRef(function(props, ref) {
return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
});
return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
};
}
const RemoteApp = withRouterData(RemoteAppWrapper);
const RemoteApp$1 = withRouterData(RemoteApp);
function createLazyRemoteComponent(info) {

@@ -267,11 +248,9 @@ const exportName = (info == null ? void 0 : info.export) || "default";

if (exportName in m2 && typeof exportFn === "function") {
const RemoteAppComponent = React.forwardRef((props, ref) => {
const RemoteAppComponent = React.forwardRef((props, _ref) => {
return /* @__PURE__ */ React.createElement(
RemoteApp,
RemoteApp$1,
{
moduleName,
name: moduleName,
providerInfo: exportFn,
exportName: info.export || "default",
fallback: info.fallback,
ref,
...props

@@ -301,8 +280,6 @@ }

function createRemoteComponent(info) {
return React.forwardRef(
(props, ref) => {
const LazyComponent = createLazyRemoteComponent(info);
return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
}
);
const LazyComponent = createLazyRemoteComponent(info);
return (props) => {
return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props })));
};
}

@@ -334,72 +311,65 @@ var client = {};

function createBridgeComponent(bridgeInfo) {
let provider;
return () => {
const rootMap = /* @__PURE__ */ new Map();
const RawComponent = (info) => {
const { appInfo, propsInfo, ...restProps } = info;
const { moduleName, memoryRoute, basename = "/" } = appInfo;
return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(
bridgeInfo.rootComponent,
{
...propsInfo,
basename,
...restProps
}
));
const { appInfo, propsInfo } = info;
const { name, memoryRoute, basename = "/" } = appInfo;
return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
};
return {
async render(info) {
context.LoggerInstance.log(`createBridgeComponent render Info`, info);
const {
moduleName,
dom,
basename,
memoryRoute,
fallback,
...propsInfo
} = info;
const rootComponentWithErrorBoundary = (
// set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
/* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
RawComponent,
{
appInfo: {
moduleName,
basename,
memoryRoute
},
propsInfo
}
))
);
if (context.atLeastReact18(React__namespace)) {
if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
Promise.resolve(
bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
).then((root) => rootMap.set(info.dom, root));
} else {
if (!provider) {
provider = {
render(info) {
context.LoggerInstance.log(`createBridgeComponent render Info`, info);
const { name, basename, memoryRoute, ...propsInfo } = info;
if (context.atLeastReact18(React__namespace)) {
const root = client.createRoot(info.dom);
root.render(rootComponentWithErrorBoundary);
rootMap.set(info.dom, root);
root.render(
/* @__PURE__ */ React__namespace.createElement(
RawComponent,
{
propsInfo,
appInfo: {
name,
basename,
memoryRoute
}
}
)
);
} else {
ReactDOM.render(
/* @__PURE__ */ React__namespace.createElement(
RawComponent,
{
propsInfo,
appInfo: {
name,
basename,
memoryRoute
}
}
),
info.dom
);
}
} else {
const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
},
destroy(info) {
context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
dom: info.dom
});
if (context.atLeastReact18(React__namespace)) {
const root = rootMap.get(info.dom);
root == null ? void 0 : root.unmount();
} else {
ReactDOM.unmountComponentAtNode(info.dom);
}
},
rawComponent: bridgeInfo.rootComponent,
__BRIDGE_FN__: (_args) => {
}
},
async destroy(info) {
context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
dom: info.dom
});
if (context.atLeastReact18(React__namespace)) {
const root = rootMap.get(info.dom);
root == null ? void 0 : root.unmount();
rootMap.delete(info.dom);
} else {
ReactDOM.unmountComponentAtNode(info.dom);
}
},
rawComponent: bridgeInfo.rootComponent,
__BRIDGE_FN__: (_args) => {
}
};
};
}
return provider;
};

@@ -406,0 +376,0 @@ }

31

dist/index.d.ts
import { ComponentType } from 'react';
import { default as default_2 } from 'react';
import { default as default_3 } from 'react-dom/client';
import { ErrorInfo } from 'react';

@@ -8,10 +7,3 @@ import { PropsWithChildren } from 'react';

export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
render(info: RenderFnParams & any): Promise<void>;
destroy(info: {
dom: HTMLElement;
}): Promise<void>;
rawComponent: React_2.ComponentType<T>;
__BRIDGE_FN__: (_args: T) => void;
};
export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => Provider<T>;

@@ -23,3 +15,6 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {

export?: E;
}): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})> & default_2.RefAttributes<HTMLDivElement>>;
}): (props: {
basename?: ProviderParams['basename'];
memoryRoute?: ProviderParams['memoryRoute'];
} & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})) => default_2.JSX.Element;

@@ -50,9 +45,17 @@ declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {

declare interface Provider<T> {
render(info: any): void;
destroy(info: {
dom: HTMLElement;
}): void;
rawComponent: React_2.ComponentType;
__BRIDGE_FN__: (_args: T) => void;
}
declare type ProviderFnParams<T> = {
rootComponent: React_2.ComponentType<T>;
render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
};
export declare interface ProviderParams {
moduleName?: string;
name?: string;
basename?: string;

@@ -62,4 +65,2 @@ memoryRoute?: {

};
style?: React.CSSProperties;
className?: string;
}

@@ -71,4 +72,2 @@

declare type RootType = HTMLElement | default_3.Root;
export { }

258

dist/index.es.js
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, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
import React__default, { createContext, Component, createElement, isValidElement, useContext, useState, useEffect, useRef, forwardRef } from "react";
import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
import * as ReactRouterDOM from "react-router-dom";

@@ -101,67 +101,51 @@ import ReactDOM from "react-dom";

}
const RemoteAppWrapper = forwardRef(function(props, ref) {
const RemoteApp2 = () => {
LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
const {
moduleName,
memoryRoute,
basename,
providerInfo,
className,
style,
fallback,
...resProps
} = props;
const rootRef = ref && "current" in ref ? ref : useRef(null);
const renderDom = useRef(null);
const providerInfoRef = useRef(null);
useEffect(() => {
const renderTimeout = setTimeout(() => {
const providerReturn = providerInfo();
providerInfoRef.current = providerReturn;
const renderProps = {
moduleName,
dom: rootRef.current,
basename,
memoryRoute,
fallback,
...resProps
};
renderDom.current = rootRef.current;
LoggerInstance.log(
`createRemoteComponent LazyComponent render >>>`,
renderProps
);
providerReturn.render(renderProps);
const RemoteApp = ({
name,
memoryRoute,
basename,
providerInfo,
...resProps
}) => {
const rootRef = useRef(null);
const renderDom = useRef(null);
const providerInfoRef = useRef(null);
useEffect(() => {
const renderTimeout = setTimeout(() => {
const providerReturn = providerInfo();
providerInfoRef.current = providerReturn;
const renderProps = {
name,
dom: rootRef.current,
basename,
memoryRoute,
...resProps
};
renderDom.current = rootRef.current;
LoggerInstance.log(
`createRemoteComponent LazyComponent render >>>`,
renderProps
);
providerReturn.render(renderProps);
});
return () => {
clearTimeout(renderTimeout);
setTimeout(() => {
var _a, _b;
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
LoggerInstance.log(
`createRemoteComponent LazyComponent destroy >>>`,
{ name, basename, dom: renderDom.current }
);
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
dom: renderDom.current
});
}
});
return () => {
clearTimeout(renderTimeout);
setTimeout(() => {
var _a, _b;
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
LoggerInstance.log(
`createRemoteComponent LazyComponent destroy >>>`,
{ moduleName, basename, dom: renderDom.current }
);
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
dom: renderDom.current
});
}
});
};
}, []);
return /* @__PURE__ */ React__default.createElement(
"div",
{
className: props == null ? void 0 : props.className,
style: props == null ? void 0 : props.style,
ref: rootRef
}
);
};
RemoteApp2["__APP_VERSION__"] = "0.5.0";
return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
});
};
}, []);
return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
};
RemoteApp["__APP_VERSION__"] = "0.4.0";
function withRouterData(WrappedComponent) {
const Component2 = forwardRef(function(props, ref) {
return (props) => {
var _a;

@@ -224,9 +208,6 @@ let enableDispathPopstate = false;

}
return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
});
return forwardRef(function(props, ref) {
return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
});
return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
};
}
const RemoteApp = withRouterData(RemoteAppWrapper);
const RemoteApp$1 = withRouterData(RemoteApp);
function createLazyRemoteComponent(info) {

@@ -248,11 +229,9 @@ const exportName = (info == null ? void 0 : info.export) || "default";

if (exportName in m2 && typeof exportFn === "function") {
const RemoteAppComponent = forwardRef((props, ref) => {
const RemoteAppComponent = forwardRef((props, _ref) => {
return /* @__PURE__ */ React__default.createElement(
RemoteApp,
RemoteApp$1,
{
moduleName,
name: moduleName,
providerInfo: exportFn,
exportName: info.export || "default",
fallback: info.fallback,
ref,
...props

@@ -282,8 +261,6 @@ }

function createRemoteComponent(info) {
return forwardRef(
(props, ref) => {
const LazyComponent = createLazyRemoteComponent(info);
return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref })));
}
);
const LazyComponent = createLazyRemoteComponent(info);
return (props) => {
return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props })));
};
}

@@ -315,72 +292,65 @@ var client = {};

function createBridgeComponent(bridgeInfo) {
let provider;
return () => {
const rootMap = /* @__PURE__ */ new Map();
const RawComponent = (info) => {
const { appInfo, propsInfo, ...restProps } = info;
const { moduleName, memoryRoute, basename = "/" } = appInfo;
return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
bridgeInfo.rootComponent,
{
...propsInfo,
basename,
...restProps
}
));
const { appInfo, propsInfo } = info;
const { name, memoryRoute, basename = "/" } = appInfo;
return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
};
return {
async render(info) {
LoggerInstance.log(`createBridgeComponent render Info`, info);
const {
moduleName,
dom,
basename,
memoryRoute,
fallback,
...propsInfo
} = info;
const rootComponentWithErrorBoundary = (
// set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
/* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
RawComponent,
{
appInfo: {
moduleName,
basename,
memoryRoute
},
propsInfo
}
))
);
if (atLeastReact18(React)) {
if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
Promise.resolve(
bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
).then((root) => rootMap.set(info.dom, root));
} else {
if (!provider) {
provider = {
render(info) {
LoggerInstance.log(`createBridgeComponent render Info`, info);
const { name, basename, memoryRoute, ...propsInfo } = info;
if (atLeastReact18(React)) {
const root = client.createRoot(info.dom);
root.render(rootComponentWithErrorBoundary);
rootMap.set(info.dom, root);
root.render(
/* @__PURE__ */ React.createElement(
RawComponent,
{
propsInfo,
appInfo: {
name,
basename,
memoryRoute
}
}
)
);
} else {
ReactDOM.render(
/* @__PURE__ */ React.createElement(
RawComponent,
{
propsInfo,
appInfo: {
name,
basename,
memoryRoute
}
}
),
info.dom
);
}
} else {
const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
},
destroy(info) {
LoggerInstance.log(`createBridgeComponent destroy Info`, {
dom: info.dom
});
if (atLeastReact18(React)) {
const root = rootMap.get(info.dom);
root == null ? void 0 : root.unmount();
} else {
ReactDOM.unmountComponentAtNode(info.dom);
}
},
rawComponent: bridgeInfo.rootComponent,
__BRIDGE_FN__: (_args) => {
}
},
async destroy(info) {
LoggerInstance.log(`createBridgeComponent destroy Info`, {
dom: info.dom
});
if (atLeastReact18(React)) {
const root = rootMap.get(info.dom);
root == null ? void 0 : root.unmount();
rootMap.delete(info.dom);
} else {
ReactDOM.unmountComponentAtNode(info.dom);
}
},
rawComponent: bridgeInfo.rootComponent,
__BRIDGE_FN__: (_args) => {
}
};
};
}
return provider;
};

@@ -387,0 +357,0 @@ }

20

dist/router.cjs.js

@@ -23,10 +23,12 @@ "use strict";

const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
function WrapperRouter(props) {
function WraperRouter(props) {
const { basename, ...propsRes } = props;
const routerContextProps = React.useContext(context.RouterContext) || {};
context.LoggerInstance.log(`WrapperRouter info >>>`, {
context.LoggerInstance.log(`WraperRouter info >>>`, {
...routerContextProps,
routerContextProps,
WrapperRouterProps: props
WraperRouterProps: props
});
if (!routerContextProps)
return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.BrowserRouter, { ...props });
if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {

@@ -49,10 +51,10 @@ return /* @__PURE__ */ React.createElement(

}
function WrapperRouterProvider(props) {
function WraperRouterProvider(props) {
const { router, ...propsRes } = props;
const routerContextProps = React.useContext(context.RouterContext) || {};
const routers = router.routes;
context.LoggerInstance.log(`WrapperRouterProvider info >>>`, {
context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
...routerContextProps,
routerContextProps,
WrapperRouterProviderProps: props,
WraperRouterProviderProps: props,
router

@@ -63,2 +65,4 @@ });

const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
if (!routerContextProps)
return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
if (routerContextProps.memoryRoute) {

@@ -78,4 +82,4 @@ const MemeoryRouterInstance = createMemoryRouter(routers, {

}
exports.BrowserRouter = WrapperRouter;
exports.RouterProvider = WrapperRouterProvider;
exports.BrowserRouter = WraperRouter;
exports.RouterProvider = WraperRouterProvider;
Object.keys(ReactRouterDom).forEach((k) => {

@@ -82,0 +86,0 @@ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))

20

dist/router.es.js

@@ -5,10 +5,12 @@ import React__default, { useContext } from "react";

import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
function WrapperRouter(props) {
function WraperRouter(props) {
const { basename, ...propsRes } = props;
const routerContextProps = useContext(RouterContext) || {};
LoggerInstance.log(`WrapperRouter info >>>`, {
LoggerInstance.log(`WraperRouter info >>>`, {
...routerContextProps,
routerContextProps,
WrapperRouterProps: props
WraperRouterProps: props
});
if (!routerContextProps)
return /* @__PURE__ */ React__default.createElement(ReactRouterDom.BrowserRouter, { ...props });
if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {

@@ -31,10 +33,10 @@ return /* @__PURE__ */ React__default.createElement(

}
function WrapperRouterProvider(props) {
function WraperRouterProvider(props) {
const { router, ...propsRes } = props;
const routerContextProps = useContext(RouterContext) || {};
const routers = router.routes;
LoggerInstance.log(`WrapperRouterProvider info >>>`, {
LoggerInstance.log(`WraperRouterProvider info >>>`, {
...routerContextProps,
routerContextProps,
WrapperRouterProviderProps: props,
WraperRouterProviderProps: props,
router

@@ -45,2 +47,4 @@ });

const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
if (!routerContextProps)
return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
if (routerContextProps.memoryRoute) {

@@ -61,4 +65,4 @@ const MemeoryRouterInstance = createMemoryRouter(routers, {

export {
WrapperRouter as BrowserRouter,
WrapperRouterProvider as RouterProvider
WraperRouter as BrowserRouter,
WraperRouterProvider as RouterProvider
};

14

package.json
{
"name": "@module-federation/bridge-react",
"version": "0.0.0-next-20240822063818",
"version": "0.0.0-next-20240822090000",
"publishConfig": {

@@ -23,12 +23,2 @@ "access": "public"

},
"./router-v5": {
"types": "./dist/router-v5.d.ts",
"import": "./dist/router-v5.es.js",
"require": "./dist/router-v5.cjs.js"
},
"./router-v6": {
"types": "./dist/router-v6.d.ts",
"import": "./dist/router-v6.es.js",
"require": "./dist/router-v6.cjs.js"
},
"./*": "./*"

@@ -39,3 +29,3 @@ },

"react-error-boundary": "^4.0.13",
"@module-federation/bridge-shared": "0.0.0-next-20240822063818"
"@module-federation/bridge-shared": "0.0.0-next-20240822090000"
},

@@ -42,0 +32,0 @@ "peerDependencies": {

29

vite.config.ts

@@ -25,4 +25,2 @@ import { defineConfig } from 'vite';

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'),
},

@@ -38,30 +36,3 @@ formats: ['cjs', 'es'],

'react-router-dom/',
'react-router-dom/index.js',
'react-router-dom/dist/index.js',
],
plugins: [
{
name: 'modify-output-plugin',
generateBundle(options, bundle) {
for (const fileName in bundle) {
const chunk = bundle[fileName];
// if (fileName.includes('router-v6') && chunk.type === 'chunk') {
// chunk.code = chunk.code.replace(
// // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
// /react-router-dom\/(?=[\'\"\`])/g,
// 'react-router-dom/dist/index.js',
// );
// }
if (fileName.includes('router-v5') && chunk.type === 'chunk') {
chunk.code = chunk.code.replace(
// Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v5 dist file structure
/react-router-dom\/(?=[\'\"\`])/g,
'react-router-dom/index.js',
);
}
}
},
},
],
},

@@ -68,0 +39,0 @@ minify: false,

dist/router-v5.cjs.js
dist/router-v5.d.ts
dist/router-v5.es.js
dist/router-v6.cjs.js
dist/router-v6.d.ts
dist/router-v6.es.js
src/router-v5.tsx
src/router-v6.tsx
__tests__/bridge.spec.tsx

Sorry, the diff of this file is not supported yet

src/create.tsx

Sorry, the diff of this file is not supported yet

src/provider.tsx

Sorry, the diff of this file is not supported yet

src/remote/index.tsx

Sorry, the diff of this file is not supported yet

src/router.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc