@empjs/bridge-react 0.0.1

package/README.md

@@ -0,0 +1,143 @@
+# EMP Bridge React
+
+EMP Bridge React 是一个用于跨 React 版本组件通信的桥接工具，它解决了不同 React 版本之间组件共享和通信的问题。
+
+## 功能特点
+
+- 支持不同 React 版本（16/17/18/19）之间的组件共享
+- 提供简单的 API 用于生产者和消费者之间的通信
+- 自动处理 React 不同版本的渲染和卸载方法差异
+- 支持异步加载组件
+
+## 安装
+
+```bash
+# 使用 npm
+npm install @empjs/bridge-react
+
+# 使用 yarn
+yarn add @empjs/bridge-react
+
+# 使用 pnpm
+pnpm add @empjs/bridge-react
+```
+
+## 基本用法
+
+### 生产者（导出组件的应用）
+
+```tsx
+// 在 React 16/17 应用中
+import React from 'react';
+import { createBridgeComponent } from '@empjs/bridge-react';
+
+// 创建要共享的组件
+const MyComponent = (props) => {
+  return <div>Hello from React 16/17! {props.message}</div>;
+};
+
+// 导出桥接组件
+export default createBridgeComponent(MyComponent, {
+  React,
+  ReactDOM: require('react-dom'),
+  // React 18+ 才有 createRoot
+  // createRoot: require('react-dom/client').createRoot
+});
+```
+
+### 消费者（使用组件的应用）
+
+```tsx
+// 在 React 18/19 应用中
+import React from 'react';
+import { createRemoteAppComponent } from '@empjs/bridge-react';
+
+// 导入远程组件（可以是动态导入）
+import RemoteComponent from 'remote-app/MyComponent';
+
+// 创建可在当前 React 版本中使用的组件
+const BridgedComponent = createRemoteAppComponent(
+  RemoteComponent,
+  {
+    React,
+    ReactDOM: require('react-dom'),
+    createRoot: require('react-dom/client').createRoot
+  },
+  {
+    onError: (error) => console.error('Failed to load component:', error)
+  }
+);
+
+// 在应用中使用
+function App() {
+  return (
+    <div>
+      <h1>My App (React 18/19)</h1>
+      <BridgedComponent message="Passed from React 18/19" />
+    </div>
+  );
+}
+```
+
+## API 参考
+
+### createBridgeComponent
+
+用于生产者包装应用级别导出模块。
+
+```typescript
+function createBridgeComponent(
+  Component: React.ComponentType<any>,
+  options: {
+    React: any;
+    ReactDOM: any;
+    createRoot?: Function;
+  }
+): BridgeProvider
+```
+
+参数:
+- `Component`: 要导出的 React 组件
+- `options`: React 相关配置
+  - `React`: React 实例
+  - `ReactDOM`: ReactDOM 实例
+  - `createRoot`: (可选) React 18+ 的 createRoot 方法
+
+### createRemoteAppComponent
+
+用于消费者加载应用级别模块。
+
+```typescript
+function createRemoteAppComponent(
+  component: ComponentProvider,
+  reactOptions: {
+    React: any;
+    ReactDOM: any;
+    createRoot?: Function;
+  },
+  options?: {
+    onError?: (error: Error) => void;
+  }
+): React.ComponentType<any>
+```
+
+参数:
+- `component`: 组件提供者函数，可以是同步或异步的
+- `reactOptions`: 当前应用的 React 相关配置
+  - `React`: React 实例
+  - `ReactDOM`: ReactDOM 实例
+  - `createRoot`: (可选) React 18+ 的 createRoot 方法
+- `options`: (可选) 额外配置
+  - `onError`: 错误处理回调函数
+
+## 使用场景
+
+1. 微前端架构中不同 React 版本的应用集成
+2. 逐步升级大型 React 应用时的版本兼容
+3. 共享组件库到不同 React 版本的项目中
+
+## 注意事项
+
+- 确保正确提供对应版本的 React 和 ReactDOM 实例
+- 对于 React 18+，需要提供 createRoot 方法
+- 组件间通信仅限于 props 传递，不支持 Context API 跨版本共享

package/dist/index.cjs

