@qwik.dev/core 2.0.0-beta.31 → 2.0.0-beta.32

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.31-dev+906321a
+ * @qwik.dev/core 2.0.0-beta.32-dev+0e29f8a
  * Copyright QwikDev. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -189,9 +189,11 @@ const isPrimitiveOrNullUndefined = (v) => {
     return (typeof v !== 'object' && typeof v !== 'function') || v === null || v === undefined;
 };
 
+const baseUrl = 'https://qwikdev-build-v2.qwik-8nx.pages.dev/docs/errors/#Q';
 const codeToText = (code, ...parts) => {
     if (qDev) {
         // Keep one error, one line to make it easier to search for the error message.
+        // Keep in sync with packages/docs/src/routes/docs/errors/index.mdx
         const MAP = [
             'Error while serializing class or style attributes', // 0
             'Scheduler not found', // 1
@@ -228,6 +230,7 @@ const codeToText = (code, ...parts) => {
             'Attribute value is unsafe for SSR {{0}}', // 32
             'SerializerSymbol function returned rejected promise', // 33
             'Serialization Error: Cannot serialize function: {{0}}', // 34
+            'Cannot read .value of a clientOnly async signal during SSR. Use .loading to check state, or provide an initial value.', // 35
         ];
         let text = MAP[code] ?? '';
         if (parts.length) {
@@ -242,9 +245,7 @@ const codeToText = (code, ...parts) => {
         return `Code(Q${code}): ${text}`;
     }
     else {
-        // cute little hack to give roughly the correct line number. Update the line number if it shifts.
-        // TODO change the URL after merging into main
-        return `Code(Q${code}) https://github.com/QwikDev/qwik/blob/build/v2/packages/qwik/src/core/shared/error/error.ts#${parts.join()}L${9 + code}`;
+        return `Code(Q${code}) ${baseUrl}${code}`;
     }
 };
 const qError = (code, errorMessageArgs = []) => {
@@ -571,49 +572,52 @@ const addComponentStylePrefix = (styleId) => {
  * - A `-` (not at the beginning) makes next character uppercase: `dbl-click` => `dblClick`
  */
 const EVENT_SUFFIX = '$';
+const DOM_CONTENT_LOADED_EVENT = 'DOMContentLoaded';
 const isHtmlAttributeAnEventName = (name) => {
     return (name.charCodeAt(0) === 113 /* q */ &&
         name.charCodeAt(1) === 45 /* - */ &&
-        name.charCodeAt(3) === 58 /* : */);
+        (name.charCodeAt(3) === 58 /* : */ ||
+            (name.charCodeAt(3) === 112 /* p */ && name.charCodeAt(4) === 58)) /* : */);
 };
-function jsxEventToHtmlAttribute(jsxEvent) {
+function jsxEventToHtmlAttribute(jsxEvent, isPassive = false) {
     if (jsxEvent.endsWith(EVENT_SUFFIX)) {
-        const [prefix, idx] = getEventScopeDataFromJsxEvent(jsxEvent);
+        const [prefix, idx] = getEventScopeDataFromJsxEvent(jsxEvent, isPassive);
         if (idx !== -1) {
-            const name = jsxEvent.slice(idx, -1);
-            return name === 'DOMContentLoaded'
-                ? // The only DOM event that is not all lowercase
-                    prefix + '-d-o-m-content-loaded'
-                : createEventName(name.charAt(0) === '-'
-                    ? // marker for case sensitive event name
-                        name.slice(1)
-                    : name.toLowerCase(), prefix);
+            return prefix + normalizeJsxEventName(jsxEvent.slice(idx, -1));
         }
     }
     return null; // Return null if not matching expected format
 }
-function createEventName(event, prefix) {
+function createEventName(event, prefix = '') {
     const eventName = fromCamelToKebabCase(event);
     return prefix + eventName;
 }
-function getEventScopeDataFromJsxEvent(eventName) {
+function getEventScopeDataFromJsxEvent(eventName, isPassive = false) {
     let prefix;
     let idx = -1;
     // set prefix and idx based on the scope
     if (eventName.startsWith("on" /* EventNameJSXScope.on */)) {
-        prefix = "q-e:" /* EventNameHtmlScope.on */;
+        prefix = isPassive ? "q-ep:" /* EventNameHtmlScope.onPassive */ : "q-e:" /* EventNameHtmlScope.on */;
         idx = 2;
     }
     else if (eventName.startsWith("window:on" /* EventNameJSXScope.window */)) {
-        prefix = "q-w:" /* EventNameHtmlScope.window */;
+        prefix = isPassive ? "q-wp:" /* EventNameHtmlScope.windowPassive */ : "q-w:" /* EventNameHtmlScope.window */;
         idx = 9;
     }
     else if (eventName.startsWith("document:on" /* EventNameJSXScope.document */)) {
-        prefix = "q-d:" /* EventNameHtmlScope.document */;
+        prefix = isPassive ? "q-dp:" /* EventNameHtmlScope.documentPassive */ : "q-d:" /* EventNameHtmlScope.document */;
         idx = 11;
     }
     return [prefix, idx];
 }
+const normalizeJsxEventName = (name) => {
+    return name === DOM_CONTENT_LOADED_EVENT
+        ? '-d-o-m-content-loaded'
+        : createEventName(name.charAt(0) === '-'
+            ? // marker for case sensitive event name
+                name.slice(1)
+            : name.toLowerCase());
+};
 function isPreventDefault(key) {
     return key.startsWith('preventdefault:');
 }
@@ -621,11 +625,11 @@ function isPreventDefault(key) {
 const fromCamelToKebabCase = (text) => {
     return text.replace(/([A-Z-])/g, (a) => '-' + a.toLowerCase());
 };
-/** E.g. `"q-e:click"` => `['e', 'click']` */
-const getEventDataFromHtmlAttribute = (htmlKey) => [
-    htmlKey.charAt(2),
-    htmlKey.substring(4),
-];
+/** E.g. `"q-e:click"` => `['e', 'click']`, `"q-ep:click"` => `['ep', 'click']` */
+const getEventDataFromHtmlAttribute = (htmlKey) => {
+    const separatorIndex = htmlKey.indexOf(':');
+    return [htmlKey.slice(2, separatorIndex), htmlKey.slice(separatorIndex + 1)];
+};
 /** E.g. `"e:click"`, `"w:load"` */
 const getScopedEventName = (scope, eventName) => scope + ':' + eventName;
 
@@ -1215,7 +1219,7 @@ const COMMA = ',';
  *
  * @public
  */
-const version = "2.0.0-beta.31-dev+906321a";
+const version = "2.0.0-beta.32-dev+0e29f8a";
 
 const isNode = (value) => {
     return value && typeof value.nodeType === 'number';
@@ -2033,19 +2037,16 @@ console.log('ASYNC COMPUTED SIGNAL', ...args.map(qwikDebugToString));
 /** Retains job metadata and also serves as the argument for the compute function */
 class AsyncJob {
     $signal$;
-    info;
-    $infoVersion$;
     /** First holds the compute promise and then the cleanup promise */
     $promise$ = null;
     $cleanupRequested$ = false;
     $canWrite$ = true;
-    $track$;
-    $cleanups$;
-    $abortController$;
     constructor($signal$, info, $infoVersion$) {
         this.$signal$ = $signal$;
-        this.info = info;
-        this.$infoVersion$ = $infoVersion$;
+        if (info !== undefined) {
+            this.info = info;
+            this.$infoVersion$ = $infoVersion$;
+        }
     }
     get track() {
         return (this.$track$ ||= trackFn(this.$signal$, this.$signal$.$container$));
@@ -2056,7 +2057,7 @@ class AsyncJob {
     /** Backward compatible cache method for resource */
     cache() {
         isDev &&
-            console.error('useResource cache() method does not do anything. Use `useAsync$` instead of `useResource$`, use the `interval` option for polling behavior.');
+            console.error('useResource cache() method does not do anything. Use `useAsync$` instead of `useResource$`, use the `expires` option for polling behavior.');
     }
     get previous() {
         const val = this.$signal$.$untrackedValue$;
@@ -2076,48 +2077,55 @@ class AsyncJob {
  * AsyncSignalImpl
  *
  * # ================================
+ *
+ * @internal
  */
 class AsyncSignalImpl extends ComputedSignalImpl {
     $untrackedLoading$ = false;
     $untrackedError$ = undefined;
-    $loadingEffects$ = undefined;
-    $errorEffects$ = undefined;
     $current$ = null;
-    // TODO only create the array if concurrency > 1
-    $jobs$ = [];
-    $concurrency$ = 1;
-    $interval$ = 0;
-    $timeoutMs$;
-    $info$ = undefined;
-    $infoVersion$ = 0;
     [_EFFECT_BACK_REF] = undefined;
     constructor(container, fn, flags = 1 /* SignalFlags.INVALID */ |
         16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */, options) {
         super(container, fn, flags);
-        const interval = options?.interval;
-        const concurrency = options?.concurrency ?? 1;
-        const initial = options?.initial;
-        const timeout = options?.timeout;
-        const eagerCleanup = options?.eagerCleanup;
-        const clientOnly = options?.clientOnly;
+        if (!options) {
+            return;
+        }
         // Handle initial value - eagerly evaluate if function, set $untrackedValue$ and $promiseValue$
         // Do NOT call setValue() which would clear the INVALID flag and prevent async computation
+        const initial = options.initial;
         if (initial !== undefined) {
             const initialValue = typeof initial === 'function' ? initial() : initial;
             this.$untrackedValue$ = initialValue;
         }
-        this.$concurrency$ = concurrency;
+        const concurrency = options.concurrency;
+        if (concurrency !== undefined && concurrency >= 0 && concurrency !== 1) {
+            this.$concurrency$ = concurrency;
+            this.$jobs$ = [];
+        }
+        const timeout = options.timeout;
         if (timeout) {
             this.$timeoutMs$ = timeout;
         }
-        if (eagerCleanup) {
+        if (options.eagerCleanup) {
             this.$flags$ |= 32 /* AsyncSignalFlags.EAGER_CLEANUP */;
         }
-        if (clientOnly) {
+        if (options.clientOnly) {
             this.$flags$ |= 64 /* AsyncSignalFlags.CLIENT_ONLY */;
         }
-        if (interval) {
-            this.interval = interval;
+        if (options.allowStale === false) {
+            if (isDev && initial !== undefined) {
+                throw new Error('allowStale: false and initial cannot be used together. ' +
+                    'allowStale: false clears the value on invalidation, which conflicts with providing an initial value.');
+            }
+            this.$flags$ |= 128 /* AsyncSignalFlags.CLEAR_ON_INVALIDATE */;
+        }
+        const expires = options.expires ?? (options.interval ? Math.abs(options.interval) : undefined);
+        if (expires) {
+            this.expires = expires;
+        }
+        if (options.poll === false || (options.interval !== undefined && options.interval < 0)) {
+            this.$flags$ |= 256 /* AsyncSignalFlags.NO_POLL */;
         }
     }
     get untrackedValue() {
@@ -2137,9 +2145,7 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         if ((import.meta.env.TEST ? isServerPlatform() : isServer) &&
             this.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */ &&
             this.$untrackedValue$ === NEEDS_COMPUTATION) {
-            throw new Error(isDev
-                ? 'During SSR, cannot read .value from clientOnly async signal without an initial value. Use .loading or provide an initial value.'
-                : 'Cannot read .value from clientOnly');
+            throw qError(35 /* QError.asyncClientOnlyValueDuringSSR */);
         }
         return this.$untrackedValue$;
     }
@@ -2166,8 +2172,13 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         this.untrackedError = undefined;
         this.$info$ = undefined;
         // Prevent pending computations from overwriting this value
-        for (let i = 0; i < this.$jobs$.length; i++) {
-            this.$jobs$[i].$canWrite$ = false;
+        if (this.$jobs$) {
+            for (let i = 0; i < this.$jobs$.length; i++) {
+                this.$jobs$[i].$canWrite$ = false;
+            }
+        }
+        else if (this.$current$) {
+            this.$current$.$canWrite$ = false;
         }
         this.$clearNextPoll$();
         super.value = value;
@@ -2235,28 +2246,64 @@ class AsyncSignalImpl extends ComputedSignalImpl {
     get untrackedError() {
         return this.$untrackedError$;
     }
-    get interval() {
-        return this.$interval$;
+    get expires() {
+        return this.$expires$ || 0;
     }
-    set interval(value) {
+    set expires(value) {
         this.$clearNextPoll$();
-        this.$interval$ = value;
-        if (this.$interval$ !== 0 && this.$hasSubscribers$()) {
+        this.$expires$ = value;
+        if (this.$expires$ && this.$hasSubscribers$()) {
+            this.$scheduleNextPoll$();
+        }
+    }
+    get poll() {
+        return !(this.$flags$ & 256 /* AsyncSignalFlags.NO_POLL */);
+    }
+    set poll(value) {
+        if (value) {
+            this.$flags$ &= -257 /* AsyncSignalFlags.NO_POLL */;
+        }
+        else {
+            this.$flags$ |= 256 /* AsyncSignalFlags.NO_POLL */;
+        }
+        // Reschedule since poll behavior changed
+        if (this.$expires$ && this.$hasSubscribers$()) {
+            this.$clearNextPoll$();
             this.$scheduleNextPoll$();
         }
     }
+    /** @deprecated Use `expires` and `poll` instead. */
+    get interval() {
+        const expires = this.$expires$ || 0;
+        return this.$flags$ & 256 /* AsyncSignalFlags.NO_POLL */ ? -expires : expires;
+    }
+    set interval(value) {
+        if (value < 0) {
+            this.$flags$ |= 256 /* AsyncSignalFlags.NO_POLL */;
+        }
+        else {
+            this.$flags$ &= -257 /* AsyncSignalFlags.NO_POLL */;
+        }
+        this.expires = Math.abs(value);
+    }
     /** Invalidates the signal, causing it to re-compute its value. */
     async invalidate(info) {
-        this.$flags$ |= 1 /* SignalFlags.INVALID */;
-        this.$clearNextPoll$();
         if (arguments.length > 0) {
             this.$info$ = info;
-            this.$infoVersion$++;
+            this.$infoVersion$ = this.$infoVersion$ === undefined ? 1 : this.$infoVersion$ + 1;
         }
-        if (this.$effects$?.size || this.$loadingEffects$?.size || this.$errorEffects$?.size) {
+        this.$setInvalid$(true, this.$flags$ & 128 /* AsyncSignalFlags.CLEAR_ON_INVALIDATE */);
+    }
+    $setInvalid$(allowRecalc, mustClear) {
+        this.$flags$ |= 1 /* SignalFlags.INVALID */;
+        this.$clearNextPoll$();
+        if (mustClear) {
+            this.$untrackedValue$ = NEEDS_COMPUTATION;
+        }
+        if (allowRecalc &&
+            (this.$effects$?.size || this.$loadingEffects$?.size || this.$errorEffects$?.size)) {
             // compute in next microtask
-            await true;
-            this.$computeIfNeeded$();
+            Promise.resolve().then(() => this.$computeIfNeeded$());
         }
     }
     /** Abort the current computation and run cleanups if needed. */
@@ -2301,35 +2348,46 @@ class AsyncSignalImpl extends ComputedSignalImpl {
             return;
         }
         this.$clearNextPoll$();
-        if (this.$current$) {
-            this.$requestCleanups$(this.$current$);
+        // Clear flag here to make sure the cleanups don't start another compute
+        this.$flags$ &= -2 /* SignalFlags.INVALID */;
+        const current = this.$current$;
+        if (current) {
+            this.$requestCleanups$(current);
         }
-        const limit = this.$concurrency$ === 0 ? Number.POSITIVE_INFINITY : this.$concurrency$;
-        if (this.$jobs$.length >= limit) {
+        const limit = this.$concurrency$ === 0 ? Number.POSITIVE_INFINITY : (this.$concurrency$ ?? 1);
+        // We only have $jobs$[] when concurrency != 1
+        if (this.$jobs$ ? this.$jobs$.length >= limit : current?.$promise$) {
             // We requested cleanups for all the previous jobs, once one finishes it will be removed from the jobs array and trigger computeIfNeeded
+            // Restore invalid state
+            this.$flags$ |= 1 /* SignalFlags.INVALID */;
             return;
         }
-        this.$flags$ &= -2 /* SignalFlags.INVALID */;
         // We put the actual computation in a separate method so we can easily retain the promise
         const infoVersion = this.$infoVersion$;
         const running = new AsyncJob(this, this.$info$, infoVersion);
         this.$current$ = running;
-        this.$jobs$.push(running);
+        if (this.$jobs$) {
+            this.$jobs$.push(running);
+        }
         running.$promise$ = this.$runComputation$(running);
     }
     async $runComputation$(running) {
         const isCurrent = () => running === this.$current$;
         this.untrackedLoading = true;
-        const fn = this.$computeQrl$.resolved || (await this.$computeQrl$.resolve());
+        let fn = this.$computeQrl$.resolved;
+        if (!fn) {
+            fn = await this.$computeQrl$.resolve();
+            if (running.$abortController$?.signal.aborted) {
+                running.$promise$ = null;
+                return;
+            }
+        }
         try {
             if (this.$timeoutMs$) {
                 this.$computationTimeoutId$ = setTimeout(() => {
-                    running.$abortController$?.abort();
-                    const error = new Error(`timeout`);
-                    if (isCurrent()) {
-                        this.untrackedError = error;
-                        running.$canWrite$ = false;
-                    }
+                    const error = new Error(`timeout ${this.$timeoutMs$}ms`);
+                    this.$setError$(running, error);
+                    running.$abortController$?.abort(error);
                 }, this.$timeoutMs$);
             }
             // Try to stay sync if possible
@@ -2337,27 +2395,32 @@ class AsyncSignalImpl extends ComputedSignalImpl {
             const value = isPromise(valuePromise) ? await valuePromise : valuePromise;
             running.$promise$ = null;
             if (running.$canWrite$) {
-                const index = this.$jobs$.indexOf(running);
-                if (index !== -1) {
-                    for (let i = 0; i < index; i++) {
-                        this.$jobs$[i].$canWrite$ = false;
+                const jobs = this.$jobs$;
+                if (jobs) {
+                    let doDisable = false;
+                    for (let i = jobs.length - 1; i >= 0; i--) {
+                        if (jobs[i] === running) {
+                            doDisable = true;
+                        }
+                        else if (doDisable) {
+                            jobs[i].$canWrite$ = false;
+                        }
                     }
                 }
                 DEBUG && log('Promise resolved', value);
                 // we leave error as-is until result
                 // Note that these assignments run setters
                 this.untrackedError = undefined;
-                // Use super.value instead of this.value to avoid the AsyncSignalImpl setter
-                // which clears INVALID and disables all jobs. INVALID must persist so that
-                // line 442 can detect dependency changes during computation and re-run.
+                /**
+                 * Use super.value instead of this.value to persist invalid state, so that invalidation
+                 * during computation recomputes
+                 */
                 super.value = value;
             }
         }
         catch (err) {
             running.$promise$ = null;
-            if (isCurrent()) {
-                this.untrackedError = err;
-            }
+            this.$setError$(running, err);
         }
         if (isCurrent()) {
             clearTimeout(this.$computationTimeoutId$);
@@ -2374,14 +2437,37 @@ class AsyncSignalImpl extends ComputedSignalImpl {
             }
         }
     }
+    /**
+     * Sets the error from the given job. We only accept errors from the current job and we ignore
+     * AbortErrors.
+     */
+    $setError$(job, error) {
+        if (job !== this.$current$ || !job.$canWrite$) {
+            return;
+        }
+        job.$canWrite$ = false;
+        if (error instanceof Error && error.name === 'AbortError') {
+            // AbortError from AbortSignal is a cancellation, not an actual error
+            return;
+        }
+        this.untrackedError = error;
+        // Job failures should be rare and require retrying
+        this.untrackedValue = NEEDS_COMPUTATION;
+    }
     /** Called after SSR/unmount */
     async $destroy$() {
         this.$clearNextPoll$();
         clearTimeout(this.$computationTimeoutId$);
-        if (this.$current$) {
-            await this.$requestCleanups$(this.$current$);
+        const current = this.$current$;
+        if (current) {
+            this.$requestCleanups$(current);
+        }
+        if (this.$jobs$) {
+            await Promise.all(this.$jobs$.map((job) => job.$promise$));
+        }
+        else {
+            await current?.$promise$;
         }
-        await Promise.all(this.$jobs$.map((job) => job.$promise$));
     }
     $clearNextPoll$() {
         if (this.$pollTimeoutId$ !== undefined) {
@@ -2390,66 +2476,76 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         }
     }
     $scheduleNextPoll$() {
-        if (!(import.meta.env.TEST ? !isServerPlatform() : isBrowser$1) || this.$interval$ === 0) {
+        if ((import.meta.env.TEST ? isServerPlatform() : isServer) || !this.$expires$) {
             return;
         }
         this.$clearNextPoll$();
-        if (this.$interval$ < 0) {
-            this.$pollTimeoutId$ = setTimeout(() => {
-                this.$pollTimeoutId$ = undefined;
-                this.$flags$ |= 1 /* SignalFlags.INVALID */;
-            }, -this.$interval$);
-        }
-        else {
-            this.$pollTimeoutId$ = setTimeout(this.invalidate.bind(this), this.$interval$);
-        }
+        const allowRecalc = !(this.$flags$ & 256 /* AsyncSignalFlags.NO_POLL */);
+        // Even when clear on invalidate, we don't clear if we're merely re-running due to polling
+        // We expect to get the new value soon, so we can avoid showing a loading state
+        const mustClear = this.$flags$ & 128 /* AsyncSignalFlags.CLEAR_ON_INVALIDATE */ && !allowRecalc;
+        this.$pollTimeoutId$ = setTimeout(() => this.$setInvalid$(allowRecalc, mustClear), this.$expires$);
         this.$pollTimeoutId$?.unref?.();
     }
     $hasSubscribers$() {
         return !!(this.$effects$?.size || this.$loadingEffects$?.size || this.$errorEffects$?.size);
     }
-    async $requestCleanups$(job, reason) {
+    $requestCleanups$(job, reason) {
         if (job.$cleanupRequested$) {
-            return job.$promise$;
+            return;
         }
         job.$cleanupRequested$ = true;
         job.$abortController$?.abort(reason);
-        job.$promise$ = Promise.resolve(job.$promise$).then(() => (job.$promise$ = this.$runCleanups$(job)));
+        job.$promise$ = maybeThen(job.$promise$, () => this.$runCleanups$(job));
     }
     /** Clean up and trigger signal compute once complete */
-    async $runCleanups$(job) {
+    $runCleanups$(job) {
         const cleanups = job.$cleanups$;
-        if (cleanups?.length) {
-            const onError = (err) => {
-                const handleError = this.$container$?.handleError;
-                if (handleError) {
-                    handleError(err, null);
-                }
-                else {
-                    console.error('Error in async signal cleanup', err);
+        const onError = (err) => {
+            const handleError = this.$container$?.handleError;
+            if (handleError) {
+                handleError(err, null);
+            }
+            else {
+                console.error('Error in async signal cleanup', err);
+            }
+        };
+        const onDone = () => {
+            job.$promise$ = null;
+            if (cleanups) {
+                cleanups.length = 0;
+            }
+            // Now trigger compute
+            const jobs = this.$jobs$;
+            if (jobs) {
+                const idx = jobs.indexOf(job);
+                if (idx !== -1) {
+                    jobs.splice(idx, 1);
                 }
-            };
+            }
+            this.$computeIfNeeded$();
+        };
+        let promiseChain = undefined;
+        if (cleanups) {
             // Keep this sync-ish so sync functions run immediately.
-            await Promise.all(cleanups.map((fn) => {
+            for (let i = 0; i < cleanups.length; i++) {
                 try {
-                    const result = fn();
+                    const result = cleanups[i]();
                     if (isPromise(result)) {
-                        return result.catch(onError);
+                        promiseChain = (promiseChain ? promiseChain.then(() => result) : result).catch(onError);
                     }
                 }
                 catch (err) {
                     onError(err);
                 }
-            }));
-            cleanups.length = 0;
+            }
         }
-        // Now trigger compute
-        const jobs = this.$jobs$;
-        const idx = jobs.indexOf(job);
-        if (idx !== -1) {
-            jobs.splice(idx, 1);
+        if (promiseChain) {
+            return promiseChain.then(onDone);
+        }
+        else {
+            onDone();
         }
-        this.$computeIfNeeded$();
     }
 }
 
@@ -3108,7 +3204,69 @@ const isJSXNode = (n) => {
 
 const BIND_VALUE = 'bind:value';
 const BIND_CHECKED = 'bind:checked';
+const PASSIVE = 'passive:';
+const PREVENT_DEFAULT = 'preventdefault:';
 const _hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+const removePassiveMarkers = (props, passiveKeys, preventDefaultKeys, passiveEvents, canMutate = false) => {
+    let mutableProps = props;
+    let copied = canMutate;
+    if (passiveKeys.length > 0) {
+        if (!copied) {
+            mutableProps = { ...mutableProps };
+            copied = true;
+        }
+        for (let i = 0; i < passiveKeys.length; i++) {
+            const k = passiveKeys[i];
+            delete mutableProps[k];
+        }
+    }
+    if (preventDefaultKeys.length > 0) {
+        for (let i = 0; i < preventDefaultKeys.length; i++) {
+            const k = preventDefaultKeys[i];
+            if (passiveEvents.has(normalizeJsxEventName(k.slice(PREVENT_DEFAULT.length)))) {
+                if (!copied) {
+                    mutableProps = { ...mutableProps };
+                    copied = true;
+                }
+                delete mutableProps[k];
+            }
+        }
+    }
+    return mutableProps;
+};
+const getPassiveEventKey = (key) => {
+    if (key.startsWith('on') && key.endsWith('$')) {
+        return normalizeJsxEventName(key.slice(2, -1));
+    }
+    if (key.startsWith('window:on') && key.endsWith('$')) {
+        return normalizeJsxEventName(key.slice(9, -1));
+    }
+    if (key.startsWith('document:on') && key.endsWith('$')) {
+        return normalizeJsxEventName(key.slice(11, -1));
+    }
+    return null;
+};
+const convertJsxEventProps = (props, eventKeys, keyOrder, passiveEvents, canMutate = false) => {
+    let mutableProps = props;
+    let copied = canMutate;
+    for (let i = 0; i < eventKeys.length; i++) {
+        const k = eventKeys[i];
+        const passiveEventKey = getPassiveEventKey(k);
+        const attr = jsxEventToHtmlAttribute(k, passiveEvents.has(passiveEventKey));
+        if (attr) {
+            if (!copied) {
+                mutableProps = { ...mutableProps };
+                copied = true;
+            }
+            const attrIndex = keyOrder.get(attr);
+            if (attrIndex === undefined || attrIndex < keyOrder.get(k)) {
+                mutableProps[attr] = mutableProps[k];
+            }
+            delete mutableProps[k];
+        }
+    }
+    return mutableProps;
+};
 /**
  * Create a JSXNode with the properties fully split into variable and constant parts, and children
  * separated out. Furthermore, the varProps must be a sorted object, that is, the keys must be
@@ -3154,20 +3312,28 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
     let bindCheckedSignal = null;
     // Apply transformations for native HTML elements only
     if (typeof type === 'string') {
-        // Transform event names (onClick$ -> q-e:click)
+        const passiveEvents = new Set();
+        const constEventKeys = [];
+        const varEventKeys = [];
+        const constPassiveKeys = [];
+        const varPassiveKeys = [];
+        const constPreventDefaultKeys = [];
+        const varPreventDefaultKeys = [];
+        const constKeyOrder = new Map();
+        const varKeyOrder = new Map();
         if (constProps) {
-            const processedKeys = new Set();
+            let index = 0;
             for (const k in constProps) {
-                const attr = jsxEventToHtmlAttribute(k);
-                if (attr) {
-                    if (!constPropsCopied) {
-                        constProps = { ...constProps };
-                        constPropsCopied = true;
-                    }
-                    if (!_hasOwnProperty$1.call(constProps, attr) || processedKeys.has(attr)) {
-                        constProps[attr] = constProps[k];
-                    }
-                    delete constProps[k];
+                constKeyOrder.set(k, index++);
+                if (k.startsWith(PASSIVE)) {
+                    constPassiveKeys.push(k);
+                    passiveEvents.add(normalizeJsxEventName(k.slice(PASSIVE.length)));
+                }
+                else if (k.startsWith(PREVENT_DEFAULT)) {
+                    constPreventDefaultKeys.push(k);
+                }
+                else if (getPassiveEventKey(k) !== null) {
+                    constEventKeys.push(k);
                 }
                 else if (k === BIND_CHECKED) {
                     // Set flag, will process after walk
@@ -3177,24 +3343,21 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
                     // Set flag, will process after walk
                     bindValueSignal = constProps[k];
                 }
-                processedKeys.add(k);
             }
         }
         if (varProps) {
-            const processedKeys = new Set();
+            let index = 0;
             for (const k in varProps) {
-                const attr = jsxEventToHtmlAttribute(k);
-                if (attr) {
-                    if (!varPropsCopied) {
-                        varProps = { ...varProps };
-                        varPropsCopied = true;
-                    }
-                    // Transform event name in place
-                    if (!_hasOwnProperty$1.call(varProps, attr) || processedKeys.has(attr)) {
-                        varProps[attr] = varProps[k];
-                    }
-                    delete varProps[k];
-                    toSort = true;
+                varKeyOrder.set(k, index++);
+                if (k.startsWith(PASSIVE)) {
+                    varPassiveKeys.push(k);
+                    passiveEvents.add(normalizeJsxEventName(k.slice(PASSIVE.length)));
+                }
+                else if (k.startsWith(PREVENT_DEFAULT)) {
+                    varPreventDefaultKeys.push(k);
+                }
+                else if (getPassiveEventKey(k) !== null) {
+                    varEventKeys.push(k);
                 }
                 else if (k === BIND_CHECKED) {
                     // Set flag, will process after walk
@@ -3204,9 +3367,23 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
                     // Set flag, will process after walk
                     bindValueSignal = varProps[k];
                 }
-                processedKeys.add(k);
             }
         }
+        if (constProps) {
+            const originalConstProps = constProps;
+            constProps = removePassiveMarkers(constProps, constPassiveKeys, constPreventDefaultKeys, passiveEvents, constPropsCopied);
+            constPropsCopied = constPropsCopied || constProps !== originalConstProps;
+            constProps = convertJsxEventProps(constProps, constEventKeys, constKeyOrder, passiveEvents, constPropsCopied);
+            constPropsCopied = constPropsCopied || constProps !== originalConstProps;
+        }
+        if (varProps) {
+            const originalVarProps = varProps;
+            varProps = removePassiveMarkers(varProps, varPassiveKeys, varPreventDefaultKeys, passiveEvents, varPropsCopied);
+            varPropsCopied = varPropsCopied || varProps !== originalVarProps;
+            varProps = convertJsxEventProps(varProps, varEventKeys, varKeyOrder, passiveEvents, varPropsCopied);
+            varPropsCopied = varPropsCopied || varProps !== originalVarProps;
+            toSort = toSort || varEventKeys.length > 0;
+        }
         // Handle bind:* - only in varProps, bind:* should be moved to varProps
         if (bindCheckedSignal || bindValueSignal) {
             if (!varPropsCopied) {
@@ -3518,11 +3695,13 @@ function addUseOnEvents(jsx, useOnEvents) {
                     }
                     else {
                         if (isDev) {
+                            const sourceLocation = getUseOnSourceLocation(useOnEvents[key].qrls);
                             logWarn('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. ');
+                                'Please make sure that the component outputs a DOM element.' +
+                                (sourceLocation ? ` Offending \`useOn\`: ${sourceLocation}.` : ''));
                         }
                         continue;
                     }
@@ -3531,11 +3710,12 @@ function addUseOnEvents(jsx, useOnEvents) {
                     if (targetElement.type === 'script' && key === qVisibleEvent) {
                         eventKey = 'q-d:qinit';
                         if (isDev) {
-                            logWarn('You are trying to add an event "' +
-                                key +
-                                '" using the `useVisibleTask$` hook with the "intersection-observer" strategy, ' +
-                                'but a node to which you can add an event is not found. ' +
-                                'Using "document-ready" or "document-idle" instead.');
+                            const sourceLocation = getUseOnSourceLocation(useOnEvents[key].qrls);
+                            logWarn(`You are trying to add the event "${key}" ` +
+                                'using the `useVisibleTask$` hook with the "intersection-observer" strategy, ' +
+                                'but this only works when the component outputs a DOM element. Falling back to ' +
+                                '"document-ready" instead.' +
+                                (sourceLocation ? ` Offending \`useVisibleTask$\`: ${sourceLocation}.` : ''));
                         }
                     }
                     addUseOnEvent(targetElement, eventKey, useOnEvents[key]);
@@ -3545,6 +3725,21 @@ function addUseOnEvents(jsx, useOnEvents) {
         return jsxResult;
     });
 }
+function getUseOnSourceLocation(eventQrls) {
+    for (let i = 0; i < eventQrls.length; i++) {
+        const eventQrl = eventQrls[i];
+        const task = eventQrl?.getCaptured()?.[0];
+        if (isTask(task)) {
+            const dev = task.$qrl$.dev;
+            if (dev?.file) {
+                return typeof dev.lo === 'number' && typeof dev.hi === 'number'
+                    ? `${dev.file}:${dev.lo}-${dev.hi}`
+                    : dev.file;
+            }
+        }
+    }
+    return null;
+}
 /**
  * Adds an event to the JSX element.
  *
@@ -3556,14 +3751,15 @@ function addUseOnEvent(jsxElement, key, value) {
     // These handlers are always there, so they go in constProps
     const props = (jsxElement.constProps ||= {});
     const propValue = props[key];
+    const qrls = value.qrls;
     if (propValue == null) {
-        props[key] = value;
+        props[key] = qrls;
     }
     else if (Array.isArray(propValue)) {
-        propValue.push(...value);
+        propValue.push(...qrls);
     }
     else {
-        props[key] = [propValue, ...value];
+        props[key] = [propValue, ...qrls];
     }
     const varProp = jsxElement.varProps[key];
     if (varProp) {
@@ -3572,10 +3768,28 @@ function addUseOnEvent(jsxElement, key, value) {
             propValue.push(...props[key]);
         }
         else {
-            jsxElement.varProps[key] = [propValue, ...value];
+            jsxElement.varProps[key] = [propValue, ...qrls];
         }
         props[key] = undefined;
     }
+    const capture = value.capture;
+    const preventdefault = value.preventdefault;
+    const stoppropagation = value.stoppropagation;
+    if (!capture && !preventdefault && !stoppropagation) {
+        return;
+    }
+    const [, eventName] = getEventDataFromHtmlAttribute(key);
+    capture && addUseOnModifier(jsxElement, eventName, 'capture');
+    preventdefault && addUseOnModifier(jsxElement, eventName, 'preventdefault');
+    stoppropagation && addUseOnModifier(jsxElement, eventName, 'stoppropagation');
+}
+function addUseOnModifier(jsxElement, eventName, modifier) {
+    const key = `${modifier}:${eventName}`;
+    const varProps = jsxElement.varProps;
+    if (varProps === EMPTY_OBJ) {
+        jsxElement.varProps = {};
+    }
+    jsxElement.varProps[key] = true;
 }
 /**
  * Finds the first element node in the JSX output.
@@ -9115,6 +9329,95 @@ function getEffects(target, prop, storeEffects) {
     return effectsToTrigger;
 }
 
+/** Used to represent an undefined value that must be serialized */
+const explicitUndefined = Symbol('undefined');
+// Used for allocate, make sure they are in sync with Constants
+const _constants = [
+    undefined,
+    null,
+    true,
+    false,
+    '',
+    EMPTY_ARRAY,
+    EMPTY_OBJ,
+    NEEDS_COMPUTATION,
+    STORE_ALL_PROPS,
+    _UNINITIALIZED,
+    Slot,
+    Fragment,
+    NaN,
+    Infinity,
+    -Infinity,
+    Number.MAX_SAFE_INTEGER,
+    Number.MAX_SAFE_INTEGER - 1,
+    Number.MIN_SAFE_INTEGER,
+];
+// Used for dumpState, make sure they are in sync with Constants
+const _constantNames = [
+    'undefined',
+    'null',
+    'true',
+    'false',
+    "''",
+    'EMPTY_ARRAY',
+    'EMPTY_OBJ',
+    'NEEDS_COMPUTATION',
+    'STORE_ALL_PROPS',
+    '_UNINITIALIZED',
+    'Slot',
+    'Fragment',
+    'NaN',
+    'Infinity',
+    '-Infinity',
+    'MAX_SAFE_INTEGER',
+    'MAX_SAFE_INTEGER-1',
+    'MIN_SAFE_INTEGER',
+];
+// Used for dumpState, make sure they are in sync with TypeIds
+const _typeIdNames = [
+    'Plain',
+    'RootRef',
+    'ForwardRef',
+    'Constant',
+    'Array',
+    'Object',
+    'URL',
+    'Date',
+    'Regex',
+    'QRL',
+    'VNode',
+    'RefVNode',
+    'BigInt',
+    'URLSearchParams',
+    'ForwardRefs',
+    'TemporalDuration',
+    'TemporalInstant',
+    'TemporalPlainDate',
+    'TemporalPlainDateTime',
+    'TemporalPlainMonthDay',
+    'TemporalPlainTime',
+    'TemporalPlainYearMonth',
+    'TemporalZonedDateTime',
+    'Error',
+    'Promise',
+    'Set',
+    'Map',
+    'Uint8Array',
+    'Task',
+    'Component',
+    'Signal',
+    'WrappedSignal',
+    'ComputedSignal',
+    'AsyncSignal',
+    'SerializerSignal',
+    'Store',
+    'FormData',
+    'JSXNode',
+    'PropsProxy',
+    'SubscriptionData',
+    'EffectSubscription',
+];
+
 function qrlToString(serializationContext, qrl, raw) {
     let symbol = qrl.$symbol$;
     let chunk = qrl.$chunk$;
@@ -9211,6 +9514,8 @@ class Serializer {
     $parent$;
     $qrlMap$ = new Map();
     $writer$;
+    /** We need to determine this at runtime because polyfills may not be loaded a module load time */
+    $hasTemporal$ = typeof Temporal !== 'undefined';
     constructor($serializationContext$) {
         this.$serializationContext$ = $serializationContext$;
         this.$writer$ = $serializationContext$.$writer$;
@@ -9254,6 +9559,29 @@ class Serializer {
         }
         return false;
     }
+    maybeNumericObjectKey$(key) {
+        if (key.length === 0 || key.length >= 8) {
+            return key;
+        }
+        let i = 0;
+        if (key.charCodeAt(0) === 45) {
+            if (key.length === 1) {
+                return key;
+            }
+            i = 1;
+        }
+        const first = key.charCodeAt(i);
+        if (first < 49 || first > 57) {
+            return key;
+        }
+        for (i++; i < key.length; i++) {
+            const c = key.charCodeAt(i);
+            if (c < 48 || c > 57) {
+                return key;
+            }
+        }
+        return Number(key);
+    }
     /** Output a type,value pair. If the value is an array, it calls writeValue on each item. */
     output(type, value, keepUndefined) {
         if (typeof value === 'number') {
@@ -9381,6 +9709,9 @@ class Serializer {
                     else if (value === _UNINITIALIZED) {
                         this.output(3 /* TypeIds.Constant */, 9 /* Constants.UNINITIALIZED */);
                     }
+                    else if (value === explicitUndefined) {
+                        this.output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
+                    }
                     break;
                 case 'function':
                     if (value === Slot) {
@@ -9418,7 +9749,7 @@ class Serializer {
                     else if (isQwikComponent(value)) {
                         const [qrl] = value[SERIALIZABLE_STATE];
                         this.$serializationContext$.$renderSymbols$.add(qrl.$symbol$);
-                        this.output(21 /* TypeIds.Component */, [qrl]);
+                        this.output(29 /* TypeIds.Component */, [qrl]);
                     }
                     else {
                         throw qError(34 /* QError.serializeErrorCannotSerializeFunction */, [value.toString()]);
@@ -9456,7 +9787,7 @@ class Serializer {
     writeObjectValue(value) {
         if (isPropsProxy(value)) {
             const owner = value[_OWNER];
-            this.output(30 /* TypeIds.PropsProxy */, [
+            this.output(38 /* TypeIds.PropsProxy */, [
                 _serializationWeakRef(owner),
                 owner.varProps,
                 owner.constProps,
@@ -9464,13 +9795,15 @@ class Serializer {
             ]);
         }
         else if (value instanceof SubscriptionData) {
-            this.output(31 /* TypeIds.SubscriptionData */, [
+            // TODO make everything optional or use two types
+            this.output(39 /* TypeIds.SubscriptionData */, [
                 value.data.$scopedStyleIdPrefix$,
                 value.data.$isConst$,
             ]);
         }
         else if (value instanceof EffectSubscription) {
-            this.output(32 /* TypeIds.EffectSubscription */, [value.consumer, value.property, value.data]);
+            // TODO no data if [null, true]
+            this.output(40 /* TypeIds.EffectSubscription */, [value.consumer, value.property, value.data]);
         }
         else if (isStore(value)) {
             const storeHandler = getStoreHandler(value);
@@ -9490,13 +9823,13 @@ class Serializer {
             while (out[out.length - 1] === undefined) {
                 out.pop();
             }
-            this.output(27 /* TypeIds.Store */, out);
+            this.output(35 /* TypeIds.Store */, out);
         }
         else if (isSerializerObj(value)) {
             const result = value[SerializerSymbol](value);
             if (isPromise(result)) {
                 const forwardRef = this.resolvePromise(result, (resolved, resolvedValue) => {
-                    return new PromiseResult(26 /* TypeIds.SerializerSignal */, resolved, resolvedValue, undefined, undefined);
+                    return new PromiseResult(34 /* TypeIds.SerializerSignal */, resolved, resolvedValue, undefined, undefined);
                 });
                 this.output(2 /* TypeIds.ForwardRef */, forwardRef);
             }
@@ -9517,7 +9850,7 @@ class Serializer {
                     if (Object.prototype.hasOwnProperty.call(value, key)) {
                         const subVal = value[key];
                         if (!fastSkipSerialize(subVal)) {
-                            out.push(key, subVal);
+                            out.push(this.maybeNumericObjectKey$(key), subVal);
                         }
                     }
                 }
@@ -9533,17 +9866,17 @@ class Serializer {
                 const maybeValue = getCustomSerializerPromise(value, value.$untrackedValue$);
                 if (isPromise(maybeValue)) {
                     const forwardRefId = this.resolvePromise(maybeValue, (resolved, resolvedValue) => {
-                        return new PromiseResult(26 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
+                        return new PromiseResult(34 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
                     });
                     this.output(2 /* TypeIds.ForwardRef */, forwardRefId);
                 }
                 else {
-                    this.output(26 /* TypeIds.SerializerSignal */, [value.$computeQrl$, value.$effects$, maybeValue]);
+                    this.output(34 /* TypeIds.SerializerSignal */, [value.$computeQrl$, value.$effects$, maybeValue]);
                 }
                 return;
             }
             if (value instanceof WrappedSignalImpl) {
-                this.output(23 /* TypeIds.WrappedSignal */, [
+                this.output(31 /* TypeIds.WrappedSignal */, [
                     ...serializeWrappingFn(this.$serializationContext$, value),
                     value.$flags$,
                     value.$hostElement$,
@@ -9557,7 +9890,7 @@ class Serializer {
                 const isInvalid = value.$flags$ & 1 /* SignalFlags.INVALID */;
                 const isSkippable = fastSkipSerialize(value.$untrackedValue$);
                 const isAsync = value instanceof AsyncSignalImpl;
-                const interval = isAsync && value.$interval$ !== 0 ? value.$interval$ : undefined;
+                const expires = isAsync && value.$expires$ !== 0 ? value.$expires$ : undefined;
                 const concurrency = isAsync && value.$concurrency$ !== 1 ? value.$concurrency$ : undefined;
                 const timeout = isAsync && value.$timeoutMs$ !== 0 ? value.$timeoutMs$ : undefined;
                 // Send the flags but remove the serialization bits and default to 0 when undefined
@@ -9578,36 +9911,31 @@ class Serializer {
                     out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedError$);
                     out.push(asyncFlags || undefined);
                 }
-                let keepUndefined = false;
                 if (v !== NEEDS_COMPUTATION ||
-                    interval !== undefined ||
+                    expires !== undefined ||
                     concurrency !== undefined ||
                     timeout !== undefined) {
-                    out.push(v);
-                    if (v === undefined) {
-                        /**
-                         * If value is undefined, we need to keep it in the output. If we don't do that, later
-                         * during resuming, the value will be set to symbol(invalid) with flag invalid, and
-                         * thats is incorrect.
-                         */
-                        keepUndefined = true;
-                    }
+                    /**
+                     * If value is undefined, we need to keep it in the output. If we don't do that, later
+                     * during resuming, the value will be set to symbol(invalid) with flag invalid, and thats
+                     * is incorrect.
+                     */
+                    out.push(v === undefined ? explicitUndefined : v);
                 }
                 if (isAsync) {
-                    out.push(interval);
+                    out.push(expires);
                     out.push(concurrency);
                     out.push(timeout);
                 }
-                this.output(isAsync ? 25 /* TypeIds.AsyncSignal */ : 24 /* TypeIds.ComputedSignal */, out, keepUndefined);
+                this.output(isAsync ? 33 /* TypeIds.AsyncSignal */ : 32 /* TypeIds.ComputedSignal */, out);
             }
             else {
                 const v = value.$untrackedValue$;
-                const keepUndefined = v === undefined;
-                const out = [v];
+                const out = [v === undefined ? explicitUndefined : v];
                 if (value.$effects$) {
                     out.push(...value.$effects$);
                 }
-                this.output(22 /* TypeIds.Signal */, out, keepUndefined);
+                this.output(30 /* TypeIds.Signal */, out);
             }
         }
         else if (value instanceof URL) {
@@ -9616,6 +9944,30 @@ class Serializer {
         else if (value instanceof Date) {
             this.output(7 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
         }
+        else if (this.$hasTemporal$ && value instanceof Temporal.Duration) {
+            this.output(15 /* TypeIds.TemporalDuration */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.Instant) {
+            this.output(16 /* TypeIds.TemporalInstant */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainDate) {
+            this.output(17 /* TypeIds.TemporalPlainDate */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainDateTime) {
+            this.output(18 /* TypeIds.TemporalPlainDateTime */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainMonthDay) {
+            this.output(19 /* TypeIds.TemporalPlainMonthDay */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainTime) {
+            this.output(20 /* TypeIds.TemporalPlainTime */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainYearMonth) {
+            this.output(21 /* TypeIds.TemporalPlainYearMonth */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.ZonedDateTime) {
+            this.output(22 /* TypeIds.TemporalZonedDateTime */, value.toJSON());
+        }
         else if (value instanceof RegExp) {
             this.output(8 /* TypeIds.Regex */, value.toString());
         }
@@ -9627,7 +9979,7 @@ class Serializer {
             if (isDev) {
                 out.push('stack', value.stack);
             }
-            this.output(15 /* TypeIds.Error */, out);
+            this.output(23 /* TypeIds.Error */, out);
         }
         else if (this.$serializationContext$.$isSsrNode$(value)) {
             const rootIndex = this.$serializationContext$.$addRoot$(value);
@@ -9659,20 +10011,20 @@ class Serializer {
                     array.push(k, v);
                 }
             }
-            this.output(28 /* TypeIds.FormData */, array);
+            this.output(36 /* TypeIds.FormData */, array);
         }
         else if (value instanceof URLSearchParams) {
             this.output(13 /* TypeIds.URLSearchParams */, value.toString());
         }
         else if (value instanceof Set) {
-            this.output(17 /* TypeIds.Set */, [...value.values()]);
+            this.output(25 /* TypeIds.Set */, [...value.values()]);
         }
         else if (value instanceof Map) {
             const combined = [];
             for (const [k, v] of value.entries()) {
                 combined.push(k, v);
             }
-            this.output(18 /* TypeIds.Map */, combined);
+            this.output(26 /* TypeIds.Map */, combined);
         }
         else if (isJSXNode(value)) {
             const out = [
@@ -9686,25 +10038,25 @@ class Serializer {
             while (out[out.length - 1] === undefined) {
                 out.pop();
             }
-            this.output(29 /* TypeIds.JSXNode */, out);
+            this.output(37 /* TypeIds.JSXNode */, out);
         }
         else if (value instanceof Task) {
             const out = [value.$qrl$, value.$flags$, value.$index$, value.$el$, value.$state$];
             while (out[out.length - 1] === undefined) {
                 out.pop();
             }
-            this.output(20 /* TypeIds.Task */, out);
+            this.output(28 /* TypeIds.Task */, out);
         }
         else if (isPromise(value)) {
             const forwardRefId = this.resolvePromise(value, (resolved, resolvedValue) => {
-                return new PromiseResult(16 /* TypeIds.Promise */, resolved, resolvedValue);
+                return new PromiseResult(24 /* TypeIds.Promise */, resolved, resolvedValue);
             });
             this.output(2 /* TypeIds.ForwardRef */, forwardRefId);
         }
         else if (value instanceof PromiseResult) {
-            if (value.$type$ === 26 /* TypeIds.SerializerSignal */) {
+            if (value.$type$ === 34 /* TypeIds.SerializerSignal */) {
                 if (value.$qrl$) {
-                    this.output(26 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
+                    this.output(34 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
                 }
                 else if (value.$resolved$) {
                     // We replace ourselves with this value
@@ -9718,7 +10070,7 @@ class Serializer {
                 }
             }
             else {
-                this.output(16 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
+                this.output(24 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
             }
         }
         else if (value instanceof Uint8Array) {
@@ -9728,7 +10080,7 @@ class Serializer {
                 buf += String.fromCharCode(value[i]);
             }
             const out = btoa(buf).replace(/=+$/, '');
-            this.output(19 /* TypeIds.Uint8Array */, out);
+            this.output(27 /* TypeIds.Uint8Array */, out);
         }
         else if (value instanceof SerializationWeakRef) {
             const obj = value.$obj$;
@@ -10056,6 +10408,7 @@ DomRefConstructor, symbolToChunkResolver, setProp, storeProxyMap, writer) => {
 
 const getKeyVal = (value, key) => value[key];
 const canSerialize = (value, seen = new WeakSet()) => {
+    const hasTemporal = typeof Temporal !== 'undefined';
     if (value == null ||
         typeof value === 'string' ||
         typeof value === 'number' ||
@@ -10118,6 +10471,30 @@ const canSerialize = (value, seen = new WeakSet()) => {
         else if (value instanceof Date) {
             return true;
         }
+        else if (hasTemporal && value instanceof Temporal.Duration) {
+            return true;
+        }
+        else if (hasTemporal && value instanceof Temporal.Instant) {
+            return true;
+        }
+        else if (hasTemporal && value instanceof Temporal.PlainDate) {
+            return true;
+        }
+        else if (hasTemporal && value instanceof Temporal.PlainDateTime) {
+            return true;
+        }
+        else if (hasTemporal && value instanceof Temporal.PlainMonthDay) {
+            return true;
+        }
+        else if (hasTemporal && value instanceof Temporal.PlainTime) {
+            return true;
+        }
+        else if (hasTemporal && value instanceof Temporal.PlainYearMonth) {
+            return true;
+        }
+        else if (hasTemporal && value instanceof Temporal.ZonedDateTime) {
+            return true;
+        }
         else if (value instanceof RegExp) {
             return true;
         }
@@ -10154,85 +10531,6 @@ const canSerialize = (value, seen = new WeakSet()) => {
     return false;
 };
 
-// Used for allocate, make sure they are in sync with Constants
-const _constants = [
-    undefined,
-    null,
-    true,
-    false,
-    '',
-    EMPTY_ARRAY,
-    EMPTY_OBJ,
-    NEEDS_COMPUTATION,
-    STORE_ALL_PROPS,
-    _UNINITIALIZED,
-    Slot,
-    Fragment,
-    NaN,
-    Infinity,
-    -Infinity,
-    Number.MAX_SAFE_INTEGER,
-    Number.MAX_SAFE_INTEGER - 1,
-    Number.MIN_SAFE_INTEGER,
-];
-// Used for dumpState, make sure they are in sync with Constants
-const _constantNames = [
-    'undefined',
-    'null',
-    'true',
-    'false',
-    "''",
-    'EMPTY_ARRAY',
-    'EMPTY_OBJ',
-    'NEEDS_COMPUTATION',
-    'STORE_ALL_PROPS',
-    '_UNINITIALIZED',
-    'Slot',
-    'Fragment',
-    'NaN',
-    'Infinity',
-    '-Infinity',
-    'MAX_SAFE_INTEGER',
-    'MAX_SAFE_INTEGER-1',
-    'MIN_SAFE_INTEGER',
-];
-// Used for dumpState, make sure they are in sync with TypeIds
-const _typeIdNames = [
-    'Plain',
-    'RootRef',
-    'ForwardRef',
-    'Constant',
-    'Array',
-    'Object',
-    'URL',
-    'Date',
-    'Regex',
-    'QRL',
-    'VNode',
-    'RefVNode',
-    'BigInt',
-    'URLSearchParams',
-    'ForwardRefs',
-    'Error',
-    'Promise',
-    'Set',
-    'Map',
-    'Uint8Array',
-    'Task',
-    'Component',
-    'Signal',
-    'WrappedSignal',
-    'ComputedSignal',
-    'AsyncSignal',
-    'SerializerSignal',
-    'Store',
-    'FormData',
-    'JSXNode',
-    'PropsProxy',
-    'SubscriptionData',
-    'EffectSubscription',
-];
-
 const circularProofJson = (obj, indent) => {
     const seen = new WeakSet();
     return JSON.stringify(obj, (_, value) => {
@@ -10445,30 +10743,46 @@ const allocate = (container, typeId, value) => {
             }
             return qrl;
         }
-        case 20 /* TypeIds.Task */:
+        case 28 /* TypeIds.Task */:
             return new Task(-1, -1, null, null, null, null);
         case 6 /* TypeIds.URL */:
             return new URL(value);
         case 7 /* TypeIds.Date */:
             return new Date(value);
+        case 15 /* TypeIds.TemporalDuration */:
+            return Temporal.Duration.from(value);
+        case 16 /* TypeIds.TemporalInstant */:
+            return Temporal.Instant.from(value);
+        case 17 /* TypeIds.TemporalPlainDate */:
+            return Temporal.PlainDate.from(value);
+        case 18 /* TypeIds.TemporalPlainDateTime */:
+            return Temporal.PlainDateTime.from(value);
+        case 19 /* TypeIds.TemporalPlainMonthDay */:
+            return Temporal.PlainMonthDay.from(value);
+        case 20 /* TypeIds.TemporalPlainTime */:
+            return Temporal.PlainTime.from(value);
+        case 21 /* TypeIds.TemporalPlainYearMonth */:
+            return Temporal.PlainYearMonth.from(value);
+        case 22 /* TypeIds.TemporalZonedDateTime */:
+            return Temporal.ZonedDateTime.from(value);
         case 8 /* TypeIds.Regex */:
             const idx = value.lastIndexOf('/');
             return new RegExp(value.slice(1, idx), value.slice(idx + 1));
-        case 15 /* TypeIds.Error */:
+        case 23 /* TypeIds.Error */:
             return new Error();
-        case 21 /* TypeIds.Component */:
+        case 29 /* TypeIds.Component */:
             return componentQrl(null);
-        case 22 /* TypeIds.Signal */:
+        case 30 /* TypeIds.Signal */:
             return new SignalImpl(container, 0);
-        case 23 /* TypeIds.WrappedSignal */:
+        case 31 /* TypeIds.WrappedSignal */:
             return new WrappedSignalImpl(container, null, null, null);
-        case 24 /* TypeIds.ComputedSignal */:
+        case 32 /* TypeIds.ComputedSignal */:
             return new ComputedSignalImpl(container, null);
-        case 25 /* TypeIds.AsyncSignal */:
-            return new AsyncSignalImpl(container, null, undefined, { interval: 0 });
-        case 26 /* TypeIds.SerializerSignal */:
+        case 33 /* TypeIds.AsyncSignal */:
+            return new AsyncSignalImpl(container, null, undefined, {});
+        case 34 /* TypeIds.SerializerSignal */:
             return new SerializerSignalImpl(container, null);
-        case 27 /* TypeIds.Store */: {
+        case 35 /* TypeIds.Store */: {
             const data = value;
             // We need to allocate the store first, before we inflate its data, because the data can
             // reference the store itself (circular)
@@ -10487,17 +10801,17 @@ const allocate = (container, typeId, value) => {
         }
         case 13 /* TypeIds.URLSearchParams */:
             return new URLSearchParams(value);
-        case 28 /* TypeIds.FormData */:
+        case 36 /* TypeIds.FormData */:
             return new FormData();
-        case 29 /* TypeIds.JSXNode */:
+        case 37 /* TypeIds.JSXNode */:
             return new JSXNodeImpl(null, null, null, null, 0, null);
         case 12 /* TypeIds.BigInt */:
             return BigInt(value);
-        case 17 /* TypeIds.Set */:
+        case 25 /* TypeIds.Set */:
             return new Set();
-        case 18 /* TypeIds.Map */:
+        case 26 /* TypeIds.Map */:
             return new Map();
-        case 16 /* TypeIds.Promise */:
+        case 24 /* TypeIds.Promise */:
             let resolve;
             let reject;
             const promise = new Promise((res, rej) => {
@@ -10508,13 +10822,13 @@ const allocate = (container, typeId, value) => {
             // Don't leave unhandled promise rejections
             promise.catch(() => { });
             return promise;
-        case 19 /* TypeIds.Uint8Array */:
+        case 27 /* TypeIds.Uint8Array */:
             const encodedLength = value.length;
             const blocks = encodedLength >>> 2;
             const rest = encodedLength & 3;
             const decodedLength = blocks * 3 + (rest ? rest - 1 : 0);
             return new Uint8Array(decodedLength);
-        case 30 /* TypeIds.PropsProxy */:
+        case 38 /* TypeIds.PropsProxy */:
             return createPropsProxy(null);
         case 10 /* TypeIds.VNode */:
             return retrieveVNodeOrDocument(container, value);
@@ -10552,9 +10866,9 @@ const allocate = (container, typeId, value) => {
             else {
                 throw qError(17 /* QError.serializeErrorExpectedVNode */, [typeof vNode]);
             }
-        case 31 /* TypeIds.SubscriptionData */:
+        case 39 /* TypeIds.SubscriptionData */:
             return new SubscriptionData({});
-        case 32 /* TypeIds.EffectSubscription */:
+        case 40 /* TypeIds.EffectSubscription */:
             return new EffectSubscription(null, null, null, null);
         default:
             throw qError(18 /* QError.serializeErrorCannotAllocate */, [typeId]);
@@ -10964,10 +11278,11 @@ function maybeAddPollingAsyncSignalToEagerResume(serializationCtx, signal) {
     // Unwrap if it's a WrappedSignalImpl
     const unwrappedSignal = signal instanceof WrappedSignalImpl ? signal.$unwrapIfSignal$() : signal;
     if (unwrappedSignal instanceof AsyncSignalImpl) {
-        const interval = unwrappedSignal.$interval$;
+        const expires = unwrappedSignal.$expires$;
         // Don't check for $effects$ here - effects are added later during tracking.
         // The AsyncSignal's polling mechanism will check for effects before scheduling.
-        if (interval > 0) {
+        // Only eager-resume for polling signals, not stale-only ones.
+        if (expires && !(unwrappedSignal.$flags$ & 256 /* AsyncSignalFlags.NO_POLL */)) {
             serializationCtx.$addRoot$(unwrappedSignal);
             serializationCtx.$eagerResume$.add(unwrappedSignal);
         }
@@ -11195,8 +11510,8 @@ function addQwikEventToSerializationContext(serializationCtx, key, qrl) {
  * @see `useOn`, `useOnWindow`, `useOnDocument`.
  */
 // </docs>
-const useOn = (event, eventQrl) => {
-    _useOn("q-e:" /* EventNameHtmlScope.on */, event, eventQrl);
+const useOn = (event, eventQrl, options) => {
+    _useOn(options?.passive ? "q-ep:" /* EventNameHtmlScope.onPassive */ : "q-e:" /* EventNameHtmlScope.on */, event, eventQrl, options);
 };
 // <docs markdown="../readme.md#useOnDocument">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -11229,8 +11544,8 @@ const useOn = (event, eventQrl) => {
  * ```
  */
 // </docs>
-const useOnDocument = (event, eventQrl) => {
-    _useOn("q-d:" /* EventNameHtmlScope.document */, event, eventQrl);
+const useOnDocument = (event, eventQrl, options) => {
+    _useOn(options?.passive ? "q-dp:" /* EventNameHtmlScope.documentPassive */ : "q-d:" /* EventNameHtmlScope.document */, event, eventQrl, options);
 };
 // <docs markdown="../readme.md#useOnWindow">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -11264,10 +11579,10 @@ const useOnDocument = (event, eventQrl) => {
  * ```
  */
 // </docs>
-const useOnWindow = (event, eventQrl) => {
-    _useOn("q-w:" /* EventNameHtmlScope.window */, event, eventQrl);
+const useOnWindow = (event, eventQrl, options) => {
+    _useOn(options?.passive ? "q-wp:" /* EventNameHtmlScope.windowPassive */ : "q-w:" /* EventNameHtmlScope.window */, event, eventQrl, options);
 };
-const _useOn = (prefix, eventName, eventQrl) => {
+const _useOn = (prefix, eventName, eventQrl, options) => {
     const { isAdded, addEvent } = useOnEventsSequentialScope();
     if (isAdded) {
         return;
@@ -11276,11 +11591,11 @@ const _useOn = (prefix, eventName, eventQrl) => {
         if (Array.isArray(eventName)) {
             for (let i = 0; i < eventName.length; i++) {
                 const event = eventName[i];
-                addEvent(prefix + fromCamelToKebabCase(event), eventQrl);
+                addEvent(prefix + fromCamelToKebabCase(event), eventQrl, options);
             }
         }
         else {
-            addEvent(prefix + fromCamelToKebabCase(eventName), eventQrl);
+            addEvent(prefix + fromCamelToKebabCase(eventName), eventQrl, options);
         }
     }
 };
@@ -11317,13 +11632,27 @@ const useOnEventsSequentialScope = () => {
     while (addedFlags.length <= seqIdx) {
         addedFlags.push(false);
     }
-    const addEvent = (eventName, eventQrl) => {
+    const addEvent = (eventName, eventQrl, options) => {
         addedFlags[seqIdx] = true;
-        let events = onMap[eventName];
-        if (!events) {
-            onMap[eventName] = events = [];
+        let event = onMap[eventName];
+        if (!event) {
+            onMap[eventName] = event = {
+                qrls: [],
+                capture: false,
+                preventdefault: false,
+                stoppropagation: false,
+            };
+        }
+        event.qrls.push(eventQrl);
+        if (options?.capture) {
+            event.capture = true;
+        }
+        if (options?.preventdefault) {
+            event.preventdefault = true;
+        }
+        if (options?.stoppropagation) {
+            event.stoppropagation = true;
         }
-        events.push(eventQrl);
     };
     return {
         isAdded: addedFlags[seqIdx],
@@ -11451,6 +11780,9 @@ const dangerousObjectKeys = new Set([
     'then',
 ]);
 const isSafeObjectKV = (key, value) => {
+    if (typeof key === 'number') {
+        return true;
+    }
     return (typeof key === 'string' &&
         key !== '__proto__' &&
         (typeof value !== 'function' || !dangerousObjectKeys.has(key)));
@@ -11483,7 +11815,7 @@ const inflate = (container, target, typeId, data) => {
                 target[key] = value;
             }
             break;
-        case 20 /* TypeIds.Task */:
+        case 28 /* TypeIds.Task */:
             const task = target;
             const v = data;
             task.$qrl$ = v[0];
@@ -11492,10 +11824,10 @@ const inflate = (container, target, typeId, data) => {
             task.$el$ = v[3];
             task.$state$ = v[4];
             break;
-        case 21 /* TypeIds.Component */:
+        case 29 /* TypeIds.Component */:
             target[SERIALIZABLE_STATE][0] = data[0];
             break;
-        case 27 /* TypeIds.Store */: {
+        case 35 /* TypeIds.Store */: {
             // Inflate the store target
             const store = unwrapStore(target);
             const storeTarget = pendingStoreTargets.get(store);
@@ -11514,7 +11846,7 @@ const inflate = (container, target, typeId, data) => {
             restoreEffectBackRefForEffectsMap(storeHandler.$effects$, store);
             break;
         }
-        case 22 /* TypeIds.Signal */: {
+        case 30 /* TypeIds.Signal */: {
             const signal = target;
             const d = data;
             signal.$untrackedValue$ = d[0];
@@ -11522,7 +11854,7 @@ const inflate = (container, target, typeId, data) => {
             restoreEffectBackRefForEffects(signal.$effects$, signal);
             break;
         }
-        case 23 /* TypeIds.WrappedSignal */: {
+        case 31 /* TypeIds.WrappedSignal */: {
             const signal = target;
             const d = data;
             signal.$func$ = container.getSyncFn(d[0]);
@@ -11536,14 +11868,22 @@ const inflate = (container, target, typeId, data) => {
             restoreEffectBackRefForEffects(signal.$effects$, signal);
             break;
         }
-        case 25 /* TypeIds.AsyncSignal */: {
+        case 33 /* TypeIds.AsyncSignal */: {
             const asyncSignal = target;
             const d = data;
             asyncSignal.$computeQrl$ = d[0];
-            asyncSignal.$effects$ = new Set(d[1]);
-            asyncSignal.$loadingEffects$ = new Set(d[2]);
-            asyncSignal.$errorEffects$ = new Set(d[3]);
-            asyncSignal.$untrackedError$ = d[4];
+            if (d[1]) {
+                asyncSignal.$effects$ = new Set(d[1]);
+            }
+            if (d[2]) {
+                asyncSignal.$loadingEffects$ = new Set(d[2]);
+            }
+            if (d[3]) {
+                asyncSignal.$errorEffects$ = new Set(d[3]);
+            }
+            if (d[4]) {
+                asyncSignal.$untrackedError$ = d[4];
+            }
             asyncSignal.$flags$ = d[5] ?? 0;
             if (asyncSignal.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
                 // If it's client only, it was serialized because it pretended to be loading
@@ -11557,9 +11897,16 @@ const inflate = (container, target, typeId, data) => {
             if (asyncSignal.$untrackedValue$ === NEEDS_COMPUTATION) {
                 asyncSignal.$flags$ |= 1 /* SignalFlags.INVALID */;
             }
-            // Note, we use the setter so that it schedules polling if needed
-            asyncSignal.interval = (d[7] ?? 0);
-            asyncSignal.$concurrency$ = (d[8] ?? 1);
+            // Handle old format (negative = no poll) and new format (always positive, flag in d[5])
+            const rawExpires = (d[7] ?? 0);
+            asyncSignal.expires = Math.abs(rawExpires);
+            if (rawExpires < 0) {
+                asyncSignal.$flags$ |= 256 /* AsyncSignalFlags.NO_POLL */;
+            }
+            if (d[8] !== undefined && d[8] !== 1) {
+                asyncSignal.$concurrency$ = (d[8] ?? 1);
+                asyncSignal.$jobs$ = [];
+            }
             asyncSignal.$timeoutMs$ = (d[9] ?? 0);
             restoreEffectBackRefForEffects(asyncSignal.$effects$, asyncSignal);
             restoreEffectBackRefForEffects(asyncSignal.$loadingEffects$, asyncSignal);
@@ -11567,8 +11914,8 @@ const inflate = (container, target, typeId, data) => {
             break;
         }
         // Inflating a SerializerSignal is the same as inflating a ComputedSignal
-        case 26 /* TypeIds.SerializerSignal */:
-        case 24 /* TypeIds.ComputedSignal */: {
+        case 34 /* TypeIds.SerializerSignal */:
+        case 32 /* TypeIds.ComputedSignal */: {
             const computed = target;
             const d = data;
             computed.$computeQrl$ = d[0];
@@ -11588,7 +11935,7 @@ const inflate = (container, target, typeId, data) => {
             if (hasValue) {
                 computed.$untrackedValue$ = d[2];
             }
-            if (typeId !== 26 /* TypeIds.SerializerSignal */ && computed.$untrackedValue$ !== NEEDS_COMPUTATION) {
+            if (typeId !== 34 /* TypeIds.SerializerSignal */ && computed.$untrackedValue$ !== NEEDS_COMPUTATION) {
                 // If we have a value after SSR, it will always be mean the signal was not invalid
                 // The serialized signal is always left invalid so it can recreate the custom object
                 computed.$flags$ &= -2 /* SignalFlags.INVALID */;
@@ -11596,7 +11943,7 @@ const inflate = (container, target, typeId, data) => {
             restoreEffectBackRefForEffects(computed.$effects$, computed);
             break;
         }
-        case 15 /* TypeIds.Error */: {
+        case 23 /* TypeIds.Error */: {
             const d = data;
             target.message = d[0];
             for (let i = 1; i < d.length; i += 2) {
@@ -11604,7 +11951,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 28 /* TypeIds.FormData */: {
+        case 36 /* TypeIds.FormData */: {
             const formData = target;
             const d = data;
             for (let i = 0; i < d.length; i++) {
@@ -11612,7 +11959,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 29 /* TypeIds.JSXNode */: {
+        case 37 /* TypeIds.JSXNode */: {
             const jsx = target;
             const [type, key, varProps, constProps, children, toSort] = data;
             jsx.type = type;
@@ -11623,7 +11970,7 @@ const inflate = (container, target, typeId, data) => {
             jsx.toSort = !!toSort;
             break;
         }
-        case 17 /* TypeIds.Set */: {
+        case 25 /* TypeIds.Set */: {
             const set = target;
             const d = data;
             for (let i = 0; i < d.length; i++) {
@@ -11631,7 +11978,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 18 /* TypeIds.Map */: {
+        case 26 /* TypeIds.Map */: {
             const map = target;
             const d = data;
             for (let i = 0; i < d.length; i++) {
@@ -11639,7 +11986,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 16 /* TypeIds.Promise */: {
+        case 24 /* TypeIds.Promise */: {
             const promise = target;
             const [resolved, result] = data;
             const [resolve, reject] = resolvers.get(promise);
@@ -11651,7 +11998,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 19 /* TypeIds.Uint8Array */:
+        case 27 /* TypeIds.Uint8Array */:
             const bytes = target;
             const buf = atob(data);
             let i = 0;
@@ -11660,7 +12007,7 @@ const inflate = (container, target, typeId, data) => {
                 bytes[i++] = s.charCodeAt(0);
             }
             break;
-        case 30 /* TypeIds.PropsProxy */:
+        case 38 /* TypeIds.PropsProxy */:
             const propsProxy = target;
             const d = data;
             let owner = d[0];
@@ -11673,13 +12020,13 @@ const inflate = (container, target, typeId, data) => {
             propsHandler.$effects$ = d[3];
             restoreEffectBackRefForEffectsMap(propsHandler.$effects$, propsProxy);
             break;
-        case 31 /* TypeIds.SubscriptionData */: {
+        case 39 /* TypeIds.SubscriptionData */: {
             const effectData = target;
             effectData.data.$scopedStyleIdPrefix$ = data[0];
             effectData.data.$isConst$ = data[1];
             break;
         }
-        case 32 /* TypeIds.EffectSubscription */: {
+        case 40 /* TypeIds.EffectSubscription */: {
             const effectSub = target;
             const d = data;
             effectSub.consumer = d[0];
@@ -11770,7 +12117,7 @@ function restoreEffectBackRefForEffectsMap(effectsMap, consumer) {
 }
 
 /** Arrays/Objects are special-cased so their identifiers is a single digit. */
-const needsInflation = (typeId) => typeId >= 15 /* TypeIds.Error */ || typeId === 4 /* TypeIds.Array */ || typeId === 5 /* TypeIds.Object */;
+const needsInflation = (typeId) => typeId >= 23 /* TypeIds.Error */ || typeId === 4 /* TypeIds.Array */ || typeId === 5 /* TypeIds.Object */;
 const deserializedProxyMap = new WeakMap();
 const isDeserializerProxy = (value) => {
     return isObject(value) && SERIALIZER_PROXY_UNWRAP in value;
@@ -13308,13 +13655,15 @@ class QRLClass {
     $container$;
     constructor($lazy$, $captures$, container) {
         this.$lazy$ = $lazy$;
+        if (qDev) {
+            initQrlClassDev($lazy$, $captures$, this);
+        }
         if ($captures$) {
             this.$captures$ = $captures$;
             if (typeof $captures$ === 'string') {
                 // We cannot rely on the container of the lazy ref, it may be missing or different
                 this.$container$ = container;
             }
-            qDev && initQrlClassDev($lazy$, $captures$, this);
         }
         // If it is plain value with deserialized or missing captures, resolve it immediately
         // Otherwise we keep using the async path so we can wait for qrls to load