add the dev preloader

libs/qwikdev-astro/server.ts

@@ -31,7 +31,10 @@ function isInlineComponent(component: unknown): boolean {
   }
   const codeStr = component?.toString().toLowerCase();
   const qwikJsxIdentifiers = ["_jsxq", "_jsxc", "_jsxs", "jsxsplit"];
-  return qwikJsxIdentifiers.some(id => codeStr.includes(id)) && component.name !== "QwikComponent";
+  return (
+    qwikJsxIdentifiers.some((id) => codeStr.includes(id)) &&
+    component.name !== "QwikComponent"
+  );
 }
 
 function isQwikComponent(component: unknown) {
@@ -69,14 +72,27 @@ export async function renderToStaticMarkup(
     }
 
     let html = "";
+    const devUrls = new Set<string>();
 
     const renderToStreamOpts: RenderToStreamOptions = {
-      containerAttributes: { style: "display: contents" },
+      containerAttributes: {
+        style: "display: contents",
+        ...(isDev && { "q-astro-marker": "" })
+      },
       containerTagName: "div",
       ...(isDev
         ? {
             manifest: {} as QwikManifest,
-            symbolMapper: globalThis.symbolMapperFn
+            symbolMapper: (symbolName, mapper, parent) => {
+              const devUrl =
+                this.result.request.url.slice(0, -1) + parent + "_" + symbolName + ".js";
+              devUrls.add(devUrl);
+
+              // this determines if the container is the last one
+              renderToStreamOpts.containerAttributes!["q-astro-marker"] = "last";
+
+              return globalThis.symbolMapperFn(symbolName, mapper, parent);
+            }
           }
         : {
             manifest: globalThis.qManifest
@@ -164,6 +180,26 @@ export async function renderToStaticMarkup(
 
     await renderToStream(qwikComponentJSX, renderToStreamOpts);
 
+    // we only want to add the preloader script if the container is the last one
+    if (isDev && devUrls.size > 0) {
+      const preloaderScript = `<script q-astro-dev-preloader>
+        window.addEventListener("load",()=>{
+          const symbols = ${JSON.stringify(Array.from(devUrls))};
+          symbols.forEach(symbol => {
+            const link = document.createElement('link');
+            link.rel = 'modulepreload';
+            link.href = symbol;
+            link.fetchPriority = 'low';
+            document.head.appendChild(link);
+          });
+        });
+      </script>`;
+
+      if (html.includes('q-astro-marker="last"')) {
+        html += preloaderScript;
+      }
+    }
+
     const isClientRouter = Array.from(this.result._metadata.renderedScripts).some(
       (path) => path.includes("ClientRouter.astro")
     );
@@ -181,7 +217,7 @@ export async function renderToStaticMarkup(
       isClientRouter &&
       htmlWithRerun +
         `
-      ${isQwikLoaderNeeded ? `<script data-qwik-astro-client-router>document.addEventListener('astro:after-swap',()=>{const e=document.querySelectorAll('[on\\\\:qvisible]');if(e.length){const o=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(e.target.dispatchEvent(new CustomEvent('qvisible')),o.unobserve(e.target))})});e.forEach(e=>o.observe(e))}});</script>` : ''}
+      ${isQwikLoaderNeeded ? `<script data-qwik-astro-client-router>document.addEventListener('astro:after-swap',()=>{const e=document.querySelectorAll('[on\\\\:qvisible]');if(e.length){const o=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(e.target.dispatchEvent(new CustomEvent('qvisible')),o.unobserve(e.target))})});e.forEach(e=>o.observe(e))}});</script>` : ""}
     `;
 
     return {
@@ -197,4 +233,4 @@ export default {
   renderToStaticMarkup,
   supportsAstroStaticSlot: true,
   check
-};
+};