fix: the useOn hook not working with Slot

packages/qwik/src/core/client/vnode-diff.ts

@@ -11,7 +11,7 @@ import {
   type Props,
 } from '../shared/jsx/jsx-runtime';
 import { Slot } from '../shared/jsx/slot.public';
-import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
+import type { JSXNode, JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
 import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes';
 import { SSRComment, SSRRaw, SkipRender } from '../shared/jsx/utils.public';
 import { trackSignalAndAssignHost } from '../use/use-core';
@@ -228,6 +228,9 @@ export const vnode_diff = (
                   // nothing to project, so try to render the Slot default content.
                   descend(jsxValue.children, true);
                 }
+                if ((jsxValue.children as JSXNode)?.type === 'script') {
+                  descend(jsxValue.children, true);
+                }
               } else if (type === Projection) {
                 expectProjection();
                 descend(jsxValue.children, true);
@@ -500,6 +503,7 @@ export const vnode_diff = (
         (vNewNode = vnode_newVirtual()),
         vCurrent && getInsertBefore()
       );
+
       vnode_setProp(vNewNode, QSlot, slotNameKey);
       vHost && vnode_setProp(vHost, slotNameKey, vNewNode);
       isDev && vnode_setProp(vNewNode, DEBUG_TYPE, VirtualType.Projection);

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

@@ -245,14 +245,18 @@ function processJSXNode(
             const node = ssr.getLastNode();
             const slotName = getSlotName(host, jsx, ssr);
             projectionAttrs.push(QSlot, slotName);
+
             enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame));
             enqueue(ssr.closeProjection);
             const slotDefaultChildren: JSXChildren | null = jsx.children || null;
             const slotChildren =
               componentFrame.consumeChildrenForSlot(node, slotName) || slotDefaultChildren;
-            if (slotDefaultChildren && slotChildren !== slotDefaultChildren) {
+            if ((slotDefaultChildren as JSXNodeInternal)?.type === 'script') {
+              enqueue(slotDefaultChildren as JSXOutput);
+            } else if (slotDefaultChildren && slotChildren !== slotDefaultChildren) {
               ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren);
             }
+            // enqueue(slotDefaultChildren as JSXOutput);
             enqueue(slotChildren as JSXOutput);
             enqueue(
               new ParentComponentData(
@@ -300,7 +304,8 @@ function processJSXNode(
             options.styleScoped,
             options.parentComponentFrame
           );
-          const jsxOutput = applyQwikComponentBody(ssr, jsx, type);
+
+          const jsxOutput: any = applyQwikComponentBody(ssr, jsx, type);
           const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
           enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame));
           enqueue(ssr.closeComponent);

packages/qwik/src/core/tests/use-on.spec.tsx

@@ -5,6 +5,7 @@ import {
   component$,
   Fragment,
   Fragment as Signal,
+  Slot,
   useOn,
   useOnDocument,
   useOnWindow,
@@ -647,4 +648,24 @@ describe.each([
     await trigger(document.body, 'div', 'click');
     await expect(document.querySelector('div')).toMatchDOM(<div>1</div>);
   });
+  it('useOnDocument1111', async () => {
+    const BreakpointProvider = component$(() => {
+      useOnDocument(
+        'click',
+        $(async () => {})
+      );
+
+      return <Slot />;
+    });
+
+    const Layout = component$(() => {
+      return (
+        <BreakpointProvider>
+          <div>test</div>
+        </BreakpointProvider>
+      );
+    });
+    const { document } = await render(<Layout />, { debug });
+    await expect(document.querySelector('script')).toBeTruthy();
+  });
 });