chore: enable TS intellisense in cross library projects for better/co…

…nsistent DX (#26605)

* generate change files

* chore(public-docsite-v9): enable whole monorepo TS path aliases for improved DX

* chore(public-docsite-v9): migrate to solution config and type-check .storybook as well

* chore(react-migration-v8-v9): enable cross project  TS path aliases for improved DX

* chore(react-migration-v0-v9): enable cross project  TS path aliases for improved DX

* feat(scripts-tasks): enable ts processing on projects with path aliases used only for DX

* fix(typings): make transformSource optional in sb addons type extensions

* chore: use tsconfig.base.all.json directly for TS path webpack plugin instead of createPathAliasesConfig()

* feat(scripts-storybook): make createPathAliasesConfigconfigurable and return resulted merge as well

* feat(scripts-generators): update tsconfig.base.all.json after creating new package

* feat(scripts-generators): incorporate base all generation to create-package and validate integrity on CI

* chore: update tsconfig.base.all after rebase

* feat(scripts-tasks): implement type-check alias, update generate-api, refactor getTsPathAliasesConfig

* chore: use new type-check task for cross project TS path aliases + enable type-check for v9 docs

* fix(scripts-tasks): dont invoke api-extractor logic on every just-script call

* scaffold tsconfig-base-all generator

* feat(tools): implement tsconfig-base-all generator

* refactor(ci): use nx workspace generator for tsconfib.base.all.json check

apps/public-docsite-v9/.storybook/fix-title.js

@@ -1,6 +1,11 @@
 const fs = require('fs');
 const path = require('path');
 
+/**
+ *
+ * @param {string} filePath
+ * @param {string} title
+ */
 function fixTitle(filePath, title) {
   const htmlDocumentPath = path.resolve(__dirname, filePath);
   const htmlDocument = fs.readFileSync(htmlDocumentPath, 'utf-8');

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

@@ -1,16 +1,9 @@
-// @ts-check
-
-const {
-  getPackageStoriesGlob,
-  createPathAliasesConfig,
-  registerTsPaths,
-  rules,
-  registerRules,
-} = require('@fluentui/scripts-storybook');
+const path = require('path');
+const { getPackageStoriesGlob, registerTsPaths, rules, registerRules } = require('@fluentui/scripts-storybook');
 
 const rootMain = require('../../../.storybook/main');
 
-const { tsConfigAllPath } = createPathAliasesConfig();
+const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json');
 
 module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,

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

@@ -1,6 +1,8 @@
+import * as rootPreview from '../../../.storybook/preview';
+
 import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories';
 import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories';
-import * as rootPreview from '../../../.storybook/preview';
+
 import './docs-root-v9.css';
 
 /** @type {NonNullable<import('@storybook/react').Story['decorators']>} */

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

@@ -1,4 +1,5 @@
 import { create } from '@storybook/theming';
+
 import logo from '../public/fluentui-logo.svg';
 
 /**

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

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["node", "static-assets", "storybook__addons"]
+  },
+  "include": ["*.js"]
+}

apps/public-docsite-v9/package.json

@@ -12,6 +12,7 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
+    "type-check": "just-scripts type-check",
     "start": "yarn storybook:docs",
     "storybook": "start-storybook --port 3000 --no-manager-cache",
     "storybook:docs": "yarn storybook --docs"

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

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2019",
+    "noEmit": false,
+    "outDir": "lib",
+    "jsx": "react",
+    "sourceMap": true,
+    "types": ["webpack-env"]
+  },
+  "include": ["src"]
+}

apps/public-docsite-v9/tsconfig.json

@@ -1,21 +1,23 @@
 {
+  "extends": "../../tsconfig.base.all.json",
   "compilerOptions": {
-    "target": "es5",
-    "outDir": "lib",
-    "module": "commonjs",
-    "jsx": "react",
-    "declaration": true,
-    "sourceMap": true,
+    "module": "ESNext",
+    "target": "ES2019",
     "noEmit": true,
     "experimentalDecorators": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
-    "moduleResolution": "node",
-    "preserveConstEnums": true,
-    "skipLibCheck": true,
-    "types": ["webpack-env", "@storybook/react"]
+    "types": ["webpack-env"]
   },
-  "include": ["src"]
+  "include": [],
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    }
+  ]
 }

apps/stress-test/webpack/webpack.config.ts

@@ -2,7 +2,7 @@ import * as path from 'path';
 import { fileURLToPath } from 'url';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { registerTsPaths, createPathAliasesConfig, rules } from '@fluentui/scripts-storybook';
+import { registerTsPaths, rules } from '@fluentui/scripts-storybook';
 import { configurePages } from './pageConfig.js';
 import { configureGriffel } from './griffelConfig.js';
 import * as WebpackDevServer from 'webpack-dev-server';
@@ -12,7 +12,7 @@ const enabledReactProfiling = true;
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const { tsConfigAllPath } = createPathAliasesConfig();
+const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json');
 
 type WebpackArgs = {
   mode: 'production' | 'development' | 'none';

azure-pipelines.yml

@@ -31,7 +31,8 @@ jobs:
       - script: |
           yarn nx workspace-lint
           yarn nx run @fluentui/nx-workspace-tools:check-graph
-        displayName: NX workspace lint
+          yarn nx workspace-generator tsconfig-base-all --verify
+        displayName: Workspace lint
 
       - script: |
           # @fluentui/api-docs is used within apps/public-docsite-resources/just.config.ts, thus it needs to be build in advance

change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: enable build-less DX for storybook",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-migration-v0-v9/.storybook/main.js

@@ -1,7 +1,9 @@
-const { registerTsPaths, createPathAliasesConfig } = require('@fluentui/scripts-storybook');
+const path = require('path');
+const { registerTsPaths } = require('@fluentui/scripts-storybook');
+
 const rootMain = require('../../../../.storybook/main');
 
-const { tsConfigAllPath } = createPathAliasesConfig();
+const tsConfigAllPath = path.join(__dirname, '../../../../tsconfig.base.all.json');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,

packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md

@@ -7,11 +7,11 @@
 import { ComponentProps } from '@fluentui/react-components';
 import { GriffelStyle } from '@fluentui/react-components';
 import { ObjectOf } from '@fluentui/react-northstar';
-import { ObjectShorthandValue } from '@fluentui/react-northstar';
+import type { ObjectShorthandValue } from '@fluentui/react-northstar';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-components';
 import { Slot as Slot_2 } from '@fluentui/react-utilities';
-import { SlotRenderFunction } from '@fluentui/react-components';
+import { SlotRenderFunction } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const Flex: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & FlexProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -133,7 +133,7 @@ export type StyledTextSlots = {
 };
 
 // @public (undocumented)
-export const useFlexStyles: () => Record<"fill" | "wrap" | "inline" | "flex" | "column" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;
+export const useFlexStyles: () => Record<"flex" | "fill" | "column" | "wrap" | "inline" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;
 
 // @public (undocumented)
 export const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" | "rows2" | "rows3" | "columns1" | "columns2" | "columns3" | "columnsDefault", string>;

packages/react-components/react-migration-v0-v9/package.json

@@ -19,7 +19,7 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
-    "type-check": "tsc -b tsconfig.json",
+    "type-check": "just-scripts type-check",
     "generate-api": "just-scripts generate-api",
     "storybook": "start-storybook",
     "start": "yarn storybook"

packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx

@@ -5,7 +5,8 @@ import {
   useFieldStyles_unstable,
   useField_unstable,
 } from '@fluentui/react-components';
-import { ObjectShorthandValue } from '@fluentui/react-northstar';
+import type { ObjectShorthandValue } from '@fluentui/react-northstar';
+
 import * as React from 'react';
 
 type WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> | string;

packages/react-components/react-migration-v0-v9/tsconfig.json

@@ -1,6 +1,7 @@
 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.all.json",
   "compilerOptions": {
+    "strict": true,
     "target": "ES2019",
     "noEmit": true,
     "isolatedModules": true,

packages/react-components/react-migration-v8-v9/.storybook/main.js

@@ -1,7 +1,9 @@
-const { registerTsPaths, createPathAliasesConfig, registerRules, rules } = require('@fluentui/scripts-storybook');
+const path = require('path');
+const { registerTsPaths, registerRules, rules } = require('@fluentui/scripts-storybook');
+
 const rootMain = require('../../../../.storybook/main');
 
-const { tsConfigAllPath } = createPathAliasesConfig();
+const tsConfigAllPath = path.join(__dirname, '../../../../tsconfig.base.all.json');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,

packages/react-components/react-migration-v8-v9/package.json

@@ -18,7 +18,7 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
-    "type-check": "tsc -b tsconfig.json",
+    "type-check": "just-scripts type-check",
     "generate-api": "just-scripts generate-api",
     "storybook": "start-storybook",
     "start": "yarn storybook"

packages/react-components/react-migration-v8-v9/tsconfig.json

@@ -1,13 +1,15 @@
 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.all.json",
   "compilerOptions": {
+    "strict": true,
     "target": "ES2019",
     "noEmit": true,
     "isolatedModules": true,
     "importHelpers": true,
     "jsx": "react",
     "noUnusedLocals": true,
-    "preserveConstEnums": true
+    "preserveConstEnums": true,
+    "paths": {}
   },
   "include": [],
   "files": [],

scripts/generators/create-package/index.ts

@@ -1,14 +1,14 @@
-import { NodePlopAPI, AddManyActionConfig } from 'plop';
-import { Actions } from 'node-plop';
+import { spawnSync } from 'child_process';
 import * as path from 'path';
+
+import { PackageJson, findGitRoot } from '@fluentui/scripts-monorepo';
+import { WorkspaceJsonConfiguration } from '@nrwl/devkit';
+import chalk from 'chalk';
 import * as fs from 'fs-extra';
 import * as jju from 'jju';
 import _ from 'lodash';
-import chalk from 'chalk';
-import { spawnSync } from 'child_process';
-import { WorkspaceJsonConfiguration } from '@nrwl/devkit';
-
-import { findGitRoot, PackageJson } from '@fluentui/scripts-monorepo';
+import { Actions } from 'node-plop';
+import { AddManyActionConfig, NodePlopAPI } from 'plop';
 
 const root = findGitRoot();
 
@@ -160,6 +160,17 @@ module.exports = (plop: NodePlopAPI) => {
           if (migrateResult.status !== 0) {
             throw new Error('Something went wrong running the migration. Please check previous logs for details.');
           }
+          const tsConfigAllUpdate = spawnSync('yarn', ['nx', 'workspace-generator', 'tsconfig-base-all'], {
+            cwd: root,
+            stdio: 'inherit',
+            shell: true,
+          });
+          if (tsConfigAllUpdate.status !== 0) {
+            throw new Error(
+              'Something went wrong while updating tsconfig.base.all.json. Please check previous logs for details.',
+            );
+          }
+
           return 'Successfully migrated package';
         },
         () => {

scripts/storybook/src/index.d.ts

@@ -3,7 +3,6 @@ export {
   loadWorkspaceAddon,
   registerTsPaths,
   registerRules,
-  createPathAliasesConfig,
   overrideDefaultBabelLoader,
 } from './utils';
 

scripts/storybook/src/index.js

@@ -1,14 +1,7 @@
 const rules = require('./rules');
-const {
-  createPathAliasesConfig,
-  getPackageStoriesGlob,
-  loadWorkspaceAddon,
-  registerRules,
-  registerTsPaths,
-} = require('./utils');
+const { getPackageStoriesGlob, loadWorkspaceAddon, registerRules, registerTsPaths } = require('./utils');
 
 module.exports = {
-  createPathAliasesConfig,
   getPackageStoriesGlob,
   loadWorkspaceAddon,
   registerRules,

scripts/storybook/src/utils.js

@@ -3,7 +3,7 @@ const path = require('path');
 
 const { fullSourcePlugin: babelPlugin } = require('@fluentui/babel-preset-storybook-full-source');
 const { isConvergedPackage, getAllPackageInfo, getProjectMetadata } = require('@fluentui/scripts-monorepo');
-const { stripIndents, offsetFromRoot, workspaceRoot, readJsonFile, writeJsonFile } = require('@nrwl/devkit');
+const { stripIndents, offsetFromRoot, workspaceRoot } = require('@nrwl/devkit');
 const semver = require('semver');
 const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
 
@@ -354,48 +354,9 @@ function overrideDefaultBabelLoader(options) {
   }
 }
 
-/**
- * Create tsconfig.json with merged "compilerOptions.paths" from v0,v8,v9 tsconfigs.
- *
- * Main purpose of this is to be used for build-less DX in webpack in tandem with {@link registerTsPaths}
- * @returns
- */
-function createPathAliasesConfig() {
-  const { tsConfigAllPath } = createMergedTsConfig();
-  return { tsConfigAllPath };
-}
-
-function createMergedTsConfig() {
-  const rootPath = workspaceRoot;
-  const tsConfigAllPath = path.join(rootPath, 'dist/tsconfig.base.all.json');
-  const baseConfigs = {
-    v0: readJsonFile(path.join(rootPath, 'tsconfig.base.v0.json')),
-    v8: readJsonFile(path.join(rootPath, 'tsconfig.base.v8.json')),
-    v9: readJsonFile(path.join(rootPath, 'tsconfig.base.json')),
-  };
-  const mergedTsConfig = {
-    compilerOptions: {
-      moduleResolution: 'node',
-      forceConsistentCasingInFileNames: true,
-      skipLibCheck: true,
-      baseUrl: workspaceRoot,
-      paths: {
-        ...baseConfigs.v0.compilerOptions.paths,
-        ...baseConfigs.v8.compilerOptions.paths,
-        ...baseConfigs.v9.compilerOptions.paths,
-      },
-    },
-  };
-
-  writeJsonFile(tsConfigAllPath, mergedTsConfig);
-
-  return { tsConfigAllPath, mergedTsConfig };
-}
-
 exports.getPackageStoriesGlob = getPackageStoriesGlob;
 exports.loadWorkspaceAddon = loadWorkspaceAddon;
 exports.registerTsPaths = registerTsPaths;
 exports.registerRules = registerRules;
-exports.createPathAliasesConfig = createPathAliasesConfig;
 exports.overrideDefaultBabelLoader = overrideDefaultBabelLoader;
 exports._createCodesandboxRule = _createCodesandboxRule;