chore: replace lage with nx for task(targets) orchestration (#31949)

.devops/templates/build-test-lint.yml

@@ -18,8 +18,8 @@ steps:
       # @fluentui/api-docs is used within apps/public-docsite-resources/just.config.ts,
       # @fluentui/digest is used within packages/fluentui/perf-test-northstar/just.config.ts, thus it needs to be build in advance
       #
-      # NOTE: we are running this via lage in order to get cache hits later on
-      yarn lage build --to @fluentui/api-docs @fluentui/digest --verbose
+      # NOTE: we are running this via nx in order to get cache hits later on
+      yarn nx run-many -t build -p api-docs digest
       yarn tsc -p ./tsconfig.just-scripts-configs.json
     displayName: Type-check just.config.ts files
 

.devops/templates/deployE2E.yml

@@ -16,16 +16,16 @@ steps:
 
   # this also builds FUI N* docs if appropriate
   - script: |
-      yarn bundle  $(sinceArg)
+      yarn nx affected -t bundle --nxBail $(sinceArg)
     displayName: bundle
 
   - script: |
-      yarn lage build-storybook  --verbose $(sinceArg)
+      yarn nx affected -t build-storybook --nxBail $(sinceArg)
     displayName: build Storybooks
 
   ## This runs regardless of scope, the app will adapt to the scope as well
   - script: |
-      yarn workspace @fluentui/pr-deploy-site generate:site
+      yarn nx run pr-deploy-site:generate:site
     displayName: generate PR Deploy Site
 
   - task: AzureCLI@2
@@ -53,8 +53,9 @@ steps:
       # This MUST have a trailing slash, or the links to PR deploy site assets won't work
       githubTargetLink: $(deployUrl)/
 
+  # TODO: once https://github.com/nrwl/nx/issues/26903 will be fixed we can remove NX_PARALLEL=1 override via env variable
   - script: |
-      yarn e2e $(sinceArg)
+      NX_PARALLEL=1 yarn nx affected -t e2e --nxBail --parallel 1 $(sinceArg)
     displayName: Cypress E2E tests
 
   - template: cleanup.yml

.devops/templates/runpublishvrscreenshot.yml

@@ -4,7 +4,7 @@ parameters:
     default: v8
   - name: vrTestPackageName
     type: string
-    default: '@fluentui/vr-tests'
+    default: vr-tests'
   - name: vrTestPackagePath
     type: string
     default: 'apps/vr-tests'
@@ -33,7 +33,7 @@ steps:
       echo $isPR
       echo "##vso[task.setvariable variable=isPR;]$isPR"
       if [[ $isPR == true ]]; then
-        packageAffected=$(yarn --silent check:affected --package ${{ parameters.vrTestPackageName }})
+        packageAffected=$(yarn --silent check:affected --project ${{ parameters.vrTestPackageName }})
         if [[ $packageAffected == false ]]; then
           echo "In PR pipeline but NOT affecting test package. Skipping test run"
           echo "##vso[task.setvariable variable=vrTestSkip;]yes"
@@ -48,7 +48,7 @@ steps:
     displayName: Check if vrTests should be skipped
 
   - script: |
-      yarn lage test-vr --to ${{ parameters.vrTestPackageName }} --verbose
+      yarn nx run ${{ parameters.vrTestPackageName }}:test-vr --nxBail
     displayName: 'Run VR tests'
     condition: eq(variables['vrTestSkip'], 'no')
 

.devops/templates/variables.yml

@@ -16,6 +16,10 @@ variables:
   # Prevents failures on CI when "caniuse-lite" becomes outdated
   BROWSERSLIST_IGNORE_OLD_DATA: true
 
+  NX_PARALLEL: 8
+  NX_PREFER_TS_NODE: true
+  NX_VERBOSE_LOGGING: true
+
   # Also accessed as process.env.DEPLOYHOST
   deployHost: 'fluentuipr.z22.web.core.windows.net'
 

.github/actions/build-to/action.yml

@@ -1,3 +1,5 @@
+# TODO: Remove or replace with NX cache - we don't use lage(backfill) anymore
+
 name: 'Build workspaces'
 description: 'Runs the build command for specific workspaces.'
 inputs:

.github/policies/botRules.yml

@@ -336,7 +336,6 @@ configuration:
                   files:
                     - package.json
                     - scripts
-                    - rush.json
                     - apps/vr-tests/screener.config.js
                     - apps/vr-tests/screener.local.config.js
                     - apps/pr-deploy-site
@@ -348,7 +347,7 @@ configuration:
                     - packages/codemods
                     - packages/monaco-editor
                     - packages/eslint-plugin
-                    - lage.config.js
+                    - nx.json
                     - tools
                   excludedFiles:
                     - change

.github/workflows/docsite-publish-chromatic.yml

@@ -44,12 +44,9 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build dependencies
-        uses: ./.github/actions/build-to
-        with:
-          workspaces: '@fluentui/public-docsite-v9'
-          backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }}
+        run: yarn nx run public-docsite-v9:build --nxBail
 
       - name: Publish to Chromatic
