From 98b57181ea6171fdf11c6b2a100063143cf1a276 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Tue, 19 Apr 2022 12:34:13 -0700
Subject: [PATCH 1/4] feat: allow pass-through script props in
 ScrollRestoration

---
 packages/remix-react/components.tsx         | 2 +-
 packages/remix-react/scroll-restoration.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 721e5a49ae3..4d566d8308d 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -752,7 +752,7 @@ export function Meta() {
  */
 let isHydrated = false;
 
-type ScriptProps = Omit<
+export type ScriptProps = Omit<
   React.HTMLProps<HTMLScriptElement>,
   | "children"
   | "async"
diff --git a/packages/remix-react/scroll-restoration.tsx b/packages/remix-react/scroll-restoration.tsx
index b517b436233..3b874a51ee0 100644
--- a/packages/remix-react/scroll-restoration.tsx
+++ b/packages/remix-react/scroll-restoration.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { useLocation } from "react-router-dom";
 
 import { useBeforeUnload, useTransition } from "./components";
+import type { ScriptProps } from "./components";
 
 let STORAGE_KEY = "positions";
 
@@ -20,7 +21,7 @@ if (typeof document !== "undefined") {
  *
  * @see https://remix.run/api/remix#scrollrestoration
  */
-export function ScrollRestoration({ nonce = undefined }: { nonce?: string }) {
+export function ScrollRestoration(props: ScriptProps) {
   useScrollRestoration();
 
   // wait for the browser to restore it on its own
@@ -54,7 +55,7 @@ export function ScrollRestoration({ nonce = undefined }: { nonce?: string }) {
 
   return (
     <script
-      nonce={nonce}
+      {...props}
       suppressHydrationWarning
       dangerouslySetInnerHTML={{
         __html: `(${restoreScroll})(${JSON.stringify(STORAGE_KEY)})`,

From 0c073124f4eaaa41c5ed04d07dc36f1e7da7e457 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Tue, 19 Apr 2022 13:22:53 -0700
Subject: [PATCH 2/4] add tests

---
 .../__tests__/scroll-restoration-test.tsx     | 112 ++++++++++++++++++
 packages/remix-react/components.tsx           |   2 +-
 2 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 packages/remix-react/__tests__/scroll-restoration-test.tsx

diff --git a/packages/remix-react/__tests__/scroll-restoration-test.tsx b/packages/remix-react/__tests__/scroll-restoration-test.tsx
new file mode 100644
index 00000000000..8ca71c314b1
--- /dev/null
+++ b/packages/remix-react/__tests__/scroll-restoration-test.tsx
@@ -0,0 +1,112 @@
+import * as React from "react";
+import { MemoryRouter, Outlet } from "react-router-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import {
+  Link,
+  Links,
+  LiveReload,
+  Meta,
+  NavLink,
+  RemixEntryContext,
+  Scripts,
+} from "../components";
+import type { RemixEntryContextType } from "../components";
+import { ScrollRestoration } from "../scroll-restoration";
+
+import "@testing-library/jest-dom/extend-expect";
+
+function AppShell({ children }: { children: React.ReactNode }) {
+  return (
+    <React.Fragment>
+      <Outlet />
+      {children}
+      <Scripts />
+      <LiveReload />
+    </React.Fragment>
+  );
+}
+
+describe("<ScrollRestoration />", () => {
+  function withContext(stuff: JSX.Element) {
+    let context: RemixEntryContextType = {
+      routeModules: { idk: { default: () => null } },
+      manifest: {
+        routes: {
+          idk: {
+            hasLoader: true,
+            hasAction: false,
+            hasCatchBoundary: false,
+            hasErrorBoundary: false,
+            id: "idk",
+            module: "idk",
+          },
+        },
+        entry: { imports: [], module: "" },
+        url: "",
+        version: "",
+      },
+      matches: [],
+      clientRoutes: [
+        {
+          id: "idk",
+          path: "idk",
+          hasLoader: true,
+          element: "",
+          module: "",
+          async action() {
+            return {};
+          },
+          async loader() {
+            return {};
+          },
+        },
+      ],
+      routeData: {},
+      appState: {} as any,
+      transitionManager: {
+        getState() {
+          return {
+            transition: {},
+          };
+        },
+      } as any,
+    };
+    return (
+      <RemixEntryContext.Provider value={context}>
+        <MemoryRouter>{stuff}</MemoryRouter>
+      </RemixEntryContext.Provider>
+    );
+  }
+
+  it("should render a <script> tag", () => {
+    render(
+      withContext(
+        <AppShell>
+          <ScrollRestoration data-testid="scroll-script" />
+        </AppShell>
+      )
+    );
+    let script = screen.getByTestId("scroll-script");
+    expect(script instanceof HTMLScriptElement).toBe(true);
+  });
+
+  it("should pass props to <script>", () => {
+    render(
+      withContext(
+        <AppShell>
+          <ScrollRestoration
+            data-testid="scroll-script"
+            nonce="hello"
+            crossOrigin="anonymous"
+          />
+        </AppShell>
+      )
+    );
+    let script = screen.getByTestId("scroll-script");
+    expect(script).toHaveAttribute("nonce", "hello");
+    expect(script).toHaveAttribute("crossorigin", "anonymous");
+  });
+
+  it.todo("should restore scroll position");
+});
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 4d566d8308d..77b60c2ff21 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -53,7 +53,7 @@ import type { Transition, Fetcher, Submission } from "./transition";
 ////////////////////////////////////////////////////////////////////////////////
 // RemixEntry
 
-interface RemixEntryContextType {
+export interface RemixEntryContextType {
   manifest: AssetsManifest;
   matches: BaseRouteMatch<ClientRoute>[];
   routeData: { [routeId: string]: RouteData };

From 54bd4ff0b329aa03d1755f01559d48b29e32af82 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Tue, 19 Apr 2022 13:29:23 -0700
Subject: [PATCH 3/4] rm unused imports

---
 .../__tests__/scroll-restoration-test.tsx            | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/remix-react/__tests__/scroll-restoration-test.tsx b/packages/remix-react/__tests__/scroll-restoration-test.tsx
index 8ca71c314b1..bc4ae14d182 100644
--- a/packages/remix-react/__tests__/scroll-restoration-test.tsx
+++ b/packages/remix-react/__tests__/scroll-restoration-test.tsx
@@ -1,16 +1,8 @@
 import * as React from "react";
 import { MemoryRouter, Outlet } from "react-router-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
-import {
-  Link,
-  Links,
-  LiveReload,
-  Meta,
-  NavLink,
-  RemixEntryContext,
-  Scripts,
-} from "../components";
+import { LiveReload, RemixEntryContext, Scripts } from "../components";
 import type { RemixEntryContextType } from "../components";
 import { ScrollRestoration } from "../scroll-restoration";
 

From a4d2869c5f28bae07d4aaa9fea0f04ae20ba91da Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Thu, 1 Dec 2022 11:35:16 -0800
Subject: [PATCH 4/4] chore: add changeset

---
 .changeset/late-files-trade.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/late-files-trade.md

diff --git a/.changeset/late-files-trade.md b/.changeset/late-files-trade.md
new file mode 100644
index 00000000000..275b9a21d78
--- /dev/null
+++ b/.changeset/late-files-trade.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Allow pass-through props to be passed to the script rendered by `ScrollRestoration`