fix(dts-plugin): temp tsconfig path should extends original tsconfig (#2780)

Author: 2heal1

.changeset/clean-kiwis-repair.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+fix(dts-plugin): temp tsconfig path should extends original tsconfig

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

@@ -6,7 +6,7 @@ import { retrieveTypesArchiveDestinationPath } from '../lib/archiveHandler';
 
 describe('hostPlugin', () => {
   const moduleFederationConfig = {
-    name: 'moduleFederationHost',
+    name: 'hostPluginTestHost',
     filename: 'remoteEntry.js',
     remotes: {
       moduleFederationTypescript: 'http://localhost:3000/remoteEntry.js',

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

@@ -5,7 +5,7 @@ import { retrieveRemoteConfig } from './remotePlugin';
 
 describe('hostPlugin', () => {
   const moduleFederationConfig = {
-    name: 'moduleFederationHost',
+    name: 'remotePluginTestHost',
     filename: 'remoteEntry.js',
     exposes: {
       './button': './src/components/button',
@@ -35,6 +35,7 @@ describe('hostPlugin', () => {
           });
 
         expect(tsConfig).toStrictEqual({
+          extends: tsConfigPath,
           compileOnSave: false,
           compilerOptions: {
             target: 'es2017',
@@ -98,6 +99,7 @@ describe('hostPlugin', () => {
 
         expect(tsConfig).toStrictEqual({
           compileOnSave: false,
+          extends: tsConfigPath,
           compilerOptions: {
             module: 'esnext',
             resolveJsonModule: true,

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

@@ -105,6 +105,8 @@ const readTsConfig = (
     ...defaultCompilerOptions,
   };
 
+  delete rawTsConfigJson.compilerOptions?.paths;
+
   const filesToCompile = [
     ...Object.values(mapComponentsToExpose),
     ...additionalFilesToCompile,
@@ -115,10 +117,7 @@ const readTsConfig = (
   rawTsConfigJson.exclude = [];
   'references' in rawTsConfigJson && delete rawTsConfigJson.references;
 
-  const extendsPath = rawTsConfigJson.extends;
-  if (extendsPath && extendsPath.startsWith('.')) {
-    rawTsConfigJson.extends = resolve(context, extendsPath);
-  }
+  rawTsConfigJson.extends = resolvedTsConfigPath;
   return rawTsConfigJson;
 };
 

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

@@ -12,7 +12,7 @@ describe('DTSManager advance usage', () => {
   const typesFolder = '@mf-types-dts-test-advance';
   const remoteOptions = {
     moduleFederationConfig: {
-      name: 'moduleFederationTypescript',
+      name: 'dtsManagerAdvanceSpecRemote',
       filename: 'remoteEntry.js',
       exposes: {
         './index': join(__dirname, '..', './index.ts'),
@@ -36,7 +36,7 @@ describe('DTSManager advance usage', () => {
   const hostOptions = {
     context: projectRoot,
     moduleFederationConfig: {
-      name: 'moduleFederationTypescript',
+      name: 'dtsManagerAdvanceSpecHost',
       filename: 'remoteEntry.js',
       remotes: {
         remotes: 'remote@https://bar.it',

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

@@ -2,8 +2,8 @@ import AdmZip from 'adm-zip';
 import axios from 'axios';
 import dirTree from 'directory-tree';
 import { rmSync, existsSync } from 'fs';
-import { basename, join } from 'path';
-import { describe, expect, it, vi, afterAll } from 'vitest';
+import { join } from 'path';
+import { describe, expect, it, vi } from 'vitest';
 import { DTSManager } from './DTSManager';
 import { UpdateMode } from '../../server/constant';
 
@@ -14,7 +14,7 @@ describe('DTSManager', () => {
   const typesFolder = '@mf-types-dts-test';
   const remoteOptions = {
     moduleFederationConfig: {
-      name: 'moduleFederationTypescript',
+      name: 'dtsManagerSpecRemote',
       filename: 'remoteEntry.js',
       exposes: {
         './index': join(__dirname, '..', './index.ts'),
@@ -34,7 +34,7 @@ describe('DTSManager', () => {
 
   const hostOptions = {
     moduleFederationConfig: {
-      name: 'moduleFederationTypescript',
+      name: 'dtsManagerSpecHost',
       filename: 'remoteEntry.js',
       remotes: {
         remotes: 'remote@https://foo.it',
@@ -53,15 +53,6 @@ describe('DTSManager', () => {
     host: hostOptions,
   });
 
-  afterAll(() => {
-    [
-      join(projectRoot, TEST_DIT_DIR, remoteOptions.typesFolder),
-      join(projectRoot, hostOptions.typesFolder),
-    ].forEach((tmpDir) => {
-      rmSync(tmpDir, { recursive: true });
-    });
-  });
-
   it('generate types', async () => {
     const distFolder = join(
       projectRoot,
@@ -355,13 +346,13 @@ describe('DTSManager', () => {
     rmSync(distFolder, { recursive: true });
     expect(existsSync(distFolder)).toEqual(false);
     await dtsManager.updateTypes({
-      remoteName: remoteOptions.moduleFederationConfig.name,
+      remoteName: hostOptions.moduleFederationConfig.name,
       remoteTarPath: '',
       updateMode: UpdateMode.POSITIVE,
     });
     expect(
       dirTree(distFolder, {
-        exclude: [/node_modules/, /dev-worker/, /plugins/, /server/],
+        exclude: [/node_modules/, /dev-worker/, /plugins/, /server/, ,],
       }),
     ).toMatchObject({
       name: '@mf-types-dts-test',

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

@@ -9,7 +9,7 @@ describe('generateTypesInChildProcess', () => {
   const typesFolder = '@mf-types-dts-test-child-process';
   const remoteOptions = {
     moduleFederationConfig: {
-      name: 'moduleFederationTypescript',
+      name: 'dtsWorkerSpecRemote',
       filename: 'remoteEntry.js',
       exposes: {
         './index': join(__dirname, '..', './index.ts'),
@@ -30,7 +30,7 @@ describe('generateTypesInChildProcess', () => {
   const hostOptions = {
     context: projectRoot,
     moduleFederationConfig: {
-      name: 'moduleFederationTypescript',
+      name: 'dtsWorkerSpecHost',
       filename: 'remoteEntry.js',
       remotes: {
         remotes: 'remote@https://foo.it',

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

@@ -73,6 +73,7 @@ describe('archiveHandler', () => {
       context: process.cwd(),
       abortOnError: true,
       consumeAPITypes: false,
+      runtimePkgs: [],
     };
 
     const destinationFolder = 'typesHostFolder';
@@ -118,6 +119,7 @@ describe('archiveHandler', () => {
         context: process.cwd(),
         abortOnError: false,
         consumeAPITypes: false,
+        runtimePkgs: [],
       };
       axios.get = vi.fn().mockRejectedValue(new Error(message));
       const res = await downloadTypesArchive(hostOptions)([

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

@@ -1,4 +1,5 @@
 import { ensureDirSync, writeFileSync, existsSync } from 'fs-extra';
+import crypto from 'crypto';
 import { stat, readdir, writeFile, rm, readFile } from 'fs/promises';
 import { randomUUID } from 'crypto';
 import {
@@ -54,12 +55,20 @@ export const retrieveMfAPITypesPath = (
     `${remoteOptions.typesFolder}.d.ts`,
   );
 
-function writeTempTsConfig(tsConfig: TsConfigJson, context: string) {
+function writeTempTsConfig(
+  tsConfig: TsConfigJson,
+  context: string,
+  name: string,
+) {
+  const createHash = (contents: string) => {
+    return crypto.createHash('md5').update(contents).digest('hex');
+  };
+  const hash = createHash(`${JSON.stringify(tsConfig)}${name}`);
   const tempTsConfigJsonPath = resolve(
     context,
     'node_modules',
     TEMP_DIR,
-    `tsconfig.${randomUUID()}.json`,
+    `tsconfig.${hash}.json`,
   );
   ensureDirSync(dirname(tempTsConfigJsonPath));
   writeFileSync(tempTsConfigJsonPath, JSON.stringify(tsConfig, null, 2));
@@ -152,6 +161,7 @@ export const compileTs = async (
   const tempTsConfigJsonPath = writeTempTsConfig(
     tsConfig,
     remoteOptions.context,
+    remoteOptions.moduleFederationConfig.name || 'mf',
   );
   try {
     const mfTypePath = retrieveMfTypesPath(tsConfig, remoteOptions);

packages/dts-plugin/tests/setup.ts

@@ -0,0 +1,9 @@
+import { rmSync } from 'fs';
+import path from 'path';
+
+const TEMP_TS_CONFIG_DIR = path.resolve(__dirname, 'node_modules/.federation');
+try {
+  rmSync(TEMP_TS_CONFIG_DIR, { recursive: true });
+} catch (err) {
+  // noop
+}