diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ce8a96f..950290c 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/example/app.js b/example/app.js index 0429d91..d71f88f 100644 --- a/example/app.js +++ b/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(, document.getElementById('example')); +const root = ReactDOM.createRoot(document.getElementById('example')); +root.render(); diff --git a/example/package.json b/example/package.json index dd183ce..2a3c626 100644 --- a/example/package.json +++ b/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" } } diff --git a/package.json b/package.json index 02fd816..b53a3ca 100644 --- a/package.json +++ b/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", diff --git a/test/util/render.js b/test/util/render.js index f13c668..7ed7e90 100644 --- a/test/util/render.js +++ b/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(, 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(); }); 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;