fix(v2): more useOn fixes

QwikDev · Jul 23, 2024 · 4dd10f8 · 4dd10f8
1 parent a805502
commit 4dd10f8
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git a/packages/qwik/src/core/v2/shared/component-execution.ts b/packages/qwik/src/core/v2/shared/component-execution.ts
@@ -145,9 +145,16 @@ function addUseOnEvents(
             if (jsxElement) {
               addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]);
             }
+          } else if (key.startsWith('document:') || key.startsWith('window:')) {
+            jsxElement = addScriptNodeForInvisibleComponents(jsx);
+            if (jsxElement) {
+              addUseOnEvent(jsxElement, key, useOnEvents[key]);
+            }
           } else if (isDev) {
             logWarn(
-              'You are trying to add an event using `useOn` hook, ' +
+              'You are trying to add an event "' +
+                key +
+                '" using `useOn` hook, ' +
                 'but a node to which you can add an event is not found. ' +
                 'Please make sure that the component has a valid element node. '
             );

diff --git a/packages/qwik/src/core/v2/tests/use-on.spec.tsx b/packages/qwik/src/core/v2/tests/use-on.spec.tsx
@@ -228,6 +228,35 @@ describe.each([
       );
     });
 
+    it('should work with empty component', async () => {
+      const Counter = component$((props: { initial: number }) => {
+        const count = useSignal(props.initial);
+        useOnDocument(
+          'click',
+          $(() => count.value++)
+        );
+        return <>Count: {count.value}!</>;
+      });
+
+      const { vNode, container } = await render(<Counter initial={123} />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <Fragment>
+            Count: <Signal>{'123'}</Signal>!<script type="placeholder" hidden></script>
+          </Fragment>
+        </Component>
+      );
+
+      await trigger(container.element, 'script', ':document:click');
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <Fragment>
+            Count: <Signal>{'124'}</Signal>!<script type="placeholder" hidden></script>
+          </Fragment>
+        </Component>
+      );
+    });
+
     it('should update value with mixed listeners', async () => {
       const Counter = component$((props: { initial: number }) => {
         const count = useSignal(props.initial);
@@ -295,6 +324,35 @@ describe.each([
       );
     });
 
+    it('should work with empty component', async () => {
+      const Counter = component$((props: { initial: number }) => {
+        const count = useSignal(props.initial);
+        useOnWindow(
+          'click',
+          $(() => count.value++)
+        );
+        return <>Count: {count.value}!</>;
+      });
+
+      const { vNode, container } = await render(<Counter initial={123} />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <Fragment>
+            Count: <Signal>{'123'}</Signal>!<script type="placeholder" hidden></script>
+          </Fragment>
+        </Component>
+      );
+
+      await trigger(container.element, 'script', ':window:click');
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <Fragment>
+            Count: <Signal>{'124'}</Signal>!<script type="placeholder" hidden></script>
+          </Fragment>
+        </Component>
+      );
+    });
+
     it('should update value for window event on element and useOnWindow', async () => {
       const Counter = component$((props: { initial: number }) => {
         const count = useSignal(props.initial);