Switch to routes.ts

_redirects

@@ -61,4 +61,4 @@
 /docs/future/presets                  /docs/guides/presets                 302  
 /docs/future/server-bundles           /docs/guides/server-bundles          302
 /docs/future/spa-mode                 /docs/guides/spa-mode                302
-/docs/future/vite                     /docs/guides/vite                    302
+/docs/future/vite                     /docs/guides/vite                    302

app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@remix-run/route-config";
+import { flatRoutes } from "@remix-run/fs-routes";
+
+export const routes: RouteConfig = flatRoutes();

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

@@ -20,3 +20,14 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
   return { error: null, ok: true };
 };
+
+// This is less than ideal, but adding so we can remove SerializeFrom
+export type NewsletterActionData =
+  | {
+      error: string;
+      ok: boolean;
+    }
+  | {
+      error: any;
+      ok: boolean;
+    };

app/routes/conf.2022._inner.schedule.may-25.tsx

@@ -1,5 +1,4 @@
-import type { LoaderFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { data } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
 import { getSchedule } from "~/lib/conf2022.server";
@@ -16,18 +15,16 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-type LoaderData = { scheduleItems: Awaited<ReturnType<typeof getSchedule>> };
-
-export const loader: LoaderFunction = async () => {
+export async function loader() {
   const scheduleItems = await getSchedule();
-  return json<LoaderData>(
+  return data(
     { scheduleItems },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );
-};
+}
 
 export default function May25Schedule() {
-  const data = useLoaderData<LoaderData>();
+  const data = useLoaderData<typeof loader>();
   return (
     <div>
       <div>

app/routes/conf.2022._inner.schedule.may-26.tsx

@@ -1,7 +1,5 @@
 import { Link, useLoaderData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
-import type { LoaderFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
 import { Discord } from "~/ui/icons";
 
 export const meta: MetaFunction = () => {
@@ -201,18 +199,16 @@ const activities: Array<Activity> = [
   },
 ];
 
-type LoaderData = { activities: Array<Activity> };
-
-export const loader: LoaderFunction = async () => {
-  return json<LoaderData>({
+export async function loader() {
+  return {
     activities: activities.sort(() => Math.random() - 0.5),
-  });
-};
+  };
+}
 
 export default function May25Schedule() {
   // Our internal serialization type struggles a bit with the union/intersection
   // type we use for Activity
-  const { activities } = useLoaderData() as LoaderData;
+  const { activities } = useLoaderData<typeof loader>();
   return (
     <div>
       <p>

app/ui/subscribe.tsx

@@ -3,8 +3,7 @@ import { useFetcher } from "@remix-run/react";
 import type { FormProps, FetcherWithComponents } from "@remix-run/react";
 import { Button, Input } from "./buttons";
 import cx from "clsx";
-import type { action } from "~/routes/[_]actions.newsletter";
-import type { SerializeFrom } from "@remix-run/node";
+import type { NewsletterActionData } from "~/routes/[_]actions.newsletter";
 
 // TODO: look into if v3_fetcherPersist simplifies this component
 
@@ -32,7 +31,7 @@ function Subscribe({
 }
 
 function SubscribeProvider({ children }: { children: React.ReactNode }) {
-  let subscribe = useFetcher<typeof action>();
+  let subscribe = useFetcher<NewsletterActionData>();
   let inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
@@ -49,7 +48,7 @@ function SubscribeProvider({ children }: { children: React.ReactNode }) {
 }
 
 const SubscribeContext = React.createContext<null | {
-  fetcher: FetcherWithComponents<SerializeFrom<typeof action>>;
+  fetcher: FetcherWithComponents<NewsletterActionData>;
   inputRef: React.RefObject<HTMLInputElement>;
 }>(null);