-        run: yarn workspace @fluentui/public-docsite-v9 chromatic
+        run: yarn nx run public-docsite-v9:chromatic --nxBail
         env:
           CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/docsite-publish-ghpages.yml

@@ -44,13 +44,10 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build dependencies
-        uses: ./.github/actions/build-to
-        with:
-          workspaces: '@fluentui/public-docsite-v9'
-          backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }}
+        run: yarn nx run public-docsite-v9:build --nxBail
 
       - name: Build storybook
-        run: yarn workspace @fluentui/public-docsite-v9 build-storybook
+        run: yarn nx run public-docsite-v9:build-storybook --nxBail
         env:
           STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY: ${{ secrets.STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY }}
 

.storybook/main.js

@@ -80,7 +80,7 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
   webpackFinal: config => {
     registerTsPaths({ config, configFile: tsConfigPath });
 
-    if ((process.env.CI || process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) && config.plugins) {
+    if ((process.env.CI || process.env.TF_BUILD) && config.plugins) {
       // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged)
       config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin');
     }

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

@@ -5,6 +5,7 @@
   "implicitDependencies": [],
   "tags": ["vNext"],
   "targets": {
+    "test-perf": { "dependsOn": ["bundle"] },
     "bundle": { "dependsOn": [] }
   }
 }

apps/perf-test/project.json

@@ -5,8 +5,7 @@
   "implicitDependencies": [],
   "tags": ["v8"],
   "targets": {
-    "bundle": {
-      "dependsOn": []
-    }
+    "test-perf": { "dependsOn": ["bundle"] },
+    "bundle": { "dependsOn": [] }
   }
 }

apps/public-docsite-resources/project.json

@@ -1,7 +1,7 @@
 {
   "name": "public-docsite-resources",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
+  "projectType": "library",
   "implicitDependencies": [],
   "tags": ["v8"]
 }

apps/public-docsite/README.md

@@ -12,10 +12,9 @@ Once your repo is set up, run the following to start a local copy of the website
 
 ```
 yarn
-yarn buildto public-docsite
-cd apps
-cd public-docsite
-yarn start
+yarn nx run public-docsite:build
+
+yarn nx run public-docsite:start
 ```
 
-`yarn start` will open your operating system's default web browser with the website. You can make changes to the code which will automatically build and refresh the page using live-reload.
+`yarn nx run public-docsite:start` will open your operating system's default web browser with the website. You can make changes to the code which will automatically build and refresh the page using live-reload.

apps/react-18-tests-v8/README.md

@@ -31,10 +31,10 @@ For that purpose we use `tsconfig.react-compat-check.json` as target for `type-c
 **Local machine flow:**
 
 ```sh
