build(ci): parallelize builds across browsers & caching (#1472)

Author: nperez0111

.github/workflows/build.yml

@@ -12,26 +12,29 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 100
+
+      - uses: nrwl/nx-set-shas@v3
 
       - uses: actions/setup-node@v4
         with:
           node-version: "20.x"
+          cache: "npm"
+          cache-dependency-path: "**/package-lock.json"
 
-      - name: Cache node modules
+      - name: Cache NX
         uses: actions/cache@v4
-        env:
-          cache-name: cache-node-modules
         with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          path: node_modules/.cache/nx/
+          key: nx-${{ env.NX_BRANCH }}-${{ env.NX_RUN_GROUP }}-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
+            nx-${{ env.NX_BRANCH }}-${{ env.NX_RUN_GROUP }}-
+            nx-${{ env.NX_BRANCH }}-
+            nx-
 
       - name: Install Dependencies
-        run: npm install
+        run: npm ci --prefer-offline --no-audit
 
       - name: Bootstrap packages
         run: npm run bootstrap
@@ -50,19 +53,43 @@ jobs:
         with:
           webpackStatsFile: ./playground/dist/webpack-stats.json
           artifactName: relative-ci-artifacts-editor
+
   playwright:
-    name: "Playwright Tests"
+    name: "Playwright Tests - ${{ matrix.browser }}"
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.49.1-noble
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, firefox, webkit]
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 100
+
+      - uses: nrwl/nx-set-shas@v3
+
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: "20.x"
+          cache: "npm"
+          cache-dependency-path: "**/package-lock.json"
+
+      - name: Cache NX
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.cache/nx/
+          key: nx-${{ env.NX_BRANCH }}-${{ env.NX_RUN_GROUP }}-${{ github.sha }}
+          restore-keys: |
+            nx-${{ env.NX_BRANCH }}-${{ env.NX_RUN_GROUP }}-
+            nx-${{ env.NX_BRANCH }}-
+            nx-
+
       - run: apt-get update && apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
+
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --prefer-offline --no-audit
 
       - name: Build packages
         run: npm run build
@@ -71,11 +98,11 @@ jobs:
         run: |
           npm run start:built > /dev/null & 
           npx wait-on http://localhost:3000
-          cd tests && HOME=/root npx playwright test
+          cd tests && HOME=/root npx playwright test --project ${{ matrix.browser }}
 
       - uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: playwright-report
+          name: playwright-report-${{ matrix.browser }}
           path: tests/playwright-report/
           retention-days: 30

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "useNx": false,
   "useWorkspaces": true,
-  "version": "0.24.2"
+  "version": "0.24.2",
+  "useNx": true
 }

nx.json

@@ -0,0 +1,25 @@
+{
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": ["build", "test", "lint"]
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/dist"]
+    },
+    "test": {
+      "cache": true,
+      "dependsOn": ["^test"]
+    },
+    "lint": {
+      "cache": true,
+      "dependsOn": ["^lint"]
+    }
+  }
+}

package.json

@@ -23,7 +23,8 @@
     "start": "lerna run --stream --scope @blocknote/example-editor dev",
     "gen": "lerna run --stream --scope @blocknote/dev-scripts gen",
     "start:built": "npx serve playground/dist -c ../serve.json",
-    "build": "npm run clean && npm run gen && npm run clean && lerna run --stream build --concurrency 1",
+    "build:clean": "npm run clean && npm run gen && npm run clean && lerna run --stream build",
+    "build": "lerna run --stream build",
     "build:site": "lerna run --stream docs:build --concurrency 1",
     "lint": "lerna run --stream lint",
     "bootstrap": "lerna bootstrap --ci -- --force && patch-package",