chore: test against multiple versions of React

.github/workflows/main.yml

@@ -12,7 +12,7 @@ concurrency:
 env:
   FORCE_COLOR: 2
   HUSKY: 0
-  NODE: 20
+  NODE_VERSION: 20
 
 jobs:
   size:
@@ -36,7 +36,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE }}
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install dependencies and build
         run: yarn --frozen-lockfile
@@ -45,11 +45,12 @@ jobs:
         run: yarn --cwd packages/renderer run size
 
   test:
-    name: Run tests (Node.js ${{ matrix.node_version }})
+    name: Run tests (Node.js ${{ matrix.node_version }}; React ${{ matrix.react_version }})
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node_version: [18, 20]
+        react_version: [16, 17, 18]
 
     steps:
       - name: Checkout
@@ -74,4 +75,4 @@ jobs:
         run: yarn --frozen-lockfile
 
       - name: Run tests
-        run: yarn test
+        run: REACT_VERSION=${{ matrix.react_version }} yarn test

.github/workflows/release.yml

@@ -12,15 +12,16 @@ concurrency:
 env:
   FORCE_COLOR: 2
   HUSKY: 0
-  NODE: 20
+  NODE_VERSION: 20
 
 jobs:
   test:
-    name: Run tests (Node.js ${{ matrix.node_version }})
+    name: Run tests (Node.js ${{ matrix.node_version }}; React ${{ matrix.react_version }})
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node_version: [18, 20]
+        react_version: [16, 17, 18]
 
     steps:
       - name: Checkout
@@ -45,7 +46,7 @@ jobs:
         run: yarn --frozen-lockfile
 
       - name: Run tests
-        run: yarn test
+        run: REACT_VERSION=${{ matrix.react_version }} yarn test
 
   release:
     # Prevents this action from running on forks
@@ -73,7 +74,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE }}
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install dependencies and build
         run: yarn --frozen-lockfile

package.json

@@ -62,7 +62,11 @@
     "pdfjs-dist": "3.2.146",
     "prettier": "^1.16.4",
     "react": "^18.2.0",
+    "react-16": "npm:react@^16.8.0",
+    "react-17": "npm:react@^17.0.0",
     "react-dom": "^18.2.0",
+    "react-dom-16": "npm:react-dom@^16.8.0",
+    "react-dom-17": "npm:react-dom@^17.0.0",
     "rimraf": "^2.6.3",
     "rollup": "^2.60.1",
     "rollup-plugin-copy": "^3.5.0",

packages/examples/package.json

@@ -17,7 +17,7 @@
     "vite": "^5.0.11"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }
 }

packages/renderer/package.json

@@ -46,7 +46,7 @@
     "scheduler": "^0.17.0"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "lint-staged": {
     "*.js": [

packages/renderer/vitest.browser.config.js

@@ -4,11 +4,28 @@ import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
+  plugins: [react()],
   resolve: {
+    alias:
+      process.env.REACT_VERSION && process.env.REACT_VERSION !== '18'
+        ? [
+            {
+              find: 'react/jsx-dev-runtime',
+              replacement: `react-${process.env.REACT_VERSION}/jsx-dev-runtime`,
+            },
+            {
+              find: 'react',
+              replacement: `react-${process.env.REACT_VERSION}`,
+            },
+            {
+              find: 'react-dom',
+              replacement: `react-dom-${process.env.REACT_VERSION}`,
+            },
+          ]
+        : undefined,
     conditions: ['browser'],
     mainFields: ['browser'],
   },
-  plugins: [react()],
   test: {
     environment: './tests/environment/jsdom.js',
     setupFiles: ['vitest.setup.js'],

packages/renderer/vitest.config.js

@@ -5,6 +5,25 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias:
+      process.env.REACT_VERSION && process.env.REACT_VERSION !== '18'
+        ? [
+            {
+              find: 'react/jsx-dev-runtime',
+              replacement: `react-${process.env.REACT_VERSION}/jsx-dev-runtime`,
+            },
+            {
+              find: 'react',
+              replacement: `react-${process.env.REACT_VERSION}`,
+            },
+            {
+              find: 'react-dom',
+              replacement: `react-dom-${process.env.REACT_VERSION}`,
+            },
+          ]
+        : undefined,
+  },
   test: {
     // Necessary to avoid "Module did not self-register" error with canvas.node
     pool: 'forks',

yarn.lock

@@ -7799,6 +7799,42 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+"react-16@npm:react@^16.8.0":
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+"react-17@npm:react@^17.0.0":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+"react-dom-16@npm:react-dom@^16.8.0":
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+"react-dom-17@npm:react-dom@^17.0.0":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -8286,6 +8322,22 @@ scheduler@^0.17.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"