Revert "Update to React Router 7 pre.2"

This reverts commit 9ac7563.

.eslintrc.cjs

@@ -3,9 +3,9 @@
  */
 module.exports = {
   extends: [
-    // "@remix-run/eslint-config",
-    // "@remix-run/eslint-config/node",
-    // "@remix-run/eslint-config/jest-testing-library",
+    "@remix-run/eslint-config",
+    "@remix-run/eslint-config/node",
+    "@remix-run/eslint-config/jest-testing-library",
     "prettier",
   ],
   // we're using vitest which has a very similar API to jest

app/components/color-scheme-toggle.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import * as React from "react";
-import { Form, useLocation } from "react-router";
+import { Form, useLocation } from "@remix-run/react";
 import { useColorScheme } from "~/modules/color-scheme/components";
 import iconsHref from "~/icons.svg";
 import { DetailsMenu } from "~/modules/details-menu";

app/components/doc-error-boundary.tsx

@@ -1,4 +1,8 @@
-import { isRouteErrorResponse, useParams, useRouteError } from "react-router";
+import {
+  isRouteErrorResponse,
+  useParams,
+  useRouteError,
+} from "@remix-run/react";
 
 export function ErrorBoundary() {
   let error = useRouteError();

app/components/doc-layout.tsx

@@ -2,8 +2,9 @@ import { useRef } from "react";
 import { type Doc } from "~/modules/gh-docs/.server";
 import { useDelegatedReactRouterLinks } from "~/ui/delegate-markdown-links";
 import { LargeOnThisPage, SmallOnThisPage } from "./on-this-page";
+import { type SerializeFrom } from "@remix-run/node";
 
-export function DocLayout({ doc }: { doc: Doc }) {
+export function DocLayout({ doc }: { doc: SerializeFrom<Doc> }) {
   let ref = useRef<HTMLDivElement>(null);
   useDelegatedReactRouterLinks(ref);
 

app/components/docs-footer.tsx

@@ -1,4 +1,4 @@
-import { Link, useParams } from "react-router";
+import { Link, useParams } from "@remix-run/react";
 import { useDoc } from "~/hooks/use-doc";
 import iconsHref from "~/icons.svg";
 

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

@@ -1,7 +1,10 @@
+import { type SerializeFrom } from "@remix-run/node";
 import { getRepoBranches, getRepoTags } from "~/modules/gh-docs/.server";
 import { getLatestVersion } from "~/modules/gh-docs/.server/tags";
 
-export type HeaderData = Awaited<ReturnType<typeof getHeaderData>>;
+export type HeaderData = Awaited<
+  SerializeFrom<ReturnType<typeof getHeaderData>>
+>;
 
 export async function getHeaderData(lang: string, ref?: string) {
   let githubRef = ref || "main";

app/components/docs-header/docs-header.tsx

@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "react-router";
+import { Link, useNavigate } from "@remix-run/react";
 import iconsHref from "~/icons.svg";
 import { ColorSchemeToggle } from "../color-scheme-toggle";
 import classNames from "classnames";

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

@@ -1,9 +1,9 @@
-import { useLoaderData, useMatches } from "react-router";
+import { useLoaderData, useMatches } from "@remix-run/react";
 import type { HeaderData } from "./data.server";
 import invariant from "tiny-invariant";
 
 export function useHeaderData() {
-  let data = useLoaderData<{ header: HeaderData }>();
+  let data = useLoaderData() as { header: HeaderData };
   invariant(data && data.header, "Expected `header` in loader data");
   return data.header;
 }

app/components/docs-menu/data.server.ts

@@ -1,11 +1,16 @@
+import { type SerializeFrom } from "@remix-run/node";
 import {
   getRepoDocsMenu,
   getRepoDocsReferenceMenu,
 } from "~/modules/gh-docs/.server";
 
-export type GuidesMenu = Awaited<ReturnType<typeof loadGuidesMenu>>;
+export type GuidesMenu = Awaited<
+  SerializeFrom<ReturnType<typeof loadGuidesMenu>>
+>;
 
-export type ReferenceMenu = Awaited<ReturnType<typeof loadGuidesMenu>>;
+export type ReferenceMenu = Awaited<
+  SerializeFrom<ReturnType<typeof loadGuidesMenu>>
+>;
 
 export async function loadGuidesMenu(ref: string) {
   return getRepoDocsMenu(ref, "en");

app/components/docs-menu/menu.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link, useLoaderData } from "react-router";
+import { Link, useLoaderData } from "@remix-run/react";
 import classNames from "classnames";
 
 import iconsHref from "~/icons.svg";

app/components/nav-pill.tsx

@@ -1,4 +1,4 @@
-import { NavLink, useNavigation, useParams } from "react-router";
+import { NavLink, useNavigation, useParams } from "@remix-run/react";
 import classNames from "classnames";
 import { VersionSelect } from "./version-select";
 import { useHeaderData } from "./docs-header/use-header-data";

app/components/on-this-page.tsx

@@ -1,8 +1,9 @@
-import { Link } from "react-router";
+import { type SerializeFrom } from "@remix-run/node";
+import { Link } from "@remix-run/react";
 import { type Doc } from "~/modules/gh-docs/.server";
 import iconsHref from "~/icons.svg";
 
-export function LargeOnThisPage({ doc }: { doc: Doc }) {
+export function LargeOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
   return (
     <div className="sticky top-36 order-1 mt-20 hidden max-h-[calc(100vh-9rem)] w-56 min-w-min 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>
@@ -26,7 +27,7 @@ export function LargeOnThisPage({ doc }: { doc: Doc }) {
   );
 }
 
-export function SmallOnThisPage({ doc }: { doc: Doc }) {
+export function SmallOnThisPage({ doc }: { doc: SerializeFrom<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">

app/components/package-select.tsx

@@ -1,17 +1,17 @@
 import classNames from "classnames";
-import { Link, useLoaderData, useParams } from "react-router";
+import { Link, useLoaderData, useParams } from "@remix-run/react";
 import invariant from "tiny-invariant";
-
+import { type SerializeFrom } from "@remix-run/node";
 import iconsHref from "~/icons.svg";
 import { DetailsMenu } from "~/modules/details-menu";
 import { DetailsPopup } from "./details-popup";
 import { PopupLabel } from "./popup-label";
 import { type loadPackageNames } from "~/components/docs-menu/data.server";
 
-type Pkg = Awaited<ReturnType<typeof loadPackageNames>>;
+type Pkg = Awaited<SerializeFrom<ReturnType<typeof loadPackageNames>>>;
 
 export function PackageSelect() {
-  let { pkgs } = useLoaderData<{ pkgs: Pkg }>();
+  let { pkgs } = useLoaderData() as { pkgs: Pkg };
   invariant(pkgs, "Expected loaderData.pkgs");
 
   let { pkg } = useParams();

app/components/use-doc-layout-id.ts

@@ -1,4 +1,4 @@
-import { useMatches } from "react-router";
+import { useMatches } from "@remix-run/react";
 
 export function useDocLayoutId() {
   let matches = useMatches();

app/components/version-select.tsx

@@ -2,7 +2,7 @@ import iconsHref from "~/icons.svg";
 import { DetailsMenu } from "~/modules/details-menu";
 import { DetailsPopup } from "./details-popup";
 import { PopupLabel } from "./popup-label";
-import { Link } from "react-router";
+import { Link } from "@remix-run/react";
 import classNames from "classnames";
 import { useHeaderData } from "./docs-header/use-header-data";
 import { useDocLayoutId } from "./use-doc-layout-id";

app/components/version-warning.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router";
+import { Link } from "@remix-run/react";
 import { useHeaderData } from "./docs-header/use-header-data";
 
 export function VersionWarning() {

app/hooks/use-doc.ts

@@ -1,4 +1,4 @@
-import { useMatches } from "react-router";
+import { useMatches } from "@remix-run/react";
 import type { Doc } from "~/modules/gh-docs/.server";
 
 /**

app/hooks/use-navigation.ts

@@ -2,7 +2,7 @@ import {
   useLocation,
   useNavigation as useNavigation_,
   useResolvedPath,
-} from "react-router";
+} from "@remix-run/react";
 
 export function useNavigation(to?: string, end?: boolean) {
   let navigation_ = useNavigation_();

app/modules/color-scheme/components.tsx

@@ -1,12 +1,11 @@
 import { useLayoutEffect, useMemo } from "react";
-import { useMatches, useNavigation } from "react-router";
+import type { SerializeFrom } from "@remix-run/node";
+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 Awaited<
-    ReturnType<typeof rootLoader>
-  >;
+  let rootLoaderData = useMatches()[0].data as SerializeFrom<typeof rootLoader>;
   let { formData } = useNavigation();
   let optimisticColorScheme =
     formData && formData.has("colorScheme")

app/modules/color-scheme/server.ts

@@ -1,5 +1,5 @@
-import { createCookie, redirect } from "react-router";
-import type { ActionFunction } from "react-router";
+import { createCookie, redirect } from "@remix-run/node";
+import type { ActionFunction } from "@remix-run/node";
 import type { ColorScheme } from "./types";
 
 let cookie = createCookie("color-scheme", {

app/modules/details-menu/index.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigation } from "react-router";
+import { useLocation, useNavigation } from "@remix-run/react";
 import * as React from "react";
 
 /**

app/modules/http-utils/ensure-secure.ts

@@ -1,4 +1,4 @@
-import { redirect } from "react-router";
+import { redirect } from "@remix-run/node";
 
 export async function ensureSecure(request: Request) {
   let proto = request.headers.get("x-forwarded-proto");

app/modules/http-utils/remove-slashes.ts

@@ -1,4 +1,4 @@
-import { redirect } from "react-router";
+import { redirect } from "@remix-run/node";
 
 export async function removeTrailingSlashes(request: Request) {
   let url = new URL(request.url);

app/modules/redirects/.server/check-url.ts

@@ -1,4 +1,4 @@
-import { redirect } from "react-router";
+import { redirect } from "@remix-run/node";
 import type { Redirect } from "./get-redirects";
 
 export async function checkUrl(url: string, redirects: Redirect[]) {

app/modules/remix-seo/seo.ts

@@ -1,4 +1,4 @@
-import type { LinkDescriptor, MetaDescriptor } from "react-router";
+import type { LinkDescriptor, MetaDescriptor } from "@remix-run/node";
 import merge from "lodash.merge";
 
 export function getSeo(defaultConfig: SeoProps) {

app/pages/api-doc.tsx

@@ -1,5 +1,5 @@
-import type { HeadersArgs, LoaderFunctionArgs } from "react-router";
-import { useLoaderData, type MetaFunction } from "react-router";
+import type { HeadersArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { useLoaderData, type MetaFunction } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
 import { CACHE_CONTROL } from "~/http";

app/pages/api-index.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import type { HeadersArgs, LoaderFunctionArgs } from "react-router";
+import type { HeadersArgs, LoaderFunctionArgs } from "@remix-run/node";
 import {
   type MetaFunction,
   useLoaderData,
   useRouteLoaderData,
-} from "react-router";
+} from "@remix-run/react";
 import invariant from "tiny-invariant";
 
 import { CACHE_CONTROL } from "~/http";

app/pages/api-layout.tsx

@@ -1,5 +1,5 @@
 import invariant from "tiny-invariant";
-import { Outlet } from "react-router";
+import { Outlet } from "@remix-run/react";
 import classNames from "classnames";
 
 import docsStylesheet from "~/styles/docs.css?url";
@@ -15,7 +15,7 @@ import {
 import { PackageSelect } from "~/components/package-select";
 import { Menu } from "~/components/docs-menu/menu";
 
-import type { LinksFunction, LoaderFunctionArgs } from "react-router";
+import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
 
 export let links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: docsStylesheet }];

app/pages/api-redirect.ts

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, redirect } from "react-router";
+import { type LoaderFunctionArgs, redirect } from "@remix-run/node";
 
 export function loader({ params }: LoaderFunctionArgs) {
   return redirect(

app/pages/brand.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "react-router";
+import type { MetaFunction } from "@remix-run/node";
 import classNames from "classnames";
 
 export const meta: MetaFunction = () => {

app/pages/guide.tsx

@@ -1,5 +1,5 @@
 import invariant from "tiny-invariant";
-import { useLoaderData } from "react-router";
+import { useLoaderData } from "@remix-run/react";
 
 import { getRepoDoc } from "~/modules/gh-docs/.server";
 import { CACHE_CONTROL } from "~/http";
@@ -9,7 +9,7 @@ import type {
   LoaderFunctionArgs,
   MetaFunction,
   HeadersArgs,
-} from "react-router";
+} from "@remix-run/node";
 
 import {
   getGuideMatchData,

app/pages/guides-index.tsx

@@ -1,5 +1,5 @@
-import type { HeadersArgs, MetaFunction } from "react-router";
-import { Link } from "react-router";
+import type { HeadersArgs, MetaFunction } from "@remix-run/node";
+import { Link } from "@remix-run/react";
 import classNames from "classnames";
 import { CACHE_CONTROL } from "~/http";
 import {

app/pages/guides-layout.tsx

@@ -1,5 +1,5 @@
-import type { LinksFunction, LoaderFunctionArgs } from "react-router";
-import { Outlet } from "react-router";
+import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
+import { Outlet } from "@remix-run/react";
 import classNames from "classnames";
 
 import docsStylesheet from "~/styles/docs.css?url";

app/pages/healthcheck.tsx

@@ -1,5 +1,5 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import type { LoaderFunction } from "react-router";
+import type { LoaderFunction } from "@remix-run/node";
 
 export const loader: LoaderFunction = async ({ request }) => {
   const host =

app/pages/home.tsx

@@ -1,9 +1,9 @@
-import { type MetaFunction } from "react-router";
-import { Await, Link, useLoaderData } from "react-router";
+import { type MetaFunction } from "@remix-run/node";
+import { Await, Link, useLoaderData } from "@remix-run/react";
 import { Suspense } from "react";
 
 import iconsHref from "~/icons.svg";
-import { getStats, type Stats } from "~/modules/stats";
+import { getStats } from "~/modules/stats";
 import { getRootMatchData } from "~/ui/meta";
 
 export let loader = async () => {
@@ -148,7 +148,7 @@ export default function Home() {
       <div>
         <Suspense fallback={null}>
           <Await resolve={stats} errorElement={null}>
-            {(stats: Stats[]) => (
+            {(stats) => (
               <ul className="mt-8 grid grid-cols-1 gap-8 md:grid md:grid-cols-2">
                 {/* TODO: single fetch bug? */}
                 {stats.map(({ svgId, count, label }) => (

app/pages/notfound.tsx

@@ -1,5 +1,5 @@
-import { type MetaFunction } from "react-router";
-import { Link, isRouteErrorResponse, useRouteError } from "react-router";
+import { type MetaFunction } from "@remix-run/react";
+import { Link, isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import { CACHE_CONTROL } from "~/http";
 
 export let loader = async () => {

app/pages/redirect-v6-doc.tsx

@@ -1,4 +1,4 @@
-import { redirect, type LoaderFunctionArgs } from "react-router";
+import { redirect, type LoaderFunctionArgs } from "@remix-run/node";
 import { getRepoTags } from "~/modules/gh-docs/.server";
 import * as semver from "semver";
 

app/pages/redirect-v7-doc.tsx

@@ -1,4 +1,4 @@
-import { redirect, type LoaderFunctionArgs } from "react-router";
+import { redirect, type LoaderFunctionArgs } from "@remix-run/node";
 import { getRepoTags } from "~/modules/gh-docs/.server";
 import * as semver from "semver";
 

app/root.tsx

@@ -2,15 +2,15 @@ import type {
   HeadersArgs,
   LinksFunction,
   LoaderFunctionArgs,
-} from "react-router";
+} from "@remix-run/node";
 import {
   Link,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "react-router";
+} from "@remix-run/react";
 import { CACHE_CONTROL, middlewares } from "./http";
 
 import { parseColorScheme } from "./modules/color-scheme/server";