chore: create new tsconfig.base with path aliases (#16976)

* chore: create new tsconfig base with path aliases
* chore(scripts): make current tsc just task to work with ts aliases
* chore(react-menu): switch to TS path aliases config

change/@fluentui-react-menu-e77af540-58cf-4f8a-a2b3-3174bbaa408f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(react-menu): switch to TS path aliases config",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-menu/tsconfig.json

@@ -1,23 +1,16 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": ".",
+    "target": "ES5",
+    "lib": ["ES5", "dom"],
     "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["es5", "dom"],
-    "skipLibCheck": true,
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["jest", "webpack-env", "custom-global"]
+    "types": ["jest", "custom-global"]
   },
   "include": ["src"]
 }

scripts/tasks/ts.ts

@@ -1,48 +1,97 @@
+import fs from 'fs';
 import * as path from 'path';
-import { tscTask, argv } from 'just-scripts';
+import { tscTask, argv, TscTaskOptions, resolveCwd, logger } from 'just-scripts';
+import { Arguments } from 'yargs';
+import jju from 'jju';
+
+interface JustArgs extends Arguments {
+  production?: boolean;
+}
+
+interface TsConfig {
+  extends?: string;
+  compilerOptions: import('typescript').CompilerOptions;
+  include?: string[];
+  exclude?: string[];
+}
 
 const libPath = path.resolve(process.cwd(), 'lib');
 const srcPath = path.resolve(process.cwd(), 'src');
 // Temporary hack: only use tsbuildinfo file for things under packages/fluentui
 const useTsBuildInfo =
   /[\\/]packages[\\/]fluentui[\\/]/.test(process.cwd()) && path.basename(process.cwd()) !== 'perf-test';
 
-function getExtraTscParams(args) {
+/**
+ *
+ * Explicitly set `baseUrl` to current package root for packages (converged packages) that use TS path aliases.
+ * > - This is a temporary workaround for current way of building packages.
+ * > - Without setting baseUrl we would get all aliased packages build within outDir
+ */
+function backportTsAliasedPackages(options: TscTaskOptions) {
+  const tsConfigFilePath = resolveCwd('./tsconfig.json');
+  const tsConfig: TsConfig = jju.parse(fs.readFileSync(tsConfigFilePath, 'utf-8'));
+
+  const normalizedOptions = { ...options };
+
+  if (tsConfig.extends) {
+    logger.info(`package is using TS path aliases. Overriding baseUrl to package root.`);
+    normalizedOptions.baseUrl = '.';
+  }
+
+  return normalizedOptions;
+}
+
+function getExtraTscParams(args: JustArgs) {
   return {
-    pretty: true,
     target: 'es5',
     // sourceMap must be true for inlineSources and sourceRoot to work
     ...(args.production && { inlineSources: true, sourceRoot: path.relative(libPath, srcPath), sourceMap: true }),
   };
 }
 
+function getJustArgv(): JustArgs {
+  return argv();
+}
+
 export const ts = {
   commonjs: () => {
-    const extraOptions = getExtraTscParams(argv());
-    return tscTask({
+    const extraOptions = getExtraTscParams(getJustArgv());
+    const options = backportTsAliasedPackages({
       ...extraOptions,
       outDir: 'lib-commonjs',
       module: 'commonjs',
       ...(useTsBuildInfo && { tsBuildInfoFile: '.commonjs.tsbuildinfo' }),
     });
+
+    return tscTask(options);
   },
   esm: () => {
-    const extraOptions = getExtraTscParams(argv());
+    const extraOptions = getExtraTscParams(getJustArgv());
+    const options = backportTsAliasedPackages({
+      ...extraOptions,
+      outDir: 'lib',
+      module: 'esnext',
+    });
+
     // Use default tsbuildinfo for this variant
-    return tscTask({ ...extraOptions, outDir: 'lib', module: 'esnext' });
+    return tscTask(options);
   },
   amd: () => {
-    const extraOptions = getExtraTscParams(argv());
-    return tscTask({
+    const extraOptions = getExtraTscParams(getJustArgv());
+    const options = backportTsAliasedPackages({
       ...extraOptions,
       outDir: 'lib-amd',
       module: 'amd',
       ...(useTsBuildInfo && { tsBuildInfoFile: '.amd.tsbuildinfo' }),
     });
+
+    return tscTask(options);
   },
   commonjsOnly: () => {
-    const extraOptions = getExtraTscParams(argv());
+    const extraOptions = getExtraTscParams(getJustArgv());
     // Use default tsbuildinfo for this variant (since it's the only variant)
-    return tscTask({ ...extraOptions, outDir: 'lib', module: 'commonjs' });
+    const options = backportTsAliasedPackages({ ...extraOptions, outDir: 'lib', module: 'commonjs' });
+
+    return tscTask(options);
   },
 };

tsconfig.base.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["ES2015", "dom"],
+    "sourceMap": true,
+    "strict": true,
+    "strictFunctionTypes": false,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "typeRoots": ["node_modules/@types", "./typings"],
+    "baseUrl": ".",
+    "paths": {
+      "@fluentui/set-version": ["packages/set-version/src/index.ts"],
+      "@fluentui/react-conformance": ["packages/react-conformance/src/index.ts"],
+      "@fluentui/react-utilities": ["packages/react-utilities/src/index.ts"],
+      "@fluentui/react-make-styles": ["packages/react-make-styles/src/index.ts"],
+      "@fluentui/keyboard-key": ["packages/keyboard-key/src/index.ts"],
+      "@fluentui/react-menu": ["packages/react-menu/src/index.ts"]
+    }
+  },
+  "exclude": ["node_modules"]
+}