fix(dts-plugin): optimize generate types in dev

.changeset/clever-pianos-cough.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): only block build process in prod env when generating types

.github/pr-labeler.yml

@@ -1,3 +1,8 @@
+permissions:
+  # Permits `github/issue-labeler` to add a label to a pull request
+  pull-requests: write
+  contents: read
+
 'change: feat':
   - '/^(feat|types|style)/'
 'change: fix':

packages/dts-plugin/src/plugins/GenerateTypesPlugin.ts

@@ -1,4 +1,4 @@
-import type { Compiler, WebpackPluginInstance } from 'webpack';
+import type { Compilation, Compiler, WebpackPluginInstance } from 'webpack';
 import fs from 'fs';
 import path from 'path';
 import { isDev, getCompilerOutputDir } from './utils';
@@ -88,7 +88,130 @@ export class GenerateTypesPlugin implements WebpackPluginInstance {
       return fn;
     };
     const generateTypesFn = getGenerateTypesFn();
-    let compiledOnce = false;
+
+    const emitTypesFiles = async (compilation: Compilation) => {
+      // Dev types will be generated by DevPlugin, the archive filename usually is dist/.dev-server.zip
+      try {
+        const { zipTypesPath, apiTypesPath, zipName, apiFileName } =
+          retrieveTypesAssetsInfo(finalOptions.remote);
+
+        if (isProd && zipName && compilation.getAsset(zipName)) {
+          callback();
+          return;
+        }
+
+        await generateTypesFn(finalOptions);
+        const config = finalOptions.remote.moduleFederationConfig;
+        let zipPrefix = '';
+        if (typeof config.manifest === 'object' && config.manifest.filePath) {
+          zipPrefix = config.manifest.filePath;
+        } else if (
+          typeof config.manifest === 'object' &&
+          config.manifest.fileName
+        ) {
+          zipPrefix = path.dirname(config.manifest.fileName);
+        } else if (config.filename) {
+          zipPrefix = path.dirname(config.filename);
+        }
+
+        if (isProd) {
+          const zipAssetName = path.join(zipPrefix, zipName);
+          const apiAssetName = path.join(zipPrefix, apiFileName);
+          if (zipTypesPath && !compilation.getAsset(zipAssetName)) {
+            compilation.emitAsset(
+              zipAssetName,
+              new compiler.webpack.sources.RawSource(
+                fs.readFileSync(zipTypesPath),
+                false,
+              ),
+            );
+          }
+
+          if (apiTypesPath && !compilation.getAsset(apiAssetName)) {
+            compilation.emitAsset(
+              apiAssetName,
+              new compiler.webpack.sources.RawSource(
+                fs.readFileSync(apiTypesPath),
+                false,
+              ),
+            );
+          }
+          callback();
+        } else {
+          const isEEXIST = (err: NodeJS.ErrnoException) => {
+            return err.code == 'EEXIST';
+          };
+          if (zipTypesPath) {
+            const zipContent = fs.readFileSync(zipTypesPath);
+            const zipOutputPath = path.join(
+              compiler.outputPath,
+              zipPrefix,
+              zipName,
+            );
+            await new Promise<void>((resolve, reject) => {
+              compiler.outputFileSystem.mkdir(
+                path.dirname(zipOutputPath),
+                (err) => {
+                  if (err && !isEEXIST(err)) {
+                    reject(err);
+                  } else {
+                    compiler.outputFileSystem.writeFile(
+                      zipOutputPath,
+                      zipContent,
+                      (writeErr) => {
+                        if (writeErr && !isEEXIST(writeErr)) {
+                          reject(writeErr);
+                        } else {
+                          resolve();
+                        }
+                      },
+                    );
+                  }
+                },
+              );
+            });
+          }
+
+          if (apiTypesPath) {
+            const apiContent = fs.readFileSync(apiTypesPath);
+            const apiOutputPath = path.join(
+              compiler.outputPath,
+              zipPrefix,
+              apiFileName,
+            );
+            await new Promise<void>((resolve, reject) => {
+              compiler.outputFileSystem.mkdir(
+                path.dirname(apiOutputPath),
+                (err) => {
+                  if (err && !isEEXIST(err)) {
+                    reject(err);
+                  } else {
+                    compiler.outputFileSystem.writeFile(
+                      apiOutputPath,
+                      apiContent,
+                      (writeErr) => {
+                        if (writeErr && !isEEXIST(writeErr)) {
+                          reject(writeErr);
+                        } else {
+                          resolve();
+                        }
+                      },
+                    );
+                  }
+                },
+              );
+            });
+          }
+
+          callback();
+        }
+      } catch (err) {
+        callback();
+        if (finalOptions.displayErrorInTerminal) {
+          console.error('Error in mf:generateTypes processAssets hook:', err);
+        }
+      }
+    };
 
     compiler.hooks.thisCompilation.tap('mf:generateTypes', (compilation) => {
       compilation.hooks.processAssets.tapPromise(
@@ -100,70 +223,9 @@ export class GenerateTypesPlugin implements WebpackPluginInstance {
         },
         async () => {
           await consumeTypesPromise;
-          try {
-            if (pluginOptions.dev === false && compiledOnce) {
-              return;
-            }
-
-            if (compiledOnce) {
-              // Dev types will be generated by DevPlugin, the archive filename usually is dist/.dev-server.zip
-              return;
-            }
-
-            const { zipTypesPath, apiTypesPath, zipName, apiFileName } =
-              retrieveTypesAssetsInfo(finalOptions.remote);
-            if (zipName && compilation.getAsset(zipName)) {
-              return;
-            }
-
-            await generateTypesFn(finalOptions);
-            const config = finalOptions.remote.moduleFederationConfig;
-            let zipPrefix = '';
-            if (
-              typeof config.manifest === 'object' &&
-              config.manifest.filePath
-            ) {
-              zipPrefix = config.manifest.filePath;
-            } else if (
-              typeof config.manifest === 'object' &&
-              config.manifest.fileName
-            ) {
-              zipPrefix = path.dirname(config.manifest.fileName);
-            } else if (config.filename) {
-              zipPrefix = path.dirname(config.filename);
-            }
-
-            const zipAssetName = path.join(zipPrefix, zipName);
-            if (zipTypesPath && !compilation.getAsset(zipAssetName)) {
-              compilation.emitAsset(
-                path.join(zipPrefix, zipName),
-                new compiler.webpack.sources.RawSource(
-                  fs.readFileSync(zipTypesPath),
-                  false,
-                ),
-              );
-            }
-
-            const apiAssetName = path.join(zipPrefix, apiFileName);
-            if (apiTypesPath && !compilation.getAsset(apiAssetName)) {
-              compilation.emitAsset(
-                path.join(zipPrefix, apiFileName),
-                new compiler.webpack.sources.RawSource(
-                  fs.readFileSync(apiTypesPath),
-                  false,
-                ),
-              );
-            }
-            compiledOnce = true;
-            callback();
-          } catch (err) {
-            callback();
-            if (finalOptions.displayErrorInTerminal) {
-              console.error(
-                'Error in mf:generateTypes processAssets hook:',
-                err,
-              );
-            }
+          const emitTypesFilesPromise = emitTypesFiles(compilation);
+          if (isProd) {
+            await emitTypesFilesPromise;
           }
         },
       );

packages/manifest/src/utils.ts

@@ -1,5 +1,6 @@
 import { Chunk, Compilation, StatsCompilation, StatsModule } from 'webpack';
 import path from 'path';
+import fs from 'fs';
 import {
   StatsAssets,
   moduleFederationPlugin,
@@ -307,24 +308,6 @@ export function getTypesMetaInfo(
     const zip = path.join(zipPrefix, zipName);
     const api = path.join(zipPrefix, apiFileName);
 
-    if (!zip || !compilation.getAsset(zip)) {
-      return {
-        path: '',
-        name: '',
-        zip: '',
-        api: '',
-      };
-    }
-
-    if (!api || !compilation.getAsset(api)) {
-      return {
-        path: '',
-        name: '',
-        zip,
-        api: '',
-      };
-    }
-
     return {
       path: '',
       name: '',