update react

diff --git a/package-lock.json b/package-lock.json
index 5273b3692dd5c0aea648839add8d1766f2137b41..23a6dbed79dbc583fb050deb4e59c178149f8ac2 100644 (file)
--- 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 e41696c247c737ce2e1d09a77615c11485453f5d..3714e5b744ab5410275f5dc22690e00f5cda5c22 100644 (file)
--- 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 ef70271b5b39d9bafaa55abe32a339277ce60ba9..3ecc53c6a14d22ec4c6d233a2b3b34b1b3290014 100644 (file)
--- 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 70ca6adf0152e85ce84385343a4675937005daaf..87f1345a61b03994cfc26f42fdfd39f5c06e7597 100644 (file)
--- 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 <AlttpBaseRomContext.Provider value={{ rom, setRom: setRomCallback }}>

diff --git a/resources/js/index.js b/resources/js/index.js
index daa2bd5cf96091a5dbba0055d09c46e8b9c9dcd1..f4cda6137d0e355867373450e7d354fc88ed1d00 100644 (file)
--- 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(<App />, document.getElementById('react-root'));
+       const root = createRoot(document.getElementById('react-root'));
+       root.render(<App />);
 }