fix(core): qresume event + fix no-resume

Author: wmertens

packages/qwik/src/core/client/dom-container.ts

@@ -32,7 +32,7 @@ import {
   getQFuncs,
 } from '../shared/utils/markers';
 import { isSlotProp } from '../shared/utils/prop';
-import { qDev } from '../shared/utils/qdev';
+import { qDev, qTest } from '../shared/utils/qdev';
 import {
   convertScopedStyleIdsToArray,
   convertStyleIdsToString,
@@ -148,7 +148,9 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     this.$setServerData$();
     element.setAttribute(QContainerAttr, QContainerValue.RESUMED);
     element.qContainer = this;
-
+    if (!qTest && element.isConnected) {
+      element.dispatchEvent(new CustomEvent('qresume', { bubbles: true }));
+    }
     const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
     if (qwikStates.length !== 0) {
       const lastState = qwikStates[qwikStates.length - 1];

packages/qwik/src/core/index.ts

@@ -201,6 +201,7 @@ export type {
   KnownEventNames,
   QwikIdleEvent,
   QwikInitEvent,
+  QwikResumeEvent,
   QwikSymbolEvent,
   QwikTransitionEvent,
   QwikViewTransitionEvent,

packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts

@@ -4,6 +4,7 @@ import type { JSXNode } from './jsx-node';
 import type {
   QwikIdleEvent,
   QwikInitEvent,
+  QwikResumeEvent,
   QwikSymbolEvent,
   QwikViewTransitionEvent,
   QwikVisibleEvent,
@@ -66,6 +67,7 @@ type PascalCaseNames =
   | 'PointerUp'
   | 'QIdle'
   | 'QInit'
+  | 'QResume'
   | 'QSymbol'
   | 'QVisible'
   | 'QViewTransition'
@@ -120,6 +122,7 @@ type QwikDocumentEventMap = Omit<DocumentEventMap, keyof QwikHTMLElementEventMap
     qidle: QwikIdleEvent;
     qinit: QwikInitEvent;
     qsymbol: QwikSymbolEvent;
+    qresume: QwikResumeEvent;
     qviewtransition: QwikViewTransitionEvent;
   };
 type QwikWindowEventMap = Omit<WindowEventHandlersEventMap, keyof QwikDocumentEventMap> &

packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts

@@ -19,6 +19,11 @@ export type QwikSymbolEvent = CustomEvent<{
 export type QwikInitEvent = CustomEvent<{}>;
 /** Emitted by qwik-loader on document when the document first becomes idle @public */
 export type QwikIdleEvent = CustomEvent<{}>;
+/**
+ * Emitted by qwik-core on the container element when it resumes from a paused state. You cannot put
+ * a Qwik event handler on the container so you must listen on the document instead. @public
+ */
+export type QwikResumeEvent = CustomEvent<{}>;
 /** Emitted by qwik-core on document when the a view transition start @public */
 export type QwikViewTransitionEvent = CustomEvent<ViewTransition>;
 /** Emitted by qwik-loader on document when there was an error loading a module @public */

packages/qwik/src/core/shared/jsx/types/jsx-types.unit.tsx

@@ -10,6 +10,7 @@ import type {
   QRLEventHandlerMulti,
   QwikHTMLElements,
   QwikIntrinsicElements,
+  QwikResumeEvent,
   QwikSVGElements,
   QwikViewTransitionEvent,
   QwikVisibleEvent,
@@ -216,6 +217,10 @@ describe('types', () => {
           expectTypeOf(ev).not.toBeAny();
           assertType<QwikViewTransitionEvent>(ev);
         }}
+        document:onQResume$={(ev) => {
+          expectTypeOf(ev).not.toBeAny();
+          assertType<QwikResumeEvent>(ev);
+        }}
       />
     </>;
   });

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

@@ -405,7 +405,7 @@ function setEvent(
      *
      * For internal qrls (starting with `_`) we assume that they do the right thing.
      */
-    if (!qrl.$symbol$.startsWith('_') && (qrl.$captureRef$ || qrl.$capture$)) {
+    if (!qrl.$symbol$.startsWith('_') && qrl.$captureRef$?.length) {
       qrl = createQRL(null, '_run', _run, null, null, [qrl]);
     }
     return qrlToString(serializationCtx, qrl);

packages/qwik/src/core/tests/error-handling.spec.tsx

@@ -104,10 +104,13 @@ describe.each([
 
   it('should handle error in event handler', async () => {
     const Cmp = component$(() => {
+      const counter = useSignal(0);
       return (
         <>
           <button
             onClick$={() => {
+              // Make sure we use scope to resume container
+              counter.value++;
               throw new Error('error');
             }}
           >

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

@@ -399,9 +399,12 @@ describe.each([
         return <></>;
       });
       const ReceiveChild = component$(() => {
+        const toggle = useSignal(true);
         useOnDocument(
           'child',
           $(() => {
+            // grab some scope to go via scheduler
+            toggle.value = false;
             (globalThis as any).receivedLog.push('child event');
           })
         );

starters/apps/e2e/src/components/no-resume/no-resume.tsx

@@ -1,13 +1,23 @@
-import { component$ } from "@qwik.dev/core";
+import { component$, useSignal } from "@qwik.dev/core";
 
 export const NoResume = component$(() => {
+  const sig = useSignal(0);
   return (
-    <button
-      onClick$={() => {
-        document.body.style.background = "black";
-      }}
-    >
-      Click me
-    </button>
+    <>
+      <div>This turns red on resume</div>
+      <button
+        document:onQResume$={() => {
+          document.body.style.color = "red";
+        }}
+        onClick$={() => {
+          document.body.style.background = "black";
+        }}
+        onDblClick$={() => {
+          sig.value++;
+        }}
+      >
+        Click me {sig.value}
+      </button>
+    </>
   );
 });

starters/e2e/noresume.e2e.ts

@@ -17,5 +17,10 @@ test.describe("no resume", () => {
 
     const body = page.locator("body");
     await expect(body).toHaveCSS("background-color", "rgb(0, 0, 0)");
+    // Ensure that the click did not cause resume
+    await expect(body).not.toHaveCSS("background-color", "rgb(255, 0, 0)");
+    await button.dblclick();
+    // Ensure that the double click did cause resume
+    await expect(body).toHaveCSS("color", "rgb(255, 0, 0)");
   });
 });