remix-run · MichaelDeBoey · Sep 5, 2023 · Aug 31, 2023
diff --git a/__template/app/routes/_index.tsx b/__template/app/routes/_index.tsx
@@ -0,0 +1,7 @@
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to Remix</h1>
+    </div>
+  );
+}
diff --git a/__template/remix.config.js b/__template/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/_official-jokes/remix.config.js b/_official-jokes/remix.config.js
@@ -12,6 +12,6 @@ module.exports = {
   serverModuleFormat: "cjs",
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/_official-realtime-app/app/routes/index.tsx → _official-realtime-app/app/routes/_index.tsx b/_official-realtime-app/app/routes/index.tsx → _official-realtime-app/app/routes/_index.tsx
diff --git a/_official-realtime-app/remix.config.js b/_official-realtime-app/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/bullmq-task-queue/README.md b/bullmq-task-queue/README.md
@@ -17,8 +17,8 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 ## Relevant files:
 
-- [app/utils/notifier.server.ts](./app/queues/notifier.server.ts) where we define the necessary components for the background task queue, worker, and scheduler.
-- [app/routes/index.tsx](./app/routes/index.tsx) where background tasks are added to the queue.
+- [`app/utils/notifier.server.ts`](./app/queues/notifier.server.ts) where we define the necessary components for the background task queue, worker, and scheduler.
+- [`app/routes/_index.tsx`](./app/routes/_index.tsx) where background tasks are added to the queue.
 
 ## Related Links
 

diff --git a/bullmq-task-queue/app/routes/index.tsx → bullmq-task-queue/app/routes/_index.tsx b/bullmq-task-queue/app/routes/index.tsx → bullmq-task-queue/app/routes/_index.tsx
diff --git a/catch-boundary/app/routes/index.tsx → catch-boundary/app/routes/_index.tsx b/catch-boundary/app/routes/index.tsx → catch-boundary/app/routes/_index.tsx
diff --git a/catch-boundary/app/routes/users/$userId.tsx → catch-boundary/app/routes/users.$userId.tsx b/catch-boundary/app/routes/users/$userId.tsx → catch-boundary/app/routes/users.$userId.tsx
diff --git a/catch-boundary/remix.config.js b/catch-boundary/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/chakra-ui/app/routes/index.tsx → chakra-ui/app/routes/_index.tsx b/chakra-ui/app/routes/index.tsx → chakra-ui/app/routes/_index.tsx
@@ -1,11 +1,9 @@
 import { Box } from "@chakra-ui/react";
 
-const Index = () => {
+export default function Index() {
   return (
     <Box bg="tomato" w="100%" p={4} color="white">
       Hello World!
     </Box>
   );
-};
-
-export default Index;
+}
diff --git a/chakra-ui/remix.config.js b/chakra-ui/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/client-only-components/app/routes/index.tsx → client-only-components/app/routes/_index.tsx b/client-only-components/app/routes/index.tsx → client-only-components/app/routes/_index.tsx
@@ -3,7 +3,7 @@ import { ClientOnly, useHydrated } from "remix-utils";
 import { BrokenOnTheServer } from "~/components/broken-on-the-server.client";
 import { ComplexComponent } from "~/components/complex-component";
 
-export default function Screen() {
+export default function Index() {
   const hydrated = useHydrated();
   return (
     <>

diff --git a/client-only-components/remix.config.js b/client-only-components/remix.config.js
@@ -1,8 +1,11 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  future: {
+    v2_routeConvention: true,
+  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
 };
diff --git a/client-side-validation/app/root.tsx b/client-side-validation/app/root.tsx
@@ -1,189 +1,28 @@
-import type { ActionArgs, LinksFunction, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
   Meta,
+  Outlet,
   Scripts,
   ScrollRestoration,
-  useActionData,
-  useLoaderData,
 } from "@remix-run/react";
 
-import stylesUrl from "~/index.css";
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: stylesUrl },
-];
-
 export const meta: MetaFunction = () => ({
   charset: "utf-8",
   title: "New Remix App",
   viewport: "width=device-width,initial-scale=1",
 });
 
-export const action = async ({ request }: ActionArgs) => {
-  const form = await request.formData();
-  const message = `Successfully submitted data:
-      - Required text: ${form.get("required-text")}
-      - Required checkbox: ${form.get("required-checkbox")}
-      - Text with regex: ${form.get("text-with-regex")} 
-      - Number with min max: ${form.get("number-with-min-max")}
-      - Text with minlength maxlength: ${form.get(
-        "text-with-minlength-maxlength",
-      )}
-      - Date with min max: ${form.get("date-with-min-max")}
-  `;
-  return json({ message }, { status: 200 });
-};
-
-export const loader = async () => {
-  const date = new Date();
-
-  // today string in "YYYY-MM-DD" format
-  const todayString = `${date.getFullYear()}-${(
-    "00" +
-    (date.getMonth() + 1)
-  ).slice(-2)}-${("00" + date.getDate()).slice(-2)}`;
-
-  // tomorrow string in "YYYY-MM-DD" format
-  const tomorrowString = `${date.getFullYear()}-${(
-    "00" +
-    (date.getMonth() + 1)
-  ).slice(-2)}-${("00" + (date.getDate() + 1)).slice(-2)}`;
-
-  return json({ todayString, tomorrowString });
-};
-
 export default function App() {
-  const actionData = useActionData<typeof action>();
-  const data = useLoaderData<typeof loader>();
-
   return (
     <html lang="en">
       <head>
         <Meta />
         <Links />
       </head>
       <body>
-        <div className="root">
-          <h1>Client-Side Validation Example</h1>
-          <form method="post">
-            <div className="form-control">
-              <label>
-                Required text
-                <abbr title="This field is mandatory" aria-label="required">
-                  *
-                </abbr>
-                <input type="text" name="required-text" required />
-              </label>
-            </div>
-            <div className="form-control">
-              <fieldset>
-                <legend>
-                  Required checkbox
-                  <abbr title="This field is mandatory" aria-label="required">
-                    *
-                  </abbr>
-                </legend>
-                <label>
-                  <input
-                    type="radio"
-                    required
-                    name="required-checkbox"
-                    value="yes"
-                  />
-                  Yes
-                </label>
-                <label>
-                  <input
-                    type="radio"
-                    required
-                    name="required-checkbox"
-                    value="maybe"
-                  />
-                  Maybe
-                </label>
-                <label>
-                  <input
-                    type="radio"
-                    required
-                    name="required-checkbox"
-                    value="no"
-                  />
-                  No
-                </label>
-              </fieldset>
-            </div>
-            <div className="form-control">
-              <label>
-                Text with regex validation (only allow [Bb]anana or [Oo]range)
-                <input
-                  type="text"
-                  name="text-with-regex"
-                  list="list1"
-                  pattern="[Bb]anana|[Oo]range"
-                />
-                <datalist id="list1">
-                  <option>Banana</option>
-                  <option>Cherry</option>
-                  <option>Apple</option>
-                  <option>Strawberry</option>
-                  <option>Lemon</option>
-                  <option>Orange</option>
-                </datalist>
-              </label>
-            </div>
-            <div className="form-control">
-              <label>
-                Number with min (12) and max (120) validation
-                <input
-                  type="number"
-                  name="number-with-min-max"
-                  min="12"
-                  max="120"
-                  step="1"
-                />
-              </label>
-            </div>
-            <div className="form-control">
-              <label>
-                Email
-                <input name="email" type="email" />
-              </label>
-            </div>
-            <div className="form-control">
-              <label htmlFor="text-with-minlength-maxlength">
-                Text with minLength(10) and maxLength(140)
-              </label>
-              <textarea
-                name="text-with-minlength-maxlength"
-                id="text-with-minlength-maxlength"
-                minLength={10}
-                maxLength={140}
-                rows={3}
-              ></textarea>
-            </div>
-            <div className="form-control">
-              <label htmlFor="date-with-min-max">
-                Date with min(today) and max(tomorrow)
-              </label>
-              <input
-                type="date"
-                name="date-with-min-max"
-                id="date-with-min-max"
-                min={data.todayString}
-                max={data.tomorrowString}
-              />
-            </div>
-            <div className="form-control">
-              <button>Submit</button>
-            </div>
-          </form>
-          {actionData?.message ? (
-            <div className="result">{actionData.message}</div>
-          ) : null}
-        </div>
+        <Outlet />
         <ScrollRestoration />
         <Scripts />
         <LiveReload />