v2 upgrade

.npmrc

@@ -1 +1,3 @@
 engine-strict=true
+# Until msw figures out it's shit: https://github.com/mswjs/msw/issues/1597
+legacy-peer-deps=true

app/entry.server.tsx

@@ -1,6 +1,6 @@
 import { PassThrough } from "stream";
 import type { EntryContext } from "@remix-run/node";
-import { Response } from "@remix-run/node";
+import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
@@ -29,7 +29,7 @@ export default function handleRequest(
           responseHeaders.set("Content-Type", "text/html");
 
           resolve(
-            new Response(body, {
+            new Response(createReadableStreamFromReadable(body), {
               headers: responseHeaders,
               status: didError ? 500 : responseStatusCode,
             })

app/root.tsx

@@ -2,7 +2,7 @@ import { redirect } from "@remix-run/node";
 import type {
   LinksFunction,
   LoaderFunction,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import {
   Links,
@@ -29,7 +29,7 @@ const defaultDescription =
 const baseUrl = "https://remixaustin.com/";
 const logoUrl = "https://remixaustin.com/img/remix-logo-rainbow.jpg";
 
-export const meta: V2_MetaFunction = () => [
+export const meta: MetaFunction = () => [
   {
     name: "charset",
     content: "utf-8",

app/routes/_index.tsx

@@ -1,14 +1,13 @@
 import DiscordHeaderImage from "~/images/discord-header.jpg";
 import HeroImage from "~/images/hero.jpg";
 import GivePresentationImage from "~/images/give-a-presentation.jpg";
-import { discordUrl } from "~/components/Navbar/SocialLinks";
+import { discordUrl, meetupUrl } from "~/components/Navbar/SocialLinks";
 import type { LinksFunction } from "@remix-run/node";
 import { tryToFetchRemixAustinInfo } from "~/models/meetup.server";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import NextEventInfo from "~/components/NextEventInfo/NextEventInfo";
 import MeetupLink from "~/components/MeetupLink";
-import { meetupUrl } from "~/components/Navbar/SocialLinks";
 
 interface CardProps {
   altText: string;

app/routes/blog.$slug.test.tsx

@@ -1,6 +1,9 @@
 // @vitest-environment node
 import "@testing-library/jest-dom";
-import { mockUrlResponse, urlToLoaderArgs } from "../../test/test-utils";
+import {
+  mockUrlResponse,
+  urlToLoaderFunctionArgs,
+} from "../../test/test-utils";
 import {
   loader,
   LONG_CACHE_MAX_AGE,
@@ -29,7 +32,9 @@ Hello, world.
     mockUrlResponse(TEST_GET_BLOG_POST_URL, {
       json: await bundleMdx(testMdx, SLUG, POSTS_BUILD_DIR),
     });
-    const args = urlToLoaderArgs(TEST_POST_URL, { path: { slug: SLUG } });
+    const args = urlToLoaderFunctionArgs(TEST_POST_URL, {
+      path: { slug: SLUG },
+    });
     const response = await loader(args);
     const {
       post: { code, ...metaProps },
@@ -66,7 +71,9 @@ Hello, world.
       mockUrlResponse(TEST_GET_BLOG_POST_URL, {
         json: await bundleMdx(testMdx, SLUG, POSTS_BUILD_DIR),
       });
-      const args = urlToLoaderArgs(TEST_POST_URL, { path: { slug: SLUG } });
+      const args = urlToLoaderFunctionArgs(TEST_POST_URL, {
+        path: { slug: SLUG },
+      });
       const response = await loader(args);
       const cacheControlHeader = response.headers.get("Cache-Control");
       expect(cacheControlHeader).not.toBeNull();
@@ -89,7 +96,9 @@ Hello, world.
       mockUrlResponse(TEST_GET_BLOG_POST_URL, {
         json: await bundleMdx(testMdx, SLUG, POSTS_BUILD_DIR),
       });
-      const args = urlToLoaderArgs(TEST_POST_URL, { path: { slug: SLUG } });
+      const args = urlToLoaderFunctionArgs(TEST_POST_URL, {
+        path: { slug: SLUG },
+      });
       const response = await loader(args);
       const cacheControlHeader = response.headers.get("Cache-Control");
       expect(cacheControlHeader).not.toBeNull();
@@ -113,7 +122,9 @@ Hello, world.
     mockUrlResponse(TEST_GET_BLOG_POST_URL, {
       json: await bundleMdx(testMdx, SLUG, POSTS_BUILD_DIR),
     });
-    const args = urlToLoaderArgs(TEST_POST_URL, { path: { slug: SLUG } });
+    const args = urlToLoaderFunctionArgs(TEST_POST_URL, {
+      path: { slug: SLUG },
+    });
     const response = await loader(args);
     const loaderData = await response.json();
     const {

app/routes/blog.$slug.tsx

@@ -1,6 +1,9 @@
-import type { HeadersFunction, V2_MetaFunction } from "@remix-run/node";
+import type {
+  HeadersFunction,
+  MetaFunction,
+  LoaderFunctionArgs,
+} from "@remix-run/node";
 import { json } from "@remix-run/node";
-import { type LoaderArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client";
 import { useMemo } from "react";
@@ -24,7 +27,7 @@ function buildHeaders(publishDate: Date): HeadersInit | undefined {
   };
 }
 
-export const loader = async function ({ params, request }: LoaderArgs) {
+export const loader = async function ({ params, request }: LoaderFunctionArgs) {
   const { slug } = params;
   invariant(typeof slug === "string", "Missing slug");
   const post = await fetch(
@@ -47,7 +50,7 @@ export const headers: HeadersFunction = ({ loaderHeaders }) => ({
   "Cache-Control": loaderHeaders.get("Cache-Control") ?? "no-cache",
 });
 
-export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) {
     return [];
   }

app/routes/blog._index.tsx

@@ -1,9 +1,9 @@
 import { Link, useLoaderData } from "@remix-run/react";
-import { type LoaderArgs } from "@remix-run/node";
+import { type LoaderFunctionArgs } from "@remix-run/node";
 import type { PostFrontMatterCollection } from "blog/models";
 import { PUBLISH_DATE_FORMATTER } from "~/utils";
 
-export const loader = async function ({ request }: LoaderArgs) {
+export const loader = async function ({ request }: LoaderFunctionArgs) {
   const origin = new URL(request.url).origin;
   return fetch(`${origin}/resource/get-all-front-matter`).then((response) =>
     response.json()

app/routes/healthcheck.tsx

@@ -1,7 +1,7 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const host =
     request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
 

app/routes/resource.get-all-front-matter.test.ts

@@ -1,6 +1,9 @@
 // @vitest-environment node
 import { loader } from "~/routes/resource.get-all-front-matter";
-import { mockUrlResponse, urlToLoaderArgs } from "../../test/test-utils";
+import {
+  mockUrlResponse,
+  urlToLoaderFunctionArgs,
+} from "../../test/test-utils";
 import type {
   PostFrontMatterCollection,
   PostFrontMatterWithSlug,
@@ -32,7 +35,7 @@ const SECOND_TEST_FRONT_MATTER: PostFrontMatterWithSlug = {
 describe("/resource/get-all-front-matter", () => {
   it("should throw error when there is an error retrieving front matter cache", async () => {
     mockUrlResponse(TEST_FRONT_MATTER_URL);
-    const args = urlToLoaderArgs(TEST_URL);
+    const args = urlToLoaderFunctionArgs(TEST_URL);
     await expect(loader(args)).rejects.toThrowError(
       "Could not retrieve posts. Internal Server Error"
     );
@@ -46,19 +49,19 @@ describe("/resource/get-all-front-matter", () => {
     });
 
     it("should return first page of front matter when no page params provided", async () => {
-      const args = urlToLoaderArgs(TEST_URL);
+      const args = urlToLoaderFunctionArgs(TEST_URL);
       await expect(loader(args)).resolves.toEqual(frontMatter);
     });
 
     it("should return first page of front matter", async () => {
-      const args = urlToLoaderArgs(TEST_URL, {
+      const args = urlToLoaderFunctionArgs(TEST_URL, {
         search: { page: "1", pageSize: "1" },
       });
       await expect(loader(args)).resolves.toEqual([FIRST_TEST_FRONT_MATTER]);
     });
 
     it("should return second page of front matter", async () => {
-      const args = urlToLoaderArgs(TEST_URL, {
+      const args = urlToLoaderFunctionArgs(TEST_URL, {
         search: { page: "2", pageSize: "1" },
       });
       await expect(loader(args)).resolves.toEqual([SECOND_TEST_FRONT_MATTER]);

app/routes/resource.get-all-front-matter.ts

@@ -1,10 +1,10 @@
-import { type LoaderArgs } from "@remix-run/node";
+import { type LoaderFunctionArgs } from "@remix-run/node";
 import { type PostFrontMatterCollection } from "blog/models";
 import { FRONT_MATTER_CACHE_FILENAME } from "blog/paths";
 
 export const loader = async function ({
   request,
-}: LoaderArgs): Promise<PostFrontMatterCollection> {
+}: LoaderFunctionArgs): Promise<PostFrontMatterCollection> {
   const requestUrl = new URL(request.url);
   const pageNumber = Number(requestUrl.searchParams.get("page") ?? 1); // Page number is 1 based, not 0 based
   const pageSize = Number(requestUrl.searchParams.get("pageSize") ?? 10);

app/routes/resource.get-blog-post.$slug.test.tsx

@@ -1,6 +1,9 @@
 // @vitest-environment node
 import "@testing-library/jest-dom";
-import { mockUrlResponse, urlToLoaderArgs } from "../../test/test-utils";
+import {
+  mockUrlResponse,
+  urlToLoaderFunctionArgs,
+} from "../../test/test-utils";
 import { loader } from "~/routes/resource.get-blog-post.$slug";
 
 const TEST_URL = "https://test.io";
@@ -19,23 +22,27 @@ Hello, world.
 describe("/resource/get-blog-post.$slug", () => {
   it("should throw error when there is no slug provided", async () => {
     mockUrlResponse(TEST_RAW_MDX_URL);
-    const args = urlToLoaderArgs(TEST_POST_URL);
+    const args = urlToLoaderFunctionArgs(TEST_POST_URL);
     await expect(loader(args)).rejects.toThrowError(
       "Invariant failed: Blog post slug was not provided!"
     );
   });
 
   it("should throw error when error returned retrieving post", async () => {
     mockUrlResponse(TEST_RAW_MDX_URL);
-    const args = urlToLoaderArgs(TEST_POST_URL, { path: { slug: SLUG } });
+    const args = urlToLoaderFunctionArgs(TEST_POST_URL, {
+      path: { slug: SLUG },
+    });
     await expect(loader(args)).rejects.toThrowError(
       "Could not retrieve post. Internal Server Error"
     );
   });
 
   it("should bundle mdx", async () => {
     mockUrlResponse(TEST_RAW_MDX_URL, { text: TEST_MDX });
-    const args = urlToLoaderArgs(TEST_POST_URL, { path: { slug: SLUG } });
+    const args = urlToLoaderFunctionArgs(TEST_POST_URL, {
+      path: { slug: SLUG },
+    });
     const { code, ...metaProps } = await loader(args);
     expect(metaProps).toEqual({ slug: SLUG, frontmatter: { title: "Title" } });
     expect(code).toContain("Hello, world.");

app/routes/resource.get-blog-post.$slug.ts

@@ -1,9 +1,9 @@
-import { type LoaderArgs } from "@remix-run/node";
+import { type LoaderFunctionArgs } from "@remix-run/node";
 import { bundleMdx } from "blog/parser.server";
 import { POSTS_BUILD_DIR } from "blog/paths";
 import invariant from "tiny-invariant";
 
-export const loader = async function ({ request, params }: LoaderArgs) {
+export const loader = async function ({ request, params }: LoaderFunctionArgs) {
   const { slug } = params;
   invariant(slug, "Blog post slug was not provided!");
   const url = new URL(`${new URL(request.url).origin}/posts/${slug}.mdx`);

app/utils.ts

@@ -36,6 +36,7 @@ export function useMatchesData(
     () => matchingRoutes.find((route) => route.id === id),
     [matchingRoutes, id]
   );
+  // @ts-expect-error Remix broke this
   return route?.data;
 }
 

blog/blogDevWatch.ts

@@ -1,8 +1,7 @@
 import fs from "fs";
 import syncDirectory from "sync-directory";
 import { writeFrontMatterCache } from "./writeFrontMatterCache";
-import { POSTS_SOURCE_DIR } from "./paths";
-import { POSTS_BUILD_DIR } from "./paths";
+import { POSTS_SOURCE_DIR, POSTS_BUILD_DIR } from "./paths";
 
 writeFrontMatterCache();
 if (!fs.existsSync(POSTS_SOURCE_DIR)) {