fix(dts-plugin): support compile vue@3 dts (#2723)

Author: 2heal1

.changeset/pink-months-listen.md

@@ -0,0 +1,8 @@
+---
+'@module-federation/third-party-dts-extractor': patch
+'@module-federation/dts-plugin': patch
+'@module-federation/enhanced': patch
+'@module-federation/sdk': patch
+---
+
+fix(dts-plugin): support compile vue@3 dts

.gitignore

@@ -60,3 +60,8 @@ packages/enhanced/test/js
 
 /apps/manifest-demo/**/@mf-types/
 /apps/manifest-demo/webpack-host/@mf-types/
+/apps/manifest-demo/3008-webpack-host/@mf-types/
+
+# dts test cases
+**/dist-test
+**/dist-test/**

apps/runtime-demo/3005-runtime-host/webpack.config.js

@@ -45,6 +45,9 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
       exposes: {
         './Button': './src/Button.tsx',
       },
+      dts: {
+        tsConfigPath: path.resolve(__dirname, 'tsconfig.app.json'),
+      },
       shared: {
         lodash: {
           singleton: true,

apps/runtime-demo/3006-runtime-remote/tsconfig.app.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
+    "composite": true,
+    "declaration": true,
     "types": [
       "node",
       "@nx/react/typings/cssmodule.d.ts",
@@ -12,17 +13,5 @@
     "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
     "../../../node_modules/@nx/react/typings/image.d.ts"
   ],
-  "exclude": [
-    "jest.config.ts",
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx",
-    "dist/**"
-  ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": ["src/**/*"]
 }

apps/runtime-demo/3006-runtime-remote/webpack.config.js

@@ -11,6 +11,7 @@ const {
 } = require('@module-federation/enhanced/webpack');
 const packageJson = require('./package.json');
 
+process.env.FEDERATION_DEBUG = true;
 module.exports = composePlugins(
   withNx(),
   withReact(),
@@ -60,6 +61,9 @@ module.exports = composePlugins(
             requiredVersion: '^18.2.0',
           },
         },
+        dts: {
+          tsConfigPath: path.resolve(__dirname, 'tsconfig.app.json'),
+        },
         runtimePlugins: [path.join(__dirname, './runtimePlugin.ts')],
       }),
     );

package.json

@@ -212,7 +212,7 @@
     "vite-tsconfig-paths": "4.2.3",
     "vitest": "1.2.2",
     "vitest-fetch-mock": "^0.2.2",
-    "vue-tsc": "1.8.27",
+    "vue-tsc": "^2.0.26",
     "wait-on": "^7.2.0",
     "webpack": "^5.90.0",
     "webpack-virtual-modules": "0.6.2",

packages/dts-plugin/package.json

@@ -63,11 +63,14 @@
     "@types/ws": "8.5.10",
     "@types/koa": "2.11.2",
     "@types/node-schedule": "2.1.7",