@@ -0,0 +1,152 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createBridgeComponent: ()=>createBridgeComponent,
+    createRemoteAppComponent: ()=>createRemoteAppComponent,
+    default: ()=>__WEBPACK_DEFAULT_EXPORT__
+});
+function createBridgeComponent(Component, options) {
+    const { React, ReactDOM, createRoot } = options;
+    const hasCreateRoot = 'function' == typeof createRoot;
+    return function() {
+        const rootMap = new Map();
+        const render = (dom, props)=>{
+            try {
+                const element = React.createElement(Component, props || {});
+                const existingRoot = rootMap.get(dom);
+                if (existingRoot) {
+                    if (hasCreateRoot && 'render' in existingRoot) existingRoot.render(element);
+                    else if (ReactDOM.render) ReactDOM.render(element, dom);
+                } else if (hasCreateRoot && createRoot) {
+                    const root = createRoot(dom);
+                    root.render(element);
+                    rootMap.set(dom, root);
+                } else if (ReactDOM.render) {
+                    ReactDOM.render(element, dom);
+                    rootMap.set(dom, dom);
+                }
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to render/update component', error);
+                throw error;
+            }
+        };
+        const destroy = (dom)=>{
+            const root = rootMap.get(dom);
+            if (!root) return;
+            try {
+                if (hasCreateRoot && 'unmount' in root) root.unmount();
+                else if (ReactDOM.unmountComponentAtNode) ReactDOM.unmountComponentAtNode(dom);
+                rootMap.delete(dom);
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to unmount component', error);
+            }
+        };
+        return {
+            render,
+            destroy
+        };
+    };
+}
+function createRemoteAppComponent(component, reactOptions, options = {}) {
+    if (!component) throw new Error('createRemoteAppComponent: component parameter cannot be empty');
+    const { React } = reactOptions;
+    class RemoteAppComponent extends React.Component {
+        containerRef = React.createRef();
+        provider = null;
+        providerInfo = null;
+        isMounted = false;
+        constructor(props){
+            super(props);
+            this.loadComponent();
+        }
+        async loadComponent() {
+            try {
+                if ('function' == typeof component) {
+                    const result = component();
+                    if (result instanceof Promise) {
+                        const module = await result;
+                        this.providerInfo = module.default;
+                    } else this.providerInfo = component;
+                }
+                if (this.isMounted && this.containerRef.current) this.renderComponent();
+            } catch (error) {
+                if (options.onError) options.onError(error);
+                console.error('[EMP-ERROR] Failed to load component', error);
+            }
+        }
+        renderComponent() {
+            if (!this.providerInfo || !this.containerRef.current) return;
+            try {
+                if (!this.provider) this.provider = this.providerInfo();
+                this.provider.render(this.containerRef.current, this.props);
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to render component', error);
+            }
+        }
+        unmountComponent() {
+            if (this.provider && this.containerRef.current) try {
+                this.provider.destroy(this.containerRef.current);
+                this.provider = null;
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to unmount component', error);
+            }
+        }
+        componentDidMount() {
+            this.isMounted = true;
+            if (this.providerInfo) this.renderComponent();
+        }
+        componentDidUpdate() {
+            if (this.provider && this.containerRef.current) this.provider.render(this.containerRef.current, this.props);
+        }
+        componentWillUnmount() {
+            this.isMounted = false;
+            const cleanup = ()=>this.unmountComponent();
+            if ('undefined' != typeof window && window.requestAnimationFrame) window.requestAnimationFrame(cleanup);
+            else setTimeout(cleanup, 0);
+        }
+        render() {
+            return React.createElement('div', {
+                ref: this.containerRef
+            });
+        }
+    }
+    return RemoteAppComponent;
+}
+const __WEBPACK_DEFAULT_EXPORT__ = {
+    createBridgeComponent,
+    createRemoteAppComponent
+};
+exports.createBridgeComponent = __webpack_exports__.createBridgeComponent;
+exports.createRemoteAppComponent = __webpack_exports__.createRemoteAppComponent;
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "createBridgeComponent",
+    "createRemoteAppComponent",
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export interface BridgeProviderReturn {
+    render: (dom: HTMLElement, props?: Record<string, any>) => void;
+    destroy: (dom: HTMLElement) => void;
+}
+export type BridgeProvider = () => BridgeProviderReturn;
+export type AsyncBridgeProvider = () => Promise<{
+    default: BridgeProvider;
+}>;
+export type ComponentProvider = BridgeProvider | AsyncBridgeProvider;
+interface ReactOptions {
+    React?: any;
+    ReactDOM?: any;
+    createRoot?: any;
+}
+/**
+ * Create bridge component - for producer to wrap application-level export modules
+ */
+export declare function createBridgeComponent(Component: any, options: ReactOptions): BridgeProvider;
+/**
+ * Create remote app component - for consumer to load application-level modules
+ */
+export declare function createRemoteAppComponent(component: ComponentProvider, reactOptions: ReactOptions, options?: {
+    onError?: (error: Error) => void;
+}): any;
+declare const _default: {
+    createBridgeComponent: typeof createBridgeComponent;
+    createRemoteAppComponent: typeof createRemoteAppComponent;
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,112 @@
+function createBridgeComponent(Component, options) {
+    const { React, ReactDOM, createRoot } = options;
+    const hasCreateRoot = 'function' == typeof createRoot;
+    return function() {
+        const rootMap = new Map();
+        const render = (dom, props)=>{
+            try {
+                const element = React.createElement(Component, props || {});
+                const existingRoot = rootMap.get(dom);
+                if (existingRoot) {
+                    if (hasCreateRoot && 'render' in existingRoot) existingRoot.render(element);
+                    else if (ReactDOM.render) ReactDOM.render(element, dom);
+                } else if (hasCreateRoot && createRoot) {
+                    const root = createRoot(dom);
+                    root.render(element);
+                    rootMap.set(dom, root);
+                } else if (ReactDOM.render) {
+                    ReactDOM.render(element, dom);
+                    rootMap.set(dom, dom);
+                }
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to render/update component', error);
+                throw error;
+            }
+        };
+        const destroy = (dom)=>{
+            const root = rootMap.get(dom);
+            if (!root) return;
+            try {
+                if (hasCreateRoot && 'unmount' in root) root.unmount();
+                else if (ReactDOM.unmountComponentAtNode) ReactDOM.unmountComponentAtNode(dom);
+                rootMap.delete(dom);
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to unmount component', error);
+            }
+        };
+        return {
+            render,
+            destroy
+        };
+    };
+}
+function createRemoteAppComponent(component, reactOptions, options = {}) {
+    if (!component) throw new Error('createRemoteAppComponent: component parameter cannot be empty');
+    const { React } = reactOptions;
+    class RemoteAppComponent extends React.Component {
+        containerRef = React.createRef();
+        provider = null;
+        providerInfo = null;
+        isMounted = false;
+        constructor(props){
+            super(props);
+            this.loadComponent();
+        }
+        async loadComponent() {
+            try {
+                if ('function' == typeof component) {
+                    const result = component();
+                    if (result instanceof Promise) {
+                        const module = await result;
+                        this.providerInfo = module.default;
+                    } else this.providerInfo = component;
+                }
+                if (this.isMounted && this.containerRef.current) this.renderComponent();
+            } catch (error) {
+                if (options.onError) options.onError(error);
+                console.error('[EMP-ERROR] Failed to load component', error);
+            }
+        }
+        renderComponent() {
+            if (!this.providerInfo || !this.containerRef.current) return;
+            try {
+                if (!this.provider) this.provider = this.providerInfo();
+                this.provider.render(this.containerRef.current, this.props);
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to render component', error);
+            }
+        }
+        unmountComponent() {
+            if (this.provider && this.containerRef.current) try {
+                this.provider.destroy(this.containerRef.current);
+                this.provider = null;
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to unmount component', error);
+            }
+        }
+        componentDidMount() {
+            this.isMounted = true;
+            if (this.providerInfo) this.renderComponent();
+        }
+        componentDidUpdate() {
+            if (this.provider && this.containerRef.current) this.provider.render(this.containerRef.current, this.props);
+        }
+        componentWillUnmount() {
+            this.isMounted = false;
+            const cleanup = ()=>this.unmountComponent();
+            if ('undefined' != typeof window && window.requestAnimationFrame) window.requestAnimationFrame(cleanup);
+            else setTimeout(cleanup, 0);
+        }
+        render() {
+            return React.createElement('div', {
+                ref: this.containerRef
+            });
+        }
+    }
+    return RemoteAppComponent;
+}
+const src = {
+    createBridgeComponent,
+    createRemoteAppComponent
+};
+export { createBridgeComponent, createRemoteAppComponent, src as default };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@empjs/bridge-react",
+  "version": "0.0.1",
+  "description": "emp react bridgeeact",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "maintainers": [
+    "xuhongbin",
+    "ckken",
+    "doerme",
+    "ron0115"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/empjs/emp.git",
+    "directory": "packages/bridge-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "author": "Ken",
+  "dependencies": {},
+  "devDependencies": {},
+  "scripts": {
+    "dev": "rslib build --watch --env-mode development",
+    "build": "rslib build"
+  }
+}