@ice/mf-runtime 0.0.4 → 0.0.6-beta.1

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,32 @@ RemoteConfig 配置：
 | LoadingComponent | 加载状态组件 | `ReactNode` | `<div>Loading...</div>` |
 | ErrorComponent | 错误回退组件 | `ReactNode` | `<div>远程模块加载失败: {error.message}</div>` |
 | onError | 错误处理回调函数 | `(error: Error, info: { componentStack: string }) => void` | - |
-| componentProps | 传递给远程模块的属性 | `object` | `{}` |
+| 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>) => { ... }
+```
+
 
 ## 注意事项
 
@@ -236,11 +279,22 @@ RemoteConfig 配置：
 ```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 
+      <RemoteModule<UserProfileProps>
         module="UserProfile"
         scope="remote_app"
         componentProps={{
@@ -251,7 +305,7 @@ function App() {
       />
 
       {/* 传递子元素示例 */}
-      <RemoteModule 
+      <RemoteModule<CardProps>
         module="Card"
         scope="remote_app"
         componentProps={{

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,8 +12,8 @@ interface RemoteModuleOptions {
     onError?: (error: Error, info: {
         componentStack: string;
     }) => void;
-    componentProps?: any;
+    componentProps?: T;
     children?: React.ReactNode;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: 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/mf-global-store.js

@@ -6,7 +6,9 @@ export function initGlobalStore(options) {
         };
     }
     const store = window.__MF_GLOBAL_STORE__;
-    const hostInfo = {
+    // 获取或创建 hostInfo
+    const existingHostInfo = store.hostRemotes.get(options.name);
+    const hostInfo = existingHostInfo || {
         keys: new Set(),
         nameKeyMap: new Map(),
         conflictingModules: new Set()
@@ -23,10 +25,16 @@ export function initGlobalStore(options) {
             hostName: options.name,
             extraInfo: remote.extraInfo
         };
+        // 如果已存在同名的 remote，先移除旧的信息
+        const existingKey = hostInfo.nameKeyMap.get(remote.name);
+        if (existingKey) {
+            hostInfo.keys.delete(existingKey);
+            store.remotes.delete(existingKey);
+        }
         // 记录这个 host 使用的 remote key 和 name 到 key 的映射
         hostInfo.keys.add(remoteKey);
         hostInfo.nameKeyMap.set(remote.name, remoteKey);
-        // 检查是否与现有模块冲突
+        // 检查是否与其他 host 的模块冲突
         for (const [, info] of store.remotes.entries()){
             if (info.name === remote.name && info.entry !== entry) {
                 console.warn(`[Module Federation] Remote module "${remote.name}" has multiple versions:`, `\nHost "${info.hostName}": ${info.entry}`, `\nHost "${options.name}": ${entry}`);

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,8 +12,8 @@ interface RemoteModuleOptions {
     onError?: (error: Error, info: {
         componentStack: string;
     }) => void;
-    componentProps?: any;
+    componentProps?: T;
     children?: React.ReactNode;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: 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/mf-global-store.js

@@ -7,7 +7,9 @@ export function initGlobalStore(options) {
         };
     }
     var store = window.__MF_GLOBAL_STORE__;
-    var hostInfo = {
+    // 获取或创建 hostInfo
+    var existingHostInfo = store.hostRemotes.get(options.name);
+    var hostInfo = existingHostInfo || {
         keys: new Set(),
         nameKeyMap: new Map(),
         conflictingModules: new Set()
@@ -24,12 +26,18 @@ export function initGlobalStore(options) {
             hostName: options.name,
             extraInfo: remote.extraInfo
         };
+        // 如果已存在同名的 remote，先移除旧的信息
+        var existingKey = hostInfo.nameKeyMap.get(remote.name);
+        if (existingKey) {
+            hostInfo.keys.delete(existingKey);
+            store.remotes.delete(existingKey);
+        }
         // 记录这个 host 使用的 remote key 和 name 到 key 的映射
         hostInfo.keys.add(remoteKey);
         hostInfo.nameKeyMap.set(remote.name, remoteKey);
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
-            // 检查是否与现有模块冲突
+            // 检查是否与其他 host 的模块冲突
             for(var _iterator = store.remotes.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                 var _step_value = _sliced_to_array(_step.value, 2), info = _step_value[1];
                 if (info.name === remote.name && info.entry !== entry) {

package/package.json

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