From eb6958dcb4a2f01b9997da12aee558a54a994a46 Mon Sep 17 00:00:00 2001 From: Daniel Karbach Date: Wed, 6 Sep 2023 11:26:45 +0200 Subject: [PATCH] update react --- package-lock.json | 80 ++++++++++----------- package.json | 6 +- resources/js/components/common/PngPlayer.js | 19 +++-- resources/js/helpers/AlttpBaseRomContext.js | 16 +++-- resources/js/index.js | 5 +- 5 files changed, 61 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5273b36..23a6dbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "qs": "^6.10.3", "react-bootstrap": "^2.2.0", "react-helmet": "^6.1.0", - "react-i18next": "^11.15.6", + "react-i18next": "^13.2.2", "react-router-bootstrap": "^0.26.0", "react-router-dom": "^6.2.2", "recharts": "^2.1.9", @@ -51,8 +51,8 @@ "lodash": "^4.17.19", "postcss": "^8.4.6", "postcss-import": "^15.1.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "resolve-url-loader": "^5.0.0", "sass": "^1.32.11", "sass-loader": "^13.3.2", @@ -10205,12 +10205,11 @@ } }, "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" @@ -10246,16 +10245,15 @@ } }, "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.2.0" } }, "node_modules/react-fast-compare": { @@ -10283,15 +10281,15 @@ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, "node_modules/react-i18next": { - "version": "11.18.6", - "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz", - "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==", + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.2.2.tgz", + "integrity": "sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==", "dependencies": { - "@babel/runtime": "^7.14.5", + "@babel/runtime": "^7.22.5", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { - "i18next": ">= 19.0.0", + "i18next": ">= 23.2.3", "react": ">= 16.8.0" }, "peerDependenciesMeta": { @@ -10940,12 +10938,11 @@ } }, "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/schema-utils": { @@ -20736,12 +20733,11 @@ } }, "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-bootstrap": { @@ -20764,13 +20760,12 @@ } }, "react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" } }, "react-fast-compare": { @@ -20797,11 +20792,11 @@ } }, "react-i18next": { - "version": "11.18.6", - "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz", - "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==", + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.2.2.tgz", + "integrity": "sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==", "requires": { - "@babel/runtime": "^7.14.5", + "@babel/runtime": "^7.22.5", "html-parse-stringify": "^3.0.1" } }, @@ -21266,12 +21261,11 @@ } }, "scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "schema-utils": { diff --git a/package.json b/package.json index e41696c..3714e5b 100644 --- a/package.json +++ b/package.json @@ -74,8 +74,8 @@ "lodash": "^4.17.19", "postcss": "^8.4.6", "postcss-import": "^15.1.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "resolve-url-loader": "^5.0.0", "sass": "^1.32.11", "sass-loader": "^13.3.2", @@ -105,7 +105,7 @@ "qs": "^6.10.3", "react-bootstrap": "^2.2.0", "react-helmet": "^6.1.0", - "react-i18next": "^11.15.6", + "react-i18next": "^13.2.2", "react-router-bootstrap": "^0.26.0", "react-router-dom": "^6.2.2", "recharts": "^2.1.9", diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js index ef70271..3ecc53c 100644 --- a/resources/js/components/common/PngPlayer.js +++ b/resources/js/components/common/PngPlayer.js @@ -52,18 +52,17 @@ const PngPlayer = ({ src }) => { }; }, [src]); - React.useEffect(async () => { + React.useEffect(() => { if (loading || !canvas.current) return; setFrameInfo(`1/${apng.frames.length}`); - const p = await createPlayer(apng, canvas.current); - setPlayer(p); - const updateFrame = (number) => { - setFrameInfo(`${number + 1}/${apng.frames.length}`); - }; - p.on('frame', updateFrame); - return () => { - p.off('frame', updateFrame); - }; + (async () => { + const p = await createPlayer(apng, canvas.current); + setPlayer(p); + const updateFrame = (number) => { + setFrameInfo(`${number + 1}/${apng.frames.length}`); + }; + p.on('frame', updateFrame); + })(); }, [apng, canvas.current, loading]); const stop = React.useCallback(() => { diff --git a/resources/js/helpers/AlttpBaseRomContext.js b/resources/js/helpers/AlttpBaseRomContext.js index 70ca6ad..87f1345 100644 --- a/resources/js/helpers/AlttpBaseRomContext.js +++ b/resources/js/helpers/AlttpBaseRomContext.js @@ -28,14 +28,16 @@ const AlttpBaseRomProvider = ({ children }) => { } }, [setRom]); - React.useEffect(async () => { - const stored = await localforage.getItem('alttpBaseRom'); - if (stored) { - const crc = CRC32.buf(new Uint8Array(stored)); - if (crc == 0x3322EFFC) { - setRom(stored); + React.useEffect(() => { + (async () => { + const stored = await localforage.getItem('alttpBaseRom'); + if (stored) { + const crc = CRC32.buf(new Uint8Array(stored)); + if (crc == 0x3322EFFC) { + setRom(stored); + } } - } + })(); }, []); return diff --git a/resources/js/index.js b/resources/js/index.js index daa2bd5..f4cda61 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -7,7 +7,7 @@ import './bootstrap'; import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import toastr from 'toastr'; toastr.options.positionClass = 'toast-bottom-right'; @@ -21,5 +21,6 @@ toastr.options.positionClass = 'toast-bottom-right'; import App from './app'; if (document.getElementById('react-root')) { - ReactDOM.render(, document.getElementById('react-root')); + const root = createRoot(document.getElementById('react-root')); + root.render(); } -- 2.39.2