Replace react-router v5 with @tanstack/react-router (#63)

Author: tstirrat15

package.json

@@ -23,6 +23,8 @@
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.9",
     "@tailwindcss/vite": "^4.1.5",
+    "@tanstack/react-router": "^1.119.0",
+    "@tanstack/react-router-devtools": "^1.119.1",
     "ansi-to-html": "^0.7.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -47,7 +49,6 @@
     "react-joyride": "^2.5.3",
     "react-reflex": "^4.0.9",
     "react-responsive-carousel": "^3.2.23",
-    "react-router-dom": "^5.3.4",
     "sjcl": "^1.0.8",
     "string-to-color": "^2.2.2",
     "string.prototype.replaceall": "^1.0.6",
@@ -76,7 +77,6 @@
     "@types/react": "^18.3.1",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.3.0",
     "@types/sjcl": "^1.0.30",
     "@types/styled-components": "^5.1.26",
     "@types/use-deep-compare-effect": "^1.5.1",

src/App.tsx

@@ -3,8 +3,6 @@ import { ConfirmDialogProvider } from "./playground-ui/ConfirmDialogProvider";
 import { useGoogleAnalytics } from "./playground-ui/GoogleAnalyticsHook";
 import PlaygroundUIThemed from "./playground-ui/PlaygroundUIThemed";
 import "react-reflex/styles.css";
-import { BrowserRouter } from "react-router-dom";
-import { type ReactNode } from "react";
 import "typeface-roboto-mono/index.css"; // Import the Roboto Mono font.
 import "./App.css";
 import { EmbeddedPlayground } from "./components/EmbeddedPlayground";
@@ -13,53 +11,48 @@ import { InlinePlayground } from "./components/InlinePlayground";
 import AppConfig from "./services/configservice";
 import { PLAYGROUND_UI_COLORS } from "./theme";
 import { ThemeProvider } from "@/components/ThemeProvider";
+import {
+  Outlet,
+  RouterProvider,
+  createRouter,
+  createRoute,
+  createRootRoute,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
-export interface AppProps {
-  /**
-   * forTesting indicates whether the app is for testing.
-   */
-  forTesting?: boolean | undefined;
-}
-
-function ForTesting() {
-  return <FullPlayground />;
-}
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});
 
-function ThemedApp(props: {
-  withRouter?: () => ReactNode;
-  forTesting: boolean | undefined;
-}) {
-  if (window.location.pathname.indexOf("/i/") >= 0) {
-    return (
-      // @ts-expect-error RRv5 types are jank
-      <BrowserRouter>
-        <InlinePlayground />
-      </BrowserRouter>
-    );
-  }
-
-  if (window.location.pathname.indexOf("/e/") >= 0) {
-    return (
-      // @ts-expect-error RRv5 types are jank
-      <BrowserRouter>
-        <EmbeddedPlayground />
-      </BrowserRouter>
-    );
-  }
-
-  if (props.forTesting) {
-    return <ForTesting />;
-  } else {
-    return (
-      // @ts-expect-error RRv5 types are jank
-      <BrowserRouter>
-        <FullPlayground />
-      </BrowserRouter>
-    );
-  }
-}
+// TODO: extend the routing; the $s are catchalls.
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "$",
+  component: FullPlayground,
+});
+const inlineRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/i/$",
+  component: InlinePlayground,
+});
+const embeddedRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/e/$",
+  component: EmbeddedPlayground,
+});
 
