@ice/mf-runtime 0.0.3 → 0.0.5

package/README.md

@@ -207,6 +207,26 @@ RemoteConfig 配置：
 
 ### RemoteModule
 
+RemoteModule 组件支持泛型，可以用来约束远程组件的 props 类型：
+
+```tsx
+// 定义远程组件的 props 类型
+interface RemoteButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+// 使用带类型的 RemoteModule
+<RemoteModule<RemoteButtonProps>
+  module="Button"
+  scope="remote_app"
+  componentProps={{
+    onClick: () => console.log('clicked'),
+    text: '点击我'
+  }}
+/>
+```
+
 组件属性：
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -218,9 +238,117 @@ RemoteConfig 配置：
 | LoadingComponent | 加载状态组件 | `ReactNode` | `<div>Loading...</div>` |
 | ErrorComponent | 错误回退组件 | `ReactNode` | `<div>远程模块加载失败: {error.message}</div>` |
 | onError | 错误处理回调函数 | `(error: Error, info: { componentStack: string }) => void` | - |
+| componentProps | 传递给远程模块的属性 | `T extends object` | `{}` |
+| children | 传递给远程模块的子元素 | `ReactNode` | `null` |
+
+类型定义：
+
+```tsx
+// RemoteModule 的类型定义
+interface RemoteModuleOptions<T = any> {
+  module: string;
+  scope: string;
+  runtime?: {
+    react: typeof import('react');
+    reactDOM: typeof import('react-dom');
+  };
+  publicPath?: string;
+  LoadingComponent?: React.ReactNode;
+  ErrorComponent?: React.ReactNode;
+  onError?: (error: Error, info: { componentStack: string }) => void;
+  componentProps?: T;
+  children?: React.ReactNode;
+}
+
+// 组件声明
+const RemoteModule = <T extends object = any>(props: RemoteModuleOptions<T>) => { ... }
+```
 
 
 ## 注意事项
 
 1. host name 请保证全局唯一。
 2. remote name 的 package.json name 请保证全局唯一，否则会出现意料之外的缓存问题。
+
+## 使用示例
+
+### 传递属性和子元素
+
+当远程模块需要接收属性或子元素时，可以使用 `componentProps` 和 `children`：
+
+```tsx
+import { RemoteModule } from '@ice/mf-runtime';
+
+interface UserProfileProps {
+  userId: string;
+  showAvatar: boolean;
+  onUserClick: (user: any) => void;
+}
+
+interface CardProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+function App() {
+  return (
+    <div>
+      {/* 传递属性示例 */}
+      <RemoteModule<UserProfileProps>
+        module="UserProfile"
+        scope="remote_app"
+        componentProps={{
+          userId: "123",
+          showAvatar: true,
+          onUserClick: (user) => console.log('用户点击:', user)
+        }}
+      />
+
+      {/* 传递子元素示例 */}
+      <RemoteModule<CardProps>
+        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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface RemoteModuleOptions {
+interface RemoteModuleOptions<T = any> {
     module: string;
     scope: string;
     runtime?: {
@@ -12,6 +12,8 @@ interface RemoteModuleOptions {
     onError?: (error: Error, info: {
         componentStack: string;
     }) => void;
+    componentProps?: T;
+    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: <T extends object = any>({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: RemoteModuleOptions<T>) => 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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface RemoteModuleOptions {
+interface RemoteModuleOptions<T = any> {
     module: string;
     scope: string;
     runtime?: {
@@ -12,6 +12,8 @@ interface RemoteModuleOptions {
     onError?: (error: Error, info: {
         componentStack: string;
     }) => void;
+    componentProps?: T;
+    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: <T extends object = any>({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: RemoteModuleOptions<T>) => 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.5",
   "description": "ice mf runtime",
   "files": [
     "esm",