Update Remix packages to v2 (major)

.gitignore

@@ -6,8 +6,7 @@ node_modules
 
 /build/
 /public/build
-/api/index.js
-/api/index.js.map
+/api
 
 /config/*
 !/config/test.env

app/entry.server.tsx

@@ -1,126 +1,20 @@
-/* eslint-disable no-console */
-/* eslint-disable @typescript-eslint/unbound-method */
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.server
- */
+import { handleRequest } from '@vercel/remix';
+import { RemixServer } from '@remix-run/react';
+import type { EntryContext } from '@vercel/remix';
 
-import { PassThrough } from "node:stream";
-
-import type { EntryContext } from "@remix-run/node";
-import { Response } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
-import { renderToPipeableStream } from "react-dom/server";
-
-const ABORT_DELAY = 5_000;
-
-export const handleRequest = (
+const newLocal = (
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  remixContext: EntryContext
 ): Promise<unknown> => {
-  return isbot(request.headers.get("user-agent"))
-    ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext,
-      )
-    : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext,
-      );
-};
-
-const handleBotRequest = (
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-): Promise<unknown> =>
-  new Promise(
-    (resolve: (value: unknown) => void, reject: (reason?: unknown) => void) => {
-      const { pipe, abort } = renderToPipeableStream(
-        <RemixServer
-          context={remixContext}
-          url={request.url}
-          abortDelay={ABORT_DELAY}
-        />,
-        {
-          onAllReady: () => {
-            const body = new PassThrough();
-
-            responseHeaders.set("Content-Type", "text/html");
-
-            resolve(
-              new Response(body, {
-                headers: responseHeaders,
-                status: responseStatusCode,
-              }),
-            );
-
-            pipe(body);
-          },
-          onShellError: (error: unknown) => {
-            reject(error);
-          },
-          onError: (error: unknown) => {
-            responseStatusCode = 500;
-            console.error(error);
-          },
-        },
-      );
-
-      setTimeout(abort, ABORT_DELAY);
-    },
-  );
-
-const handleBrowserRequest = (
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-): Promise<unknown> =>
-  new Promise(
-    (resolve: (value: unknown) => void, reject: (reason?: unknown) => void) => {
-      const { pipe, abort } = renderToPipeableStream(
-        <RemixServer
-          context={remixContext}
-          url={request.url}
-          abortDelay={ABORT_DELAY}
-        />,
-        {
-          onShellReady: () => {
-            const body = new PassThrough();
-
-            responseHeaders.set("Content-Type", "text/html");
-
-            resolve(
-              new Response(body, {
-                headers: responseHeaders,
-                status: responseStatusCode,
-              }),
-            );
-
-            pipe(body);
-          },
-          onShellError: (error: unknown) => {
-            reject(error);
-          },
-          onError: (error: unknown) => {
-            console.error(error);
-            responseStatusCode = 500;
-          },
-        },
-      );
-
-      setTimeout(abort, ABORT_DELAY);
-    },
+  const remixServer = <RemixServer context={remixContext} url={request.url} />;
+  return handleRequest(
+    request,
+    responseStatusCode,
+    responseHeaders,
+    remixServer
   );
+};
 
-export default handleRequest;
+export default newLocal

app/root.tsx

@@ -8,7 +8,6 @@ import {
   isRouteErrorResponse,
   useRouteError,
 } from "@remix-run/react";
-import type { LinksFunction, V2_MetaFunction } from "@vercel/remix";
 import flatten from "flat";
 import { IntlProvider } from "react-intl";
 import toastify from "react-toastify/dist/ReactToastify.css";
@@ -19,13 +18,15 @@ import { ErrorPageDefault } from "./components/error-page/error-page-default";
 import { ErrorPageNotFound } from "./components/error-page/error-page-something-went-wrong";
 import { Toast } from "./components/toast";
 import { metaFunctionFactory } from "./services/meta";
+import type { LinksFunction, MetaFunction } from "@vercel/remix";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: fonts },
   { rel: "stylesheet", href: toastify },
   { rel: "stylesheet", href: tailwind },
 ];