-function App(props: AppProps) {
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  inlineRoute,
+  embeddedRoute,
+]);
+const router = createRouter({ routeTree });
+function App() {
   // Register GA hook.
   useGoogleAnalytics(AppConfig().ga.measurementId);
 
@@ -72,7 +65,7 @@ function App(props: AppProps) {
       >
         <AlertProvider>
           <ConfirmDialogProvider>
-            <ThemedApp forTesting={props.forTesting} />
+            <RouterProvider router={router} />
           </ConfirmDialogProvider>
         </AlertProvider>
       </PlaygroundUIThemed>

src/components/EditorDisplay.tsx

@@ -18,7 +18,7 @@ import monaco from "monaco-editor";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import "react-reflex/styles.css";
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "@tanstack/react-router";
 import { ScrollLocation, useCookieService } from "../services/cookieservice";
 import {
   DataStore,
@@ -90,7 +90,7 @@ export function EditorDisplay(props: EditorDisplayProps) {
   }, [props.services.localParseService.state]);
 
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const datastore = props.datastore;
@@ -175,9 +175,10 @@ export function EditorDisplay(props: EditorDisplayProps) {
     flushSync(() => {
       setLocalIndex(localIndex + 1);
 
+      // TODO: this shouldn't be necessary. Moving to redux may make this less painful.
       const updated = datastore.update(currentItem!, value || "");
       if (updated && updated.pathname !== location.pathname) {
-        history.replace(updated.pathname);
+        navigate({ to: updated.pathname, replace: true });
       }
 
       props.datastoreUpdated();

src/components/FullPlayground.tsx

@@ -42,7 +42,7 @@ import { fileDialog } from "file-select-dialog";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useCookies } from "react-cookie";
 import "react-reflex/styles.css";
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "@tanstack/react-router";
 import sjcl from "sjcl";
 import { useKeyboardShortcuts } from "use-keyboard-shortcuts";
 import DISCORD from "../assets/discord.svg?react";
@@ -385,7 +385,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
 
   const classes = useStyles({ prefersDarkMode: prefersDarkMode });
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const datastore = props.datastore;
 
@@ -424,13 +424,14 @@ export function ThemedAppView(props: { datastore: DataStore }) {
   ]);
 
   // Effect: If the user lands on the `/` route, redirect them to the schema editor.
+  // TODO: this should probably be a redirect at the routing layer.
   useEffect(() => {
     (async () => {
       if (currentItem === undefined) {
-        history.replace(DataStorePaths.Schema());
+        navigate({ to: DataStorePaths.Schema(), replace: true });
       }
     })();
-  }, [datastore, currentItem, history]);
+  }, [datastore, currentItem, navigate]);
 
   const conductDownload = () => {
     const yamlContents = createValidationYAML(datastore);
@@ -468,7 +469,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
         datastore.loadFromParsed(uploaded);
         datastoreUpdated();
 
-        history.replace(DataStorePaths.Schema());
+        navigate({ to: DataStorePaths.Schema(), replace: true });
       }
     })();
   };
@@ -563,7 +564,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
     datastoreUpdated();
 
     services.liveCheckService.clear();
-    history.replace(DataStorePaths.Schema());
+    navigate({ to: DataStorePaths.Schema(), replace: true });
   };
 
   const [previousValidationForDiff, setPreviousValidationForDiff] = useState<
