Merge pull request #1534 from silx-kit/wouter

Switch to `wouter` for routing
silx-kit · Dec 18, 2023 · aa342fd · aa342fd
2 parents c12a716 + 5c753a0
commit aa342fd
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 102 deletions.
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -23,13 +23,12 @@
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
     "react-icons": "4.12.0",
-    "react-router-dom": "6.3.0"
+    "wouter": "3.0.0-rc.2"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
-    "@types/react-router-dom": "~5.3.3",
     "@vitejs/plugin-react": "4.2.1",
     "eslint": "8.28.0",
     "eslint-config-galex": "4.5.2",

diff --git a/apps/demo/src/DemoApp.tsx b/apps/demo/src/DemoApp.tsx
@@ -1,9 +1,4 @@
-import {
-  BrowserRouter as Router,
-  Navigate,
-  Route,
-  Routes,
-} from 'react-router-dom';
+import { Redirect, Route, Switch } from 'wouter';
 
 import H5GroveApp from './H5GroveApp';
 import H5WasmApp from './h5wasm/H5WasmApp';
@@ -17,16 +12,16 @@ window.H5WEB_EXPERIMENTAL = query.has('experimental');
 
 function DemoApp() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="h5grove" element={<H5GroveApp />} />
-        <Route path="mock" element={<MockApp />} />
-        <Route path="hsds" element={<HsdsApp />} />
-        <Route path="h5wasm" element={<H5WasmApp />} />
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
-    </Router>
+    <Switch>
+      <Route path="/" component={Home} />
+      <Route path="/h5grove" component={H5GroveApp} />
+      <Route path="/mock" component={MockApp} />
+      <Route path="/hsds" component={HsdsApp} />
+      <Route path="/h5wasm" component={H5WasmApp} />
+      <Route>
+        <Redirect to="/" replace />
+      </Route>
+    </Switch>
   );
 }
 

diff --git a/apps/demo/src/H5GroveApp.tsx b/apps/demo/src/H5GroveApp.tsx
@@ -1,5 +1,5 @@
 import { App, assertEnvVar, H5GroveProvider } from '@h5web/app';
-import { useLocation } from 'react-router-dom';
+import { useSearch } from 'wouter';
 
 import { getFeedbackURL } from './utils';
 
