From 168e0e7746df88a48e582fbdd4d09ddc28acd178 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 29 Dec 2024 05:29:24 +0100 Subject: [PATCH] client: Upgrade to react-router 7 Not much relevant to us. Just the renaming of the package, and the features behind the `future` flags being enabled by default. https://github.com/remix-run/react-router/blob/08e4f2fd399543cab776f4be8a29181093a3702c/CHANGELOG.md#v700 https://reactrouter.com/upgrading/v6 --- client/js/helpers/hooks.js | 2 +- client/js/helpers/uri.js | 2 +- client/js/templates/App.jsx | 12 +---- client/js/templates/EntriesPage.jsx | 4 +- client/js/templates/HashPassword.jsx | 2 +- client/js/templates/Item.jsx | 2 +- client/js/templates/LoginForm.jsx | 2 +- client/js/templates/NavFilters.jsx | 2 +- client/js/templates/NavSearch.jsx | 2 +- client/js/templates/NavSources.jsx | 2 +- client/js/templates/NavTags.jsx | 2 +- client/js/templates/NavToolBar.jsx | 2 +- client/js/templates/OpmlImport.jsx | 2 +- client/js/templates/SearchList.jsx | 2 +- client/js/templates/Source.jsx | 2 +- client/js/templates/SourcesPage.jsx | 2 +- client/package-lock.json | 74 ++++++++++++++++------------ client/package.json | 2 +- 18 files changed, 61 insertions(+), 59 deletions(-) diff --git a/client/js/helpers/hooks.js b/client/js/helpers/hooks.js index c95e1a49b8..58ddd961be 100644 --- a/client/js/helpers/hooks.js +++ b/client/js/helpers/hooks.js @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router'; import { useMediaMatch } from 'rooks'; /** diff --git a/client/js/helpers/uri.js b/client/js/helpers/uri.js index b7d61302be..0a362dcbe5 100644 --- a/client/js/helpers/uri.js +++ b/client/js/helpers/uri.js @@ -1,4 +1,4 @@ -import { useLocation, useMatch } from 'react-router-dom'; +import { useLocation, useMatch } from 'react-router'; import { FilterType } from '../Filter'; /** diff --git a/client/js/templates/App.jsx b/client/js/templates/App.jsx index e2bf6613ce..cc74753e86 100644 --- a/client/js/templates/App.jsx +++ b/client/js/templates/App.jsx @@ -9,7 +9,7 @@ import { Navigate, useNavigate, useLocation, -} from 'react-router-dom'; +} from 'react-router'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Collapse } from '@kunukn/react-collapse'; import classNames from 'classnames'; @@ -852,15 +852,7 @@ App.propTypes = { */ export function createApp({ basePath, appRef, configuration }) { return ( - + ); diff --git a/client/js/templates/EntriesPage.jsx b/client/js/templates/EntriesPage.jsx index 4c0b796575..2cb67840cf 100644 --- a/client/js/templates/EntriesPage.jsx +++ b/client/js/templates/EntriesPage.jsx @@ -7,7 +7,7 @@ import React, { forwardRef, } from 'react'; import PropTypes from 'prop-types'; -import { Link, useLocation, useParams } from 'react-router-dom'; +import { Link, useLocation, useParams } from 'react-router'; import { useOnline } from 'rooks'; import { useStateWithDeps } from 'use-state-with-deps'; import nullable from 'prop-types-nullable'; @@ -28,7 +28,7 @@ import { LocalizationContext } from '../helpers/i18n'; import { useShouldReload } from '../helpers/hooks'; import { forceReload, makeEntriesLinkLocation } from '../helpers/uri'; import { HttpError } from '../errors'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router'; function reloadList({ fetchParams, diff --git a/client/js/templates/HashPassword.jsx b/client/js/templates/HashPassword.jsx index ecdc188939..5b2047bcec 100644 --- a/client/js/templates/HashPassword.jsx +++ b/client/js/templates/HashPassword.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { useCallback, useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router'; import { useInput } from 'rooks'; import { LoadingState } from '../requests/LoadingState'; import { HttpError } from '../errors'; diff --git a/client/js/templates/Item.jsx b/client/js/templates/Item.jsx index b2c6b3d14c..26d3dd15aa 100644 --- a/client/js/templates/Item.jsx +++ b/client/js/templates/Item.jsx @@ -7,7 +7,7 @@ import React, { useState, } from 'react'; import PropTypes from 'prop-types'; -import { Link, useNavigate, useLocation } from 'react-router-dom'; +import { Link, useNavigate, useLocation } from 'react-router'; import { usePreviousImmediate } from 'rooks'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; diff --git a/client/js/templates/LoginForm.jsx b/client/js/templates/LoginForm.jsx index 046d7c8dc7..a5bf823f5c 100644 --- a/client/js/templates/LoginForm.jsx +++ b/client/js/templates/LoginForm.jsx @@ -2,7 +2,7 @@ import React, { useCallback, useContext, useState } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { SpinnerBig } from './Spinner'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router'; import { HttpError, LoginError } from '../errors'; import { ConfigurationContext } from '../helpers/configuration'; import { LocalizationContext } from '../helpers/i18n'; diff --git a/client/js/templates/NavFilters.jsx b/client/js/templates/NavFilters.jsx index 1031b4f855..5549204661 100644 --- a/client/js/templates/NavFilters.jsx +++ b/client/js/templates/NavFilters.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useContext, useState, useMemo } from 'react'; import PropTypes from 'prop-types'; import { useEntriesParams } from '../helpers/uri'; -import { Link, useLocation } from 'react-router-dom'; +import { Link, useLocation } from 'react-router'; import classNames from 'classnames'; import { FilterType } from '../Filter'; import { makeEntriesLinkLocation, useForceReload } from '../helpers/uri'; diff --git a/client/js/templates/NavSearch.jsx b/client/js/templates/NavSearch.jsx index c4bb5b3b93..9d2b1e21b9 100644 --- a/client/js/templates/NavSearch.jsx +++ b/client/js/templates/NavSearch.jsx @@ -6,7 +6,7 @@ import React, { useState, } from 'react'; import PropTypes from 'prop-types'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router'; import classNames from 'classnames'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { makeEntriesLink } from '../helpers/uri'; diff --git a/client/js/templates/NavSources.jsx b/client/js/templates/NavSources.jsx index 738cd4552a..2d7dcb768d 100644 --- a/client/js/templates/NavSources.jsx +++ b/client/js/templates/NavSources.jsx @@ -1,6 +1,6 @@ import React, { useCallback, useMemo, useContext, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { Link, useLocation } from 'react-router-dom'; +import { Link, useLocation } from 'react-router'; import { usePreviousImmediate } from 'rooks'; import classNames from 'classnames'; import { unescape } from 'html-escaper'; diff --git a/client/js/templates/NavTags.jsx b/client/js/templates/NavTags.jsx index f5b718c613..85f59e5f70 100644 --- a/client/js/templates/NavTags.jsx +++ b/client/js/templates/NavTags.jsx @@ -1,7 +1,7 @@ import React, { useContext, useMemo, useCallback, useState } from 'react'; import PropTypes from 'prop-types'; import nullable from 'prop-types-nullable'; -import { Link, useLocation } from 'react-router-dom'; +import { Link, useLocation } from 'react-router'; import classNames from 'classnames'; import { unescape } from 'html-escaper'; import { diff --git a/client/js/templates/NavToolBar.jsx b/client/js/templates/NavToolBar.jsx index 8c5ca46e53..fc741d7302 100644 --- a/client/js/templates/NavToolBar.jsx +++ b/client/js/templates/NavToolBar.jsx @@ -1,6 +1,6 @@ import React, { useCallback, useContext, useState } from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as icons from '../icons'; import { diff --git a/client/js/templates/OpmlImport.jsx b/client/js/templates/OpmlImport.jsx index e027ad6a39..15a95389d3 100644 --- a/client/js/templates/OpmlImport.jsx +++ b/client/js/templates/OpmlImport.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import { useOnline } from 'rooks'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router'; import { LoadingState } from '../requests/LoadingState'; import { HttpError, UnexpectedStateError } from '../errors'; import { importOpml } from '../requests/common'; diff --git a/client/js/templates/SearchList.jsx b/client/js/templates/SearchList.jsx index 15e25974d8..31d86f6a50 100644 --- a/client/js/templates/SearchList.jsx +++ b/client/js/templates/SearchList.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { makeEntriesLink } from '../helpers/uri'; import * as icons from '../icons'; diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index 93e351ba36..2464036ed2 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { useRef } from 'react'; import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu'; -import { useNavigate, useLocation } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router'; import { fadeOut } from '@siteparts/show-hide-effects'; import { makeEntriesLinkLocation } from '../helpers/uri'; import PropTypes from 'prop-types'; diff --git a/client/js/templates/SourcesPage.jsx b/client/js/templates/SourcesPage.jsx index 3554cb61e5..96c5056426 100644 --- a/client/js/templates/SourcesPage.jsx +++ b/client/js/templates/SourcesPage.jsx @@ -1,6 +1,6 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { useMemo } from 'react'; -import { Link, useNavigate, useLocation, useMatch } from 'react-router-dom'; +import { Link, useNavigate, useLocation, useMatch } from 'react-router'; import Source from './Source'; import { SpinnerBig } from './Spinner'; import { LoadingState } from '../requests/LoadingState'; diff --git a/client/package-lock.json b/client/package-lock.json index a4853423e1..4d28e844fd 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -26,7 +26,7 @@ "ramda": "^0.30.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.28.1", + "react-router": "^7.1.1", "reset-css": "^5.0.1", "rooks": "^7.1.1", "tinykeys": "^3.0.0", @@ -2282,15 +2282,6 @@ "@parcel/core": "^2.13.3" } }, - "node_modules/@remix-run/router": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", - "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", - "license": "MIT", - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@siteparts/show-hide-effects": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@siteparts/show-hide-effects/-/show-hide-effects-1.0.0.tgz", @@ -2547,6 +2538,12 @@ "react-dom": ">=16.14.0" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -3102,6 +3099,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/core-js": { "version": "3.39.0", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz", @@ -6394,35 +6400,27 @@ } }, "node_modules/react-router": { - "version": "6.28.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.1.tgz", - "integrity": "sha512-2omQTA3rkMljmrvvo6WtewGdVh45SpL9hGiCI9uUrwGGfNFDIvGK4gYJsKlJoNVi6AQZcopSCballL+QGOm7fA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0" + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.0.0" }, "peerDependencies": { - "react": ">=16.8" - } - }, - "node_modules/react-router-dom": { - "version": "6.28.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.1.tgz", - "integrity": "sha512-YraE27C/RdjcZwl5UCqF/ffXnZDxpJdk9Q6jw38SZHjXs7NNdpViq2l2c7fO7+4uWaEfcwfGCv3RSg4e1By/fQ==", - "license": "MIT", - "dependencies": { - "@remix-run/router": "1.21.0", - "react-router": "6.28.1" + "react": ">=18", + "react-dom": ">=18" }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } } }, "node_modules/react-transition-state": { @@ -6705,6 +6703,12 @@ "node": ">=10" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -7421,6 +7425,12 @@ "dev": true, "license": "0BSD" }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/client/package.json b/client/package.json index 3c8e95dcfe..f2be6ebda6 100644 --- a/client/package.json +++ b/client/package.json @@ -22,7 +22,7 @@ "ramda": "^0.30.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.28.1", + "react-router": "^7.1.1", "reset-css": "^5.0.1", "rooks": "^7.1.1", "tinykeys": "^3.0.0",