-    "@module-federation/runtime": "workspace:*"
+    "@module-federation/runtime": "workspace:*",
+    "vue": "^3.4.29",
+    "@vue/tsconfig": "^0.5.1",
+    "vue-tsc": "^2.0.26"
   },
   "peerDependencies": {
     "typescript": "^4.9.0 || ^5.0.0",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": ">=1.0.24"
   },
   "peerDependenciesMeta": {
     "vue-tsc": {

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

@@ -35,22 +35,28 @@ describe('hostPlugin', () => {
           });
 
         expect(tsConfig).toStrictEqual({
-          target: 4,
-          module: 99,
-          lib: ['lib.esnext.d.ts'],
-          moduleResolution: 2,
-          esModuleInterop: true,
-          strict: true,
-          strictNullChecks: true,
-          resolveJsonModule: true,
-          configFilePath: undefined,
-          emitDeclarationOnly: true,
-          noEmit: false,
-          declaration: true,
-          outDir: resolve(
-            remoteOptions.context,
-            'dist/@mf-types/compiled-types',
-          ),
+          compileOnSave: false,
+          compilerOptions: {
+            target: 'es2017',
+            module: 'esnext',
+            lib: ['esnext'],
+            moduleResolution: 'node',
+            esModuleInterop: true,
+            strict: true,
+            strictNullChecks: true,
+            resolveJsonModule: true,
+            emitDeclarationOnly: true,
+            noEmit: false,
+            declaration: true,
+            outDir: resolve(
+              remoteOptions.context,
+              'dist/@mf-types/compiled-types',
+            ),
+            rootDir: resolve(__dirname),
+          },
+          files: ['./src/components/button', './src/components/anotherButton'],
+          include: [],
+          exclude: [],
         });
 
         expect(mapComponentsToExpose).toStrictEqual({
@@ -91,22 +97,28 @@ describe('hostPlugin', () => {
           });
 
         expect(tsConfig).toStrictEqual({
-          module: 99,
-          resolveJsonModule: true,
-          strict: true,
-          strictNullChecks: true,
-          target: 4,
-          lib: ['lib.esnext.d.ts'],
-          moduleResolution: 2,
-          esModuleInterop: true,
-          configFilePath: undefined,
-          emitDeclarationOnly: true,
-          noEmit: false,
-          declaration: true,
-          outDir: resolve(
-            remoteOptions.context,
-            'dist/typesFolder/compiledTypesFolder',
-          ),
+          compileOnSave: false,
+          compilerOptions: {
+            module: 'esnext',
+            resolveJsonModule: true,
+            strict: true,
+            strictNullChecks: true,
+            target: 'es2017',
+            lib: ['esnext'],
+            moduleResolution: 'node',
+            esModuleInterop: true,
+            emitDeclarationOnly: true,
+            noEmit: false,
+            declaration: true,
+            outDir: resolve(
+              remoteOptions.context,
+              'dist/typesFolder/compiledTypesFolder',
+            ),
+            rootDir: resolve(__dirname),
+          },
+          exclude: [],
+          include: [],
+          files: ['./src/components/button', './src/components/anotherButton'],
         });
 
         expect(mapComponentsToExpose).toStrictEqual({

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

@@ -5,6 +5,7 @@ import typescript from 'typescript';
 
 import { RemoteOptions } from '../interfaces/RemoteOptions';
 import { validateOptions } from '../lib/utils';
+import { TsConfigJson } from '../interfaces/TsConfigJson';
 
 const defaultOptions = {
   tsConfigPath: './tsconfig.json',
@@ -23,12 +24,44 @@ const defaultOptions = {
   extractThirdParty: false,
 } satisfies Partial<RemoteOptions>;
 
-const readTsConfig = ({
-  tsConfigPath,
-  typesFolder,
-  compiledTypesFolder,
-  context,
-}: Required<RemoteOptions>): typescript.CompilerOptions => {
+function getEffectiveRootDir(
+  parsedCommandLine: typescript.ParsedCommandLine,
+): string {
+  const compilerOptions = parsedCommandLine.options;
+
+  if (compilerOptions.rootDir) {
+    return compilerOptions.rootDir;
+  }
+
+  // if no set rootDir , infer the commonRoot
+  const files = parsedCommandLine.fileNames;
+  if (files.length > 0) {
+    const commonRoot = files
+      .map((file) => dirname(file))
+      .reduce((commonPath, fileDir) => {
+        while (!fileDir.startsWith(commonPath)) {
+          commonPath = dirname(commonPath);
+        }
+        return commonPath;
+      }, files[0]);
+    return commonRoot;
+  }
+
+  throw new Error(
+    'Can not get effective rootDir, please set compilerOptions.rootDir !',
+  );
+}
+
+const readTsConfig = (
+  {
+    tsConfigPath,
+    typesFolder,
+    compiledTypesFolder,
+    context,
+    additionalFilesToCompile,
+  }: Required<RemoteOptions>,
+  mapComponentsToExpose: Record<string, string>,
+): TsConfigJson => {
   const resolvedTsConfigPath = resolve(context, tsConfigPath);
 
   const readResult = typescript.readConfigFile(
@@ -40,25 +73,53 @@ const readTsConfig = ({
     throw new Error(readResult.error.messageText.toString());
   }
 
+  const rawTsConfigJson: TsConfigJson = readResult.config;
+
   const configContent = typescript.parseJsonConfigFileContent(
-    readResult.config,
+    rawTsConfigJson,
     typescript.sys,
     dirname(resolvedTsConfigPath),
   );
+
+  const rootDir = getEffectiveRootDir(configContent);
+
   const outDir = resolve(
     context,
     configContent.options.outDir || 'dist',
     typesFolder,
     compiledTypesFolder,
   );
 
-  return {
-    ...configContent.options,
+  const defaultCompilerOptions: typescript.CompilerOptions = {
+    rootDir,
     emitDeclarationOnly: true,
     noEmit: false,
     declaration: true,
     outDir,
   };
+
+  rawTsConfigJson.compilerOptions = rawTsConfigJson.compilerOptions || {};
+
+  rawTsConfigJson.compilerOptions = {
+    ...rawTsConfigJson.compilerOptions,
+    ...defaultCompilerOptions,
+  };
+
+  const filesToCompile = [
+    ...Object.values(mapComponentsToExpose),
+    ...additionalFilesToCompile,
+  ];
+
+  rawTsConfigJson.include = [];
+  rawTsConfigJson.files = filesToCompile;
+  rawTsConfigJson.exclude = [];
+  'references' in rawTsConfigJson && delete rawTsConfigJson.references;
+
+  const extendsPath = rawTsConfigJson.extends;
+  if (extendsPath && extendsPath.startsWith('.')) {
+    rawTsConfigJson.extends = resolve(context, extendsPath);
+  }
+  return rawTsConfigJson;
 };
 
 const TS_EXTENSIONS = ['ts', 'tsx', 'vue', 'svelte'];
@@ -115,7 +176,7 @@ export const retrieveRemoteConfig = (options: RemoteOptions) => {
     ...options,
   };
   const mapComponentsToExpose = resolveExposes(remoteOptions);
-  const tsConfig = readTsConfig(remoteOptions);
+  const tsConfig = readTsConfig(remoteOptions, mapComponentsToExpose);
 
   return {
     tsConfig,

packages/dts-plugin/src/core/interfaces/TsConfigJson.ts

@@ -0,0 +1,9 @@
+import ts from 'typescript';
+
+export interface TsConfigJson {
+  extends?: string;
+  compilerOptions?: ts.CompilerOptions;
+  exclude?: string[];
+  include?: string[];
+  files?: string[];
+}