WIP

e2e/node-cjs/package.json

@@ -13,6 +13,6 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.0.2",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc-66855b96-20241106"
   }
 }

e2e/node-esm/package.json

@@ -13,6 +13,6 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.0.2",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc-66855b96-20241106"
   }
 }

lerna.json

@@ -1,5 +1,5 @@
 {
   "version": "independent",
-  "packages": ["packages/*", "e2e/*"],
+  "packages": ["packages/*", "packages/examples/*", "e2e/*"],
   "npmClient": "yarn"
 }

package.json

@@ -62,12 +62,14 @@
     "lint-staged": "^10.5.4",
     "pdfjs-dist": "3.2.146",
     "prettier": "^3.2.0",
-    "react": "^18.2.0",
+    "react": "19.0.0-rc-66855b96-20241106",
     "react-16": "npm:react@^16.8.0",
     "react-17": "npm:react@^17.0.0",
-    "react-dom": "^18.2.0",
+    "react-18": "npm:react@^18.2.0",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-dom-16": "npm:react-dom@^16.8.0",
     "react-dom-17": "npm:react-dom@^17.0.0",
+    "react-dom-18": "npm:react-dom@^18.2.0",
     "rimraf": "^2.6.3",
     "rollup": "^4.9.0",
     "rollup-plugin-copy": "^3.5.0",

packages/examples/next-14/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },

packages/examples/next-15/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },

packages/examples/vite/package.json

@@ -12,15 +12,15 @@
   "dependencies": {
     "@react-pdf/renderer": "^4.0.2"
   },
+  "peerDependencies": {
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106"
+  },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.12",
     "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"
   }
 }

packages/examples/vite/src/examples/svg/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactPDF, { Document, Page, StyleSheet } from '@react-pdf/renderer';
+import { Document, Page, StyleSheet } from '@react-pdf/renderer';
 
 import Svg0 from './svg';
 import Svg1 from './Svg1';
@@ -8,9 +8,6 @@ import Svg4 from './Svg4';
 import Star from './Star';
 import Heart from './Heart';
 
