Added route configurable abortDelay and isDehydrated handle keys …

…and validation
michaelschwobe · Dec 11, 2023 · 739a701 · 739a701
1 parent a4a8ca2
commit 739a701
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -111,11 +111,20 @@ function handleBrowserRequest(
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
+
+    /**
+     * Use the abortDelay from the route handle if it's defined,
+     * otherwise use the default.
+     */
+    const abortDelay =
+      remixContext.staticHandlerContext.matches.at(-1)?.route.handle
+        ?.abortDelay ?? ABORT_DELAY;
+
     const { pipe, abort } = renderToPipeableStream(
       <RemixServer
         context={remixContext}
         url={request.url}
-        abortDelay={ABORT_DELAY}
+        abortDelay={abortDelay}
       />,
       {
         onShellReady() {
@@ -149,6 +158,6 @@ function handleBrowserRequest(
       },
     );
 
-    setTimeout(abort, ABORT_DELAY);
+    setTimeout(abort, abortDelay);
   });
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -16,6 +16,7 @@ import {
   Scripts,
   ScrollRestoration,
   useLoaderData,
+  useMatches,
 } from "@remix-run/react";
 import rdtStylesheetUrl from "remix-development-tools/index.css";
 import { GeneralErrorBoundary } from "~/components/error-boundary";
@@ -26,6 +27,7 @@ import tailwindStylesheetUrl from "~/tailwind.css";
 import { getUser } from "~/utils/auth.server";
 import { ClientHintCheck, getClientHints } from "~/utils/client-hints";
 import { getEnv } from "~/utils/env.server";
+import { MatchesSchema } from "~/utils/matches-validation";
 import {
   cn,
   combineHeaders,
@@ -143,6 +145,12 @@ function Document({
   env?: Record<string, boolean | number | string>;
   theme?: Theme;
 }) {
+  const matches = useMatches();
+  const matchesResults = MatchesSchema.safeParse(matches);
+  const isDehydrated = matchesResults.success
+    ? matchesResults.data?.some((match) => match.handle?.isDehydrated === true)
+    : false;
+
   return (
     <html lang="en" className={cn("h-full overflow-x-hidden", theme)}>
       <head>
@@ -179,7 +187,7 @@ function Document({
           }}
         />
         <ScrollRestoration />
-        <Scripts />
+        {isDehydrated ? null : <Scripts />}
         <LiveReload />
       </body>
     </html>

diff --git a/app/utils/matches-validation.ts b/app/utils/matches-validation.ts
@@ -0,0 +1,18 @@
+import * as z from "zod";
+
+const HandleSchema = z
+  .object({
+    abortDelay: z.number().int().min(250).max(180_000), // 3 minutes
+    isDehydrated: z.boolean(),
+  })
+  .partial();
+
+export type Handle = z.infer<typeof HandleSchema>;
+
+export const MatchesSchema = z.array(
+  z.object({
+    handle: HandleSchema.optional(),
+  }),
+);
+
+export type Matches = z.infer<typeof MatchesSchema>;