@qwik.dev/core 2.0.0-beta.13 → 2.0.0-beta.15

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.13-dev+cb19ff7
+ * @qwik.dev/core 2.0.0-beta.15-dev+920f1a4
  * 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
@@ -14,7 +14,7 @@ import { p } from '@qwik.dev/core/preloader';
  *
  * @public
  */
-const version = "2.0.0-beta.13-dev+cb19ff7";
+const version = "2.0.0-beta.15-dev+920f1a4";
 
 // same as isDev but separate so we can test
 const qDev = globalThis.qDev !== false;
@@ -251,7 +251,6 @@ const ELEMENT_KEY = 'q:key';
 const ELEMENT_PROPS = 'q:props';
 const ELEMENT_SEQ = 'q:seq';
 const ELEMENT_SEQ_IDX = 'q:seqIdx';
-const Q_PREFIX = 'q:';
 /** Non serializable markers - always begins with `:` character */
 const NON_SERIALIZABLE_MARKER_PREFIX = ':';
 const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
@@ -916,7 +915,7 @@ const STORE_ALL_PROPS = Symbol('store.all');
 class SignalImpl {
     $untrackedValue$;
     /** Store a list of effects which are dependent on this signal. */
-    $effects$ = null;
+    $effects$ = undefined;
     $container$ = null;
     $wrappedSignal$ = null;
     constructor(container, value) {
@@ -928,7 +927,7 @@ class SignalImpl {
      * remained the same object
      */
     force() {
-        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
+        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, this, this.$effects$);
     }
     get untrackedValue() {
         return this.$untrackedValue$;
@@ -943,7 +942,7 @@ class SignalImpl {
     set value(value) {
         if (value !== this.$untrackedValue$) {
             this.$untrackedValue$ = value;
-            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, this, this.$effects$);
         }
     }
     // prevent accidental use as value
@@ -1005,6 +1004,8 @@ const _CONST_PROPS = Symbol('CONST');
 const _VAR_PROPS = Symbol('VAR');
 /** @internal */
 const _OWNER = Symbol('OWNER');
+/** @internal */
+const _PROPS_HANDLER = Symbol('PROPS_HANDLER');
 /** @internal @deprecated v1 compat */
 const _IMMUTABLE = Symbol('IMMUTABLE');
 /** @internal */
@@ -1080,6 +1081,13 @@ const getEventDataFromHtmlAttribute = (htmlKey) => {
     }
     return ['document', htmlKey.substring(12)];
 };
+const getScopedEventName = (scope, eventName) => {
+    const suffix = ':' + eventName;
+    return scope ? scope + suffix : suffix;
+};
+const getLoaderScopedEventName = (scope, scopedEvent) => {
+    return scope ? '-' + scopedEvent : scopedEvent;
+};
 
 /** @internal */
 const EMPTY_ARRAY = [];
@@ -1093,6 +1101,8 @@ function createPropsProxy(owner) {
 }
 class PropsProxyHandler {
     owner;
+    $effects$ = undefined;
+    $container$ = null;
     constructor(owner) {
         this.owner = owner;
     }
@@ -1101,12 +1111,15 @@ class PropsProxyHandler {
         if (prop === _CONST_PROPS) {
             return this.owner.constProps;
         }
-        if (prop === _VAR_PROPS) {
+        else if (prop === _VAR_PROPS) {
             return this.owner.varProps;
         }
-        if (prop === _OWNER) {
+        else if (prop === _OWNER) {
             return this.owner;
         }
+        else if (prop === _PROPS_HANDLER) {
+            return this;
+        }
         let value;
         if (prop === 'children') {
             value = this.owner.children;
@@ -1119,6 +1132,9 @@ class PropsProxyHandler {
                 }
             }
             value = directGetPropsProxyProp(this.owner, prop);
+            if (prop in this.owner.varProps) {
+                addPropsProxyEffect(this, prop);
+            }
         }
         // a proxied value that the optimizer made
         return value instanceof WrappedSignalImpl && value.$flags$ & 4 /* WrappedSignalFlags.UNWRAP */
@@ -1133,6 +1149,12 @@ class PropsProxyHandler {
         else if (prop === 'children') {
             this.owner.children = value;
         }
+        else if (prop === _CONST_PROPS) {
+            this.owner.constProps = value;
+        }
+        else if (prop === _VAR_PROPS) {
+            this.owner.varProps = value;
+        }
         else {
             if (typeof prop === 'string' && typeof this.owner.type === 'string') {
                 const attr = jsxEventToHtmlAttribute(prop);
@@ -1141,28 +1163,27 @@ class PropsProxyHandler {
                 }
             }
             if (this.owner.constProps && prop in this.owner.constProps) {
-                this.owner.constProps[prop] = undefined;
-                if (!(prop in this.owner.varProps)) {
-                    this.owner.toSort = true;
-                }
-                this.owner.varProps[prop] = value;
+                // delete the prop from the const props first
+                delete this.owner.constProps[prop];
             }
-            else {
-                if (this.owner.varProps === EMPTY_OBJ) {
-                    this.owner.varProps = {};
-                }
-                else {
-                    if (!(prop in this.owner.varProps)) {
-                        this.owner.toSort = true;
-                    }
-                }
+            if (this.owner.varProps === EMPTY_OBJ) {
+                this.owner.varProps = {};
+            }
+            else if (!(prop in this.owner.varProps)) {
+                this.owner.toSort = true;
+            }
+            if (this.owner.varProps[prop] !== value) {
                 this.owner.varProps[prop] = value;
+                triggerPropsProxyEffect(this, prop);
             }
         }
         return true;
     }
     deleteProperty(_, prop) {
         let didDelete = delete this.owner.varProps[prop];
+        if (didDelete) {
+            triggerPropsProxyEffect(this, prop);
+        }
         if (this.owner.constProps) {
             didDelete = delete this.owner.constProps[prop] || didDelete;
         }
@@ -1179,13 +1200,19 @@ class PropsProxyHandler {
         else if (prop === _CONST_PROPS || prop === _VAR_PROPS) {
             return true;
         }
-        if (typeof prop === 'string' && typeof this.owner.type === 'string') {
-            const attr = jsxEventToHtmlAttribute(prop);
-            if (attr) {
-                prop = attr;
+        const inVarProps = prop in this.owner.varProps;
+        if (typeof prop === 'string') {
+            if (inVarProps) {
+                addPropsProxyEffect(this, prop);
+            }
+            if (typeof this.owner.type === 'string') {
+                const attr = jsxEventToHtmlAttribute(prop);
+                if (attr) {
+                    prop = attr;
+                }
             }
         }
-        return (prop in this.owner.varProps || (this.owner.constProps ? prop in this.owner.constProps : false));
+        return inVarProps || (this.owner.constProps ? prop in this.owner.constProps : false);
     }
     getOwnPropertyDescriptor(_, p) {
         const value = p === 'children'
@@ -1214,6 +1241,34 @@ class PropsProxyHandler {
         return out;
     }
 }
+const addPropsProxyEffect = (propsProxy, prop) => {
+    // Lazily grab the container from the invoke context
+    const ctx = tryGetInvokeContext();
+    if (ctx) {
+        if (propsProxy.$container$ === null) {
+            if (ctx.$container$) {
+                propsProxy.$container$ = ctx.$container$;
+            }
+        }
+        else {
+            assertTrue(!ctx.$container$ || ctx.$container$ === propsProxy.$container$, 'Do not use props across containers');
+        }
+    }
+    const effectSubscriber = ctx?.$effectSubscriber$;
+    if (effectSubscriber) {
+        addStoreEffect(propsProxy.owner._proxy, prop, propsProxy, effectSubscriber);
+    }
+};
+const triggerPropsProxyEffect = (propsProxy, prop) => {
+    const effects = getEffects$1(propsProxy.$effects$, prop);
+    if (effects) {
+        propsProxy.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, propsProxy, effects);
+    }
+};
+function getEffects$1(effects, prop) {
+    // TODO: Handle STORE_ALL_PROPS
+    return effects?.get(prop);
+}
 /**
  * Instead of using PropsProxyHandler getter (which could create a component-level subscription).
  * Use this function to get the props directly from a const or var props.
@@ -1245,6 +1300,19 @@ const isPropsProxy = (obj) => {
     return obj && _VAR_PROPS in obj;
 };
 
+const cleanupDestroyable = (destroyable) => {
+    const destroy = destroyable.$destroy$;
+    if (destroy) {
+        destroyable.$destroy$ = null;
+        try {
+            destroy();
+        }
+        catch (err) {
+            logError(err);
+        }
+    }
+};
+
 function getSubscriber(effect, prop, data) {
     if (!effect[_EFFECT_BACK_REF]) {
         if (isServer && isSsrNode(effect)) {
@@ -1284,6 +1352,7 @@ const trackFn = (target, container) => (obj, prop) => {
             return obj.value;
         }
         else if (isObject(obj) && isStore(obj)) {
+            // TODO: handle props proxy
             // track whole store
             addStoreEffect(getStoreTarget(obj), STORE_ALL_PROPS, getStoreHandler(obj), ctx.$effectSubscriber$);
             return obj;
@@ -1301,14 +1370,14 @@ const cleanupFn = (target, handleError) => {
                 cleanupFns = [];
                 target.$destroy$ = noSerialize(() => {
                     target.$destroy$ = null;
-                    cleanupFns.forEach((fn) => {
+                    for (const fn of cleanupFns) {
                         try {
                             fn();
                         }
                         catch (err) {
                             handleError(err);
                         }
-                    });
+                    }
                 });
             }
             cleanupFns.push(fn);
@@ -1334,7 +1403,7 @@ class ComputedSignalImpl extends SignalImpl {
      */
     $computeQrl$;
     $flags$;
-    [_EFFECT_BACK_REF] = null;
+    [_EFFECT_BACK_REF] = undefined;
     constructor(container, fn, 
     // We need a separate flag to know when the computation needs running because
     // we need the old value to know if effects need running after computation
@@ -1348,7 +1417,7 @@ class ComputedSignalImpl extends SignalImpl {
     }
     invalidate() {
         this.$flags$ |= 1 /* SignalFlags.INVALID */;
-        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
+        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, this, this.$effects$);
     }
     /**
      * Use this to force running subscribers, for example when the calculated value has mutated but
@@ -1416,12 +1485,13 @@ class ComputedSignalImpl extends SignalImpl {
  */
 class AsyncComputedSignalImpl extends ComputedSignalImpl {
     $untrackedLoading$ = false;
-    $untrackedError$ = null;
-    $loadingEffects$ = null;
-    $errorEffects$ = null;
+    $untrackedError$ = undefined;
+    $loadingEffects$ = undefined;
+    $errorEffects$ = undefined;
     $destroy$;
     $promiseValue$ = NEEDS_COMPUTATION;
-    [_EFFECT_BACK_REF] = null;
+    $promise$ = null;
+    [_EFFECT_BACK_REF] = undefined;
     constructor(container, fn, flags = 1 /* SignalFlags.INVALID */) {
         super(container, fn, flags);
     }
@@ -1435,7 +1505,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
     set untrackedLoading(value) {
         if (value !== this.$untrackedLoading$) {
             this.$untrackedLoading$ = value;
-            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$loadingEffects$);
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, this, this.$loadingEffects$);
         }
     }
     get untrackedLoading() {
@@ -1448,7 +1518,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
     set untrackedError(value) {
         if (value !== this.$untrackedError$) {
             this.$untrackedError$ = value;
-            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$errorEffects$);
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, this, this.$errorEffects$);
         }
     }
     get untrackedError() {
@@ -1456,9 +1526,12 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
     }
     invalidate() {
         super.invalidate();
-        this.$promiseValue$ = NEEDS_COMPUTATION;
+        // clear the promise, we need to get function again
+        this.$promise$ = null;
     }
-    async resolve() {
+    async promise() {
+        // make sure we get a new promise during the next computation
+        this.$promise$ = null;
         await retryOnPromise(() => this.$computeIfNeeded$());
         return this.$untrackedValue$;
     }
@@ -1466,34 +1539,69 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
             return;
         }
-        const [cleanup] = cleanupFn(this, (err) => this.$container$?.handleError(err, null));
-        const untrackedValue = this.$promiseValue$ === NEEDS_COMPUTATION
-            ? this.$computeQrl$.getFn()({
-                track: trackFn(this, this.$container$),
-                cleanup,
-            })
+        const untrackedValue = 
+        // first time
+        this.$promiseValue$ === NEEDS_COMPUTATION ||
+            // or after invalidation
+            this.$promise$ === null
+            ? this.$promiseComputation$()
             : this.$promiseValue$;
         if (isPromise(untrackedValue)) {
+            const isFirstComputation = this.$promiseValue$ === NEEDS_COMPUTATION;
             this.untrackedLoading = true;
-            this.untrackedError = null;
-            throw untrackedValue
+            this.untrackedError = undefined;
+            if (this.$promiseValue$ !== NEEDS_COMPUTATION) {
+                // skip cleanup after resuming
+                cleanupDestroyable(this);
+            }
+            const promise = untrackedValue
                 .then((promiseValue) => {
                 this.$promiseValue$ = promiseValue;
                 this.untrackedLoading = false;
-                this.untrackedError = null;
+                this.untrackedError = undefined;
+                if (this.setValue(promiseValue)) {
+                    scheduleEffects(this.$container$, this, this.$effects$);
+                }
             })
                 .catch((err) => {
+                if (isPromise(err)) {
+                    // ignore promise errors, they will be handled
+                    return;
+                }
                 this.$promiseValue$ = err;
                 this.untrackedLoading = false;
                 this.untrackedError = err;
             });
+            if (isFirstComputation) {
+                // we want to throw only the first time
+                // the next time we will return stale value
+                throw promise;
+            }
+            else {
+                // Return the promise so the scheduler can track it as a running chore
+                return promise;
+            }
+        }
+        else {
+            this.setValue(untrackedValue);
+        }
+    }
+    async $promiseComputation$() {
+        if (!this.$promise$) {
+            const [cleanup] = cleanupFn(this, (err) => this.$container$?.handleError(err, null));
+            this.$promise$ = this.$computeQrl$.getFn()({
+                track: trackFn(this, this.$container$),
+                cleanup,
+            });
         }
-        this.$promiseValue$ = NEEDS_COMPUTATION;
+        return this.$promise$;
+    }
+    setValue(value) {
         this.$flags$ &= -2 /* SignalFlags.INVALID */;
-        const didChange = untrackedValue !== this.$untrackedValue$;
+        const didChange = value !== this.$untrackedValue$;
         if (didChange) {
+            this.$untrackedValue$ = value;
             this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
-            this.$untrackedValue$ = untrackedValue;
         }
         return didChange;
     }
@@ -1683,25 +1791,32 @@ const _wrapProp = (...args) => {
     }
     if (isPropsProxy(obj)) {
         const constProps = obj[_CONST_PROPS];
+        const varProps = obj[_VAR_PROPS];
         if (constProps && prop in constProps) {
             // Const props don't need wrapping
             return constProps[prop];
         }
+        else if (prop in varProps) {
+            const value = varProps[prop];
+            return wrapIfNotSignal(value, args);
+        }
     }
     else {
         const target = getStoreTarget(obj);
         if (target) {
             const value = target[prop];
-            const wrappedValue = isSignal(value)
-                ? // If the value is already a signal, we don't need to wrap it again
-                    value
-                : getWrapped(args);
-            return wrappedValue;
+            return wrapIfNotSignal(value, args);
         }
     }
     // the object is not reactive, so we can just return the value
     return obj[prop];
 };
+const wrapIfNotSignal = (value, args) => {
+    return (isSignal(value)
+        ? // If the value is already a signal, we don't need to wrap it again
+            value
+        : getWrapped(args));
+};
 /** @internal @deprecated v1 compat */
 const _wrapSignal = (obj, prop) => {
     const r = _wrapProp(obj, prop);
@@ -1716,8 +1831,8 @@ class WrappedSignalImpl extends SignalImpl {
     $func$;
     $funcStr$;
     $flags$;
-    $hostElement$ = null;
-    [_EFFECT_BACK_REF] = null;
+    $hostElement$ = undefined;
+    [_EFFECT_BACK_REF] = undefined;
     constructor(container, fn, args, fnStr, 
     // We need a separate flag to know when the computation needs running because
     // we need the old value to know if effects need running after computation
@@ -1793,7 +1908,7 @@ class WrappedSignalImpl extends SignalImpl {
 
 /** Class for back reference to the EffectSubscription */
 let BackRef$1 = class BackRef {
-    [_EFFECT_BACK_REF] = null;
+    [_EFFECT_BACK_REF] = undefined;
 };
 function clearAllEffects(container, consumer) {
     if (vnode_isVNode(consumer) && vnode_isElementVNode(consumer)) {
@@ -1806,6 +1921,7 @@ function clearAllEffects(container, consumer) {
     for (const [, effect] of effects) {
         clearEffectSubscription(container, effect);
     }
+    effects.clear();
 }
 function clearEffectSubscription(container, effect) {
     const backRefs = effect[2 /* EffectSubscriptionProp.BACK_REF */];
@@ -1819,12 +1935,17 @@ function clearEffectSubscription(container, effect) {
         else if (producer instanceof AsyncComputedSignalImpl) {
             clearAsyncComputedSignal(producer, effect);
         }
+        else if (isPropsProxy(producer)) {
+            const propsHandler = producer[_PROPS_HANDLER];
+            clearStoreOrProps(propsHandler, effect);
+        }
         else if (container.$storeProxyMap$.has(producer)) {
             const target = container.$storeProxyMap$.get(producer);
             const storeHandler = getStoreHandler(target);
-            clearStore(storeHandler, effect);
+            clearStoreOrProps(storeHandler, effect);
         }
     }
+    backRefs.clear();
 }
 function clearSignal(container, producer, effect) {
     const effects = producer.$effects$;
@@ -1832,7 +1953,7 @@ function clearSignal(container, producer, effect) {
         effects.delete(effect);
     }
     if (producer instanceof WrappedSignalImpl) {
-        producer.$hostElement$ = null;
+        producer.$hostElement$ = undefined;
         clearAllEffects(container, producer);
     }
 }
@@ -1846,12 +1967,15 @@ function clearAsyncComputedSignal(producer, effect) {
         pendingEffects.delete(effect);
     }
 }
-function clearStore(producer, effect) {
+function clearStoreOrProps(producer, effect) {
     const effects = producer?.$effects$;
     if (effects) {
-        for (const propEffects of effects.values()) {
+        for (const [prop, propEffects] of effects.entries()) {
             if (propEffects.has(effect)) {
                 propEffects.delete(effect);
+                if (propEffects.size === 0) {
+                    effects.delete(prop);
+                }
             }
         }
     }
@@ -2663,23 +2787,22 @@ const vnode_applyJournal = (journal) => {
                     key = 'class';
                 }
                 const value = journal[idx++];
+                const shouldRemove = value == null || value === false;
                 if (isBooleanAttr(element, key)) {
                     element[key] = parseBoolean(value);
                 }
-                else if (key === 'value' && key in element) {
-                    element.value = String(value);
-                }
                 else if (key === dangerouslySetInnerHTML) {
                     element.innerHTML = value;
                     element.setAttribute(QContainerAttr, "html" /* QContainerValue.HTML */);
                 }
+                else if (shouldRemove) {
+                    element.removeAttribute(key);
+                }
+                else if (key === 'value' && key in element) {
+                    element.value = String(value);
+                }
                 else {
-                    if (value == null || value === false) {
-                        element.removeAttribute(key);
-                    }
-                    else {
-                        element.setAttribute(key, String(value));
-                    }
+                    element.setAttribute(key, String(value));
                 }
                 break;
             case 3 /* VNodeJournalOpCode.HoistStyles */:
@@ -3419,6 +3542,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         const nodeIsElement = isElement(node);
         return !nodeIsElement || (nodeIsElement && shouldSkipElement(node));
     };
+    let components = null;
     processVNodeData$1(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
         if (isNumber(peek())) {
             // Element counts get encoded as numbers.
@@ -3445,6 +3569,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             vParent.setAttr(QScopedStyle, consumeValue(), null);
         }
         else if (peek() === VNodeDataChar.RENDER_FN) {
+            (components ||= []).push(vParent);
             vParent.setAttr(OnRenderProp, consumeValue(), null);
         }
         else if (peek() === VNodeDataChar.ID) {
@@ -3540,6 +3665,15 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             // Text nodes get encoded as alphanumeric characters.
         }
     });
+    if (components) {
+        if (!container) {
+            container = getDomContainer(element);
+        }
+        for (const component of components) {
+            container.ensureProjectionResolved(component);
+        }
+        components = null;
+    }
     vParent.lastChild = vLast;
     return vFirst;
 }
@@ -4290,14 +4424,14 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
             for (const k in varProps) {
                 if (k === 'children') {
                     children ||= varProps.children;
-                    varProps.children = undefined;
+                    delete varProps.children;
                 }
                 else if (k === 'key') {
                     key ||= varProps.key;
-                    varProps.key = undefined;
+                    delete varProps.key;
                 }
                 else if (constProps && k in constProps) {
-                    varProps[k] = undefined;
+                    delete varProps[k];
                 }
             }
         }
@@ -4370,14 +4504,17 @@ const RenderOnce = (props, key) => {
 };
 
 /** @internal */
-const useTaskQrl = (qrl) => {
+const useTaskQrl = (qrl, opts) => {
     const { val, set, iCtx, i } = useSequentialScope();
     if (val) {
         return;
     }
     assertQrl(qrl);
     set(1);
-    const task = new Task(8 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */, i, iCtx.$hostElement$, qrl, undefined, null);
+    const taskFlags = 
+    // enabled by default
+    opts?.deferUpdates === false ? 0 : 16 /* TaskFlags.RENDER_BLOCKING */;
+    const task = new Task(8 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */ | taskFlags, i, iCtx.$hostElement$, qrl, undefined, null);
     // In V2 we add the task to the sequential scope. We need to do this
     // in order to be able to retrieve it later when the parent element is
     // deleted and we need to be able to release the task subscriptions.
@@ -4390,7 +4527,7 @@ const useTaskQrl = (qrl) => {
 };
 const runTask = (task, container, host) => {
     task.$flags$ &= -9 /* TaskFlags.DIRTY */;
-    cleanupTask(task);
+    cleanupDestroyable(task);
     const iCtx = newInvokeContext(container.$locale$, host, undefined, TaskEvent);
     iCtx.$container$ = container;
     const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
@@ -4407,18 +4544,6 @@ const runTask = (task, container, host) => {
         }
     });
 };
-const cleanupTask = (task) => {
-    const destroy = task.$destroy$;
-    if (destroy) {
-        task.$destroy$ = null;
-        try {
-            destroy();
-        }
-        catch (err) {
-            logError(err);
-        }
-    }
-};
 class Task extends BackRef$1 {
     $flags$;
     $index$;
@@ -4587,7 +4712,7 @@ const isResourceReturn = (obj) => {
 };
 const runResource = (task, container, host) => {
     task.$flags$ &= -9 /* TaskFlags.DIRTY */;
-    cleanupTask(task);
+    cleanupDestroyable(task);
     const iCtx = newInvokeContext(container.$locale$, host, undefined, ResourceEvent);
     iCtx.$container$ = container;
     const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
@@ -4676,7 +4801,7 @@ const runResource = (task, container, host) => {
             promise,
             delay(timeout).then(() => {
                 if (setState(false, new Error('timeout'))) {
-                    cleanupTask(task);
+                    cleanupDestroyable(task);
                 }
             }),
         ]);
@@ -4814,16 +4939,17 @@ function qrlToString(serializationContext, value, raw) {
         // TODO test that provided stringified fn is used
         symbol = String(serializationContext.$addSyncFn$(null, 0, fn));
     }
-    if (!value.$capture$ && Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0) {
+    let capturedIds = null;
+    if (Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0) {
         // We refer by id so every capture needs to be a root
-        value.$capture$ = value.$captureRef$.map((ref) => `${serializationContext.$addRoot$(ref)}`);
+        capturedIds = value.$captureRef$.map((ref) => `${serializationContext.$addRoot$(ref)}`);
     }
     if (raw) {
-        return [chunk, symbol, value.$capture$];
+        return [chunk, symbol, capturedIds];
     }
     let qrlStringInline = `${chunk}#${symbol}`;
-    if (value.$capture$ && value.$capture$.length > 0) {
-        qrlStringInline += `[${value.$capture$.join(' ')}]`;
+    if (capturedIds && capturedIds.length > 0) {
+        qrlStringInline += `[${capturedIds.join(' ')}]`;
     }
     return qrlStringInline;
 }
@@ -5664,6 +5790,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
      */
     const stack = [];
     const asyncQueue = [];
+    const asyncAttributePromises = [];
     ////////////////////////////////
     //// Traverse state variables
     ////////////////////////////////
@@ -5730,8 +5857,9 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     else if (isSignal(jsxValue)) {
                         expectVirtual("S" /* VirtualType.WrappedSignal */, null);
                         const unwrappedSignal = jsxValue instanceof WrappedSignalImpl ? jsxValue.$unwrapIfSignal$() : jsxValue;
-                        const currentSignal = vCurrent?.[_EFFECT_BACK_REF]?.get("." /* EffectProperty.VNODE */)?.[0 /* EffectSubscriptionProp.CONSUMER */];
-                        if (currentSignal !== unwrappedSignal) {
+                        const hasUnwrappedSignal = vCurrent?.[_EFFECT_BACK_REF]
+                            ?.get("." /* EffectProperty.VNODE */)?.[2 /* EffectSubscriptionProp.BACK_REF */]?.has(unwrappedSignal);
+                        if (!hasUnwrappedSignal) {
                             const vHost = (vNewNode || vCurrent);
                             descend(resolveSignalAndDescend(() => trackSignalAndAssignHost(unwrappedSignal, vHost, "." /* EffectProperty.VNODE */, container)), true);
                         }
@@ -6077,6 +6205,14 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 diff(jsxNode, vHostNode);
             }
         }
+        // Wait for all async attribute promises to complete, then check for more work
+        if (asyncAttributePromises.length) {
+            const promises = asyncAttributePromises.splice(0);
+            return Promise.all(promises).then(() => {
+                // After attributes are set, check if there's more work in the queue
+                return drainAsyncQueue();
+            });
+        }
     }
     function expectNoChildren() {
         const vFirstChild = vCurrent && vnode_getFirstChild(vCurrent);
@@ -6128,11 +6264,11 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     // only svg elements can have namespace attributes
                     const namespace = getAttributeNamespace(key);
                     if (namespace) {
-                        element.setAttributeNS(namespace, key, String(value));
+                        element.setAttributeNS(namespace, key, value);
                         return;
                     }
                 }
-                element.setAttribute(key, String(value));
+                element.setAttribute(key, value);
             }
         }
         const { constProps } = jsx;
@@ -6146,15 +6282,17 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 if (isHtmlAttributeAnEventName(key)) {
                     const data = getEventDataFromHtmlAttribute(key);
                     if (data) {
-                        const scope = data[0];
-                        const eventName = data[1];
+                        const [scope, eventName] = data;
+                        const scopedEvent = getScopedEventName(scope, eventName);
+                        const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
                         if (eventName) {
-                            vNewNode.setProp(HANDLER_PREFIX + ':' + scope + ':' + eventName, value);
+                            vNewNode.setProp(HANDLER_PREFIX + ':' + scopedEvent, value);
                             if (scope) {
                                 // window and document need attrs so qwik loader can find them
                                 vNewNode.setAttr(key, '', journal);
                             }
-                            registerQwikLoaderEvent(eventName);
+                            // register an event for qwik loader (window/document prefixed with '-')
+                            registerQwikLoaderEvent(loaderScopedEvent);
                         }
                     }
                     needsQDispatchEventPatch = true;
@@ -6183,7 +6321,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 }
                 if (isPromise(value)) {
                     const vHost = vNewNode;
-                    value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                    const attributePromise = value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                    asyncAttributePromises.push(attributePromise);
                     continue;
                 }
                 if (key === dangerouslySetInnerHTML) {
@@ -6307,10 +6446,37 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         let srcIdx = 0;
         let dstIdx = 0;
         let patchEventDispatch = false;
-        const setAttribute = (key, value, vHost) => {
-            vHost.setAttr(key, value !== null ? serializeAttribute(key, value, scopedStyleIdPrefix) : null, journal);
+        /**
+         * Optimized setAttribute that bypasses redundant checks when we already know:
+         *
+         * - The index in dstAttrs (no need for binary search)
+         * - The vnode is ElementVNode (no instanceof check)
+         * - The value has changed (no comparison needed)
+         */
+        const setAttributeDirect = (vnode, key, value, dstIdx, isNewKey) => {
+            const serializedValue = value != null ? serializeAttribute(key, value, scopedStyleIdPrefix) : null;
+            if (isNewKey) {
+                // Adding new key - splice into sorted position
+                if (serializedValue != null) {
+                    dstAttrs.splice(dstIdx, 0, key, serializedValue);
+                    journal.push(2 /* VNodeJournalOpCode.SetAttribute */, vnode.element, key, serializedValue);
+                }
+            }
+            else {
+                // Updating or removing existing key at dstIdx
+                if (serializedValue != null) {
+                    // Update existing value
+                    dstAttrs[dstIdx + 1] = serializedValue;
+                    journal.push(2 /* VNodeJournalOpCode.SetAttribute */, vnode.element, key, serializedValue);
+                }
+                else {
+                    // Remove key (value is null)
+                    dstAttrs.splice(dstIdx, 2);
+                    journal.push(2 /* VNodeJournalOpCode.SetAttribute */, vnode.element, key, null);
+                }
+            }
         };
-        const record = (key, value) => {
+        const record = (key, value, dstIdx, isNewKey) => {
             if (key.startsWith(':')) {
                 vnode.setProp(key, value);
                 return;
@@ -6354,19 +6520,31 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 }
             }
             if (isPromise(value)) {
+                // For async values, we can't use the known index since it will be stale by the time
+                // the promise resolves. Do a binary search to find the current index.
                 const vHost = vnode;
-                value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                const attributePromise = value.then((resolvedValue) => {
+                    const idx = mapApp_findIndx(dstAttrs, key, 0);
+                    const isNewKey = idx < 0;
+                    const currentDstIdx = isNewKey ? idx ^ -1 : idx;
+                    setAttributeDirect(vHost, key, resolvedValue, currentDstIdx, isNewKey);
+                });
+                asyncAttributePromises.push(attributePromise);
                 return;
             }
-            setAttribute(key, value, vnode);
+            // Always use optimized direct path - we know the index from the merge algorithm
+            setAttributeDirect(vnode, key, value, dstIdx, isNewKey);
         };
         const recordJsxEvent = (key, value) => {
             const data = getEventDataFromHtmlAttribute(key);
             if (data) {
                 const [scope, eventName] = data;
-                record(':' + scope + ':' + eventName, value);
-                // register an event for qwik loader
-                registerQwikLoaderEvent(eventName);
+                const scopedEvent = getScopedEventName(scope, eventName);
+                const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
+                // Pass dummy index values since ':' prefixed keys take early return via setProp
+                record(':' + scopedEvent, value, 0, false);
+                // register an event for qwik loader (window/document prefixed with '-')
+                registerQwikLoaderEvent(loaderScopedEvent);
                 patchEventDispatch = true;
             }
         };
@@ -6375,8 +6553,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         while (srcIdx < srcAttrs.length || dstIdx < dstAttrs.length) {
             const srcKey = srcIdx < srcAttrs.length ? srcAttrs[srcIdx] : undefined;
             const dstKey = dstIdx < dstAttrs.length ? dstAttrs[dstIdx] : undefined;
-            // Skip special keys in destination (HANDLER_PREFIX, Q_PREFIX)
-            if (dstKey?.startsWith(HANDLER_PREFIX) || dstKey?.startsWith(Q_PREFIX)) {
+            // Skip special keys in destination HANDLER_PREFIX
+            if (dstKey?.startsWith(HANDLER_PREFIX)) {
                 dstIdx += 2; // skip key and value
                 continue;
             }
@@ -6387,7 +6565,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     dstIdx += 2; // skip key and value
                 }
                 else {
-                    record(dstKey, null);
+                    record(dstKey, null, dstIdx, false);
                     // After removal, dstAttrs shrinks by 2, so don't advance dstIdx
                 }
             }
@@ -6398,7 +6576,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     recordJsxEvent(srcKey, srcValue);
                 }
                 else {
-                    record(srcKey, srcValue);
+                    record(srcKey, srcValue, dstIdx, true);
                 }
                 srcIdx += 2; // skip key and value
                 // After addition, dstAttrs grows by 2 at sorted position, advance dstIdx
@@ -6414,7 +6592,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                         recordJsxEvent(srcKey, srcValue);
                     }
                     else {
-                        record(srcKey, srcValue);
+                        record(srcKey, srcValue, dstIdx, false);
                     }
                 }
                 else if (isEventHandler && !vnode.element.qDispatchEvent) {
@@ -6432,7 +6610,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     recordJsxEvent(srcKey, srcValue);
                 }
                 else {
-                    record(srcKey, srcValue);
+                    record(srcKey, srcValue, dstIdx, true);
                 }
                 srcIdx += 2; // skip key and value
                 // After addition, dstAttrs grows at sorted position (before dstIdx), advance dstIdx
@@ -6445,7 +6623,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     dstIdx += 2; // skip key and value
                 }
                 else {
-                    record(dstKey, null);
+                    record(dstKey, null, dstIdx, false);
                     // After removal, dstAttrs shrinks at dstIdx, so don't advance dstIdx
                 }
             }
@@ -6647,32 +6825,11 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 deleteFromSideBuffer(null, lookupKey);
             }
             if (host) {
-                let vNodeProps = host.getProp(ELEMENT_PROPS, container.$getObjectById$);
-                let propsAreDifferent = false;
+                const vNodeProps = host.getProp(ELEMENT_PROPS, container.$getObjectById$);
                 if (!shouldRender) {
-                    propsAreDifferent =
-                        propsDiffer(jsxProps[_CONST_PROPS], vNodeProps?.[_CONST_PROPS]) ||
-                            propsDiffer(jsxProps[_VAR_PROPS], vNodeProps?.[_VAR_PROPS]);
-                    shouldRender = shouldRender || propsAreDifferent;
+                    shouldRender ||= handleProps(host, jsxProps, vNodeProps, container);
                 }
                 if (shouldRender) {
-                    if (propsAreDifferent) {
-                        if (vNodeProps) {
-                            // Reuse the same props instance, qrls can use the current props instance
-                            // as a capture ref, so we can't change it.
-                            // We need to do this directly, because normally we would subscribe to the signals
-                            // if any signal is there.
-                            vNodeProps[_CONST_PROPS] = jsxProps[_CONST_PROPS];
-                            vNodeProps[_VAR_PROPS] = jsxProps[_VAR_PROPS];
-                            vNodeProps[_OWNER] = jsxProps[_OWNER];
-                        }
-                        else if (jsxProps) {
-                            // If there is no props instance, create a new one.
-                            // We can do this because we are not using the props instance for anything else.
-                            host.setProp(ELEMENT_PROPS, jsxProps);
-                            vNodeProps = jsxProps;
-                        }
-                    }
                     // Assign the new QRL instance to the host.
                     // Unfortunately it is created every time, something to fix in the optimizer.
                     host.setProp(OnRenderProp, componentQRL);
@@ -6809,7 +6966,37 @@ function getComponentHash(vNode, getObject) {
  * ```
  */
 function Projection() { }
-function propsDiffer(src, dst) {
+function handleProps(host, jsxProps, vNodeProps, container) {
+    let shouldRender = false;
+    let propsAreDifferent = false;
+    if (vNodeProps) {
+        const effects = vNodeProps[_PROPS_HANDLER].$effects$;
+        const constPropsDifferent = handleChangedProps(jsxProps[_CONST_PROPS], vNodeProps[_CONST_PROPS], vNodeProps[_PROPS_HANDLER], container, false);
+        propsAreDifferent = constPropsDifferent;
+        shouldRender ||= constPropsDifferent;
+        if (effects && effects.size > 0) {
+            const varPropsDifferent = handleChangedProps(jsxProps[_VAR_PROPS], vNodeProps[_VAR_PROPS], vNodeProps[_PROPS_HANDLER], container);
+            propsAreDifferent ||= varPropsDifferent;
+            // don't mark as should render, effects will take care of it
+            // shouldRender ||= varPropsDifferent;
+        }
+    }
+    if (propsAreDifferent) {
+        if (vNodeProps) {
+            // Reuse the same props instance, qrls can use the current props instance
+            // as a capture ref, so we can't change it.
+            vNodeProps[_OWNER] = jsxProps[_OWNER];
+        }
+        else if (jsxProps) {
+            // If there is no props instance, create a new one.
+            // We can do this because we are not using the props instance for anything else.
+            host.setProp(ELEMENT_PROPS, jsxProps);
+            vNodeProps = jsxProps;
+        }
+    }
+    return shouldRender;
+}
+function handleChangedProps(src, dst, propsHandler, container, triggerEffects = true) {
     const srcEmpty = isPropsEmpty(src);
     const dstEmpty = isPropsEmpty(dst);
     if (srcEmpty && dstEmpty) {
@@ -6837,15 +7024,23 @@ function propsDiffer(src, dst) {
     if (srcLen !== dstLen) {
         return true;
     }
+    let changed = false;
+    propsHandler.$container$ = container;
     for (const key of srcKeys) {
         if (key === 'children' || key === QBackRefs) {
             continue;
         }
         if (!Object.prototype.hasOwnProperty.call(dst, key) || src[key] !== dst[key]) {
-            return true;
+            changed = true;
+            if (triggerEffects) {
+                triggerPropsProxyEffect(propsHandler, key);
+            }
+            else {
+                return true;
+            }
         }
     }
-    return false;
+    return changed;
 }
 function isPropsEmpty(props) {
     if (!props) {
@@ -6877,28 +7072,30 @@ function cleanup(container, vNode) {
         if (type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) {
             clearAllEffects(container, vCursor);
             markVNodeAsDeleted(vCursor);
-            // Only elements and virtual nodes need to be traversed for children
-            if (type & 2 /* VNodeFlags.Virtual */) {
+            const isComponent = type & 2 /* VNodeFlags.Virtual */ &&
+                vCursor.getProp(OnRenderProp, null) !== null;
+            if (isComponent) {
+                // cleanup q:seq content
                 const seq = container.getHostProp(vCursor, ELEMENT_SEQ);
                 if (seq) {
                     for (let i = 0; i < seq.length; i++) {
                         const obj = seq[i];
-                        if (isTask(obj)) {
-                            const task = obj;
-                            clearAllEffects(container, task);
-                            if (task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
-                                container.$scheduler$(32 /* ChoreType.CLEANUP_VISIBLE */, task);
+                        if (isObject(obj)) {
+                            const objIsTask = isTask(obj);
+                            if (objIsTask && obj.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
+                                container.$scheduler$(32 /* ChoreType.CLEANUP_VISIBLE */, obj);
+                                // don't call cleanupDestroyable yet, do it by the scheduler
+                                continue;
                             }
-                            else {
-                                cleanupTask(task);
+                            else if (obj instanceof SignalImpl || isStore(obj)) {
+                                clearAllEffects(container, obj);
+                            }
+                            if (objIsTask || obj instanceof AsyncComputedSignalImpl) {
+                                cleanupDestroyable(obj);
                             }
                         }
                     }
                 }
-            }
-            const isComponent = type & 2 /* VNodeFlags.Virtual */ &&
-                vCursor.getProp(OnRenderProp, null) !== null;
-            if (isComponent) {
                 // SPECIAL CASE: If we are a component, we need to descend into the projected content and release the content.
                 const attrs = vnode_getProps(vCursor);
                 for (let i = 0; i < attrs.length; i = i + 2) {
@@ -7126,7 +7323,8 @@ function findAncestorBlockingChore(chore, type) {
                 if (blockingChore.$type$ < 16 /* ChoreType.VISIBLE */ &&
                     blockingChore.$type$ !== 3 /* ChoreType.TASK */ &&
                     blockingChore.$type$ !== 1 /* ChoreType.QRL_RESOLVE */ &&
-                    blockingChore.$type$ !== 2 /* ChoreType.RUN_QRL */) {
+                    blockingChore.$type$ !== 2 /* ChoreType.RUN_QRL */ &&
+                    blockingChore.$state$ === ChoreState.NONE) {
                     return blockingChore;
                 }
             }
@@ -7151,19 +7349,25 @@ function findBlockingChore(chore, choreQueue, blockedChores, runningChores, cont
         // Check in choreQueue
         // TODO(perf): better to iterate in reverse order?
         for (const candidate of choreQueue) {
-            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+            if (candidate.$type$ === rule.blockingType &&
+                rule.match(chore, candidate, container) &&
+                candidate.$state$ === ChoreState.NONE) {
                 return candidate;
             }
         }
         // Check in blockedChores
         for (const candidate of blockedChores) {
-            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+            if (candidate.$type$ === rule.blockingType &&
+                rule.match(chore, candidate, container) &&
+                candidate.$state$ === ChoreState.NONE) {
                 return candidate;
             }
         }
         // Check in runningChores
         for (const candidate of runningChores) {
-            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+            if (candidate.$type$ === rule.blockingType &&
+                rule.match(chore, candidate, container) &&
+                candidate.$state$ !== ChoreState.FAILED) {
                 return candidate;
             }
         }
@@ -7189,7 +7393,9 @@ function findBlockingChoreForVisible(chore, runningChores, container) {
             continue;
         }
         for (const candidate of runningChores) {
-            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+            if (candidate.$type$ === rule.blockingType &&
+                rule.match(chore, candidate, container) &&
+                candidate.$state$ !== ChoreState.FAILED) {
                 return candidate;
             }
         }
@@ -7430,6 +7636,7 @@ function choreComparator(a, b) {
     if (a.$type$ === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */ &&
         b.$type$ === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */ &&
         ((a.$target$ instanceof StoreHandler && b.$target$ instanceof StoreHandler) ||
+            (a.$target$ instanceof PropsProxyHandler && b.$target$ instanceof PropsProxyHandler) ||
             (a.$target$ instanceof AsyncComputedSignalImpl &&
                 b.$target$ instanceof AsyncComputedSignalImpl)) &&
         a.$payload$ !== b.$payload$) {
@@ -7547,6 +7754,8 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
     let currentTime = performance.now();
     const nextTick = createNextTick(drainChoreQueue);
     let flushTimerId = null;
+    let blockingChoresCount = 0;
+    let currentChore = null;
     function drainInNextTick() {
         if (!drainScheduled) {
             drainScheduled = true;
@@ -7620,24 +7829,30 @@ Problematic chore:
 
 This is often caused by modifying a signal in an already rendered component during SSR.`;
                     logWarn(warningMessage);
+                    // Decrement counter if this was a blocking chore that we're skipping
+                    if (isRenderBlocking(type)) {
+                        blockingChoresCount--;
+                    }
                     return chore;
                 }
             }
         }
         const shouldBlock = chore.$type$ !== 1 /* ChoreType.QRL_RESOLVE */ && chore.$type$ !== 2 /* ChoreType.RUN_QRL */;
         if (shouldBlock) {
+            const runningChore = getRunningChore(chore);
+            if (runningChore) {
+                if (isResourceChore(runningChore)) {
+                    addBlockedChore(chore, runningChore, blockedChores);
+                }
+                return chore;
+            }
             const blockingChore = findBlockingChore(chore, choreQueue, blockedChores, runningChores, container);
             if (blockingChore) {
                 addBlockedChore(chore, blockingChore, blockedChores);
                 return chore;
             }
-            const runningChore = getRunningChore(chore);
-            if (runningChore) {
-                addBlockedChore(chore, runningChore, blockedChores);
-                return chore;
-            }
         }
-        addChore(chore, choreQueue);
+        addChoreAndIncrementBlockingCounter(chore, choreQueue);
         const runImmediately = (isServer && type === 6 /* ChoreType.COMPONENT */) || type === 2 /* ChoreType.RUN_QRL */;
         if (runImmediately && !isDraining) {
             immediateDrain();
@@ -7686,6 +7901,9 @@ This is often caused by modifying a signal in an already rendered component duri
         }, delay);
     }
     function applyJournalFlush() {
+        if (blockingChoresCount > 0) {
+            return;
+        }
         if (!isJournalFlushRunning) {
             // prevent multiple journal flushes from running at the same time
             isJournalFlushRunning = true;
@@ -7752,7 +7970,7 @@ This is often caused by modifying a signal in an already rendered component duri
                         if (vnode_isVNode(blockedChore.$host$)) {
                             blockedChore.$host$.blockedChores?.delete(blockedChore);
                         }
-                        addChore(blockedChore, choreQueue);
+                        addChoreAndIncrementBlockingCounter(blockedChore, choreQueue);
                         blockedChoresScheduled = true;
                     }
                 }
@@ -7762,12 +7980,12 @@ This is often caused by modifying a signal in an already rendered component duri
                 drainInNextTick();
             }
         };
