Upgrade to Remix 2.12.0 (#118)

* Upgrade to Remix 2.12.0 * Remove leftover import
remix-run · Sep 12, 2024 · 78f5805 · 78f5805
1 parent 9e4d61a
commit 78f5805
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 122 deletions.
diff --git a/app/modules/color-scheme/components.tsx b/app/modules/color-scheme/components.tsx
@@ -1,17 +1,17 @@
 import { useLayoutEffect, useMemo } from "react";
-import type { SerializeFrom } from "@remix-run/node";
+import type { UIMatch } from "@remix-run/react";
 import { useMatches, useNavigation } from "@remix-run/react";
 import type { loader as rootLoader } from "../../root";
 import type { ColorScheme } from "./types";
 
 export function useColorScheme(): ColorScheme {
-  let rootLoaderData = useMatches()[0].data as SerializeFrom<typeof rootLoader>;
+  let rootMatch = useMatches()[0] as UIMatch<typeof rootLoader>;
   let { formData } = useNavigation();
   let optimisticColorScheme =
     formData && formData.has("colorScheme")
       ? (formData.get("colorScheme") as ColorScheme)
       : null;
-  return optimisticColorScheme || rootLoaderData.colorScheme;
+  return optimisticColorScheme || rootMatch.data.colorScheme;
 }
 
 export function ColorSchemeScript() {

diff --git a/app/routes/$lang.$ref.$.tsx b/app/routes/$lang.$ref.$.tsx
@@ -1,11 +1,10 @@
 import type {
   LoaderFunctionArgs,
-  SerializeFrom,
   MetaFunction,
   HeadersFunction,
 } from "@remix-run/node";
 import * as React from "react";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import {
   isRouteErrorResponse,
   useLoaderData,
@@ -34,7 +33,7 @@ export let loader = async ({ params, request }: LoaderFunctionArgs) => {
       : `docs/${params["*"] || "index"}`;
     let doc = await getRepoDoc(params.ref, slug);
     if (!doc) throw null;
-    return json({ doc }, { headers: { "Cache-Control": CACHE_CONTROL.doc } });
+    return data({ doc }, { headers: { "Cache-Control": CACHE_CONTROL.doc } });
   } catch (_) {
     throw new Response("", { status: 404 });
   }
@@ -133,7 +132,7 @@ export default function DocPage() {
   );
 }
 
-function LargeOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
+function LargeOnThisPage({ doc }: { doc: Doc }) {
   return (
     <div className="sticky top-36 order-1 mt-20 hidden max-h-[calc(100vh-9rem)] w-56 flex-shrink-0 self-start overflow-y-auto pb-10 xl:block">
       <nav className="mb-3 flex items-center font-semibold">On this page</nav>
@@ -155,7 +154,7 @@ function LargeOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
   );
 }
 
-function SmallOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
+function SmallOnThisPage({ doc }: { doc: Doc }) {
   return (
     <details className="group flex flex-col lg:mt-4 xl:hidden">
       <summary className="_no-triangle flex cursor-pointer select-none items-center gap-2 border-b border-gray-50 bg-white px-2 py-3 text-sm font-medium hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700">

diff --git a/app/routes/$lang.$ref._index.tsx b/app/routes/$lang.$ref._index.tsx
@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import classNames from "classnames";
 import semver from "semver";
@@ -21,7 +21,7 @@ export let loader = async ({ params, request }: LoaderFunctionArgs) => {
   if (is6dot4) {
     // const stats = await getStats();
     const stats = null;
-    return json({ is6dot4: true, stats });
+    return data({ is6dot4: true, stats });
   }
   return docLoader({ request, params, context: {} });
 };