fix: update useLoaderData usage

app/components/doc-route.tsx

@@ -1,8 +1,4 @@
-import type {
-  DataFunctionArgs,
-  SerializeFrom,
-  MetaFunction,
-} from "@remix-run/node";
+import type { LoaderArgs, MetaFunction, SerializeFrom } from "@remix-run/node";
 import * as React from "react";
 import { json, Response } from "@remix-run/node";
 import { useLoaderData, useParams } from "@remix-run/react";
@@ -14,7 +10,7 @@ import { seo } from "~/seo";
 import { useDelegatedReactRouterLinks } from "./delegate-markdown-links";
 import iconsHref from "~/icons.svg";
 
-export let loader = async ({ params, request }: DataFunctionArgs) => {
+export let loader = async ({ params, request }: LoaderArgs) => {
   await whyDoWeNotHaveGoodMiddleWareYetRyan(request);
 
   invariant(params.ref, "expected `ref` params");

app/modules/gh-docs/index.ts

@@ -6,7 +6,7 @@ import invariant from "tiny-invariant";
 export { validateParams } from "./params";
 export { getRepoTarballStream } from "./repo-tarball";
 
-export type { MenuDoc, Doc } from "./docs";
+export type { Doc } from "./docs";
 
 const REPO = process.env.SOURCE_REPO!;
 if (!REPO) throw new Error("Missing process.env.SOURCE_REPO");

app/root.tsx

@@ -1,8 +1,4 @@
-import type {
-  LinksFunction,
-  LoaderFunction,
-  MetaFunction,
-} from "@remix-run/node";
+import type { LinksFunction, LoaderArgs, MetaFunction } from "@remix-run/node";
 import {
   Link,
   Links,
@@ -28,26 +24,21 @@ export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
 };
 
-export const meta: MetaFunction = ({ data }: { data: LoaderData }) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return {
     title: "React Router",
     robots: data.isProductionHost ? "index,follow" : "noindex, nofollow",
     googlebot: data.isProductionHost ? "index,follow" : "noindex, nofollow",
   };
 };
 
-type LoaderData = {
-  colorScheme: "light" | "dark" | "system";
-  isProductionHost: boolean;
-};
-
-export let loader: LoaderFunction = async ({ request }) => {
+export let loader = async ({ request }: LoaderArgs) => {
   await whyDoWeNotHaveGoodMiddleWareYetRyan(request);
 
   let colorScheme = await parseColorScheme(request);
   let isProductionHost = isHost("reactrouter.com", request);
 
-  return json<LoaderData>(
+  return json(
     { colorScheme, isProductionHost },
     {
       headers: {

app/routes/$.tsx

@@ -1,8 +1,8 @@
-import type { LoaderFunction } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { Link, useCatch } from "@remix-run/react";
 import { whyDoWeNotHaveGoodMiddleWareYetRyan } from "~/http";
 
-export let loader: LoaderFunction = async ({ request }) => {
+export let loader = async ({ request }: LoaderArgs) => {
   await whyDoWeNotHaveGoodMiddleWareYetRyan(request);
   throw new Response("Not Found", { status: 404 });
 };

app/routes/$lang.$ref.tsx

@@ -1,5 +1,5 @@
+import type { LoaderArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import type { LoaderFunction } from "@remix-run/node";
 import * as React from "react";
 import {
   Form,
@@ -24,24 +24,13 @@ import {
   getRepoTags,
   validateParams,
 } from "~/modules/gh-docs";
-import type { Doc, MenuDoc } from "~/modules/gh-docs";
+import type { Doc } from "~/modules/gh-docs";
 import iconsHref from "~/icons.svg";
 import { DetailsMenu } from "~/modules/details-menu";
 import { getLatestVersion } from "~/modules/gh-docs/tags";
 import { useColorScheme } from "~/modules/color-scheme/components";
 
-type LoaderData = {
-  menu?: MenuDoc[];
-  versions: string[];
-  latestVersion: string;
-  releaseBranch: string;
-  branches: string[];
-  lang: string;
-  currentGitHubRef: string;
-  isLatest: boolean;
-};
-
-export let loader: LoaderFunction = async ({ params, request }) => {
+export let loader = async ({ params }: LoaderArgs) => {
   let { lang, ref, "*": splat } = params;
   invariant(lang, "expected `params.lang`");
   invariant(ref, "expected `params.ref`");
@@ -64,7 +53,7 @@ export let loader: LoaderFunction = async ({ params, request }) => {
   let latestVersion = getLatestVersion(tags);
   let isLatest = ref === releaseBranch || ref === latestVersion;
 
-  return json<LoaderData>({
+  return json({
     menu,
     versions: [getLatestVersion(tags)],
     latestVersion,
@@ -124,7 +113,7 @@ export default function DocsLayout() {
 }
 
 function VersionWarning() {
-  let { isLatest, branches, currentGitHubRef } = useLoaderData();
+  let { isLatest, branches, currentGitHubRef } = useLoaderData<typeof loader>();
 
   if (isLatest) return null;
 
@@ -373,7 +362,7 @@ function VersionSelect() {
     branches,
     currentGitHubRef,
     lang,
-  } = useLoaderData<LoaderData>();
+  } = useLoaderData<typeof loader>();
 
   // This is the same default, hover, focus style as the ColorScheme trigger
   const className =
@@ -540,7 +529,7 @@ function MenuLink({ to, children }: { to: string; children: React.ReactNode }) {
 }
 
 function Menu() {
-  let { menu } = useLoaderData<LoaderData>();
+  let { menu } = useLoaderData<typeof loader>();
   return menu ? (
     <nav>
       <ul>

app/routes/$lang.$ref/index.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import classNames from "classnames";
@@ -13,7 +13,7 @@ import iconsHref from "~/icons.svg";
 import type { Stats } from "~/modules/stats";
 import { getStats } from "~/modules/stats";
 
-export let loader: LoaderFunction = async ({ request, params }) => {
+export let loader = async ({ params, request }: LoaderArgs) => {
   let is6dot4 =
     params.ref === "local" ||
     params.ref === "main" ||

app/routes/index.tsx

@@ -1,6 +1,3 @@
-import type { LoaderFunction } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 
-export let loader: LoaderFunction = async () => {
-  return redirect(`/en/main`);
-};
+export let loader = async () => redirect(`/en/main`);