chore: remove obsolete configs and decouple type-check from bundling …

…in v0 `perf` app (#26421) * chore(scripts): remove obsolete configs and fix webpack perf tsconfig path * refactor(fluentui/perf): dont pollute nodejs global scope * chore(fluentui/perf): move tsc check to separat task to speed bundling
microsoft · Apr 6, 2023 · dea94a8 · dea94a8
1 parent 776b322
commit dea94a8
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 38 deletions.
diff --git a/packages/fluentui/perf/gulp/perf.ts b/packages/fluentui/perf/gulp/perf.ts
@@ -1,5 +1,6 @@
 import express from 'express';
-import fs from 'fs';
+import * as fs from 'fs';
+import * as path from 'path';
 import type { Server } from 'http';
 import { series, task } from 'gulp';
 import { colors, log } from 'gulp-util';
@@ -20,7 +21,7 @@ import type {
   ReducedMeasures,
 } from '../types';
 
-const { paths } = config;
+import { packageDist } from './shared';
 
 const DEFAULT_RUN_TIMES = 10;
 let server: Server;
@@ -114,6 +115,7 @@ const createMarkdownTable = (perExamplePerfMeasures: PerExamplePerfMeasures) =>
 
 async function runMeasures(
   browser: Browser,
+  url: string,
   filter: string,
   mode: string,
   times: number,
@@ -129,7 +131,7 @@ async function runMeasures(
 
   if (mode === 'new-page') {
     for (let i = 0; i < times; i++) {
-      const page = await browser.openPage(`http://${config.server_host}:${config.perf_port}`);
+      const page = await browser.openPage(url);
 
       const measuresFromStep = await page.executeJavaScript<ProfilerMeasureCycle>(codeToExecute);
       measures.push(measuresFromStep);
@@ -138,7 +140,7 @@ async function runMeasures(
       await page.close();
     }
   } else if (mode === 'same-page') {
-    const page = await browser.openPage(`http://${config.server_host}:${config.perf_port}`);
+    const page = await browser.openPage(url);
 
     // Empty run to skip slow first run
     await page.executeJavaScript<ProfilerMeasureCycle>(codeToExecute);
@@ -158,7 +160,7 @@ async function runMeasures(
   return measures;
 }
 
-task('perf:clean', () => del(paths.perfDist(), { force: true }));
+task('perf:clean', () => del(packageDist, { force: true }));
 
 task('perf:build', cb => {
   webpackPlugin(require('./webpack.config').webpackConfig, cb);
@@ -187,12 +189,12 @@ task('perf:run', async () => {
   let measures: ProfilerMeasureCycle[];
 
   try {
-    measures = await runMeasures(browser, filter, mode, times);
+    measures = await runMeasures(browser, `http://${config.server_host}:${config.perf_port}`, filter, mode, times);
   } finally {
     await browser.close();
   }
 
-  const resultsFile = paths.perfDist('result.json');
+  const resultsFile = path.join(packageDist, 'result.json');
   const perExamplePerfMeasures = sumByExample(measures);
 
   fs.writeFileSync(resultsFile, JSON.stringify(perExamplePerfMeasures, null, 2));
@@ -204,7 +206,7 @@ task('perf:run', async () => {
 
 task('perf:serve', cb => {
   server = express()
-    .use(express.static(paths.perfDist()))
+    .use(express.static(packageDist))
     .listen(config.perf_port, config.server_host, () => {
       log(colors.yellow('Server running at http://%s:%d'), config.server_host, config.perf_port);
       cb();

diff --git a/packages/fluentui/perf/gulp/shared.ts b/packages/fluentui/perf/gulp/shared.ts
@@ -0,0 +1,6 @@
+import * as path from 'path';
+
+export const packageRoot = path.join(__dirname, '..');
+
+export const packageDist = path.join(packageRoot, 'dist');
+export const packageSrc = path.join(packageRoot, 'src');
diff --git a/packages/fluentui/perf/gulp/webpack.config.ts b/packages/fluentui/perf/gulp/webpack.config.ts
@@ -1,25 +1,24 @@
 import * as path from 'path';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import { argv } from 'yargs';
 import webpack from 'webpack';
 
 import { config } from '@fluentui/scripts-gulp';
 import { getDefaultEnvironmentVars } from '@fluentui/scripts-monorepo';
 
-const { paths } = config;
+import { packageDist, packageSrc, packageRoot } from './shared';
 
 export const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
   // eslint-disable-next-line no-extra-boolean-cast
   mode: Boolean(argv.debug) ? 'development' : 'production',
   entry: {
-    app: path.join(__dirname, '..', 'src/index'),
+    app: path.join(packageSrc, 'index'),
   },
   output: {
     filename: `[name].js`,
-    path: path.join(__dirname, '..', 'dist'),
+    path: packageDist,
     pathinfo: true,
     publicPath: config.compiler_public_path,
   },
@@ -42,16 +41,11 @@ export const webpackConfig: webpack.Configuration = {
   },
   plugins: [
     new webpack.DefinePlugin(getDefaultEnvironmentVars(!argv.debug)),
-    new ForkTsCheckerWebpackPlugin({
-      typescript: {
-        configFile: paths.e2e('tsconfig.json'),
-      },
-    }),
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: path.join(__dirname, '..', 'src/index.html'),
-          to: path.join(__dirname, '..', 'dist'),
+          from: path.join(packageRoot, 'src/index.html'),
+          to: packageDist,
         },
       ],
     }),
@@ -63,16 +57,11 @@ export const webpackConfig: webpack.Configuration = {
     extensions: ['.ts', '.tsx', '.js', '.json'],
     alias: {
       ...config.lernaAliases({ type: 'webpack' }),
-      src: paths.packageSrc('react-northstar'),
 
       // We are using React in production mode with tracing.
       // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
       'react-dom$': 'react-dom/profiling',
       'scheduler/tracing': 'scheduler/tracing-profiling',
-
-      // Can be removed once Prettier will be upgraded to v2
-      // https://github.com/prettier/prettier/issues/6903
-      '@microsoft/typescript-etw': false,
     },
   },
   performance: {

diff --git a/packages/fluentui/perf/package.json b/packages/fluentui/perf/package.json
@@ -23,6 +23,7 @@
     "perf:test": "cross-env PERF=true gulp perf --times=100",
     "perf:test:debug": "cross-env PERF=true gulp perf:debug --debug",
     "lint": "eslint --ext .js,.ts,.tsx .",
-    "lint:fix": "yarn lint --fix"
+    "lint:fix": "yarn lint --fix",
+    "type-check": "tsc -p ."
   }
 }
diff --git a/packages/fluentui/perf/src/globals.ts b/packages/fluentui/perf/src/globals.ts
@@ -0,0 +1,9 @@
+import type { ProfilerMeasureCycle, ProfilerMeasure } from '../types';
+
+declare global {
+  interface Window {
+    runMeasures: (filter?: string) => Promise<ProfilerMeasureCycle>;
+  }
+}
+
+export type { ProfilerMeasureCycle, ProfilerMeasure };
diff --git a/packages/fluentui/perf/src/index.tsx b/packages/fluentui/perf/src/index.tsx
@@ -6,7 +6,7 @@ import * as minimatch from 'minimatch';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { ProfilerMeasure, ProfilerMeasureCycle } from '../types';
+import type { ProfilerMeasure, ProfilerMeasureCycle } from './globals';
 
 const mountNode = document.querySelector('#root');
 const performanceExamplesContext = require.context('@fluentui/docs/src/examples/', true, /.perf.tsx$/);

diff --git a/packages/fluentui/perf/tsconfig.json b/packages/fluentui/perf/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../../tsconfig.base.v0.json",
   "compilerOptions": {
+    "noEmit": true,
     "module": "esnext",
     "types": ["node", "webpack-env"]
   },

diff --git a/packages/fluentui/perf/types.ts b/packages/fluentui/perf/types.ts
@@ -1,9 +1,3 @@
-declare global {
-  interface Window {
-    runMeasures: (filter?: string) => Promise<ProfilerMeasureCycle>;
-  }
-}
-
 export type MeasuredValues = 'actualTime' | 'renderComponentTime' | 'componentCount';
 
 export type ProfilerMeasure = { [key in MeasuredValues]: number } & {

diff --git a/scripts/gulp/src/webpack/webpack.config.e2e.ts b/scripts/gulp/src/webpack/webpack.config.e2e.ts
@@ -1,9 +1,8 @@
+import { getDefaultEnvironmentVars } from '@fluentui/scripts-monorepo';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import webpack from 'webpack';
 
-import { getDefaultEnvironmentVars } from '@fluentui/scripts-monorepo';
-
 import config from '../config';
 
 const { paths } = config;
@@ -25,10 +24,7 @@ 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)$/,

diff --git a/tsconfig.base.v0.json b/tsconfig.base.v0.json
@@ -15,6 +15,7 @@
     "strictNullChecks": false,
     "noUnusedLocals": true,
     "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
     "typeRoots": ["node_modules/@types", "./typings"],
     "baseUrl": ".",
     "paths": {