deps: bump the react-deps group across 1 directory with 3 updates

package.json

@@ -63,8 +63,8 @@
     "ipfs-css": "^1.4.0",
     "libp2p": "^2.3.1",
     "multiformats": "^13.3.1",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tachyons": "^4.12.0"
   },
   "devDependencies": {
@@ -73,7 +73,7 @@
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
     "@playwright/test": "^1.48.2",
-    "@types/react": "^18.3.0",
+    "@types/react": "^19.0.1",
     "aegir": "^45.0.8",
     "cross-env": "^7.0.3",
     "esbuild": "^0.24.0",

src/app.tsx

@@ -3,7 +3,7 @@ import { RouteContext } from './context/router-context.jsx'
 import { checkSubdomainSupport } from './lib/check-subdomain-support.js'
 import './app.css'
 
-function App (): JSX.Element {
+function App (): React.ReactElement {
   const { currentRoute } = React.useContext(RouteContext)
 
   useEffect(() => {

src/components/About.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { type ReactElement } from 'react'
 
-export default function About (): JSX.Element {
+export default function About (): ReactElement {
   return (
         <aside className='mw7 lb-snow center w-100 lh-copy pa2 e2e-section-about'>
           <h1 className='pa0 f3 ma0 mb4 teal tc'>About the IPFS Gateway and Service Worker</h1>

src/components/Form.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { type ReactElement } from 'react'
 
-export default ({ handleSubmit, requestPath, setRequestPath }): JSX.Element => (
+export default ({ handleSubmit, requestPath, setRequestPath }): ReactElement => (
   <form id='add-file' onSubmit={handleSubmit}>
     <label htmlFor='inputContent' className='f5 ma0 pb2 teal fw4 db'>CID, Content Path, or URL</label>
     <input

src/components/collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, type ReactElement } from 'react'
 
 export interface CollapsibleProps {
   children: React.ReactNode
@@ -7,7 +7,7 @@ export interface CollapsibleProps {
   collapsed: boolean
 }
 
-export function Collapsible ({ children, collapsedLabel, expandedLabel, collapsed }: CollapsibleProps): JSX.Element {
+export function Collapsible ({ children, collapsedLabel, expandedLabel, collapsed }: CollapsibleProps): ReactElement {
   const [cId] = useState(Math.random().toString(36).substring(7))
   const [isCollapsed, setCollapsed] = useState(collapsed)
 

src/components/input-validator.tsx

@@ -1,8 +1,8 @@
 import { CID } from 'multiformats/cid'
-import React from 'react'
+import React, { type ReactElement } from 'react'
 import { nativeProtocolRegex, pathRegex, subdomainRegex, type IpfsUriParts } from '../lib/regex.js'
 
-function FormatHelp (): React.JSX.Element {
+function FormatHelp (): ReactElement {
   return (
     <>
       <p>Invalid address, correct it and try again. For reference, accepted formats are:</p>
@@ -27,8 +27,8 @@ function FormatHelp (): React.JSX.Element {
   )
 }
 
-function ValidationMessage ({ cidOrPeerIdOrDnslink, requestPath, protocol, children }): React.JSX.Element {
-  let errorElement: React.JSX.Element | null = null
+function ValidationMessage ({ cidOrPeerIdOrDnslink, requestPath, protocol, children }): ReactElement {
+  let errorElement: ReactElement | null = null
   if (requestPath == null || requestPath === '') {
     errorElement = <span><big className="f3">↑</big> Enter a valid IPFS/IPNS content path.</span>
   } else if (protocol !== 'ipfs' && protocol !== 'ipns') {
@@ -73,7 +73,7 @@ const parseInput = (uri: string): Partial<IpfsUriParts> => {
   return {}
 }
 
-export default function InputValidator ({ requestPath }: { requestPath: string }): React.JSX.Element {
+export default function InputValidator ({ requestPath }: { requestPath: string }): ReactElement {
   const { protocol, cidOrPeerIdOrDnslink, path } = parseInput(requestPath)
   const swPath = `/${protocol}/${cidOrPeerIdOrDnslink}${path ?? ''}`
 

src/components/sw-ready-button.tsx

@@ -1,13 +1,13 @@
 import React, { useContext, useMemo } from 'react'
 import { ServiceWorkerContext } from '../context/service-worker-context.jsx'
-type ButtonProps = JSX.IntrinsicElements['button']
+type ButtonProps = React.JSX.IntrinsicElements['button']
 
 interface ServiceWorkerReadyButtonProps extends ButtonProps {
   label: string
   waitingLabel?: string
 }
 
-export const ServiceWorkerReadyButton = ({ className, label, waitingLabel, ...props }: ServiceWorkerReadyButtonProps): JSX.Element => {
+export const ServiceWorkerReadyButton: React.FC<ServiceWorkerReadyButtonProps> = ({ className, label, waitingLabel, ...props }) => {
   const { isServiceWorkerRegistered } = useContext(ServiceWorkerContext)
 
   const buttonClasses = new Set(['button-reset', 'pv3', 'tc', 'bn', 'white', 'cursor-disabled', 'bg-gray'])

src/components/textarea-input.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, type ReactElement } from 'react'
 import { InputDescription } from './input-description.js'
 import { InputLabel } from './input-label.js'
 
@@ -13,7 +13,7 @@ export interface InputProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
   onChange(value: string): void
 }
 
-export default ({ resetKey, onChange, label, placeholder, validationFn, value, description, preSaveFormat, ...props }: InputProps): JSX.Element => {
+export default ({ resetKey, onChange, label, placeholder, validationFn, value, description, preSaveFormat, ...props }: InputProps): ReactElement => {
   const [internalValue, setInternalValue] = useState(value)
   const [error, setError] = useState<null | Error>(null)
 

src/context/config-context.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useState } from 'react'
+import React, { createContext, useCallback, useEffect, useState, type ReactElement } from 'react'
 import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultGateways, defaultRouters, defaultSupportsSubdomains, getConfig, resetConfig, type ConfigDb } from '../lib/config-db.js'
 import { getUiComponentLogger } from '../lib/logger.js'
 import type { ComponentLogger } from '@libp2p/logger'
@@ -24,7 +24,7 @@ export const ConfigContext = createContext<ConfigContextType>({
   _supportsSubdomains: defaultSupportsSubdomains
 })
 
-export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => {
+export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement, expanded?: boolean }> = ({ children }) => {
   const [gateways, setGateways] = useState<string[]>(defaultGateways)
   const [routers, setRouters] = useState<string[]>(defaultRouters)
   const [dnsJsonResolvers, setDnsJsonResolvers] = useState<Record<string, string>>(defaultDnsJsonResolvers)

src/context/router-context.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, type ReactElement } from 'react'
 
 export interface Route {
   default?: boolean
   path?: string
   shouldRender?(): Promise<boolean>
-  component: React.LazyExoticComponent<(...args: any[]) => React.JSX.Element | null>
+  component: React.LazyExoticComponent<(...args: any[]) => ReactElement | null>
 }
 
 export const RouteContext = React.createContext<{
@@ -13,7 +13,7 @@ export const RouteContext = React.createContext<{
   gotoPage(route?: string): void
 }>({ currentRoute: undefined, gotoPage: () => {} })
 
-export const RouterProvider = ({ children, routes }: { children: React.ReactNode, routes: Route[] }): JSX.Element => {
+export const RouterProvider: React.FC<{ children: React.ReactNode, routes: Route[] }> = ({ children, routes }) => {
   const [currentRoute, setCurrentRoute] = React.useState<Route | undefined>(undefined)
   /**
    * The default route is the first route in the list of routes,

src/context/service-worker-context.tsx

@@ -11,7 +11,7 @@
  * After the service worker is loaded. Usually any react code isn't loaded, but some edge cases are:
  * 1. The page being loaded using some /ip[fn]s/<path> url, but subdomain isolation is supported, so we need to redirect to the isolated origin
  */
-import React, { createContext, useEffect, useState } from 'react'
+import React, { createContext, useEffect, useState, type ReactElement } from 'react'
 import { getRedirectUrl, isDeregisterRequest } from '../lib/deregister-request.js'
 import { uiLogger } from '../lib/logger.js'
 import { findOriginIsolationRedirect } from '../lib/path-or-subdomain.js'
@@ -23,7 +23,7 @@ export const ServiceWorkerContext = createContext({
   isServiceWorkerRegistered: false
 })
 
-export const ServiceWorkerProvider = ({ children }): React.JSX.Element => {
+export const ServiceWorkerProvider = ({ children }): ReactElement => {
   const [isServiceWorkerRegistered, setIsServiceWorkerRegistered] = useState(false)
 
   useEffect(() => {

src/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ReactElement } from 'react'
 import ReactDOMClient from 'react-dom/client'
 import App from './app.jsx'
 import { RouterProvider, type Route } from './context/router-context.jsx'
@@ -15,7 +15,7 @@ const LazyRedirectPage = React.lazy(async () => import('./pages/redirect-page.js
 const LazyInterstitial = React.lazy(async () => import('./pages/redirects-interstitial.jsx'))
 const LazyServiceWorkerErrorPage = React.lazy(async () => import('./pages/errors/no-service-worker.jsx'))
 
-let ErrorPage: null | React.LazyExoticComponent<() => React.JSX.Element> = LazyServiceWorkerErrorPage
+let ErrorPage: null | React.LazyExoticComponent<() => ReactElement> = LazyServiceWorkerErrorPage
 if ('serviceWorker' in navigator) {
   ErrorPage = null
 }

src/pages/config.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState, type FunctionComponent } from 'react'
+import React, { useCallback, useContext, useEffect, useState, type FunctionComponent, type ReactElement } from 'react'
 import Header from '../components/Header.jsx'
 import { InputSection } from '../components/input-section.jsx'
 import { InputToggle } from '../components/input-toggle.jsx'
@@ -234,7 +234,7 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
   )
 }
 
-export default (): React.JSX.Element => {
+export default (): ReactElement => {
   return (
     <ServiceWorkerProvider>
       <ConfigProvider>

src/pages/errors/no-service-worker.tsx

@@ -2,12 +2,12 @@
  * Page to display a user friendly message when `navigator.serviceWorker` is not available.
  */
 
-import React from 'react'
+import React, { type ReactElement } from 'react'
 import About from '../../components/About.jsx'
 import Header from '../../components/Header.jsx'
 import '../default-page-styles.css'
 
-export default function NoServiceWorkerErrorPage (): React.JSX.Element {
+export default function NoServiceWorkerErrorPage (): ReactElement {
   return (
     <>
       <Header />

src/pages/helper-ui.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, type ReactElement } from 'react'
 import About from '../components/About.jsx'
 import Form from '../components/Form.jsx'
 import Header from '../components/Header.jsx'
@@ -9,7 +9,7 @@ import { LOCAL_STORAGE_KEYS } from '../lib/local-storage.js'
 import './default-page-styles.css'
 import Config from './config.js'
 
-function HelperUi (): React.JSX.Element {
+function HelperUi (): ReactElement {
   const [requestPath, setRequestPath] = useState(localStorage.getItem(LOCAL_STORAGE_KEYS.forms.requestPath) ?? '')
 
   useEffect(() => {
@@ -43,7 +43,7 @@ function HelperUi (): React.JSX.Element {
   )
 }
 
-export default (): React.JSX.Element => {
+export default (): ReactElement => {
   return (
     <ServiceWorkerProvider>
       <ConfigProvider>

src/pages/loading.tsx

@@ -2,11 +2,11 @@
  * Loading page to display after clicking "Load content" button
  */
 
-import React from 'react'
+import React, { type ReactElement } from 'react'
 import Header from '../components/Header.jsx'
 import './loading.css'
 
-export default function LoadingPage (): React.JSX.Element {
+export default function LoadingPage (): ReactElement {
   return (
     <>
     <Header />

src/pages/redirect-page.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useMemo, useState, type ReactElement } from 'react'
 import Header from '../components/Header.jsx'
 import { ConfigProvider } from '../context/config-context.jsx'
 import { ServiceWorkerContext, ServiceWorkerProvider } from '../context/service-worker-context.jsx'
@@ -15,7 +15,7 @@ import './loading.css'
 const uiComponentLogger = getUiComponentLogger('redirect-page')
 const log = uiLogger.forComponent('redirect-page')
 
-const ConfigIframe = (): JSX.Element => {
+const ConfigIframe: React.FC = () => {
   const { parentDomain } = getSubdomainParts(window.location.href)
   let iframeSrc
   if (parentDomain == null || parentDomain === window.location.href) {
@@ -33,7 +33,7 @@ const ConfigIframe = (): JSX.Element => {
   )
 }
 
-function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean }): React.JSX.Element {
+function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean }): ReactElement {
   const [isAutoReloadEnabled] = useState(true)
   const { isServiceWorkerRegistered } = useContext(ServiceWorkerContext)
   const [reloadUrl, setReloadUrl] = useState(translateIpfsRedirectUrl(window.location.href).href)
@@ -107,7 +107,7 @@ function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean
   )
 }
 
-export default (): React.JSX.Element => {
+export default (): ReactElement => {
   return (
     <ServiceWorkerProvider>
       <ConfigProvider>

src/pages/redirects-interstitial.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, type ReactElement } from 'react'
 import { checkSubdomainSupport } from '../lib/check-subdomain-support.js'
 import { findOriginIsolationRedirect } from '../lib/path-or-subdomain.js'
 import { translateIpfsRedirectUrl } from '../lib/translate-ipfs-redirect-url.js'
@@ -11,7 +11,7 @@ import './default-page-styles.css'
  * is used by IPFS hosted versions of the service-worker-gateway when non-existent paths are requested.
  * This will only redirect if the URL is for a subdomain
  */
-export default function RedirectsInterstitial (): React.JSX.Element {
+export default function RedirectsInterstitial (): ReactElement {
   const [subdomainRedirectUrl, setSubdomainRedirectUrl] = React.useState<string | null>(null)
   const [isSubdomainCheckDone, setIsSubdomainCheckDone] = React.useState<boolean>(false)
   useEffect(() => {