@module-federation/bridge-react 0.0.0-next-20240619092013

package/dist/index.es.js

@@ -0,0 +1,175 @@
+import React, { useContext, useMemo, useRef, useState, useEffect } from "react";
+import { UNSAFE_RouteContext, useLocation } from "react-router-dom";
+import { L as LoggerInstance, f, R as RouterContext } from "./context-CoFgcMIF.js";
+import require$$0 from "react-dom";
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  ...resProps
+}) => {
+  const rootRef = useRef(null);
+  const renderDom = useRef(null);
+  const location = useLocation();
+  const [pathname, setPathname] = useState(location.pathname);
+  const providerInfoRef = useRef(null);
+  useEffect(() => {
+    if (pathname !== "" && pathname !== location.pathname) {
+      LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+        name,
+        pathname: location.pathname
+      });
+      f();
+    }
+    setPathname(location.pathname);
+  }, [location]);
+  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 /* @__PURE__ */ React.createElement("div", { ref: rootRef });
+};
+RemoteApp["__APP_VERSION__"] = "0.0.1";
+function createRemoteComponent(lazyComponent, info) {
+  return (props) => {
+    const exportName = (info == null ? void 0 : info.export) || "default";
+    const routerContextVal = useContext(UNSAFE_RouteContext);
+    let basename = "/";
+    if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+      basename = routerContextVal.matches[0].pathnameBase;
+    }
+    const LazyComponent = useMemo(() => {
+      return React.lazy(async () => {
+        LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+          basename,
+          lazyComponent,
+          exportName,
+          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.createElement(
+              RemoteApp,
+              {
+                name: moduleName,
+                ...info,
+                ...props,
+                providerInfo: exportFn,
+                basename
+              }
+            )
+          };
+        }
+        throw Error("module not found");
+      });
+    }, [exportName, basename, props.memoryRoute]);
+    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React.createElement(LazyComponent, null));
+  };
+}
+var client = {};
+var m = require$$0;
+if (process.env.NODE_ENV === "production") {
+  client.createRoot = m.createRoot;
+  client.hydrateRoot = m.hydrateRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  client.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  client.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  return () => {
+    const rootMap = /* @__PURE__ */ new Map();
+    const RawComponent = (info) => {
+      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 {
+      render(info) {
+        LoggerInstance.log(`createBridgeComponent render Info`, info);
+        const root = client.createRoot(info.dom);
+        rootMap.set(info.dom, root);
+        const { name, basename, memoryRoute, ...propsInfo } = info;
+        root.render(
+          /* @__PURE__ */ React.createElement(
+            RawComponent,
+            {
+              propsInfo,
+              appInfo: {
+                name,
+                basename,
+                memoryRoute
+              }
+            }
+          )
+        );
+      },
+      destroy(info) {
+        LoggerInstance.log(`createBridgeComponent destroy Info`, {
+          dom: info.dom
+        });
+        const root = rootMap.get(info.dom);
+        root == null ? void 0 : root.unmount();
+      },
+      rawComponent: bridgeInfo.rootComponent,
+      __BRIDGE_FN__: (_args) => {
+      }
+    };
+  };
+}
+export {
+  createBridgeComponent,
+  createRemoteComponent
+};

package/dist/router.cjs.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ReactRouterDom = require("react-router-dom/");
+const context = require("./context-C7FfFcIe.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  context.LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.BrowserRouter, { ...props });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom__namespace.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ReactRouterDom__namespace.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  const routers = router.routes;
+  context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { ...props });
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = ReactRouterDom__namespace.createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = ReactRouterDom__namespace.createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom__namespace.RouterProvider,
+      {
+        ...propsRes,
+        router: BrowserRouterInstance
+      }
+    );
+  }
+}
+exports.BrowserRouter = WraperRouter;
+exports.RouterProvider = WraperRouterProvider;
+Object.keys(ReactRouterDom).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => ReactRouterDom[k]
+    });
+});

package/dist/router.d.ts

@@ -0,0 +1,11 @@
+import { default as default_2 } from 'react';
+import * as ReactRouterDom from 'react-router-dom/';
+
+export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
+
+export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
+
+
+export * from "react-router-dom/";
+
+export { }

package/dist/router.es.js

@@ -0,0 +1,67 @@
+import React, { useContext } from "react";
+import * as ReactRouterDom from "react-router-dom/";
+export * from "react-router-dom/";
+import { R as RouterContext, L as LoggerInstance } from "./context-CoFgcMIF.js";
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(ReactRouterDom.BrowserRouter, { ...props });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ReactRouterDom.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(ReactRouterDom.RouterProvider, { ...props });
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React.createElement(ReactRouterDom.RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom.RouterProvider,
+      {
+        ...propsRes,
+        router: BrowserRouterInstance
+      }
+    );
+  }
+}
+export {
+  WraperRouter as BrowserRouter,
+  WraperRouterProvider as RouterProvider
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@module-federation/bridge-react",
+  "version": "0.0.0-next-20240619092013",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "zhouxiao <codingzx@gmail.com>",
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./router": {
+      "types": "./dist/router.d.ts",
+      "import": "./dist/router.es.js",
+      "require": "./dist/router.cjs.js"
+    },
+    "./*": "./*"
+  },
+  "dependencies": {
+    "@loadable/component": "^5.16.4",
+    "react-error-boundary": "^4.0.13",
+    "@module-federation/bridge-shared": "0.0.0-next-20240619092013"
+  },
+  "peerDependencies": {
+    "react": "=18",
+    "react-dom": "=18",
+    "react-router-dom": ">=5"
+  },
+  "devDependencies": {
+    "@testing-library/react": "15.0.7",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "jsdom": "^24.1.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-router-dom": "6.22.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

package/project.json

@@ -0,0 +1,27 @@
+{
+  "name": "bridge-react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/bridge/bridge-react/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run build --prefix packages/bridge/bridge-react"]
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": false,
+        "commands": [
+          {
+            "command": "vitest run -c packages/bridge/bridge-react/vitest.config.ts",
+            "forwardAllArgs": false
+          }
+        ]
+      }
+    }
+  },
+  "tags": ["type:pkg"]
+}

