feat: prefetch link preloads

If a route exports `<link rel="preload">`, those are added as prefetches for `<Link prefetch>`. If the route says they are important enough to make high priority, then we can speed it up even more by prefetching before the user gets there.

This enables routes to tell links to prefetch any kind of asset without the linking component needing to know.

fixtures/gists-app/app/routes/index.jsx

@@ -40,7 +40,9 @@ export default function Index() {
       <nav>
         <ul>
           <li>
-            <Link to="/links">Link preloads and stuff</Link>
+            <Link prefetch="intent" to="/links">
+              Link preloads and stuff
+            </Link>
           </li>
           <li>
             <Link to="/gists">View Some gists</Link>

fixtures/gists-app/app/routes/links.tsx

@@ -3,6 +3,7 @@ import { useLoaderData, Link } from "remix";
 
 import redTextHref from "~/styles/redText.css";
 import blueTextHref from "~/styles/blueText.css";
+import guitar from "~/components/guitar.jpg";
 
 interface User {
   name: string;
@@ -30,7 +31,9 @@ export let links: LinksFunction = () => {
   // preload another page
   let pageLink = { page: `/gists/mjackson` };
 
-  return [styleLink, nonMatching, fails, pageLink];
+  let preloadGuitar = { rel: "preload", as: "image", href: guitar };
+
+  return [styleLink, nonMatching, fails, pageLink, preloadGuitar];
 };
 
 export default function LinksPage() {
@@ -45,23 +48,12 @@ export default function LinksPage() {
           </Link>
         </li>
       ))}
-      {/*
+
       <hr />
       <p>
-        <img alt="another guitar..." src={guitar.src} data-test-id="blocked" />
-        <br />
-        Preloaded and blocked guitar, no layout shift.
-      </p>
-      <p>
-        <img
-          alt="another guitar..."
-          src={notPreloadedGuitar.src}
-          data-test-id="not-blocked"
-        />
-        <br />
-        Not preloaded, not blocked, layout shift!
+        <img alt="a guitar" src={guitar} data-test-id="blocked" /> Prefetched
+        because it's a preload.
       </p>
-      */}
     </div>
   );
 }

packages/remix-react/links.ts

@@ -262,8 +262,13 @@ export async function getStylesheetPrefetchLinks(
   return links
     .flat(1)
     .filter(isHtmlLinkDescriptor)
-    .filter(link => link.rel === "stylesheet")
-    .map(({ rel, ...attrs }) => ({ rel: "prefetch", as: "style", ...attrs }));
+    .filter(link => link.rel === "stylesheet" || link.rel === "preload")
+    .map(({ rel, ...attrs }) => {
+      if (rel === "preload") {
+        return { rel: "prefetch", ...attrs };
+      }
+      return { rel: "prefetch", as: "style", ...attrs };
+    });
 }
 
 // This is ridiculously identical to transition.ts `filterMatchesToLoad`