-export const meta: V2_MetaFunction = metaFunctionFactory();
+
+export const meta: MetaFunction = metaFunctionFactory();
 
 export const App = (): JSX.Element => {
   return (

app/routes/_content.blog.posts.$slug.tsx

@@ -2,12 +2,12 @@ import { FaGithub } from "@react-icons/all-files/fa/FaGithub";
 import { FaLinkedinIn } from "@react-icons/all-files/fa/FaLinkedinIn";
 import { FaXing } from "@react-icons/all-files/fa/FaXing";
 import { useLoaderData } from "@remix-run/react";
-import type { V2_ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
+import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
 import type {
   LinksFunction,
-  LoaderArgs,
   TypedResponse,
-  V2_MetaFunction,
+  MetaFunction,
+  LoaderFunctionArgs,
 } from "@vercel/remix";
 import { json } from "@vercel/remix";
 import hljs from "highlight.js";
@@ -29,8 +29,8 @@ export const links: LinksFunction = () => [
   { rel: "stylesheet", href: highlightjs },
 ];
 
-export const meta: V2_MetaFunction = (
-  args: V2_ServerRuntimeMetaArgs<unknown, never>,
+export const meta: MetaFunction = (
+  args: ServerRuntimeMetaArgs,
 ) => {
   const {
     post: { frontmatter },
@@ -48,7 +48,7 @@ export const meta: V2_MetaFunction = (
 
 export const loader = async ({
   params: { slug },
-}: LoaderArgs): Promise<TypedResponse<ContentBlogPostDate>> => {
+}: LoaderFunctionArgs): Promise<TypedResponse<ContentBlogPostDate>> => {
   invariant(slug, "PostId is required");
 
   const post = await bundleFileMarkdown<BlogFrontmatter>(`en/blog/${slug}.mdx`);

app/routes/_content.tsx

@@ -1,6 +1,6 @@
 import { Link, Outlet, useLoaderData, useLocation } from "@remix-run/react";
-import type { V2_ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
-import type { TypedResponse, V2_MetaFunction } from "@vercel/remix";
+import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
+import type { TypedResponse, MetaFunction } from "@vercel/remix";
 import { json } from "@vercel/remix";
 import { FormattedMessage } from "react-intl";
 import { NavigationFull } from "~/components/navigation/navigation-full";
@@ -13,8 +13,8 @@ import { isLinkTargetingPathname } from "~/services/path";
 import type { ContentData } from "~/types/content";
 import type { NavigationItem } from "~/types/navigation";
 
-export const meta: V2_MetaFunction = (
-  args: V2_ServerRuntimeMetaArgs<unknown, never>,
+export const meta: MetaFunction = (
+  args: ServerRuntimeMetaArgs,
 ) => {
   const { translationKey = "" } =
     navigationItems.find(({ link }: NavigationItem) => {
@@ -54,9 +54,8 @@ export const ContentLayout = (): JSX.Element => {
           <div className="grid max-w-[1170px] gap-8 md:grid-flow-col">
             <Profile />
             <div
-              className={`relative${
-                isBlogContent ? " -order-1 md:order-none" : ""
-              } `}
+              className={`relative${isBlogContent ? " -order-1 md:order-none" : ""
+                } `}
             >
               <div className="absolute bottom-full right-0 hidden md:block">
                 <NavigationFull

app/routes/error.ts

@@ -1,11 +1,11 @@
-import type { ActionArgs, TypedResponse } from "@remix-run/node";
+import type { ActionFunctionArgs, TypedResponse } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import invariant from "tiny-invariant";
 import { createUserGeneratedIssue } from "~/services/server/user-error.server";
 
 export const action = async ({
   request,
-}: ActionArgs): Promise<TypedResponse<never>> => {
+}: ActionFunctionArgs): Promise<TypedResponse<never>> => {
   const location = (await request.formData()).get("location");
 
   invariant(location, '"location" is required in form data');

app/routes/imprint.tsx

@@ -1,10 +1,10 @@
-import type { V2_MetaFunction } from "@vercel/remix";
+import type { MetaFunction } from "@vercel/remix";
 import { FormattedMessage } from "react-intl";
 import { BoxRounded } from "~/components/box/box-rounded";
 import { WEBSITE_URL } from "~/constants/sitemap";
 import { metaFunctionFactory } from "~/services/meta";
 
-export const meta: V2_MetaFunction = metaFunctionFactory({
+export const meta: MetaFunction = metaFunctionFactory({
   locationKey: "imprint.title",
   url: `${WEBSITE_URL}imprint`,
 });

app/services/meta.test.ts

@@ -1,4 +1,4 @@
-import type { V2_MetaFunction } from "@vercel/remix";
+import type { MetaFunction } from "@vercel/remix";
 import { describe, expect, it } from "vitest";
 import { ASSETS_LOCATION } from "~/constants/assets-location";
 import { WEBSITE_URL } from "~/constants/sitemap";
@@ -11,7 +11,7 @@ const expectedMetaFunction = (
   title: string,
   imageUrl: string,
   url: string,
-): V2_MetaFunction => {
+): MetaFunction => {
   return () => [
     {
       name: "description",

app/services/server/markdown.server.ts

@@ -1,4 +1,3 @@
-import { fetch } from "@remix-run/node";
 import type { BuildOptions } from "esbuild";
 
 import { bundleMDX } from "mdx-bundler";

app/types/meta.ts

@@ -1,14 +1,14 @@
-import type { V2_MetaFunction } from "@vercel/remix";
+import type { MetaFunction } from "@vercel/remix";
 
 export type MetaFunctionFactory = (
   meta?:
     | { location: string; description: string; url: string; imageUrl: string }
     | {
-        locationKey: string;
-        descriptionKey: string;
-        url: string;
-        imageUrl: string;
-      }
+      locationKey: string;
+      descriptionKey: string;
+      url: string;
+      imageUrl: string;
+    }
     | { location: string; url: string; imageUrl: string }
     | { locationKey: string; url: string; imageUrl: string }
     | { description: string; url: string; imageUrl: string }
@@ -27,4 +27,4 @@ export type MetaFunctionFactory = (
     | { description: string }
     | { descriptionKey: string }
     | { url: string },
-) => V2_MetaFunction;
+) => MetaFunction;

package.json

@@ -5,7 +5,7 @@
     "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky install",
     "build": "remix build",
-    "dev": "remix dev",
+    "dev": "dotenv -e config/dev.env remix dev",
     "typecheck": "tsc",
     "format": "prettier --write .",
     "lint": "eslint --max-warnings 0 --cache --cache-location ./node_modules/.cache/eslint .",
@@ -24,13 +24,13 @@
     "@octokit/rest": "20.0.2",
     "@prisma/client": "5.4.2",
     "@react-icons/all-files": "4.1.0",
-    "@remix-run/css-bundle": "1.19.3",
-    "@remix-run/node": "1.19.3",
-    "@remix-run/react": "1.19.3",
-    "@remix-run/serve": "1.19.3",
+    "@remix-run/css-bundle": "2.1.0",
+    "@remix-run/node": "2.1.0",
+    "@remix-run/react": "2.1.0",
+    "@remix-run/serve": "2.1.0",
     "@remix-run/vercel": "1.19.3",
     "@vercel/node": "3.0.7",
-    "@vercel/remix": "1.19.3",
+    "@vercel/remix": "2.1.0",
     "esbuild": "0.19.5",
     "feed": "4.2.2",
     "flat": "5.0.2",
@@ -45,9 +45,9 @@
     "tiny-invariant": "1.3.1"
   },
   "devDependencies": {
-    "@remix-run/dev": "1.19.3",
-    "@remix-run/eslint-config": "1.19.3",
-    "@remix-run/serve": "1.19.3",
+    "@remix-run/dev": "2.1.0",
+    "@remix-run/eslint-config": "2.1.0",
+    "@remix-run/serve": "2.1.0",
     "@testing-library/react": "14.0.0",
     "@types/flat": "5.0.4",
     "@types/node": "20.8.7",