perf: use path aliases and swc for test:perf tasks to improve build speeds

apps/perf-test-react-components/just.config.ts

@@ -5,4 +5,4 @@ import { config } from './config/perf-test';
 preset();
 
 task('run-perf-test', () => getPerfRegressions(config));
-task('perf-test', series('build', 'bundle', 'run-perf-test'));
+task('perf-test', series('clean', 'copy', 'bundle', 'run-perf-test'));

apps/perf-test-react-components/package.json

@@ -4,17 +4,18 @@
   "version": "9.0.0-rc.0",
   "private": true,
   "scripts": {
-    "build": "just-scripts build",
     "bundle": "just-scripts bundle",
     "lint": "just-scripts lint",
     "just": "just-scripts",
     "clean": "just-scripts clean",
-    "code-style": "just-scripts code-style"
+    "code-style": "just-scripts code-style",
+    "type-check": "tsc -p . --noEmit",
+    "test:perf": "just-scripts perf-test"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-tasks": "*",
-    "@fluentui/scripts-webpack": "*"
+    "@fluentui/scripts-storybook": "*"
   },
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",

apps/perf-test-react-components/tsconfig.json

@@ -5,7 +5,6 @@
     "outDir": "lib",
     "module": "commonjs",
     "jsx": "react",
-    "declaration": true,
     "experimentalDecorators": true,
     "preserveConstEnums": true,
     "lib": ["ES2015", "DOM"],

apps/perf-test-react-components/webpack.config.js

@@ -1,18 +1,31 @@
-const { resources } = require('@fluentui/scripts-webpack');
+// @ts-check
+const path = require('path');
+const { rules, registerTsPaths } = require('@fluentui/scripts-storybook');
+
+const tsConfigPath = path.resolve(__dirname, '../../tsconfig.base.json');
 
 // The issue here is making readable Flamegraphs that don't have complicated paths like:
 //  ~Fabric.../../packages/react/lib/components/DetailsList/DetailsRow.base.js.DetailsRowBase.render
 // But rather show paths like:
 //  ~DetailsRowBase.render (22.16%, 168 samples)
 // The only way found to do this so far has been to use a webpack serve config for bundling.
 // TODO: Should root cause why this only works as a serve config.
