Add React 19.x to supported versions

.github/workflows/ci.yml

@@ -38,7 +38,7 @@ jobs:
     strategy:
       matrix:
         node-version: [16.x, 18.x, 20.x]
-        react-version: [17.x, 18.x]
+        react-version: [17.x, 18.x, 19.x]
         include:
           - node-version: 12.x
             react-version: 16.0.0
@@ -53,10 +53,11 @@ jobs:
       - name: Install dependencies
         run: npm install
       - name: Install React ${{matrix.react-version}}
-        if: matrix.react-version != '18.x'
+        if: matrix.react-version != '19.x'
         run: |
           npm install --save-dev \
             react@${{matrix.react-version}} \
-            react-dom@${{matrix.react-version}}
+            react-dom@${{matrix.react-version}}\
+            @types/react@${{matrix.react-version}}
       - name: Run tests
         run: npm run tests-only

example/app.js

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import YouTube from '@u-wave/react-youtube'; // eslint-disable-line import/no-unresolved
 
 const {
@@ -128,5 +128,5 @@ function App() {
   );
 }
 
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(<App />, document.getElementById('example'));
+const root = ReactDOM.createRoot(document.getElementById('example'));
+root.render(<App />);

example/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@u-wave/react-youtube": "file:..",
     "esbuild": "^0.14.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "serve": "^13.0.0"
   }
 }

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/u-wave/react-youtube/issues"
   },
   "dependencies": {
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/youtube": "0.0.50",
     "load-script2": "^1.0.1",
     "prop-types": "^15.7.2"
@@ -33,8 +33,8 @@
     "mocha": "^10.0.0",
     "prop-types-table": "^1.0.0",
     "proxyquire": "^2.1.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^2.0.2",
     "tsd": "^0.31.0"
   },
@@ -51,7 +51,7 @@
   "module": "dist/react-youtube.es.js",
   "types": "index.d.ts",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "repository": {
     "type": "git",

test/util/render.js

@@ -7,12 +7,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 // Doing this after React is loaded makes React do a bit less DOM work
 import 'min-react-env/install';
-import env from 'min-react-env';
 import createYouTube from './createYouTube';
 
-Object.assign(global, env);
+const reactMajor = parseInt((ReactDOM.version || '16').split('.')[0], 10);
 
-const render = (initialProps) => {
+async function render(initialProps) {
   const { YouTube, sdkMock, playerMock } = createYouTube();
 
   let component;
@@ -36,18 +35,33 @@ const render = (initialProps) => {
     }
   }
 
-  const div = env.document.createElement('div');
-  const container = new Promise((resolve) => {
-    // eslint-disable-next-line react/no-deprecated
-    ReactDOM.render(<Container {...initialProps} ref={resolve} />, div);
+  const div = document.createElement('div');
+  let root;
+  if (reactMajor >= 18) {
+    const { createRoot } = await import('react-dom/client');
+    root = createRoot(div);
+  } else {
+    root = {
+      render(element) {
+        // eslint-disable-next-line react/no-deprecated
+        ReactDOM.render(element, div);
+      },
+      unmount() {
+        // eslint-disable-next-line react/no-deprecated
+        ReactDOM.unmountComponentAtNode(div);
+      },
+    };
+  }
+  const container = await new Promise((resolve) => {
+    root.render(<Container {...initialProps} ref={resolve} />);
   });
 
   function rerender(newProps) {
-    return container.then((wrapper) => new Promise((resolve) => {
-      wrapper.setState({ props: newProps }, () => {
+    return new Promise((resolve) => {
+      container.setState({ props: newProps }, () => {
         Promise.resolve().then(resolve);
       });
-    }));
+    });
   }
 
   function unmount() {
@@ -62,6 +76,6 @@ const render = (initialProps) => {
     rerender,
     unmount,
   }));
-};
+}
 
 export default render;