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

Comparing version 0.0.0-next-20240620060503 to 0.0.0-next-20240624115757

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20240620060503
+## 0.0.0-next-20240624115757
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240620060503
+- @module-federation/bridge-shared@0.0.0-next-20240624115757
+
+## 0.2.0
+
+### Minor Changes
+
+- d2ab821: feat(bridge): Supports exporting and loading of application-level modules (with routing), currently supports react and vue3
+
+### Patch Changes
+
+- Updated dependencies [d2ab821]
+  - @module-federation/bridge-shared@0.2.0

dist/index.cjs.js

@@ -25,2 +25,97 @@ "use strict";
 const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
+const ErrorBoundaryContext = React.createContext(null);
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = React.createElement(FallbackComponent, props);
+      } else if (fallback === null || React.isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return React.createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
 const RemoteApp = ({
@@ -87,4 +182,4 @@ name,
 };
-RemoteApp["__APP_VERSION__"] = "0.0.1";
-function createRemoteComponent(lazyComponent, info) {
+RemoteApp["__APP_VERSION__"] = "0.2.0";
+function createRemoteComponent(info) {
   return (props) => {
@@ -136,3 +231,3 @@ var _a;
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
@@ -142,28 +237,41 @@ props,
         });
-        const m2 = await lazyComponent();
-        const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent loadRemote info >>>`,
-          { basename, name: moduleName, module: m2, exportName, props }
-        );
-        const exportFn = m2[exportName];
-        if (exportName in m2 && typeof exportFn === "function") {
-          return {
-            default: () => /* @__PURE__ */ React.createElement(
-              RemoteApp,
-              {
-                name: moduleName,
-                dispathPopstate: enableDispathPopstate,
-                ...info,
-                ...props,
-                providerInfo: exportFn,
-                basename
-              }
-            )
-          };
+        try {
+          const m2 = await info.loader();
+          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+          context.LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m2, exportName, props }
+          );
+          const exportFn = m2[exportName];
+          if (exportName in m2 && typeof exportFn === "function") {
+            return {
+              default: () => /* @__PURE__ */ React.createElement(
+                RemoteApp,
+                {
+                  name: moduleName,
+                  dispathPopstate: enableDispathPopstate,
+                  ...info,
+                  ...props,
+                  providerInfo: exportFn,
+                  basename
+                }
+              )
+            };
+          } else {
+            context.LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m2, exportName, props }
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName
+              )}`
+            );
+          }
+        } catch (error) {
+          throw error;
         }
-        throw Error("module not found");
       });
     }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React.createElement(LazyComponent, null));
+    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, null)));
   };
@@ -170,0 +278,0 @@ }

dist/index.d.ts

@@ -0,4 +1,6 @@
+import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
+import { ErrorInfo } from 'react';
+import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
-import { ReactNode } from 'react';
 
@@ -14,3 +16,6 @@ export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
 
