feat: support dynamic type hints

.changeset/gentle-melons-deliver.md

@@ -0,0 +1,8 @@
+---
+'@module-federation/third-party-dts-extractor': patch
+'@module-federation/dts-plugin': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+feat: support dynamic remote type hints

apps/runtime-demo/3006-runtime-remote/webpack.config.js

@@ -82,7 +82,7 @@ module.exports = composePlugins(
     // e.g. `config.plugins.push(new MyPlugin())`
     config.output = {
       ...config.output,
-      publicPath: 'http://localhost:3006/',
+      publicPath: 'http://127.0.0.1:3006/',
       scriptType: 'text/javascript',
     };
     config.optimization = {

apps/runtime-demo/3007-runtime-remote/webpack.config.js

@@ -72,7 +72,7 @@ module.exports = composePlugins(
     // e.g. `config.plugins.push(new MyPlugin())`
     config.output = {
       ...config.output,
-      publicPath: 'http://localhost:3007/',
+      publicPath: 'http://127.0.0.1:3007/',
       scriptType: 'text/javascript',
     };
     config.optimization = {

apps/website-new/docs/en/configure/dev.mdx

@@ -11,6 +11,7 @@ The `PluginDevOptions` types are as follows:
 interface PluginDevOptions {
   disableLiveReload?: boolean;
   disableHotTypesReload?: boolean;
+  disableDynamicRemoteTypeHints?: boolean;
 }
 ```
 
@@ -29,3 +30,11 @@ Whether to disable type hot reloading
 - Default value: `false`
 
 Whether to disable `liveReload`, after setting `true`, any updates from the producer will not trigger the consumer's **page** `liveReload`
+
+## disableDynamicRemoteTypeHints
+
+- Type: `boolean`
+- Required: No
+- Default value: `false`
+
+Whether to disable type hot reloading

apps/website-new/docs/zh/configure/dev.mdx

@@ -11,6 +11,7 @@
 interface PluginDevOptions {
   disableLiveReload?: boolean;
   disableHotTypesReload?: boolean;
+  disableDynamicRemoteTypeHints?: boolean;
 }
 ```
 
@@ -29,3 +30,11 @@ interface PluginDevOptions {
 - 默认值：`false`
 
 是否禁用 `liveReload`，设置 `true` 后，生产者的任何更新，都不会触发消费者的**页面** `liveReload`
+
+## disableDynamicRemoteTypeHints
+
+- 类型：`boolean`
+- 是否必填：否
+- 默认值：`false`
+
+是否禁用动态模块类型提示，设置 `true` 后，消费者不会获取到动态模块的类型。

packages/dts-plugin/package.json

@@ -22,6 +22,11 @@
       "import": "./dist/core.js",
       "require": "./dist/core.js"
     },
+    "./dynamic-remote-type-hints-plugin": {
+      "types": "./dist/dynamic-remote-type-hints-plugin.d.ts",
+      "import": "./dist/esm/dynamic-remote-type-hints-plugin.js",
+      "require": "./dist/dynamic-remote-type-hints-plugin.js"
+    },
     "./*": "./*"
   },
   "typesVersions": {
@@ -31,6 +36,9 @@
       ],
       "core": [
         "./dist/core.d.ts"
+      ],
+      "dynamic-remote-type-hints-plugin": [
+        "./dist/dynamic-remote-type-hints-plugin.d.ts"
       ]
     }
   },
@@ -54,7 +62,8 @@
   "devDependencies": {
     "@types/ws": "8.5.10",
     "@types/koa": "2.11.2",
-    "@types/node-schedule": "2.1.7"
+    "@types/node-schedule": "2.1.7",
+    "@module-federation/runtime": "workspace:*"
   },
   "peerDependencies": {
     "typescript": "^4.9.0 || ^5.0.0",

packages/dts-plugin/src/core/configurations/hostPlugin.ts

@@ -33,7 +33,7 @@ const buildApiTypeUrl = (zipUrl?: string) => {
   return zipUrl.replace('.zip', '.d.ts');
 };
 
-const retrieveRemoteInfo = (options: {
+export const retrieveRemoteInfo = (options: {
   hostOptions: Required<HostOptions>;
   remoteAlias: string;
   remote: string;

packages/dts-plugin/src/core/index.ts

@@ -23,7 +23,7 @@ export {
   UpdateMode,
 } from './constant';
 
-export { DTSManagerOptions } from './interfaces/DTSManagerOptions';
-export { HostOptions } from './interfaces/HostOptions';
-export { RemoteOptions } from './interfaces/RemoteOptions';
+export type { DTSManagerOptions } from './interfaces/DTSManagerOptions';
+export type { HostOptions } from './interfaces/HostOptions';
+export type { RemoteOptions } from './interfaces/RemoteOptions';
 export * as rpc from './rpc/index';

packages/dts-plugin/src/core/lib/DTSManager.advance.spec.ts

@@ -21,7 +21,7 @@ describe('DTSManager advance usage', () => {
         'react-dom': { singleton: true, eager: true },
       },
     },
-    tsConfigPath: join(__dirname, '../../..', './tsconfig.json'),
+    tsConfigPath: join(__dirname, '../../..', './tsconfig.spec.json'),
     typesFolder: typesFolder,
     compiledTypesFolder: 'compiled-types',
     deleteTypesFolder: false,

packages/dts-plugin/src/core/lib/DTSManager.spec.ts

@@ -22,7 +22,7 @@ describe('DTSManager', () => {
         'react-dom': { singleton: true, eager: true },
       },
     },
-    tsConfigPath: join(__dirname, '../../..', './tsconfig.json'),
+    tsConfigPath: join(__dirname, '../../..', './tsconfig.spec.json'),
     typesFolder: typesFolder,
     compiledTypesFolder: 'compiled-types',
     deleteTypesFolder: false,

packages/dts-plugin/src/core/lib/DTSManager.ts

@@ -8,6 +8,7 @@ import {
   inferAutoPublicPath,
 } from '@module-federation/sdk';
 import cloneDeepWith from 'lodash.clonedeepwith';
+import { ThirdPartyExtractor } from '@module-federation/third-party-dts-extractor';
 
 import { retrieveRemoteConfig } from '../configurations/remotePlugin';
 import { createTypesArchive, downloadTypesArchive } from './archiveHandler';
@@ -16,7 +17,10 @@ import {
   retrieveMfAPITypesPath,
   retrieveMfTypesPath,
 } from './typeScriptCompiler';
-import { retrieveHostConfig } from '../configurations/hostPlugin';
+import {
+  retrieveHostConfig,
+  retrieveRemoteInfo,
+} from '../configurations/hostPlugin';
 import { DTSManagerOptions } from '../interfaces/DTSManagerOptions';
 import { HostOptions, RemoteInfo } from '../interfaces/HostOptions';
 import {
@@ -34,14 +38,17 @@ interface UpdateTypesOptions {
   updateMode: UpdateMode;
   remoteName?: string;
   remoteTarPath?: string;
+  remoteInfo?: RemoteInfo;
+  once?: boolean;
 }
 
 class DTSManager {
   options: DTSManagerOptions;
   runtimePkgs: string[];
   remoteAliasMap: Record<string, Required<RemoteInfo>>;
-  loadedRemoteAPIAlias: string[];
+  loadedRemoteAPIAlias: Set<string>;
   extraOptions: Record<string, any>;
+  updatedRemoteInfos: Record<string, Required<RemoteInfo>>;
 
   constructor(options: DTSManagerOptions) {
     this.options = cloneDeepWith(options, (_value, key) => {
@@ -55,9 +62,10 @@ class DTSManager {
       '@module-federation/enhanced/runtime',
       '@module-federation/runtime-tools',
     ];
-    this.loadedRemoteAPIAlias = [];
+    this.loadedRemoteAPIAlias = new Set();
     this.remoteAliasMap = {};
     this.extraOptions = options?.extraOptions || {};
+    this.updatedRemoteInfos = {};
   }
 
   generateAPITypes(mapComponentsToExpose: Record<string, string>) {
@@ -249,7 +257,7 @@ class DTSManager {
       );
       const filePath = path.join(destinationPath, REMOTE_API_TYPES_FILE_NAME);
       fs.writeFileSync(filePath, apiTypeFile);
-      this.loadedRemoteAPIAlias.push(remoteInfo.alias);
+      this.loadedRemoteAPIAlias.add(remoteInfo.alias);
     } catch (err) {
       fileLog(
         `Unable to download "${remoteInfo.name}" api types, ${err}`,
@@ -260,13 +268,34 @@ class DTSManager {
   }
 
   consumeAPITypes(hostOptions: Required<HostOptions>) {
-    if (!this.loadedRemoteAPIAlias.length) {
+    const apiTypeFileName = path.join(
+      hostOptions.context,
+      hostOptions.typesFolder,
+      HOST_API_TYPES_FILE_NAME,
+    );
+    try {
+      const existedFile = fs.readFileSync(apiTypeFileName, 'utf-8');
+      const existedImports = new ThirdPartyExtractor('').collectTypeImports(
+        existedFile,
+      );
+      existedImports.forEach((existedImport) => {
+        const alias = existedImport
+          .split('./')
+          .slice(1)
+          .join('./')
+          .replace('/apis.d.ts', '');
+        this.loadedRemoteAPIAlias.add(alias);
+      });
+    } catch (err) {
+      //noop
+    }
+    if (!this.loadedRemoteAPIAlias.size) {
       return;
     }
     const packageTypes: string[] = [];
     const remoteKeys: string[] = [];
 
-    const importTypeStr = this.loadedRemoteAPIAlias
+    const importTypeStr = [...this.loadedRemoteAPIAlias]
       .sort()
       .map((alias, index) => {
         const remoteKey = `RemoteKeys_${index}`;
@@ -392,46 +421,97 @@ class DTSManager {
   }
 
   async updateTypes(options: UpdateTypesOptions): Promise<void> {
-    // can use remoteTarPath directly in the future
-    const { remoteName, updateMode } = options;
-    const hostName = this.options?.host?.moduleFederationConfig?.name;
-
-    if (updateMode === UpdateMode.POSITIVE && remoteName === hostName) {
-      if (!this.options.remote) {
-        return;
-      }
-      this.generateTypes();
-    } else {
-      const { remoteAliasMap } = this;
-      if (!this.options.host) {
-        return;
-      }
-      const { hostOptions, mapRemotesToDownload } = retrieveHostConfig(
-        this.options.host,
+    try {
+      // can use remoteTarPath directly in the future
+      const {
+        remoteName,
+        updateMode,
+        remoteInfo: updatedRemoteInfo,
+        once,
+      } = options;
+      const hostName = this.options?.host?.moduleFederationConfig?.name;
+      fileLog(
+        `updateTypes options:, ${JSON.stringify(options, null, 2)}`,
+        'consumeTypes',
+        'info',
       );
+      if (updateMode === UpdateMode.POSITIVE && remoteName === hostName) {
+        if (!this.options.remote) {
+          return;
+        }
+        this.generateTypes();
+      } else {
+        const { remoteAliasMap } = this;
+        if (!this.options.host) {
+          return;
+        }
+        const { hostOptions, mapRemotesToDownload } = retrieveHostConfig(
+          this.options.host,
+        );
 
-      const loadedRemoteInfo = Object.values(remoteAliasMap).find(
-        (i) => i.name === remoteName,
-      );
+        const loadedRemoteInfo = Object.values(remoteAliasMap).find(
+          (i) => i.name === remoteName,
+        );
 
-      if (!loadedRemoteInfo) {
-        const remoteInfo = Object.values(mapRemotesToDownload).find((item) => {
-          return item.name === remoteName;
-        });
-        if (remoteInfo) {
-          if (!this.remoteAliasMap[remoteInfo.alias]) {
-            const requiredRemoteInfo =
-              await this.requestRemoteManifest(remoteInfo);
-            this.remoteAliasMap[remoteInfo.alias] = requiredRemoteInfo;
-          }
-          await this.consumeTargetRemotes(
-            hostOptions,
-            this.remoteAliasMap[remoteInfo.alias],
+        if (!loadedRemoteInfo) {
+          const remoteInfo = Object.values(mapRemotesToDownload).find(
+            (item) => {
+              return item.name === remoteName;
+            },
           );
+          if (remoteInfo) {
+            if (!this.remoteAliasMap[remoteInfo.alias]) {
+              const requiredRemoteInfo =
+                await this.requestRemoteManifest(remoteInfo);
+              this.remoteAliasMap[remoteInfo.alias] = requiredRemoteInfo;
+            }
+            await this.consumeTargetRemotes(
+              hostOptions,
+              this.remoteAliasMap[remoteInfo.alias],
+            );
+          } else if (updatedRemoteInfo) {
+            const consumeDynamicRemoteTypes = async () => {
+              const [_destinationFolder, destinationPath] =
+                await this.consumeTargetRemotes(
+                  hostOptions,
+                  this.updatedRemoteInfos[updatedRemoteInfo.name],
+                );
+              await this.downloadAPITypes(
+                this.updatedRemoteInfos[updatedRemoteInfo.name],
+                destinationPath,
+              );
+              this.consumeAPITypes(hostOptions);
+            };
+            if (!this.updatedRemoteInfos[updatedRemoteInfo.name]) {
+              const parsedRemoteInfo = retrieveRemoteInfo({
+                hostOptions: hostOptions,
+                remoteAlias: updatedRemoteInfo.alias || updatedRemoteInfo.name,
+                remote: updatedRemoteInfo.url,
+              });
+              fileLog(`start request manifest`, 'consumeTypes', 'info');
+              this.updatedRemoteInfos[updatedRemoteInfo.name] =
+                await this.requestRemoteManifest(parsedRemoteInfo);
+              fileLog(
+                `end request manifest, this.updatedRemoteInfos[updatedRemoteInfo.name]: ${JSON.stringify(
+                  this.updatedRemoteInfos[updatedRemoteInfo.name],
+                  null,
+                  2,
+                )}`,
+                'consumeTypes',
+                'info',
+              );
+              await consumeDynamicRemoteTypes();
+            }
+            if (!once && this.updatedRemoteInfos[updatedRemoteInfo.name]) {
+              await consumeDynamicRemoteTypes();
+            }
+          }
+        } else {
+          await this.consumeTargetRemotes(hostOptions, loadedRemoteInfo);
         }
-      } else {
-        await this.consumeTargetRemotes(hostOptions, loadedRemoteInfo);
       }
+    } catch (err) {
+      fileLog(`updateTypes fail, ${err}`, 'updateTypes', 'error');
     }
   }
 }

packages/dts-plugin/src/core/lib/DtsWorker.spec.ts

@@ -18,7 +18,7 @@ describe('generateTypesInChildProcess', () => {
         'react-dom': { singleton: true, eager: true },
       },
     },
-    tsConfigPath: join(__dirname, '../../..', './tsconfig.json'),
+    tsConfigPath: join(__dirname, '../../..', './tsconfig.spec.json'),
     typesFolder: typesFolder,
     compiledTypesFolder: 'compiled-types',
     deleteTypesFolder: false,

packages/dts-plugin/src/core/lib/DtsWorker.ts

@@ -22,7 +22,7 @@ export class DtsWorker {
     });
     this.removeUnSerializationOptions();
     this.rpcWorker = createRpcWorker(
-      path.resolve(__dirname, './forkGenerateDts.js'),
+      path.resolve(__dirname, './fork-generate-dts.js'),
       {},
       undefined,
       true,

packages/dts-plugin/src/core/lib/archiveHandler.test.ts

@@ -27,7 +27,7 @@ describe('archiveHandler', () => {
       compiledTypesFolder: 'compiledTypesFolder',
       typesFolder: 'typesRemoteFolder',
       moduleFederationConfig: {},
-      tsConfigPath: './tsconfig.json',
+      tsConfigPath: './tsconfig.spec.json',
       deleteTypesFolder: false,
     } as unknown as Required<RemoteOptions>;