feat: improve type-checking perf within all apps (microsoft#31426)

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

@@ -9,7 +9,7 @@
     "just": "just-scripts",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "type-check": "tsc -p . --noEmit",
+    "type-check": "just-scripts type-check",
     "test:perf": "just-scripts perf-test"
   },
   "devDependencies": {

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

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2019",
+    "outDir": "lib",
+    "jsx": "react",
+    "lib": ["ES2019", "DOM"],
+    "types": ["webpack-env"]
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

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

@@ -1,14 +1,21 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "target": "ES2019",
-    "outDir": "lib",
     "module": "commonjs",
+    "target": "ES2019",
+    "noEmit": true,
+    "isolatedModules": true,
+    "importHelpers": true,
     "jsx": "react",
-    "experimentalDecorators": true,
+    "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "lib": ["ES2019", "DOM"],
-    "types": ["webpack-env"]
+    "skipLibCheck": true
   },
-  "include": ["src"]
+  "include": [],
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
 }

apps/perf-test/package.json

@@ -9,7 +9,7 @@
     "just": "just-scripts",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "type-check": "tsc -p . --noEmit",
+    "type-check": "just-scripts type-check",
     "test:perf": "just-scripts perf-test"
   },
   "devDependencies": {

apps/perf-test/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES5",
+    "outDir": "lib",
+    "jsx": "react",
+    "lib": ["ES2015", "DOM"],
+    "types": ["webpack-env", "node"]
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

apps/perf-test/tsconfig.json

@@ -2,13 +2,15 @@
   "extends": "../../tsconfig.base.v8.json",
   "compilerOptions": {
     "target": "es5",
-    "outDir": "lib",
     "module": "commonjs",
-    "jsx": "react",
     "experimentalDecorators": true,
-    "preserveConstEnums": true,
-    "lib": ["ES2015", "DOM"],
-    "types": ["webpack-env", "node"]
+    "preserveConstEnums": true
   },
-  "include": ["src"]
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
 }

apps/public-docsite-v9/.storybook/preview.js

@@ -1,5 +1,6 @@
 import * as rootPreview from '../../../.storybook/preview';
 
+// TODO: These custom Docs implementations should be part of custom SB addon/storybook components package
 import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories';
 import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories';
 

apps/public-docsite-v9/.storybook/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
+    "jsx": "react",
     "types": ["node", "static-assets", "storybook__addons"]
   },
   "include": ["*.js"]

apps/public-docsite-v9/tsconfig.json

@@ -7,8 +7,7 @@
     "experimentalDecorators": true,
     "noUnusedLocals": true,
     "strictNullChecks": true,
-    "noImplicitAny": true,
-    "types": ["webpack-env"]
+    "noImplicitAny": true
   },
   "include": [],
   "files": [],

apps/react-18-tests-v8/package.json

