fix(dts-plugin): add specify dir and mf name to cache path (#3534)

Author: 2heal1

.changeset/orange-days-kiss.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): cache file should have name as its unique path

packages/dts-plugin/package.json

@@ -72,7 +72,8 @@
     "@module-federation/runtime": "workspace:*",
     "vue": "^3.4.29",
     "@vue/tsconfig": "^0.5.1",
-    "vue-tsc": "^2.0.26"
+    "vue-tsc": "^2.0.26",
+    "rimraf": "~3.0.2"
   },
   "peerDependencies": {
     "typescript": "^4.9.0 || ^5.0.0",

packages/dts-plugin/project.json

@@ -18,6 +18,17 @@
       }
     },
     "test": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/coverage/packages/dts-plugin"],
+      "options": {
+        "parallel": false,
+        "commands": [
+          "rimraf packages/dts-plugin/dist-test",
+          "nx run dts-plugin:test-impl"
+        ]
+      }
+    },
+    "test-impl": {
       "executor": "@nx/vite:test",
       "outputs": ["{workspaceRoot}/coverage/packages/dts-plugin"]
     },

packages/dts-plugin/src/core/configurations/remotePlugin.test.ts

@@ -57,7 +57,7 @@ describe('hostPlugin', () => {
             incremental: true,
             tsBuildInfoFile: resolve(
               remoteOptions.context,
-              'node_modules/.cache/.tsbuildinfo',
+              'node_modules/.cache/mf-types/.tsbuildinfo',
             ),
           },
           files: ['./src/components/button', './src/components/anotherButton'],
@@ -76,7 +76,7 @@ describe('hostPlugin', () => {
           typesFolder: '@mf-types',
           compiledTypesFolder: 'compiled-types',
           hostRemoteTypesFolder: '@mf-types',
-          deleteTypesFolder: true,
+          deleteTypesFolder: false,
           moduleFederationConfig,
           compilerInstance: 'tsc',
           compileInChildProcess: false,
@@ -126,7 +126,7 @@ describe('hostPlugin', () => {
             incremental: true,
             tsBuildInfoFile: resolve(
               remoteOptions.context,
-              'node_modules/.cache/.tsbuildinfo',
+              'node_modules/.cache/mf-types/.tsbuildinfo',
             ),
           },
           exclude: [],

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

@@ -61,6 +61,7 @@ const readTsConfig = (
     context,
     additionalFilesToCompile,
     outputDir,
+    moduleFederationConfig,
   }: Required<RemoteOptions>,
   mapComponentsToExpose: Record<string, string>,
 ): TsConfigJson => {
@@ -97,13 +98,16 @@ const readTsConfig = (
     noEmit: false,
     declaration: true,
     outDir,
-    incremental: true,
-    tsBuildInfoFile: resolve(context, 'node_modules/.cache/.tsbuildinfo'),
   };
 
   rawTsConfigJson.compilerOptions = rawTsConfigJson.compilerOptions || {};
 
   rawTsConfigJson.compilerOptions = {
+    incremental: true,
+    tsBuildInfoFile: resolve(
+      context,
+      'node_modules/.cache/mf-types/.tsbuildinfo',
+    ),
     ...rawTsConfigJson.compilerOptions,
     ...defaultCompilerOptions,
   };
@@ -183,6 +187,14 @@ export const retrieveRemoteConfig = (options: RemoteOptions) => {
   const mapComponentsToExpose = resolveExposes(remoteOptions);
   const tsConfig = readTsConfig(remoteOptions, mapComponentsToExpose);
 
+  if (
+    tsConfig.compilerOptions.incremental &&
+    tsConfig.compilerOptions.tsBuildInfoFile &&
+    options.deleteTypesFolder !== true
+  ) {
+    remoteOptions.deleteTypesFolder = false;
+  }
+
   return {
     tsConfig,
     mapComponentsToExpose,

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

@@ -3,7 +3,7 @@ import axios from 'axios';
 import dirTree from 'directory-tree';
 import { readFileSync, rmSync } from 'fs';
 import { join } from 'path';
-import { describe, expect, it, vi, afterAll } from 'vitest';
+import { describe, expect, it, vi, beforeAll } from 'vitest';
 import { DTSManager } from './DTSManager';
 const TEST_DIT_DIR = 'dist-test';
 
@@ -55,6 +55,16 @@ describe('DTSManager advance usage', () => {
     host: hostOptions,
   });
 
+  beforeAll(() => {
+    try {
+      rmSync(join(projectRoot, 'node_modules/.cache/mf-types'), {
+        recursive: true,
+      });
+    } catch (err) {
+      //noop
+    }
+  });
+
   it('generate types with api declaration file', async () => {
     const distFolder = join(
       projectRoot,

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

@@ -86,6 +86,9 @@ describe('DTSManager General Tests', () => {
       implementation: 'webpack',
       abortOnError: false,
     };
+    fs.rmSync(path.join(projectRoot, 'node_modules/.cache/mf-types'), {
+      recursive: true,
+    });
     dtsManager = new DTSManager({ remote: remoteOptions });
 
     // Add mock implementations

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

@@ -3,7 +3,7 @@ import axios from 'axios';
 import dirTree from 'directory-tree';
 import { rmSync, existsSync } from 'fs';
 import { join } from 'path';
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi, beforeAll } from 'vitest';
 import { DTSManager } from './DTSManager';
 import { UpdateMode } from '../../server/constant';
 
@@ -53,6 +53,16 @@ describe('DTSManager', () => {
     host: hostOptions,
   });
 
+  beforeAll(() => {
+    try {
+      rmSync(join(projectRoot, 'node_modules/.cache/mf-types'), {
+        recursive: true,
+      });
+    } catch (err) {
+      //noop
+    }
+  });
+
   it('generate types', async () => {
     const distFolder = join(
       projectRoot,
@@ -343,8 +353,7 @@ describe('DTSManager', () => {
       TEST_DIT_DIR,
       remoteOptions.typesFolder,
     );
-    rmSync(distFolder, { recursive: true });
-    expect(existsSync(distFolder)).toEqual(false);
+
     await dtsManager.updateTypes({
       remoteName: hostOptions.moduleFederationConfig.name,
       remoteTarPath: '',

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

@@ -19,13 +19,15 @@ describe('typeScriptCompiler', () => {
   const basicConfig = readJSONSync(
     join(__dirname, '../../..', './tsconfig.spec.json'),
   );
+  const projectRoot = join(__dirname, '../../..');
+
   const tsConfig: TsConfigJson = {
     ...basicConfig,
-    extends: resolve(join(__dirname, '../../..'), basicConfig.extends),
+    extends: resolve(projectRoot, basicConfig.extends),
     compilerOptions: {
       ...basicConfig.compilerOptions,
       outDir: join(tmpDir, 'typesRemoteFolder', 'compiledTypesFolder'),
-      rootDir: join(__dirname, '../../..'),
+      rootDir: projectRoot,
       emitDeclarationOnly: true,
       noEmit: false,
       declaration: true,
@@ -47,9 +49,10 @@ describe('typeScriptCompiler', () => {
     extractThirdParty: false,
     extractRemoteTypes: false,
     implementation: '',
-    context: join(__dirname, '../../..'),
+    context: projectRoot,
     hostRemoteTypesFolder: '@mf-types',
     abortOnError: true,
+    outputDir: 'outputDir',
   };
 
   it('retrieveMfTypesPath correctly calculate path', () => {