-console.log(`React version: ${React.version}`);
-console.log(`React-pdf version: ${ReactPDF.version}`);
-
 const styles = StyleSheet.create({
   page: {
     fontSize: 20,

packages/examples/vite/src/index.jsx

@@ -2,7 +2,7 @@ import './index.css';
 
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { PDFViewer } from '@react-pdf/renderer';
+import ReactPDF, { PDFViewer } from '@react-pdf/renderer';
 
 import EXAMPLES from './examples';
 

packages/reconciler/package.json

@@ -24,7 +24,8 @@
   ],
   "devDependencies": {
     "ast-types": "^0.14.2",
-    "react-reconciler": "0.26.0",
+    "react-reconciler-26": "npm:[email protected]",
+    "react-reconciler-31": "npm:[email protected]",
     "recast": "^0.23.9"
   }
 }

packages/reconciler/rollup.config.js

@@ -6,13 +6,30 @@ import terser from '@rollup/plugin-terser';
 
 import trimReconciler from './build/trim-reconciler.js';
 
-export default {
-  input: 'src/index.js',
-  output: { format: 'es', file: 'lib/index.js' },
-  plugins: [
-    resolve({ resolveOnly: ['react-reconciler'] }),
-    commonjs({ esmExternals: (id) => id === 'scheduler' }),
-    trimReconciler(),
-    terser({ compress: { dead_code: true } }),
-  ],
-};
+export default [
+  {
+    input: 'src/index.js',
+    output: { format: 'es', file: 'lib/index.js' },
+    external: ['./reconciler-26', './reconciler-31'],
+  },
+  {
+    input: 'src/reconciler-26.js',
+    output: { format: 'es', file: 'lib/reconciler-26.js' },
+    plugins: [
+      resolve({ resolveOnly: ['react-reconciler-26'] }),
+      commonjs({ esmExternals: (id) => id === 'scheduler' }),
+      trimReconciler(),
+      terser({ compress: { dead_code: true } }),
+    ],
+  },
+  {
+    input: 'src/reconciler-31.js',
+    output: { format: 'es', file: 'lib/reconciler-31.js' },
+    plugins: [
+      resolve({ resolveOnly: ['react-reconciler-31'] }),
+      commonjs({ esmExternals: (id) => id === 'scheduler' }),
+      // trimReconciler(),
+      // terser({ compress: { dead_code: true } }),
+    ],
+  },
+];

packages/reconciler/src/index.js

@@ -1,46 +1,11 @@
-/* eslint-disable import/extensions */
 /* eslint-disable import/no-extraneous-dependencies */
-import Reconciler from 'react-reconciler/cjs/react-reconciler.production.min.js';
 
-import propsEqual from './propsEqual';
+import React from 'react';
+import createRendererForReact19 from './reconciler-31';
+import createRendererForReact18AndLess from './reconciler-26';
 
-const emptyObject = {};
+const isReact19 = React.version.startsWith('19');
 
-const createRenderer = ({
-  appendChild,
-  appendChildToContainer,
-  commitTextUpdate,
-  commitUpdate,
-  createInstance,
-  createTextInstance,
-  insertBefore,
-  removeChild,
-  removeChildFromContainer,
-  resetAfterCommit,
-}) => {
-  return Reconciler({
-    appendChild,
-    appendChildToContainer,
-    appendInitialChild: appendChild,
-    createInstance,
-    createTextInstance,
-    insertBefore,
-    commitUpdate,
-    commitTextUpdate,
-    removeChild,
-    removeChildFromContainer,
-    resetAfterCommit,
-    shouldSetTextContent: () => false,
-    finalizeInitialChildren: () => false,
-    getPublicInstance: (instance) => instance,
-    getRootHostContext: () => emptyObject,
-    getChildHostContext: () => emptyObject,
-    prepareForCommit() {},
-    clearContainer() {},
-    resetTextContent() {},
-    prepareUpdate: (element, type, oldProps, newProps) =>
-      !propsEqual(oldProps, newProps),
-  });
-};
-
-export default createRenderer;
+export default isReact19
+  ? createRendererForReact19
+  : createRendererForReact18AndLess;

packages/reconciler/src/reconciler-26.js

@@ -0,0 +1,46 @@
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-extraneous-dependencies */
+import Reconciler from 'react-reconciler-26/cjs/react-reconciler.production.min.js';
+
+import propsEqual from './propsEqual';
+
+const emptyObject = {};
+
+const createRenderer = ({
+  appendChild,
+  appendChildToContainer,
+  commitTextUpdate,
+  commitUpdate,
+  createInstance,
+  createTextInstance,
+  insertBefore,
+  removeChild,
+  removeChildFromContainer,
+  resetAfterCommit,
+}) => {
+  return Reconciler({
+    appendChild,
+    appendChildToContainer,
+    appendInitialChild: appendChild,
+    createInstance,
+    createTextInstance,
+    insertBefore,
+    commitUpdate,
+    commitTextUpdate,
+    removeChild,
+    removeChildFromContainer,
+    resetAfterCommit,
+    shouldSetTextContent: () => false,
+    finalizeInitialChildren: () => false,
+    getPublicInstance: (instance) => instance,
+    getRootHostContext: () => emptyObject,
+    getChildHostContext: () => emptyObject,
+    prepareForCommit() {},
+    clearContainer() {},
+    resetTextContent() {},
+    prepareUpdate: (element, type, oldProps, newProps) =>
+      !propsEqual(oldProps, newProps),
+  });
+};
+
+export default createRenderer;

packages/reconciler/src/reconciler-31.js

@@ -0,0 +1,93 @@
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-extraneous-dependencies */
+
+import Reconciler from 'react-reconciler-31/cjs/react-reconciler.production.js';
+import {
+  ConcurrentRoot,
+  DefaultEventPriority,
+} from 'react-reconciler-31/cjs/react-reconciler-constants.production.js';
+
+import propsEqual from './propsEqual';
+
+const emptyObject = {};
+
+const logRecoverableError = console.error;
+
+const createRenderer = ({
+  appendChild,
+  appendChildToContainer,
+  commitTextUpdate,
+  commitUpdate,
+  createInstance,
+  createTextInstance,
+  insertBefore,
+  removeChild,
+  removeChildFromContainer,
+  resetAfterCommit,
+}) => {
+  const _commitUpdate = (instance, type, oldProps, newProps) => {
+    if (propsEqual(oldProps, newProps)) return;
+    commitUpdate(instance, null, type, oldProps, newProps);
+  };
+
+  const reconciler = Reconciler({
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    warnsIfNotActing: false,
+    appendInitialChild: appendChild,
+    createInstance,
+    createTextInstance,
+    finalizeInitialChildren: () => false,
+    getPublicInstance: (instance) => instance,
+    prepareForCommit() {},
+    clearContainer() {},
+    resetAfterCommit,
+    resetTextContent() {},
+    getRootHostContext: () => emptyObject,
+    getChildHostContext: () => emptyObject,
+    shouldSetTextContent: () => false,
+    noTimeout: -1,
+    useSyncScheduling: true,
+    appendChild,
+    appendChildToContainer,
+    insertBefore,
+    removeChild,
+    removeChildFromContainer,
+    commitTextUpdate,
+    commitUpdate: _commitUpdate,
+    getCurrentUpdatePriority: () => DefaultEventPriority,
+    setCurrentUpdatePriority: () => {},
+    resolveUpdatePriority: () => DefaultEventPriority,
+    shouldAttemptEagerTransition: () => false,
+    requestPostPaintCallback: () => {},
+    maySuspendCommit: () => false,
+  });
+
+  const createContainer = (container) => {
+    return reconciler.createContainer(
+      container,
+      ConcurrentRoot, // tag
+      null, // hydration callbacks
+      false, // isStrictMode
+      null, // concurrentUpdatesByDefaultOverride
+      '', // identifierPrefix
+      logRecoverableError, // onUncaughtError
+      logRecoverableError, // onCaughtError
+      logRecoverableError, // onRecoverableError
+      null, // transitionCallbacks
+    );
+  };
+
+  const updateContainer = (doc, mountNode, parentComponent, callback) => {
+    reconciler.updateContainerSync(doc, mountNode, parentComponent, callback);
+    reconciler.flushSyncWork();
+  };
+
+  return {
+    ...reconciler,
+    createContainer,
+    updateContainer,
+  };
+};
+
+export default createRenderer;

packages/renderer/package.json

@@ -35,10 +35,10 @@
     "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": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "lint-staged": {
     "*.js": [

packages/renderer/src/index.js

@@ -84,11 +84,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

@@ -13,11 +13,9 @@ const createInstance = (type, { style, children, ...props }) => ({
 
 const createTextInstance = (text) => ({ type: 'TEXT_INSTANCE', value: text });
 
-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;
 
@@ -30,7 +28,7 @@ const appendChild = (parentInstance, child) => {
     return;
   }
 
-  parentInstance.children.push(child);
+  parent.children.push(child);
 };
 
 const appendChildToContainer = (parentInstance, child) => {