@ice/mf-runtime 0.0.3 → 0.0.4

package/README.md

@@ -218,9 +218,83 @@ RemoteConfig 配置：
 | LoadingComponent | 加载状态组件 | `ReactNode` | `<div>Loading...</div>` |
 | ErrorComponent | 错误回退组件 | `ReactNode` | `<div>远程模块加载失败: {error.message}</div>` |
 | onError | 错误处理回调函数 | `(error: Error, info: { componentStack: string }) => void` | - |
+| componentProps | 传递给远程模块的属性 | `object` | `{}` |
+| children | 传递给远程模块的子元素 | `ReactNode` | `null` |
 
 
 ## 注意事项
 
 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

@@ -12,6 +12,8 @@ interface RemoteModuleOptions {
     onError?: (error: Error, info: {
         componentStack: string;
     }) => void;
+    componentProps?: any;
+    children?: React.ReactNode;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, }: 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,3 +1,5 @@
+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';
@@ -24,7 +26,7 @@ function useDynamicImport({ module, scope }) {
     ]);
     return component;
 }
-export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError })=>{
+export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null })=>{
     var _remoteModule;
     if (publicPath) {
         setFederatedModulePublicPath(scope, publicPath);
@@ -66,7 +68,9 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
             onError: onError,
             children: /*#__PURE__*/ _jsx(React.Suspense, {
                 fallback: Loading,
-                children: /*#__PURE__*/ _jsx(Component, {})
+                children: /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, componentProps), {
+                    children: children
+                }))
             })
         });
     }

package/esm/RemoteModule.d.ts

@@ -12,6 +12,8 @@ interface RemoteModuleOptions {
     onError?: (error: Error, info: {
         componentStack: string;
     }) => void;
+    componentProps?: any;
+    children?: React.ReactNode;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, }: 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,4 +1,6 @@
 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, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
@@ -62,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, ErrorComponent = param.ErrorComponent, onError = param.onError;
+    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);
@@ -113,7 +115,9 @@ export var RemoteModule = function(param) {
             onError: onError,
             children: /*#__PURE__*/ _jsx(React.Suspense, {
                 fallback: Loading,
-                children: /*#__PURE__*/ _jsx(Component, {})
+                children: /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, componentProps), {
+                    children: children
+                }))
             })
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/mf-runtime",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "ice mf runtime",
   "files": [
     "esm",