Merge pull request #146 from benvinegar/upgrade-react-router

Migrate from Remix to React Router 7

.gitignore

@@ -9,6 +9,7 @@ dist
 .wrangler
 .dev.vars
 .turbo
+.react-router
 
 coverage
 playwright-report

package.json

@@ -11,6 +11,9 @@
         "turbo": "latest",
         "wrangler": "^3.61.0"
     },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.5"
+    },
     "workspaces": [
         "packages/*",
         "@counterscale/tracker"

packages/server/.eslintrc.cjs

@@ -56,6 +56,10 @@ module.exports = {
             files: ["**/*.{ts,tsx}"],
             plugins: ["@typescript-eslint", "import"],
             parser: "@typescript-eslint/parser",
+            parserOptions: {
+                project: "./tsconfig.json",
+                tsconfigRootDir: "./",
+            },
             settings: {
                 "import/internal-regex": "^~/",
                 "import/resolver": {

packages/server/app/__tests__/root.test.tsx

@@ -2,7 +2,7 @@
 import { beforeAll, afterEach, describe, expect, test, vitest } from "vitest";
 import "vitest-dom/extend-expect";
 import { render, waitFor, screen, cleanup } from "@testing-library/react";
-import { createRemixStub } from "@remix-run/testing";
+import { createRoutesStub } from "react-router";
 
 import Root, { Layout } from "../root";
 
@@ -23,7 +23,7 @@ describe("Root", () => {
             };
         }
 
-        const RemixStub = createRemixStub([
+        const RemixStub = createRoutesStub([
             {
                 path: "/",
                 Component: Root,
@@ -48,7 +48,7 @@ describe("Layout", () => {
     });
 
     test("renders with default data when no route data is available", async () => {
-        const RemixStub = createRemixStub([
+        const RemixStub = createRoutesStub([
             {
                 path: "/",
                 // @ts-expect-error TODO: Figure out how t
@@ -81,7 +81,7 @@ describe("Layout", () => {
             };
         }
 
-        const RemixStub = createRemixStub([
+        const RemixStub = createRoutesStub([
             {
                 path: "/",
                 // @ts-expect-error TODO: Figure out how to type this

packages/server/app/analytics/__tests__/collect.test.ts

@@ -1,5 +1,6 @@
 /*eslint @typescript-eslint/no-explicit-any: 0 */
 import { Mock, describe, expect, test, vi, beforeEach } from "vitest";
+import type { AnalyticsEngineDataset } from "@cloudflare/workers-types";
 import httpMocks from "node-mocks-http";
 
 import { collectRequestHandler } from "../collect";

packages/server/app/analytics/collect.ts

@@ -1,6 +1,8 @@
+import type {
+    RequestInit,
+    AnalyticsEngineDataset,
+} from "@cloudflare/workers-types";
 import { UAParser } from "ua-parser-js";
-
-import type { RequestInit } from "@cloudflare/workers-types";
 import { maskBrowserVersion } from "~/lib/utils";
 
 // Cookieless visitor/session tracking

packages/server/app/entry.client.tsx

@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react";
+import { HydratedRouter } from "react-router/dom";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
     hydrateRoot(
         document,
         <StrictMode>
-            <RemixBrowser />
+            <HydratedRouter />
         </StrictMode>,
     );
 });

packages/server/app/entry.server.tsx

@@ -4,16 +4,16 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
-import { RemixServer } from "@remix-run/react";
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
 import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
 
 export default async function handleRequest(
     request: Request,
     responseStatusCode: number,
     responseHeaders: Headers,
-    remixContext: EntryContext,
+    reactRouterContext: EntryContext,
 
     // This is ignored so we can keep it in the template for visibility.  Feel
     // free to delete this parameter in your app if you're not using it!
@@ -22,7 +22,7 @@ export default async function handleRequest(
     loadContext: AppLoadContext,
 ) {
     const body = await renderToReadableStream(
-        <RemixServer context={remixContext} url={request.url} />,
+        <ServerRouter context={reactRouterContext} url={request.url} />,
         {
             signal: request.signal,
             onError(error: unknown) {

packages/server/app/load-context.ts

@@ -1,4 +1,4 @@
-import { type AppLoadContext } from "@remix-run/cloudflare";
+import { type AppLoadContext } from "react-router";
 import { type PlatformProxy } from "wrangler";
 import { AnalyticsEngineAPI } from "./analytics/query";
 
@@ -8,7 +8,7 @@ interface ExtendedEnv extends Env {
 
 type Cloudflare = Omit<PlatformProxy<ExtendedEnv>, "dispose">;
 
-declare module "@remix-run/cloudflare" {
+declare module "react-router" {
     interface AppLoadContext {
         cloudflare: Cloudflare;
         analyticsEngine: AnalyticsEngineAPI;

packages/server/app/root.tsx

@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 import styles from "./globals.css?url";
-import { LoaderFunctionArgs, type LinksFunction } from "@remix-run/cloudflare";
+import { LoaderFunctionArgs, type LinksFunction } from "react-router";
 
 import {
     Links,
@@ -9,7 +9,7 @@ import {
     Scripts,
     ScrollRestoration,
     useLoaderData,
-} from "@remix-run/react";
+} from "react-router";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 

packages/server/app/routes.ts

@@ -1,3 +1,3 @@
-import { flatRoutes } from "@remix-run/fs-routes";
+import { flatRoutes } from "@react-router/fs-routes";
 
 export default flatRoutes();

packages/server/app/routes/__tests__/_index.test.tsx

@@ -2,14 +2,14 @@
 import { test, describe, expect } from "vitest";
 import "vitest-dom/extend-expect";
 
-import { createRemixStub } from "@remix-run/testing";
+import { createRoutesStub } from "react-router";
 import { render, screen } from "@testing-library/react";
 
 import Index from "../_index";
 
 describe("Index route", () => {
     test("renders index route", async () => {
-        const RemixStub = createRemixStub([
+        const RemixStub = createRoutesStub([
             {
                 path: "/",
                 Component: Index,

packages/server/app/routes/__tests__/dashboard.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { LoaderFunctionArgs } from "@remix-run/node";
+import { LoaderFunctionArgs } from "react-router";
 import {
     vi,
     test,
@@ -12,7 +12,7 @@ import {
 } from "vitest";
 import "vitest-dom/extend-expect";
 
-import { createRemixStub } from "@remix-run/testing";
+import { createRoutesStub } from "react-router";
 import { render, screen, waitFor } from "@testing-library/react";
 
 import Dashboard, { loader } from "../dashboard";
@@ -44,14 +44,13 @@ describe("Dashboard route", () => {
                         "testApiToken",
                     ),
                     cloudflare: {
-                        // @ts-expect-error we don't need to provide all the properties of the cloudflare object
                         env: {
                             CF_ACCOUNT_ID: "",
                             CF_BEARER_TOKEN: "",
                         },
                     },
                 },
-                // @ts-expect-error we don't need to provide all the properties of the request object
+                // @ts-expect-error we don't need to provide all the properties of the cloudflare object
                 request: {
                     url: "http://localhost:3000/dashboard",
                 },
@@ -70,7 +69,6 @@ describe("Dashboard route", () => {
 
             // run it again, this time with account ID present, but bearer token absent
             mockLoaderParams.context.cloudflare = {
-                // @ts-expect-error we don't need to provide all the properties of the cloudflare object
                 env: {
                     CF_ACCOUNT_ID: "testAccountId",
                     CF_BEARER_TOKEN: "",
@@ -210,7 +208,7 @@ describe("Dashboard route", () => {
             };
         }
 
-        const RemixStub = createRemixStub([
+        const RemixStub = createRoutesStub([
             {
                 path: "/",
                 Component: Dashboard,
@@ -307,7 +305,7 @@ describe("Dashboard route", () => {
             return { ...defaultMockedLoaderJson };
         }
 
-        const RemixStub = createRemixStub([
+        const RemixStub = createRoutesStub([
             {
                 path: "/",
                 Component: Dashboard,
@@ -401,7 +399,10 @@ describe("Dashboard route", () => {
         render(<RemixStub />);
 
         // wait until the rows render in the document
-        await waitFor(() => screen.findByText("Chrome"));
+        await waitFor(() => screen.findByText("Chrome"), {
+            // increased timeout because this test was failing on slower environments, e.g. GitHub actions
+            timeout: 5_000,
+        });
 
         // assert some of the data we mocked actually rendered into the document
         expect(screen.getByText("2.1K")).toBeInTheDocument(); // view count

packages/server/app/routes/__tests__/resources.timeseries.test.tsx

@@ -4,13 +4,13 @@ import { ReactNode } from "react";
 import { describe, test, expect, beforeEach, vi, afterEach } from "vitest";
 import { render, waitFor, screen } from "@testing-library/react";
 import { loader, TimeSeriesCard } from "../resources.timeseries";
-import * as RemixReact from "@remix-run/react";
+import * as RemixReact from "react-router";
 import "vitest-dom/extend-expect";
 import { getDefaultContext } from "./testutils";
 
 // Mock the useFetcher hook
-vi.mock("@remix-run/react", async () => {
-    const actual = await vi.importActual("@remix-run/react");
+vi.mock("react-router", async () => {
+    const actual = await vi.importActual("react-router");
     return {
         ...actual,
         useFetcher: vi.fn(),
@@ -52,8 +52,8 @@ describe("resources.timeseries loader", () => {
         const request = new Request(
             "http://test.com?interval=7d&site=test-site&timezone=UTC",
         );
+        // @ts-expect-error we don't need to provide all the properties of the context object
         const result = await loader({
-            // @ts-expect-error we don't need to provide all the properties of the contextobject
             context,
             request,
         });

packages/server/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import { MetaFunction } from "@remix-run/cloudflare";
+import { MetaFunction } from "react-router";
 import { Button } from "~/components/ui/button";
 
 export const meta: MetaFunction = () => {

packages/server/app/routes/admin-redirect.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, redirect } from "@remix-run/cloudflare";
+import { LoaderFunctionArgs, redirect } from "react-router";
 
 export const loader = async ({ context }: LoaderFunctionArgs) => {
     return redirect(

packages/server/app/routes/collect.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { LoaderFunctionArgs } from "react-router";
 import { collectRequestHandler } from "~/analytics/collect";
 
 // NOTE: This is the Remix/Vite entry point for the /collect endpoin

packages/server/app/routes/dashboard.tsx

@@ -6,15 +6,15 @@ import {
     SelectValue,
 } from "~/components/ui/select";
 
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/cloudflare";
-import { redirect } from "@remix-run/cloudflare";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
+import { redirect } from "react-router";
 import {
     isRouteErrorResponse,
     useLoaderData,
     useNavigation,
     useRouteError,
     useSearchParams,
-} from "@remix-run/react";
+} from "react-router";
 
 import { ReferrerCard } from "./resources.referrer";
 import { PathsCard } from "./resources.paths";

packages/server/app/routes/resources.browser.tsx

@@ -1,6 +1,6 @@
-import { useFetcher } from "@remix-run/react";
+import { useFetcher } from "react-router";
 
-import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import type { LoaderFunctionArgs } from "react-router";
 
 import { getFiltersFromSearchParams, paramsFromUrl } from "~/lib/utils";
 import PaginatedTableCard from "~/components/PaginatedTableCard";

packages/server/app/routes/resources.browserversion.tsx

@@ -1,6 +1,6 @@
-import { useFetcher } from "@remix-run/react";
+import { useFetcher } from "react-router";
 
-import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import type { LoaderFunctionArgs } from "react-router";
 
 import { getFiltersFromSearchParams, paramsFromUrl } from "~/lib/utils";
 import PaginatedTableCard from "~/components/PaginatedTableCard";

packages/server/app/routes/resources.country.tsx

@@ -1,5 +1,5 @@
-import { useFetcher } from "@remix-run/react";
-import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { useFetcher } from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
 import { getFiltersFromSearchParams, paramsFromUrl } from "~/lib/utils";
 import PaginatedTableCard from "~/components/PaginatedTableCard";
 import { SearchFilters } from "~/lib/types";

packages/server/app/routes/resources.device.tsx

@@ -1,6 +1,6 @@
-import { useFetcher } from "@remix-run/react";
+import { useFetcher } from "react-router";
 
-import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import type { LoaderFunctionArgs } from "react-router";
 
 import { getFiltersFromSearchParams, paramsFromUrl } from "~/lib/utils";
 import PaginatedTableCard from "~/components/PaginatedTableCard";

packages/server/app/routes/resources.paths.tsx

@@ -1,6 +1,6 @@
-import { useFetcher } from "@remix-run/react";
+import { useFetcher } from "react-router";
 
-import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import type { LoaderFunctionArgs } from "react-router";
 
 import {
     getFiltersFromSearchParams as getFiltersFromSearchParams,

packages/server/app/routes/resources.referrer.tsx

@@ -1,6 +1,6 @@
-import { useFetcher } from "@remix-run/react";
+import { useFetcher } from "react-router";
 
-import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import type { LoaderFunctionArgs } from "react-router";
 
 import PaginatedTableCard from "~/components/PaginatedTableCard";
 

packages/server/app/routes/resources.stats.tsx

@@ -1,11 +1,11 @@
-import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import type { LoaderFunctionArgs } from "react-router";
 import {
     getDateTimeRange,
     getFiltersFromSearchParams,
     paramsFromUrl,
 } from "~/lib/utils";
 import { useEffect } from "react";
-import { useFetcher } from "@remix-run/react";
+import { useFetcher } from "react-router";
 import { Card } from "~/components/ui/card";
 import { SearchFilters } from "~/lib/types";