fix: the use hook didn't work when type is Slot.

.changeset/old-mayflies-fetch.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: the use hook didn't work when type is Slot.

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

@@ -2,8 +2,8 @@ import { isDev } from '@qwik.dev/core/build';
 import { isQwikComponent, type OnRenderFn } from './component.public';
 import { assertDefined } from './error/assert';
 import { isQrl, type QRLInternal } from './qrl/qrl-class';
-import { JSXNodeImpl, isJSXNode, type Props } from './jsx/jsx-runtime';
-import type { JSXNodeInternal, JSXOutput } from './jsx/types/jsx-node';
+import { Fragment, JSXNodeImpl, _jsxSorted, isJSXNode, type Props } from './jsx/jsx-runtime';
+import type { FunctionComponent, JSXNodeInternal, JSXOutput } from './jsx/types/jsx-node';
 import type { KnownEventNames } from './jsx/types/jsx-qwik-events';
 import { invokeApply, newInvokeContext, untrack } from '../use/use-core';
 import { type EventQRL, type UseOnMap } from '../use/use-on';
@@ -23,6 +23,7 @@ import { logWarn } from './utils/log';
 import { EffectProperty, isSignal } from '../signal/signal';
 import { vnode_isVNode } from '../client/vnode';
 import { clearVNodeEffectDependencies } from '../signal/signal-subscriber';
+import { Slot } from '../shared/jsx/slot.public';
 
 /**
  * Use `executeComponent` to execute a component.
@@ -101,7 +102,13 @@ export const executeComponent = (
       (jsx) => {
         const useOnEvents = container.getHostProp<UseOnMap>(renderHost, USE_ON_LOCAL);
         if (useOnEvents) {
-          return maybeThen(addUseOnEvents(jsx, useOnEvents), () => jsx);
+          let _jsx = jsx;
+          if (_jsx && (_jsx as JSXNodeInternal<FunctionComponent>).type === Slot) {
+            _jsx = _jsxSorted(Fragment, null, null, [jsx], 0, null);
+          }
+          return maybeThen(addUseOnEvents(_jsx, useOnEvents), () => {
+            return _jsx;
+          });
         }
         return jsx;
       },

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

@@ -245,6 +245,7 @@ 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;
@@ -300,7 +301,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

@@ -2,9 +2,11 @@ import {
   $,
   Fragment as Awaited,
   Fragment as Component,
+  Fragment as Projection,
   component$,
   Fragment,
   Fragment as Signal,
+  Slot,
   useOn,
   useOnDocument,
   useOnWindow,
@@ -21,7 +23,7 @@ Error.stackTraceLimit = 100;
 
 describe.each([
   { render: ssrRenderToDom }, //
-  { render: domRender }, //
+  { render: domRender }, ///
 ])('$render.name: useOn', ({ render }) => {
   it('should update value', async () => {
     const Counter = component$((props: { initial: number }) => {
@@ -647,4 +649,76 @@ describe.each([
     await trigger(document.body, 'div', 'click');
     await expect(document.querySelector('div')).toMatchDOM(<div>1</div>);
   });
+
+  it('issue 7230, when multiple useOnWindow are used in a component that is not rendered, it should add multiple script nodes', async () => {
+    const BreakpointProvider = component$(() => {
+      useOnDocument(
+        'click',
+        $(() => {})
+      );
+
+      useOnWindow(
+        'resize',
+        $(() => {})
+      );
+
+      useVisibleTask$(() => {});
+
+      return <Slot />;
+    });
+
+    const LayoutTest = component$(() => {
+      return (
+        <BreakpointProvider>
+          <div>test</div>
+        </BreakpointProvider>
+      );
+    });
+    const { vNode } = await render(<LayoutTest />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Component ssr-required>
+          <Component ssr-required>
+            <Component ssr-required>
+              <div>test</div>
+            </Component>
+            <script type="placeholder" hidden></script>
+            <script type="placeholder" hidden></script>
+            <script type="placeholder" hidden></script>
+          </Component>
+        </Component>
+      </Component>
+    );
+  });
+  it('issue 7230, when useOnDocument is used in a component that is not rendered, it should add a script node', async () => {
+    const BreakpointProvider = component$(() => {
+      useOnDocument(
+        'click',
+        $(() => {})
+      );
+
+      return <Slot />;
+    });
+
+    const Layout = component$(() => {
+      return (
+        <BreakpointProvider>
+          <div>test</div>
+        </BreakpointProvider>
+      );
+    });
+    const { vNode } = await render(<Layout />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Component ssr-required>
+          <Component ssr-required>
+            <Projection ssr-required>
+              <div>test</div>
+            </Projection>
+            <script type="placeholder" hidden></script>
+          </Component>
+        </Component>
+      </Component>
+    );
+  });
 });