chore: split GitHub Actions workflows into jobs; run tests on multipl…

…e Node.js versions (#2565)

* chore: split GitHub Actions workflows into jobs; run tests on multiple Node.js versions

* chore: install required packages

* chore: cache Yarn packages

* chore: update canvas package and remove packages required for node-gyp

* chore: use different cache strategy

* chore: disable Husky on CI

.github/workflows/main.yml

@@ -1,9 +1,5 @@
 name: CI
 
-env:
-  FORCE_COLOR: 2
-  NODE: 18
-
 on:
   pull_request:
     branches:
@@ -13,17 +9,69 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  FORCE_COLOR: 2
+  HUSKY: 0
+  NODE: 20
+
 jobs:
-  check:
+  size:
+    name: Check size
     runs-on: ubuntu-latest
+
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Cache Yarn cache
+        uses: actions/cache@v4
+        env:
+          cache-name: yarn-cache
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ env.cache-name }}-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE }}
+
       - name: Install dependencies and build
-        run: yarn install
+        run: yarn --frozen-lockfile
+
       - name: Check size
         run: yarn --cwd packages/renderer run size
+
+  test:
+    name: Run tests (Node.js ${{ matrix.node_version }})
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node_version: [18, 20]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Cache Yarn cache
+        uses: actions/cache@v4
+        env:
+          cache-name: yarn-cache
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ env.cache-name }}-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node_version }}
+
+      - name: Install dependencies and build
+        run: yarn --frozen-lockfile
+
       - name: Run tests
         run: yarn test

.github/workflows/release.yml

@@ -1,9 +1,5 @@
 name: Release
 
-env:
-  FORCE_COLOR: 2
-  NODE: 18
-
 on:
   push:
     branches:
@@ -13,38 +9,83 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  FORCE_COLOR: 2
+  HUSKY: 0
+  NODE: 20
+
 jobs:
+  test:
+    name: Run tests (Node.js ${{ matrix.node_version }})
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node_version: [18, 20]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Cache Yarn cache
+        uses: actions/cache@v4
+        env:
+          cache-name: yarn-cache
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ env.cache-name }}-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node_version }}
+
+      - name: Install dependencies and build
+        run: yarn --frozen-lockfile
+
+      - name: Run tests
+        run: yarn test
+
   release:
-    # prevents this action from running on forks
+    # Prevents this action from running on forks
     if: github.repository_owner == 'diegomura'
-    name: Release
+    name: Create Release PR or Publish to npm
+    needs: [test]
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+      - name: Cache Yarn cache
+        uses: actions/cache@v4
+        env:
+          cache-name: yarn-cache
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ env.cache-name }}-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE }}
 
       - name: Install dependencies and build
-        run: yarn install
-
-      - name: Run tests
-        run: yarn test
+        run: yarn --frozen-lockfile
 
-      - name: Create Release Pull Request or Publish to npm
+      - name: Create Release PR or Publish to npm
         uses: changesets/action@v1
         with:
-          # this expects you to have a script called release which does a build for your packages and calls changeset publish
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
           publish: yarn release
           version: yarn version-packages
-          commit: "chore: release packages"
-          title: "chore: release packages"
+          commit: 'chore: release packages'
+          title: 'chore: release packages'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package.json

@@ -44,7 +44,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "babel-eslint": "^10.0.1",
     "babel-plugin-add-module-exports": "^1.0.0",
-    "canvas": "^2.11.0",
+    "canvas": "^2.11.2",
     "chalk": "^2.4.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",

yarn.lock

@@ -3186,10 +3186,10 @@ caniuse-lite@^1.0.30001565:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz#893be772cf8ee6056d6c1e2d07df365b9ec0a5c4"
   integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
 
-canvas@^2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.11.0.tgz#7f0c3e9ae94cf469269b5d3a7963a7f3a9936434"
-  integrity sha512-bdTjFexjKJEwtIo0oRx8eD4G2yWoUOXP9lj279jmQ2zMnTQhT8C3512OKz3s+ZOaQlLbE7TuVvRDYDB3Llyy5g==
+canvas@^2.11.0, canvas@^2.11.2:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.11.2.tgz#553d87b1e0228c7ac0fc72887c3adbac4abbd860"
+  integrity sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==
   dependencies:
     "@mapbox/node-pre-gyp" "^1.0.0"
     nan "^2.17.0"