fix(dts-plugin): optimize dev behavior (#3424)

2heal1 · web-flow · commit 6e3afc6d9d3f · 2025-01-14T15:46:06.000+08:00
diff --git a/.changeset/afraid-students-help.md b/.changeset/afraid-students-help.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+feat(dts-plugin): support pass headers when request types url
diff --git a/.changeset/large-dogs-laugh.md b/.changeset/large-dogs-laugh.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): set outputDir default value
diff --git a/.changeset/light-islands-juggle.md b/.changeset/light-islands-juggle.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): use remoteTarPath first to fetch hot types
diff --git a/.changeset/nine-toes-smell.md b/.changeset/nine-toes-smell.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): only consume types in dev
diff --git a/.changeset/rare-cobras-beg.md b/.changeset/rare-cobras-beg.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): throw error while downloading types archive hit historyApiFallback
diff --git a/.changeset/sour-dolls-grow.md b/.changeset/sour-dolls-grow.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): generateTypes should after consumeTypes finished
diff --git a/.changeset/swift-deers-clap.md b/.changeset/swift-deers-clap.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': patch
+---
+
+fix(enhanced): no push ModuleFederationPlugin self
diff --git a/.changeset/tame-numbers-sneeze.md b/.changeset/tame-numbers-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): dev plugin should apply after fetchPromise resolved
diff --git a/packages/dts-plugin/src/core/lib/DTSManager.ts b/packages/dts-plugin/src/core/lib/DTSManager.ts
@@ -166,7 +166,7 @@ class DTSManager {
       logger.success('Federated types created correctly');
     } catch (error) {
       if (this.options.remote?.abortOnError === false) {
-        logger.error(`Unable to compile federated types, ${error}`);
+        logger.error(`Unable to compile federated types${error}`);
       } else {
         throw error;
       }
@@ -263,10 +263,11 @@ class DTSManager {
       const filePath = path.join(destinationPath, REMOTE_API_TYPES_FILE_NAME);
       fs.writeFileSync(filePath, apiTypeFile);
       this.loadedRemoteAPIAlias.add(remoteInfo.alias);
+      fileLog(`success`, 'downloadAPITypes', 'info');
     } catch (err) {
       fileLog(
         `Unable to download "${remoteInfo.name}" api types, ${err}`,
-        'consumeTargetRemotes',
+        'downloadAPITypes',
         'error',
       );
     }
@@ -420,17 +421,17 @@ class DTSManager {
 
   async updateTypes(options: UpdateTypesOptions): Promise<void> {
     try {
-      // can use remoteTarPath directly in the future
       const {
         remoteName,
         updateMode,
+        remoteTarPath,
         remoteInfo: updatedRemoteInfo,
         once,
       } = options;
       const hostName = this.options?.host?.moduleFederationConfig?.name;
       fileLog(
-        `updateTypes options:, ${JSON.stringify(options, null, 2)}`,
-        'consumeTypes',
+        `options: ${JSON.stringify(options, null, 2)};\nhostName: ${hostName}`,
+        'updateTypes',
         'info',
       );
       if (updateMode === UpdateMode.POSITIVE && remoteName === hostName) {
@@ -454,19 +455,39 @@ class DTSManager {
         const consumeTypes = async (
           requiredRemoteInfo: Required<RemoteInfo>,
         ) => {
+          fileLog(`consumeTypes start`, 'updateTypes', 'info');
+          if (!requiredRemoteInfo.zipUrl) {
+            throw new Error(
+              `Can not get ${requiredRemoteInfo.name}'s types archive url!`,
+            );
+          }
           const [_alias, destinationPath] = await this.consumeTargetRemotes(
             hostOptions,
-            requiredRemoteInfo,
+            {
+              ...requiredRemoteInfo,
+              // use remoteTarPath first
+              zipUrl: remoteTarPath || requiredRemoteInfo.zipUrl,
+            },
           );
           await this.downloadAPITypes(requiredRemoteInfo, destinationPath);
+          fileLog(`consumeTypes end`, 'updateTypes', 'info');
         };
-
+        fileLog(
+          `loadedRemoteInfo: ${JSON.stringify(loadedRemoteInfo, null, 2)}`,
+          'updateTypes',
+          'info',
+        );
         if (!loadedRemoteInfo) {
           const remoteInfo = Object.values(mapRemotesToDownload).find(
             (item) => {
               return item.name === remoteName;
             },
           );
+          fileLog(
+            `remoteInfo: ${JSON.stringify(remoteInfo, null, 2)}`,
+            'updateTypes',
+            'info',
+          );
           if (remoteInfo) {
             if (!this.remoteAliasMap[remoteInfo.alias]) {
               const requiredRemoteInfo =
@@ -496,7 +517,7 @@ class DTSManager {
                   null,
                   2,
                 )}`,
-                'consumeTypes',
+                'updateTypes',
                 'info',
               );
               await consumeDynamicRemoteTypes();
diff --git a/packages/dts-plugin/src/core/lib/archiveHandler.ts b/packages/dts-plugin/src/core/lib/archiveHandler.ts
@@ -63,6 +63,14 @@ export const downloadTypesArchive = (hostOptions: Required<HostOptions>) => {
         const response = await axiosGet(url, {
           responseType: 'arraybuffer',
         }).catch(downloadErrorLogger(destinationFolder, url));
+        if (
+          typeof response.headers?.['content-type'] === 'string' &&
+          response.headers['content-type'].includes('text/html')
+        ) {
+          throw new Error(
+            `${url} receives invalid content-type: ${response.headers['content-type']}`,
+          );
+        }
 
         try {
           if (hostOptions.deleteTypesFolder) {
@@ -81,6 +89,11 @@ export const downloadTypesArchive = (hostOptions: Required<HostOptions>) => {
 
         const zip = new AdmZip(Buffer.from(response.data));
         zip.extractAllTo(destinationPath, true);
+        fileLog(
+          `zip.extractAllTo success destinationPath: ${destinationPath}; url: ${url}`,
+          'downloadTypesArchive',
+          'info',
+        );
         return [destinationFolder, destinationPath];
       } catch (error: any) {
         fileLog(
diff --git a/packages/dts-plugin/src/core/lib/typeScriptCompiler.test.ts b/packages/dts-plugin/src/core/lib/typeScriptCompiler.test.ts
@@ -308,9 +308,6 @@ describe('typeScriptCompiler', () => {
                       {
                         name: 'GenerateTypesPlugin.d.ts',
                       },
-                      {
-                        name: 'TypesPlugin.d.ts',
-                      },
                       {
                         name: 'utils.d.ts',
                       },
diff --git a/packages/dts-plugin/src/core/lib/typeScriptCompiler.ts b/packages/dts-plugin/src/core/lib/typeScriptCompiler.ts
@@ -66,7 +66,7 @@ function writeTempTsConfig(
   const createHash = (contents: string) => {
     return crypto.createHash('md5').update(contents).digest('hex');
   };
-  const hash = createHash(`${JSON.stringify(tsConfig)}${name}`);
+  const hash = createHash(`${JSON.stringify(tsConfig)}${name}${Date.now()}`);
   const tempTsConfigJsonPath = resolve(
     context,
     'node_modules',
diff --git a/packages/dts-plugin/src/core/lib/utils.ts b/packages/dts-plugin/src/core/lib/utils.ts
@@ -3,7 +3,7 @@ import path from 'path';
 import axios, { type AxiosRequestConfig } from 'axios';
 import http from 'http';
 import https from 'https';
-import { moduleFederationPlugin } from '@module-federation/sdk';
+import { moduleFederationPlugin, getProcessEnv } from '@module-federation/sdk';
 import ansiColors from 'ansi-colors';
 import { retrieveRemoteConfig } from '../configurations/remotePlugin';
 import { HostOptions } from '../interfaces/HostOptions';
@@ -132,8 +132,23 @@ export function cloneDeepOptions(options: DTSManagerOptions) {
   });
 }
 
+const getEnvHeaders = (): Record<string, string> => {
+  const headersStr = getProcessEnv()['MF_ENV_HEADERS'] || '{}';
+
+  return {
+    ...JSON.parse(headersStr),
+  };
+};
+
 export async function axiosGet(url: string, config?: AxiosRequestConfig) {
   const httpAgent = new http.Agent({ family: 4 });
   const httpsAgent = new https.Agent({ family: 4 });
-  return axios.get(url, { httpAgent, httpsAgent, ...config });
+  return axios.get(url, {
+    httpAgent,
+    httpsAgent,
+    ...{
+      headers: getEnvHeaders(),
+    },
+    ...config,
+  });
 }
diff --git a/packages/dts-plugin/src/plugins/ConsumeTypesPlugin.ts b/packages/dts-plugin/src/plugins/ConsumeTypesPlugin.ts
@@ -4,23 +4,33 @@ import {
   type moduleFederationPlugin,
 } from '@module-federation/sdk';
 import { validateOptions, consumeTypes } from '../core/index';
+import { isPrd } from './utils';
 
 export class ConsumeTypesPlugin implements WebpackPluginInstance {
   pluginOptions: moduleFederationPlugin.ModuleFederationPluginOptions;
   dtsOptions: moduleFederationPlugin.PluginDtsOptions;
   defaultOptions: moduleFederationPlugin.DtsHostOptions;
+  callback: () => void;
+
   constructor(
     pluginOptions: moduleFederationPlugin.ModuleFederationPluginOptions,
     dtsOptions: moduleFederationPlugin.PluginDtsOptions,
     defaultOptions: moduleFederationPlugin.DtsHostOptions,
+    callback: () => void,
   ) {
     this.pluginOptions = pluginOptions;
     this.dtsOptions = dtsOptions;
     this.defaultOptions = defaultOptions;
+    this.callback = callback;
   }
 
   apply(compiler: Compiler) {
-    const { dtsOptions, defaultOptions, pluginOptions } = this;
+    const { dtsOptions, defaultOptions, pluginOptions, callback } = this;
+
+    if (isPrd()) {
+      callback();
+      return;
+    }
 
     const normalizedConsumeTypes =
       normalizeOptions<moduleFederationPlugin.DtsRemoteOptions>(
@@ -30,6 +40,7 @@ export class ConsumeTypesPlugin implements WebpackPluginInstance {
       )(dtsOptions.consumeTypes);
 
     if (!normalizedConsumeTypes) {
+      callback();
       return;
     }
 
@@ -46,6 +57,12 @@ export class ConsumeTypesPlugin implements WebpackPluginInstance {
     validateOptions(finalOptions.host);
 
     // only consume once , if remotes update types , DevPlugin will auto sync the latest types
-    consumeTypes(finalOptions);
+    consumeTypes(finalOptions)
+      .then(() => {
+        callback();
+      })
+      .catch(() => {
+        callback();
+      });
   }
 }
diff --git a/packages/dts-plugin/src/plugins/DevPlugin.ts b/packages/dts-plugin/src/plugins/DevPlugin.ts
@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
-import chalk from 'chalk';
-import { type DevWorker, createDevWorker } from '../dev-worker';
+import path from 'path';
+import { createDevWorker } from '../dev-worker';
 import {
   moduleFederationPlugin,
   normalizeOptions,
@@ -12,11 +12,12 @@ import {
   getIPV4,
   logger,
 } from '../server';
-import type { Compiler, WebpackPluginInstance } from 'webpack';
-import path from 'path';
-import { isDev } from './utils';
+import { getCompilerOutputDir, isDev } from './utils';
 import { isTSProject } from '../core/lib/utils';
 
+import type { Compiler, WebpackPluginInstance } from 'webpack';
+import type { DevWorker } from '../dev-worker';
+
 enum PROCESS_EXIT_CODE {
   SUCCESS = 0,
   FAILURE = 1,
@@ -35,9 +36,14 @@ export class DevPlugin implements WebpackPluginInstance {
   readonly name = 'MFDevPlugin';
   private _options: moduleFederationPlugin.ModuleFederationPluginOptions;
   private _devWorker?: DevWorker;
+  fetchTypesPromise: Promise<void>;
 
-  constructor(options: moduleFederationPlugin.ModuleFederationPluginOptions) {
+  constructor(
+    options: moduleFederationPlugin.ModuleFederationPluginOptions,
+    fetchTypesPromise: Promise<void>,
+  ) {
     this._options = options;
+    this.fetchTypesPromise = fetchTypesPromise;
   }
 
   static ensureLiveReloadEntry(
@@ -191,10 +197,7 @@ export class DevPlugin implements WebpackPluginInstance {
                 ? undefined
                 : normalizedDtsOptions.implementation,
             context: compiler.context,
-            outputDir: path.relative(
-              compiler.context,
-              compiler.outputPath || compiler.options.output.path,
-            ),
+            outputDir: getCompilerOutputDir(compiler),
             moduleFederationConfig: {
               ...this._options,
             },
@@ -246,14 +249,15 @@ export class DevPlugin implements WebpackPluginInstance {
     ) {
       remote.tsConfigPath = normalizedDtsOptions.tsConfigPath;
     }
-
-    this._devWorker = createDevWorker({
-      name,
-      remote: remote,
-      host: host,
-      extraOptions: extraOptions,
-      disableLiveReload: normalizedDev.disableHotTypesReload,
-      disableHotTypesReload: normalizedDev.disableHotTypesReload,
+    this.fetchTypesPromise.then(() => {
+      this._devWorker = createDevWorker({
+        name,
+        remote: remote,
+        host: host,
+        extraOptions: extraOptions,
+        disableLiveReload: normalizedDev.disableHotTypesReload,
+        disableHotTypesReload: normalizedDev.disableHotTypesReload,
+      });
     });
 
     this._stopWhenSIGTERMOrSIGINT();
diff --git a/packages/dts-plugin/src/plugins/DtsPlugin.ts b/packages/dts-plugin/src/plugins/DtsPlugin.ts
diff --git a/packages/dts-plugin/src/plugins/GenerateTypesPlugin.ts b/packages/dts-plugin/src/plugins/GenerateTypesPlugin.ts
diff --git a/packages/dts-plugin/src/plugins/TypesPlugin.ts b/packages/dts-plugin/src/plugins/TypesPlugin.ts
diff --git a/packages/dts-plugin/src/plugins/utils.ts b/packages/dts-plugin/src/plugins/utils.ts
diff --git a/packages/enhanced/src/wrapper/ModuleFederationPlugin.ts b/packages/enhanced/src/wrapper/ModuleFederationPlugin.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@module-federation/dts-plugin': patch
 +---
++
 +feat(dts-plugin): support pass headers when request types url