Cleanup types

app/components/docs-header/use-header-data.ts

@@ -1,4 +1,4 @@
-import { useLoaderData, useMatches } from "react-router";
+import { useLoaderData } from "react-router";
 import type { HeaderData } from "./data.server";
 import invariant from "tiny-invariant";
 
@@ -7,11 +7,3 @@ export function useHeaderData() {
   invariant(data && data.header, "Expected `header` in loader data");
   return data.header;
 }
-
-export function useHeaderDataFromMatches() {
-  let matches = useMatches();
-  let match = matches.find((m) => m.id === "docs" || m.id === "v6-docs");
-  invariant(match, `Expected "api" or "docs" parent route`);
-  invariant(match.data, `Expected data in "api" or "docs" parent route`);
-  return (match.data as any).header as HeaderData;
-}

app/components/docs-menu/menu-mobile.tsx

@@ -1,7 +1,6 @@
 import iconsHref from "~/icons.svg";
 import { useDoc } from "~/hooks/use-doc";
 import { DetailsMenu } from "~/modules/details-menu";
-import { Menu } from "./menu";
 
 export function NavMenuMobile({ children }: { children?: React.ReactNode }) {
   let doc = useDoc();
@@ -26,7 +25,6 @@ export function NavMenuMobile({ children }: { children?: React.ReactNode }) {
       </summary>
       <div className="absolute h-[66vh] w-full overflow-auto overscroll-contain border-b bg-white p-3 shadow-2xl dark:border-gray-700 dark:bg-gray-900 dark:shadow-black">
         {children}
-        <Menu />
       </div>
     </DetailsMenu>
   );

app/components/docs-menu/menu.tsx

@@ -1,30 +1,22 @@
 import * as React from "react";
-import { Link, useLoaderData } from "react-router";
+import { Link } from "react-router";
 import classNames from "classnames";
 
 import iconsHref from "~/icons.svg";
 
 import type { MenuDoc } from "~/modules/gh-docs/.server/docs";
-import type { DocsMenu, ReferenceMenu } from "./data.server";
-import invariant from "tiny-invariant";
 import { useNavigation } from "~/hooks/use-navigation";
 import { useDelayedValue } from "~/hooks/use-delayed-value";
 
-export function useMenuData() {
-  let { menu } = useLoaderData() as { menu: DocsMenu | ReferenceMenu };
-  invariant(menu, "Expected `menu` in loader data");
-  return menu;
-}
-
-export function Menu() {
-  let menu = useMenuData();
-
+export function Menu({ menu }: { menu?: MenuDoc[] }) {
   // github might be down but the menu but the doc could be cached in memory, so
   // prevent the whole page from blowing up and still render the doc
-  if (!menu) {
-    <div className="bold text-gray-300 dark:text-gray-400">
-      Failed to load menu
-    </div>;
+  if (menu === undefined) {
+    return (
+      <div className="bold text-gray-300 dark:text-gray-400">
+        Failed to load menu
+      </div>
+    );
   }
 
   return (
@@ -165,7 +157,7 @@ function MenuLink({ to, children }: { to: string; children: React.ReactNode }) {
       {slowNav && !isActive && (
         <svg
           aria-hidden
-          className="absolute -left-3 hidden h-4 w-4 animate-spin group-open:block"
+          className="absolute -left-1 hidden h-4 w-4 animate-spin group-open:block lg:-left-2"
         >
           <use href={`${iconsHref}#arrow-path`} />
         </svg>

app/pages/brand.tsx

@@ -1,7 +1,7 @@
-import type { MetaFunction } from "react-router";
 import classNames from "classnames";
+import type { Route } from "./+types/brand";
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [{ title: "React Router Assets and Branding Guidelines" }];
 };
 

app/pages/doc.tsx

@@ -1,28 +1,16 @@
-import invariant from "tiny-invariant";
-import { useLoaderData } from "react-router";
-
 import { getRepoDoc } from "~/modules/gh-docs/.server";
 import { CACHE_CONTROL } from "~/http";
 import { seo } from "~/seo";
 
-import type {
-  LoaderFunctionArgs,
-  MetaFunction,
-  HeadersArgs,
-} from "react-router";
+import type { HeadersArgs } from "react-router";
 
-import {
-  getDocMatchData,
-  getDocTitle,
-  getDocsSearch,
-  getRobots,
-  getRootMatchData,
-} from "~/ui/meta";
+import { getDocTitle, getDocsSearch, getRobots } from "~/ui/meta";
 import { DocLayout } from "~/components/doc-layout";
+import type { Route } from "./+types/doc";
 
 export { ErrorBoundary } from "~/components/doc-error-boundary";
 
-export let loader = async ({ params }: LoaderFunctionArgs) => {
+export let loader = async ({ params }: Route.LoaderArgs) => {
   let ref = params.ref || "main";
   let slug = params["*"]?.endsWith("/changelog")
     ? "CHANGELOG"
@@ -38,15 +26,9 @@ export function headers({ parentHeaders }: HeadersArgs) {
   return parentHeaders;
 }
 
-export const meta: MetaFunction<typeof loader> = ({
-  data,
-  matches,
-  params,
-}) => {
-  invariant(data, "Expected data");
-
-  let doc = getDocMatchData(matches);
-  let rootMatch = getRootMatchData(matches);
+export const meta: Route.MetaFunction = ({ data, matches, params }) => {
+  let [rootMatch, docMatch] = matches;
+  let doc = docMatch.data;
 
   let title = getDocTitle(doc, data.doc.attrs.title);
 
@@ -59,11 +41,10 @@ export const meta: MetaFunction<typeof loader> = ({
   return [
     ...meta,
     ...getDocsSearch(params.ref),
-    ...getRobots(rootMatch.isProductionHost, doc),
+    ...getRobots(rootMatch.data.isProductionHost, doc),
   ];
 };
 
-export default function DocPage() {
-  let { doc } = useLoaderData<typeof loader>();
-  return <DocLayout doc={doc} />;
+export default function DocPage({ loaderData }: Route.ComponentProps) {
+  return <DocLayout doc={loaderData.doc} />;
 }

app/pages/docs-home.tsx

@@ -1,27 +1,21 @@
-import type { HeadersArgs, MetaFunction } from "react-router";
+import type { HeadersArgs } from "react-router";
 import { Link } from "react-router";
 import classNames from "classnames";
 import { CACHE_CONTROL } from "~/http";
-import {
-  getDocsSearch,
-  getDocTitle,
-  getDocMatchData,
-  getRobots,
-  getRootMatchData,
-} from "~/ui/meta";
+import { getDocsSearch, getDocTitle, getRobots } from "~/ui/meta";
 import { seo } from "~/seo";
-import { useHeaderDataFromMatches } from "~/components/docs-header/use-header-data";
+import type { Route } from "./+types/docs-home";
 
 export function headers({ parentHeaders }: HeadersArgs) {
   parentHeaders.set("Cache-Control", CACHE_CONTROL.doc);
   return parentHeaders;
 }
 
-export const meta: MetaFunction = ({ matches, params }) => {
-  let docs = getDocMatchData(matches);
-  let rootMatch = getRootMatchData(matches);
+export const meta: Route.MetaFunction = ({ matches, params }) => {
+  let [rootMatch, docMatch] = matches;
+  let doc = docMatch.data;
 
-  let title = getDocTitle(docs, "Docs");
+  let title = getDocTitle(doc, "Docs");
 
   let [meta] = seo({
     title: title,
@@ -32,15 +26,16 @@ export const meta: MetaFunction = ({ matches, params }) => {
   return [
     ...meta,
     ...getDocsSearch(params.ref),
-    ...getRobots(rootMatch.isProductionHost, docs),
+    ...getRobots(rootMatch.data.isProductionHost, doc),
   ];
 };
 
-export default function Index() {
-  let { hasAPIDocs } = useHeaderDataFromMatches();
+export default function Index({ matches }: Route.ComponentProps) {
+  const { data } = matches[1];
+
   return (
     <div className="px-4 pb-4 pt-8 lg:mr-4 xl:pl-0">
-      {hasAPIDocs ? <V7 /> : <V6 />}
+      {data.header.hasAPIDocs ? <V7 /> : <V6 />}
     </div>
   );
 }

app/pages/docs-index.tsx

@@ -1,6 +1,7 @@
-import { type LoaderFunctionArgs, redirect } from "react-router";
+import { redirect } from "react-router";
+import type { Route } from "./+types/docs-index";
 
-export function loader({ request }: LoaderFunctionArgs) {
+export function loader({ request }: Route.LoaderArgs) {
   let url = new URL(request.url);
   return redirect(url.pathname + "/home");
 }

app/pages/docs-layout.tsx

@@ -1,4 +1,3 @@
-import type { LinksFunction, LoaderFunctionArgs } from "react-router";
 import { Outlet } from "react-router";
 import classNames from "classnames";
 
@@ -10,12 +9,13 @@ import { NavMenuDesktop } from "~/components/docs-menu/menu-desktop";
 import { NavMenuMobile } from "~/components/docs-menu/menu-mobile";
 import { loadDocsMenu } from "~/components/docs-menu/data.server";
 import { Menu } from "~/components/docs-menu/menu";
+import type { Route } from "./+types/docs-layout";
 
-export let links: LinksFunction = () => {
+export let links: Route.LinksFunction = () => {
   return [{ rel: "stylesheet", href: docsStylesheet }];
 };
 
-export let loader = async ({ params }: LoaderFunctionArgs) => {
+export let loader = async ({ params }: Route.LoaderArgs) => {
   let { ref } = params;
 
   let [menu, header] = await Promise.all([
@@ -26,17 +26,20 @@ export let loader = async ({ params }: LoaderFunctionArgs) => {
   return { menu, header };
 };
 
-export default function DocsLayout() {
+export default function DocsLayout({ loaderData }: Route.ComponentProps) {
+  const { menu } = loaderData;
   return (
     <div className="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)] lg:m-auto lg:max-w-[90rem]">
       <div className="sticky top-0 z-20">
         <Header />
-        <NavMenuMobile />
+        <NavMenuMobile>
+          <Menu menu={menu} />
+        </NavMenuMobile>
       </div>
 
       <div className="block lg:flex">
         <NavMenuDesktop>
-          <Menu />
+          <Menu menu={menu} />
         </NavMenuDesktop>
         <div
           className={classNames(

app/pages/notfound.tsx

@@ -1,14 +1,14 @@
-import { type MetaFunction } from "react-router";
 import { Link, isRouteErrorResponse, useRouteError } from "react-router";
 import { CACHE_CONTROL } from "~/http";
+import type { Route } from "./+types/notfound";
 
 export let loader = async () => {
   // TODO: use `data` or whatever we end up with in single fetch instead of
   // throwing here
   throw new Response("Not Found", { status: 404 });
 };
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   let robots = "noindex, nofollow";
   return [
     { title: "Not Found | React Router" },

app/pages/redirect-v6-doc.tsx

@@ -1,8 +1,9 @@
-import { redirect, type LoaderFunctionArgs } from "react-router";
+import { redirect } from "react-router";
 import { getRepoTags } from "~/modules/gh-docs/.server";
 import * as semver from "semver";
+import type { Route } from "./+types/redirect-v6-doc";
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
   let url = new URL(request.url);
   let [, s, ...rest] = url.pathname.split("/");
 

app/pages/redirect-v7-doc.tsx

@@ -1,8 +1,9 @@
-import { redirect, type LoaderFunctionArgs } from "react-router";
+import { redirect } from "react-router";
 import { getRepoTags } from "~/modules/gh-docs/.server";
 import * as semver from "semver";
+import type { Route } from "./+types/redirect-v7-doc";
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
   let url = new URL(request.url);
   let [, s, ...rest] = url.pathname.split("/");
 

app/pages/splash.tsx

@@ -1,10 +1,9 @@
-import { type MetaFunction } from "react-router";
-import { Await, Link, useLoaderData } from "react-router";
+import { Await, Link } from "react-router";
 import { Suspense } from "react";
 
 import iconsHref from "~/icons.svg";
 import { getStats } from "~/modules/stats";
-import { getRootMatchData } from "~/ui/meta";
+import type { Route } from "./+types/splash";
 
 export let loader = async () => {
   const stats = await getStats();
@@ -15,8 +14,8 @@ export let loader = async () => {
   return { stats };
 };
 
-export const meta: MetaFunction = ({ matches }) => {
-  let { isProductionHost } = getRootMatchData(matches);
+export const meta: Route.MetaFunction = ({ matches }) => {
+  let { isProductionHost } = matches[0].data;
   let robots = isProductionHost ? "index,follow" : "noindex, nofollow";
   return [
     { title: "React Router Official Documentation" },
@@ -105,8 +104,7 @@ function Logo() {
   );
 }
 
-export default function Home() {
-  let { stats } = useLoaderData<typeof loader>();
+export default function Home({ loaderData }: Route.ComponentProps) {
   return (
     <div className="flex min-h-full w-full flex-col items-center justify-center gap-12 p-4 lg:p-8">
       <h1 className="mt-16 w-full">
@@ -150,10 +148,9 @@ export default function Home() {
       </div>
       <div>
         <Suspense fallback={null}>
-          <Await resolve={stats} errorElement={null}>
+          <Await resolve={loaderData.stats} errorElement={null}>
             {(stats) => (
               <ul className="mt-8 grid grid-cols-1 gap-8 md:grid md:grid-cols-2">
-                {/* @ts-expect-error -- these types didn't make it into RR7, this needs to be fixed */}
                 {stats.map(({ svgId, count, label }) => (
                   <li key={svgId} className="flex gap-4">
                     <svg

app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderFunctionArgs } from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
 import {
   Link,
   Links,
@@ -19,8 +19,9 @@ import iconsHref from "~/icons.svg";
 import stylesheet from "~/styles/tailwind.css?url";
 import { useRef } from "react";
 import { useCodeBlockCopyButton } from "./ui/utils";
+import type { Route } from "./+types/root";
 
-export const links: LinksFunction = () => [
+export const links: Route.LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];