@empjs/bridge-react 0.0.3 → 4.0.0-alpha.1

package/dist/classComponent.d.ts

@@ -0,0 +1,16 @@
+import { BridgeProvider, ComponentProvider, ReactOptions } from './types';
+/**
+ * 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.cjs

@@ -1,11 +1,15 @@
 "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__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
     };
 })();
 (()=>{
@@ -13,7 +17,7 @@ var __webpack_require__ = {};
 })();
 (()=>{
     __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
         Object.defineProperty(exports1, '__esModule', {
@@ -24,10 +28,22 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    AsyncBridgeProvider: ()=>types_namespaceObject.AsyncBridgeProvider,
+    BridgeProvider: ()=>types_namespaceObject.BridgeProvider,
+    BridgeProviderReturn: ()=>types_namespaceObject.BridgeProviderReturn,
+    ComponentProvider: ()=>types_namespaceObject.ComponentProvider,
+    ReactComponentOptions: ()=>types_namespaceObject.ReactOptions,
+    RemoteComponentOptions: ()=>types_namespaceObject.RemoteComponentOptions,
     createBridgeComponent: ()=>createBridgeComponent,
     createRemoteAppComponent: ()=>createRemoteAppComponent,
-    default: ()=>__WEBPACK_DEFAULT_EXPORT__
+    default: ()=>src
 });
+var types_namespaceObject = {};
+__webpack_require__.r(types_namespaceObject);
+function handleError(error, message, onError) {
+    console.error(`[EMP-ERROR] ${message}`, error);
+    if (onError) onError(error);
+}
 function createBridgeComponent(Component, options) {
     const { React, ReactDOM, createRoot } = options;
     const hasCreateRoot = 'function' == typeof createRoot;
@@ -49,7 +65,7 @@ function createBridgeComponent(Component, options) {
                     rootMap.set(dom, dom);
                 }
             } catch (error) {
-                console.error('[EMP-ERROR] Failed to render/update component', error);
+                handleError(error, 'Failed to render/update component');
                 throw error;
             }
         };
@@ -61,7 +77,7 @@ function createBridgeComponent(Component, options) {
                 else if (ReactDOM.unmountComponentAtNode) ReactDOM.unmountComponentAtNode(dom);
                 rootMap.delete(dom);
             } catch (error) {
-                console.error('[EMP-ERROR] Failed to unmount component', error);
+                handleError(error, 'Failed to unmount component');
             }
         };
         return {
@@ -73,7 +89,7 @@ function createBridgeComponent(Component, options) {
 function createRemoteAppComponent(component, reactOptions, options = {}) {
     if (!component) throw new Error('createRemoteAppComponent: component parameter cannot be empty');
     const { React } = reactOptions;
-    class RemoteAppComponent extends React.Component {
+    class ReactRemoteAppComponent extends React.Component {
         containerRef = React.createRef();
         provider = null;
         providerInfo = null;
@@ -93,8 +109,7 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
                 }
                 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);
+                handleError(error, 'Failed to load component', options.onError);
             }
         }
         renderComponent() {
@@ -103,15 +118,21 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
                 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);
+                handleError(error, 'Failed to render component');
             }
         }
         unmountComponent() {
-            if (this.provider && this.containerRef.current) try {
-                this.provider.destroy(this.containerRef.current);
-                this.provider = null;
+            try {
+                if (this.provider) {
+                    if (this.containerRef && this.containerRef.current) try {
+                        this.provider.destroy(this.containerRef.current);
+                    } catch (destroyError) {
+                        console.warn('[bridge-react] Error during provider unmount:', destroyError);
+                    }
+                    this.provider = null;
+                }
             } catch (error) {
-                console.error('[EMP-ERROR] Failed to unmount component', error);
+                handleError(error, 'Failed to unmount component');
             }
         }
         componentDidMount() {
@@ -123,9 +144,10 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
         }
         componentWillUnmount() {
             this.isMounted = false;
-            const cleanup = ()=>this.unmountComponent();
-            if ('undefined' != typeof window && window.requestAnimationFrame) window.requestAnimationFrame(cleanup);
-            else setTimeout(cleanup, 0);
+            if (reactOptions?.syncUnmount) this.unmountComponent();
+            else Promise.resolve().then(()=>{
+                if (this.containerRef && this.containerRef.current) this.unmountComponent();
+            });
         }
         render() {
             return React.createElement('div', {
@@ -133,20 +155,32 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
             });
         }
     }
-    return RemoteAppComponent;
+    return ReactRemoteAppComponent;
 }
-const __WEBPACK_DEFAULT_EXPORT__ = {
-    createBridgeComponent,
-    createRemoteAppComponent
+const src = {
+    createBridgeComponent: createBridgeComponent,
+    createRemoteAppComponent: createRemoteAppComponent
 };
+exports.AsyncBridgeProvider = __webpack_exports__.AsyncBridgeProvider;
+exports.BridgeProvider = __webpack_exports__.BridgeProvider;
+exports.BridgeProviderReturn = __webpack_exports__.BridgeProviderReturn;
+exports.ComponentProvider = __webpack_exports__.ComponentProvider;
+exports.ReactComponentOptions = __webpack_exports__.ReactComponentOptions;
+exports.RemoteComponentOptions = __webpack_exports__.RemoteComponentOptions;
 exports.createBridgeComponent = __webpack_exports__.createBridgeComponent;
 exports.createRemoteAppComponent = __webpack_exports__.createRemoteAppComponent;
 exports["default"] = __webpack_exports__["default"];
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "AsyncBridgeProvider",
+    "BridgeProvider",
+    "BridgeProviderReturn",
+    "ComponentProvider",
+    "ReactComponentOptions",
+    "RemoteComponentOptions",
     "createBridgeComponent",
     "createRemoteAppComponent",
     "default"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/index.d.ts

@@ -1,27 +1,7 @@
-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;
+import { createBridgeComponent, createRemoteAppComponent } from './classComponent';
+import { AsyncBridgeProvider, BridgeProvider, BridgeProviderReturn, ComponentProvider, ReactOptions as ReactComponentOptions, RemoteComponentOptions } from './types';
+export { BridgeProviderReturn, BridgeProvider, AsyncBridgeProvider, ComponentProvider, ReactComponentOptions, RemoteComponentOptions, };
+export { createBridgeComponent, createRemoteAppComponent };
 declare const _default: {
     createBridgeComponent: typeof createBridgeComponent;
     createRemoteAppComponent: typeof createRemoteAppComponent;

package/dist/index.js

@@ -1,3 +1,20 @@
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.r = (exports)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports, '__esModule', {
+            value: true
+        });
+    };
+})();
+var types_namespaceObject = {};
+__webpack_require__.r(types_namespaceObject);
+function handleError(error, message, onError) {
+    console.error(`[EMP-ERROR] ${message}`, error);
+    if (onError) onError(error);
+}
 function createBridgeComponent(Component, options) {
     const { React, ReactDOM, createRoot } = options;
     const hasCreateRoot = 'function' == typeof createRoot;
@@ -19,7 +36,7 @@ function createBridgeComponent(Component, options) {
                     rootMap.set(dom, dom);
                 }
             } catch (error) {
-                console.error('[EMP-ERROR] Failed to render/update component', error);
+                handleError(error, 'Failed to render/update component');
                 throw error;
             }
         };
@@ -31,7 +48,7 @@ function createBridgeComponent(Component, options) {
                 else if (ReactDOM.unmountComponentAtNode) ReactDOM.unmountComponentAtNode(dom);
                 rootMap.delete(dom);
             } catch (error) {
-                console.error('[EMP-ERROR] Failed to unmount component', error);
+                handleError(error, 'Failed to unmount component');
             }
         };
         return {
@@ -43,7 +60,7 @@ function createBridgeComponent(Component, options) {
 function createRemoteAppComponent(component, reactOptions, options = {}) {
     if (!component) throw new Error('createRemoteAppComponent: component parameter cannot be empty');
     const { React } = reactOptions;
-    class RemoteAppComponent extends React.Component {
+    class ReactRemoteAppComponent extends React.Component {
         containerRef = React.createRef();
         provider = null;
         providerInfo = null;
@@ -63,8 +80,7 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
                 }
                 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);
+                handleError(error, 'Failed to load component', options.onError);
             }
         }
         renderComponent() {
@@ -73,15 +89,21 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
                 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);
+                handleError(error, 'Failed to render component');
             }
         }
         unmountComponent() {
-            if (this.provider && this.containerRef.current) try {
-                this.provider.destroy(this.containerRef.current);
-                this.provider = null;
+            try {
+                if (this.provider) {
+                    if (this.containerRef && this.containerRef.current) try {
+                        this.provider.destroy(this.containerRef.current);
+                    } catch (destroyError) {
+                        console.warn('[bridge-react] Error during provider unmount:', destroyError);
+                    }
+                    this.provider = null;
+                }
             } catch (error) {
-                console.error('[EMP-ERROR] Failed to unmount component', error);
+                handleError(error, 'Failed to unmount component');
             }
         }
         componentDidMount() {
@@ -93,9 +115,10 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
         }
         componentWillUnmount() {
             this.isMounted = false;
-            const cleanup = ()=>this.unmountComponent();
-            if ('undefined' != typeof window && window.requestAnimationFrame) window.requestAnimationFrame(cleanup);
-            else setTimeout(cleanup, 0);
+            if (reactOptions?.syncUnmount) this.unmountComponent();
+            else Promise.resolve().then(()=>{
+                if (this.containerRef && this.containerRef.current) this.unmountComponent();
+            });
         }
         render() {
             return React.createElement('div', {
@@ -103,10 +126,17 @@ function createRemoteAppComponent(component, reactOptions, options = {}) {
             });
         }
     }
-    return RemoteAppComponent;
+    return ReactRemoteAppComponent;
 }
 const src = {
-    createBridgeComponent,
-    createRemoteAppComponent
+    createBridgeComponent: createBridgeComponent,
+    createRemoteAppComponent: createRemoteAppComponent
 };
-export { createBridgeComponent, createRemoteAppComponent, src as default };
+var AsyncBridgeProvider = types_namespaceObject.AsyncBridgeProvider;
+var BridgeProvider = types_namespaceObject.BridgeProvider;
+var BridgeProviderReturn = types_namespaceObject.BridgeProviderReturn;
+var ComponentProvider = types_namespaceObject.ComponentProvider;
+var ReactComponentOptions = types_namespaceObject.ReactOptions;
+var RemoteComponentOptions = types_namespaceObject.RemoteComponentOptions;
+export default src;
+export { AsyncBridgeProvider, BridgeProvider, BridgeProviderReturn, ComponentProvider, ReactComponentOptions, RemoteComponentOptions, createBridgeComponent, createRemoteAppComponent };

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+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;
+export interface ReactOptions {
+    React: any;
+    ReactDOM?: any;
+    createRoot?: any;
+    syncUnmount?: boolean;
+    errorBoundary?: boolean;
+}
+export interface RemoteComponentOptions {
+    onError?: (error: Error) => void;
+}

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 获取 React 版本号
+ */
+export declare function getReactVersion(React: any): number;
+/**
+ * 统一错误处理
+ */
+export declare function handleError(error: Error, message: string, onError?: (error: Error) => void): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empjs/bridge-react",
-  "version": "0.0.3",
+  "version": "4.0.0-alpha.1",
   "description": "Emp Bridge React",
   "license": "MIT",
   "type": "module",
@@ -36,7 +36,7 @@
     }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "author": "Ken",
   "dependencies": {},