Merge branch 'dev' into brophdawg11/remove-invariant

Author: brophdawg11

.changeset/long-jokes-wait.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Fix useBlocker to return IDLE_BLOCKER during SSR

.changeset/nasty-carrots-breathe.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": minor
+---
+
+Remix document response now respects headers and status code set in defer()

.changeset/witty-melons-sip.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Properly escape HTML characters in StaticRouterProvider serialized hydration data

contributors.yml

@@ -178,3 +178,4 @@
 - xavier-lc
 - xcsnowcity
 - yuleicul
+- zheng-chuang

packages/react-router-dom/__tests__/data-static-router-test.tsx

@@ -269,6 +269,37 @@ describe("A <StaticRouterProvider>", () => {
     );
   });
 
+  it("escapes HTML tags in serialized hydration data", async () => {
+    let routes = [
+      {
+        path: "/",
+        loader: () => ({
+          key: "uh </script> oh",
+        }),
+        element: <h1>👋</h1>,
+      },
+    ];
+    let { query } = createStaticHandler(routes);
+
+    let context = (await query(
+      new Request("http://localhost/", {
+        signal: new AbortController().signal,
+      })
+    )) as StaticHandlerContext;
+
+    let html = ReactDOMServer.renderToStaticMarkup(
+      <React.StrictMode>
+        <StaticRouterProvider
+          router={createStaticRouter(routes, context)}
+          context={context}
+        />
+      </React.StrictMode>
+    );
+    expect(html).toMatchInlineSnapshot(
+      `"<h1>👋</h1><script>window.__staticRouterHydrationData = JSON.parse("{\\"loaderData\\":{\\"0\\":{\\"key\\":\\"uh \\u003c/script\\u003e oh\\"}},\\"actionData\\":null,\\"errors\\":null}");</script>"`
+    );
+  });
+
   it("serializes ErrorResponse instances", async () => {
     let routes = [
       {

packages/react-router-dom/server.tsx

@@ -7,6 +7,7 @@ import type {
   StaticHandlerContext,
 } from "@remix-run/router";
 import {
+  IDLE_BLOCKER,
   IDLE_FETCHER,
   IDLE_NAVIGATION,
   Action,
@@ -113,7 +114,7 @@ export function StaticRouterProvider({
     // up parsing on the client.  Dual-stringify is needed to ensure all quotes
     // are properly escaped in the resulting string.  See:
     //   https://v8.dev/blog/cost-of-javascript-2019#json
-    let json = JSON.stringify(JSON.stringify(data));
+    let json = htmlEscape(JSON.stringify(JSON.stringify(data)));
     hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${json});`;
   }
 
@@ -299,7 +300,7 @@ export function createStaticRouter(
       throw msg("dispose");
     },
     getBlocker() {
-      throw msg("getBlocker");
+      return IDLE_BLOCKER;
     },
     deleteBlocker() {
       throw msg("deleteBlocker");
@@ -322,3 +323,19 @@ function encodeLocation(to: To): Path {
     hash: path.hash || "",
   };
 }
+
+// This utility is based on https://github.com/zertosh/htmlescape
+// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
+const ESCAPE_LOOKUP: { [match: string]: string } = {
+  "&": "\\u0026",
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+function htmlEscape(str: string): string {
+  return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}

packages/router/__tests__/router-test.ts

@@ -12350,6 +12350,10 @@ describe("a router", () => {
                 "x-custom": "yes",
               }),
             },
+            statusCode: 201,
+            loaderHeaders: {
+              deferred: new Headers({ "x-custom": "yes" }),
+            },
           });
         });
 

packages/router/router.ts

@@ -3183,7 +3183,12 @@ async function callLoaderOrAction(
   }
 
   if (result instanceof DeferredData) {
-    return { type: ResultType.deferred, deferredData: result };
+    return {
+      type: ResultType.deferred,
+      deferredData: result,
+      statusCode: result.init?.status,
+      headers: result.init?.headers && new Headers(result.init.headers),
+    };
   }
 
   return { type: ResultType.data, data: result };

rollup.utils.js

@@ -30,8 +30,7 @@ function getBuildDirectories(packageName, folderName) {
 
   if (process.env.LOCAL_BUILD_DIRECTORY) {
     try {
-      let nodeModulesDir = path.join(
-        process.cwd(),
+      let nodeModulesDir = path.resolve(
         process.env.LOCAL_BUILD_DIRECTORY,
         "node_modules"
       );