React 19

.changeset/sharp-fishes-confess.md

@@ -0,0 +1,5 @@
+---
+"@react-pdf/renderer": major
+---
+
+Drop support for Internet Explorer and other "dead" browsers

.changeset/slimy-suns-add.md

@@ -0,0 +1,5 @@
+---
+"@react-pdf/renderer": major
+---
+
+Add support for and require React 19

.github/workflows/main.yml

@@ -80,7 +80,7 @@ jobs:
       matrix:
         # We aim to test all maintained LTS versions of Node.js as well as the latest stable version
         node_version: [18, 20, 21]
-        react_version: [16, 17, 18]
+        react_version: [19]
 
     steps:
       - name: Checkout
@@ -108,7 +108,7 @@ jobs:
         run: REACT_VERSION=${{ matrix.react_version }} yarn test
 
   e2e-node:
-    name: Run E2E tests (Node.js ${{ matrix.node_version }}; ${{ matrix.cjs_or_esm == 'cjs' ? 'CJS' : 'ESM' }})
+    name: "Run E2E tests (Node.js ${{ matrix.node_version }}; ${{ matrix.cjs_or_esm == 'cjs' ? 'CJS' : 'ESM' }})"
     runs-on: ubuntu-latest
     strategy:
       matrix:

babel.config.js

@@ -5,17 +5,12 @@ export default {
       {
         loose: true,
         targets: {
-          node: '14',
-          browsers: 'last 2 versions',
+          node: '18',
+          browsers: ['last 2 versions', 'not dead'],
         },
       },
     ],
     ['@babel/preset-react', { runtime: 'automatic' }],
   ],
-  plugins: [
-    ['@babel/plugin-transform-runtime', { version: '^7.19.6' }],
-    ['@babel/plugin-proposal-decorators', { legacy: true }],
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-    '@babel/plugin-proposal-optional-chaining',
-  ],
+  plugins: [['@babel/plugin-transform-runtime', { version: '^7.19.6' }]],
 };

e2e/node-cjs/package.json

@@ -13,6 +13,6 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^3.4.4",
-    "react": "^18.2.0"
+    "react": "^19.0.0-rc-a26e3f403e-20240611"
   }
 }

e2e/node-esm/package.json

@@ -13,6 +13,6 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^3.4.4",
-    "react": "^18.2.0"
+    "react": "^19.0.0-rc-a26e3f403e-20240611"
   }
 }

package.json

@@ -63,12 +63,8 @@
     "lint-staged": "^10.5.4",
     "pdfjs-dist": "4.2.67",
     "prettier": "^3.2.0",
-    "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",
+    "react": "^19.0.0-rc-a26e3f403e-20240611",
+    "react-dom": "^19.0.0-rc-a26e3f403e-20240611",
     "rimraf": "^2.6.3",
     "rollup": "^4.9.0",
     "rollup-plugin-copy": "^3.5.0",

packages/examples/package.json

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

packages/renderer/package.json

@@ -40,13 +40,11 @@
     "@react-pdf/render": "^3.4.4",
     "@react-pdf/types": "^2.5.0",
     "events": "^3.3.0",
-    "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2",
     "queue": "^6.0.1",
