fixup

Author: wmertens

packages/qwik/src/core/preloader/preloader.unit.ts

@@ -21,5 +21,5 @@ test('preloader script', () => {
    * dereference objects etc, but that actually results in worse compression
    */
   const compressed = compress(Buffer.from(preLoader), { mode: 1, quality: 11 });
-  expect([compressed.length, preLoader.length]).toEqual([1878, 5614]);
+  expect([compressed.length, preLoader.length]).toEqual([1867, 5537]);
 });

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -169,6 +169,7 @@ function processJSXNode(
         enqueue(ssr.closeElement);
 
         if (type === 'head') {
+          ssr.emitPreloaderPre();
           enqueue(ssr.additionalHeadNodes);
           enqueue(ssr.emitQwikLoaderAtTopIfNeeded);
         } else if (type === 'body') {

packages/qwik/src/core/ssr/ssr-types.ts

@@ -96,6 +96,8 @@ export interface SSRContainer extends Container {
   isStatic(): boolean;
   render(jsx: JSXOutput): Promise<void>;
 
+  emitPreloaderPre(): void;
+
   emitQwikLoaderAtTopIfNeeded(): void;
 }
 

packages/qwik/src/core/tests/render-api.spec.tsx

@@ -511,6 +511,7 @@ describe('render api', () => {
       });
     });
     describe('preloader', () => {
+      // we need a test with a built manifest
       it('should render', async () => {
         const result = await renderToStringAndSetPlatform(<Counter />, {
           containerTagName: 'div',
@@ -519,8 +520,9 @@ describe('render api', () => {
         const document = createDocument({ html: result.html });
         const preloadScript = document.querySelectorAll('script[q\\:type=preload]');
         expect(preloadScript).toHaveLength(1);
-        expect(preloadScript[0]?.textContent).toContain(`createElement('link')`);
-        expect(preloadScript[0]?.textContent).toContain(`bundle-graph`);
+        expect(preloadScript[0]?.textContent).toContain(`import(`);
+        // no bundlegraph because no manifest
+        // expect(preloadScript[0]?.textContent).toContain(`bundle-graph`);
         expect(document.querySelectorAll('link')).toHaveLength(0);
       });
     });

packages/qwik/src/qwikloader.unit.ts

@@ -21,8 +21,8 @@ test('qwikloader script', () => {
    * dereference objects etc, but that actually results in worse compression
    */
   const compressed = compress(Buffer.from(qwikLoader), { mode: 1, quality: 11 });
-  expect([compressed.length, qwikLoader.length]).toEqual([1421, 3118]);
+  expect([compressed.length, qwikLoader.length]).toEqual([1454, 3208]);
   expect(qwikLoader).toMatchInlineSnapshot(
-    `"(()=>{const t=document,e=window,n=new Set,o=new Set([t]);let r;const s=(t,e)=>Array.from(t.querySelectorAll(e)),a=t=>{const e=[];return o.forEach((n=>e.push(...s(n,t)))),e},i=t=>{m(t),s(t,"[q\\\\:shadowroot]").forEach((t=>{const e=t.shadowRoot;e&&i(e)}))},c=t=>t&&"function"==typeof t.then,l=(t,e,n=e.type)=>{a("[on"+t+"\\\\:"+n+"]").forEach((o=>u(o,t,e,n)))},f=e=>{if(void 0===e._qwikjson_){let n=(e===t.documentElement?t.body:e).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n.getAttribute("type")){e._qwikjson_=JSON.parse(n.textContent.replace(/\\\\x3C(\\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},p=(t,e)=>new CustomEvent(t,{detail:e}),u=async(e,n,o,r=o.type)=>{const s="on"+n+":"+r;e.hasAttribute("preventdefault:"+r)&&o.preventDefault(),e.hasAttribute("stoppropagation:"+r)&&o.stopPropagation();const a=e._qc_,i=a&&a.li.filter((t=>t[0]===s));if(i&&i.length>0){for(const t of i){const n=t[1].getFn([e,o],(()=>e.isConnected))(o,e),r=o.cancelBubble;c(n)&&await n,r&&o.stopPropagation()}return}const l=e.getAttribute(s),p=e.qDispatchEvent;if(p)return p(o,n);if(l){const n=e.closest("[q\\\\:container]:not([q\\\\:container=html]):not([q\\\\:container=text])"),r=n.getAttribute("q:base"),s=n.getAttribute("q:version")||"unknown",a=n.getAttribute("q:manifest-hash")||"dev",i=new URL(r,t.baseURI);for(const p of l.split("\\n")){const l=new URL(p,i),u=l.href,q=l.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",h=performance.now();let _,d,y;const m=p.startsWith("#"),w={qBase:r,qManifest:a,qVersion:s,href:u,symbol:q,element:e,reqTime:h};if(m){const e=n.getAttribute("q:instance");_=(t["qFuncs_"+e]||[])[Number.parseInt(q)],_||(d="sync",y=Error("sym:"+q))}else{const t=l.href.split("#")[0];try{const e=import(t);f(n),_=(await e)[q],_||(d="no-symbol",y=Error(\`\${q} not in \${t}\`))}catch(t){d||(d="async"),y=t}}if(!_){b("qerror",{importError:d,error:y,...w}),console.error(y);break}const g=t.__q_context__;if(e.isConnected)try{t.__q_context__=[e,o,l],m||b("qsymbol",{...w});const n=_(o,e);c(n)&&await n}catch(t){b("qerror",{error:t,...w})}finally{t.__q_context__=g}}}},b=(e,n)=>{t.dispatchEvent(p(e,n))},q=t=>t.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())),h=async t=>{let e=q(t.type),n=t.target;for(l("-document",t,e);n&&n.getAttribute;){const o=u(n,"",t,e);let r=t.cancelBubble;c(o)&&await o,r=r||t.cancelBubble||n.hasAttribute("stoppropagation:"+t.type),n=t.bubbles&&!0!==r?n.parentElement:null}},_=t=>{l("-window",t,q(t.type))},d=()=>{var s;const c=t.readyState;if(!r&&("interactive"==c||"complete"==c)&&(o.forEach(i),r=1,b("qinit"),(null!=(s=e.requestIdleCallback)?s:e.setTimeout).bind(e)((()=>b("qidle"))),n.has("qvisible"))){const t=a("[on\\\\:qvisible]"),e=new IntersectionObserver((t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),u(n.target,"",p("qvisible",n)))}));t.forEach((t=>e.observe(t)))}},y=(t,e,n,o=!1)=>t.addEventListener(e,n,{capture:o,passive:!1}),m=(...t)=>{for(const r of t)"string"==typeof r?n.has(r)||(o.forEach((t=>y(t,r,h,!0))),y(e,r,_,!0),n.add(r)):o.has(r)||(n.forEach((t=>y(r,t,h,!0))),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;Array.isArray(r)&&m(...r),e.qwikevents={events:n,roots:o,push:m},y(t,"readystatechange",d),d()}})();"`
+    `"(()=>{const t=document,e=window,n=new Set,o=new Set([t]);let r;const s=(t,e)=>Array.from(t.querySelectorAll(e)),a=t=>{const e=[];return o.forEach((n=>e.push(...s(n,t)))),e},i=t=>{m(t),s(t,"[q\\\\:shadowroot]").forEach((t=>{const e=t.shadowRoot;e&&i(e)}))},c=t=>t&&"function"==typeof t.then,l=(t,e,n=e.type)=>{a("[on"+t+"\\\\:"+n+"]").forEach((o=>u(o,t,e,n)))},f=e=>{if(void 0===e._qwikjson_){let n=(e===t.documentElement?t.body:e).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n.getAttribute("type")){e._qwikjson_=JSON.parse(n.textContent.replace(/\\\\x3C(\\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},p=(t,e)=>new CustomEvent(t,{detail:e}),u=async(e,n,o,r=o.type)=>{const s="on"+n+":"+r;e.hasAttribute("preventdefault:"+r)&&o.preventDefault(),e.hasAttribute("stoppropagation:"+r)&&o.stopPropagation();const a=e._qc_,i=a&&a.li.filter((t=>t[0]===s));if(i&&i.length>0){for(const t of i){const n=t[1].getFn([e,o],(()=>e.isConnected))(o,e),r=o.cancelBubble;c(n)&&await n,r&&o.stopPropagation()}return}const l=e.getAttribute(s),p=e.qDispatchEvent;if(p)return p(o,n);if(l){const n=e.closest("[q\\\\:container]:not([q\\\\:container=html]):not([q\\\\:container=text])"),r=n.getAttribute("q:base"),s=n.getAttribute("q:version")||"unknown",a=n.getAttribute("q:manifest-hash")||"dev",i=new URL(r,t.baseURI);for(const p of l.split("\\n")){const l=new URL(p,i),u=l.href,q=l.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",h=performance.now();let _,d,y;const m=p.startsWith("#"),w={qBase:r,qManifest:a,qVersion:s,href:u,symbol:q,element:e,reqTime:h};if(m){const e=n.getAttribute("q:instance");_=(t["qFuncs_"+e]||[])[Number.parseInt(q)],_||(d="sync",y=Error("sym:"+q))}else{b("qsymbol",w);const t=l.href.split("#")[0];try{const e=import(t);f(n),_=(await e)[q],_||(d="no-symbol",y=Error(\`\${q} not in \${t}\`))}catch(t){d||(d="async"),y=t}}if(!_){b("qerror",{importError:d,error:y,...w}),console.error(y);break}const g=t.__q_context__;if(e.isConnected)try{t.__q_context__=[e,o,l];const n=_(o,e);c(n)&&await n}catch(t){b("qerror",{error:t,...w})}finally{t.__q_context__=g}}}},b=(e,n)=>{t.dispatchEvent(p(e,n))},q=t=>t.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())),h=async t=>{let e=q(t.type),n=t.target;for(l("-document",t,e);n&&n.getAttribute;){const o=u(n,"",t,e);let r=t.cancelBubble;c(o)&&await o,r=r||t.cancelBubble||n.hasAttribute("stoppropagation:"+t.type),n=t.bubbles&&!0!==r?n.parentElement:null}},_=t=>{l("-window",t,q(t.type))},d=()=>{var s;const c=t.readyState;if(!r&&("interactive"==c||"complete"==c)&&(o.forEach(i),r=1,b("qinit"),(null!=(s=e.requestIdleCallback)?s:e.setTimeout).bind(e)((()=>b("qidle"))),n.has("qvisible"))){const t=a("[on\\\\:qvisible]"),e=new IntersectionObserver((t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),u(n.target,"",p("qvisible",n)))}));t.forEach((t=>e.observe(t)))}},y=(t,e,n,o=!1)=>t.addEventListener(e,n,{capture:o,passive:!1}),m=(...t)=>{for(const r of t)"string"==typeof r?n.has(r)||(o.forEach((t=>y(t,r,h,!0))),y(e,r,_,!0),n.add(r)):o.has(r)||(n.forEach((t=>y(r,t,h,!0))),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;Array.isArray(r)&&m(...r),e.qwikevents={events:n,roots:o,push:m},y(t,"readystatechange",d),d()}})();"`
   );
 });

packages/qwik/src/server/preload-impl.ts

@@ -47,6 +47,7 @@ export const preloaderPre = (
      * html download
      */
     container.openElement('link', null, ['rel', 'modulepreload', 'href', `${base}${preloadChunk}`]);
+    container.closeElement();
     container.openElement('link', null, [
       'rel',
       'preload',
@@ -57,6 +58,7 @@ export const preloaderPre = (
       'crossorigin',
       'anonymous',
     ]);
+    container.closeElement();
 
     const script =
       `let b=fetch("${base}q-bundle-graph-${hash}.json");` +