-module.exports = resources.createServeConfig(
-  {
-    entry: './src/app.tsx',
-    mode: 'production',
-    output: {
-      filename: 'perf-test.js',
-    },
+const config = /** @type {import('webpack').Configuration}*/ ({
+  mode: 'production',
+  target: ['web', 'es5'],
+  entry: './src/app.tsx',
+  output: {
+    filename: 'perf-test.js',
+    libraryTarget: 'umd',
+    path: path.join(__dirname, 'dist'),
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
   },
-  'dist',
-);
+  devtool: 'eval',
+  module: {
+    rules: [rules.cssRule, rules.scssRule, rules.tsRule],
+  },
+});
+
+module.exports = registerTsPaths({ config, configFile: tsConfigPath });

apps/perf-test/just.config.ts

@@ -5,4 +5,4 @@ import { config } from './config/perf-test';
 preset();
 
 task('run-perf-test', () => getPerfRegressions(config));
-task('perf-test', series('build', 'bundle', 'run-perf-test'));
+task('perf-test', series('clean', 'copy', 'bundle', 'run-perf-test'));

apps/perf-test/package.json

@@ -4,17 +4,18 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "just-scripts build",
     "bundle": "just-scripts bundle",
     "lint": "just-scripts lint",
     "just": "just-scripts",
     "clean": "just-scripts clean",
-    "code-style": "just-scripts code-style"
+    "code-style": "just-scripts code-style",
+    "type-check": "tsc -p . --noEmit",
+    "test:perf": "just-scripts perf-test"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-tasks": "*",
-    "@fluentui/scripts-webpack": "*"
+    "@fluentui/scripts-storybook": "*"
   },
   "dependencies": {
     "@fluentui/scripts-perf-test-flamegrill": "*",

apps/perf-test/tsconfig.json

@@ -5,7 +5,6 @@
     "outDir": "lib",
     "module": "commonjs",
     "jsx": "react",
-    "declaration": true,
     "experimentalDecorators": true,
     "preserveConstEnums": true,
     "lib": ["ES2015", "DOM"],

apps/perf-test/webpack.config.js

@@ -1,18 +1,32 @@
-const { resources } = require('@fluentui/scripts-webpack');
+// @ts-check
+const path = require('path');
+
+const { rules, registerTsPaths } = require('@fluentui/scripts-storybook');
+
+const tsConfigPath = path.resolve(__dirname, '../../tsconfig.base.v8.json');
 
 // The issue here is making readable Flamegraphs that don't have complicated paths like:
 //  ~Fabric.../../packages/react/lib/components/DetailsList/DetailsRow.base.js.DetailsRowBase.render
 // But rather show paths like:
 //  ~DetailsRowBase.render (22.16%, 168 samples)
 // The only way found to do this so far has been to use a webpack serve config for bundling.
 // TODO: Should root cause why this only works as a serve config.
-module.exports = resources.createServeConfig(
-  {
-    entry: './src/app.tsx',
-    mode: 'production',
-    output: {
-      filename: 'perf-test.js',
-    },
+const config = /** @type {import('webpack').Configuration}*/ ({
+  mode: 'production',
+  target: ['web', 'es5'],
+  entry: './src/app.tsx',
+  output: {
+    filename: 'perf-test.js',
+    libraryTarget: 'umd',
+    path: path.join(__dirname, 'dist'),
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
   },
-  'dist',
-);
+  devtool: 'eval',
+  module: {
+    rules: [rules.cssRule, rules.scssRule, rules.tsRule],
+  },
+});
+
+module.exports = registerTsPaths({ config, configFile: tsConfigPath });

azure-pipelines.perf-test.yml

@@ -36,7 +36,7 @@ jobs:
         name: PackagesAffected
         displayName: Check if v8, v9 and/or northstar packages were affected
 
-  - job: PerfTestNorthstar
+  - job: PerfTestReactNorthstar
     displayName: Perf test for @fluentui/react-northstar
     dependsOn: CheckIfPackagesAffected
     condition: eq(dependencies.CheckIfPackagesAffected.outputs['PackagesAffected.NorthstarPackageAffected'], true)
@@ -51,20 +51,13 @@ jobs:
         displayName: yarn
 
       - script: |
-          yarn lage build --to @fluentui/perf-test-northstar --to @fluentui/react-conformance --verbose
-        condition: eq(variables.isPR, true)
-        displayName: Build to Perf Test (Northstar)
-
-      - script: |
-          yarn perf:test --base
+          yarn workspace @fluentui/perf-test-northstar perf:test --base
         condition: eq(variables.isPR, false)
-        workingDirectory: packages/fluentui/perf-test-northstar
         displayName: Run Perf Test Base (Northstar)
 
       - script: |
-          yarn perf:test
+          yarn workspace @fluentui/perf-test-northstar perf:test
         condition: eq(variables.isPR, true)
-        workingDirectory: packages/fluentui/perf-test-northstar
         displayName: Run Perf Test (Northstar)
 
       - task: AzureUpload@2
@@ -107,7 +100,7 @@ jobs:
 
       - template: .devops/templates/cleanup.yml
 
-  - job: PerfTestV8
+  - job: PerfTestReact
     displayName: Perf test for @fluentui/react
     dependsOn: CheckIfPackagesAffected
     condition: eq(dependencies.CheckIfPackagesAffected.outputs['PackagesAffected.V8PackageAffected'], true)
@@ -121,14 +114,8 @@ jobs:
         displayName: yarn
 
       - script: |
-          yarn lage build --to perf-test --verbose
+          yarn workspace @fluentui/perf-test test:perf
         condition: eq(variables.isPR, true)
-        displayName: Build to Perf Test
-
-      - script: |
-          yarn just perf-test
-        condition: eq(variables.isPR, true)
-        workingDirectory: apps/perf-test
         displayName: Run Perf Test
 
       - task: AzureUpload@2
@@ -167,14 +154,8 @@ jobs:
         displayName: yarn
 
       - script: |
-          yarn lage build --to perf-test-react-components --verbose
-        condition: eq(variables.isPR, true)
-        displayName: Build to Perf Test
-
-      - script: |
-          yarn just perf-test
+          yarn workspace @fluentui/perf-test-react-components test:perf
         condition: eq(variables.isPR, true)
-        workingDirectory: apps/perf-test-react-components
         displayName: Run Perf Test
 
       - task: AzureUpload@2

packages/fluentui/digest/package.json

@@ -5,9 +5,6 @@
   "main": "lib/digest.js",
   "module": "lib/digest.js",
   "license": "MIT",
-  "bin": {
-    "digest": "./bin/digest.js"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/digest"

packages/fluentui/digest/src/digest.tsx

@@ -12,6 +12,7 @@ export async function digestStories(digestConfig: DigestConfig) {
   console.log('Bundling digest..');
 
   const defaultConfigs = defaultConfig(digestConfig);
+
   const webpackConfigs = [];
 
   // TODO: use a real merge. or move this merge into webpack.config.ts and use webpackMerge there.

packages/fluentui/digest/src/webpack.config.ts

@@ -1,7 +1,31 @@
+import { registerTsPaths, rules } from '@fluentui/scripts-storybook';
 import * as path from 'path';
 
 // TODO: remove just as a dependency. should only be a dev dependency when used.
-import { webpackConfig, webpackMerge, htmlOverlay } from 'just-scripts';
+import { webpackMerge, htmlOverlay, stylesOverlay, fileOverlay, basicWebpackConfig } from 'just-scripts';
+import type { Configuration } from 'webpack';
+
+const tsConfigPath = path.resolve(__dirname, '../../../../tsconfig.base.v0.json');
+
+const webpackConfig = (config: Partial<Configuration>): Configuration => {
+  const mergedConfig = webpackMerge.merge(
+    basicWebpackConfig,
+    stylesOverlay(),
+    {
+      resolve: {
+        extensions: ['.js', '.ts', '.tsx'],
+      },
+      module: { rules: [rules.tsRule] },
+    },
+    fileOverlay(),
+    config,
+  );
+
+  return registerTsPaths({
+    config: mergedConfig,
+    configFile: tsConfigPath,
+  });
+};
 
 const IgnoreNotFoundExportWebpackPlugin = require('ignore-not-found-export-webpack-plugin');
 

packages/fluentui/perf-test-northstar/just.config.ts

@@ -1,4 +1,5 @@
 import path from 'path';
+import { execSync } from 'child_process';
 import { series, task, argv, taskPresets } from 'just-scripts';
 import { config } from './tasks/perf-test.config';
 
@@ -11,6 +12,7 @@ taskPresets.lib();
 // - Existing perf story format diverges from CSF format, requiring special loader.
 function bundleStories() {
   return async function () {
+    buildDependencies();
     // delay require in case digest isn't built yet
     const { digestStories } = require('@fluentui/digest');
     await digestStories({
@@ -20,6 +22,12 @@ function bundleStories() {
   };
 }
 
+function buildDependencies() {
+  const cmd = 'yarn workspace @fluentui/digest build';
+  console.log(`exec: ${cmd}`);
+  execSync(cmd, { stdio: 'inherit' });
+}
+
 // TODO: how should this be integrated with the default 'build' task?
 // TODO: add config and output dir settings like buildStorybookTask
 // TODO: perf-text prefix naming required?
@@ -32,9 +40,8 @@ task('perf-test:run', () => {
   return getPerfRegressions(config, (argv() as { base?: boolean }).base);
 });
 
-// TOOD: is build doing anything meaningful? only if there's source that's not a just script?
 // TODO: if stories/scenarios are added in this package, make sure build catches type errors
-task('perf-test', series('build', 'perf-test:bundle', 'perf-test:run'));
+task('perf-test', series('perf-test:bundle', 'perf-test:run'));
 
 // TODO: Uncomment once stories can be referred to in a dependency.
 // This command will not be reliable until perf stories are in a package that can be set as a dep.

packages/fluentui/perf-test-northstar/package.json

@@ -4,7 +4,7 @@
   "version": "0.66.4",
   "private": true,
   "scripts": {
-    "build": "just-scripts build",
+    "type-check": "tsc -p . --noEmit",
     "bundle": "just-scripts perf-test:bundle",
     "clean": "just-scripts clean",
     "test": "just-scripts test",

packages/fluentui/perf-test-northstar/tasks/fluentPerfRegressions.ts

@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as path from 'path';
-import { workspaceRoot } from 'nx/src/utils/app-root';
+import { workspaceRoot } from '@nrwl/devkit';
 import { perfTestEnv } from '@fluentui/scripts-tasks';
 
 import { config } from './perf-test.config';

scripts/storybook/src/rules.js

@@ -1,5 +1,41 @@
 const { _createCodesandboxRule } = require('./utils');
 
+/**
+ * @type {import("webpack").RuleSetRule}
+ */
+const tsRule = {
+  test: [/\.tsx?$/],
+  use: {
+    loader: 'swc-loader',
+    options: {
+      jsc: {
+        target: 'es2015',
+        parser: {
+          syntax: 'typescript',
+          tsx: true,
+          decorators: true,
+          dynamicImport: true,
+        },
+        transform: {
+          decoratorMetadata: true,
+          legacyDecorator: true,
+        },
+        keepClassNames: true,
+        externalHelpers: true,
+        loose: true,
+      },
+    },
+  },
+};
+
+/**
+ * @type {import("webpack").RuleSetRule}
+ */
+const cssRule = {
+  test: /\.css$/,
+  use: ['style-loader', 'css-loader'],
+};
+
 /**
  * v8 uses SCSS/CSS modules
  * @type {import("webpack").RuleSetRule}
@@ -61,6 +97,8 @@ const griffelRule = {
  */
 const codesandboxRule = _createCodesandboxRule();
 
+exports.tsRule = tsRule;
 exports.scssRule = scssRule;
+exports.cssRule = cssRule;
 exports.griffelRule = griffelRule;
 exports.codesandboxRule = codesandboxRule;