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

@@ -83,7 +83,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
@@ -111,7 +111,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:

e2e/node-cjs/package.json

@@ -13,6 +13,6 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.0.0",
-    "react": "^18.2.0"
+    "react": "^19.0.0-rc-603e6108-20241029"
   }
 }

e2e/node-esm/package.json

@@ -13,6 +13,6 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.0.0",
-    "react": "^18.2.0"
+    "react": "^19.0.0-rc-603e6108-20241029"
   }
 }

package.json

@@ -61,12 +61,8 @@
     "lint-staged": "^10.5.4",
     "pdfjs-dist": "3.2.146",
     "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-603e6108-20241029",
+    "react-dom": "^19.0.0-rc-603e6108-20241029",
     "rimraf": "^2.6.3",
     "rollup": "^4.9.0",
     "rollup-plugin-copy": "^3.5.0",

packages/examples/package.json

@@ -20,7 +20,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-603e6108-20241029",
+    "react-dom": "^^19.0.0-rc-603e6108-20241029"
   }
 }

packages/renderer/package.json

@@ -31,13 +31,11 @@
     "@react-pdf/render": "^4.0.0",
     "@react-pdf/types": "^2.7.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-603e6108-20241029"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^19.0.0"
   },
   "lint-staged": {
     "*.js": [
@@ -60,7 +58,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-603e6108-20241029",
     "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';
@@ -14,6 +13,7 @@ const nodeInput = './src/node/index.js';
 const domInput = './src/dom/index.js';
 
 const babelConfig = () => ({
+  compact: false,
   babelrc: true,
   exclude: 'node_modules/**',
   babelHelpers: 'runtime',
@@ -24,21 +24,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,12 +1,13 @@
+/* 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';
-
-const { version } = packageJson;
+import { version } from '../package.json';
 
 const fontStore = new FontStore();
 
@@ -23,12 +24,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 +100,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;
+    },
   });
 };