refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries

apps/ts-minbar-test-react-components/src/index.ts

@@ -1,10 +1,16 @@
-import config from '@fluentui/scripts/config';
 import * as path from 'path';
 import {
   addResolutionPathsForProjectPackages,
   packProjectPackages,
 } from '@fluentui/scripts/projects-test/packPackages';
-import { prepareTempDirs, log, shEcho, TempPaths, generateFiles } from '@fluentui/scripts/projects-test/utils';
+import {
+  prepareTempDirs,
+  log,
+  shEcho,
+  TempPaths,
+  workspaceRoot,
+  generateFiles,
+} from '@fluentui/scripts/projects-test/utils';
 
 const tsVersion = '3.9';
 const testName = 'ts-minbar-react-components';
@@ -14,7 +20,7 @@ async function performTest() {
   const logger = log(`test:${testName}`);
 
   try {
-    const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../files'));
+    const scaffoldPathRoot = path.resolve(__dirname, '../files');
 
     tempPaths = prepareTempDirs(`${testName}-`);
     logger(`✔️ Temporary directories created under ${tempPaths.root}`);
@@ -30,14 +36,14 @@ async function performTest() {
     await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
     logger(`✔️ Dependencies were installed`);
 
-    const lernaRoot = config.paths.allPackages();
+    const lernaRoot = workspaceRoot;
     const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react-components']);
     await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
     await shEcho(`yarn add ${packedPackages['@fluentui/react-components']}`, tempPaths.testApp);
     logger(`✔️ Fluent UI packages were added to dependencies`);
 
-    generateFiles(scaffoldPath(), tempPaths.testApp);
+    generateFiles(scaffoldPathRoot, tempPaths.testApp);
     logger(`✔️ Source and configs were copied`);
 
     await shEcho(`npx npm-which yarn`);

apps/ts-minbar-test-react/src/index.ts

@@ -1,10 +1,17 @@
-import config from '@fluentui/scripts/config';
 import * as path from 'path';
+
 import {
   addResolutionPathsForProjectPackages,
   packProjectPackages,
 } from '@fluentui/scripts/projects-test/packPackages';
-import { prepareTempDirs, log, shEcho, TempPaths, generateFiles } from '@fluentui/scripts/projects-test/utils';
+import {
+  prepareTempDirs,
+  log,
+  shEcho,
+  TempPaths,
+  workspaceRoot,
+  generateFiles,
+} from '@fluentui/scripts/projects-test/utils';
 
 const tsVersion = '3.9';
 const testName = 'ts-minbar-react';
@@ -14,7 +21,7 @@ async function performTest() {
   const logger = log(`test:${testName}`);
 
   try {
-    const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../files'));
+    const scaffoldPathRoot = path.resolve(__dirname, '../files');
 
     tempPaths = prepareTempDirs(`${testName}-`);
     logger(`✔️ Temporary directories created under ${tempPaths.root}`);
@@ -31,14 +38,14 @@ async function performTest() {
     await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
     logger(`✔️ Dependencies were installed`);
 
-    const lernaRoot = config.paths.allPackages();
+    const lernaRoot = workspaceRoot;
     const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react']);
     await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
     await shEcho(`yarn add ${packedPackages['@fluentui/react']}`, tempPaths.testApp);
     logger(`✔️ Fluent UI packages were added to dependencies`);
 
-    generateFiles(scaffoldPath(), tempPaths.testApp);
+    generateFiles(scaffoldPathRoot, tempPaths.testApp);
     logger(`✔️ Source and configs were copied`);
 
     await shEcho(`npx npm-which yarn`);

gulpfile.ts

@@ -6,15 +6,13 @@ import { task, parallel } from 'gulp';
 import * as path from 'path';
 import * as tsPaths from 'tsconfig-paths';
 
-import config from './scripts/config';
-
-const { compilerOptions } = require(config.paths.docs('tsconfig.json'));
+const { compilerOptions } = require('./packages/fluentui/docs/tsconfig.json');
 
 // add node_modules/.bin to the path so we can invoke .bin CLIs in tasks
 process.env.PATH = process.env.PATH + path.delimiter + path.resolve(__dirname, 'node_modules', '.bin');
 
 tsPaths.register({
-  baseUrl: config.path_base,
+  baseUrl: __dirname,
   paths: compilerOptions.paths,
 });
 

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

@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
 import * as path from 'path';
-
-import config from '@fluentui/scripts/config';
+import { workspaceRoot } from 'nx/src/utils/app-root';
 
 // TODO: check false positive potential regression reports in fluent ui repo and fix
 
@@ -29,7 +28,7 @@ export function getFluentPerfRegressions() {
 function linkToFlamegraph(value: string, filename: string) {
   const urlForDeployPath = process.env.DEPLOYURL
     ? `${process.env.DEPLOYURL}/perf-test-northstar`
-    : 'file://' + config.paths.packageDist('perf-test');
+    : 'file://' + path.resolve(workspaceRoot, 'packages/fluentui/perf-test/dist');
 
   return `[${value}](${urlForDeployPath}/${path.basename(filename)})`;
 }
@@ -109,7 +108,7 @@ const checkPerfRegressions = (reporter: Reporter) => {
   reporter.markdown('## Perf Analysis (`@fluentui/react-northstar`)');
 
   try {
-    perfCounts = require(config.paths.packageDist('perf-test-northstar', 'perfCounts.json'));
+    perfCounts = require(path.resolve(workspaceRoot, 'packages/perf-test-northstar/dist/perfCounts.json'));
   } catch {
     reporter.warn('No perf measurements available');
     return;

packages/fluentui/projects-test/src/createReactApp.ts

@@ -1,5 +1,3 @@
-import config from '@fluentui/scripts/config';
-import fs from 'fs-extra';
 import path from 'path';
 
 import {
@@ -10,6 +8,8 @@ import {
   shEcho,
   performBrowserTest,
   prepareCreateReactApp,
+  workspaceRoot,
+  generateFiles,
 } from '@fluentui/scripts/projects-test';
 
 /**
@@ -21,32 +21,32 @@ import {
  */
 export async function createReactApp() {
   const logger = log('test:projects:cra-ts');
-  const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/cra'));
+  const scaffoldPathRoot = path.resolve(__dirname, '../assets/cra');
 
   const tempPaths = prepareTempDirs('project-cra-');
   logger(`✔️ Temporary directories created under ${tempPaths.root}`);
 
   logger('STEP 1. Create test React project with TSX scripts..');
 
   await prepareCreateReactApp(tempPaths, 'typescript');
-  const testAppPath = config.paths.withRootAt(tempPaths.testApp);
-  logger(`Test React project is successfully created: ${testAppPath()}`);
+  const testAppPathRoot = tempPaths.testApp;
+  logger(`Test React project is successfully created: ${testAppPathRoot}`);
 
   logger('STEP 2. Add Fluent UI dependency to test project..');
 
-  const packedPackages = await packProjectPackages(logger, config.paths.base(), ['@fluentui/react-northstar']);
-  await addResolutionPathsForProjectPackages(testAppPath());
+  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
+  await addResolutionPathsForProjectPackages(testAppPathRoot);
 
-  await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, testAppPath());
+  await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, testAppPathRoot);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
   logger("STEP 3. Reference Fluent UI components in test project's App.tsx");
-  fs.copyFileSync(scaffoldPath('App.tsx'), testAppPath('src', 'App.tsx'));
+  generateFiles(scaffoldPathRoot, testAppPathRoot);
 
   logger('STEP 4. Build test project..');
-  await shEcho(`yarn build`, testAppPath());
+  await shEcho(`yarn build`, testAppPathRoot);
 
   logger('STEP 5. Load the test app in the browser');
-  await performBrowserTest(testAppPath('build'));
+  await performBrowserTest(path.resolve(testAppPathRoot, 'build'));
   logger(`✔️ Browser test was passed`);
 }

packages/fluentui/projects-test/src/nextjs.ts

@@ -1,5 +1,3 @@
-import config from '@fluentui/scripts/config';
-import fs from 'fs-extra';
 import path from 'path';
 
 import {
@@ -9,12 +7,14 @@ import {
   log,
   shEcho,
   performBrowserTest,
+  workspaceRoot,
+  generateFiles,
 } from '@fluentui/scripts/projects-test';
 
 export async function nextjs() {
   const logger = log('test:projects:nextjs');
 
-  const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/nextjs'));
+  const scaffoldPathRoot = path.resolve(__dirname, '../assets/nextjs');
   const tempPaths = prepareTempDirs('project-nextjs-');
   logger(`✔️ Temporary directories created under ${tempPaths.root}`);
 
@@ -25,15 +25,14 @@ export async function nextjs() {
 
   logger('STEP 2. Add Fluent UI dependency to test project');
 
-  const packedPackages = await packProjectPackages(logger, config.paths.base(), ['@fluentui/react-northstar']);
+  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
   await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tempPaths.testApp);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
   logger('STEP 3. Copy scaffold files to test project');
-  fs.mkdirSync(path.resolve(tempPaths.testApp, 'pages'));
-  fs.copyFileSync(scaffoldPath('index.js'), path.resolve(tempPaths.testApp, 'pages', 'index.js'));
+  generateFiles(scaffoldPathRoot, tempPaths.testApp);
   logger(`✔️ Source and bundler's config were created`);
 
   logger('STEP 4. Build test project');

packages/fluentui/projects-test/src/rollup.ts

@@ -1,5 +1,3 @@
-import config from '@fluentui/scripts/config';
-import fs from 'fs-extra';
 import path from 'path';
 
 import {
@@ -9,12 +7,14 @@ import {
   prepareTempDirs,
   log,
   shEcho,
+  workspaceRoot,
+  generateFiles,
 } from '@fluentui/scripts/projects-test';
 
 export async function rollup() {
   const logger = log('test:projects:rollup');
 
-  const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/rollup'));
+  const scaffoldPathRoot = path.resolve(__dirname, '../assets/rollup');
   const tempPaths = prepareTempDirs('project-rollup-');
   logger(`✔️ Temporary directories created under ${tempPaths.root}`);
 
@@ -36,16 +36,15 @@ export async function rollup() {
 
   logger('STEP 2. Add Fluent UI dependency to test project');
 
-  const packedPackages = await packProjectPackages(logger, config.paths.base(), ['@fluentui/react-northstar']);
+  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
   await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tempPaths.testApp);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
   logger('STEP 3. Copy scaffold files to test project');
-  fs.copyFileSync(scaffoldPath('app.js'), path.resolve(tempPaths.testApp, 'app.js'));
-  fs.copyFileSync(scaffoldPath('rollup.config.js'), path.resolve(tempPaths.testApp, 'rollup.config.js'));
-  fs.copyFileSync(scaffoldPath('index.html'), path.resolve(tempPaths.testApp, 'index.html'));
+  generateFiles(scaffoldPathRoot, tempPaths.testApp);
+
   logger(`✔️ Source and bundler's config were created`);
 
   logger('STEP 4. Build test project');

packages/fluentui/projects-test/src/typings.ts

@@ -1,4 +1,3 @@
-import config from '@fluentui/scripts/config';
 import fs from 'fs-extra';
 import path from 'path';
 
@@ -9,17 +8,20 @@ import {
   log,
   shEcho,
   generateFiles,
+  workspaceRoot,
 } from '@fluentui/scripts/projects-test';
 
 export async function typings() {
   const logger = log('test:projects:typings');
 
-  const scaffoldPath = config.paths.withRootAt(path.resolve(__dirname, '../assets/typings'));
+  const scaffoldPathRoot = path.resolve(__dirname, '../assets/typings');
   const tempPaths = prepareTempDirs('project-typings-');
   logger(`✔️ Temporary directories created under ${tempPaths.root}`);
 
   // Install dependencies, ensuring we specify the same TS version as our projects use
-  const rootPkgJson: { devDependencies: Record<string, string> } = fs.readJSONSync(config.paths.base('package.json'));
+  const rootPkgJson: { devDependencies: Record<string, string> } = fs.readJSONSync(
+    path.resolve(workspaceRoot, 'package.json'),
+  );
   const { typescript: tsVersion } = rootPkgJson.devDependencies;
 
   const dependencies = [
@@ -32,13 +34,13 @@ export async function typings() {
   await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
   logger(`✔️ Dependencies were installed`);
 
-  const packedPackages = await packProjectPackages(logger, config.paths.base(), ['@fluentui/react-northstar']);
+  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
   await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tempPaths.testApp);
   logger(`✔️ Fluent UI packages were added to dependencies`);
 
-  generateFiles(scaffoldPath(), tempPaths.testApp);
+  generateFiles(scaffoldPathRoot, tempPaths.testApp);
   logger(`✔️ Source and configs were copied`);
 
   await shEcho(`which yarn`);

scripts/dangerjs/checkChangelog.ts

@@ -1,17 +1,18 @@
 import type { AddChange } from 'parse-diff';
 import * as fs from 'fs';
+import * as path from 'path';
+import type { DangerDSLType } from 'danger';
 
-import config from '../config';
-import { DangerJS } from './types';
-import { DangerDSLType } from 'danger';
+import { workspaceRoot } from './utils';
+import type { DangerJS } from './types';
 
 const CHANGELOG_FILE = 'packages/fluentui/CHANGELOG.md';
 
 /**
  * This function asserts that added entries into the changelog file are placed in the right section.
  */
 const hasAddedLinesAfterVersionInChangelog = async (danger: DangerDSLType): Promise<boolean> => {
-  const changelogContent = fs.readFileSync(config.paths.base(CHANGELOG_FILE)).toString();
+  const changelogContent = fs.readFileSync(path.resolve(workspaceRoot, CHANGELOG_FILE)).toString();
   const versionLineNumber = changelogContent
     .split('\n')
     .findIndex(line => line.startsWith('<!--') && line.endsWith('-->'));

scripts/dangerjs/checkStorybookVersions.ts

@@ -1,13 +1,13 @@
 import * as fs from 'fs-extra';
 import * as path from 'path';
 
-import config from '../config';
-import { DangerJS } from './types';
-import { PackageJson } from '../monorepo';
+import type { DangerJS } from './types';
+import type { PackageJson } from '../monorepo';
+import { workspaceRoot } from './utils';
 
 const packageJsonFilename = 'package.json';
 const webComponentsPackageJsonFilename = 'packages/web-components/package.json';
-const scriptFilename = path.relative(config.paths.base(), __filename);
+const scriptFilename = path.relative(workspaceRoot, __filename);
 
 /**
  * This check ensures that the `@storybook/html` dep is specified under web-components rather than
@@ -39,8 +39,10 @@ export async function checkStorybookVersions({ danger, fail }: DangerJS) {
   // Read the package.jsons and compare the dep versions.
   // (It would be possible to check the detailed diffs of the file and determine whether specifically
   // the @storybook/react line changed, but just reading and comparing the files is simpler.)
-  const rootPackageJson: PackageJson = fs.readJSONSync(config.paths.base(packageJsonFilename));
-  const webComponentsPackageJson: PackageJson = fs.readJSONSync(config.paths.base(webComponentsPackageJsonFilename));
+  const rootPackageJson: PackageJson = fs.readJSONSync(path.resolve(workspaceRoot, packageJsonFilename));
+  const webComponentsPackageJson: PackageJson = fs.readJSONSync(
+    path.resolve(workspaceRoot, webComponentsPackageJsonFilename),
+  );
 
   const storybookReactVersion = rootPackageJson.devDependencies?.['@storybook/react'];
   const storybookHtmlVersion = webComponentsPackageJson.devDependencies?.['@storybook/html'];