@qwik.dev/core 2.0.0-beta.14 → 2.0.0-beta.16

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.14-dev+1e7496d
+ * @qwik.dev/core 2.0.0-beta.16-dev+a83ccf3
  * 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.14-dev+1e7496d";
+const version = "2.0.0-beta.16-dev+a83ccf3";
 
 // 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);
@@ -1150,12 +1172,18 @@ class PropsProxyHandler {
             else if (!(prop in this.owner.varProps)) {
                 this.owner.toSort = true;
             }
-            this.owner.varProps[prop] = value;
+            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;
         }
@@ -1172,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'
@@ -1207,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.
@@ -1290,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;
@@ -1340,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
@@ -1354,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
@@ -1422,13 +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;
     $promise$ = null;
-    [_EFFECT_BACK_REF] = null;
+    [_EFFECT_BACK_REF] = undefined;
     constructor(container, fn, flags = 1 /* SignalFlags.INVALID */) {
         super(container, fn, flags);
     }
@@ -1442,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() {
@@ -1455,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() {
@@ -1486,7 +1549,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         if (isPromise(untrackedValue)) {
             const isFirstComputation = this.$promiseValue$ === NEEDS_COMPUTATION;
             this.untrackedLoading = true;
-            this.untrackedError = null;
+            this.untrackedError = undefined;
             if (this.$promiseValue$ !== NEEDS_COMPUTATION) {
                 // skip cleanup after resuming
                 cleanupDestroyable(this);
@@ -1495,7 +1558,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
                 .then((promiseValue) => {
                 this.$promiseValue$ = promiseValue;
                 this.untrackedLoading = false;
-                this.untrackedError = null;
+                this.untrackedError = undefined;
                 if (this.setValue(promiseValue)) {
                     scheduleEffects(this.$container$, this, this.$effects$);
                 }
@@ -1728,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);
@@ -1761,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
@@ -1838,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)) {
@@ -1851,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 */];
@@ -1864,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$;
@@ -1877,7 +1953,7 @@ function clearSignal(container, producer, effect) {
         effects.delete(effect);
     }
     if (producer instanceof WrappedSignalImpl) {
-        producer.$hostElement$ = null;
+        producer.$hostElement$ = undefined;
         clearAllEffects(container, producer);
     }
 }
@@ -1891,14 +1967,14 @@ function clearAsyncComputedSignal(producer, effect) {
         pendingEffects.delete(effect);
     }
 }
-function clearStore(producer, effect) {
+function clearStoreOrProps(producer, effect) {
     const effects = producer?.$effects$;
     if (effects) {
-        for (const [propKey, propEffects] of effects.entries()) {
+        for (const [prop, propEffects] of effects.entries()) {
             if (propEffects.has(effect)) {
                 propEffects.delete(effect);
                 if (propEffects.size === 0) {
-                    effects.delete(propKey);
+                    effects.delete(prop);
                 }
             }
         }
@@ -2711,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 */:
@@ -3467,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.
@@ -3493,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) {
@@ -3588,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;
 }
@@ -4338,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];
                 }
             }
         }
@@ -5771,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);
                         }
@@ -6195,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;
@@ -6357,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;
@@ -6404,20 +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;
-                const attributePromise = 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;
             }
         };
@@ -6426,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;
             }
@@ -6438,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
                 }
             }
@@ -6449,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
@@ -6465,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) {
@@ -6483,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
@@ -6496,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
                 }
             }
@@ -6698,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);
@@ -6860,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) {
@@ -6888,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) {
@@ -7179,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;
                 }
             }
@@ -7204,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;
             }
         }
@@ -7242,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;
             }
         }
@@ -7483,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$) {
@@ -7685,16 +7839,18 @@ This is often caused by modifying a signal in an already rendered component duri
         }
         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;
-            }
         }
         addChoreAndIncrementBlockingCounter(chore, choreQueue);
         const runImmediately = (isServer && type === 6 /* ChoreType.COMPONENT */) || type === 2 /* ChoreType.RUN_QRL */;
@@ -7852,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;
                     }
                 }
@@ -8095,7 +8251,15 @@ function addChore(chore, choreArray) {
 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$)) {
@@ -8194,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, '');
@@ -8272,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++;
@@ -8298,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());
@@ -8315,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);
             });
         }
@@ -8506,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$]);
@@ -8536,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);
@@ -8546,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);
             }
@@ -8581,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) {
@@ -8617,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) {
@@ -8707,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);
@@ -8723,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);
@@ -8850,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$;
@@ -8859,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) => {
@@ -8923,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 */]) {
@@ -9103,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);
     }
@@ -9188,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') {
@@ -9245,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);
@@ -9347,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];
@@ -9369,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;
@@ -9468,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);
     }
@@ -9613,7 +9813,7 @@ 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];
@@ -9628,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];
@@ -9723,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;
@@ -10272,9 +10475,6 @@ class DomContainer extends _SharedContainer {
         this.$setServerData$();
         element.setAttribute(QContainerAttr, "resumed" /* QContainerValue.RESUMED */);
         element.qContainer = this;
-        if (!qTest && element.isConnected) {
-            element.dispatchEvent(new CustomEvent('qresume', { bubbles: true }));
-        }
         const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
         if (qwikStates.length !== 0) {
             const lastState = qwikStates[qwikStates.length - 1];
@@ -10282,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;
@@ -10717,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$;
@@ -10727,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
@@ -10796,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;
     }
@@ -10852,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) {
@@ -10883,7 +11087,7 @@ function getEffects(target, prop, storeEffects) {
             effectsToTrigger.add(effect);
         }
     }
-    return effectsToTrigger || null;
+    return effectsToTrigger;
 }
 
 const canSerialize = (value, seen = new WeakSet()) => {
@@ -12673,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));
     }