-        let currentChore = null;
         try {
             while (choreQueue.length) {
                 currentTime = performance.now();
                 const chore = (currentChore = choreQueue.shift());
                 if (chore.$state$ !== ChoreState.NONE) {
+                    // Chore was already processed, counter already decremented in finishChore/handleError
                     continue;
                 }
                 if (vNodeAlreadyDeleted(chore) &&
@@ -7778,6 +7996,10 @@ This is often caused by modifying a signal in an already rendered component duri
                     if (vnode_isVNode(chore.$host$)) {
                         chore.$host$.chores?.delete(chore);
                     }
+                    // Decrement counter if this was a blocking chore that we're skipping
+                    if (isRenderBlocking(chore.$type$)) {
+                        blockingChoresCount--;
+                    }
                     continue;
                 }
                 if (chore.$type$ === 16 /* ChoreType.VISIBLE */) {
@@ -7786,7 +8008,7 @@ This is often caused by modifying a signal in an already rendered component duri
                     applyJournalFlush();
                     const blockingChore = findBlockingChoreForVisible(chore, runningChores, container);
                     if (blockingChore && blockingChore.$state$ === ChoreState.RUNNING) {
-                        addBlockedChore(chore, blockingChore, blockedChores);
+                        (blockingChore.$blockedChores$ ||= new ChoreArray()).add(chore);
                         continue;
                     }
                 }
@@ -7853,10 +8075,18 @@ This is often caused by modifying a signal in an already rendered component duri
         if (vnode_isVNode(chore.$host$)) {
             chore.$host$.chores?.delete(chore);
         }
+        // Decrement blocking counter if this chore was blocking journal flush
+        if (isRenderBlocking(chore.$type$)) {
+            blockingChoresCount--;
+        }
     }
     function handleError(chore, e) {
         chore.$endTime$ = performance.now();
         chore.$state$ = ChoreState.FAILED;
+        // Decrement blocking counter if this chore was blocking journal flush
+        if (isRenderBlocking(chore.$type$)) {
+            blockingChoresCount--;
+        }
         // If we used the result as promise, this won't exist
         chore.$reject$?.(e);
         container.handleError(e, chore.$host$);
@@ -7894,14 +8124,21 @@ This is often caused by modifying a signal in an already rendered component duri
                         returnValue = runResource(payload, container, host);
                     }
                     else {
-                        returnValue = runTask(payload, container, host);
+                        const task = payload;
+                        returnValue = runTask(task, container, host);
+                        if (task.$flags$ & 16 /* TaskFlags.RENDER_BLOCKING */) {
+                            blockingChoresCount++;
+                            returnValue = maybeThen(returnValue, () => {
+                                blockingChoresCount--;
+                            });
+                        }
                     }
                 }
                 break;
             case 32 /* ChoreType.CLEANUP_VISIBLE */:
                 {
                     const task = chore.$payload$;
-                    cleanupTask(task);
+                    cleanupDestroyable(task);
                 }
                 break;
             case 4 /* ChoreType.NODE_DIFF */:
