fix: event handling for headless components

Author: Varixo

packages/qwik/src/core/shared/component-execution.ts

@@ -24,9 +24,10 @@ import {
   USE_ON_LOCAL_SEQ_IDX,
 } from './utils/markers';
 import { MAX_RETRY_ON_PROMISE_COUNT, isPromise, maybeThen, safeCall } from './utils/promises';
-import type { ValueOrPromise } from './utils/types';
+import { isArray, isPrimitive, type ValueOrPromise } from './utils/types';
 import { getSubscriber } from '../reactive-primitives/subscriber';
 import { EffectProperty } from '../reactive-primitives/types';
+import { EventNameJSXScope } from './utils/event-names';
 
 /**
  * Use `executeComponent` to execute a component.
@@ -170,7 +171,10 @@ function addUseOnEvents(
             if (jsxElement) {
               addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]);
             }
-          } else if (key.startsWith('document:') || key.startsWith('window:')) {
+          } else if (
+            key.startsWith(EventNameJSXScope.document) ||
+            key.startsWith(EventNameJSXScope.window)
+          ) {
             const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
             jsxResult = jsx;
             if (jsxElement) {
@@ -186,7 +190,11 @@ function addUseOnEvents(
             );
           }
         } else if (jsxElement) {
-          addUseOnEvent(jsxElement, key, useOnEvents[key]);
+          if (jsxElement.type === 'script' && key === 'onQvisible$') {
+            addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]);
+          } else {
+            addUseOnEvent(jsxElement, key, useOnEvents[key]);
+          }
         }
       }
     }
@@ -222,7 +230,7 @@ function findFirstStringJSX(jsx: JSXOutput): ValueOrPromise<JSXNodeInternal<stri
         return jsx as JSXNodeInternal<string>;
       }
       queue.push(jsx.children);
-    } else if (Array.isArray(jsx)) {
+    } else if (isArray(jsx)) {
       queue.push(...jsx);
     } else if (isPromise(jsx)) {
       return maybeThen<JSXOutput, JSXNodeInternal<string> | null>(jsx, (jsx) =>
@@ -239,33 +247,40 @@ function addScriptNodeForInvisibleComponents(
   jsx: JSXOutput
 ): [JSXNodeInternal<string> | null, JSXOutput | null] {
   if (isJSXNode(jsx)) {
-    const jsxElement = new JSXNodeImpl(
-      'script',
-      {},
-      {
-        type: 'placeholder',
-        hidden: '',
-      },
-      null,
-      3
-    );
+    const jsxElement = createScriptNode();
     if (jsx.type === Slot) {
       return [jsxElement, _jsxSorted(Fragment, null, null, [jsx, jsxElement], 0, null)];
     }
 
     if (jsx.children == null) {
       jsx.children = jsxElement;
-    } else if (Array.isArray(jsx.children)) {
+    } else if (isArray(jsx.children)) {
       jsx.children.push(jsxElement);
     } else {
       jsx.children = [jsx.children, jsxElement];
     }
     return [jsxElement, jsx];
-  } else if (Array.isArray(jsx) && jsx.length) {
+  } else if (isArray(jsx) && jsx.length) {
     // get first element
     const [jsxElement, _] = addScriptNodeForInvisibleComponents(jsx[0]);
     return [jsxElement, jsx];
+  } else if (isPrimitive(jsx)) {
+    const jsxElement = createScriptNode();
+    return [jsxElement, _jsxSorted(Fragment, null, null, [jsx, jsxElement], 0, null)];
   }
 
-  return [null, null];
+  return [null, jsx];
+}
+
+function createScriptNode(): JSXNodeInternal<string> {
+  return new JSXNodeImpl(
+    'script',
+    {},
+    {
+      type: 'placeholder',
+      hidden: '',
+    },
+    null,
+    3
+  );
 }

packages/qwik/src/core/shared/utils/types.ts

@@ -24,6 +24,17 @@ export const isFunction = <T extends (...args: any) => any>(v: unknown): v is T
   return typeof v === 'function';
 };
 
+export const isPrimitive = (v: unknown): v is string | number | boolean | null | undefined => {
+  return (
+    v === null ||
+    v === undefined ||
+    typeof v === 'string' ||
+    typeof v === 'number' ||
+    typeof v === 'boolean' ||
+    typeof v === 'symbol'
+  );
+};
+
 /**
  * Type representing a value which is either resolve or a promise.
  *

packages/qwik/src/core/tests/use-visible-task.spec.tsx

@@ -367,6 +367,44 @@ describe.each([
     });
   });
 
+  it('should add q:visible event if only script tag is present', async () => {
+    (globalThis as any).counter = 0;
+    const Cmp = component$(() => {
+      useVisibleTask$(() => {
+        (globalThis as any).counter++;
+      });
+      return <script />;
+    });
+
+    const { document } = await render(<Cmp />, { debug });
+    if (render === ssrRenderToDom) {
+      await trigger(document.body, 'script', ':document:qinit');
+    }
+
+    expect((globalThis as any).counter).toBe(1);
+
+    (globalThis as any).counter = undefined;
+  });
+
+  it('should add script tag for visible task if only primitive child is present', async () => {
+    (globalThis as any).counter = 0;
+    const Cmp = component$(() => {
+      useVisibleTask$(() => {
+        (globalThis as any).counter++;
+      });
+      return 123;
+    });
+
+    const { document } = await render(<Cmp />, { debug });
+    if (render === ssrRenderToDom) {
+      await trigger(document.body, 'script[hidden]', ':document:qinit');
+    }
+
+    expect((globalThis as any).counter).toBe(1);
+
+    (globalThis as any).counter = undefined;
+  });
+
   describe(render.name + ': queue', () => {
     it('should execute dependant visible tasks', async () => {
       (globalThis as any).log = [] as string[];