Minor SPA mode updates

remix-run · Jan 9, 2024 · 771ce47 · 771ce47
1 parent 60b1c7a
commit 771ce47
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 4 deletions.
diff --git a/.changeset/lazy-oranges-reply.md b/.changeset/lazy-oranges-reply.md
@@ -0,0 +1,7 @@
+---
+"@remix-run/dev": patch
+"@remix-run/react": patch
+---
+
+- [REMOVE] Error if no `<Scripts>` included in root `<HydrateFallback>`
+- [REMOVE] Don't render SSR scroll restoration script in SPA mode
diff --git a/integration/spa-mode-test.ts b/integration/spa-mode-test.ts
@@ -245,6 +245,103 @@ test.describe("SPA Mode", () => {
           "See https://remix.run/future/spa-mode for more information."
       );
     });
+
+    test("errors on a non-200 status from entry.server.tsx", async () => {
+      let cwd = await createProject({
+        "vite.config.ts": js`
+          import { defineConfig } from "vite";
+          import { unstable_vitePlugin as remix } from "@remix-run/dev";
+
+          export default defineConfig({
+            plugins: [remix({ unstable_ssr: false })],
+          });
+        `,
+        "app/entry.server.tsx": js`
+          import { RemixServer } from "@remix-run/react";
+          import { renderToString } from "react-dom/server";
+
+          export default function handleRequest(
+            request,
+            responseStatusCode,
+            responseHeaders,
+            remixContext
+          ) {
+            const html = renderToString(
+              <RemixServer context={remixContext} url={request.url} />
+            );
+            return new Response(html, {
+              headers: { "Content-Type": "text/html" },
+              status: 500,
+            });
+          }
+        `,
+        "app/root.tsx": js`
+          import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
+
+          export default function Root() {
+            return (
+              <html lang="en">
+                <head>
+                  <Meta />
+                  <Links />
+                </head>
+                <body>
+                  <Outlet />
+                  <Scripts />
+                </body>
+              </html>
+            );
+          }
+
+          export function HydrateFallback() {
+            return (
+              <html lang="en">
+                <head>
+                  <Meta />
+                  <Links />
+                </head>
+                <body>
+                  <h1>Loading...</h1>
+                  <Scripts />
+                </body>
+              </html>
+            );
+          }
+        `,
+      });
+      let result = viteBuild({ cwd });
+      let stderr = result.stderr.toString("utf8");
+      expect(stderr).toMatch(
+        "SPA Mode: Received a 500 status code from `entry.server.tsx` while " +
+          "generating the `index.html` file."
+      );
+      expect(stderr).toMatch("<h1>Loading...</h1>");
+    });
+
+    test("errors if you do not include <Scripts> in your root <HydrateFallback>", async () => {
+      let cwd = await createProject({
+        "vite.config.ts": js`
+          import { defineConfig } from "vite";
+          import { unstable_vitePlugin as remix } from "@remix-run/dev";
+
+          export default defineConfig({
+            plugins: [remix({ unstable_ssr: false })],
+          });
+        `,
+        "app/root.tsx": String.raw`
+          export function HydrateFallback() {
+            return <h1>Loading</h1>
+          }
+        `,
+      });
+      let result = viteBuild({ cwd });
+      let stderr = result.stderr.toString("utf8");
+      expect(stderr).toMatch(
+        "SPA Mode: Did you forget to include <Scripts/> in your `root.tsx` " +
+          "`HydrateFallback` component?  Your `index.html` file cannot hydrate " +
+          "into a SPA without `<Scripts />`."
+      );
+    });
   });
 
   test.describe("javascript disabled", () => {

diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
@@ -1490,11 +1490,27 @@ async function handleSpaMode(
   let { createRequestHandler: createHandler } = await import("@remix-run/node");
   let handler = createHandler(build, viteConfig.mode);
   let response = await handler(new Request("http://localhost/"));
-  invariant(response.status === 200, "Error generating the index.html file");
+  let html = await response.text();
+  if (response.status !== 200) {
+    throw new Error(
+      `SPA Mode: Received a ${response.status} status code from ` +
+        `\`entry.server.tsx\` while generating the \`index.html\` file.\n${html}`
+    );
+  }
+
+  if (
+    !html.includes("window.__remixContext =") ||
+    !html.includes("window.__remixRouteModules =")
+  ) {
+    throw new Error(
+      "SPA Mode: Did you forget to include <Scripts/> in your `root.tsx` " +
+        "`HydrateFallback` component?  Your `index.html` file cannot hydrate " +
+        "into a SPA without `<Scripts />`."
+    );
+  }
 
   // Write out the index.html file for the SPA
-  let htmlPath = path.join(assetsBuildDirectory, "index.html");
-  await fse.writeFile(htmlPath, await response.text());
+  await fse.writeFile(path.join(assetsBuildDirectory, "index.html"), html);
 
   viteConfig.logger.info(
     "SPA Mode: index.html has been written to your " +

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -81,7 +81,7 @@ export const RemixContext = React.createContext<RemixContextObject | undefined>(
 );
 RemixContext.displayName = "Remix";
 
-function useRemixContext(): RemixContextObject {
+export function useRemixContext(): RemixContextObject {
   let context = React.useContext(RemixContext);
   invariant(context, "You must render this element inside a <Remix> element");
   return context;

diff --git a/packages/remix-react/scroll-restoration.tsx b/packages/remix-react/scroll-restoration.tsx
@@ -7,6 +7,7 @@ import {
 } from "react-router-dom";
 
 import type { ScriptProps } from "./components";
+import { useRemixContext } from "./components";
 
 let STORAGE_KEY = "positions";
 
@@ -22,6 +23,7 @@ export function ScrollRestoration({
 }: ScriptProps & {
   getKey?: ScrollRestorationPropsRR["getKey"];
 }) {
+  let { isSpaMode } = useRemixContext();
   let location = useLocation();
   let matches = useMatches();
 
@@ -47,6 +49,12 @@ export function ScrollRestoration({
     []
   );
 
+  // In SPA Mode, there's nothing to restore on initial render since we didn't
+  // render anything on the server
+  if (isSpaMode) {
+    return null;
+  }
+
   let restoreScroll = ((STORAGE_KEY: string, restoreKey: string) => {
     if (!window.history.state || !window.history.state.key) {
       let key = Math.random().toString(32).slice(2);

diff --git a/templates/spa/app/root.tsx b/templates/spa/app/root.tsx
@@ -38,6 +38,7 @@ export function HydrateFallback() {
       <body>
         <p>Loading...</p>
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ export function HydrateFallback() { @@
           <body>
             <p>Loading...</p>
             <Scripts />
+            <LiveReload />
           </body>
         </html>
       );
@@ Expand Down @@