Upgrade to React Router 7.9.6 (#369)

* Upgrade to 7.9.6

* useRouteLoaderData -> unstable_useRoute

* Fix type issue

* Fix lint issues

Author: brophdawg11

app/lib/color-scheme.tsx

@@ -1,13 +1,12 @@
 import { useMemo } from "react";
-import { useNavigation, useRouteLoaderData } from "react-router";
-import type { loader as rootLoader } from "~/root";
+import { unstable_useRoute as useRoute, useNavigation } from "react-router";
 import { useLayoutEffect } from "~/ui/primitives/utils";
 
 export type ColorScheme = "dark" | "light" | "system";
 
 export function useColorScheme(): ColorScheme {
-  let rootLoaderData = useRouteLoaderData<typeof rootLoader>("root");
-  let rootColorScheme = rootLoaderData?.colorScheme ?? "system";
+  let rootRoute = useRoute("root");
+  let rootColorScheme = rootRoute.loaderData?.colorScheme ?? "system";
 
   let { formData } = useNavigation();
   let optimisticColorScheme = formData?.has("colorScheme")

app/lib/md.server.ts

@@ -100,7 +100,7 @@ export async function loadPlugins() {
   const remarkCodeBlocksShiki: InternalPlugin<
     UnistNode.Root,
     UnistNode.Root
-  > = (options) => {
+  > = () => {
     let theme: ReturnType<typeof toShikiTheme>;
     let highlighterPromise: ReturnType<typeof getHighlighter>;
 

app/root.tsx

@@ -30,7 +30,7 @@ import { canUseDOM } from "./ui/primitives/utils";
 import { GlobalLoading } from "./ui/global-loading";
 import { type Route } from "./+types/root";
 
-const redirectOldDocs: Route.unstable_MiddlewareFunction = ({ request }) => {
+const redirectOldDocs: Route.MiddlewareFunction = ({ request }) => {
   const { pathname } = new URL(request.url);
 
   if (pathname === "/docs") {
@@ -74,15 +74,15 @@ const redirectOldDocs: Route.unstable_MiddlewareFunction = ({ request }) => {
   }
 };
 
-const redirectResources: Route.unstable_MiddlewareFunction = ({ request }) => {
+const redirectResources: Route.MiddlewareFunction = ({ request }) => {
   const { pathname, search } = new URL(request.url);
 
   if (pathname === "/resources" || pathname.startsWith("/resources/")) {
     throw redirect(`https://v2.remix.run/${pathname + search}`);
   }
 };
 
-export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
+export const middleware: Route.MiddlewareFunction[] = [
   redirectOldDocs,
   redirectResources,
 ];
@@ -144,7 +144,6 @@ interface DocumentProps {
   title?: string;
   forceDark?: boolean;
   darkBg?: string;
-  isDev?: boolean;
   noIndex: boolean;
   children: React.ReactNode;
 }
@@ -155,7 +154,6 @@ function Document({
   forceDark,
   darkBg,
   noIndex,
-  isDev,
 }: DocumentProps) {
   let colorScheme = useColorScheme();
   let matches = useMatches();
@@ -223,11 +221,7 @@ export default function App() {
   }
 
   return (
-    <Document
-      noIndex={noIndex}
-      forceDark={forceDark}
-      isDev={process.env.NODE_ENV === "development"}
-    >
+    <Document noIndex={noIndex} forceDark={forceDark}>
       <Outlet />
       <img
         src={iconsHref}

app/routes/[_]actions.newsletter.tsx

@@ -1,7 +1,7 @@
 import { data } from "react-router";
 import { subscribeToNewsletter } from "~/lib/convertkit";
 import { requirePost } from "~/lib/http.server";
-import type { Route, Info } from "./+types/[_]actions.newsletter";
+import type { Route } from "./+types/[_]actions.newsletter";
 
 export async function action({ request }: Route.ActionArgs) {
   requirePost(request);
@@ -26,5 +26,3 @@ export async function action({ request }: Route.ActionArgs) {
 
   return { error: null, ok: true };
 }
-
-export type NewsletterActionData = Info["actionData"];

app/routes/_marketing._index.tsx

@@ -99,13 +99,11 @@ function Hero({ sample, sampleSm }: { sample: Prose; sampleSm: Prose }) {
             <div className="h-9 xl:h-10" />
             <div className="xl: flex flex-col gap-4 xl:flex-row">
               <PrimaryButtonLink
-                prefetch="intent"
                 to="/docs/start/quickstart"
                 className="w-full xl:order-1 xl:w-60"
                 children="Get Started"
               />
               <OutlineButtonLink
-                prefetch="intent"
                 to="/docs"
                 className="w-full xl:w-60"
                 children="Read the Docs"

app/routes/conf.2022._index.tsx

@@ -27,6 +27,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     .map(
       ({
         // @ts-expect-error -- type is typed wrong
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         bio,
         ...s
       }) => s,

app/routes/conf.2023.tsx

@@ -66,7 +66,7 @@ export default function ConfTwentyTwentyThree() {
     <>
       {showTopBanner ? <TopBanner /> : null}
       <div className="__layout flex h-full flex-1 flex-col bg-black text-white">
-        <Header hasTopBanner={showTopBanner} />
+        <Header />
         <main className="flex flex-1 flex-col" tabIndex={-1}>
           <Outlet />
         </main>
@@ -128,7 +128,7 @@ function SignUp() {
   );
 }
 
-function Header({ hasTopBanner }: { hasTopBanner?: boolean }) {
+function Header() {
   let location = useLocation();
   let isConfHome =
     location.pathname === "/conf" || location.pathname === "/conf/2023";

app/routes/jam/pages/2025.tsx

@@ -10,7 +10,7 @@ import ogImageSrc from "../images/og-thumbnail-1.jpg";
 import iconsHref from "~/icons.svg";
 
 import type { Route } from "./+types/2025";
-import type { NewsletterActionData } from "~/routes/[_]actions.newsletter";
+import type { action as newsletterAction } from "~/routes/[_]actions.newsletter";
 
 type EventStatus = "before" | "live" | "after";
 
@@ -186,7 +186,7 @@ function FadeInBadge({
 }
 
 function NewsletterSignup({ className }: { className?: string }) {
-  const subscribe = useFetcher<NewsletterActionData>();
+  const subscribe = useFetcher<typeof newsletterAction>();
   const { isSuccessful, isError, error } = getSubscribeStatus(subscribe);
 
   return (

app/ui/homepage-scroll-experience.tsx

@@ -319,23 +319,11 @@ function MutationNetwork() {
       <div className="w-4/5 pb-10">
         <Network>
           <Resource name="POST new" start={0} size={40} />
-          <Resource
-            name="GET invoices"
-            start={40}
-            size={10}
-            cancel
-            hideUntilStart
-          />
-          <Resource
-            name="GET 102000"
-            start={40}
-            size={10}
-            cancel
-            hideUntilStart
-          />
-          <Resource name="POST new" start={50} size={20} hideUntilStart />
-          <Resource name="GET invoices" start={70} size={20} hideUntilStart />
-          <Resource name="GET 102000" start={70} size={15} hideUntilStart />
+          <Resource name="GET invoices" start={40} size={10} cancel />
+          <Resource name="GET 102000" start={40} size={10} cancel />
+          <Resource name="POST new" start={50} size={20} />
+          <Resource name="GET invoices" start={70} size={20} />
+          <Resource name="GET 102000" start={70} size={15} />
         </Network>
       </div>
     </div>
@@ -711,13 +699,11 @@ function Resource({
   size,
   start,
   cancel,
-  hideUntilStart,
 }: {
   name: string;
   size: number;
   start: number;
   cancel?: boolean;
-  hideUntilStart?: boolean;
 }) {
   let actor = useActor();
   let progress = actor.progress * 100;

app/ui/subscribe.tsx

@@ -3,7 +3,7 @@ import { useFetcher } from "react-router";
 import type { FormProps } from "react-router";
 import { Button, Input } from "./buttons";
 import cx from "clsx";
-import type { NewsletterActionData } from "~/routes/[_]actions.newsletter";
+import type { action as newsletterAction } from "~/routes/[_]actions.newsletter";
 
 // TODO: look into if v3_fetcherPersist simplifies this component
 
@@ -31,7 +31,7 @@ function Subscribe({
 }
 
 function SubscribeProvider({ children }: { children: React.ReactNode }) {
-  let subscribe = useFetcher<NewsletterActionData>();
+  let subscribe = useFetcher<typeof newsletterAction>();
   let inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
@@ -48,7 +48,7 @@ function SubscribeProvider({ children }: { children: React.ReactNode }) {
 }
 
 const SubscribeContext = React.createContext<null | {
-  fetcher: ReturnType<typeof useFetcher<NewsletterActionData>>;
+  fetcher: ReturnType<typeof useFetcher<typeof newsletterAction>>;
   inputRef: React.RefObject<HTMLInputElement>;
 }>(null);
 
@@ -94,6 +94,7 @@ const SubscribeInput = React.forwardRef<
 >(
   (
     {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children,
       className = "w-full sm:w-auto sm:flex-1 dark:placeholder-gray-500",
       ...props
@@ -153,7 +154,7 @@ function SubscribeSubmit({
 }
 
 export function getSubscribeStatus(
-  subscribe: ReturnType<typeof useFetcher<NewsletterActionData>>,
+  subscribe: ReturnType<typeof useFetcher<typeof newsletterAction>>,
 ) {
   let { isSuccessful } =
     subscribe.state === "idle" && subscribe.data?.ok