@ice/mf-runtime 0.0.2 → 0.0.4

package/README.md

@@ -186,7 +186,6 @@ function App() {
   );
 }
 ```
-
 ## API
 
 ### init(options)
@@ -217,6 +216,10 @@ RemoteConfig 配置：
 | runtime | React 运行时配置 | `{ react: React, reactDOM: ReactDOM }` | - |
 | publicPath | 远程模块静态资源地址 | `string` | - |
 | LoadingComponent | 加载状态组件 | `ReactNode` | `<div>Loading...</div>` |
+| ErrorComponent | 错误回退组件 | `ReactNode` | `<div>远程模块加载失败: {error.message}</div>` |
+| onError | 错误处理回调函数 | `(error: Error, info: { componentStack: string }) => void` | - |
+| componentProps | 传递给远程模块的属性 | `object` | `{}` |
+| children | 传递给远程模块的子元素 | `ReactNode` | `null` |
 
 
 ## 注意事项
@@ -224,3 +227,74 @@ RemoteConfig 配置：
 1. host name 请保证全局唯一。
 2. remote name 的 package.json name 请保证全局唯一，否则会出现意料之外的缓存问题。
 
+## 使用示例
+
+### 传递属性和子元素
+
+当远程模块需要接收属性或子元素时，可以使用 `componentProps` 和 `children`：
+
+```tsx
+import { RemoteModule } from '@ice/mf-runtime';
+
+function App() {
+  return (
+    <div>
+      {/* 传递属性示例 */}
+      <RemoteModule 
+        module="UserProfile"
+        scope="remote_app"
+        componentProps={{
+          userId: "123",
+          showAvatar: true,
+          onUserClick: (user) => console.log('用户点击:', user)
+        }}
+      />
+
+      {/* 传递子元素示例 */}
+      <RemoteModule 
+        module="Card"
+        scope="remote_app"
+        componentProps={{
+          title: "我的卡片"
+        }}
+      >
+        <h2>这是卡片内容</h2>
+        <p>可以传入任意的子元素</p>
+      </RemoteModule>
+    </div>
+  );
+}
+```
+
+在远程模块中的使用方式：
+
+```tsx
+// 远程模块: UserProfile.tsx
+interface UserProfileProps {
+  userId: string;
+  showAvatar: boolean;
+  onUserClick: (user: any) => void;
+}
+
+export default function UserProfile(props: UserProfileProps) {
+  const { userId, showAvatar, onUserClick } = props;
+  // ... 组件实现
+}
+
+// 远程模块: Card.tsx
+interface CardProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+export default function Card({ title, children }: CardProps) {
+  return (
+    <div className="card">
+      <div className="card-header">{title}</div>
+      <div className="card-body">
+        {children}
+      </div>
+    </div>
+  );
+}
+```

package/es2017/RemoteModule.d.ts

@@ -8,6 +8,12 @@ interface RemoteModuleOptions {
     };
     publicPath?: string;
     LoadingComponent?: React.ReactNode;
+    ErrorComponent?: React.ReactNode;
+    onError?: (error: Error, info: {
+        componentStack: string;
+    }) => void;
+    componentProps?: any;
+    children?: React.ReactNode;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
 export {};

package/es2017/RemoteModule.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
 import { loadRemote } from '@module-federation/runtime';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { FallBack } from './FallBack';
 import { setFederatedModulePublicPath } from './set-public-path';
 function useDynamicImport({ module, scope }) {
@@ -23,7 +26,7 @@ function useDynamicImport({ module, scope }) {
     ]);
     return component;
 }
-export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent })=>{
+export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null })=>{
     var _remoteModule;
     if (publicPath) {
         setFederatedModulePublicPath(scope, publicPath);
@@ -53,10 +56,22 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
     const Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
         children: "Loading..."
     });
+    const ErrorFallback = ({ error })=>ErrorComponent || /*#__PURE__*/ _jsxs("div", {
+            children: [
+                "远程模块加载失败: ",
+                error.message
+            ]
+        });
     if (Component) {
-        return /*#__PURE__*/ _jsx(React.Suspense, {
-            fallback: Loading,
-            children: /*#__PURE__*/ _jsx(Component, {})
+        return /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorFallback,
+            onError: onError,
+            children: /*#__PURE__*/ _jsx(React.Suspense, {
+                fallback: Loading,
+                children: /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, componentProps), {
+                    children: children
+                }))
+            })
         });
     }
     return Loading;

package/esm/RemoteModule.d.ts

@@ -8,6 +8,12 @@ interface RemoteModuleOptions {
     };
     publicPath?: string;
     LoadingComponent?: React.ReactNode;
+    ErrorComponent?: React.ReactNode;
+    onError?: (error: Error, info: {
+        componentStack: string;
+    }) => void;
+    componentProps?: any;
+    children?: React.ReactNode;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
 export {};

package/esm/RemoteModule.js

@@ -1,10 +1,13 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
 import { loadRemote } from "@module-federation/runtime";
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { FallBack } from "./FallBack";
 import { setFederatedModulePublicPath } from "./set-public-path";
 function useDynamicImport(param) {
@@ -61,7 +64,7 @@ function useDynamicImport(param) {
     return component;
 }
 export var RemoteModule = function(param) {
-    var module = param.module, scope = param.scope, runtime = param.runtime, publicPath = param.publicPath, LoadingComponent = param.LoadingComponent;
+    var module = param.module, scope = param.scope, runtime = param.runtime, publicPath = param.publicPath, LoadingComponent = param.LoadingComponent, ErrorComponent = param.ErrorComponent, onError = param.onError, _param_componentProps = param.componentProps, componentProps = _param_componentProps === void 0 ? {} : _param_componentProps, _param_children = param.children, children = _param_children === void 0 ? null : _param_children;
     var _remoteModule;
     if (publicPath) {
         setFederatedModulePublicPath(scope, publicPath);
@@ -97,10 +100,25 @@ export var RemoteModule = function(param) {
     var Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
         children: "Loading..."
     });
+    var ErrorFallback = function(param) {
+        var error = param.error;
+        return ErrorComponent || /*#__PURE__*/ _jsxs("div", {
+            children: [
+                "远程模块加载失败: ",
+                error.message
+            ]
+        });
+    };
     if (Component) {
-        return /*#__PURE__*/ _jsx(React.Suspense, {
-            fallback: Loading,
-            children: /*#__PURE__*/ _jsx(Component, {})
+        return /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorFallback,
+            onError: onError,
+            children: /*#__PURE__*/ _jsx(React.Suspense, {
+                fallback: Loading,
+                children: /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, componentProps), {
+                    children: children
+                }))
+            })
         });
     }
     return Loading;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/mf-runtime",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "ice mf runtime",
   "files": [
     "esm",
@@ -48,7 +48,8 @@
     "@ice/jsx-runtime": "^0.2.0",
     "@module-federation/runtime": "^0.11.2",
     "@module-federation/runtime-core": "^0.11.2",
-    "@swc/helpers": "^0.5.1"
+    "@swc/helpers": "^0.5.1",
+    "react-error-boundary": "^5.0.0"
   },
   "devDependencies": {
     "@ali/pkg-plugin-dev": "^1.0.0",