@@ -7995,22 +8232,42 @@ This is often caused by modifying a signal in an already rendered component duri
         }
         return null;
     }
+    function addChoreAndIncrementBlockingCounter(chore, choreArray) {
+        if (addChore(chore, choreArray)) {
+            blockingChoresCount++;
+        }
+    }
 };
+function addChore(chore, choreArray) {
+    const idx = choreArray.add(chore);
+    if (idx < 0) {
+        if (vnode_isVNode(chore.$host$)) {
+            (chore.$host$.chores ||= new ChoreArray()).add(chore);
+        }
+        return isRenderBlocking(chore.$type$);
+    }
+    return false;
+}
 function vNodeAlreadyDeleted(chore) {
     return !!(chore.$host$ && vnode_isVNode(chore.$host$) && chore.$host$.flags & 32 /* VNodeFlags.Deleted */);
 }
+function isResourceChore(chore) {
+    return (chore.$type$ === 3 /* ChoreType.TASK */ &&
+        !!chore.$payload$ &&
+        !!(chore.$payload$.$flags$ & 4 /* TaskFlags.RESOURCE */));
+}
 function addBlockedChore(blockedChore, blockingChore, blockedChores) {
+    if (!isResourceChore(blockedChore) && choreComparator(blockedChore, blockingChore) === 0) {
+        return;
+    }
     (blockingChore.$blockedChores$ ||= new ChoreArray()).add(blockedChore);
     blockedChores.add(blockedChore);
     if (vnode_isVNode(blockedChore.$host$)) {
         (blockedChore.$host$.blockedChores ||= new ChoreArray()).add(blockedChore);
     }
 }
