From dea94a8242b70bbc94c4c020cbf1df8e962740cd Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Thu, 6 Apr 2023 12:35:19 +0200 Subject: [PATCH] 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 --- packages/fluentui/perf/gulp/perf.ts | 18 +++++++++------- packages/fluentui/perf/gulp/shared.ts | 6 ++++++ packages/fluentui/perf/gulp/webpack.config.ts | 21 +++++-------------- packages/fluentui/perf/package.json | 3 ++- packages/fluentui/perf/src/globals.ts | 9 ++++++++ packages/fluentui/perf/src/index.tsx | 2 +- packages/fluentui/perf/tsconfig.json | 1 + packages/fluentui/perf/types.ts | 6 ------ .../gulp/src/webpack/webpack.config.e2e.ts | 8 ++----- tsconfig.base.v0.json | 1 + 10 files changed, 37 insertions(+), 38 deletions(-) create mode 100644 packages/fluentui/perf/gulp/shared.ts create mode 100644 packages/fluentui/perf/src/globals.ts diff --git a/packages/fluentui/perf/gulp/perf.ts b/packages/fluentui/perf/gulp/perf.ts index 6b4664e98bb9b..f202c43fcfbe7 100644 --- 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(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(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 new file mode 100644 index 0000000000000..ed07710100b9d --- /dev/null +++ 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 index 2a7bdce5ede26..7469e569b24ae 100644 --- a/packages/fluentui/perf/gulp/webpack.config.ts +++ b/packages/fluentui/perf/gulp/webpack.config.ts @@ -1,13 +1,12 @@ 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', @@ -15,11 +14,11 @@ export const webpackConfig: webpack.Configuration = { // 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 index 993d0845a6cca..8a2537feed749 100644 --- 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 new file mode 100644 index 0000000000000..8671f56aea541 --- /dev/null +++ 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; + } +} + +export type { ProfilerMeasureCycle, ProfilerMeasure }; diff --git a/packages/fluentui/perf/src/index.tsx b/packages/fluentui/perf/src/index.tsx index 82c400b4e192b..6cba7b0ba3170 100644 --- 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 index 6f727b649e9da..b6b2b56975a4d 100644 --- 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 index 61f0b60cfacb2..d6f6576d4f993 100644 --- a/packages/fluentui/perf/types.ts +++ b/packages/fluentui/perf/types.ts @@ -1,9 +1,3 @@ -declare global { - interface Window { - runMeasures: (filter?: string) => Promise; - } -} - 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 index cd6dd42555f95..850ec70a551ad 100644 --- 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 index 28a91f73c3369..ad82302a2bfa0 100644 --- 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": {