chore(playground): add loader error and route error routes

mcansh · Jun 29, 2024 · ddbdf4a · ddbdf4a
1 parent e1a8907
commit ddbdf4a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 44 deletions.
diff --git a/examples/playground/app/routes/_layout.tsx b/examples/playground/app/routes/_layout.tsx
@@ -1,5 +1,13 @@
 import { NavLink, Outlet } from "@remix-run/react";
 
+let LINKS = [
+  { to: "/", label: "Home" },
+  { to: "/page-2", label: "Page 2" },
+  { to: "/fetcher", label: "Fetcher" },
+  { to: "loader-error", label: "Loader Error" },
+  { to: "route-error", label: "Route Error" },
+] as const;
+
 export default function Layout() {
   return (
     <div>
@@ -43,45 +51,21 @@ export default function Layout() {
               alignItems: "center",
             }}
           >
-            <li>
-              <NavLink
-                style={({ isActive }) => {
-                  return {
-                    color: isActive ? "red" : "blue",
-                    textDecoration: isActive ? "underline" : "none",
-                  };
-                }}
-                to="/"
-              >
-                Home
-              </NavLink>
-            </li>
-            <li>
-              <NavLink
-                style={({ isActive }) => {
-                  return {
-                    color: isActive ? "red" : "blue",
-                    textDecoration: isActive ? "underline" : "none",
-                  };
-                }}
-                to="/page-2"
-              >
-                Page 2
-              </NavLink>
-            </li>
-            <li>
-              <NavLink
-                style={({ isActive }) => {
-                  return {
-                    color: isActive ? "red" : "blue",
-                    textDecoration: isActive ? "underline" : "none",
-                  };
-                }}
-                to="/fetcher"
-              >
-                Fetcher
-              </NavLink>
-            </li>
+            {LINKS.map((link) => (
+              <li key={link.to}>
+                <NavLink
+                  to={link.to}
+                  style={({ isActive }) => {
+                    return {
+                      color: isActive ? "red" : "blue",
+                      textDecoration: isActive ? "underline" : "none",
+                    };
+                  }}
+                >
+                  {link.label}
+                </NavLink>
+              </li>
+            ))}
           </ul>
         </nav>
       </header>

diff --git a/examples/playground/app/routes/error.tsx b/examples/playground/app/routes/error.tsx
diff --git a/examples/playground/app/routes/loader-error.tsx b/examples/playground/app/routes/loader-error.tsx
@@ -0,0 +1,5 @@
+import { unstable_defineLoader as defineLoader } from "@remix-run/node";
+
+export const loader = defineLoader(async () => {
+  throw new Error("This is an error");
+});
diff --git a/examples/playground/app/routes/route-error.tsx b/examples/playground/app/routes/route-error.tsx
@@ -0,0 +1,3 @@
+export default function foo() {
+  throw new Error("This is an error");
+}