WIP SSR lazy route modules

remix-run · Feb 3, 2023 · f3e4289 · f3e4289
1 parent c1f907a
commit f3e4289
Show file tree

Hide file tree

Showing 14 changed files with 371 additions and 51 deletions.
diff --git a/examples/data-router/src/app.tsx b/examples/data-router/src/app.tsx
@@ -26,7 +26,7 @@ import { addTodo, deleteTodo, getTodos } from "./todos";
 
 import "./index.css";
 
-let router = createBrowserRouter(
+let router = await createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Layout />}>
       <Route index loader={homeLoader} element={<Home />} />
@@ -44,6 +44,31 @@ let router = createBrowserRouter(
         loader={deferredLoader}
         element={<DeferredPage />}
       />
+      <Route
+        path="lazy"
+        lazy={async () => {
+          let {
+            default: Component,
+            loader,
+            action,
+            ErrorBoundary,
+            shouldRevalidate,
+          } = await import("./lazy");
+
+          return {
+            element: <Component />,
+            loader,
+            action,
+            shouldRevalidate,
+            ...(ErrorBoundary
+              ? {
+                  errorElement: <ErrorBoundary />,
+                  hasErrorBoundary: true,
+                }
+              : {}),
+          };
+        }}
+      />
     </Route>
   )
 );
@@ -94,6 +119,9 @@ export function Layout() {
           <li>
             <Link to="/deferred">Deferred</Link>
           </li>
+          <li>
+            <Link to="/lazy">Lazy</Link>
+          </li>
           <li>
             <Link to="/404">404 Link</Link>
           </li>

diff --git a/examples/data-router/src/lazy.tsx b/examples/data-router/src/lazy.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import type {
+  ActionFunction,
+  ShouldRevalidateFunction,
+} from "react-router-dom";
+import { Form, useLoaderData } from "react-router-dom";
+
+interface LazyLoaderData {
+  date: string;
+  submissionCount: number;
+}
+
+let submissionCount = 0;
+
+export const loader = async (): Promise<LazyLoaderData> => {
+  return {
+    date: new Date().toISOString(),
+    submissionCount,
+  };
+};
+
+export const action: ActionFunction = async ({ request }) => {
+  let body = await request.formData();
+  if (body.get("error")) {
+    throw new Error("Form action error");
+  }
+
+  submissionCount++;
+  return submissionCount;
+};
+
+export function ErrorBoundary() {
+  return (
+    <>
+      <h2>Lazy error boundary</h2>
+      <pre>Something went wrong</pre>
+    </>
+  );
+}
+
+export const shouldRevalidate: ShouldRevalidateFunction = (args) => {
+  return Boolean(args.formAction);
+};
+
+export default function LazyPage() {
+  let data = useLoaderData() as LazyLoaderData;
+
+  return (
+    <>
+      <h2>Lazy</h2>
+      <p>Date from loader: {data.date}</p>
+      <p>Form submission count: {data.submissionCount}</p>
+      <Form method="post">
+        <div style={{ display: "flex", gap: 12 }}>
+          <button>Submit form</button>
+          <button name="error" value="true">
+            Throw an error
+          </button>
+        </div>
+      </Form>
+    </>
+  );
+}
diff --git a/examples/ssr-data-router/package-lock.json b/examples/ssr-data-router/package-lock.json
diff --git a/examples/ssr-data-router/package.json b/examples/ssr-data-router/package.json
@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "@remix-run/node": "^1.7.0",
-    "@remix-run/router": "^1.0.0",
+    "@remix-run/router": "^1.3.1",
     "compression": "1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.17.1",
     "history": "^5.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.0"
+    "react-router-dom": "^6.8.0"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^3.0.0",

diff --git a/examples/ssr-data-router/src/App.tsx b/examples/ssr-data-router/src/App.tsx
@@ -20,6 +20,31 @@ export const routes = [
         loader: dashboardLoader,
         element: <Dashboard />,
       },
+      {
+        path: "lazy",
+        async lazy() {
+          let {
+            default: Component,
+            loader,
+            action,
+            ErrorBoundary,
+            shouldRevalidate,
+          } = await import("./lazy");
+
+          return {
+            element: <Component />,
+            loader,
+            action,
+            shouldRevalidate,
+            ...(ErrorBoundary
+              ? {
+                  errorElement: <ErrorBoundary />,
+                  hasErrorBoundary: true,
+                }
+              : {}),
+          };
+        },
+      },
       {
         path: "redirect",
         loader: redirectLoader,
@@ -70,6 +95,9 @@ function Layout() {
           <li>
             <Link to="/dashboard">Dashboard</Link>
           </li>
+          <li>
+            <Link to="/lazy">Lazy</Link>
+          </li>
           <li>
             <Link to="/redirect">Redirect to Home</Link>
           </li>

diff --git a/examples/ssr-data-router/src/entry.client.tsx b/examples/ssr-data-router/src/entry.client.tsx
@@ -4,7 +4,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import { routes } from "./App";
 
-let router = createBrowserRouter(routes);
+let router = await createBrowserRouter(routes);
 
 ReactDOM.hydrateRoot(
   document.getElementById("app"),

diff --git a/examples/ssr-data-router/src/lazy.tsx b/examples/ssr-data-router/src/lazy.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import type {
+  ActionFunction,
+  ShouldRevalidateFunction,
+} from "react-router-dom";
+import { Form, useLoaderData } from "react-router-dom";
+
+interface LazyLoaderData {
+  date: string;
+  submissionCount: number;
+}
+
+let submissionCount = 0;
+
+export const loader = async (): Promise<LazyLoaderData> => {
+  return {
+    date: new Date().toISOString(),
+    submissionCount,
+  };
+};
+
+export const action: ActionFunction = async ({ request }) => {
+  let body = await request.formData();
+  if (body.get("error")) {
+    throw new Error("Form action error");
+  }
+
+  submissionCount++;
+  return submissionCount;
+};
+
+export function ErrorBoundary() {
+  return (
+    <>
+      <h2>Lazy error boundary</h2>
+      <pre>Something went wrong</pre>
+    </>
+  );
+}
+
+export const shouldRevalidate: ShouldRevalidateFunction = (args) => {
+  return Boolean(args.formAction);
+};
+
+export default function LazyPage() {
+  let data = useLoaderData() as LazyLoaderData;
+
+  return (
+    <>
+      <h2>Lazy</h2>
+      <p>Date from loader: {data.date}</p>
+      <p>Form submission count: {data.submissionCount}</p>
+      <Form method="post">
+        <div style={{ display: "flex", gap: 12 }}>
+          <button>Submit form</button>
+          <button name="error" value="true">
+            Throw an error
+          </button>
+        </div>
+      </Form>
+    </>
+  );
+}