-    "scheduler": "^0.17.0"
+    "scheduler": "^0.25.0-rc-a26e3f403e-20240611"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^19.0.0"
   },
   "lint-staged": {
     "*.js": [
@@ -69,7 +67,7 @@
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "process": "^0.11.10",
-    "react-reconciler": "0.23.0",
+    "react-reconciler": "0.31.0-rc-a26e3f403e-20240611",
     "size-limit": "^11.0.1",
     "util": "^0.12.4"
   }

packages/renderer/rollup.config.js

@@ -2,7 +2,6 @@ import json from '@rollup/plugin-json';
 import babel from '@rollup/plugin-babel';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import alias from '@rollup/plugin-alias';
 import ignore from 'rollup-plugin-ignore';
 import terser from '@rollup/plugin-terser';
 import commonjs from '@rollup/plugin-commonjs';
@@ -39,21 +38,13 @@ const getExternal = ({ browser }) => [
   /@babel\/runtime/,
   'react/jsx-runtime',
   ...(browser ? [] : ['fs', 'path', 'url']),
-  ...Object.keys(pkg.dependencies).filter(
-    (name) => name !== 'react-reconciler',
-  ),
+  ...Object.keys(pkg.dependencies),
   ...Object.keys(pkg.peerDependencies),
 ];
 
 const getPlugins = ({ browser, declarationDests, minify = false }) => [
   json(),
   ...(browser ? [ignore(['fs', 'path', 'url'])] : []),
-  alias({
-    entries: {
-      'react-reconciler':
-        'react-reconciler/cjs/react-reconciler.production.min.js',
-    },
-  }),
   babel(babelConfig()),
   commonjs({
     esmExternals: ['scheduler'],

packages/renderer/src/index.js

@@ -1,7 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
 import FontStore from '@react-pdf/font';
 import renderPDF from '@react-pdf/render';
 import PDFDocument from '@react-pdf/pdfkit';
 import layoutDocument from '@react-pdf/layout';
+import { ConcurrentRoot } from 'react-reconciler/constants';
 
 import createRenderer from './renderer';
 import packageJson from '../package.json';
@@ -23,12 +26,27 @@ const pdf = (initialValue) => {
     for (let i = 0; i < listeners.length; i += 1) listeners[i]();
   };
 
+  const logRecoverableError =
+    typeof reportError === 'function' ? reportError : console.error;
+
   const container = { type: 'ROOT', document: null };
   renderer = renderer || createRenderer({ onChange });
-  const mountNode = renderer.createContainer(container);
+  const mountNode = renderer.createContainer(
+    container,
+    ConcurrentRoot, // tag
+    null, // hydration callbacks
+    false, // isStrictMode
+    null, // concurrentUpdatesByDefaultOverride
+    '', // identifierPrefix
+    logRecoverableError, // onUncaughtError
+    logRecoverableError, // onCaughtError
+    logRecoverableError, // onRecoverableError
+    null, // transitionCallbacks
+  );
 
   const updateContainer = (doc, callback) => {
-    renderer.updateContainer(doc, mountNode, null, callback);
+    renderer.updateContainerSync(doc, mountNode, null, callback);
+    renderer.flushSyncWork();
   };
 
   if (initialValue) updateContainer(initialValue);
@@ -84,11 +102,8 @@ const pdf = (initialValue) => {
 
   // TODO: rename this method to `toStream` in next major release, because it return stream not a buffer
   const toBuffer = async () => {
-    const {
-      layout: _INTERNAL__LAYOUT__DATA_,
-      fileStream,
-    } = await render();
-    callOnRender({_INTERNAL__LAYOUT__DATA_});
+    const { layout: _INTERNAL__LAYOUT__DATA_, fileStream } = await render();
+    callOnRender({ _INTERNAL__LAYOUT__DATA_ });
 
     return fileStream;
   };

packages/renderer/src/renderer.js

@@ -3,17 +3,16 @@
 /* eslint-disable no-param-reassign */
 
 import ReactFiberReconciler from 'react-reconciler';
+import { DefaultEventPriority } from 'react-reconciler/constants';
 import * as scheduler from 'scheduler';
 
 import propsEqual from './utils/propsEqual';
 
 const emptyObject = {};
 
-const appendChild = (parentInstance, child) => {
+const appendChild = (parent, child) => {
   const isParentText =
-    parentInstance.type === 'TEXT' ||
-    parentInstance.type === 'LINK' ||
-    parentInstance.type === 'TSPAN';
+    parent.type === 'TEXT' || parent.type === 'LINK' || parent.type === 'TSPAN';
   const isChildTextInstance = child.type === 'TEXT_INSTANCE';
   const isOrphanTextInstance = isChildTextInstance && !isParentText;
 
@@ -26,7 +25,7 @@ const appendChild = (parentInstance, child) => {
     return;
   }
 
-  parentInstance.children.push(child);
+  parent.children.push(child);
 };
 
 const createRenderer = ({ onChange = () => {} }) => {
@@ -72,10 +71,6 @@ const createRenderer = ({ onChange = () => {} }) => {
       // Noop
     },
 
-    prepareUpdate(element, type, oldProps, newProps) {
-      return !propsEqual(oldProps, newProps);
-    },
-
     resetAfterCommit: onChange,
 
     resetTextContent(element) {
@@ -94,17 +89,17 @@ const createRenderer = ({ onChange = () => {} }) => {
       return false;
     },
 
-    now: Date.now,
+    noTimeout: -1,
 
     useSyncScheduling: true,
 
     appendChild,
 
-    appendChildToContainer(parentInstance, child) {
-      if (parentInstance.type === 'ROOT') {
-        parentInstance.document = child;
+    appendChildToContainer(container, child) {
+      if (container.type === 'ROOT') {
+        container.document = child;
       } else {
-        appendChild(parentInstance, child);
+        appendChild(container, child);
       }
     },
 
@@ -137,11 +132,32 @@ const createRenderer = ({ onChange = () => {} }) => {
       textInstance.value = newText;
     },
 
-    commitUpdate(instance, updatePayload, type, oldProps, newProps) {
+    commitUpdate(instance, type, oldProps, newProps) {
+      if (propsEqual(oldProps, newProps)) return;
       const { style, ...props } = newProps;
       instance.props = props;
       instance.style = style;
     },
+
+    getCurrentUpdatePriority() {
+      return DefaultEventPriority;
+    },
+
+    setCurrentUpdatePriority() {},
+
+    resolveUpdatePriority() {
+      return DefaultEventPriority;
+    },
+
+    shouldAttemptEagerTransition() {
+      return false;
+    },
+
+    requestPostPaintCallback() {},
+
+    maySuspendCommit() {
+      return false;
+    },
   });
 };