-export declare function createRemoteComponent<T, E extends keyof T>(lazyComponent: () => Promise<T>, info?: {
+export declare function createRemoteComponent<T, E extends keyof T>(info: {
+    loader: () => Promise<T>;
+    loading: default_2.ReactNode;
+    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
@@ -20,5 +25,28 @@ }): (props: {
     memoryRoute?: ProviderParams['memoryRoute'];
-    fallback: ReactNode;
 } & ("__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;
 
+declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
+    fallback?: never;
+    FallbackComponent: ComponentType<FallbackProps>;
+    fallbackRender?: never;
+};
+
+declare type ErrorBoundarySharedProps = PropsWithChildren<{
+    onError?: (error: Error, info: ErrorInfo) => void;
+    onReset?: (details: {
+        reason: "imperative-api";
+        args: any[];
+    } | {
+        reason: "keys";
+        prev: any[] | undefined;
+        next: any[] | undefined;
+    }) => void;
+    resetKeys?: any[];
+}>;
+
+declare type FallbackProps = {
+    error: any;
+    resetErrorBoundary: (...args: any[]) => void;
+};
+
 declare type ProviderFnParams<T> = {
@@ -25,0 +53,0 @@ rootComponent: React_2.ComponentType<T>;

dist/index.es.js

 import * as React from "react";
-import React__default, { useContext, useMemo, useRef, useState, useEffect } from "react";
+import React__default, { createContext, Component, createElement, isValidElement, useContext, useMemo, useRef, useState, useEffect } from "react";
 import * as ReactRouterDOM from "react-router-dom";
 import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import ReactDOM from "react-dom";
+const ErrorBoundaryContext = createContext(null);
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback === null || isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
 const RemoteApp = ({
@@ -67,4 +162,4 @@ name,
 };
-RemoteApp["__APP_VERSION__"] = "0.0.1";
-function createRemoteComponent(lazyComponent, info) {
+RemoteApp["__APP_VERSION__"] = "0.2.0";
+function createRemoteComponent(info) {
   return (props) => {
@@ -116,3 +211,3 @@ var _a;
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
@@ -122,28 +217,41 @@ props,
         });
-        const m2 = await lazyComponent();
-        const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent loadRemote info >>>`,
-          { basename, name: moduleName, module: m2, exportName, props }
-        );
-        const exportFn = m2[exportName];
-        if (exportName in m2 && typeof exportFn === "function") {
-          return {
-            default: () => /* @__PURE__ */ React__default.createElement(
-              RemoteApp,
-              {
-                name: moduleName,
-                dispathPopstate: enableDispathPopstate,
-                ...info,
-                ...props,
-                providerInfo: exportFn,
-                basename
-              }
-            )
-          };
+        try {
+          const m2 = await info.loader();
+          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m2, exportName, props }
+          );
+          const exportFn = m2[exportName];
+          if (exportName in m2 && typeof exportFn === "function") {
+            return {
+              default: () => /* @__PURE__ */ React__default.createElement(
+                RemoteApp,
+                {
+                  name: moduleName,
+                  dispathPopstate: enableDispathPopstate,
+                  ...info,
+                  ...props,
+                  providerInfo: exportFn,
+                  basename
+                }
+              )
+            };
+          } else {
+            LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m2, exportName, props }
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName
+              )}`
+            );
+          }
+        } catch (error) {
+          throw error;
         }
-        throw Error("module not found");
       });
     }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React__default.createElement(LazyComponent, null));
+    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, null)));
   };
@@ -150,0 +258,0 @@ }

dist/router.cjs.js

@@ -60,11 +60,14 @@ "use strict";
   });
+  const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
   if (!routerContextProps)
-    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { ...props });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom__namespace.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
-    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { router: MemeoryRouterInstance });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
-    const BrowserRouterInstance = ReactRouterDom__namespace.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
@@ -74,9 +77,3 @@ future: router.future,
     });
-    return /* @__PURE__ */ React.createElement(
-      ReactRouterDom__namespace.RouterProvider,
-      {
-        ...propsRes,
-        router: BrowserRouterInstance
-      }
-    );
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
   }
@@ -83,0 +80,0 @@ }

dist/router.es.js

@@ -42,11 +42,14 @@ import React__default, { useContext } from "react";
   });
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
   if (!routerContextProps)
-    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { ...props });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
-    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { router: MemeoryRouterInstance });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
-    const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
@@ -56,9 +59,3 @@ future: router.future,
     });
-    return /* @__PURE__ */ React__default.createElement(
-      ReactRouterDom.RouterProvider,
-      {
-        ...propsRes,
-        router: BrowserRouterInstance
-      }
-    );
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
   }
@@ -65,0 +62,0 @@ }

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240620060503",
+  "version": "0.0.0-next-20240624115757",
   "publishConfig": {
@@ -28,3 +28,3 @@ "access": "public"
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240620060503"
+    "@module-federation/bridge-shared": "0.0.0-next-20240624115757"
   },
@@ -31,0 +31,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64410

increased by16.57%

Lines of code

1802

increased by15.96%

Dependency changes

• + Added@module-federation/bridge-shared@0.0.0-next-20240624115757(transitive)

• - Removed@module-federation/bridge-shared@0.0.0-next-20240620060503(transitive)

• Updated@module-federation/bridge-shared@0.0.0-next-20240624115757