refactor(catch-boundary): Switch to V2 + Vite (#511)

Author: machour

catch-boundary/.eslintrc.js

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

catch-boundary/app/routes/users.$userId.tsx

@@ -2,5 +2,4 @@ node_modules
 
 /.cache
 /build
-/public/build
 .env

catch-boundary/package.json

@@ -1,19 +1,19 @@
-# CatchBoundary Example
+# ErrorBoundary Example
 
-If you want to handle _expected_ errors, you use a `CatchBoundary` to catch those types of errors. Think about HTTP-400-level errors like unauthorized etc.
+If you want to handle errors, export an `ErrorBoundary` from your route.
 
 ## Preview
 
 Open this example on [CodeSandbox](https://codesandbox.com):
 
-[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/catch-boundary)
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/error-boundary)
 
 ## Example
 
-In this example, we have a list of users and one user that does not exist. When you navigate to the user that does not exist, our CatchBoundary renders in place of the component for that route.
+In this example, we have a list of users and one user that does not exist. When you navigate to the user that does not exist, our ErrorBoundary renders in place of the component for that route.
 
-Check [app/routes/users/$userId.tsx](app/routes/users/$userId.tsx) to see the CatchBoundary in action.
+Check [app/routes/users/$userId.tsx](app/routes/users/$userId.tsx) to see the ErrorBoundary in action.
 
 ## Related Links
 
-- [CatchBoundary in the Remix Docs](https://remix.run/route/catch-boundary)
+- [ErrorBoundary in the Remix Docs](https://remix.run/route/error-boundary)

catch-boundary/remix.config.js

@@ -1,32 +1,29 @@
-import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "New Remix App",
-  viewport: "width=device-width,initial-scale=1",
-});
-
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}

catch-boundary/remix.env.d.ts

@@ -0,0 +1,61 @@
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import {
+  isRouteErrorResponse,
+  useLoaderData,
+  useParams,
+  useRouteError,
+} from "@remix-run/react";
+
+import { getUsers } from "~/data.server";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  // Handle our 404 gracefully by setting a generic error as page title
+  if (!data || !data.user) {
+    return [{ title: "User not found!" }];
+  }
+  return [{ title: data.user.name }];
+};
+
+export const loader = async ({ params }: LoaderFunctionArgs) => {
+  const userId = params.userId;
+
+  const users = getUsers();
+  const user = users.find(({ id }) => id === userId);
+
+  if (!user) {
+    // When there's an expected error (like no found user) throw a response.
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  return json({ user });
+};
+
+export default function User() {
+  const { user } = useLoaderData<typeof loader>();
+  return <div>Hi there {user.name}!</div>;
+}
+
+// Export an ErrorBoundary and use the useRouteError/isRouteErrorResponse
+// combo to handle thrown responses like the 404 we have in our loader.
+// You can also catch thrown responses from actions as well.
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const params = useParams();
+
+  if (isRouteErrorResponse(error) && error.status === 404) {
+    return (
+      <span style={{ color: "red" }}>
+        User with ID "{params.userId}" not found!
+      </span>
+    );
+  }
+
+  console.error(error);
+
+  return (
+    <div>
+      <pre>{JSON.stringify(error, null, 2)}</pre>
+    </div>
+  );
+}

catch-boundary/tsconfig.json

@@ -5,7 +5,7 @@ import { Link, Outlet, useLoaderData } from "@remix-run/react";
 import { getUsers } from "~/data.server";
 
 export const meta: MetaFunction = () => {
-  return { title: "Users" };
+  return [{ title: "Users" }];
 };
 
 export const loader = async () => {