feat(events): broadcast document level events.

Document level events such as `scroll` do not fire on any element. As a result it is not possible to add `on:scroll` to the DOM such that it would trigger. For this reason we treat `document` level events as global and broadcast them everywhere.
willkuerlich · Aug 11, 2021 · 62dba6f · 62dba6f
1 parent 502de34
commit 62dba6f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/cypress/integration/bootloader_spec.ts b/cypress/integration/bootloader_spec.ts
@@ -8,7 +8,7 @@
 
 /// <reference types="cypress" />
 
-describe('bootloader_spec', () => {
+describe('qwikloader_spec', () => {
   beforeEach(() => cy.visit('/specs/qwikloader_spec.html'));
   it('should register all events', () => {
     cy.get('#click_test > button').click();
@@ -23,4 +23,10 @@ describe('bootloader_spec', () => {
   it('should should set up `$init` event', () => {
     cy.get('#autofire_\\$init > pre').should((pre) => expect(pre).to.have.text('PASSED'));
   });
+
+  it('should broadcast document events', () => {
+    cy.get('#bottom').scrollIntoView();
+    cy.get('#broadcast_scroll').trigger('scroll');
+    cy.get('#broadcast_scroll > pre').should((pre) => expect(pre).to.have.text('PASSED'));
+  });
 });
diff --git a/integration/specs/qwikloader_spec.html b/integration/specs/qwikloader_spec.html
@@ -40,5 +40,18 @@ <h1>it should set up `$init` event</h1>
         Verify qwikloader correctly fires `$init` event on start.
       </pre>
     </test>
+
+    <h1>it should broadcast document events</h1>
+    <test id="broadcast_scroll">
+      <pre
+        on:scroll="base:qwikloader_spec#updateElement?selector=%23broadcast_scroll>pre&content=PASSED"
+      >
+        Verify qwikloader correctly fires `$init` event on start.
+      </pre>
+    </test>
+
+    <hr />
+    <div style="height: 100em"></div>
+    <hr id="bottom" />
   </body>
 </html>
diff --git a/src/bootloader-shared.ts b/src/bootloader-shared.ts
@@ -60,6 +60,10 @@ const error = (msg: string) => {
  *     determine all of the browser supported events.
  */
 export const qwikLoader = (doc: Document, hasInitialized?: boolean | number) => {
+  const broadcast = async (type: string, event: Event) => {
+    doc.querySelectorAll('[on\\:\\' + type + ']').forEach((target) => target.dispatchEvent(event));
+  };
+
   const getModuleExport = (url: URL, module: any, exportName?: string) => {
     // 1 - optional `#` at the start.
     // 2 - capture group `$1` containing the export name, stopping at the first `?`.
@@ -81,16 +85,22 @@ export const qwikLoader = (doc: Document, hasInitialized?: boolean | number) =>
    */
   const processEvent = async (ev: Event, element?: Element | null, url?: URL | null) => {
     element = ev.target as Element | null;
-
-    // while (element && element.getAttribute) {
-    // while (element && element.nodeType===1) {
-    while (element && element.getAttribute) {
-      url = qrlResolver(doc, element.getAttribute('on:' + ev.type));
-      if (url) {
-        const handler = getModuleExport(url, await import(url.pathname));
-        handler(element, ev, url);
+    if ((element as any) == doc) {
+      // This is a event which fires on document only, we have to broadcast it instead
+      // setTimeout. This is needed so we can dispatchEvent.
+      // Without this we would be dispatching event from within existing event.
+      setTimeout(() => broadcast(ev.type, ev));
+    } else {
+      // while (element && element.getAttribute) {
+      // while (element && element.nodeType===1) {
+      while (element && element.getAttribute) {
+        url = qrlResolver(doc, element.getAttribute('on:' + ev.type));
+        if (url) {
+          const handler = getModuleExport(url, await import(url.pathname));
+          handler(element, ev, url);
+        }
+        element = element.parentElement;
       }
-      element = element.parentElement;
     }
   };
 
@@ -102,6 +112,7 @@ export const qwikLoader = (doc: Document, hasInitialized?: boolean | number) =>
     readyState = doc.readyState;
     if (!hasInitialized && (readyState == 'interactive' || readyState == 'complete')) {
       hasInitialized = 1;
+      broadcast(qInit, new CustomEvent('qInit'));
       doc
         .querySelectorAll('[on\\:\\' + qInit + ']')
         .forEach((target) => target.dispatchEvent(new CustomEvent(qInit)));