chore(fluentui/e2e): speedup ts processing and make it work with no-b…

…uild DX
microsoft · Mar 16, 2023 · f2a6ec7 · f2a6ec7
1 parent 145b39f
commit f2a6ec7
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 18 deletions.
diff --git a/packages/fluentui/e2e/tsconfig.app.json b/packages/fluentui/e2e/tsconfig.app.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.common.json",
+  "compilerOptions": {
+    "types": ["node", "webpack-env"]
+  },
+  "include": ["server/", "tests/**-example.tsx"]
+}
diff --git a/packages/fluentui/e2e/tsconfig.common.json b/packages/fluentui/e2e/tsconfig.common.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.base.v0.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "module": "esnext",
+    "skipLibCheck": true,
+    "noEmit": true,
+    "emitDeclarationOnly": false
+  }
+}
diff --git a/packages/fluentui/e2e/tsconfig.json b/packages/fluentui/e2e/tsconfig.json
@@ -1,11 +1,11 @@
 {
-  "extends": "../../../tsconfig.base.v0.json",
+  "extends": "./tsconfig.common.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
+    "allowJs": true,
+    "checkJs": true,
     "isolatedModules": false,
-    "module": "esnext",
-    "types": ["node", "webpack-env", "cypress", "cypress-real-events"],
-    "skipLibCheck": true
+    "types": ["node", "cypress", "cypress-real-events"],
+    "paths": {}
   },
-  "include": ["."]
+  "include": ["./cypress.config.ts", "./cypress", "tests/**.spec.ts"]
 }
diff --git a/scripts/gulp/src/webpack/webpack.config.e2e.ts b/scripts/gulp/src/webpack/webpack.config.e2e.ts
@@ -1,11 +1,19 @@
+import * as path from 'path';
+
+import { getDefaultEnvironmentVars } from '@fluentui/scripts-monorepo';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import webpack from 'webpack';
 
-import { getDefaultEnvironmentVars } from '@fluentui/scripts-monorepo';
-
 import config from '../config';
 
+const tsConfigBasePath = path.resolve(__dirname, '../../../../tsconfig.base.v0.json');
+
+const tsPaths = new TsconfigPathsPlugin({
+  configFile: tsConfigBasePath,
+});
+
 const { paths } = config;
 const webpackConfig: webpack.Configuration = {
   name: 'client',
@@ -25,26 +33,31 @@ const webpackConfig: webpack.Configuration = {
     global: true,
   },
   module: {
-    noParse: [
-      /anchor-js/,
-      /prettier\/parser-typescript/, // prettier issue, should be solved after upgrade prettier to version 2 https://github.com/prettier/prettier/issues/6903
-    ],
+    noParse: [/anchor-js/],
     rules: [
       {
-        test: /\.(js|ts|tsx)$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
+        test: /\.tsx?$/,
+        loader: 'esbuild-loader',
         options: {
-          cacheDirectory: true,
+          loader: 'tsx',
+          target: 'es2019',
         },
       },
     ],
   },
   plugins: [
     new webpack.DefinePlugin(getDefaultEnvironmentVars(true)),
     new ForkTsCheckerWebpackPlugin({
+      async: true,
       typescript: {
-        configFile: paths.e2e('tsconfig.json'),
+        configFile: paths.e2e('tsconfig.app.json'),
+        configOverwrite: {
+          compilerOptions: {
+            // turn off path aliases = extreme TS execution perf penalty
+            baseUrl: '.',
+            paths: {},
+          },
+        },
       },
     }),
     new CopyWebpackPlugin({
@@ -61,7 +74,7 @@ const webpackConfig: webpack.Configuration = {
       path: require.resolve('path-browserify'),
     },
     extensions: ['.ts', '.tsx', '.js', '.json'],
-    alias: config.lernaAliases({ type: 'webpack' }),
+    plugins: [tsPaths],
   },
   performance: {
     hints: false, // to (temporarily) disable "WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit")