WIP Add support for newer versions of react-dom

.github/workflows/test.yml

@@ -17,7 +17,7 @@ jobs:
           node-version: 16.x
       - run: yarn install --frozen-lockfile --ignore-engines
       - run: yarn lint
-      - run: yarn test
+      - run: yarn test --colors
 
   node18:
     runs-on: ubuntu-latest
@@ -28,7 +28,7 @@ jobs:
         with:
           node-version: 18.x
       - run: yarn install --frozen-lockfile --ignore-engines
-      - run: yarn test
+      - run: yarn test --colors
 
   node20:
     runs-on: ubuntu-latest
@@ -39,7 +39,7 @@ jobs:
         with:
           node-version: 20.x
       - run: yarn install --frozen-lockfile --ignore-engines
-      - run: yarn test
+      - run: yarn test --colors
 
   node22:
     runs-on: ubuntu-latest
@@ -50,4 +50,4 @@ jobs:
         with:
           node-version: 22.x
       - run: yarn install --frozen-lockfile --ignore-engines
-      - run: yarn test
+      - run: yarn test --colors

package.json

@@ -99,8 +99,8 @@
     "jest": "^27.4.5",
     "multiparty": "^4.2.2",
     "prettier": "^3.3.2",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "webpack": "^5.2.0"
   },
   "peerDependencies": {

src/createDynamicEntryPoint.js

@@ -51,25 +51,51 @@ export default async function createDynamicEntryPoint({
     'window.snaps = {};',
   ];
   if (type === 'react') {
-    const pathToReactDom = require.resolve('react-dom');
     const pathToRW = renderWrapperModule || require.resolve('./renderWrapperReact');
     strings.push(
       `let renderWrapper = require('${pathToRW}');`,
       'renderWrapper = renderWrapper.default || renderWrapper;',
     );
-    strings.push(
-      `
-      const ReactDOM = require('${pathToReactDom}');
-      window.happoRender = (reactComponent, { rootElement, component, variant }) =>
-        ReactDOM.render(renderWrapper(reactComponent, { component, variant }), rootElement);
 
-      window.happoCleanup = () => {
-        for (const element of document.body.children) {
-          ReactDOM.unmountComponentAtNode(element);
-        }
-      };
-    `.trim(),
-    );
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    const reactDomVersion = require('react-dom/package.json').version;
+    const reactDomMajorVersion = parseInt(reactDomVersion.split('.', 1)[0], 10);
+    if (reactDomMajorVersion >= 18) {
+      const pathToReactDom = require.resolve('react-dom/client');
+      strings.push(
+        `
+        const ReactDOM = require('${pathToReactDom}');
+        let root;
+        window.happoRender = (reactComponent, { rootElement, component, variant }) => {
+          root = ReactDOM.createRoot(rootElement);
+          root.render(renderWrapper(reactComponent, { component, variant }));
+        };
+
+        window.happoCleanup = () => {
+          if (root) {
+            root.unmount();
+          }
+        };
+        `.trim(),
+      );
+    } else {
+      // Older versions of React DOM
+      const pathToReactDom = require.resolve('react-dom');
+      strings.push(
+        `
+        const ReactDOM = require('${pathToReactDom}');
+        window.happoRender = (reactComponent, { rootElement, component, variant }) => {
+          ReactDOM.render(renderWrapper(reactComponent, { component, variant }), rootElement);
+        };
+
+        window.happoCleanup = () => {
+          for (const element of document.body.children) {
+            ReactDOM.unmountComponentAtNode(element);
+          }
+        };
+        `.trim(),
+      );
+    }
   } else {
     const pathToRW = renderWrapperModule || require.resolve('./renderWrapper');
     strings.push(

test/integrations/examples/Foo-react-happo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 
 import Button from './Button.ffs';
 import ThemeContext from '../theme';
@@ -22,7 +22,7 @@ export const anotherVariant = () => {
 const PortalComponent = ({ children }) => {
   const element = document.createElement('div');
   document.body.appendChild(element);
-  return ReactDOM.createPortal(children, element);
+  return createPortal(children, document.body);
 };
 
 export const portalExample = () => (
@@ -44,7 +44,9 @@ export const innerPortal = () => (
 class AsyncComponent extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      label: 'Not ready',
+    };
     this.setLabel = this.setLabel.bind(this);
   }
 
@@ -74,7 +76,7 @@ class AsyncComponent extends React.Component {
 
 export const asyncExample = (render) => {
   render(<AsyncComponent />);
-  window.dispatchEvent(new CustomEvent('set-label', { detail: 'Ready' })); // eslint-disable-line no-undef
+  window.dispatchEvent(new CustomEvent('set-label', { detail: 'Ready' }));
   return new Promise((resolve) => {
     setTimeout(resolve, 11);
   });
@@ -95,7 +97,7 @@ class DynamicImportExample extends React.Component {
 
   async componentDidMount() {
     const res = await dynamicImportPromise;
-    this.setState({ text: `${res.default} ${res.world}` }); // eslint-disable-line react/no-did-mount-set-state
+    this.setState({ text: `${res.default} ${res.world}` });
   }
 
   render() {

yarn.lock

@@ -5616,7 +5616,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5688,15 +5688,13 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-react-dom@^16.3.2:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.2"
 
 react-is@^16.13.1:
   version "16.13.1"
@@ -5708,14 +5706,12 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react@^16.3.2:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 readable-stream@^2.0.5, readable-stream@^2.2.2:
   version "2.3.7"
@@ -5997,13 +5993,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-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==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0:
   version "3.3.0"