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

package/src/provider.tsx

@@ -0,0 +1,67 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterContext } from './context';
+import type {
+  ProviderParams,
+  RenderFnParams,
+} from '@module-federation/bridge-shared';
+import { LoggerInstance } from './utils';
+
+type ProviderFnParams<T> = {
+  rootComponent: React.ComponentType<T>;
+};
+
+export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
+  return () => {
+    const rootMap = new Map<any, ReactDOM.Root>();
+
+    const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
+      const { appInfo, propsInfo } = info;
+      const { name, memoryRoute, basename = '/' } = appInfo;
+
+      return (
+        <RouterContext.Provider value={{ name, basename, memoryRoute }}>
+          <bridgeInfo.rootComponent {...propsInfo} basename={basename} />
+        </RouterContext.Provider>
+      );
+    };
+
+    return {
+      render(info: RenderFnParams & any) {
+        LoggerInstance.log(`createBridgeComponent render Info`, info);
+        const root = ReactDOM.createRoot(info.dom);
+        rootMap.set(info.dom, root);
+        const { name, basename, memoryRoute, ...propsInfo } = info;
+        root.render(
+          <RawComponent
+            propsInfo={propsInfo}
+            appInfo={{
+              name,
+              basename,
+              memoryRoute,
+            }}
+          />,
+        );
+      },
+      destroy(info: { dom: HTMLElement }) {
+        LoggerInstance.log(`createBridgeComponent destroy Info`, {
+          dom: info.dom,
+        });
+        const root = rootMap.get(info.dom);
+        root?.unmount();
+      },
+      rawComponent: bridgeInfo.rootComponent,
+      __BRIDGE_FN__: (_args: T) => {},
+    };
+  };
+}
+
+export function ShadowRoot(info: { children: () => JSX.Element }) {
+  const [root] = useState(null);
+  const domRef = useRef(null);
+  useLayoutEffect(() => {});
+
+  return <div ref={domRef}>{root && <info.children />}</div>;
+}
+
+// function ShadowContent() {}

package/src/router.tsx

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+import * as ReactRouterDom from 'react-router-dom/';
+import { RouterContext } from './context';
+import { LoggerInstance } from './utils';
+
+function WraperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props,
+  });
+  if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router,
+  });
+  if (!routerContextProps) return <ReactRouterDom.RouterProvider {...props} />;
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
+      initialEntries: [routerContextProps?.memoryRoute.entryPath],
+    });
+    return <ReactRouterDom.RouterProvider router={MemeoryRouterInstance} />;
+  } else {
+    const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return (
+      <ReactRouterDom.RouterProvider
+        {...propsRes}
+        router={BrowserRouterInstance}
+      />
+    );
+  }
+}
+
+export * from 'react-router-dom/';
+
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

package/src/utils.ts

@@ -0,0 +1,3 @@
+import { Logger } from '@module-federation/bridge-shared';
+
+export const LoggerInstance = new Logger('bridge-react');

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+
+    /* Bundler mode */
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+
+    "declarationDir": "./dist/types",
+    "rootDir": "./src",
+    "module": "commonjs",
+    "target": "es5",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"],
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/remoteApp.tsx",
+    "src/create.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import dts from 'vite-plugin-dts';
+import react from '@vitejs/plugin-react';
+import packageJson from './package.json';
+
+const perDepsKeys = Object.keys(packageJson.peerDependencies);
+
+export default defineConfig({
+  plugins: [
+    dts({
+      rollupTypes: true,
+      bundledPackages: [
+        '@module-federation/bridge-shared',
+        'react-error-boundary',
+      ],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, 'src/index.ts'),
+        router: path.resolve(__dirname, 'src/router.tsx'),
+      },
+      formats: ['cjs', 'es'],
+      fileName: (format, entryName) => `${entryName}.${format}.js`,
+    },
+    rollupOptions: {
+      external: [
+        ...perDepsKeys,
+        '@remix-run/router',
+        'react-router',
+        'react-router-dom/',
+      ],
+    },
+    minify: false,
+  },
+  define: {
+    __APP_VERSION__: JSON.stringify(packageJson.version),
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import path from 'path';
+export default defineConfig({
+  define: {
+    __DEV__: true,
+    __TEST__: true,
+    __BROWSER__: false,
+    __VERSION__: '"unknow"',
+    __APP_VERSION__: '"0.0.0"',
+  },
+  plugins: [nxViteTsPaths()],
+  test: {
+    environment: 'jsdom',
+    include: [
+      path.resolve(__dirname, '__tests__/*.spec.ts'),
+      path.resolve(__dirname, '__tests__/*.spec.tsx'),
+    ],
+    globals: true,
+    testTimeout: 10000,
+  },
+});