package/src/.eslintrc.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  root: true,
+  extends: ['@modern-js-app'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['../tsconfig.json'],
+  },
+};

package/src/context.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProviderParams } from '@module-federation/bridge-shared';
+
+export const RouterContext = React.createContext<ProviderParams | null>(null);

package/src/create.tsx

@@ -0,0 +1,178 @@
+import React, {
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { UNSAFE_RouteContext, useLocation } from 'react-router-dom';
+import type { ProviderParams } from '@module-federation/bridge-shared';
+import { LoggerInstance } from './utils';
+import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
+
+declare const __APP_VERSION__: string;
+
+export interface RenderFnParams extends ProviderParams {
+  dom?: any;
+}
+
+interface RemoteModule {
+  provider: () => {
+    render: (
+      info: ProviderParams & {
+        dom: any;
+      },
+    ) => void;
+    destroy: (info: { dom: any }) => void;
+  };
+}
+
+interface RemoteAppParams {
+  name: string;
+  providerInfo: NonNullable<RemoteModule['provider']>;
+}
+
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  ...resProps
+}: RemoteAppParams & ProviderParams) => {
+  const rootRef = useRef(null);
+  const renderDom = useRef(null);
+  const location = useLocation();
+  const [pathname, setPathname] = useState(location.pathname);
+  const providerInfoRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (pathname !== '' && pathname !== location.pathname) {
+      LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+        name,
+        pathname: location.pathname,
+      });
+      dispatchPopstateEnv();
+    }
+    setPathname(location.pathname);
+  }, [location]);
+
+  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(() => {
+        if (providerInfoRef.current?.destroy) {
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent destroy >>>`,
+            { name, basename, dom: renderDom.current },
+          );
+          providerInfoRef.current?.destroy({
+            dom: renderDom.current,
+          });
+        }
+      });
+    };
+  }, []);
+
+  //@ts-ignore
+  return <div ref={rootRef}></div>;
+};
+
+(RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
+
+export function createRemoteComponent<T, E extends keyof T>(
+  lazyComponent: () => Promise<T>,
+  info?: {
+    export?: E;
+  },
+) {
+  type ExportType = T[E] extends (...args: any) => any
+    ? ReturnType<T[E]>
+    : never;
+  type RawComponentType = '__BRIDGE_FN__' extends keyof ExportType
+    ? ExportType['__BRIDGE_FN__'] extends (...args: any) => any
+      ? Parameters<ExportType['__BRIDGE_FN__']>[0]
+      : {}
+    : {};
+
+  return (
+    props: {
+      basename?: ProviderParams['basename'];
+      memoryRoute?: ProviderParams['memoryRoute'];
+      fallback: ReactNode;
+    } & RawComponentType,
+  ) => {
+    const exportName = info?.export || 'default';
+    const routerContextVal = useContext(UNSAFE_RouteContext);
+    let basename = '/';
+    if (
+      routerContextVal.matches[0] &&
+      routerContextVal.matches[0].pathnameBase
+    ) {
+      basename = routerContextVal.matches[0].pathnameBase;
+    }
+
+    const LazyComponent = useMemo(() => {
+      //@ts-ignore
+      return React.lazy(async () => {
+        LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+          basename,
+          lazyComponent,
+          exportName,
+          props,
+        });
+        const m = (await lazyComponent()) as RemoteModule;
+        // @ts-ignore
+        const moduleName = m && m[Symbol.for('mf_module_id')];
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent loadRemote info >>>`,
+          { basename, name: moduleName, module: m, exportName, props },
+        );
+
+        // @ts-ignore
+        const exportFn = m[exportName] as any;
+
+        if (exportName in m && typeof exportFn === 'function') {
+          return {
+            default: () => (
+              <RemoteApp
+                name={moduleName}
+                {...info}
+                {...props}
+                providerInfo={exportFn}
+                basename={basename}
+              />
+            ),
+          };
+        }
+
+        throw Error('module not found');
+      });
+    }, [exportName, basename, props.memoryRoute]);
+
+    //@ts-ignore
+    return (
+      <React.Suspense fallback={props.fallback}>
+        <LazyComponent />
+      </React.Suspense>
+    );
+  };
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export { createRemoteComponent } from './create';
+export { createBridgeComponent } from './provider';
+export type {
+  ProviderParams,
+  RenderFnParams,
+} from '@module-federation/bridge-shared';

package/src/modern-app-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types='@modern-js/module-tools/types' />
+/// <reference types='@modern-js/plugin-testing/types' />