feat(plugin-dts): dtsPromise only registered when firstCompile and print log with environment info (#63)

Author: 9aoy

e2e/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@e2e/helper": "workspace:*",
     "@playwright/test": "1.43.1",
-    "@rsbuild/core": "1.0.1-beta.8",
+    "@rsbuild/core": "1.0.1-beta.10",
     "@rslib/core": "workspace:*",
     "@rslib/tsconfig": "workspace:*",
     "@types/fs-extra": "^11.0.4",

packages/core/package.json

@@ -38,7 +38,7 @@
     "prebundle": "prebundle"
   },
   "dependencies": {
-    "@rsbuild/core": "1.0.1-beta.8",
+    "@rsbuild/core": "1.0.1-beta.10",
     "rsbuild-plugin-dts": "workspace:*"
   },
   "devDependencies": {

packages/plugin-dts/package.json

@@ -29,9 +29,12 @@
     "build": "modern build",
     "dev": "modern build --watch"
   },
+  "dependencies": {
+    "picocolors": "1.0.1"
+  },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.47.4",
-    "@rsbuild/core": "1.0.1-beta.8",
+    "@rsbuild/core": "1.0.1-beta.10",
     "@rslib/tsconfig": "workspace:*",
     "typescript": "^5.5.3"
   },

packages/plugin-dts/src/dts.ts

@@ -1,13 +1,14 @@
 import { basename, dirname, join, relative } from 'node:path';
 import { logger } from '@rsbuild/core';
+import color from 'picocolors';
 import type { DtsGenOptions } from 'src';
 import * as ts from 'typescript';
 import { emitDts } from './tsc';
 import { ensureTempDeclarationDir, loadTsconfig } from './utils';
 
 export async function generateDts(data: DtsGenOptions): Promise<void> {
-  logger.start('Generating DTS...');
-  const { options: pluginOptions, cwd, isWatch } = data;
+  const { options: pluginOptions, cwd, isWatch, name } = data;
+  logger.start(`Generating DTS... ${color.gray(`(${name})`)}`);
   const { tsconfigPath, distPath, bundle, entryPath } = pluginOptions;
   const configPath = ts.findConfigFile(cwd, ts.sys.fileExists, tsconfigPath);
   if (!configPath) {
@@ -60,6 +61,7 @@ export async function generateDts(data: DtsGenOptions): Promise<void> {
 
   emitDts(
     {
+      name,
       cwd,
       configPath,
       rootDir,

packages/plugin-dts/src/index.ts

@@ -10,6 +10,7 @@ export type pluginDtsOptions = {
 };
 
 export type DtsGenOptions = {
+  name: string;
   options: pluginDtsOptions;
   cwd: string;
   isWatch: boolean;
@@ -34,34 +35,49 @@ export const pluginDts = (options: pluginDtsOptions): RsbuildPlugin => ({
 
     const dtsPromises: Promise<void>[] = [];
 
-    api.onBeforeBuild(({ isWatch }) => {
-      const jsExtension = extname(__filename);
-      const childProcess = fork(join(__dirname, `./dts${jsExtension}`), [], {
-        stdio: 'inherit',
-      });
+    api.onBeforeEnvironmentCompile(
+      ({ isWatch, isFirstCompile, environment }) => {
+        if (!isFirstCompile) {
+          return;
+        }
 
-      const dtsGenOptions = {
-        options,
-        cwd: api.context.rootPath,
-        isWatch,
-      };
+        const jsExtension = extname(__filename);
+        const childProcess = fork(join(__dirname, `./dts${jsExtension}`), [], {
+          stdio: 'inherit',
+        });
 
-      childProcess.send(dtsGenOptions);
+        const dtsGenOptions = {
+          name: environment.name,
+          options,
+          cwd: api.context.rootPath,
+          isWatch,
+        };
 
-      dtsPromises.push(
-        new Promise((resolve, reject) => {
-          childProcess.on('message', (message) => {
-            if (message === 'success') {
-              resolve();
-            } else if (message === 'error') {
-              reject(new Error('Error occurred in dts generation'));
-            }
-          });
-        }),
-      );
-    });
+        childProcess.send(dtsGenOptions);
+
+        dtsPromises.push(
+          new Promise((resolve, reject) => {
+            childProcess.on('message', (message) => {
+              if (message === 'success') {
+                resolve();
+              } else if (message === 'error') {
+                reject(
+                  new Error(
+                    `Error occurred in ${environment.name} dts generation`,
+                  ),
+                );
+              }
+            });
+          }),
+        );
+      },
+    );
+
+    api.onAfterBuild(async ({ isFirstCompile }) => {
+      if (!isFirstCompile) {
+        return;
+      }
 
-    api.onAfterBuild(async () => {
       await Promise.all(dtsPromises);
     });
   },

packages/plugin-dts/src/tsc.ts

@@ -1,8 +1,10 @@
 import { logger } from '@rsbuild/core';
+import color from 'picocolors';
 import * as ts from 'typescript';
 import { getFileLoc, loadTsconfig } from './utils';
 
 export type emitDtsOptions = {
+  name: string;
   cwd: string;
   configPath: string;
   rootDir: string;
@@ -18,7 +20,7 @@ export function emitDts(
   const getTimeCost = () => {
     return `${Math.floor(Date.now() - start)}ms`;
   };
-  const { configPath, declarationDir } = options;
+  const { configPath, declarationDir, name } = options;
   const { options: rawCompilerOptions, fileNames } = loadTsconfig(configPath);
 
   const compilerOptions = {
@@ -56,7 +58,9 @@ export function emitDts(
     }
 
     if (diagnosticMessages.length) {
-      logger.error('Failed to emit declaration files.');
+      logger.error(
+        `Failed to emit declaration files. ${color.gray(`(${name})`)}`,
+      );
 
       for (const message of diagnosticMessages) {
         logger.error(message);
@@ -65,7 +69,9 @@ export function emitDts(
       throw new Error('DTS generation failed');
     }
 
-    logger.info(`DTS generation succeeded in ${getTimeCost()}`);
+    logger.info(
+      `DTS generation succeeded in ${getTimeCost()} ${color.gray(`(${name})`)}`,
+    );
   } else {
     const createProgram = ts.createSemanticDiagnosticsBuilderProgram;
     const formatHost: ts.FormatDiagnosticsHost = {
@@ -92,10 +98,10 @@ export function emitDts(
       _options: ts.CompilerOptions,
       errorCount?: number,
     ) => {
-      const message = ts.flattenDiagnosticMessageText(
+      const message = `${ts.flattenDiagnosticMessageText(
         diagnostic.messageText,
         formatHost.getNewLine(),
-      );
+      )} ${color.gray(`(${name})`)}`;
 
       // 6031: File change detected. Starting incremental compilation...
       // 6032: Starting compilation in watch mode...