Get those types (#313)

* Bump react router to pre-6

* update tsconfig and related files

* start using autogen types

.gitignore

@@ -8,6 +8,8 @@ node_modules
 /.yalc
 yalc.lock
 /.local.tgz
+.react-router/
 
 **/gh-docs/__fixture__/tar.tgz
-/NOTES.md
+/NOTES.md
+

app/routes.ts

@@ -1,4 +1,4 @@
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export const routes: RouteConfig = flatRoutes();
+export default flatRoutes() satisfies RouteConfig;

app/routes/$.tsx

@@ -1,7 +1,7 @@
 import { handleRedirects } from "~/lib/http.server";
-import type { LoaderFunctionArgs } from "react-router";
 import { data, redirect } from "react-router";
 import { getRepoDoc } from "~/lib/gh-docs";
+import type { Route } from "./+types/$";
 
 // We use the catch-all route to attempt to find a doc for the given path. If a
 // doc isn't found, we return a 404 as expected. However we also log those
@@ -48,7 +48,7 @@ function handleStaticFileRequests(param: string | undefined) {
   }
 }
 
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
   // throw data({ butts: true }, { status: 401 });
   handleRedirects(new URL(request.url).pathname);
   handleStaticFileRequests(params["*"]);

app/routes/_extras.blog.$slug.tsx

@@ -1,38 +1,27 @@
-import type {
-  LinksFunction,
-  LoaderFunctionArgs,
-  MetaFunction,
-} from "react-router";
-import { useLoaderData } from "react-router";
-import invariant from "tiny-invariant";
-
 import { getBlogPost } from "~/lib/blog.server";
 import mdStyles from "~/styles/md.css?url";
 import { useRef } from "react";
 import { useDelegatedReactRouterLinks } from "~/ui/delegate-links";
 
 import { Subscribe } from "~/ui/subscribe";
 import cx from "clsx";
+import type { Route } from "./+types/_extras.blog.$slug";
 