-lage build --to @fluentui/react-18-tests-v8
-yarn workspace @fluentui/react-18-tests-v8 type-check
+yarn nx run react-18-tests-v8:build
+yarn nx run react-18-tests-v8:type-check
 ```
 
 **CI:**
 
-lage defines `build` targets to be executed prior to `type-check`.
+nx defines `build` targets to be executed prior to `type-check`.

apps/react-18-tests-v9/README.md

@@ -1,6 +1,6 @@
 # @fluentui/react-18-tests-v9
 
-**Tests for React 18 compatability in [Fluent UI React v9](https://react.fluentui.dev)**.
+**Tests for React 18 compatibility in [Fluent UI React v9](https://react.fluentui.dev)**.
 
 ## Usage
 
@@ -31,11 +31,11 @@ For that purpose we use `tsconfig.react-compat-check.json` as target for `type-c
 **Local machine flow:**
 
 ```sh
-lage build --to @fluentui/react-18-tests-v9
+yarn nx run react-18-tests-v9:build
 
-yarn workspace @fluentui/react-18-tests-v9 type-check
+yarn nx run react-18-tests-v9:type-check
 ```
 
 **CI:**
 
-lage defines `build` targets to be executed prior to `type-check`.
+nx defines `build` targets to be executed prior to `type-check`.

apps/ssr-tests/project.json

@@ -5,6 +5,9 @@
   "implicitDependencies": [],
   "tags": ["v8"],
   "targets": {
-    "test-ssr": { "dependsOn": ["bundle", "^bundle"] }
+    "test-ssr": {
+      "dependsOn": ["bundle"]
+    },
+    "bundle": { "dependsOn": ["^build"] }
   }
 }

apps/vr-tests-web-components/.storybook/main.cjs