@@ -10,7 +10,7 @@ function H5GroveApp() {
   assertEnvVar(URL, 'VITE_H5GROVE_URL');
   assertEnvVar(FILEPATH, 'VITE_H5GROVE_FALLBACK_FILEPATH');
 
-  const query = new URLSearchParams(useLocation().search);
+  const query = new URLSearchParams(useSearch());
   const filepath = query.get('file') || FILEPATH;
 
   return (

diff --git a/apps/demo/src/Home.tsx b/apps/demo/src/Home.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { FiChevronsRight } from 'react-icons/fi';
-import { Link } from 'react-router-dom';
+import { Link } from 'wouter';
 
 import styles from './Home.module.css';
 
@@ -40,7 +40,7 @@ function Home() {
         <main className={styles.demos}>
           <section>
             <h2>
-              <Link to="h5grove" className={styles.demoLink}>
+              <Link to="/h5grove" className={styles.demoLink}>
                 H5Grove <FiChevronsRight />
               </Link>
             </h2>
@@ -61,19 +61,19 @@ function Home() {
             </p>
             <ul className={styles.demoFiles}>
               <li>
-                <Link to="h5grove">
+                <Link to="/h5grove">
                   <strong>water_224.h5</strong>
                 </Link>{' '}
                 (default) - a typical NeXus file with various real-world
                 datasets to demonstrate H5Web's core visualizations.
               </li>
               <li>
-                <Link to="h5grove?file=compressed.h5">compressed.h5</Link> - a
+                <Link to="/h5grove?file=compressed.h5">compressed.h5</Link> - a
                 file with datasets compressed with various filters to test
                 decompression.
               </li>
               <li>
-                <Link to="h5grove?file=epics.h5">epics.h5</Link> - a test file
+                <Link to="/h5grove?file=epics.h5">epics.h5</Link> - a test file
                 from the{' '}
                 <a
                   href="https://epics.anl.gov/"
@@ -87,25 +87,25 @@ function Home() {
                 group (Argonne National Laboratory).
               </li>
               <li>
-                <Link to="h5grove?file=grove.h5">grove.h5</Link> - a file used
+                <Link to="/h5grove?file=grove.h5">grove.h5</Link> - a file used
                 to test the <code>H5GroveProvider</code> provider; it contains
                 datasets with <code>NaN</code>, <code>Infinity</code>, boolean
                 and complex values, as well as RGB images and 4D stacks.
               </li>
               <li>
-                <Link to="h5grove?file=links.h5">links.h5</Link> - a file with
+                <Link to="/h5grove?file=links.h5">links.h5</Link> - a file with
                 external links, soft links and a virtual dataset to test link
                 resolution.
               </li>
               <li>
-                <Link to="h5grove?file=tall.h5">tall.h5</Link> - the demo file
+                <Link to="/h5grove?file=tall.h5">tall.h5</Link> - the demo file
                 of HSDS.
               </li>
             </ul>
           </section>
           <section>
             <h2>
-              <Link to="h5wasm" className={styles.demoLink}>
+              <Link to="/h5wasm" className={styles.demoLink}>
                 H5Wasm <FiChevronsRight />
               </Link>
             </h2>
@@ -149,7 +149,7 @@ function Home() {
                   <Fragment key={filename}>
                     {index > 0 && ', '}
                     <Link
-                      to={`h5wasm?url=${encodeURIComponent(
+                      to={`/h5wasm?url=${encodeURIComponent(
                         `https://www.silx.org/pub/h5web/${filename}`,
                       )}`}
                     >
@@ -162,7 +162,7 @@ function Home() {
           </section>
           <section>
             <h2>
-              <Link to="hsds" className={styles.demoLink}>
+              <Link to="/hsds" className={styles.demoLink}>
                 HSDS <FiChevronsRight />
               </Link>
             </h2>
@@ -180,18 +180,18 @@ function Home() {
             <p>
               This demo communicates with an HSDS test server, which serves the
               same files as the H5Grove demo above:{' '}
-              <Link to="hsds">water_224.h5</Link> (<strong>default</strong>),{' '}
-              <Link to="hsds?file=compressed.h5">compressed.h5</Link> (note that
-              bitshuffle is not yet supported by HSDS),{' '}
-              <Link to="hsds?file=epics.h5">epics.h5</Link>,{' '}
-              <Link to="hsds?file=grove.h5">grove.h5</Link>,{' '}
-              <Link to="hsds?file=links.h5">links.h5</Link>,{' '}
-              <Link to="hsds?file=tall.h5">tall.h5</Link>.
+              <Link to="/hsds">water_224.h5</Link> (<strong>default</strong>),{' '}
+              <Link to="/hsds?file=compressed.h5">compressed.h5</Link> (note
+              that bitshuffle is not yet supported by HSDS),{' '}
+              <Link to="/hsds?file=epics.h5">epics.h5</Link>,{' '}
+              <Link to="/hsds?file=grove.h5">grove.h5</Link>,{' '}
+              <Link to="/hsds?file=links.h5">links.h5</Link>,{' '}
+              <Link to="/hsds?file=tall.h5">tall.h5</Link>.
             </p>
           </section>
           <section>
             <h2>
-              <Link to="mock" className={styles.demoLink}>
+              <Link to="/mock" className={styles.demoLink}>
                 Mock data <FiChevronsRight />
               </Link>
             </h2>

diff --git a/apps/demo/src/HsdsApp.tsx b/apps/demo/src/HsdsApp.tsx
@@ -1,5 +1,5 @@
 import { App, assertEnvVar, HsdsProvider } from '@h5web/app';
-import { useLocation } from 'react-router-dom';
+import { useSearch } from 'wouter';
 
 import { getFeedbackURL } from './utils';
 
@@ -16,7 +16,7 @@ function HsdsApp() {
   assertEnvVar(SUBDOMAIN, 'VITE_HSDS_SUBDOMAIN');
   assertEnvVar(FILEPATH, 'VITE_HSDS_FALLBACK_FILEPATH');
 
-  const query = new URLSearchParams(useLocation().search);
+  const query = new URLSearchParams(useSearch());
   const filepath = `${SUBDOMAIN}${query.get('file') || FILEPATH}`;
 
   return (

diff --git a/apps/demo/src/MockApp.tsx b/apps/demo/src/MockApp.tsx
@@ -1,10 +1,10 @@
 import { App, MockProvider } from '@h5web/app';
-import { useLocation } from 'react-router-dom';
+import { useSearch } from 'wouter';
 
 import { getFeedbackURL } from './utils';
 
 function MockApp() {
-  const query = new URLSearchParams(useLocation().search);
+  const query = new URLSearchParams(useSearch());
 
   return (
     <MockProvider>

diff --git a/apps/demo/src/h5wasm/H5WasmApp.tsx b/apps/demo/src/h5wasm/H5WasmApp.tsx
@@ -1,15 +1,15 @@
 import { App } from '@h5web/app';
 import { H5WasmProvider } from '@h5web/h5wasm';
 import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useSearch } from 'wouter';
 
 import { getFeedbackURL } from '../utils';
 import DropZone from './DropZone';
 import type { H5File } from './models';
 import { getPlugin } from './plugin-utils';
 
 function H5WasmApp() {
-  const query = new URLSearchParams(useLocation().search);
+  const query = new URLSearchParams(useSearch());
   const [h5File, setH5File] = useState<H5File>();
 
   if (!h5File) {

diff --git a/apps/demo/src/h5wasm/UrlForm.tsx b/apps/demo/src/h5wasm/UrlForm.tsx
@@ -2,7 +2,7 @@ import useAxios from 'axios-hooks';
 import type { FormEvent } from 'react';
 import { useCallback, useEffect } from 'react';
 import { FiLoader } from 'react-icons/fi';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useSearch } from 'wouter';
 
 import styles from './H5WasmApp.module.css';
 import type { H5File } from './models';
@@ -14,8 +14,8 @@ interface Props {
 function UrlForm(props: Props) {
   const { onH5File } = props;
 
-  const navigate = useNavigate();
-  const query = new URLSearchParams(useLocation().search);
+  const [, navigate] = useLocation();
+  const query = new URLSearchParams(useSearch());
   const url = query.get('url') || '';
 
   const [{ loading, error }, execute] = useAxios<ArrayBuffer>(