-export const loader = async ({ params, request }: LoaderFunctionArgs) => {
-  let { slug } = params;
-  invariant(!!slug, "Expected slug param");
+export const loader = async ({ params, request }: Route.LoaderArgs) => {
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
 
-  let post = await getBlogPost(slug);
+  let post = await getBlogPost(params.slug);
 
   return { siteUrl, post };
 };
 
-export const links: LinksFunction = () => [
+export const links: Route.LinksFunction = () => [
   { rel: "stylesheet", href: mdStyles },
 ];
 
-export const meta: MetaFunction<typeof loader> = (args) => {
-  let { data, params } = args;
+export function meta({ data, params }: Route.MetaArgs) {
   let { slug } = params;
-  invariant(!!slug, "Expected slug param");
 
   let { siteUrl, post } = data || {};
   if (!post) {
@@ -73,10 +62,10 @@ export const meta: MetaFunction<typeof loader> = (args) => {
       content: socialImageUrl ? post.imageAlt : undefined,
     },
   ];
-};
+}
 
-export default function BlogPost() {
-  let { post } = useLoaderData<typeof loader>();
+export default function BlogPost({ loaderData }: Route.ComponentProps) {
+  let { post } = loaderData;
   let mdRef = useRef<HTMLDivElement>(null);
   useDelegatedReactRouterLinks(mdRef);
 

app/routes/_extras.blog._index.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
-import type { MetaFunction } from "react-router";
-import { useLoaderData, Link } from "react-router";
+import { Link } from "react-router";
 import { Subscribe } from "~/ui/subscribe";
 import { getBlogPostListings } from "~/lib/blog.server";
+import type { Route } from "./+types/_extras.blog._index";
 
 export const loader = async () => {
   return { posts: await getBlogPostListings() };
 };
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [
     { title: "Remix Blog" },
     {
@@ -18,11 +18,10 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export default function Blog() {
-  const data = useLoaderData<typeof loader>();
-  const [latestPost, ...posts] = data.posts;
+export default function Blog({ loaderData }: Route.ComponentProps) {
+  const [latestPost, ...posts] = loaderData.posts;
 
-  let featuredPosts = data.posts.filter((post) => post.featured);
+  let featuredPosts = loaderData.posts.filter((post) => post.featured);
 
   return (
     <main

app/routes/_extras.resources.$.tsx

@@ -1,15 +1,14 @@
 // Pull full readme for this page from GitHub
-import { type LoaderFunctionArgs, type MetaFunction } from "react-router";
-import { useLoaderData } from "react-router";
 import invariant from "tiny-invariant";
 import { getResource } from "~/lib/resources.server";
 import { InitCodeblock, ResourceTag } from "~/ui/resources";
 import { octokit } from "~/lib/github.server";
 import "~/styles/docs.css";
 import iconsHref from "~/icons.svg";
 import { getMeta } from "~/lib/meta";
+import type { Route } from "./+types/_extras.resources.$";
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
   const resourceSlug = params["*"];
   invariant(resourceSlug, "resourceSlug is required");
 
@@ -25,8 +24,8 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   return { siteUrl, resource };
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  let { siteUrl, resource } = data || {};
+export function meta({ data }: Route.MetaArgs) {
+  let { siteUrl, resource } = data;
   if (!resource) {
     return [{ title: "404 Not Found | Remix" }];
   }
@@ -39,10 +38,9 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     siteUrl,
     image: socialImageUrl,
   });
-};
+}
 
-export default function ResourcePage() {
-  let { resource } = useLoaderData<typeof loader>();
+export default function ResourcePage({ loaderData }: Route.ComponentProps) {
   let {
     description,
     repoUrl,
@@ -51,7 +49,7 @@ export default function ResourcePage() {
     starsFormatted,
     tags,
     readmeHtml,
-  } = resource;
+  } = loaderData.resource;
 
   return (
     <main className="flex flex-1 flex-col items-center px-8 lg:container">

app/routes/_extras.showcase.tsx

@@ -1,21 +1,20 @@
-import type { LoaderFunctionArgs, MetaFunction } from "react-router";
-import { useLoaderData } from "react-router";
 import { Fragment, forwardRef, useRef } from "react";
 import type { ShowcaseExample } from "~/lib/showcase.server";
 import { showcaseExamples } from "~/lib/showcase.server";
 import { clsx } from "clsx";
 import { useHydrated } from "~/ui/primitives/utils";
+import type { Route } from "./+types/_extras.showcase";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
 
   return { siteUrl, showcaseExamples };
 };
 
 // Stolen from _marketing._index.tsx. eventually would like to replace
-export const meta: MetaFunction<typeof loader> = (args) => {
-  let { siteUrl } = args.data || {};
+export function meta({ data }: Route.MetaArgs) {
+  let { siteUrl } = data;
   let title = "Remix Showcase";
   let image = siteUrl ? `${siteUrl}/img/og.1.jpg` : null;
   let description = "See who is using Remix to build better websites.";
@@ -34,10 +33,9 @@ export const meta: MetaFunction<typeof loader> = (args) => {
     { name: "twitter:description", content: description },
     { name: "twitter:image", content: image },
   ];
-};
+}
 
-export default function Showcase() {
-  let { showcaseExamples } = useLoaderData<typeof loader>();
+export default function Showcase({ loaderData }: Route.ComponentProps) {
   // Might be a bit silly to declare here and then prop-drill, but was a little concerned about a needless useEffect+useState for every card
   let isHydrated = useHydrated();
 
@@ -56,7 +54,7 @@ export default function Showcase() {
         </p>
       </div>
       <ul className="mt-8 grid w-full max-w-md grid-cols-1 gap-x-6 gap-y-10 self-center md:max-w-3xl md:grid-cols-2 lg:max-w-6xl lg:grid-cols-3 lg:gap-x-8">
-        {showcaseExamples.map((example, i) => {
+        {loaderData.showcaseExamples.map((example, i) => {
           let loading: ShowcaseTypes["loading"] = i < 6 ? "eager" : "lazy";
           return (
             <Fragment key={example.name}>

app/routes/_marketing._index.tsx

@@ -1,11 +1,6 @@
-import { useLoaderData, data } from "react-router";
-import type {
-  MetaFunction,
-  HeadersFunction,
-  LoaderFunctionArgs,
-} from "react-router";
+import { type HeadersFunction, data } from "react-router";
 import { OutlineButtonLink, PrimaryButtonLink } from "~/ui/buttons";
-import { getMarkdownTutPage } from "~/lib/mdtut.server";
+import { getMarkdownTutPage, type Prose } from "~/lib/mdtut.server";
 import "~/styles/index.css";
 import { Red } from "~/ui/gradients";
 import { BigTweet, TweetCarousel, tweets } from "~/ui/twitter-cards";
@@ -14,18 +9,19 @@ import invariant from "tiny-invariant";
 import { Fragment } from "react";
 import { getMeta } from "~/lib/meta";
 import { CACHE_CONTROL } from "~/lib/http.server";
+import type { Route } from "./+types/_marketing._index";
 
-export const meta: MetaFunction<typeof loader> = (args) => {
-  let { siteUrl } = args.data || {};
+export function meta({ data }: Route.MetaArgs) {
+  let { siteUrl } = data;
   let title = "Remix - Build Better Websites";
   let image = siteUrl ? `${siteUrl}/img/og.1.jpg` : undefined;
   let description =
     "Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.";
 
   return getMeta({ title, description, siteUrl, image });
-};
+}
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   let [[sample], [sampleSm], [, mutations], [, errors]] = await Promise.all([
     getMarkdownTutPage("marketing/sample/sample.md"),
     getMarkdownTutPage("marketing/sample-sm/sample.md"),
@@ -58,12 +54,12 @@ export const headers: HeadersFunction = ({ loaderHeaders }) => {
   return loaderHeaders;
 };
 
-export default function Index() {
-  let { mutations, errors } = useLoaderData<typeof loader>();
+export default function Index({ loaderData }: Route.ComponentProps) {
+  let { mutations, errors, sample, sampleSm } = loaderData;
   return (
     <div x-comp="Index">
       <div className="h-8" />
-      <Hero />
+      <Hero sample={sample} sampleSm={sampleSm} />
       <div className="h-32" />
       <section>
         <h2 className="sr-only">Testimonials</h2>
@@ -77,8 +73,7 @@ export default function Index() {
   );
 }
 
-function Hero() {
-  let { sample, sampleSm } = useLoaderData<typeof loader>();
+function Hero({ sample, sampleSm }: { sample: Prose; sampleSm: Prose }) {
   return (
     <Fragment>
       <h1 className="sr-only">Welcome to Remix</h1>

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

@@ -2,30 +2,25 @@ import * as React from "react";
 import {
   Link,
   isRouteErrorResponse,
-  useLoaderData,
   useMatches,
   useParams,
   useRouteError,
   data,
+  useLoaderData,
 } from "react-router";
-import type {
-  HeadersFunction,
-  LoaderFunctionArgs,
-  MetaFunction,
-} from "react-router";
+import type { HeadersFunction } from "react-router";
 import { CACHE_CONTROL, handleRedirects } from "~/lib/http.server";
 import invariant from "tiny-invariant";
 import type { Doc } from "~/lib/gh-docs";
 import { getRepoDoc } from "~/lib/gh-docs";
 import iconsHref from "~/icons.svg";
 import { useDelegatedReactRouterLinks } from "~/ui/delegate-links";
-import type { loader as docsLayoutLoader } from "~/routes/docs.$lang.$ref";
-import type { loader as rootLoader } from "~/root";
 import { getMeta } from "~/lib/meta";
 import { useEffect, useRef, useState } from "react";
 import cx from "clsx";
+import type { Route } from "./+types/docs.$lang.$ref.$";
 
-export async function loader({ params, request }: LoaderFunctionArgs) {
+export async function loader({ params, request }: Route.LoaderArgs) {
   let url = new URL(request.url);
   let baseUrl = url.protocol + "//" + url.host;
   let siteUrl = baseUrl + url.pathname;
@@ -59,21 +54,9 @@ export const headers: HeadersFunction = ({ loaderHeaders }) => {
   return headers;
 };
 
-const LAYOUT_LOADER_KEY = "routes/docs.$lang.$ref";
-
-type Loader = typeof loader;
-type MatchLoaders = {
-  [LAYOUT_LOADER_KEY]: typeof docsLayoutLoader;
-  root: typeof rootLoader;
-};
-
-export const meta: MetaFunction<Loader, MatchLoaders> = (args) => {
-  let { data } = args;
-
-  let parentData = args.matches.find(
-    (match) => match.id === LAYOUT_LOADER_KEY,
-  )?.data;
-  let rootData = args.matches.find((match) => match.id === "root")?.data;
+export function meta({ data, matches, params }: Route.MetaArgs) {
+  let rootData = matches[0].data;
+  let parentData = matches[1].data;
   invariant(
     parentData && "latestVersion" in parentData,
     "No parent data found",
@@ -118,16 +101,16 @@ export const meta: MetaFunction<Loader, MatchLoaders> = (args) => {
     additionalMeta: [
       { name: "og:type", content: "article" },
       { name: "og:site_name", content: "Remix" },
-      { name: "docsearch:language", content: args.params.lang || "en" },
-      { name: "docsearch:version", content: args.params.ref || "v1" },
+      { name: "docsearch:language", content: params.lang || "en" },
+      { name: "docsearch:version", content: params.ref || "v1" },
       { name: "robots", content: robots },
       { name: "googlebot", content: robots },
     ],
   });
-};
+}
 
 export default function DocPage() {
-  let { doc } = useLoaderData<typeof loader>();
+  const { doc } = useLoaderData<typeof loader>();
   let ref = React.useRef<HTMLDivElement>(null);
   useDelegatedReactRouterLinks(ref);
   let matches = useMatches();

app/routes/docs.$lang._index.ts

@@ -1,5 +1,6 @@
-import { redirect, type LoaderFunctionArgs } from "react-router";
-export async function loader({ params }: LoaderFunctionArgs) {
-  const { lang } = params;
-  return redirect(`/docs/${lang}/main`);
+import { redirect } from "react-router";
+import type { Route } from "./+types/docs.$lang._index";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  return redirect(`/docs/${params.lang}/main`);
 }