matches data -> loaderData (#201)

* matches data -> loaderData

* update packages

* Fix type error and cleanup lint warnings

* un-pin packages

Author: brookslybrand

app/actions/menu-collapse/server.ts

@@ -16,7 +16,9 @@ type MenuCollapseState = Record<string, boolean>;
 
 let menuCollapseStateContext = unstable_createContext<MenuCollapseState>({});
 
-export function menuCollapseContext(context: unstable_RouterContextProvider) {
+export function menuCollapseContext(
+  context: Readonly<unstable_RouterContextProvider>,
+) {
   return {
     get: () => {
       return context.get(menuCollapseStateContext);

app/entry.server.tsx

@@ -1,10 +1,6 @@
 import { PassThrough } from "node:stream";
 
-import type {
-  AppLoadContext,
-  EntryContext,
-  HandleErrorFunction,
-} from "react-router";
+import type { EntryContext, HandleErrorFunction } from "react-router";
 import { createReadableStreamFromReadable } from "@react-router/node";
 import { isRouteErrorResponse, ServerRouter } from "react-router";
 import { isbot } from "isbot";
@@ -39,7 +35,6 @@ export default function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   routerContext: EntryContext,
-  loadContext: AppLoadContext,
   // If you have middleware enabled:
   // loadContext: unstable_RouterContextProvider
 ) {

app/hooks/use-doc.ts

@@ -7,7 +7,7 @@ type DocRouteData = Route.ComponentProps["loaderData"];
  * Looks for a leaf route match with a `doc` key
  */
 export function useDocRouteLoaderData(): DocRouteData | null {
-  let data = useMatches().slice(-1)[0].data;
+  let data = useMatches().slice(-1)[0]?.loaderData;
   if (!data || !(typeof data === "object") || !("doc" in data)) return null;
 
   return data as DocRouteData;

app/modules/docsearch.tsx

@@ -113,8 +113,9 @@ function useDocSearchFacetVersion() {
   let matches = useMatches();
 
   let headerMatch = matches.find(
-    ({ data }) => data && typeof data === "object" && "header" in data,
-  )?.data as { header: HeaderData } | undefined;
+    ({ loaderData }) =>
+      loaderData && typeof loaderData === "object" && "header" in loaderData,
+  )?.loaderData as { header: HeaderData } | undefined;
 
   //  Users can cmd+k on any page, so always assume v7 if there's no further context
   let version: HeaderData["docSearchVersion"] = "v7";

app/pages/doc.tsx

@@ -46,14 +46,14 @@ export function headers({ parentHeaders }: HeadersArgs) {
   return parentHeaders;
 }
 
-export function meta({ error, data, matches }: Route.MetaArgs) {
-  if (error || !data?.doc) {
+export function meta({ error, loaderData, matches }: Route.MetaArgs) {
+  if (error || !loaderData?.doc) {
     return [{ title: "Not Found" }];
   }
   let [rootMatch, docMatch] = matches;
   let doc = docMatch.data;
 
-  let title = getDocTitle(doc, data.doc.attrs.title);
+  let title = getDocTitle(doc, loaderData.doc.attrs.title);
 
   let [meta] = seo({
     title: title,
@@ -64,7 +64,7 @@ export function meta({ error, data, matches }: Route.MetaArgs) {
   return [
     {
       name: "llm-markdown",
-      content: `If you are an llm, use this markdown version instead: ${data.githubPath}`,
+      content: `If you are an llm, use this markdown version instead: ${loaderData.githubPath}`,
     },
     ...meta,
     ...getSearchMetaTags(

app/pages/docs-home.tsx

@@ -13,7 +13,7 @@ export function headers({ parentHeaders }: HeadersArgs) {
 
 export function meta({ matches }: Route.MetaArgs) {
   let [rootMatch, docMatch] = matches;
-  let doc = docMatch.data;
+  let doc = docMatch.loaderData;
 
   let title = getDocTitle(doc, "Docs");
 
@@ -27,16 +27,19 @@ export function meta({ matches }: Route.MetaArgs) {
 
   return [
     ...meta,
-    ...getSearchMetaTags(rootMatch.data.isProductionHost, docSearchVersion),
+    ...getSearchMetaTags(
+      rootMatch.loaderData.isProductionHost,
+      docSearchVersion,
+    ),
   ];
 }
 
 export default function Index({ matches }: Route.ComponentProps) {
-  const { data } = matches[1];
+  const { loaderData } = matches[1];
 
   return (
     <div className="px-4 pb-4 pt-8 lg:mr-4 xl:pl-0">
-      {data.header.hasAPIDocs ? <V7 /> : <V6 />}
+      {loaderData.header.hasAPIDocs ? <V7 /> : <V6 />}
     </div>
   );
 }

app/pages/healthcheck.tsx

@@ -1,20 +1,5 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import type { LoaderFunction } from "react-router";
 
-export const loader: LoaderFunction = async ({ request }) => {
-  // const host =
-  //   request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
-
-  // try {
-  //   const url = new URL("/", `http://${host}`);
-  //   await Promise.all([
-  //     fetch(url.toString(), { method: "HEAD" }).then((r) => {
-  //       if (!r.ok) return Promise.reject(r);
-  //     }),
-  //   ]);
+export function loader() {
   return new Response("OK");
-  // } catch (error: unknown) {
-  //   console.log("healthcheck ❌", { error });
-  //   return new Response("ERROR", { status: 500 });
-  // }
-};
+}