@@ -639,23 +640,24 @@ export function ThemedAppView(props: { datastore: DataStore }) {
   const validationState = validationService.state;
 
   const handleChangeTab = (
+    // TODO: this should be a Link
     _event: React.ChangeEvent<object>,
     selectedTabValue: string,
   ) => {
     const item = datastore.getById(selectedTabValue)!;
-    history.push(item.pathname);
+    navigate({ to: item.pathname });
   };
 
   const setDismissTour = () => {
     setShowTour(false);
     setCookie("dismiss-tour", true);
-    history.push(DataStorePaths.Schema());
+    navigate({ to: DataStorePaths.Schema() });
   };
 
   const handleTourBeforeStep = (selector: string) => {
     // Activate the Assertions tab before the assertions dialogs
     if (selector.includes(TourElementClass.assert)) {
-      history.push(DataStorePaths.Assertions());
+      navigate({ to: DataStorePaths.Assertions() });
     }
   };
 

src/components/ShareLoader.tsx

@@ -8,7 +8,7 @@ import { RpcError } from "@protobuf-ts/runtime-rpc";
 import Alert from "@material-ui/lab/Alert";
 import React, { useEffect, useState } from "react";
 import "react-reflex/styles.css";
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "@tanstack/react-router";
 import AppConfig from "../services/configservice";
 import { DataStore } from "../services/datastore";
 
@@ -33,7 +33,7 @@ export function ShareLoader(props: {
 }) {
   const { showAlert } = useAlert();
   const { showConfirm } = useConfirmDialog();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const datastore = props.datastore;
@@ -73,7 +73,7 @@ export function ShareLoader(props: {
       // TODO: use routing for this instead of string manipulation
       const pieces = location.pathname.replace(urlPrefix, "").split("/");
       if (pieces.length < 1 && !props.sharedRequired) {
-        history.push("/");
+        navigate({ to: "/" });
         return;
       }
 
@@ -97,7 +97,7 @@ export function ShareLoader(props: {
             content: "Invalid sharing reference",
             buttonTitle: "Okay",
           });
-          history.replace("/");
+          navigate({ to: "/", replace: true });
           return;
         }
 
@@ -116,7 +116,7 @@ export function ShareLoader(props: {
             content: "The shared playground specified does not exist",
             buttonTitle: "Okay",
           });
-          history.replace("/");
+          navigate({ to: "/", replace: true });
           return;
         }
 
@@ -150,12 +150,14 @@ export function ShareLoader(props: {
         }
 
         if (!props.sharedRequired) {
-          history.replace(
-            location.pathname.slice(
+          // TODO: do this with routing as well
+          navigate({
+            to: location.pathname.slice(
               0,
               urlPrefix.length + shareReference.length,
             ),
-          );
+            replace: true,
+          });
         }
 
         setLoadingStatus(SharedLoadingStatus.LOADED);
@@ -166,15 +168,15 @@ export function ShareLoader(props: {
             content: error?.message,
             buttonTitle: "Okay",
           });
-        history.replace("/");
+        navigate({ to: "/", replace: true });
         return;
       }
     })();
   }, [
     location.pathname,
     loadingStatus,
     datastore,
-    history,
+    navigate,
     showAlert,
     showConfirm,
     urlPrefix,

src/components/panels/errordisplays.tsx

@@ -6,7 +6,7 @@ import {
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
 import Alert from "@material-ui/lab/Alert";
 import "react-reflex/styles.css";
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 import { DataStoreItemKind, DataStorePaths } from "../../services/datastore";
 
 export const ERROR_SOURCE_TO_ITEM = {
@@ -121,7 +121,7 @@ export function DeveloperWarningSourceDisplay({
 
   return (
     <div className={classes.validationErrorContext}>
-      In {/* @ts-expect-error RRv5 types are jank */}
+      In
       <Link className={classes.link} to={DataStorePaths.Schema()}>
         Schema
       </Link>
@@ -140,7 +140,7 @@ export function DeveloperSourceDisplay(props: { error: DeveloperError }) {
     <div>
       {ve.source === DeveloperError_Source.SCHEMA && (
         <div className={classes.validationErrorContext}>
-          In {/* @ts-expect-error RRv5 types are jank */}
+          In
           <Link className={classes.link} to={DataStorePaths.Schema()}>
             Schema
           </Link>
@@ -149,7 +149,7 @@ export function DeveloperSourceDisplay(props: { error: DeveloperError }) {
       )}
       {ve.source === DeveloperError_Source.ASSERTION && (
         <div className={classes.validationErrorContext}>
-          In {/* @ts-expect-error RRv5 types are jank */}
+          In
           <Link className={classes.link} to={DataStorePaths.Assertions()}>
             Assertions
           </Link>
@@ -158,7 +158,7 @@ export function DeveloperSourceDisplay(props: { error: DeveloperError }) {
       )}
       {ve.source === DeveloperError_Source.RELATIONSHIP && (
         <div className={classes.validationErrorContext}>
-          In {/* @ts-expect-error RRv5 types are jank */}
+          In
           <Link className={classes.link} to={DataStorePaths.Relationships()}>
             Test Data
           </Link>
@@ -167,7 +167,7 @@ export function DeveloperSourceDisplay(props: { error: DeveloperError }) {
       )}
       {ve.source === DeveloperError_Source.VALIDATION_YAML && (
         <div className={classes.validationErrorContext}>
-          In {/* @ts-expect-error RRv5 types are jank */}
+          In
           <Link
             className={classes.link}
             to={DataStorePaths.ExpectedRelations()}

src/components/panels/problems.tsx

@@ -9,7 +9,7 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import clsx from "clsx";
 import "react-reflex/styles.css";
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 import { DataStorePaths } from "../../services/datastore";
 import { TourElementClass } from "../GuidedTour";
 import { PanelProps, PanelSummaryProps, useSummaryStyles } from "./base/common";
@@ -107,7 +107,7 @@ export function ProblemsPanel(props: PanelProps<PlaygroundPanelLocation>) {
             <Paper className={classes.errorContainer} key={`ir${index}`}>
               <div>
                 <div className={classes.validationErrorContext}>
-                  In {/* @ts-expect-error RRv5 TS definitions are jank */}
+                  In
                   <Link
                     className={classes.link}
                     to={DataStorePaths.Relationships()}