feat(scripts-monorepo): migrate to lerna 7 apis

apps/ts-minbar-test-react-components/package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "type-check": "tsc -p .",
-    "test": "ts-node ./src/index.ts"
+    "test": "ts-node --transpileOnly ./src/index.ts"
   },
   "devDependencies": {
     "@fluentui/scripts-tasks": "*",

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

@@ -4,7 +4,6 @@ import {
   log,
   shEcho,
   TempPaths,
-  workspaceRoot,
   generateFiles,
   addResolutionPathsForProjectPackages,
   packProjectPackages,
@@ -34,8 +33,7 @@ async function performTest() {
     await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
     logger(`✔️ Dependencies were installed`);
 
-    const lernaRoot = workspaceRoot;
-    const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react-components']);
+    const packedPackages = await packProjectPackages(logger, '@fluentui/react-components');
     await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
     await shEcho(`yarn add ${packedPackages['@fluentui/react-components']}`, tempPaths.testApp);

apps/ts-minbar-test-react/package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "type-check": "tsc -p .",
-    "test": "ts-node ./src/index.ts"
+    "test": "ts-node --transpileOnly ./src/index.ts"
   },
   "devDependencies": {
     "@fluentui/scripts-tasks": "*",

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

@@ -7,7 +7,6 @@ import {
   log,
   shEcho,
   TempPaths,
-  workspaceRoot,
   generateFiles,
 } from '@fluentui/scripts-projects-test';
 
@@ -36,8 +35,7 @@ async function performTest() {
     await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
     logger(`✔️ Dependencies were installed`);
 
-    const lernaRoot = workspaceRoot;
-    const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react']);
+    const packedPackages = await packProjectPackages(logger, '@fluentui/react');
     await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
     await shEcho(`yarn add ${packedPackages['@fluentui/react']}`, tempPaths.testApp);

change/@fluentui-cra-template-be360b59-bfe0-4e5e-9fcf-8b5ec9154ac5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: refactor test to use latest APIs",
+  "packageName": "@fluentui/cra-template",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

jest.preset.js

@@ -17,7 +17,7 @@ const baseConfig = {
     '^.+\\.ts$': 'ts-jest',
   },
   testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   testPathIgnorePatterns: ['/node_modules/', '/lib/', '/lib-commonjs/', '/dist/'],
   testEnvironment: 'jsdom',
   moduleNameMapper: { ...tsPathAliases },

nx.json

@@ -20,7 +20,7 @@
   },
   "pluginsConfig": {
     "@nx/js": {
-      "analyzeSourceFiles": true
+      "analyzeSourceFiles": false
     }
   },
   "targetDefaults": {

package.json

@@ -163,8 +163,6 @@
     "@types/jju": "1.4.1",
     "@types/json-schema": "^7.0.8",
     "@types/lerna-alias": "3.0.0",
-    "@types/lerna__package-graph": "5.1.0",
-    "@types/lerna__project": "5.1.0",
     "@types/loader-utils": "2.0.3",
     "@types/lodash": "4.14.182",
     "@types/markdown-table": "2.0.0",
@@ -274,8 +272,6 @@
     "just-scripts": "1.8.2",
     "lage": "1.8.8",
     "lerna": "7.1.3",
-    "@lerna/project": "6.4.1",
-    "@lerna/package-graph": "6.4.1",
     "lerna-alias": "3.0.3-0",
     "license-webpack-plugin": "2.3.10",
     "lint-staged": "10.2.10",

packages/cra-template/package.json

@@ -19,7 +19,6 @@
   ],
   "devDependencies": {
     "@fluentui/react": "*",
-    "@fluentui/scripts-projects-test": "*",
-    "@fluentui/scripts-monorepo": "*"
+    "@fluentui/scripts-projects-test": "*"
   }
 }

packages/cra-template/scripts/test.ts

@@ -1,4 +1,4 @@
-import fs from 'fs-extra';
+import fs from 'fs';
 import path from 'path';
 import semver from 'semver';
 
@@ -12,8 +12,11 @@ import {
   prepareCreateReactApp,
   TempPaths,
 } from '@fluentui/scripts-projects-test';
-import { findGitRoot } from '@fluentui/scripts-monorepo';
 
+//  eslint-disable-next-line @typescript-eslint/no-explicit-any
+function readJson(filePath: string): Record<string, any> {
+  return JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+}
 // This test is sort of like `packages/fluentui/projects-test/src/createReactApp.ts`, but it uses
 // a custom local template rather than making a generic TS project and adding our project as a dep.
 // So they share some logic, but can't be completely merged (and this test shouldn't go under
@@ -24,9 +27,9 @@ import { findGitRoot } from '@fluentui/scripts-monorepo';
  * This will probably only be an issue if there's a major version bump.
  */
 function verifyVersion() {
-  const templateJson = fs.readJSONSync(path.resolve(__dirname, '../template.json'));
+  const templateJson = readJson(path.resolve(__dirname, '../template.json'));
   const templateVersion = templateJson.package.dependencies['@fluentui/react'];
-  const reactPackageJson = fs.readJSONSync(path.resolve(__dirname, '../../react/package.json'));
+  const reactPackageJson = readJson(path.resolve(__dirname, '../../react/package.json'));
   const actualVersion = reactPackageJson.version;
   if (!semver.satisfies(actualVersion, templateVersion)) {
     console.error(
@@ -42,15 +45,16 @@ function verifyVersion() {
  * Instead, pack up the locally-built packages and make a copy of the template which references them.
  */
 async function prepareTemplate(logger: Function, tempPaths: TempPaths) {
-  await packProjectPackages(logger, findGitRoot(), ['@fluentui/react']);
+  await packProjectPackages(logger, '@fluentui/react');
 
   const templatePath = path.join(tempPaths.root, 'cra-template');
 
-  const packageJson = fs.readJSONSync(path.resolve(__dirname, '../package.json'));
+  const packageJson = readJson(path.resolve(__dirname, '../package.json'));
   // Copy only the template files that would be installed from npm
   const filesToCopy = [...packageJson.files, 'package.json'];
+  const rootDir = path.resolve(__dirname, '..');
   for (const file of filesToCopy) {
-    await fs.copy(path.resolve(__dirname, '..', file), path.join(templatePath, file));
+    fs.cpSync(path.resolve(rootDir, file), path.join(templatePath, file), { recursive: true });
   }
 
   await addResolutionPathsForProjectPackages(templatePath, true /*isTemplateJson*/);

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

@@ -8,7 +8,6 @@ import {
   shEcho,
   performBrowserTest,
   prepareCreateReactApp,
-  workspaceRoot,
   generateFiles,
 } from '@fluentui/scripts-projects-test';
 
@@ -34,7 +33,7 @@ export async function createReactApp() {
 
   logger('STEP 2. Add Fluent UI dependency to test project..');
 
-  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
+  const packedPackages = await packProjectPackages(logger, '@fluentui/react-northstar');
   await addResolutionPathsForProjectPackages(testAppPathRoot);
 
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, testAppPathRoot);

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

@@ -7,7 +7,6 @@ import {
   log,
   shEcho,
   performBrowserTest,
-  workspaceRoot,
   generateFiles,
 } from '@fluentui/scripts-projects-test';
 
@@ -25,7 +24,7 @@ export async function nextjs() {
 
   logger('STEP 2. Add Fluent UI dependency to test project');
 
-  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
+  const packedPackages = await packProjectPackages(logger, '@fluentui/react-northstar');
   await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tempPaths.testApp);

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

@@ -7,7 +7,6 @@ import {
   prepareTempDirs,
   log,
   shEcho,
-  workspaceRoot,
   generateFiles,
 } from '@fluentui/scripts-projects-test';
 
@@ -36,7 +35,7 @@ export async function rollup() {
 
   logger('STEP 2. Add Fluent UI dependency to test project');
 
-  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
+  const packedPackages = await packProjectPackages(logger, '@fluentui/react-northstar');
   await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tempPaths.testApp);

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

@@ -34,7 +34,7 @@ export async function typings() {
   await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
   logger(`✔️ Dependencies were installed`);
 
-  const packedPackages = await packProjectPackages(logger, workspaceRoot, ['@fluentui/react-northstar']);
+  const packedPackages = await packProjectPackages(logger, '@fluentui/react-northstar');
   await addResolutionPathsForProjectPackages(tempPaths.testApp);
 
   await shEcho(`yarn add ${packedPackages['@fluentui/react-northstar']}`, tempPaths.testApp);

scripts/generators/copy-notices.js

@@ -1,6 +1,7 @@
-const monorepo = require('@fluentui/scripts-monorepo');
-const path = require('path');
 const fs = require('fs');
+const path = require('path');
+
+const monorepo = require('@fluentui/scripts-monorepo');
 
 /**
  * Copies NOTICE.txt files from `@fluentui/react-components` to all of its internal production dependencies
@@ -18,9 +19,9 @@ async function copyNotices() {
 
   console.log(`NOTICE.txt exists in ${noticeFilePath}`);
 
-  const dependencyNames = await monorepo.getDependencies('@fluentui/react-components', { production: true });
-  const copyLocations = dependencyNames.map(dependencyName =>
-    path.resolve(monorepo.findGitRoot(), 'packages', dependencyName.replace('@fluentui/', ''), 'NOTICE.txt'),
+  const dependencies = (await monorepo.getDependencies('@fluentui/react-components')).dependencies;
+  const copyLocations = dependencies.map(dep =>
+    path.resolve(monorepo.findGitRoot(), 'packages', dep.name.replace('@fluentui/', ''), 'NOTICE.txt'),
   );
 
   console.log(`reading ${noticeFilePath}`);

scripts/monorepo/src/getDependencies.d.ts

@@ -0,0 +1,17 @@
+// Why is this manual type declaration needed?
+// - modules(projects) written in TS not having enabled `checkJS:true` wont infer types from .js files, thus the API will have `any` type.
+// This errors in strict ts check mode.
+
+/// <reference path="../../../typings/lerna/index.d.ts" />
+export declare function getDependencies(packageName: string): Promise<{
+  dependencies: Dependency[];
+  devDependencies: Dependency[];
+  all: Dependency[];
+  projectGraph: import('lerna/utils').ProjectGraphWithPackages;
+}>;
+
+type Dependency = {
+  name: string;
+  isTopLevel: boolean;
+  dependencyType: import('lerna/utils').ProjectGraphWorkspacePackageDependency['dependencyCollection'];
+};

scripts/monorepo/src/getDependencies.js

@@ -1,58 +1,82 @@
-const path = require('path');
+const lernaUtils = require('lerna/utils');
 
-const { Project } = require('@lerna/project');
-
-const { PackageGraph } = require('@lerna/package-graph');
-
-const findGitRoot = require('./findGitRoot');
+/**
+* @typedef {{
+    name: string,
+    isTopLevel: boolean,
+    dependencyType: lernaUtils.ProjectGraphWorkspacePackageDependency['dependencyCollection'],
+  }} Dependency
+ */
 
 /**
  *
- * @param {string[]} rootPackages
- * @param {Map<any,any>} projectGraph
- * @param {string[]} packageList
- * @returns
+ * @param {string} project
+ * @param {lernaUtils.ProjectGraphWithPackages} projectGraph
+ * @param {*} options
+ * @param {Dependency[]} _acc
+ * @param {boolean} _areTopLevelDeps
+ * @returns {Dependency[]}
  */
-function flattenPackageGraph(rootPackages, projectGraph, packageList = []) {
-  rootPackages.forEach(packageName => {
-    packageList.push(packageName);
+function collectDependencies(
+  project,
+  projectGraph,
+  options = {
+    shallow: true,
+    dependenciesOnly: false,
+  },
+  _acc = [],
+  _areTopLevelDeps = true,
+) {
+  if (!projectGraph.localPackageDependencies[project]) {
+    return _acc;
+  }
 
-    flattenPackageGraph([...projectGraph.get(packageName).localDependencies.keys()], projectGraph, packageList);
-  });
+  projectGraph.localPackageDependencies[project].forEach(dependency => {
+    const isDependencyAlreadyCollected = _acc.some(dep => dep.name === dependency.target);
 
-  return packageList.sort().filter((v, i, a) => a.indexOf(v) === i);
-}
+    if (isDependencyAlreadyCollected) {
+      return;
+    }
 
-/**
- * Returns all the dependencies of a given package name
- * @param {string} packageName including `@fluentui/` prefix
- * @param {Object} options
- * @param {boolean} [options.dev] include dev dependencies
- * @param {boolean} [options.production] include production dependencies
- */
-async function getDependencies(packageName, options = { production: true }) {
-  const lernaProject = new Project(path.resolve(findGitRoot(), 'packages'));
-  const projectPackages = await lernaProject.getPackages();
+    if (
+      options.dependenciesOnly &&
+      dependency.dependencyCollection &&
+      dependency.dependencyCollection !== 'dependencies'
+    ) {
+      return;
+    }
 
-  const allDepsGraph = flattenPackageGraph([packageName], new PackageGraph(projectPackages));
-  const productionDepsGraph = flattenPackageGraph([packageName], new PackageGraph(projectPackages, 'dependencies'));
+    _acc.push({
+      name: dependency.target,
+      dependencyType: dependency.dependencyCollection,
+      isTopLevel: _areTopLevelDeps,
+    });
 
-  const devDependencies = allDepsGraph.filter(dep => !productionDepsGraph.includes(dep));
+    if (!options.shallow) {
+      collectDependencies(dependency.target, projectGraph, options, _acc, false);
+    }
+  });
 
-  /**
-   * @type {string[]}
-   */
-  let res = [];
+  return _acc;
+}
 
-  if (options.dev) {
-    res = res.concat(devDependencies);
-  }
+/**
+ * Returns dependencies metadata build from dependency graph for provided package
+ * @param {string} packageName - including `@fluentui/` prefix
+ */
+async function getDependencies(packageName) {
+  const { projectGraph } = await lernaUtils.detectProjects();
 
-  if (options.production) {
-    res = res.concat(productionDepsGraph);
-  }
+  const allDepsGraph = collectDependencies(packageName, projectGraph, { shallow: false, dependenciesOnly: false });
+  const depsGraph = collectDependencies(packageName, projectGraph, { shallow: false, dependenciesOnly: true });
+  const devDepsGraph = allDepsGraph.filter(anyDep => !depsGraph.find(prodDep => prodDep.name === anyDep.name));
 
-  return res;
+  return {
+    dependencies: depsGraph,
+    devDependencies: devDepsGraph,
+    all: allDepsGraph,
+    projectGraph,
+  };
 }
 
-module.exports = getDependencies;
+exports.getDependencies = getDependencies;