QwikDev · wmertens · Nov 7, 2025 · Nov 7, 2025 · Nov 7, 2025 · Nov 7, 2025
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+FIX: The types for the JSX event handlers are more precise about their scope (e.g. no `document:OnQVisible$` or `onQIdle$`).
@@ -7,8 +7,6 @@
   "devDependencies": {
     "@algolia/autocomplete-core": "1.7.4",
     "@algolia/client-search": "4.14.3",
-    "@builder.io/qwik": "npm:@qwik.dev/core@*",
-    "@builder.io/qwik-city": "npm:@qwik.dev/router@*",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@modular-forms/qwik": "0.29.1",

@@ -77,7 +77,7 @@ export const DocSearch = component$((props: DocSearchProps) => {
     <div
       class={{ docsearch: true, 'ai-result-open': aiResultOpen.value }}
       window:onKeyDown$={[
-        sync$((event: KeyboardEvent) => {
+        sync$((event) => {
           if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
             event.preventDefault();
           }

@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 
 interface BrillianceIconProps {
   class?: string;

@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 
 interface MoonIconProps {
   class?: string;

@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 
 interface SunIconProps {
   class?: string;

@@ -4,7 +4,7 @@
  * The effective theme is stored on the `<html>` element as a `data-theme` attribute. There is also
  * the `data-theme-auto` attribute which is present when the user has selected "auto" theme.
  */
-import { component$, event$, isServer, useContext, useStyles$ } from '@builder.io/qwik';
+import { component$, event$, isServer, useContext, useStyles$ } from '@qwik.dev/core';
 import { useVisibleTask$ } from '@qwik.dev/core';
 import { GlobalStore, type SiteStore } from '~/context';
 import { BrillianceIcon } from './Brilliance';

@@ -2805,7 +2805,7 @@ export type QRL<TYPE = unknown> = {
   getCaptured(): unknown[] | null;
   getSymbol(): string;
   getHash(): string;
-  dev: QRLDev | null;
+  dev?: QRLDev | null;
 } & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
 ```
 
@@ -2913,7 +2913,7 @@ export type QRL<TYPE = unknown> = {
   getCaptured(): unknown[] | null;
   getSymbol(): string;
   getHash(): string;
-  dev: QRLDev | null;
+  dev?: QRLDev | null;
 } & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
 ```
 
@@ -2928,8 +2928,7 @@ export type QRLEventHandlerMulti<EV extends Event, EL> =
   | QRL<EventHandler<EV, EL>>
   | undefined
   | null
-  | QRLEventHandlerMulti<EV, EL>[]
-  | EventHandler<EV, EL>;
+  | QRLEventHandlerMulti<EV, EL>[];
 ```
 
 **References:** [QRL](#qrl), [EventHandler](#eventhandler), [QRLEventHandlerMulti](#qrleventhandlermulti)
@@ -3262,6 +3261,16 @@ export type QwikPointerEvent<T = Element> = NativePointerEvent;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
 
+## QwikResumeEvent
+
+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.
+
+```typescript
+export type QwikResumeEvent = CustomEvent<{}>;
+```
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
+
 ## QwikSubmitEvent
 
 > Warning: This API is now obsolete.
@@ -3293,7 +3302,7 @@ export type QwikSVGElements = {
 
 ## QwikSymbolEvent
 
-Emitted by qwik-loader when a module was lazily loaded
+Emitted by qwik-loader on document when a module was lazily loaded
 
 ```typescript
 export type QwikSymbolEvent = CustomEvent<{
@@ -3351,9 +3360,19 @@ export type QwikUIEvent<T = Element> = NativeUIEvent;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
 
+## QwikViewTransitionEvent
+
+Emitted by qwik-core on document when the a view transition start
+
+```typescript
+export type QwikViewTransitionEvent = CustomEvent<ViewTransition>;
+```
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
+
 ## QwikVisibleEvent
 
-Emitted by qwik-loader when an element becomes visible. Used by `useVisibleTask$`
+Handled by qwik-loader when an element becomes visible. Used by `useVisibleTask$`. Does not bubble.
 
 ```typescript
 export type QwikVisibleEvent = CustomEvent<IntersectionObserverEntry>;
@@ -8728,68 +8747,14 @@ Function to extract.
 ## SyncQRL
 
 ```typescript
-export interface SyncQRL<TYPE extends Function = any> extends QRL<TYPE>
+export type SyncQRL<TYPE extends Function> = QRL<TYPE> & {
+  __brand__SyncQRL__: TYPE;
+  resolved: TYPE;
+  dev?: QRLDev | null;
+} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
 ```
 
-**Extends:** [QRL](#qrl)&lt;TYPE&gt;
-
-<table><thead><tr><th>
-
-Property
-
-</th><th>
-
-Modifiers
-
-</th><th>
-
-Type
-
-</th><th>
-
-Description
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[\_\_brand\_\_SyncQRL\_\_](#)
-
-</td><td>
-
-</td><td>
-
-TYPE
-
-</td><td>
-
-</td></tr>
-<tr><td>
-
-[dev](#)
-
-</td><td>
-
-</td><td>
-
-QRLDev \| null
-
-</td><td>
-
-</td></tr>
-<tr><td>
-
-[resolved](#)
-
-</td><td>
-
-</td><td>
-
-TYPE
-
-</td><td>
-
-</td></tr>
-</tbody></table>
+**References:** [QRL](#qrl)
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts)
 

@@ -19,14 +19,14 @@ export default component$(() => {
         class="h-[25em] w-80 rounded-xl border-2 border-dashed border-gray-300 bg-white p-6 shadow-xs transition-all duration-300 hover:border-gray-400 [&[data-over]]:border-blue-300 [&[data-over]]:bg-blue-50"
         preventdefault:dragover
         preventdefault:drop
-        onDragOver$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
+        onDragOver$={sync$((_, currentTarget) => {
           currentTarget.setAttribute('data-over', 'true');
         })}
-        onDragLeave$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
+        onDragLeave$={sync$((_, currentTarget) => {
           currentTarget.removeAttribute('data-over');
         })}
         onDrop$={[
-          sync$((e: DragEvent, currentTarget: HTMLDivElement) => {
+          sync$((e, currentTarget) => {
             const id = e.dataTransfer?.getData('text');
             currentTarget.dataset.droppedId = id;
             currentTarget.removeAttribute('data-over');
@@ -51,14 +51,12 @@ export default component$(() => {
             data-id={item.id}
             class="min-h-[62px] mb-3 cursor-move select-none rounded-lg border border-gray-200 bg-white p-4 transition-all duration-200 hover:-translate-y-1 hover:shadow-md active:scale-95"
             draggable
-            onDragStart$={sync$(
-              (e: DragEvent, currentTarget: HTMLDivElement) => {
-                const itemId = currentTarget.getAttribute('data-id');
-                if (e.dataTransfer && itemId) {
-                  e.dataTransfer?.setData('text/plain', itemId);
-                }
+            onDragStart$={sync$((e, currentTarget) => {
+              const itemId = currentTarget.getAttribute('data-id');
+              if (e.dataTransfer && itemId) {
+                e.dataTransfer?.setData('text/plain', itemId);
               }
-            )}
+            })}
           >
             <span class="text-lg text-gray-700">{item.content}</span>
           </div>
@@ -69,14 +67,14 @@ export default component$(() => {
         class="h-[25em] w-80 rounded-xl border-2 border-dashed border-gray-300 bg-white p-6 shadow-xs transition-all duration-300 hover:border-gray-400 [&[data-over]]:border-blue-300 [&[data-over]]:bg-blue-50"
         preventdefault:dragover
         preventdefault:drop
-        onDragOver$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
+        onDragOver$={sync$((_, currentTarget) => {
           currentTarget.setAttribute('data-over', 'true');
         })}
-        onDragLeave$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
+        onDragLeave$={sync$((_, currentTarget) => {
           currentTarget.removeAttribute('data-over');
         })}
         onDrop$={[
-          sync$((e: DragEvent, currentTarget: HTMLDivElement) => {
+          sync$((e, currentTarget) => {
             const id = e.dataTransfer?.getData('text');
             currentTarget.dataset.droppedId = id;
             currentTarget.removeAttribute('data-over');
@@ -101,14 +99,12 @@ export default component$(() => {
             data-id={item.id}
             class="min-h-[62px] mb-3 cursor-move select-none rounded-lg border border-gray-200 bg-white p-4 transition-all duration-200 hover:-translate-y-1 hover:shadow-md active:scale-95"
             draggable
-            onDragStart$={sync$(
-              (e: DragEvent, currentTarget: HTMLDivElement) => {
-                const itemId = currentTarget.getAttribute('data-id');
-                if (e.dataTransfer && itemId) {
-                  e.dataTransfer?.setData('text/plain', itemId);
-                }
+            onDragStart$={sync$((e, currentTarget) => {
+              const itemId = currentTarget.getAttribute('data-id');
+              if (e.dataTransfer && itemId) {
+                e.dataTransfer?.setData('text/plain', itemId);
               }
-            )}
+            })}
           >
             <span class="text-lg text-gray-700">{item.content}</span>
           </div>

@@ -19,7 +19,7 @@ A typical way to deal with these limitations is to split the event handling into
 1. `sync$()` which is called synchronously and can call methods such as `event.preventDefault()` and `event.stopPropagation()`.
 2. `$()` which is called asynchronously and can close over the state and call other functions, and has no restriction on the size.
 
-Because `sync$()` can't access the state what is the best strategy to deal with it? The answer is to use element attributes to pass state into the `sync$()` function.
+Because `sync$()` can't access the state, what is the best strategy to deal with it? The answer is to use element attributes to pass state into the `sync$()` function.
 > **NOTE:** If you only need to prevent the default behavior, you can simply use the standard [`preventDefault:{eventName}`](/docs/core/events/#prevent-default) syntax. This is strictly for when you need to chain events together synchronously
 
 ## Example: `sync$()` with state
@@ -57,7 +57,7 @@ export default component$(() => {
         target="_blank"
         data-should-prevent-default={shouldPreventDefault.value}
         onClick$={[
-          sync$((e: MouseEvent, target: HTMLAnchorElement) => {
+          sync$((e, target) => {
             if (target.hasAttribute('data-should-prevent-default')) {
               e.preventDefault();
             }

@@ -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];

@@ -199,11 +199,13 @@ export { version } from './version';
 //////////////////////////////////////////////////////////////////////////////////////////
 export type {
   KnownEventNames,
-  QwikSymbolEvent,
-  QwikVisibleEvent,
   QwikIdleEvent,
   QwikInitEvent,
+  QwikResumeEvent,
+  QwikSymbolEvent,
   QwikTransitionEvent,
+  QwikViewTransitionEvent,
+  QwikVisibleEvent,
   // old
   NativeAnimationEvent,
   NativeClipboardEvent,

@@ -651,7 +651,7 @@ export type QRL<TYPE = unknown> = {
     getCaptured(): unknown[] | null;
     getSymbol(): string;
     getHash(): string;
-    dev: QRLDev | null;
+    dev?: QRLDev | null;
 } & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
 
 // @public
@@ -663,7 +663,7 @@ export const qrl: <T = any>(chunkOrFn: string | (() => Promise<any>), symbol: st
 export const qrlDEV: <T = any>(chunkOrFn: string | (() => Promise<any>), symbol: string, opts: QRLDev, lexicalScopeCapture?: any[]) => QRL<T>;
 
 // @public
-export type QRLEventHandlerMulti<EV extends Event, EL> = QRL<EventHandler<EV, EL>> | undefined | null | QRLEventHandlerMulti<EV, EL>[] | EventHandler<EV, EL>;
+export type QRLEventHandlerMulti<EV extends Event, EL> = QRL<EventHandler<EV, EL>> | undefined | null | QRLEventHandlerMulti<EV, EL>[];
 
 // @internal
 export const _qrlSync: <TYPE extends Function>(fn: TYPE, serializedFn?: string) => SyncQRL<TYPE>;
@@ -751,6 +751,9 @@ export type QwikMouseEvent<T = Element, E = NativeMouseEvent> = E;
 // @public @deprecated (undocumented)
 export type QwikPointerEvent<T = Element> = NativePointerEvent;
 
+// @public
+export type QwikResumeEvent = CustomEvent<{}>;
+
 // @public @deprecated (undocumented)
 export type QwikSubmitEvent<T = Element> = SubmitEvent;
 
@@ -779,6 +782,9 @@ export type QwikTransitionEvent<T = Element> = NativeTransitionEvent;
 // @public @deprecated (undocumented)
 export type QwikUIEvent<T = Element> = NativeUIEvent;
 
+// @public
+export type QwikViewTransitionEvent = CustomEvent<ViewTransition>;
+
 // @public
 export type QwikVisibleEvent = CustomEvent<IntersectionObserverEntry>;
 
@@ -1637,15 +1643,11 @@ export interface SVGProps<T extends Element> extends SVGAttributes, QwikAttribut
 export const sync$: <T extends Function>(fn: T) => SyncQRL<T>;
 
 // @public (undocumented)
-export interface SyncQRL<TYPE extends Function = any> extends QRL<TYPE> {
-    // (undocumented)
+export type SyncQRL<TYPE extends Function> = QRL<TYPE> & {
     __brand__SyncQRL__: TYPE;
-    (...args: TYPE extends (...args: infer ARGS) => any ? ARGS : never): TYPE extends (...args: any[]) => infer RETURN ? RETURN : never;
-    // (undocumented)
-    dev: QRLDev | null;
-    // (undocumented)
     resolved: TYPE;
-}
+    dev?: QRLDev | null;
+} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
 
 // @internal
 export const _task: (_event: Event, element: Element) => void;