@@ -4,7 +4,7 @@
   "version": "8.0.0",
   "private": true,
   "scripts": {
-    "type-check": "tsc -p tsconfig.react-compat-check.json",
+    "type-check": "just-scripts type-check",
     "format": "prettier -w . --ignore-path ../.prettierignore",
     "format:check": "yarn format -c",
     "e2e": "cypress run --component",

apps/react-18-tests-v9/package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "type-check": "tsc -p tsconfig.react-compat-check.json",
+    "type-check": "just-scripts type-check",
     "lint": "eslint --ext .js,.ts,.tsx ./src",
     "test": "jest --passWithNoTests",
     "format": "prettier -w . --ignore-path ../.prettierignore",

apps/recipes-react-components/package.json

@@ -9,7 +9,7 @@
     "format": "prettier . -w --ignore-path ../../.prettierignore",
     "lint": "just-scripts lint",
     "start": "start-storybook",
-    "type-check": "tsc"
+    "type-check": "just-scripts type-check"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

apps/ssr-tests-v9/package.json

@@ -14,7 +14,7 @@
     "lint": "just-scripts lint",
     "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
-    "type-check": "tsc -b tsconfig.json",
+    "type-check": "just-scripts type-check",
     "test-ssr": "test-ssr \"./src/stories/**/*.stories.tsx\""
   },
   "dependencies": {

apps/ssr-tests/package.json

@@ -4,6 +4,7 @@
   "description": "Server-side rendering tests for @fluentui/react.",
   "private": true,
   "scripts": {
+    "type-check": "tsc -p . --noEmit --baseUrl .",
     "build": "just-scripts build",
     "bundle": "just-scripts bundle",
     "test": "just-scripts test",
@@ -13,13 +14,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "*",
-    "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "7.0.2",
-    "@fluentui/public-docsite-resources": "*",
     "mocha": "7.2.0",
+    "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/scripts-tasks": "*",
-    "@fluentui/scripts-webpack": "*"
+    "@fluentui/scripts-webpack": "*",
+    "@fluentui/react": "*",
+    "@fluentui/public-docsite-resources": "*"
   },
   "dependencies": {
     "tslib": "^2.1.0"

apps/ssr-tests/test/test.js

@@ -32,6 +32,12 @@ describe('Fabric components', () => {
     let links = AppDefinition.examplePages[i].links;
     for (let j = 0; j < links.length; j++) {
       let { key, component } = links[j];
+      if (!key) {
+        throw new Error(`Component key (current value "${key}") is missing for ${component}`);
+      }
+      if (!component) {
+        throw new Error(`Component (current value "${component}") is missing for ${key}`);
+      }
 
       testRender(key, component);
     }
@@ -52,14 +58,19 @@ describe('Utilities', () => {
   });
 });
 
+/**
+ *
+ * @param {string} componentName
+ * @param {React.ComponentClass | (() => JSX.Element)} component
+ */
 function testRender(componentName, component) {
   it(`${componentName} can render in a server environment`, done => {
     let elem = React.createElement(component);
 
     try {
       ReactDOMServer.renderToString(elem);
       done();
-    } catch (e) {
+    } catch (/** @type {any} */ e) {
       done(new Error(e));
     }
   });

apps/ssr-tests/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@tsconfig/node14/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "commonjs",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "preserveConstEnums": true,
+    "checkJs": true,
+    "allowJs": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["test/"]
+}

apps/vr-tests-react-components/package.json

@@ -10,7 +10,7 @@
     "lint": "just-scripts lint",
     "start": "start-storybook",
     "test": "just-scripts test",
-    "type-check": "tsc",
+    "type-check": "tsc -p . --noEmit --baseUrl .",
     "vr:build": "yarn build",
     "vr:test": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
   },

apps/vr-tests/package.json

@@ -10,7 +10,7 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "start-storybook -p 3000",
-    "type-check": "tsc",
+    "type-check": "tsc -p . --noEmit --baseUrl .",
     "vr:build": "yarn build",
     "vr:test": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
   },

packages/fluentui/perf/package.json

@@ -24,6 +24,6 @@
     "perf:test:debug": "cross-env PERF=true gulp perf:debug --debug",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "lint:fix": "yarn lint --fix",
-    "type-check": "tsc -p ."
+    "type-check": "tsc -p . --noEmit --baseUrl ."
   }
 }

scripts/tasks/src/utils.ts

@@ -30,28 +30,32 @@ export function getTsPathAliasesConfig() {
   const tsConfigFileNames = {
     root: 'tsconfig.json',
     lib: 'tsconfig.lib.json',
+    app: 'tsconfig.app.json',
   };
   const tsConfigFilePaths = {
     root: path.join(cwd, tsConfigFileNames.root),
     lib: path.join(cwd, tsConfigFileNames.lib),
+    app: path.join(cwd, tsConfigFileNames.app),
   };
   const tsConfigFileContents = {
     root: fs.existsSync(tsConfigFilePaths.root) ? fs.readFileSync(tsConfigFilePaths.root, 'utf-8') : null,
     lib: fs.existsSync(tsConfigFilePaths.lib) ? fs.readFileSync(tsConfigFilePaths.lib, 'utf-8') : null,
+    app: fs.existsSync(tsConfigFilePaths.app) ? fs.readFileSync(tsConfigFilePaths.app, 'utf-8') : null,
   };
   const tsConfigs = {
     root: tsConfigFileContents.root
       ? (parseJson(tsConfigFileContents.root, { expectComments: true }) as TsConfig)
       : null,
     lib: tsConfigFileContents.lib ? (parseJson(tsConfigFileContents.lib, { expectComments: true }) as TsConfig) : null,
+    app: tsConfigFileContents.app ? (parseJson(tsConfigFileContents.app, { expectComments: true }) as TsConfig) : null,
   };
   const packageJson: PackageJson = JSON.parse(fs.readFileSync(path.join(cwd, './package.json'), 'utf-8'));
 
   const isUsingTsSolutionConfigs =
     tsConfigs.root &&
     tsConfigs.root.references &&
     tsConfigs.root.references.length > 0 &&
-    Boolean(tsConfigFileContents.lib);
+    (Boolean(tsConfigFileContents.lib) || Boolean(tsConfigFileContents.app));
 
   return {
     tsConfigFileNames,