feat(qwikloader): unregister unused event types

Author: wmertens

packages/qwik/src/qwikloader.ts

@@ -48,10 +48,20 @@ type qWindow = Window & {
 
   const isPromise = (promise: Promise<any>) => promise && typeof promise.then === 'function';
 
+  // Give a grace period before unregistering the event listener
+  let doNotClean = true;
   const broadcast = (infix: string, ev: Event, type = ev.type) => {
-    querySelectorAll('[on' + infix + '\\:' + type + ']').forEach((el) =>
-      dispatch(el, infix, ev, type)
-    );
+    let found = doNotClean;
+    querySelectorAll('[on' + infix + '\\:' + type + ']').forEach((el) => {
+      found = true;
+      dispatch(el, infix, ev, type);
+    });
+    if (!found) {
+      window[infix.slice(1) as 'window' | 'document'].removeEventListener(
+        type,
+        infix === '-window' ? processWindowEvent : processDocumentEvent
+      );
+    }
   };
 
   const resolveContainer = (containerEl: QContainerElement) => {
@@ -209,7 +219,7 @@ type qWindow = Window & {
         await results;
       }
       // if another async handler stopPropagation
-      cancelBubble =
+      cancelBubble ||=
         cancelBubble || ev.cancelBubble || element.hasAttribute('stoppropagation:' + ev.type);
       element = ev.bubbles && cancelBubble !== true ? element.parentElement : null;
     }
@@ -251,10 +261,18 @@ type qWindow = Window & {
     handler: (ev: Event) => void,
     capture = false
   ) => {
-    return el.addEventListener(eventName, handler, { capture, passive: false });
+    el.addEventListener(eventName, handler, { capture, passive: false });
   };
 
+  let cleanTimer: NodeJS.Timeout;
   const processEventOrNode = (...eventNames: (string | (EventTarget & ParentNode))[]) => {
+    doNotClean = true;
+    clearTimeout(cleanTimer);
+    /**
+     * Give 20s to have nodes appear that use this event. Newly added nodes will have listeners
+     * attached by the DOM renderer so won't use the qwikloader.
+     */
+    cleanTimer = setTimeout(() => (doNotClean = false), 20_000);
     for (const eventNameOrNode of eventNames) {
       if (typeof eventNameOrNode === 'string') {
         // If it is string we just add the event to window and each of our roots.
@@ -277,13 +295,19 @@ type qWindow = Window & {
     }
   };
 
+  // Only the first qwikloader will handle events
   if (!('__q_context__' in doc)) {
     // Mark qwik-loader presence but falsy
     doc.__q_context__ = 0;
     const qwikevents = win.qwikevents;
     // If `qwikEvents` is an array, process it.
-    if (Array.isArray(qwikevents)) {
-      processEventOrNode(...qwikevents);
+    if (qwikevents) {
+      if (Array.isArray(qwikevents)) {
+        processEventOrNode(...qwikevents);
+      } else {
+        // Assume that there will probably be click or input listeners
+        processEventOrNode('click', 'input');
+      }
     }
     // Now rig up `qwikEvents` so we get notified of new registrations by other containers.
     win.qwikevents = {

packages/qwik/src/qwikloader.unit.ts

@@ -21,8 +21,13 @@ 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]).toMatchInlineSnapshot(`
+    [
+      1508,
+      3303,
+    ]
+  `);
   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=>{w(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=>b(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}),b=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);if(l){const n=e.closest("[q\\\\:container]"),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),b=l.href,h=l.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",q=performance.now();let _,d,y;const w=p.startsWith("#"),g={qBase:r,qManifest:a,qVersion:s,href:b,symbol:h,element:e,reqTime:q};if(w){const e=n.getAttribute("q:instance");_=(t["qFuncs_"+e]||[])[Number.parseInt(h)],_||(d="sync",y=Error("sym:"+h))}else{u("qsymbol",g);const t=l.href.split("#")[0];try{const e=import(t);f(n),_=(await e)[h],_||(d="no-symbol",y=Error(\`\${h} not in \${t}\`))}catch(t){d||(d="async"),y=t}}if(!_){u("qerror",{importError:d,error:y,...g}),console.error(y);break}const m=t.__q_context__;if(e.isConnected)try{t.__q_context__=[e,o,l];const n=_(o,e);c(n)&&await n}catch(t){u("qerror",{error:t,...g})}finally{t.__q_context__=m}}}},u=(e,n)=>{t.dispatchEvent(p(e,n))},h=t=>t.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())),q=async t=>{let e=h(t.type),n=t.target;for(l("-document",t,e);n&&n.getAttribute;){const o=b(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,h(t.type))},d=()=>{var s;const c=t.readyState;if(!r&&("interactive"==c||"complete"==c)&&(o.forEach(i),r=1,u("qinit"),(null!=(s=e.requestIdleCallback)?s:e.setTimeout).bind(e)((()=>u("qidle"))),n.has("qvisible"))){const t=a("[on\\\\:qvisible]"),e=new IntersectionObserver((t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),b(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}),w=(...t)=>{for(const r of t)"string"==typeof r?n.has(r)||(o.forEach((t=>y(t,r,q,!0))),y(e,r,_,!0),n.add(r)):o.has(r)||(n.forEach((t=>y(r,t,q,!0))),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;Array.isArray(r)&&w(...r),e.qwikevents={events:n,roots:o,push:w},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)),i=t=>{const e=[];return o.forEach((n=>e.push(...s(n,t)))),e},a=t=>{g(t),s(t,"[q\\\\:shadowroot]").forEach((t=>{const e=t.shadowRoot;e&&a(e)}))},c=t=>t&&"function"==typeof t.then;let l=!0;const f=(t,e,n=e.type)=>{let o=l;i("[on"+t+"\\\\:"+n+"]").forEach((r=>{o=!0,b(r,t,e,n)})),o||window[t.slice(1)].removeEventListener(n,"-window"===t?d:_)},p=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}}},u=(t,e)=>new CustomEvent(t,{detail:e}),b=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 i=e._qc_,a=i&&i.li.filter((t=>t[0]===s));if(a&&a.length>0){for(const t of a){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);if(l){const n=e.closest("[q\\\\:container]"),r=n.getAttribute("q:base"),s=n.getAttribute("q:version")||"unknown",i=n.getAttribute("q:manifest-hash")||"dev",a=new URL(r,t.baseURI);for(const f of l.split("\\n")){const l=new URL(f,a),u=l.href,b=l.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",q=performance.now();let _,d,w;const m=f.startsWith("#"),y={qBase:r,qManifest:i,qVersion:s,href:u,symbol:b,element:e,reqTime:q};if(m){const e=n.getAttribute("q:instance");_=(t["qFuncs_"+e]||[])[Number.parseInt(b)],_||(d="sync",w=Error("sym:"+b))}else{h("qsymbol",y);const t=l.href.split("#")[0];try{const e=import(t);p(n),_=(await e)[b],_||(d="no-symbol",w=Error(\`\${b} not in \${t}\`))}catch(t){d||(d="async"),w=t}}if(!_){h("qerror",{importError:d,error:w,...y}),console.error(w);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){h("qerror",{error:t,...y})}finally{t.__q_context__=g}}}},h=(e,n)=>{t.dispatchEvent(u(e,n))},q=t=>t.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())),_=async t=>{let e=q(t.type),n=t.target;for(f("-document",t,e);n&&n.getAttribute;){const o=b(n,"",t,e);let r=t.cancelBubble;c(o)&&await o,r||(r=r||t.cancelBubble||n.hasAttribute("stoppropagation:"+t.type)),n=t.bubbles&&!0!==r?n.parentElement:null}},d=t=>{f("-window",t,q(t.type))},w=()=>{var s;const c=t.readyState;if(!r&&("interactive"==c||"complete"==c)&&(o.forEach(a),r=1,h("qinit"),(null!=(s=e.requestIdleCallback)?s:e.setTimeout).bind(e)((()=>h("qidle"))),n.has("qvisible"))){const t=i("[on\\\\:qvisible]"),e=new IntersectionObserver((t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),b(n.target,"",u("qvisible",n)))}));t.forEach((t=>e.observe(t)))}},m=(t,e,n,o=!1)=>{t.addEventListener(e,n,{capture:o,passive:!1})};let y;const g=(...t)=>{l=!0,clearTimeout(y),y=setTimeout((()=>l=!1),2e4);for(const r of t)"string"==typeof r?n.has(r)||(o.forEach((t=>m(t,r,_,!0))),m(e,r,d,!0),n.add(r)):o.has(r)||(n.forEach((t=>m(r,t,_,!0))),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;r&&(Array.isArray(r)?g(...r):g("click","input")),e.qwikevents={events:n,roots:o,push:g},m(t,"readystatechange",w),w()}})();"`
   );
 });

packages/qwik/src/server/render.ts

@@ -119,7 +119,6 @@ export async function renderToStream(
     : [];
 
   const includeMode = opts.qwikLoader?.include ?? 'auto';
-  const positionMode = opts.qwikLoader?.position ?? 'bottom';
   const qwikLoaderChunk = resolvedManifest?.manifest.qwikLoader;
   let didAddQwikLoader = false;
   if (includeMode !== 'never' && qwikLoaderChunk) {
@@ -133,15 +132,6 @@ export async function renderToStream(
     );
     didAddQwikLoader = true;
   }
-  if (positionMode === 'top') {
-    // Assume there will be at least click and input handlers
-    beforeContent.push(
-      jsx('script', {
-        // not all ESM browsers support ||=
-        dangerouslySetInnerHTML: `(window.qwikevents||(window.qwikevents=[])).push('click','input')`,
-      })
-    );
-  }
   preloaderPre(buildBase, resolvedManifest, opts.preloader, beforeContent, opts.serverData?.nonce);
 
   const renderTimer = createTimer();

packages/qwik/src/server/types.ts

@@ -124,7 +124,15 @@ export interface RenderResult {
 
 /** @public */
 export interface QwikLoaderOptions {
+  /**
+   * Whether to include the qwikloader script in the document. Normally you don't need to worry
+   * about this, but in case of multi-container apps using different Qwik versions, you might want
+   * to only enable it on one of the containers.
+   *
+   * Defaults to `'auto'`.
+   */
   include?: 'always' | 'never' | 'auto';
+  /** @deprecated No longer used, the qwikloader is always loaded as soon as possible */
   position?: 'top' | 'bottom';
 }