feat: allow adding additional attributes to <script> tags rendered by…

… <Scripts /> (#359)

* feat: allow adding aditional attributes to <script> tags rendered by <Scripts />

* chore: typo

* chore: notes about `<Scripts>` props

Co-authored-by: Ryan Florence <rpflorence@gmail.com>

docs/api/remix.md

@@ -32,6 +32,8 @@ export default function App() {
 }
 ```
 
+You can pass extra props to `<Scripts/>` like `<Scripts crossOrigin>` for hosting your static assets on a different server than your app, or `<Script nonce={nonce}/>` for certain content security policies.
+
 ## `<Link>`
 
 This component renders an anchor tag and is the primary way the user will navigate around your website. Anywhere you would have used `<a href="...">` you should now use `<Link to="..."/>` to get all the performance benefits of clientside routing in Remix.

packages/remix-react/components.tsx

@@ -659,11 +659,27 @@ export function Meta() {
   );
 }
 
+type ScriptProps = Omit<
+  React.HTMLProps<HTMLScriptElement>,
+  | "children"
+  | "async"
+  | "defer"
+  | "src"
+  | "type"
+  | "noModule"
+  | "dangerouslySetInnerHTML"
+  | "suppressHydrationWarning"
+>;
+
 /**
  * Renders the `<script>` tags needed for the initial render. Bundles for
  * additional routes are loaded later as needed.
+ *
+ * @param props Additional properties to add to each script tag that is rendered.
+ * In addition to scripts, \<link rel="modulepreload"> tags receive the crossOrigin
+ * property if provided.
  */
-export function Scripts() {
+export function Scripts(props: ScriptProps) {
   let {
     manifest,
     matches,
@@ -692,15 +708,17 @@ window.__remixRouteModules = {${matches
     return (
       <>
         <script
+          {...props}
           suppressHydrationWarning
           dangerouslySetInnerHTML={createHtml(contextScript)}
         />
-        <script src={manifest.url} />
+        <script {...props} src={manifest.url} />
         <script
+          {...props}
           dangerouslySetInnerHTML={createHtml(routeModulesScript)}
           type="module"
         />
-        <script src={manifest.entry.module} type="module" />
+        <script {...props} src={manifest.entry.module} type="module" />
       </>
     );
     // disabled deps array because we are purposefully only rendering this once
@@ -734,7 +752,12 @@ window.__remixRouteModules = {${matches
   return (
     <>
       {dedupe(preloads).map(path => (
-        <link key={path} rel="modulepreload" href={path} />
+        <link
+          key={path}
+          rel="modulepreload"
+          href={path}
+          crossOrigin={props.crossOrigin}
+        />
       ))}
       {initialScripts}
     </>