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

package/dist/core.prod.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
@@ -11,7 +11,7 @@ export { isBrowser, isDev, isServer } from "@qwik.dev/core/build";
 
 import { p } from "@qwik.dev/core/preloader";
 
-const version = "2.0.0-beta.13-dev+cb19ff7";
+const version = "2.0.0-beta.15-dev+920f1a4";
 
 const qDev = !1;
 
@@ -178,8 +178,6 @@ const ELEMENT_SEQ = "q:seq";
 
 const ELEMENT_SEQ_IDX = "q:seqIdx";
 
-const Q_PREFIX = "q:";
-
 const NON_SERIALIZABLE_MARKER_PREFIX = ":";
 
 const USE_ON_LOCAL = ":on";
@@ -608,14 +606,14 @@ const STORE_ALL_PROPS = Symbol("store.all");
 
 class SignalImpl {
     $untrackedValue$;
-    $effects$=null;
+    $effects$=void 0;
     $container$=null;
     $wrappedSignal$=null;
     constructor(container, value) {
         this.$container$ = container, this.$untrackedValue$ = value;
     }
     force() {
-        this.$container$?.$scheduler$(7, null, this, this.$effects$);
+        this.$container$?.$scheduler$(7, void 0, this, this.$effects$);
     }
     get untrackedValue() {
         return this.$untrackedValue$;
@@ -627,7 +625,7 @@ class SignalImpl {
         return setupSignalValueAccess(this, () => this.$effects$ ||= new Set, () => this.untrackedValue);
     }
     set value(value) {
-        value !== this.$untrackedValue$ && (this.$untrackedValue$ = value, this.$container$?.$scheduler$(7, null, this, this.$effects$));
+        value !== this.$untrackedValue$ && (this.$untrackedValue$ = value, this.$container$?.$scheduler$(7, void 0, this, this.$effects$));
     }
     valueOf() {
         qDev;
@@ -670,6 +668,8 @@ const _VAR_PROPS = Symbol("VAR");
 
 const _OWNER = Symbol("OWNER");
 
+const _PROPS_HANDLER = Symbol("PROPS_HANDLER");
+
 const _IMMUTABLE = Symbol("IMMUTABLE");
 
 const _UNINITIALIZED = Symbol("UNINITIALIZED");
@@ -709,6 +709,13 @@ const fromCamelToKebabCase = text => text.replace(/([A-Z-])/g, a => "-" + a.toLo
 
 const getEventDataFromHtmlAttribute = htmlKey => htmlKey.startsWith("on:") ? [ "", htmlKey.substring(3) ] : htmlKey.startsWith("on-window:") ? [ "window", htmlKey.substring(10) ] : [ "document", htmlKey.substring(12) ];
 
+const getScopedEventName = (scope, eventName) => {
+    const suffix = ":" + eventName;
+    return scope ? scope + suffix : suffix;
+};
+
+const getLoaderScopedEventName = (scope, scopedEvent) => scope ? "-" + scopedEvent : scopedEvent;
+
 const EMPTY_ARRAY = [];
 
 const EMPTY_OBJ = {};
@@ -721,6 +728,8 @@ Object.freeze(EMPTY_ARRAY), Object.freeze(EMPTY_OBJ);
 
 class PropsProxyHandler {
     owner;
+    $effects$=void 0;
+    $container$=null;
     constructor(owner) {
         this.owner = owner;
     }
@@ -734,6 +743,9 @@ class PropsProxyHandler {
         if (prop === _OWNER) {
             return this.owner;
         }
+        if (prop === _PROPS_HANDLER) {
+            return this;
+        }
         let value;
         if ("children" === prop) {
             value = this.owner.children;
@@ -742,7 +754,7 @@ class PropsProxyHandler {
                 const attr = jsxEventToHtmlAttribute(prop);
                 attr && (prop = attr);
             }
-            value = directGetPropsProxyProp(this.owner, prop);
+            value = directGetPropsProxyProp(this.owner, prop), prop in this.owner.varProps && addPropsProxyEffect(this, prop);
         }
         return value instanceof WrappedSignalImpl && 4 & value.$flags$ ? value.value : value;
     }
@@ -751,20 +763,24 @@ class PropsProxyHandler {
             this.owner = value;
         } else if ("children" === prop) {
             this.owner.children = value;
+        } else if (prop === _CONST_PROPS) {
+            this.owner.constProps = value;
+        } else if (prop === _VAR_PROPS) {
+            this.owner.varProps = value;
         } else {
             if ("string" == typeof prop && "string" == typeof this.owner.type) {
                 const attr = jsxEventToHtmlAttribute(prop);
                 attr && (prop = attr);
             }
-            this.owner.constProps && prop in this.owner.constProps ? (this.owner.constProps[prop] = void 0, 
-            prop in this.owner.varProps || (this.owner.toSort = !0), this.owner.varProps[prop] = value) : (this.owner.varProps === EMPTY_OBJ ? this.owner.varProps = {} : prop in this.owner.varProps || (this.owner.toSort = !0), 
-            this.owner.varProps[prop] = value);
+            this.owner.constProps && prop in this.owner.constProps && delete this.owner.constProps[prop], 
+            this.owner.varProps === EMPTY_OBJ ? this.owner.varProps = {} : prop in this.owner.varProps || (this.owner.toSort = !0), 
+            this.owner.varProps[prop] !== value && (this.owner.varProps[prop] = value, triggerPropsProxyEffect(this, prop));
         }
         return !0;
     }
     deleteProperty(_, prop) {
         let didDelete = delete this.owner.varProps[prop];
-        return this.owner.constProps && (didDelete = delete this.owner.constProps[prop] || didDelete), 
+        return didDelete && triggerPropsProxyEffect(this, prop), this.owner.constProps && (didDelete = delete this.owner.constProps[prop] || didDelete), 
         null != this.owner.children && "children" === prop && (this.owner.children = null, 
         didDelete = !0), didDelete;
     }
@@ -775,11 +791,12 @@ class PropsProxyHandler {
         if (prop === _CONST_PROPS || prop === _VAR_PROPS) {
             return !0;
         }
-        if ("string" == typeof prop && "string" == typeof this.owner.type) {
+        const inVarProps = prop in this.owner.varProps;
+        if ("string" == typeof prop && (inVarProps && addPropsProxyEffect(this, prop), "string" == typeof this.owner.type)) {
             const attr = jsxEventToHtmlAttribute(prop);
             attr && (prop = attr);
         }
-        return prop in this.owner.varProps || !!this.owner.constProps && prop in this.owner.constProps;
+        return inVarProps || !!this.owner.constProps && prop in this.owner.constProps;
     }
     getOwnPropertyDescriptor(_, p) {
         return {
@@ -799,6 +816,22 @@ class PropsProxyHandler {
     }
 }
 
+const addPropsProxyEffect = (propsProxy, prop) => {
+    const ctx = tryGetInvokeContext();
+    ctx && (null === propsProxy.$container$ ? ctx.$container$ && (propsProxy.$container$ = ctx.$container$) : assertTrue(!ctx.$container$ || ctx.$container$ === propsProxy.$container$, "Do not use props across containers"));
+    const effectSubscriber = ctx?.$effectSubscriber$;
+    effectSubscriber && addStoreEffect(propsProxy.owner._proxy, prop, propsProxy, effectSubscriber);
+};
+
+const triggerPropsProxyEffect = (propsProxy, prop) => {
+    const effects = getEffects$1(propsProxy.$effects$, prop);
+    effects && propsProxy.$container$?.$scheduler$(7, void 0, propsProxy, effects);
+};
+
+function getEffects$1(effects, prop) {
+    return effects?.get(prop);
+}
+
 const directGetPropsProxyProp = (jsx, prop) => jsx.constProps && prop in jsx.constProps ? jsx.constProps[prop] : jsx.varProps[prop];
 
 const _getVarProps = props => props ? _VAR_PROPS in props ? "children" in props ? {
@@ -810,6 +843,18 @@ const _getConstProps = props => props && _CONST_PROPS in props ? props[_CONST_PR
 
 const isPropsProxy = obj => 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) {
     effect[_EFFECT_BACK_REF] || (isServer && isSsrNode(effect) ? effect.setProp("q:brefs", new Map) : effect[_EFFECT_BACK_REF] = new Map);
     const subMap = effect[_EFFECT_BACK_REF];
@@ -847,13 +892,14 @@ const cleanupFn = (target, handleError) => {
     let cleanupFns = null;
     return [ fn => {
         "function" == typeof fn && (cleanupFns || (cleanupFns = [], target.$destroy$ = noSerialize(() => {
-            target.$destroy$ = null, cleanupFns.forEach(fn => {
+            target.$destroy$ = null;
+            for (const fn of cleanupFns) {
                 try {
                     fn();
                 } catch (err) {
                     handleError(err);
                 }
-            });
+            }
         })), cleanupFns.push(fn));
     }, cleanupFns ?? [] ];
 };
@@ -865,12 +911,12 @@ const log = (...args) => console.log("COMPUTED SIGNAL", ...args.map(qwikDebugToS
 class ComputedSignalImpl extends SignalImpl {
     $computeQrl$;
     $flags$;
-    [_EFFECT_BACK_REF]=null;
+    [_EFFECT_BACK_REF]=void 0;
     constructor(container, fn, flags = 33) {
         super(container, NEEDS_COMPUTATION), this.$computeQrl$ = fn, this.$flags$ = flags;
     }
     invalidate() {
-        this.$flags$ |= 1, this.$container$?.$scheduler$(7, null, this, this.$effects$);
+        this.$flags$ |= 1, this.$container$?.$scheduler$(7, void 0, this, this.$effects$);
     }
     force() {
         this.$flags$ |= 2, super.force();
@@ -910,12 +956,13 @@ class ComputedSignalImpl extends SignalImpl {
 
 class AsyncComputedSignalImpl extends ComputedSignalImpl {
     $untrackedLoading$=!1;
-    $untrackedError$=null;
-    $loadingEffects$=null;
-    $errorEffects$=null;
+    $untrackedError$=void 0;
+    $loadingEffects$=void 0;
+    $errorEffects$=void 0;
     $destroy$;
     $promiseValue$=NEEDS_COMPUTATION;
-    [_EFFECT_BACK_REF]=null;
+    $promise$=null;
+    [_EFFECT_BACK_REF]=void 0;
     constructor(container, fn, flags = 1) {
         super(container, fn, flags);
     }
@@ -923,7 +970,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         return setupSignalValueAccess(this, () => this.$loadingEffects$ ||= new Set, () => this.untrackedLoading);
     }
     set untrackedLoading(value) {
-        value !== this.$untrackedLoading$ && (this.$untrackedLoading$ = value, this.$container$?.$scheduler$(7, null, this, this.$loadingEffects$));
+        value !== this.$untrackedLoading$ && (this.$untrackedLoading$ = value, this.$container$?.$scheduler$(7, void 0, this, this.$loadingEffects$));
     }
     get untrackedLoading() {
         return this.$untrackedLoading$;
@@ -932,37 +979,53 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         return setupSignalValueAccess(this, () => this.$errorEffects$ ||= new Set, () => this.untrackedError);
     }
     set untrackedError(value) {
-        value !== this.$untrackedError$ && (this.$untrackedError$ = value, this.$container$?.$scheduler$(7, null, this, this.$errorEffects$));
+        value !== this.$untrackedError$ && (this.$untrackedError$ = value, this.$container$?.$scheduler$(7, void 0, this, this.$errorEffects$));
     }
     get untrackedError() {
         return this.$untrackedError$;
     }
     invalidate() {
-        super.invalidate(), this.$promiseValue$ = NEEDS_COMPUTATION;
+        super.invalidate(), this.$promise$ = null;
     }
-    async resolve() {
-        return await retryOnPromise(() => this.$computeIfNeeded$()), this.$untrackedValue$;
+    async promise() {
+        return this.$promise$ = null, await retryOnPromise(() => this.$computeIfNeeded$()), 
+        this.$untrackedValue$;
     }
     $computeIfNeeded$() {
         if (!(1 & this.$flags$)) {
             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
-        }) : this.$promiseValue$;
+        const untrackedValue = this.$promiseValue$ === NEEDS_COMPUTATION || null === this.$promise$ ? this.$promiseComputation$() : this.$promiseValue$;
         if (isPromise(untrackedValue)) {
-            throw this.untrackedLoading = !0, this.untrackedError = null, untrackedValue.then(promiseValue => {
-                this.$promiseValue$ = promiseValue, this.untrackedLoading = !1, this.untrackedError = null;
+            const isFirstComputation = this.$promiseValue$ === NEEDS_COMPUTATION;
+            this.untrackedLoading = !0, this.untrackedError = void 0, this.$promiseValue$ !== NEEDS_COMPUTATION && cleanupDestroyable(this);
+            const promise = untrackedValue.then(promiseValue => {
+                this.$promiseValue$ = promiseValue, this.untrackedLoading = !1, this.untrackedError = void 0, 
+                this.setValue(promiseValue) && scheduleEffects(this.$container$, this, this.$effects$);
             }).catch(err => {
-                this.$promiseValue$ = err, this.untrackedLoading = !1, this.untrackedError = err;
+                isPromise(err) || (this.$promiseValue$ = err, this.untrackedLoading = !1, this.untrackedError = err);
             });
+            if (isFirstComputation) {
+                throw promise;
+            }
+            return promise;
         }
-        this.$promiseValue$ = NEEDS_COMPUTATION, this.$flags$ &= -2;
-        const didChange = untrackedValue !== this.$untrackedValue$;
-        return didChange && (this.$flags$ |= 2, this.$untrackedValue$ = untrackedValue), 
-        didChange;
+        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
+            });
+        }
+        return this.$promise$;
+    }
+    setValue(value) {
+        this.$flags$ &= -2;
+        const didChange = value !== this.$untrackedValue$;
+        return didChange && (this.$untrackedValue$ = value, this.$flags$ |= 2), didChange;
     }
 }
 
@@ -1026,19 +1089,24 @@ const _wrapProp = (...args) => {
     }
     if (isPropsProxy(obj)) {
         const constProps = obj[_CONST_PROPS];
+        const varProps = obj[_VAR_PROPS];
         if (constProps && prop in constProps) {
             return constProps[prop];
         }
+        if (prop in varProps) {
+            return wrapIfNotSignal(varProps[prop], args);
+        }
     } else {
         const target = getStoreTarget(obj);
         if (target) {
-            const value = target[prop];
-            return isSignal(value) ? value : getWrapped(args);
+            return wrapIfNotSignal(target[prop], args);
         }
     }
     return obj[prop];
 };
 
+const wrapIfNotSignal = (value, args) => isSignal(value) ? value : getWrapped(args);
+
 const _wrapSignal = (obj, prop) => {
     const r = _wrapProp(obj, prop);
     return r === _IMMUTABLE ? obj[prop] : r;
@@ -1049,8 +1117,8 @@ class WrappedSignalImpl extends SignalImpl {
     $func$;
     $funcStr$;
     $flags$;
-    $hostElement$=null;
-    [_EFFECT_BACK_REF]=null;
+    $hostElement$=void 0;
+    [_EFFECT_BACK_REF]=void 0;
     constructor(container, fn, args, fnStr, flags = 5) {
         super(container, NEEDS_COMPUTATION), this.$args$ = args, this.$func$ = fn, this.$funcStr$ = fnStr, 
         this.$flags$ = flags;
@@ -1091,7 +1159,7 @@ class WrappedSignalImpl extends SignalImpl {
 }
 
 let BackRef$1 = class {
-    [_EFFECT_BACK_REF]=null;
+    [_EFFECT_BACK_REF]=void 0;
 };
 
 function clearAllEffects(container, consumer) {
@@ -1101,6 +1169,7 @@ function clearAllEffects(container, consumer) {
         for (const [, effect] of effects) {
             clearEffectSubscription(container, effect);
         }
+        effects.clear();
     }
 }
 
@@ -1112,17 +1181,20 @@ function clearEffectSubscription(container, effect) {
                 clearSignal(container, producer, effect);
             } else if (producer instanceof AsyncComputedSignalImpl) {
                 clearAsyncComputedSignal(producer, effect);
+            } else if (isPropsProxy(producer)) {
+                clearStoreOrProps(producer[_PROPS_HANDLER], effect);
             } else if (container.$storeProxyMap$.has(producer)) {
                 const target = container.$storeProxyMap$.get(producer);
-                clearStore(getStoreHandler(target), effect);
+                clearStoreOrProps(getStoreHandler(target), effect);
             }
         }
+        backRefs.clear();
     }
 }
 
 function clearSignal(container, producer, effect) {
     const effects = producer.$effects$;
-    effects && effects.has(effect) && effects.delete(effect), producer instanceof WrappedSignalImpl && (producer.$hostElement$ = null, 
+    effects && effects.has(effect) && effects.delete(effect), producer instanceof WrappedSignalImpl && (producer.$hostElement$ = void 0, 
     clearAllEffects(container, producer));
 }
 
@@ -1133,11 +1205,11 @@ function clearAsyncComputedSignal(producer, effect) {
     pendingEffects && pendingEffects.has(effect) && pendingEffects.delete(effect);
 }
 
-function clearStore(producer, effect) {
+function clearStoreOrProps(producer, effect) {
     const effects = producer?.$effects$;
     if (effects) {
-        for (const propEffects of effects.values()) {
-            propEffects.has(effect) && propEffects.delete(effect);
+        for (const [prop, propEffects] of effects.entries()) {
+            propEffects.has(effect) && (propEffects.delete(effect), 0 === propEffects.size && effects.delete(prop));
         }
     }
 }
@@ -1594,8 +1666,9 @@ const vnode_applyJournal = journal => {
             let key = journal[idx++];
             "className" === key && (key = "class");
             const value = journal[idx++];
-            isBooleanAttr(element, key) ? element[key] = parseBoolean(value) : "value" === key && key in element ? element.value = String(value) : key === dangerouslySetInnerHTML ? (element.innerHTML = value, 
-            element.setAttribute("q:container", "html")) : null == value || !1 === value ? element.removeAttribute(key) : element.setAttribute(key, String(value));
+            const shouldRemove = null == value || !1 === value;
+            isBooleanAttr(element, key) ? element[key] = parseBoolean(value) : key === dangerouslySetInnerHTML ? (element.innerHTML = value, 
+            element.setAttribute("q:container", "html")) : shouldRemove ? element.removeAttribute(key) : "value" === key && key in element ? element.value = String(value) : element.setAttribute(key, String(value));
             break;
 
           case 3:
@@ -2053,7 +2126,8 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         const nodeIsElement = isElement(node);
         return !nodeIsElement || nodeIsElement && shouldSkipElement(node);
     };
-    return processVNodeData$1(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
+    let components = null;
+    if (processVNodeData$1(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
         if (isNumber(peek())) {
             for (;shouldSkipNode(child); ) {
                 if (!(child = fastNextSibling(child))) {
@@ -2071,7 +2145,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         } else if (peek() === VNodeDataChar.SCOPED_STYLE) {
             vParent.setAttr("q:sstyle", consumeValue(), null);
         } else if (peek() === VNodeDataChar.RENDER_FN) {
-            vParent.setAttr("q:renderFn", consumeValue(), null);
+            (components ||= []).push(vParent), vParent.setAttr("q:renderFn", consumeValue(), null);
         } else if (peek() === VNodeDataChar.ID) {
             container || (container = getDomContainer(element));
             const id = consumeValue();
@@ -2119,7 +2193,14 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             addVNode(previousTextNode = vnode_newSharedText(previousTextNode, textNode, text)), 
             textIdx += length;
         }
-    }), vParent.lastChild = vLast, vFirst;
+    }), components) {
+        container || (container = getDomContainer(element));
+        for (const component of components) {
+            container.ensureProjectionResolved(component);
+        }
+        components = null;
+    }
+    return vParent.lastChild = vLast, vFirst;
 }
 
 const vnode_getType = vnode => {
@@ -2464,8 +2545,8 @@ const _jsxSorted = (type, varProps, constProps, children, flags, key, dev) => un
 const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => untrack(() => {
     if (varProps) {
         for (const k in varProps) {
-            "children" === k ? (children ||= varProps.children, varProps.children = void 0) : "key" === k ? (key ||= varProps.key, 
-            varProps.key = void 0) : constProps && k in constProps && (varProps[k] = void 0);
+            "children" === k ? (children ||= varProps.children, delete varProps.children) : "key" === k ? (key ||= varProps.key, 
+            delete varProps.key) : constProps && k in constProps && delete varProps[k];
         }
     }
     return new JSXNodeImpl(type, varProps, constProps, children, key, !0, dev);
@@ -2508,13 +2589,13 @@ const Fragment = props => props.children;
 
 const RenderOnce = (props, key) => new JSXNodeImpl(Virtual, null, null, props.children, key);
 
-const useTaskQrl = qrl => {
+const useTaskQrl = (qrl, opts) => {
     const {val, set, iCtx, i} = useSequentialScope();
     if (val) {
         return;
     }
     assertQrl(qrl), set(1);
-    const task = new Task(10, i, iCtx.$hostElement$, qrl, void 0, null);
+    const task = new Task(10 | (!1 === opts?.deferUpdates ? 0 : 16), i, iCtx.$hostElement$, qrl, void 0, null);
     set(task);
     const result = runTask(task, iCtx.$container$, iCtx.$hostElement$);
     if (isPromise(result)) {
@@ -2523,7 +2604,7 @@ const useTaskQrl = qrl => {
 };
 
 const runTask = (task, container, host) => {
-    task.$flags$ &= -9, cleanupTask(task);
+    task.$flags$ &= -9, cleanupDestroyable(task);
     const iCtx = newInvokeContext(container.$locale$, host, void 0, "qTask");
     iCtx.$container$ = container;
     const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
@@ -2541,18 +2622,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$;
@@ -2638,7 +2707,7 @@ const createResourceReturn = (container, opts, initialPromise) => {
 const isResourceReturn = obj => isObject(obj) && "resource" === (getStoreTarget(obj) || obj).__brand;
 
 const runResource = (task, container, host) => {
-    task.$flags$ &= -9, cleanupTask(task);
+    task.$flags$ &= -9, cleanupDestroyable(task);
     const iCtx = newInvokeContext(container.$locale$, host, void 0, "qResource");
     iCtx.$container$ = container;
     const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
@@ -2684,7 +2753,7 @@ const runResource = (task, container, host) => {
     });
     const timeout = resourceTarget._timeout;
     return timeout > 0 ? Promise.race([ promise, delay(timeout).then(() => {
-        setState(!1, new Error("timeout")) && cleanupTask(task);
+        setState(!1, new Error("timeout")) && cleanupDestroyable(task);
     }) ]) : promise;
 };
 
@@ -2719,12 +2788,13 @@ function qrlToString(serializationContext, value, raw) {
         }
         chunk.startsWith("./") && (chunk = chunk.slice(2));
     }
-    if (!value.$capture$ && Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0 && (value.$capture$ = value.$captureRef$.map(ref => `${serializationContext.$addRoot$(ref)}`)), 
+    let capturedIds = null;
+    if (Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0 && (capturedIds = value.$captureRef$.map(ref => `${serializationContext.$addRoot$(ref)}`)), 
     raw) {
-        return [ chunk, symbol, value.$capture$ ];
+        return [ chunk, symbol, capturedIds ];
     }
     let qrlStringInline = `${chunk}#${symbol}`;
-    return value.$capture$ && value.$capture$.length > 0 && (qrlStringInline += `[${value.$capture$.join(" ")}]`), 
+    return capturedIds && capturedIds.length > 0 && (qrlStringInline += `[${capturedIds.join(" ")}]`), 
     qrlStringInline;
 }
 
@@ -3254,6 +3324,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     let journal = container.$journal$;
     const stack = [];
     const asyncQueue = [];
+    const asyncAttributePromises = [];
     let vParent = null;
     let vCurrent = null;
     let vNewNode = null;
@@ -3283,6 +3354,10 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             }
             diff(jsxNode, vHostNode);
         }
+        if (asyncAttributePromises.length) {
+            const promises = asyncAttributePromises.splice(0);
+            return Promise.all(promises).then(() => drainAsyncQueue());
+        }
     }();
     function diff(jsxNode, vStartNode) {
         if (assertFalse(vnode_isVNode(jsxNode), "JSXNode should not be a VNode"), assertTrue(vnode_isVNode(vStartNode), "vStartNode should be a VNode"), 
@@ -3300,8 +3375,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                         } else if (isSignal(jsxValue)) {
                             expectVirtual("S", null);
                             const unwrappedSignal = jsxValue instanceof WrappedSignalImpl ? jsxValue.$unwrapIfSignal$() : jsxValue;
-                            const currentSignal = vCurrent?.[_EFFECT_BACK_REF]?.get(".")?.[0];
-                            if (currentSignal !== unwrappedSignal) {
+                            const hasUnwrappedSignal = vCurrent?.[_EFFECT_BACK_REF]?.get(".")?.[2]?.has(unwrappedSignal);
+                            if (!hasUnwrappedSignal) {
                                 const vHost = vNewNode || vCurrent;
                                 descend(resolveSignalAndDescend(() => trackSignalAndAssignHost(unwrappedSignal, vHost, ".", container)), !0);
                             }
@@ -3450,10 +3525,10 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 if (64 & vHost.flags) {
                     const namespace = getAttributeNamespace(key);
                     if (namespace) {
-                        return void element.setAttributeNS(namespace, key, String(value));
+                        return void element.setAttributeNS(namespace, key, value);
                     }
                 }
-                element.setAttribute(key, String(value));
+                element.setAttribute(key, value);
             }
         }
         const {constProps} = jsx;
@@ -3464,10 +3539,11 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 if (isHtmlAttributeAnEventName(key)) {
                     const data = getEventDataFromHtmlAttribute(key);
                     if (data) {
-                        const scope = data[0];
-                        const eventName = data[1];
-                        eventName && (vNewNode.setProp(HANDLER_PREFIX + ":" + scope + ":" + eventName, value), 
-                        scope && vNewNode.setAttr(key, "", journal), registerQwikLoaderEvent(eventName));
+                        const [scope, eventName] = data;
+                        const scopedEvent = getScopedEventName(scope, eventName);
+                        const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
+                        eventName && (vNewNode.setProp(HANDLER_PREFIX + ":" + scopedEvent, value), scope && vNewNode.setAttr(key, "", journal), 
+                        registerQwikLoaderEvent(loaderScopedEvent));
                     }
                     needsQDispatchEventPatch = !0;
                     continue;
@@ -3493,7 +3569,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) {
@@ -3553,10 +3630,14 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             let srcIdx = 0;
             let dstIdx = 0;
             let patchEventDispatch = !1;
-            const setAttribute = (key, value, vHost) => {
-                vHost.setAttr(key, null !== value ? serializeAttribute(key, value, scopedStyleIdPrefix) : null, journal);
+            const setAttributeDirect = (vnode, key, value, dstIdx, isNewKey) => {
+                const serializedValue = null != value ? serializeAttribute(key, value, scopedStyleIdPrefix) : null;
+                isNewKey ? null != serializedValue && (dstAttrs.splice(dstIdx, 0, key, serializedValue), 
+                journal.push(2, vnode.element, key, serializedValue)) : null != serializedValue ? (dstAttrs[dstIdx + 1] = serializedValue, 
+                journal.push(2, vnode.element, key, serializedValue)) : (dstAttrs.splice(dstIdx, 2), 
+                journal.push(2, vnode.element, key, null));
             };
-            const record = (key, value) => {
+            const record = (key, value, dstIdx, isNewKey) => {
                 if (key.startsWith(":")) {
                     return void vnode.setProp(key, value);
                 }
@@ -3585,41 +3666,48 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 }
                 if (isPromise(value)) {
                     const vHost = vnode;
-                    return void value.then(resolvedValue => setAttribute(key, resolvedValue, vHost));
+                    const attributePromise = value.then(resolvedValue => {
+                        const idx = mapApp_findIndx(dstAttrs, key, 0);
+                        const isNewKey = idx < 0;
+                        setAttributeDirect(vHost, key, resolvedValue, isNewKey ? -1 ^ idx : idx, isNewKey);
+                    });
+                    return void asyncAttributePromises.push(attributePromise);
                 }
-                setAttribute(key, value, vnode);
+                setAttributeDirect(vnode, key, value, dstIdx, isNewKey);
             };
             const recordJsxEvent = (key, value) => {
                 const data = getEventDataFromHtmlAttribute(key);
                 if (data) {
                     const [scope, eventName] = data;
-                    record(":" + scope + ":" + eventName, value), registerQwikLoaderEvent(eventName), 
+                    const scopedEvent = getScopedEventName(scope, eventName);
+                    const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
+                    record(":" + scopedEvent, value, 0, !1), registerQwikLoaderEvent(loaderScopedEvent), 
                     patchEventDispatch = !0;
                 }
             };
             for (;srcIdx < srcAttrs.length || dstIdx < dstAttrs.length; ) {
                 const srcKey = srcIdx < srcAttrs.length ? srcAttrs[srcIdx] : void 0;
                 const dstKey = dstIdx < dstAttrs.length ? dstAttrs[dstIdx] : void 0;
-                if (dstKey?.startsWith(HANDLER_PREFIX) || dstKey?.startsWith("q:")) {
+                if (dstKey?.startsWith(HANDLER_PREFIX)) {
                     dstIdx += 2;
                 } else if (void 0 === srcKey) {
-                    isHtmlAttributeAnEventName(dstKey) ? dstIdx += 2 : record(dstKey, null);
+                    isHtmlAttributeAnEventName(dstKey) ? dstIdx += 2 : record(dstKey, null, dstIdx, !1);
                 } else if (void 0 === dstKey) {
                     const srcValue = srcAttrs[srcIdx + 1];
-                    isHtmlAttributeAnEventName(srcKey) ? recordJsxEvent(srcKey, srcValue) : record(srcKey, srcValue), 
+                    isHtmlAttributeAnEventName(srcKey) ? recordJsxEvent(srcKey, srcValue) : record(srcKey, srcValue, dstIdx, !0), 
                     srcIdx += 2, dstIdx += 2;
                 } else if (srcKey === dstKey) {
                     const srcValue = srcAttrs[srcIdx + 1];
                     const dstValue = dstAttrs[dstIdx + 1];
                     const isEventHandler = isHtmlAttributeAnEventName(srcKey);
-                    srcValue !== dstValue ? isEventHandler ? recordJsxEvent(srcKey, srcValue) : record(srcKey, srcValue) : isEventHandler && !vnode.element.qDispatchEvent && recordJsxEvent(srcKey, srcValue), 
+                    srcValue !== dstValue ? isEventHandler ? recordJsxEvent(srcKey, srcValue) : record(srcKey, srcValue, dstIdx, !1) : isEventHandler && !vnode.element.qDispatchEvent && recordJsxEvent(srcKey, srcValue), 
                     srcIdx += 2, dstIdx += 2;
                 } else if (srcKey < dstKey) {
                     const srcValue = srcAttrs[srcIdx + 1];
-                    isHtmlAttributeAnEventName(srcKey) ? recordJsxEvent(srcKey, srcValue) : record(srcKey, srcValue), 
+                    isHtmlAttributeAnEventName(srcKey) ? recordJsxEvent(srcKey, srcValue) : record(srcKey, srcValue, dstIdx, !0), 
                     srcIdx += 2, dstIdx += 2;
                 } else {
-                    isHtmlAttributeAnEventName(dstKey) ? dstIdx += 2 : record(dstKey, null);
+                    isHtmlAttributeAnEventName(dstKey) ? dstIdx += 2 : record(dstKey, null, dstIdx, !1);
                 }
             }
             return patchEventDispatch;
@@ -3750,13 +3838,9 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 }), host = vNewNode || vCurrent;
             }
             if (host) {
-                let vNodeProps = host.getProp("q:props", container.$getObjectById$);
-                let propsAreDifferent = !1;
-                shouldRender || (propsAreDifferent = propsDiffer(jsxProps[_CONST_PROPS], vNodeProps?.[_CONST_PROPS]) || propsDiffer(jsxProps[_VAR_PROPS], vNodeProps?.[_VAR_PROPS]), 
-                shouldRender = shouldRender || propsAreDifferent), shouldRender && (propsAreDifferent && (vNodeProps ? (vNodeProps[_CONST_PROPS] = jsxProps[_CONST_PROPS], 
-                vNodeProps[_VAR_PROPS] = jsxProps[_VAR_PROPS], vNodeProps[_OWNER] = jsxProps[_OWNER]) : jsxProps && (host.setProp("q:props", jsxProps), 
-                vNodeProps = jsxProps)), host.setProp("q:renderFn", componentQRL), host.flags &= -33, 
-                container.$scheduler$(6, host, componentQRL, vNodeProps));
+                const vNodeProps = host.getProp("q:props", container.$getObjectById$);
+                shouldRender || (shouldRender ||= handleProps(host, jsxProps, vNodeProps, container)), 
+                shouldRender && (host.setProp("q:renderFn", componentQRL), host.flags &= -33, container.$scheduler$(6, host, componentQRL, vNodeProps));
             }
             !function(children, host) {
                 const projectionChildren = Array.isArray(children) ? children : [ children ];
@@ -3846,7 +3930,23 @@ function getComponentHash(vNode, getObject) {
 
 function Projection() {}
 
-function propsDiffer(src, dst) {
+function handleProps(host, jsxProps, vNodeProps, container) {
+    let shouldRender = !1;
+    let propsAreDifferent = !1;
+    if (vNodeProps) {
+        const effects = vNodeProps[_PROPS_HANDLER].$effects$;
+        const constPropsDifferent = handleChangedProps(jsxProps[_CONST_PROPS], vNodeProps[_CONST_PROPS], vNodeProps[_PROPS_HANDLER], container, !1);
+        if (propsAreDifferent = constPropsDifferent, shouldRender ||= constPropsDifferent, 
+        effects && effects.size > 0) {
+            const varPropsDifferent = handleChangedProps(jsxProps[_VAR_PROPS], vNodeProps[_VAR_PROPS], vNodeProps[_PROPS_HANDLER], container);
+            propsAreDifferent ||= varPropsDifferent;
+        }
+    }
+    return propsAreDifferent && (vNodeProps ? vNodeProps[_OWNER] = jsxProps[_OWNER] : jsxProps && (host.setProp("q:props", jsxProps), 
+    vNodeProps = jsxProps)), shouldRender;
+}
+
+function handleChangedProps(src, dst, propsHandler, container, triggerEffects = !0) {
     const srcEmpty = isPropsEmpty(src);
     const dstEmpty = isPropsEmpty(dst);
     if (srcEmpty && dstEmpty) {
@@ -3863,12 +3963,17 @@ function propsDiffer(src, dst) {
     "q:brefs" in dst && dstLen--, srcLen !== dstLen) {
         return !0;
     }
+    let changed = !1;
+    propsHandler.$container$ = container;
     for (const key of srcKeys) {
         if ("children" !== key && "q:brefs" !== key && (!Object.prototype.hasOwnProperty.call(dst, key) || src[key] !== dst[key])) {
-            return !0;
+            if (changed = !0, !triggerEffects) {
+                return !0;
+            }
+            triggerPropsProxyEffect(propsHandler, key);
         }
     }
-    return !1;
+    return changed;
 }
 
 function isPropsEmpty(props) {
@@ -3884,19 +3989,23 @@ function cleanup(container, vNode) {
     for (;;) {
         const type = vCursor.flags;
         if (3 & type) {
-            if (clearAllEffects(container, vCursor), markVNodeAsDeleted(vCursor), 2 & type) {
+            clearAllEffects(container, vCursor), markVNodeAsDeleted(vCursor);
+            if (2 & type && null !== vCursor.getProp("q:renderFn", null)) {
                 const seq = container.getHostProp(vCursor, "q:seq");
                 if (seq) {
                     for (let i = 0; i < seq.length; i++) {
                         const obj = seq[i];
-                        if (isTask(obj)) {
-                            const task = obj;
-                            clearAllEffects(container, task), 1 & task.$flags$ ? container.$scheduler$(32, task) : cleanupTask(task);
+                        if (isObject(obj)) {
+                            const objIsTask = isTask(obj);
+                            if (objIsTask && 1 & obj.$flags$) {
+                                container.$scheduler$(32, obj);
+                                continue;
+                            }
+                            (obj instanceof SignalImpl || isStore(obj)) && clearAllEffects(container, obj), 
+                            (objIsTask || obj instanceof AsyncComputedSignalImpl) && cleanupDestroyable(obj);
                         }
                     }
                 }
-            }
-            if (2 & type && null !== vCursor.getProp("q:renderFn", null)) {
                 const attrs = vnode_getProps(vCursor);
                 for (let i = 0; i < attrs.length; i += 2) {
                     if (isSlotProp(attrs[i])) {
@@ -4052,7 +4161,7 @@ function findAncestorBlockingChore(chore, type) {
         const blockingChores = isNormalQueue ? current.chores : current.blockedChores;
         if (blockingChores) {
             for (const blockingChore of blockingChores) {
-                if (blockingChore.$type$ < 16 && 3 !== blockingChore.$type$ && 1 !== blockingChore.$type$ && 2 !== blockingChore.$type$) {
+                if (blockingChore.$type$ < 16 && 3 !== blockingChore.$type$ && 1 !== blockingChore.$type$ && 2 !== blockingChore.$type$ && blockingChore.$state$ === ChoreState.NONE) {
                     return blockingChore;
                 }
             }
@@ -4074,17 +4183,17 @@ function findBlockingChore(chore, choreQueue, blockedChores, runningChores, cont
     for (const rule of BLOCKING_RULES) {
         if (chore.$type$ === rule.blockedType) {
             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;
                 }
             }
             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;
                 }
             }
             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;
                 }
             }
@@ -4111,7 +4220,7 @@ function findBlockingChoreForVisible(chore, runningChores, container) {
     for (const rule of VISIBLE_BLOCKING_RULES) {
         if (chore.$type$ === rule.blockedType) {
             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;
                 }
             }
@@ -4264,7 +4373,7 @@ function choreComparator(a, b) {
         return microTypeDiff;
     }
     const idxDiff = toNumber(a.$idx$) - toNumber(b.$idx$);
-    return 0 !== idxDiff ? idxDiff : a.$target$ !== b.$target$ ? isQrl(a.$target$) && isQrl(b.$target$) && a.$target$.$hash$ === b.$target$.$hash$ ? 0 : 1 : 7 === a.$type$ && 7 === b.$type$ && (a.$target$ instanceof StoreHandler && b.$target$ instanceof StoreHandler || a.$target$ instanceof AsyncComputedSignalImpl && b.$target$ instanceof AsyncComputedSignalImpl) && a.$payload$ !== b.$payload$ ? 1 : 0;
+    return 0 !== idxDiff ? idxDiff : a.$target$ !== b.$target$ ? isQrl(a.$target$) && isQrl(b.$target$) && a.$target$.$hash$ === b.$target$.$hash$ ? 0 : 1 : 7 === a.$type$ && 7 === b.$type$ && (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$ ? 1 : 0;
 }
 
 function toNumber(value) {
@@ -4293,6 +4402,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() {
         drainScheduled || (drainScheduled = !0, nextTick());
     }
@@ -4328,14 +4439,11 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
         if (isServer && chore.$host$ && isSsrNode(chore.$host$)) {
             if (!!!(1 & chore.$host$.flags) && 5 !== chore.$type$ && 7 !== chore.$type$) {
                 const warningMessage = `A '${choreTypeToName(chore.$type$)}' chore was scheduled on a host element that has already been streamed to the client.\nThis can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).\n\nProblematic chore:\n  - Type: ${choreTypeToName(chore.$type$)}\n  - Host: ${chore.$host$.toString()}\n  - Nearest element location: ${chore.$host$.currentFile}\n\nThis is often caused by modifying a signal in an already rendered component during SSR.`;
-                return logWarn(warningMessage), chore;
+                return logWarn(warningMessage), isRenderBlocking(type) && blockingChoresCount--, 
+                chore;
             }
         }
         if (1 !== chore.$type$ && 2 !== chore.$type$) {
-            const blockingChore = findBlockingChore(chore, choreQueue, blockedChores, runningChores, container);
-            if (blockingChore) {
-                return addBlockedChore(chore, blockingChore, blockedChores), chore;
-            }
             const runningChore = function(chore) {
                 if (runningChores.size) {
                     for (const runningChore of runningChores) {
@@ -4347,10 +4455,15 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
                 return null;
             }(chore);
             if (runningChore) {
-                return addBlockedChore(chore, runningChore, blockedChores), chore;
+                return isResourceChore(runningChore) && addBlockedChore(chore, runningChore, blockedChores), 
+                chore;
+            }
+            const blockingChore = findBlockingChore(chore, choreQueue, blockedChores, runningChores, container);
+            if (blockingChore) {
+                return addBlockedChore(chore, blockingChore, blockedChores), chore;
             }
         }
-        addChore(chore, choreQueue);
+        addChoreAndIncrementBlockingCounter(chore, choreQueue);
         const runImmediately = isServer && 6 === type || 2 === type;
         runImmediately && !isDraining ? (drainScheduled = !0, drainChoreQueue()) : drainInNextTick();
         return chore;
@@ -4372,8 +4485,9 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
         }, delay) : isDraining || applyJournalFlush();
     }
     function applyJournalFlush() {
-        isJournalFlushRunning || (isJournalFlushRunning = !0, journalFlush(), isJournalFlushRunning = !1, 
-        flushBudgetStart = performance.now(), cancelFlushTimer());
+        blockingChoresCount > 0 || isJournalFlushRunning || (isJournalFlushRunning = !0, 
+        journalFlush(), isJournalFlushRunning = !1, flushBudgetStart = performance.now(), 
+        cancelFlushTimer());
     }
     function shouldApplyJournalFlush(isServer) {
         return !isServer && currentTime - flushBudgetStart >= FREQUENCY_MS;
@@ -4398,13 +4512,12 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
                     const blockingChore = findBlockingChore(blockedChore, choreQueue, blockedChores, runningChores, container);
                     blockingChore ? (blockingChore.$blockedChores$ ||= new ChoreArray).add(blockedChore) : (blockedChores.delete(blockedChore), 
                     vnode_isVNode(blockedChore.$host$) && blockedChore.$host$.blockedChores?.delete(blockedChore), 
-                    addChore(blockedChore, choreQueue), blockedChoresScheduled = !0);
+                    addChoreAndIncrementBlockingCounter(blockedChore, choreQueue), blockedChoresScheduled = !0);
                 }
                 chore.$blockedChores$ = null;
             }
             blockedChoresScheduled && !isDraining && drainInNextTick();
         };
-        let currentChore = null;
         try {
             for (;choreQueue.length; ) {
                 currentTime = performance.now();
@@ -4413,14 +4526,14 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
                     continue;
                 }
                 if (vNodeAlreadyDeleted(chore) && 32 !== chore.$type$) {
-                    vnode_isVNode(chore.$host$) && chore.$host$.chores?.delete(chore);
+                    vnode_isVNode(chore.$host$) && chore.$host$.chores?.delete(chore), isRenderBlocking(chore.$type$) && blockingChoresCount--;
                     continue;
                 }
                 if (16 === chore.$type$) {
                     applyJournalFlush();
                     const blockingChore = findBlockingChoreForVisible(chore, runningChores, container);
                     if (blockingChore && blockingChore.$state$ === ChoreState.RUNNING) {
-                        addBlockedChore(chore, blockingChore, blockedChores);
+                        (blockingChore.$blockedChores$ ||= new ChoreArray).add(chore);
                         continue;
                     }
                 }
@@ -4448,11 +4561,12 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
     }
     function finishChore(chore, value) {
         chore.$endTime$ = performance.now(), chore.$state$ = ChoreState.DONE, chore.$returnValue$ = value, 
-        chore.$resolve$?.(value), vnode_isVNode(chore.$host$) && chore.$host$.chores?.delete(chore);
+        chore.$resolve$?.(value), vnode_isVNode(chore.$host$) && chore.$host$.chores?.delete(chore), 
+        isRenderBlocking(chore.$type$) && blockingChoresCount--;
     }
     function handleError(chore, e) {
-        chore.$endTime$ = performance.now(), chore.$state$ = ChoreState.FAILED, chore.$reject$?.(e), 
-        container.handleError(e, chore.$host$);
+        chore.$endTime$ = performance.now(), chore.$state$ = ChoreState.FAILED, isRenderBlocking(chore.$type$) && blockingChoresCount--, 
+        chore.$reject$?.(e), container.handleError(e, chore.$host$);
     }
     function executeChore(chore, isServer) {
         const host = chore.$host$;
@@ -4483,12 +4597,20 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
           case 16:
             {
                 const payload = chore.$payload$;
-                returnValue = 4 & payload.$flags$ ? runResource(payload, container, host) : runTask(payload, container, host);
+                if (4 & payload.$flags$) {
+                    returnValue = runResource(payload, container, host);
+                } else {
+                    const task = payload;
+                    returnValue = runTask(task, container, host), 16 & task.$flags$ && (blockingChoresCount++, 
+                    returnValue = maybeThen(returnValue, () => {
+                        blockingChoresCount--;
+                    }));
+                }
             }
             break;
 
           case 32:
-            cleanupTask(chore.$payload$);
+            cleanupDestroyable(chore.$payload$);
             break;
 
           case 4:
@@ -4554,19 +4676,31 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
         }
         return returnValue;
     }
+    function addChoreAndIncrementBlockingCounter(chore, choreArray) {
+        addChore(chore, choreArray) && blockingChoresCount++;
+    }
 };
 
+function addChore(chore, choreArray) {
+    return choreArray.add(chore) < 0 && (vnode_isVNode(chore.$host$) && (chore.$host$.chores ||= new ChoreArray).add(chore), 
+    isRenderBlocking(chore.$type$));
+}
+
 function vNodeAlreadyDeleted(chore) {
     return !!(chore.$host$ && vnode_isVNode(chore.$host$) && 32 & chore.$host$.flags);
 }
 
+function isResourceChore(chore) {
+    return 3 === chore.$type$ && !!chore.$payload$ && !!(4 & chore.$payload$.$flags$);
+}
+
 function addBlockedChore(blockedChore, blockingChore, blockedChores) {
-    (blockingChore.$blockedChores$ ||= new ChoreArray).add(blockedChore), blockedChores.add(blockedChore), 
-    vnode_isVNode(blockedChore.$host$) && (blockedChore.$host$.blockedChores ||= new ChoreArray).add(blockedChore);
+    (isResourceChore(blockedChore) || 0 !== choreComparator(blockedChore, blockingChore)) && ((blockingChore.$blockedChores$ ||= new ChoreArray).add(blockedChore), 
+    blockedChores.add(blockedChore), vnode_isVNode(blockedChore.$host$) && (blockedChore.$host$.blockedChores ||= new ChoreArray).add(blockedChore));
 }
 
-function addChore(chore, choreArray) {
-    choreArray.add(chore) < 0 && vnode_isVNode(chore.$host$) && (chore.$host$.chores ||= new ChoreArray).add(chore);
+function isRenderBlocking(type) {
+    return 4 === type || 6 === type;
 }
 
 function choreTypeToName(type) {
@@ -4637,7 +4771,7 @@ function debugTrace(action, arg, queue, blockedChores) {
             lines.push(`${activeMarker}${state} ${type} ${1 === chore.$type$ || 2 === chore.$type$ ? qrlTarget : host} ${chore.$idx$}`);
         }
     }
-    blockedChores && blockedChores.size > 0 && (lines.push(""), lines.push(`🚫 Blocked Chores (${blockedChores.size} items):`), 
+    blockedChores && blockedChores.length > 0 && (lines.push(""), 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, "");
@@ -4677,14 +4811,14 @@ async function serialize(serializationContext) {
     const s11nWeakRefs = new Map;
     let parent;
     const qrlMap = new Map;
-    const outputArray = (value, keepNulls, writeFn) => {
+    const outputArray = (value, keepUndefined, writeFn) => {
         $writer$.write("[");
         let separator = !1;
         let length;
-        if (keepNulls) {
+        if (keepUndefined) {
             length = value.length;
         } else {
-            for (length = value.length - 1; length >= 0 && null === value[length]; ) {
+            for (length = value.length - 1; length >= 0 && void 0 === value[length]; ) {
                 length--;
             }
             length++;
@@ -4694,7 +4828,7 @@ async function serialize(serializationContext) {
         }
         $writer$.write("]");
     };
-    const output = (type, value, keepNulls) => {
+    const output = (type, value, keepUndefined) => {
         if ($writer$.write(`${type},`), "number" == typeof value) {
             $writer$.write(value.toString());
         } else if ("string" == typeof value) {
@@ -4706,7 +4840,7 @@ async function serialize(serializationContext) {
             }
             $writer$.write(0 === lastIdx ? s : s.slice(lastIdx));
         } else {
-            outputArray(value, keepNulls, (valueItem, idx) => {
+            outputArray(value, !!keepUndefined, (valueItem, idx) => {
                 writeValue(valueItem, idx);
             });
         }
@@ -4824,7 +4958,7 @@ async function serialize(serializationContext) {
     const writeObjectValue = value => {
         if (isPropsProxy(value)) {
             const owner = value[_OWNER];
-            output(32, [ _serializationWeakRef(owner), owner.varProps, owner.constProps ]);
+            output(32, [ _serializationWeakRef(owner), owner.varProps, owner.constProps, value[_PROPS_HANDLER].$effects$ ]);
         } else if (value instanceof SubscriptionData) {
             output(33, [ value.data.$scopedStyleIdPrefix$, value.data.$isConst$ ]);
         } else if (isStore(value)) {
@@ -4843,7 +4977,7 @@ async function serialize(serializationContext) {
                     innerStore && innerStores.push(innerStore);
                 }
                 const out = [ storeTarget, flags, effects, ...innerStores ];
-                for (;null == out[out.length - 1]; ) {
+                for (;void 0 === out[out.length - 1]; ) {
                     out.pop();
                 }
                 output(29, out);
@@ -4851,7 +4985,7 @@ async function serialize(serializationContext) {
         } else if (isSerializerObj(value)) {
             const result = value[SerializerSymbol](value);
             if (isPromise(result)) {
-                const forwardRef = resolvePromise(result, $addRoot$, (resolved, resolvedValue) => new PromiseResult(28, resolved, resolvedValue, null, null));
+                const forwardRef = resolvePromise(result, $addRoot$, (resolved, resolvedValue) => new PromiseResult(28, resolved, resolvedValue, void 0, void 0));
                 output(2, forwardRef);
             } else {
                 const index = parent.$index$;
@@ -4875,8 +5009,14 @@ 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) => new PromiseResult(28, resolved, resolvedValue, value.$effects$, value.$computeQrl$));
-                return void output(2, forwardRefId);
+                const maybeValue = getCustomSerializerPromise(value, value.$untrackedValue$);
+                if (isPromise(maybeValue)) {
+                    const forwardRefId = resolvePromise(maybeValue, $addRoot$, (resolved, resolvedValue) => new PromiseResult(28, resolved, resolvedValue, value.$effects$, value.$computeQrl$));
+                    output(2, forwardRefId);
+                } else {
+                    output(28, [ value.$computeQrl$, value.$effects$, maybeValue ]);
+                }
+                return;
             }
             if (value instanceof WrappedSignalImpl) {
                 output(25, [ ...serializeWrappingFn(serializationContext, value), filterEffectBackRefs(value[_EFFECT_BACK_REF]), value.$flags$, value.$hostElement$, ...value.$effects$ || [] ]);
@@ -4890,10 +5030,15 @@ async function serialize(serializationContext) {
                 addPreloadQrl(value.$computeQrl$);
                 const out = [ value.$computeQrl$, value.$effects$ ];
                 const isAsync = value instanceof AsyncComputedSignalImpl;
-                isAsync && out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedLoading$, value.$untrackedError$), 
-                v !== NEEDS_COMPUTATION && out.push(v), output(isAsync ? 27 : 26, out);
+                isAsync && out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedLoading$, value.$untrackedError$);
+                let keepUndefined = !1;
+                v !== NEEDS_COMPUTATION && (out.push(v), isAsync || void 0 !== v || (keepUndefined = !0)), 
+                output(isAsync ? 27 : 26, out, keepUndefined);
             } else {
-                output(24, [ value.$untrackedValue$, ...value.$effects$ || [] ]);
+                const v = value.$untrackedValue$;
+                const keepUndefined = void 0 === v;
+                const out = [ v ];
+                value.$effects$ && out.push(...value.$effects$), output(24, out, keepUndefined);
             }
         } else if (value instanceof URL) {
             output(6, value.href);
@@ -4940,14 +5085,14 @@ async function serialize(serializationContext) {
             }
             output(17, combined);
         } else if (isJSXNode(value)) {
-            const out = [ value.type, value.key, value.varProps, value.constProps, value.children, value.toSort || null ];
-            for (;null == out[out.length - 1]; ) {
+            const out = [ value.type, value.key, value.varProps, value.constProps, value.children, value.toSort || void 0 ];
+            for (;void 0 === out[out.length - 1]; ) {
                 out.pop();
             }
             output(31, out);
         } else if (value instanceof Task) {
             const out = [ value.$qrl$, value.$flags$, value.$index$, value.$el$, value[_EFFECT_BACK_REF], value.$state$ ];
-            for (;null == out[out.length - 1]; ) {
+            for (;void 0 === out[out.length - 1]; ) {
                 out.pop();
             }
             output(21, out);
@@ -5039,19 +5184,17 @@ class PromiseResult {
     $value$;
     $effects$;
     $qrl$;
-    constructor($type$, $resolved$, $value$, $effects$ = null, $qrl$ = null) {
+    constructor($type$, $resolved$, $value$, $effects$, $qrl$) {
         this.$type$ = $type$, this.$resolved$ = $resolved$, this.$value$ = $value$, this.$effects$ = $effects$, 
         this.$qrl$ = $qrl$;
     }
 }
 
 function getCustomSerializerPromise(signal, value) {
-    return new Promise(resolve => {
-        signal.$computeQrl$.resolve().then(arg => {
-            let data;
-            arg.serialize ? data = arg.serialize(value) : SerializerSymbol in value && (data = value[SerializerSymbol](value)), 
-            void 0 === data && (data = NEEDS_COMPUTATION), resolve(data);
-        });
+    return value === NEEDS_COMPUTATION ? value : maybeThen(signal.$computeQrl$.resolved || signal.$computeQrl$.resolve(), arg => {
+        let data;
+        return "function" == typeof arg && (arg = arg()), arg.serialize ? data = arg.serialize(value) : "object" == typeof value && SerializerSymbol in value && (data = value[SerializerSymbol](value)), 
+        void 0 === data && (data = NEEDS_COMPUTATION), data;
     });
 }
 
@@ -5083,7 +5226,7 @@ function serializeWrappingFn(serializationContext, value) {
 }
 
 function filterEffectBackRefs(effectBackRef) {
-    let effectBackRefToSerialize = null;
+    let effectBackRefToSerialize;
     if (effectBackRef) {
         for (const [effectProp, effect] of effectBackRef) {
             effect[2] && (effectBackRefToSerialize ||= new Map, effectBackRefToSerialize.set(effectProp, effect));
@@ -5210,7 +5353,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);
     }
@@ -5321,12 +5464,12 @@ function processJSXNode(ssr, enqueue, value, options) {
                 appendClassIfScopedStyleExists(jsx, options.styleScoped);
                 let qwikInspectorAttrValue = null;
                 isDev && jsx.dev && "head" !== jsx.type && (qwikInspectorAttrValue = getFileLocationFromJsx(jsx.dev));
-                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);
@@ -5380,10 +5523,18 @@ 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("q:sstyle"));
-                    enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame)), 
-                    enqueue(ssr.closeComponent), enqueue(jsxOutput), isPromise(jsxOutput) && enqueue(Promise), 
-                    enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                    if (enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame)), 
+                    enqueue(ssr.closeComponent), isPromise(jsxOutput)) {
+                        enqueue(async () => {
+                            const resolvedOutput = await jsxOutput;
+                            const compStyleComponentId = addComponentStylePrefix(host.getProp("q:sstyle"));
+                            enqueue(resolvedOutput), enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                        });
+                    } else {
+                        enqueue(jsxOutput);
+                        const compStyleComponentId = addComponentStylePrefix(host.getProp("q:sstyle"));
+                        enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                    }
                 } else {
                     const inlineComponentProps = [ "q:key", jsx.key ];
                     ssr.openFragment(isDev ? [ "q:type", "I", ...inlineComponentProps ] : inlineComponentProps), 
@@ -5397,14 +5548,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 (null == record) {
         return null;
@@ -5439,7 +5582,7 @@ function setEvent(serializationCtx, key, rawValue) {
     const appendToValue = valueToAppend => {
         value = (null == value ? "" : value + "\n") + valueToAppend;
     };
-    const getQrlString = qrl => (qrl.$symbol$.startsWith("_") || !qrl.$captureRef$ && !qrl.$capture$ || (qrl = createQRL(null, "_run", _run, null, null, [ qrl ])), 
+    const getQrlString = qrl => (!qrl.$symbol$.startsWith("_") && qrl.$captureRef$?.length && (qrl = createQRL(null, "_run", _run, null, null, [ qrl ])), 
     qrlToString(serializationCtx, qrl));
     if (Array.isArray(qrls)) {
         for (let i = 0; i <= qrls.length; i++) {
@@ -5460,12 +5603,15 @@ function setEvent(serializationCtx, key, rawValue) {
 function addQwikEventToSerializationContext(serializationCtx, key, qrl) {
     const data = getEventDataFromHtmlAttribute(key);
     if (data) {
-        serializationCtx.$eventNames$.add(data[1]), serializationCtx.$eventQrls$.add(qrl);
+        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) {
-    const eventName = key.substring(15);
+    const eventName = key.substring(14);
     eventName && serializationCtx.$eventNames$.add(eventName);
 }
 
@@ -5565,8 +5711,9 @@ const inflate = (container, target, typeId, data) => {
                 const d = data;
                 asyncComputed.$computeQrl$ = d[0], asyncComputed.$effects$ = new Set(d[1]), asyncComputed.$loadingEffects$ = new Set(d[2]), 
                 asyncComputed.$errorEffects$ = new Set(d[3]), asyncComputed.$untrackedLoading$ = d[4], 
-                asyncComputed.$untrackedError$ = d[5] || null;
-                d.length > 6 && (asyncComputed.$untrackedValue$ = d[6]), asyncComputed.$flags$ |= 1;
+                asyncComputed.$untrackedError$ = d[5];
+                d.length > 6 && (asyncComputed.$untrackedValue$ = d[6], asyncComputed.$promiseValue$ = d[6]), 
+                asyncComputed.$flags$ |= 1;
                 break;
             }
 
@@ -5575,7 +5722,7 @@ const inflate = (container, target, typeId, data) => {
             {
                 const computed = target;
                 const d = data;
-                computed.$computeQrl$ = d[0], computed.$effects$ = new Set(d[1]);
+                computed.$computeQrl$ = d[0], d[1] && (computed.$effects$ = new Set(d[1]));
                 d.length > 2 ? (computed.$untrackedValue$ = d[2], 28 === typeId && (computed.$flags$ |= 1)) : (computed.$flags$ |= 1, 
                 computed.$computeQrl$.resolve(), container.$scheduler$(1, null, computed.$computeQrl$));
                 break;
@@ -5650,9 +5797,10 @@ const inflate = (container, target, typeId, data) => {
 
           case 32:
             const propsProxy = target;
-            let owner = data[0];
-            owner === _UNINITIALIZED && (owner = new JSXNodeImpl(Fragment, data[1], data[2]), 
-            owner._proxy = propsProxy), propsProxy[_OWNER] = owner;
+            const d = data;
+            let owner = d[0];
+            owner === _UNINITIALIZED && (owner = new JSXNodeImpl(Fragment, d[1], d[2]), owner._proxy = propsProxy), 
+            propsProxy[_OWNER] = owner, propsProxy[_PROPS_HANDLER].$effects$ = d[3];
             break;
 
           case 33:
@@ -5990,6 +6138,9 @@ class DomContainer extends _SharedContainer {
             this.$rawStateData$ = JSON.parse(qwikStates[qwikStates.length - 1].textContent), 
             preprocessState(this.$rawStateData$, this), this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$);
         }
+        element.isConnected && element.dispatchEvent(new CustomEvent("qresume", {
+            bubbles: !0
+        }));
     }
     $setRawState$(id, vParent) {
         this.$stateData$[id] = vParent;
@@ -6284,7 +6435,7 @@ const getOrCreateStore = (obj, flags, container) => {
 class StoreHandler {
     $flags$;
     $container$;
-    $effects$=null;
+    $effects$=void 0;
     constructor($flags$, $container$) {
         this.$flags$ = $flags$, this.$container$ = $container$;
     }
@@ -6293,7 +6444,7 @@ class StoreHandler {
     }
     force(prop) {
         const target = getStoreTarget(this);
-        this.$container$?.$scheduler$(7, null, this, getEffects(target, prop, this.$effects$));
+        this.$container$?.$scheduler$(7, void 0, this, getEffects(target, prop, this.$effects$));
     }
     get(target, prop) {
         if ("symbol" == typeof prop) {
@@ -6331,7 +6482,7 @@ class StoreHandler {
         return !0;
     }
     deleteProperty(target, prop) {
-        return "string" == typeof prop && delete target[prop] && (Array.isArray(target) || this.$container$?.$scheduler$(7, null, this, getEffects(target, prop, this.$effects$)), 
+        return "string" == typeof prop && delete target[prop] && (Array.isArray(target) || this.$container$?.$scheduler$(7, void 0, this, getEffects(target, prop, this.$effects$)), 
         !0);
     }
     has(target, prop) {
@@ -6372,7 +6523,7 @@ function addStoreEffect(target, prop, store, effectSubscription) {
 function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
     target[prop] = value;
     const effects = getEffects(target, prop, currentStore.$effects$);
-    effects && currentStore.$container$?.$scheduler$(7, null, currentStore, effects);
+    effects && currentStore.$container$?.$scheduler$(7, void 0, currentStore, effects);
 }
 
 function getEffects(target, prop, storeEffects) {
@@ -6396,7 +6547,7 @@ function getEffects(target, prop, storeEffects) {
             effectsToTrigger.add(effect);
         }
     }
-    return effectsToTrigger || null;
+    return effectsToTrigger;
 }
 
 const canSerialize = (value, seen = new WeakSet) => {
@@ -7212,15 +7363,15 @@ const useVisibleTaskQrl = (qrl, opts) => {
     const {val, set, i, iCtx} = useSequentialScope();
     const eagerness = opts?.strategy ?? "intersection-observer";
     if (val) {
-        return void (isServerPlatform() && useRunTask(val, eagerness));
+        return void (32 & val.$flags$ || isServerPlatform() || (val.$flags$ |= 32, useRegisterTaskEvents(val, eagerness)));
     }
     assertQrl(qrl);
     const task = new Task(1, i, iCtx.$hostElement$, qrl, void 0, null);
-    set(task), useRunTask(task, eagerness), isServerPlatform() || (qrl.resolve(iCtx.$element$), 
+    set(task), useRegisterTaskEvents(task, eagerness), isServerPlatform() || (qrl.resolve(iCtx.$element$), 
     iCtx.$container$.$scheduler$(16, task));
 };
 
-const useRunTask = (task, eagerness) => {
+const useRegisterTaskEvents = (task, eagerness) => {
     "intersection-observer" === eagerness ? useOn("qvisible", getTaskHandlerQrl(task)) : "document-ready" === eagerness ? useOnDocument("qinit", getTaskHandlerQrl(task)) : "document-idle" === eagerness && useOnDocument("qidle", getTaskHandlerQrl(task));
 };