@@ -75,7 +75,7 @@ module.exports = /** @type {import('../../../.storybook/types').StorybookBaseCon
     );
 
     // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
-    if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
+    if (process.env.TF_BUILD) {
       config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
     }
 

azure-pipelines-pr.yml

@@ -8,7 +8,7 @@ trigger: none
 variables:
   - ${{ if not(startsWith(variables['Build.SourceBranch'], 'refs/heads/')) }}:
       - name: sinceArg
-        value: --since $(targetBranch)
+        value: --base $(targetBranch)
 
   - group: fabric-variables
 

azure-pipelines.bundlesize.yml

@@ -7,7 +7,7 @@ trigger:
 variables:
   - ${{ if not(startsWith(variables['Build.SourceBranch'], 'refs/heads/')) }}:
       - name: sinceArg
-        value: --since $(targetBranch)
+        value: --base $(targetBranch)
 
   - template: .devops/templates/variables.yml
 
@@ -25,7 +25,7 @@ jobs:
         displayName: yarn
 
       - script: |
-          yarn lage bundle-size --verbose $(sinceArg)
+          yarn nx affected -t bundle-size --nxBail $(sinceArg)
         displayName: build packages & create reports
 
       - script: |

azure-pipelines.hotfix.yml

@@ -67,7 +67,7 @@ extends:
                 displayName: 'Manually set package version'
 
               - script: |
-                  yarn buildto @fluentui/react --production
+                  yarn nx run react:build --production
                 displayName: yarn build to FUIR (Create production build)
 
               - script: yarn workspace @fluentui/react bundle --production

azure-pipelines.perf-test.yml

@@ -21,9 +21,9 @@ jobs:
         displayName: yarn
 
       - script: |
-          NorthstarAffected=$(yarn --silent check:affected --package @fluentui/react-northstar)
-          V8Affected=$(yarn --silent check:affected --package @fluentui/react)
-          ReactComponentsAffected=$(yarn --silent check:affected --package @fluentui/react-components)
+          NorthstarAffected=$(yarn --silent check:affected --project react-northstar)
+          V8Affected=$(yarn --silent check:affected --project react)
+          ReactComponentsAffected=$(yarn --silent check:affected --project react-components)
           if [[ $NorthstarAffected == true ]]; then
             echo "##vso[task.setvariable variable=NorthstarPackageAffected;isOutput=true]true"
           fi
@@ -51,12 +51,12 @@ jobs:
         displayName: yarn
 
       - script: |
-          yarn lage test-perf --to perf-test-northstar --base --verbose
+          yarn nx run perf-test-northstar:test-perf --base
         condition: eq(variables.isPR, false)
         displayName: Run Perf Test Base (Northstar)
 
       - script: |
-          yarn lage test-perf --to perf-test-northstar --verbose
+          yarn nx run perf-test-northstar:test-perf
         condition: eq(variables.isPR, true)
         displayName: Run Perf Test (Northstar)
 
@@ -120,7 +120,7 @@ jobs:
         displayName: yarn
 
       - script: |
-          yarn lage test-perf --to perf-test --verbose
+          yarn nx run perf-test:test-perf
         condition: eq(variables.isPR, true)
         displayName: Run Perf Test
 
@@ -166,7 +166,7 @@ jobs:
         displayName: yarn
 
       - script: |
-          yarn lage test-perf --to @fluentui/perf-test-react-components --verbose
+          yarn nx run perf-test-react-components:test-perf
         condition: eq(variables.isPR, true)
         displayName: Run Perf Test
 

azure-pipelines.release-fluentui.yml

@@ -88,7 +88,7 @@ extends:
                 displayName: build,test,lint northstar packages
                 inputs:
                   script: |
-                    yarn nx run-many --targets=build,test,lint,type-check,test-ssr,verify-packaging --projects='packages/fluentui/*' --parallel $(getconf _NPROCESSORS_ONLN) --nxBail --verbose
+                    yarn nx run-many --targets=build,test,lint,type-check,test-ssr,verify-packaging --projects='packages/fluentui/*' --nxBail
 
               - task: CmdLine@2
                 displayName: '[NPM] Publish to NPM'

azure-pipelines.release-vnext-nightly.yml

@@ -82,19 +82,17 @@ extends:
                   yarn change --type prerelease --message "Release nightly v9" --dependent-change-type "prerelease"
                 displayName: 'Bump and commit nightly versions'
 
-              # --only makes it only run tests (otherwise due to the missing --production arg, lage would re-run the build)
-              # https://github.com/microsoft/fluentui/issues/21686
               - script: |
-                  yarn lage test --to @fluentui/react-components
-                displayName: yarn test
+                  yarn nx run react-components:build --nxBai
+                displayName: build
 
               - script: |
-                  yarn lage lint --to @fluentui/react-components
-                displayName: yarn lint
+                  yarn nx run react-components:lint --nxBai
+                displayName: lint
 
               - script: |
-                  yarn lage build --to @fluentui/react-components
-                displayName: yarn build
+                  yarn nx run react-components:test --nxBai
+                displayName: test
 
               - script: |
                   yarn publish:beachball -n $(npmToken) --no-push --tag nightly --config scripts/beachball/src/release-vNext.config.js

azure-pipelines.release-vnext.yml

@@ -69,19 +69,17 @@ extends:
                   filePath: yarn-ci.sh
                 displayName: yarn
 
-              # --only makes it only run tests (otherwise due to the missing --production arg, lage would re-run the build)
-              # https://github.com/microsoft/fluentui/issues/21686
               - script: |
-                  yarn run:published test
-                displayName: yarn test
+                  yarn nx run-many -t build -p tag:vNext --exclude 'tag:tools,apps/**' --nxBail --production
+                displayName: build
 
               - script: |
-                  yarn run:published lint
-                displayName: yarn lint
+                  yarn nx run-many -t test -p tag:vNext --exclude 'tag:tools,apps/**' --nxBail
+                displayName: test
 
               - script: |
-                  yarn run:published build --production
-                displayName: yarn build
+                  yarn nx run-many -t lint -p tag:vNext --exclude 'tag:tools,apps/**' --nxBail
+                displayName: lint
 
               - script: |
                   yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-vNext.config.js --message 'release: applying package updates - react-components'