-function addChore(chore, choreArray) {
-    const idx = choreArray.add(chore);
-    if (idx < 0 && vnode_isVNode(chore.$host$)) {
-        (chore.$host$.chores ||= new ChoreArray()).add(chore);
-    }
+function isRenderBlocking(type) {
+    return type === 4 /* ChoreType.NODE_DIFF */ || type === 6 /* ChoreType.COMPONENT */;
 }
 function choreTypeToName(type) {
     return ({
@@ -8101,9 +8358,9 @@ function debugTrace(action, arg, queue, blockedChores) {
         }
     }
     // Blocked chores section
-    if (blockedChores && blockedChores.size > 0) {
+    if (blockedChores && blockedChores.length > 0) {
         lines.push('');
-        lines.push(`🚫 Blocked Chores (${blockedChores.size} items):`);
+        lines.push(`🚫 Blocked Chores (${blockedChores.length} items):`);
         Array.from(blockedChores).forEach((chore, index) => {
             const type = debugChoreTypeToString(chore.$type$);
             const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
@@ -8179,16 +8436,16 @@ async function serialize(serializationContext) {
     let parent;
     const qrlMap = new Map();
     /** Helper to output an array */
-    const outputArray = (value, keepNulls, writeFn) => {
+    const outputArray = (value, keepUndefined, writeFn) => {
         $writer$.write('[');
         let separator = false;
         let length;
-        if (keepNulls) {
+        if (keepUndefined) {
             length = value.length;
         }
         else {
             length = value.length - 1;
-            while (length >= 0 && value[length] === null) {
+            while (length >= 0 && value[length] === undefined) {
                 length--;
             }
             length++;
@@ -8205,7 +8462,7 @@ async function serialize(serializationContext) {
         $writer$.write(']');
     };
     /** Output a type,value pair. If the value is an array, it calls writeValue on each item. */
-    const output = (type, value, keepNulls) => {
+    const output = (type, value, keepUndefined) => {
         $writer$.write(`${type},`);
         if (typeof value === 'number') {
             $writer$.write(value.toString());
@@ -8222,7 +8479,7 @@ async function serialize(serializationContext) {
             $writer$.write(lastIdx === 0 ? s : s.slice(lastIdx));
         }
         else {
-            outputArray(value, keepNulls, (valueItem, idx) => {
+            outputArray(value, !!keepUndefined, (valueItem, idx) => {
                 writeValue(valueItem, idx);
             });
         }
@@ -8413,7 +8670,12 @@ async function serialize(serializationContext) {
     const writeObjectValue = (value) => {
         if (isPropsProxy(value)) {
             const owner = value[_OWNER];
-            output(32 /* TypeIds.PropsProxy */, [_serializationWeakRef(owner), owner.varProps, owner.constProps]);
+            output(32 /* TypeIds.PropsProxy */, [
+                _serializationWeakRef(owner),
+                owner.varProps,
+                owner.constProps,
+                value[_PROPS_HANDLER].$effects$,
+            ]);
         }
         else if (value instanceof SubscriptionData) {
             output(33 /* TypeIds.SubscriptionData */, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
@@ -8443,7 +8705,7 @@ async function serialize(serializationContext) {
                     }
                 }
                 const out = [storeTarget, flags, effects, ...innerStores];
-                while (out[out.length - 1] == null) {
+                while (out[out.length - 1] === undefined) {
                     out.pop();
                 }
                 output(29 /* TypeIds.Store */, out);
@@ -8453,7 +8715,7 @@ async function serialize(serializationContext) {
             const result = value[SerializerSymbol](value);
             if (isPromise(result)) {
                 const forwardRef = resolvePromise(result, $addRoot$, (resolved, resolvedValue) => {
-                    return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, null, null);
+                    return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, undefined, undefined);
                 });
                 output(2 /* TypeIds.ForwardRef */, forwardRef);
             }
@@ -8488,10 +8750,16 @@ async function serialize(serializationContext) {
         else if (value instanceof SignalImpl) {
             if (value instanceof SerializerSignalImpl) {
                 addPreloadQrl(value.$computeQrl$);
-                const forwardRefId = resolvePromise(getCustomSerializerPromise(value, value.$untrackedValue$), $addRoot$, (resolved, resolvedValue) => {
-                    return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
-                });
-                output(2 /* TypeIds.ForwardRef */, forwardRefId);
+                const maybeValue = getCustomSerializerPromise(value, value.$untrackedValue$);
+                if (isPromise(maybeValue)) {
+                    const forwardRefId = resolvePromise(maybeValue, $addRoot$, (resolved, resolvedValue) => {
+                        return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
+                    });
+                    output(2 /* TypeIds.ForwardRef */, forwardRefId);
+                }
+                else {
+                    output(28 /* TypeIds.SerializerSignal */, [value.$computeQrl$, value.$effects$, maybeValue]);
+                }
                 return;
             }
             if (value instanceof WrappedSignalImpl) {
@@ -8524,13 +8792,28 @@ async function serialize(serializationContext) {
                 if (isAsync) {
                     out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedLoading$, value.$untrackedError$);
                 }
+                let keepUndefined = false;
                 if (v !== NEEDS_COMPUTATION) {
                     out.push(v);
+                    if (!isAsync && 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;
+                    }
                 }
-                output(isAsync ? 27 /* TypeIds.AsyncComputedSignal */ : 26 /* TypeIds.ComputedSignal */, out);
+                output(isAsync ? 27 /* TypeIds.AsyncComputedSignal */ : 26 /* TypeIds.ComputedSignal */, out, keepUndefined);
             }
             else {
-                output(24 /* TypeIds.Signal */, [value.$untrackedValue$, ...(value.$effects$ || [])]);
+                const v = value.$untrackedValue$;
+                const keepUndefined = v === undefined;
+                const out = [v];
+                if (value.$effects$) {
+                    out.push(...value.$effects$);
+                }
+                output(24 /* TypeIds.Signal */, out, keepUndefined);
             }
         }
         else if (value instanceof URL) {
@@ -8614,9 +8897,9 @@ async function serialize(serializationContext) {
                 value.varProps,
                 value.constProps,
                 value.children,
-                value.toSort || null,
+                value.toSort || undefined,
             ];
-            while (out[out.length - 1] == null) {
+            while (out[out.length - 1] === undefined) {
                 out.pop();
             }
             output(31 /* TypeIds.JSXNode */, out);
@@ -8630,7 +8913,7 @@ async function serialize(serializationContext) {
                 value[_EFFECT_BACK_REF],
                 value.$state$,
             ];
-            while (out[out.length - 1] == null) {
+            while (out[out.length - 1] === undefined) {
                 out.pop();
             }
             output(21 /* TypeIds.Task */, out);
@@ -8757,7 +9040,7 @@ class PromiseResult {
     $value$;
     $effects$;
     $qrl$;
-    constructor($type$, $resolved$, $value$, $effects$ = null, $qrl$ = null) {
+    constructor($type$, $resolved$, $value$, $effects$ = undefined, $qrl$ = undefined) {
         this.$type$ = $type$;
         this.$resolved$ = $resolved$;
         this.$value$ = $value$;
@@ -8766,20 +9049,24 @@ class PromiseResult {
     }
 }
 function getCustomSerializerPromise(signal, value) {
-    return new Promise((resolve) => {
-        signal.$computeQrl$.resolve().then((arg) => {
-            let data;
-            if (arg.serialize) {
-                data = arg.serialize(value);
-            }
-            else if (SerializerSymbol in value) {
-                data = value[SerializerSymbol](value);
-            }
-            if (data === undefined) {
-                data = NEEDS_COMPUTATION;
-            }
-            resolve(data);
-        });
+    if (value === NEEDS_COMPUTATION) {
+        return value;
+    }
+    return maybeThen((signal.$computeQrl$.resolved || signal.$computeQrl$.resolve()), (arg) => {
+        let data;
+        if (typeof arg === 'function') {
+            arg = arg();
+        }
+        if (arg.serialize) {
+            data = arg.serialize(value);
+        }
+        else if (typeof value === 'object' && SerializerSymbol in value) {
+            data = value[SerializerSymbol](value);
+        }
+        if (data === undefined) {
+            data = NEEDS_COMPUTATION;
+        }
+        return data;
     });
 }
 const discoverValuesForVNodeData = (vnodeData, callback) => {
@@ -8830,7 +9117,7 @@ function serializeWrappingFn(serializationContext, value) {
     return [syncFnId, value.$args$];
 }
 function filterEffectBackRefs(effectBackRef) {
-    let effectBackRefToSerialize = null;
+    let effectBackRefToSerialize = undefined;
     if (effectBackRef) {
         for (const [effectProp, effect] of effectBackRef) {
             if (effect[2 /* EffectSubscriptionProp.BACK_REF */]) {
@@ -9010,7 +9297,7 @@ class _SharedContainer {
             throw Error('Not implemented');
         };
         const choreQueue = new ChoreArray();
-        const blockedChores = new Set();
+        const blockedChores = new ChoreArray();
         const runningChores = new Set();
         this.$scheduler$ = createScheduler(this, journalFlush, choreQueue, blockedChores, runningChores);
     }
@@ -9095,7 +9382,7 @@ async function _walkJSX(ssr, value, options) {
 }
 function processJSXNode(ssr, enqueue, value, options) {
     // console.log('processJSXNode', value);
-    if (value === null || value === undefined) {
+    if (value == null) {
         ssr.textNode('');
     }
     else if (typeof value === 'boolean') {
@@ -9152,12 +9439,12 @@ function processJSXNode(ssr, enqueue, value, options) {
                         appendQwikInspectorAttribute(jsx, qwikInspectorAttrValue);
                     }
                 }
-                const innerHTML = ssr.openElement(type, varPropsToSsrAttrs(jsx.varProps, jsx.constProps, {
+                const innerHTML = ssr.openElement(type, toSsrAttrs(jsx.varProps, {
                     serializationCtx: ssr.serializationCtx,
                     styleScopedId: options.styleScoped,
                     key: jsx.key,
                     toSort: jsx.toSort,
-                }), constPropsToSsrAttrs(jsx.constProps, jsx.varProps, {
+                }), toSsrAttrs(jsx.constProps, {
                     serializationCtx: ssr.serializationCtx,
                     styleScopedId: options.styleScoped,
                 }), qwikInspectorAttrValue);
@@ -9254,12 +9541,22 @@ function processJSXNode(ssr, enqueue, value, options) {
                     const componentFrame = ssr.getParentComponentFrame();
                     componentFrame.distributeChildrenIntoSlots(jsx.children, options.styleScoped, options.parentComponentFrame);
                     const jsxOutput = applyQwikComponentBody(ssr, jsx, type);
-                    const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
                     enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame));
                     enqueue(ssr.closeComponent);
-                    enqueue(jsxOutput);
-                    isPromise(jsxOutput) && enqueue(Promise);
-                    enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                    if (isPromise(jsxOutput)) {
+                        // Defer reading QScopedStyle until after the promise resolves
+                        enqueue(async () => {
+                            const resolvedOutput = await jsxOutput;
+                            const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
+                            enqueue(resolvedOutput);
+                            enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                        });
+                    }
+                    else {
+                        enqueue(jsxOutput);
+                        const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
+                        enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                    }
                 }
                 else {
                     const inlineComponentProps = [ELEMENT_KEY, jsx.key];
@@ -9276,12 +9573,6 @@ function processJSXNode(ssr, enqueue, value, options) {
         }
     }
 }
-function varPropsToSsrAttrs(varProps, constProps, options) {
-    return toSsrAttrs(varProps, options);
-}
-function constPropsToSsrAttrs(constProps, varProps, options) {
-    return toSsrAttrs(constProps, options);
-}
 function toSsrAttrs(record, options) {
     if (record == null) {
         return null;
@@ -9344,7 +9635,7 @@ function setEvent(serializationCtx, key, rawValue) {
          *
          * For internal qrls (starting with `_`) we assume that they do the right thing.
          */
-        if (!qrl.$symbol$.startsWith('_') && (qrl.$captureRef$ || qrl.$capture$)) {
+        if (!qrl.$symbol$.startsWith('_') && qrl.$captureRef$?.length) {
             qrl = createQRL(null, '_run', _run, null, null, [qrl]);
         }
         return qrlToString(serializationCtx, qrl);
@@ -9375,14 +9666,16 @@ function addQwikEventToSerializationContext(serializationCtx, key, qrl) {
     // TODO extract window/document too so qwikloader can precisely listen
     const data = getEventDataFromHtmlAttribute(key);
     if (data) {
-        const eventName = data[1];
-        serializationCtx.$eventNames$.add(eventName);
+        const [scope, eventName] = data;
+        const scopedEvent = getScopedEventName(scope, eventName);
+        const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
+        serializationCtx.$eventNames$.add(loaderScopedEvent);
         serializationCtx.$eventQrls$.add(qrl);
     }
 }
 function addPreventDefaultEventToSerializationContext(serializationCtx, key) {
-    // skip first 15 chars, this is length of the `preventdefault:`
-    const eventName = key.substring(15);
+    // skip first 15 chars, this is length of the `preventdefault`, leave the ":"
+    const eventName = key.substring(14);
     if (eventName) {
         serializationCtx.$eventNames$.add(eventName);
     }
@@ -9520,10 +9813,11 @@ const inflate = (container, target, typeId, data) => {
             asyncComputed.$loadingEffects$ = new Set(d[2]);
             asyncComputed.$errorEffects$ = new Set(d[3]);
             asyncComputed.$untrackedLoading$ = d[4];
-            asyncComputed.$untrackedError$ = d[5] || null;
+            asyncComputed.$untrackedError$ = d[5];
             const hasValue = d.length > 6;
             if (hasValue) {
                 asyncComputed.$untrackedValue$ = d[6];
+                asyncComputed.$promiseValue$ = d[6];
             }
             asyncComputed.$flags$ |= 1 /* SignalFlags.INVALID */;
             break;
@@ -9534,7 +9828,9 @@ const inflate = (container, target, typeId, data) => {
             const computed = target;
             const d = data;
             computed.$computeQrl$ = d[0];
-            computed.$effects$ = new Set(d[1]);
+            if (d[1]) {
+                computed.$effects$ = new Set(d[1]);
+            }
             const hasValue = d.length > 2;
             if (hasValue) {
                 computed.$untrackedValue$ = d[2];
@@ -9629,6 +9925,7 @@ const inflate = (container, target, typeId, data) => {
                 owner._proxy = propsProxy;
             }
             propsProxy[_OWNER] = owner;
+            propsProxy[_PROPS_HANDLER].$effects$ = d[3];
             break;
         case 33 /* TypeIds.SubscriptionData */: {
             const effectData = target;
@@ -10185,6 +10482,9 @@ class DomContainer extends _SharedContainer {
             preprocessState(this.$rawStateData$, this);
             this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$);
         }
+        if (!qTest && element.isConnected) {
+            element.dispatchEvent(new CustomEvent('qresume', { bubbles: true }));
+        }
     }
     $setRawState$(id, vParent) {
         this.$stateData$[id] = vParent;
@@ -10620,7 +10920,7 @@ const getOrCreateStore = (obj, flags, container) => {
 class StoreHandler {
     $flags$;
     $container$;
-    $effects$ = null;
+    $effects$ = undefined;
     constructor($flags$, $container$) {
         this.$flags$ = $flags$;
         this.$container$ = $container$;
@@ -10630,7 +10930,7 @@ class StoreHandler {
     }
     force(prop) {
         const target = getStoreTarget(this);
-        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, getEffects(target, prop, this.$effects$));
+        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, this, getEffects(target, prop, this.$effects$));
     }
     get(target, prop) {
         // TODO(perf): handle better `slice` calls
@@ -10699,7 +10999,7 @@ class StoreHandler {
         if (!Array.isArray(target)) {
             // If the target is an array, we don't need to trigger effects.
             // Changing the length property will trigger effects.
-            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, getEffects(target, prop, this.$effects$));
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, this, getEffects(target, prop, this.$effects$));
         }
         return true;
     }
@@ -10755,13 +11055,14 @@ function addStoreEffect(target, prop, store, effectSubscription) {
     // to unsubscribe from. So we need to store the reference from the effect back
     // to this signal.
     ensureContainsBackRef(effectSubscription, target);
+    // TODO is this needed with the preloader?
     addQrlToSerializationCtx(effectSubscription, store.$container$);
 }
 function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
     target[prop] = value;
     const effects = getEffects(target, prop, currentStore.$effects$);
     if (effects) {
-        currentStore.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, currentStore, effects);
+        currentStore.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, undefined, currentStore, effects);
     }
 }
 function getEffects(target, prop, storeEffects) {
@@ -10786,7 +11087,7 @@ function getEffects(target, prop, storeEffects) {
             effectsToTrigger.add(effect);
         }
     }
-    return effectsToTrigger || null;
+    return effectsToTrigger;
 }
 
 const canSerialize = (value, seen = new WeakSet()) => {
@@ -12576,21 +12877,22 @@ const useVisibleTaskQrl = (qrl, opts) => {
     const { val, set, i, iCtx } = useSequentialScope();
     const eagerness = opts?.strategy ?? 'intersection-observer';
     if (val) {
-        if (isServerPlatform()) {
-            useRunTask(val, eagerness);
+        if (!(val.$flags$ & 32 /* TaskFlags.EVENTS_REGISTERED */) && !isServerPlatform()) {
+            val.$flags$ |= 32 /* TaskFlags.EVENTS_REGISTERED */;
+            useRegisterTaskEvents(val, eagerness);
         }
         return;
     }
     assertQrl(qrl);
     const task = new Task(1 /* TaskFlags.VISIBLE_TASK */, i, iCtx.$hostElement$, qrl, undefined, null);
     set(task);
-    useRunTask(task, eagerness);
+    useRegisterTaskEvents(task, eagerness);
     if (!isServerPlatform()) {
         qrl.resolve(iCtx.$element$);
         iCtx.$container$.$scheduler$(16 /* ChoreType.VISIBLE */, task);
     }
 };
-const useRunTask = (task, eagerness) => {
+const useRegisterTaskEvents = (task, eagerness) => {
     if (eagerness === 'intersection-observer') {
         useOn('qvisible', getTaskHandlerQrl(task));
     }