@qwik.dev/core 2.0.0-beta.17 → 2.0.0-beta.19

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.17-dev+c34c237
+ * @qwik.dev/core 2.0.0-beta.19-dev+0d046fb
  * 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.17-dev+c34c237";
+const version = "2.0.0-beta.19-dev+0d046fb";
 
 // same as isDev but separate so we can test
 const qDev = globalThis.qDev !== false;
@@ -96,8 +96,8 @@ const isString = (v) => {
 const isFunction = (v) => {
     return typeof v === 'function';
 };
-const isPrimitive = (v) => {
-    return typeof v !== 'object' && typeof v !== 'function' && v !== null && v !== undefined;
+const isPrimitiveOrNullUndefined = (v) => {
+    return (typeof v !== 'object' && typeof v !== 'function') || v === null || v === undefined;
 };
 
 const codeToText = (code, ...parts) => {
@@ -248,6 +248,8 @@ const ELEMENT_KEY = 'q:key';
 const ELEMENT_PROPS = 'q:props';
 const ELEMENT_SEQ = 'q:seq';
 const ELEMENT_SEQ_IDX = 'q:seqIdx';
+const ITERATION_ITEM_SINGLE = 'q:p'; // Single iteration parameter (not an array)
+const ITERATION_ITEM_MULTI = 'q:ps'; // Multiple iteration parameters (array)
 /** Non serializable markers - always begins with `:` character */
 const NON_SERIALIZABLE_MARKER_PREFIX = ':';
 const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
@@ -260,6 +262,7 @@ const STREAM_BLOCK_END_COMMENT = 'qkssr-po';
 const Q_PROPS_SEPARATOR = ':';
 const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
 const qwikInspectorAttr = 'data-qwik-inspector';
+const debugStyleScopeIdPrefixAttr = '__scopedStyleIdPrefix__';
 
 // keep this import from core/build so the cjs build works
 const createPlatform = () => {
@@ -388,17 +391,6 @@ const safeCall = (call, thenFn, rejectFn) => {
         return rejectFn(e);
     }
 };
-const catchError = (valueOrPromise, rejectFn) => {
-    try {
-        if (isPromise(valueOrPromise)) {
-            return valueOrPromise.catch(rejectFn);
-        }
-        return valueOrPromise;
-    }
-    catch (e) {
-        return rejectFn(e);
-    }
-};
 const maybeThen = (valueOrPromise, thenFn) => {
     return isPromise(valueOrPromise)
         ? valueOrPromise.then(thenFn)
@@ -476,79 +468,6 @@ function assertNumber(value1, text, ...parts) {
     }
 }
 
-let _locale = undefined;
-let localAsyncStore;
-if (isServer) {
-    import('node:async_hooks')
-        .then((module) => {
-        localAsyncStore = new module.AsyncLocalStorage();
-    })
-        .catch(() => {
-        // ignore if AsyncLocalStorage is not available
-    });
-}
-/**
- * Retrieve the current locale.
- *
- * If no current locale and there is no `defaultLocale` the function throws an error.
- *
- * @returns The locale.
- * @public
- */
-function getLocale(defaultLocale) {
-    // Prefer per-request locale from local AsyncLocalStorage if available (server-side)
-    if (localAsyncStore) {
-        const locale = localAsyncStore.getStore();
-        if (locale) {
-            return locale;
-        }
-    }
-    if (_locale === undefined) {
-        const ctx = tryGetInvokeContext();
-        if (ctx && ctx.$locale$) {
-            return ctx.$locale$;
-        }
-        if (defaultLocale !== undefined) {
-            return defaultLocale;
-        }
-        throw new Error('Reading `locale` outside of context.');
-    }
-    return _locale;
-}
-/**
- * Override the `getLocale` with `lang` within the `fn` execution.
- *
- * @public
- */
-function withLocale(locale, fn) {
-    if (localAsyncStore) {
-        return localAsyncStore.run(locale, fn);
-    }
-    const previousLang = _locale;
-    try {
-        _locale = locale;
-        return fn();
-    }
-    finally {
-        _locale = previousLang;
-    }
-}
-/**
- * Globally set a lang.
- *
- * This can be used only in browser. Server execution requires that each request could potentially
- * be a different lang, therefore setting a global lang would produce incorrect responses.
- *
- * @public
- */
-function setLocale(locale) {
-    if (localAsyncStore) {
-        localAsyncStore.enterWith(locale);
-        return;
-    }
-    _locale = locale;
-}
-
 /**
  * A friendly name tag for a VirtualVNode.
  *
@@ -781,16 +700,11 @@ function vnode_cloneElementWithNamespace(elementVNode, parentVNode, namespace, n
     }
     return rootElement;
 }
-function isSvg(tagOrVNode) {
-    return typeof tagOrVNode === 'string'
-        ? isSvgElement(tagOrVNode)
-        : (tagOrVNode.flags & 128 /* VNodeFlags.NS_svg */) !== 0;
-}
-function isMath(tagOrVNode) {
-    return typeof tagOrVNode === 'string'
-        ? isMathElement(tagOrVNode)
-        : (tagOrVNode.flags & 256 /* VNodeFlags.NS_math */) !== 0;
-}
+// reuse the same object to avoid creating new objects on every call
+const NEW_NAMESPACE_DATA = {
+    elementNamespace: HTML_NS,
+    elementNamespaceFlag: 0 /* VNodeFlags.NS_html */,
+};
 function getNewElementNamespaceData(domParentVNode, tagOrVNode) {
     const parentIsDefaultNamespace = domParentVNode
         ? !!vnode_getElementName(domParentVNode) && vnode_isDefaultNamespace(domParentVNode)
@@ -815,10 +729,28 @@ function getNewElementNamespaceData(domParentVNode, tagOrVNode) {
         elementNamespace = isParentSvg ? SVG_NS : isParentMath ? MATH_NS : HTML_NS;
         elementNamespaceFlag = domParentVNode.flags & 384 /* VNodeFlags.NAMESPACE_MASK */;
     }
-    return {
-        elementNamespace,
-        elementNamespaceFlag,
-    };
+    NEW_NAMESPACE_DATA.elementNamespace = elementNamespace;
+    NEW_NAMESPACE_DATA.elementNamespaceFlag = elementNamespaceFlag;
+    return NEW_NAMESPACE_DATA;
+}
+function isSvg(tagOrVNode) {
+    if (typeof tagOrVNode === 'string') {
+        return isSvgElement(tagOrVNode);
+    }
+    if (vnode_isElementVNode(tagOrVNode)) {
+        return (isSvgElement(vnode_getElementName(tagOrVNode)) || (tagOrVNode.flags & 128 /* VNodeFlags.NS_svg */) !== 0);
+    }
+    return false;
+}
+function isMath(tagOrVNode) {
+    if (typeof tagOrVNode === 'string') {
+        return isMathElement(tagOrVNode);
+    }
+    if (vnode_isElementVNode(tagOrVNode)) {
+        return (isMathElement(vnode_getElementName(tagOrVNode)) ||
+            (tagOrVNode.flags & 256 /* VNodeFlags.NS_math */) !== 0);
+    }
+    return false;
 }
 function getAttributeNamespace(attributeName) {
     switch (attributeName) {
@@ -854,18 +786,18 @@ class BackRef {
 }
 
 /** @internal */
-class VNode extends BackRef {
+class VNode {
     flags;
     parent;
     previousSibling;
     nextSibling;
     props;
+    [_EFFECT_BACK_REF] = undefined;
     slotParent = null;
     dirty = 0 /* ChoreBits.NONE */;
     dirtyChildren = null;
     nextDirtyChildIndex = 0;
     constructor(flags, parent, previousSibling, nextSibling, props) {
-        super();
         this.flags = flags;
         this.parent = parent;
         this.previousSibling = previousSibling;
@@ -877,22 +809,29 @@ class VNode extends BackRef {
         if (isDev) {
             return vnode_toString.call(this);
         }
-        return super.toString();
+        return Object.prototype.toString.call(this);
     }
 }
 
 /** @internal */
-class ElementVNode extends VNode {
+class VirtualVNode extends VNode {
     key;
     firstChild;
     lastChild;
-    node;
-    elementName;
-    constructor(key, flags, parent, previousSibling, nextSibling, props, firstChild, lastChild, node, elementName) {
+    constructor(key, flags, parent, previousSibling, nextSibling, props, firstChild, lastChild) {
         super(flags, parent, previousSibling, nextSibling, props);
         this.key = key;
         this.firstChild = firstChild;
         this.lastChild = lastChild;
+    }
+}
+
+/** @internal */
+class ElementVNode extends VirtualVNode {
+    node;
+    elementName;
+    constructor(key, flags, parent, previousSibling, nextSibling, props, firstChild, lastChild, node, elementName) {
+        super(key, flags, parent, previousSibling, nextSibling, props, firstChild, lastChild);
         this.node = node;
         this.elementName = elementName;
     }
@@ -911,19 +850,6 @@ class TextVNode extends VNode {
     }
 }
 
-/** @internal */
-class VirtualVNode extends VNode {
-    key;
-    firstChild;
-    lastChild;
-    constructor(key, flags, parent, previousSibling, nextSibling, props, firstChild, lastChild) {
-        super(flags, parent, previousSibling, nextSibling, props);
-        this.key = key;
-        this.firstChild = firstChild;
-        this.lastChild = lastChild;
-    }
-}
-
 /**
  * @file Cursor queue management for cursor-based scheduling.
  *
@@ -977,6 +903,7 @@ function getHighestPriorityCursor() {
 function pauseCursor(cursor, container) {
     pausedCursorQueue.push(cursor);
     removeCursorFromQueue(cursor, container, true);
+    container.$pausedCursorCount$++;
 }
 function resumeCursor(cursor, container) {
     const index = pausedCursorQueue.indexOf(cursor);
@@ -986,6 +913,7 @@ function resumeCursor(cursor, container) {
             pausedCursorQueue[index] = pausedCursorQueue[lastIndex];
         }
         pausedCursorQueue.pop();
+        container.$pausedCursorCount$--;
     }
     addCursorToQueue(container, cursor);
 }
@@ -995,9 +923,6 @@ function resumeCursor(cursor, container) {
  * @param cursor - The cursor to remove
  */
 function removeCursorFromQueue(cursor, container, keepCursorFlag) {
-    if (container.$cursorCount$ > 0) {
-        container.$cursorCount$--;
-    }
     if (!keepCursorFlag) {
         cursor.flags &= -65 /* VNodeFlags.Cursor */;
     }
@@ -1011,6 +936,7 @@ function removeCursorFromQueue(cursor, container, keepCursorFlag) {
         // }
         // globalCursorQueue.pop();
         globalCursorQueue.splice(index, 1);
+        container.$cursorCount$--;
     }
 }
 
@@ -1117,7 +1043,35 @@ class SignalImpl {
         this.$untrackedValue$ = value;
     }
     get value() {
-        return setupSignalValueAccess(this, () => (this.$effects$ ||= new Set()), () => this.untrackedValue);
+        const ctx = tryGetInvokeContext();
+        if (!ctx) {
+            return this.untrackedValue;
+        }
+        if (this.$container$ === null) {
+            if (!ctx.$container$) {
+                return this.untrackedValue;
+            }
+            // Grab the container now we have access to it
+            this.$container$ = ctx.$container$;
+        }
+        else {
+            isDev &&
+                assertTrue(!ctx.$container$ || ctx.$container$ === this.$container$, 'Do not use signals across containers');
+        }
+        const effectSubscriber = ctx.$effectSubscriber$;
+        if (effectSubscriber) {
+            // Let's make sure that we have a reference to this effect.
+            // Adding reference is essentially adding a subscription, so if the signal
+            // changes we know who to notify.
+            ensureContainsSubscription((this.$effects$ ||= new Set()), effectSubscriber);
+            // But when effect is scheduled in needs to be able to know which signals
+            // to unsubscribe from. So we need to store the reference from the effect back
+            // to this signal.
+            ensureContainsBackRef(effectSubscriber, this);
+            (import.meta.env.TEST ? !isDomContainer(this.$container$) : isServer) &&
+                addQrlToSerializationCtx(effectSubscriber, this.$container$);
+        }
+        return this.untrackedValue;
     }
     set value(value) {
         if (value !== this.$untrackedValue$) {
@@ -1135,7 +1089,7 @@ class SignalImpl {
         if (isDev) {
             return (`[${this.constructor.name}${this.$flags$ & 1 /* SignalFlags.INVALID */ ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
                 (Array.from(this.$effects$ || [])
-                    .map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    '))
+                    .map((e) => '\n -> ' + pad(qwikDebugToString(e.consumer), '    '))
                     .join('\n') || ''));
         }
         else {
@@ -1146,34 +1100,33 @@ class SignalImpl {
         return { value: this.$untrackedValue$ };
     }
 }
-const addEffect = (signal, effectSubscriber, effects) => {
-    // Let's make sure that we have a reference to this effect.
-    // Adding reference is essentially adding a subscription, so if the signal
-    // changes we know who to notify.
-    ensureContainsSubscription(effects, effectSubscriber);
-    // But when effect is scheduled in needs to be able to know which signals
-    // to unsubscribe from. So we need to store the reference from the effect back
-    // to this signal.
-    ensureContainsBackRef(effectSubscriber, signal);
-    addQrlToSerializationCtx(effectSubscriber, signal.$container$);
-};
 const setupSignalValueAccess = (target, effectsFn, returnValueFn) => {
     const ctx = tryGetInvokeContext();
-    if (ctx) {
-        if (target.$container$ === null) {
-            if (!ctx.$container$) {
-                return returnValueFn();
-            }
-            // Grab the container now we have access to it
-            target.$container$ = ctx.$container$;
+    if (!ctx) {
+        return returnValueFn();
+    }
+    if (target.$container$ === null) {
+        if (!ctx.$container$) {
+            return returnValueFn();
         }
-        else {
+        // Grab the container now we have access to it
+        target.$container$ = ctx.$container$;
+    }
+    else {
+        isDev &&
             assertTrue(!ctx.$container$ || ctx.$container$ === target.$container$, 'Do not use signals across containers');
-        }
-        const effectSubscriber = ctx.$effectSubscriber$;
-        if (effectSubscriber) {
-            addEffect(target, effectSubscriber, effectsFn());
-        }
+    }
+    const effectSubscriber = ctx.$effectSubscriber$;
+    if (effectSubscriber) {
+        // Let's make sure that we have a reference to this effect.
+        // Adding reference is essentially adding a subscription, so if the signal
+        // changes we know who to notify.
+        ensureContainsSubscription(effectsFn(), effectSubscriber);
+        // But when effect is scheduled in needs to be able to know which signals
+        // to unsubscribe from. So we need to store the reference from the effect back
+        // to this signal.
+        ensureContainsBackRef(effectSubscriber, target);
+        addQrlToSerializationCtx(effectSubscriber, target.$container$);
     }
     return returnValueFn();
 };
@@ -1203,9 +1156,13 @@ const _UNINITIALIZED = Symbol('UNINITIALIZED');
  */
 const EVENT_SUFFIX = '$';
 const isHtmlAttributeAnEventName = (name) => {
-    return (name.startsWith("on:" /* EventNameHtmlScope.on */) ||
-        name.startsWith("on-window:" /* EventNameHtmlScope.window */) ||
-        name.startsWith("on-document:" /* EventNameHtmlScope.document */));
+    if (name.charCodeAt(0) !== 111 /* o */ || name.charCodeAt(1) !== 110 /* n */) {
+        return false;
+    }
+    if (name.charCodeAt(2) === 58 /* : */) {
+        return true; // on:
+    }
+    return name.startsWith("on-window:" /* EventNameHtmlScope.window */) || name.startsWith("on-document:" /* EventNameHtmlScope.document */);
 };
 function jsxEventToHtmlAttribute(jsxEvent) {
     if (jsxEvent.endsWith(EVENT_SUFFIX)) {
@@ -1431,7 +1388,8 @@ const addPropsProxyEffect = (propsProxy, prop) => {
             }
         }
         else {
-            assertTrue(!ctx.$container$ || ctx.$container$ === propsProxy.$container$, 'Do not use props across containers');
+            isDev &&
+                assertTrue(!ctx.$container$ || ctx.$container$ === propsProxy.$container$, 'Do not use props across containers');
         }
     }
     const effectSubscriber = ctx?.$effectSubscriber$;
@@ -1444,6 +1402,7 @@ const triggerPropsProxyEffect = (propsProxy, prop) => {
     if (effects) {
         scheduleEffects(propsProxy.$container$, propsProxy, effects);
     }
+    return !!effects;
 };
 function getEffects$1(effects, prop) {
     // TODO: Handle STORE_ALL_PROPS
@@ -1493,30 +1452,6 @@ const cleanupDestroyable = (destroyable) => {
     }
 };
 
-function getSubscriber(effect, prop, data) {
-    if (!effect[_EFFECT_BACK_REF]) {
-        if (isServer && isSsrNode(effect)) {
-            effect.setProp(QBackRefs, new Map());
-        }
-        else {
-            effect[_EFFECT_BACK_REF] = new Map();
-        }
-    }
-    const subMap = effect[_EFFECT_BACK_REF];
-    let sub = subMap.get(prop);
-    if (!sub) {
-        sub = [effect, prop];
-        subMap.set(prop, sub);
-    }
-    if (data) {
-        sub[3 /* EffectSubscriptionProp.DATA */] = data;
-    }
-    return sub;
-}
-function isSsrNode(value) {
-    return '__brand__' in value && value.__brand__ === 'SsrNode';
-}
-
 /**
  * # ================================
  *
@@ -1529,6 +1464,54 @@ function isSsrNode(value) {
  * "marked as dirty" flag.
  */
 const NEEDS_COMPUTATION = Symbol('invalid');
+/**
+ * An effect consumer plus type of effect, back references to producers and additional data
+ *
+ * An effect can be trigger by one or more of signal inputs. The first step of re-running an effect
+ * is to clear its subscriptions so that the effect can re add new set of subscriptions. In order to
+ * clear the subscriptions we need to store them here.
+ *
+ * Imagine you have effect such as:
+ *
+ * ```
+ * function effect1() {
+ *   console.log(signalA.value ? signalB.value : 'default');
+ * }
+ * ```
+ *
+ * In the above case the `signalB` needs to be unsubscribed when `signalA` is falsy. We do this by
+ * always clearing all of the subscriptions
+ *
+ * The `EffectSubscription` stores
+ *
+ * ```
+ * subscription1 = [effectConsumer1, EffectProperty.COMPONENT, Set[(signalA, signalB)]];
+ * ```
+ *
+ * The `signal1` and `signal2` back references are needed to "clear" existing subscriptions.
+ *
+ * Both `signalA` as well as `signalB` will have a reference to `subscription` to the so that the
+ * effect can be scheduled if either `signalA` or `signalB` triggers. The `subscription1` is shared
+ * between the signals.
+ *
+ * The second position `EffectProperty|string` store the property name of the effect.
+ *
+ * - Property name of the VNode
+ * - `EffectProperty.COMPONENT` if component
+ * - `EffectProperty.VNODE` if VNode
+ */
+class EffectSubscription {
+    consumer;
+    property;
+    backRef;
+    data;
+    constructor(consumer, property, backRef = null, data = null) {
+        this.consumer = consumer;
+        this.property = property;
+        this.backRef = backRef;
+        this.data = data;
+    }
+}
 /**
  * # ================================
  *
@@ -1540,6 +1523,30 @@ const STORE_TARGET = Symbol('store.target');
 const STORE_HANDLER = Symbol('store.handler');
 const STORE_ALL_PROPS = Symbol('store.all');
 
+function getSubscriber(effect, prop, data) {
+    if (!effect[_EFFECT_BACK_REF]) {
+        if (isServer && isSsrNode(effect)) {
+            effect.setProp(QBackRefs, new Map());
+        }
+        else {
+            effect[_EFFECT_BACK_REF] = new Map();
+        }
+    }
+    const subMap = effect[_EFFECT_BACK_REF];
+    let sub = subMap.get(prop);
+    if (!sub) {
+        sub = new EffectSubscription(effect, prop);
+        subMap.set(prop, sub);
+    }
+    if (data) {
+        sub.data = data;
+    }
+    return sub;
+}
+function isSsrNode(value) {
+    return '__brand__' in value && value.__brand__ === 'SsrNode';
+}
+
 const trackFn = (target, container) => (obj, prop) => {
     const ctx = newInvokeContext();
     ctx.$effectSubscriber$ = getSubscriber(target, ":" /* EffectProperty.COMPONENT */);
@@ -1639,7 +1646,7 @@ class ComputedSignalImpl extends SignalImpl {
     }
     get untrackedValue() {
         this.$computeIfNeeded$();
-        assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
+        isDev && assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
         return this.$untrackedValue$;
     }
     $computeIfNeeded$() {
@@ -1650,7 +1657,11 @@ class ComputedSignalImpl extends SignalImpl {
         throwIfQRLNotResolved(computeQrl);
         const ctx = tryGetInvokeContext();
         const previousEffectSubscription = ctx?.$effectSubscriber$;
-        ctx && (ctx.$effectSubscriber$ = getSubscriber(this, "." /* EffectProperty.VNODE */));
+        if (ctx) {
+            const effectSubscriber = getSubscriber(this, "." /* EffectProperty.VNODE */);
+            clearEffectSubscription(this.$container$, effectSubscriber);
+            ctx.$effectSubscriber$ = effectSubscriber;
+        }
         try {
             const untrackedValue = computeQrl.getFn(ctx)();
             if (isPromise(untrackedValue)) {
@@ -1993,7 +2004,7 @@ const _wrapProp = (...args) => {
     }
     if (isSignal(obj)) {
         if (!(obj instanceof AsyncComputedSignalImpl)) {
-            assertEqual(prop, 'value', 'Left side is a signal, prop must be value');
+            isDev && assertEqual(prop, 'value', 'Left side is a signal, prop must be value');
         }
         if (obj instanceof WrappedSignalImpl && obj.$flags$ & 4 /* WrappedSignalFlags.UNWRAP */) {
             return obj;
@@ -2003,11 +2014,11 @@ const _wrapProp = (...args) => {
     if (isPropsProxy(obj)) {
         const constProps = obj[_CONST_PROPS];
         const varProps = obj[_VAR_PROPS];
-        if (constProps && prop in constProps) {
+        if (constProps && Object.prototype.hasOwnProperty.call(constProps, prop)) {
             // Const props don't need wrapping
             return constProps[prop];
         }
-        else if (prop in varProps) {
+        else if (Object.prototype.hasOwnProperty.call(varProps, prop)) {
             const value = varProps[prop];
             return wrapIfNotSignal(value, args);
         }
@@ -2086,7 +2097,7 @@ class WrappedSignalImpl extends SignalImpl {
     }
     get untrackedValue() {
         this.$computeIfNeeded$();
-        assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
+        isDev && assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
         return this.$untrackedValue$;
     }
     $computeIfNeeded$() {
@@ -2137,17 +2148,18 @@ function clearAllEffects(container, consumer) {
     effects.clear();
 }
 function clearEffectSubscription(container, effect) {
-    const backRefs = effect[2 /* EffectSubscriptionProp.BACK_REF */];
+    const backRefs = effect.backRef;
     if (!backRefs) {
         return;
     }
     for (const producer of backRefs) {
-        if (producer instanceof SignalImpl) {
-            clearSignal(container, producer, effect);
-        }
-        else if (producer instanceof AsyncComputedSignalImpl) {
+        // Check AsyncComputedSignalImpl before SignalImpl since it extends SignalImpl
+        if (producer instanceof AsyncComputedSignalImpl) {
             clearAsyncComputedSignal(producer, effect);
         }
+        else if (producer instanceof SignalImpl) {
+            clearSignal(container, producer, effect);
+        }
         else if (isPropsProxy(producer)) {
             const propsHandler = producer[_PROPS_HANDLER];
             clearStoreOrProps(propsHandler, effect);
@@ -2165,7 +2177,8 @@ function clearSignal(container, producer, effect) {
     if (effects && effects.has(effect)) {
         effects.delete(effect);
     }
-    if (producer instanceof WrappedSignalImpl) {
+    if (producer instanceof WrappedSignalImpl && !effects?.size) {
+        // Only clear if there are no more subscribers
         producer.$hostElement$ = undefined;
         clearAllEffects(container, producer);
     }
@@ -2221,15 +2234,17 @@ const useLexicalScope = () => {
     let qrl = context.$qrl$;
     if (!qrl) {
         const el = context.$hostElement$ instanceof ElementVNode ? context.$hostElement$.node : undefined;
-        assertDefined(el, 'invoke: element must be defined inside useLexicalScope()', context);
+        isDev && assertDefined(el, 'invoke: element must be defined inside useLexicalScope()', context);
         const containerElement = _getQContainerElement(el);
-        assertDefined(containerElement, `invoke: cant find parent q:container of`, el);
+        isDev && assertDefined(containerElement, `invoke: cant find parent q:container of`, el);
         const container = getDomContainer(containerElement);
+        context.$container$ ||= container;
         qrl = container.parseQRL(decodeURIComponent(String(context.$url$)));
     }
     else {
-        assertQrl(qrl);
-        assertDefined(qrl.$captureRef$, 'invoke: qrl $captureRef$ must be defined inside useLexicalScope()', qrl);
+        isDev && assertQrl(qrl);
+        isDev &&
+            assertDefined(qrl.$captureRef$, 'invoke: qrl $captureRef$ must be defined inside useLexicalScope()', qrl);
     }
     return qrl.$captureRef$;
 };
@@ -2253,85 +2268,30 @@ const _chk = (_, element) => {
     signal.value = element.checked;
 };
 
-const _hasOwnProperty$1 = Object.prototype.hasOwnProperty;
-const BIND_VALUE = 'bind:value';
-const BIND_CHECKED = 'bind:checked';
+const _hasOwnProperty$2 = Object.prototype.hasOwnProperty;
 // TODO store props as the arrays the vnodes also use?
 class JSXNodeImpl {
     type;
+    children;
     toSort;
     key;
     varProps;
     constProps;
-    children;
     dev;
     _proxy = null;
     constructor(type, varProps, constProps, children, key, toSort, dev) {
         this.type = type;
+        this.children = children;
         this.toSort = !!toSort;
-        this.key = key == null ? null : String(key);
+        this.key = key === null || key === undefined ? null : typeof key === 'string' ? key : '' + key;
         this.varProps = !varProps || isEmpty(varProps) ? EMPTY_OBJ : varProps;
         this.constProps = !constProps || isEmpty(constProps) ? null : constProps;
-        this.children = children;
         if (qDev && dev) {
             this.dev = {
                 ...dev,
                 stack: new Error().stack?.split('\n').slice(2).join('\n'),
             };
         }
-        if (typeof type === 'string') {
-            // convert onEvent$ to on:event
-            for (const k in this.constProps) {
-                const attr = jsxEventToHtmlAttribute(k);
-                if (attr) {
-                    mergeHandlers(this.constProps, attr, this.constProps[k]);
-                    delete this.constProps[k];
-                }
-            }
-            for (const k in this.varProps) {
-                const attr = jsxEventToHtmlAttribute(k);
-                if (attr) {
-                    // constProps always wins
-                    if (!constProps || !_hasOwnProperty$1.call(constProps, k)) {
-                        toSort = mergeHandlers(this.varProps, attr, this.varProps[k]) || toSort;
-                    }
-                    delete this.varProps[k];
-                }
-            }
-            // bind:*
-            if (_hasOwnProperty$1.call(this.varProps, BIND_CHECKED)) {
-                toSort = handleBindProp(this.varProps, BIND_CHECKED) || toSort;
-            }
-            else if (_hasOwnProperty$1.call(this.varProps, BIND_VALUE)) {
-                toSort = handleBindProp(this.varProps, BIND_VALUE) || toSort;
-            }
-            else if (this.constProps) {
-                if (_hasOwnProperty$1.call(this.constProps, BIND_CHECKED)) {
-                    handleBindProp(this.constProps, BIND_CHECKED);
-                }
-                else {
-                    if (_hasOwnProperty$1.call(this.constProps, BIND_VALUE)) {
-                        handleBindProp(this.constProps, BIND_VALUE);
-                    }
-                }
-            }
-            if (_hasOwnProperty$1.call(this.varProps, 'className')) {
-                this.varProps.class = this.varProps.className;
-                this.varProps.className = undefined;
-                toSort = true;
-                if (qDev) {
-                    logOnceWarn(`jsx${dev ? ` ${dev.fileName}${dev?.lineNumber ? `:${dev.lineNumber}` : ''}` : ''}: \`className\` is deprecated. Use \`class\` instead.`);
-                }
-            }
-            // TODO let the optimizer do this instead
-            if (this.constProps && _hasOwnProperty$1.call(this.constProps, 'className')) {
-                this.constProps.class = this.constProps.className;
-                this.constProps.className = undefined;
-                if (qDev) {
-                    logOnceWarn(`jsx${dev ? ` ${dev.fileName}${dev?.lineNumber ? `:${dev.lineNumber}` : ''}` : ''}: \`className\` is deprecated. Use \`class\` instead.`);
-                }
-            }
-        }
         seal(this);
     }
     get props() {
@@ -2362,9 +2322,9 @@ const isJSXNode = (n) => {
             return true;
         }
         if (isObject(n) &&
-            _hasOwnProperty$1.call(n, 'key') &&
-            _hasOwnProperty$1.call(n, 'props') &&
-            _hasOwnProperty$1.call(n, 'type')) {
+            _hasOwnProperty$2.call(n, 'key') &&
+            _hasOwnProperty$2.call(n, 'props') &&
+            _hasOwnProperty$2.call(n, 'type')) {
             logWarn(`Duplicate implementations of "JSXNode" found`);
             return true;
         }
@@ -2375,29 +2335,12 @@ const isJSXNode = (n) => {
     }
 };
 const isEmpty = (obj) => {
-    for (const prop in obj) {
-        if (obj[prop] !== undefined) {
-            return false;
-        }
-    }
-    return true;
-};
-const handleBindProp = (props, prop) => {
-    const value = props[prop];
-    props[prop] = undefined;
-    if (value) {
-        if (prop === BIND_CHECKED) {
-            props.checked = value;
-            props['on:input'] = createQRL(null, '_chk', _chk, null, null, [value]);
-        }
-        else {
-            props.value = value;
-            props['on:input'] = createQRL(null, '_val', _val, null, null, [value]);
-        }
-        return true;
-    }
+    return Object.keys(obj).length === 0;
 };
 
+const BIND_VALUE = 'bind:value';
+const BIND_CHECKED = 'bind:checked';
+const _hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 /**
  * Create a JSXNode with the properties fully split into variable and constant parts, and children
  * separated out. Furthermore, the varProps must be a sorted object, that is, the keys must be
@@ -2415,7 +2358,7 @@ const handleBindProp = (props, prop) => {
  * @internal
  */
 const _jsxSorted = (type, varProps, constProps, children, flags, key, dev) => {
-    return untrack(() => new JSXNodeImpl(type, varProps, constProps, children, key, false, dev));
+    return new JSXNodeImpl(type, varProps, constProps, children, key, false, dev);
 };
 /**
  * Create a JSXNode, with the properties split into variable and constant parts, but the variable
@@ -2434,24 +2377,158 @@ const _jsxSorted = (type, varProps, constProps, children, flags, key, dev) => {
  * @internal
  */
 const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
-    return untrack(() => {
+    let toSort = false;
+    let constPropsCopied = false;
+    let varPropsCopied = false;
+    let bindValueSignal = null;
+    let bindCheckedSignal = null;
+    // Apply transformations for native HTML elements only
+    if (typeof type === 'string') {
+        // Transform event names (onClick$ -> on:click)
+        if (constProps) {
+            const processedKeys = new Set();
+            for (const k in constProps) {
+                const attr = jsxEventToHtmlAttribute(k);
+                if (attr) {
+                    if (!constPropsCopied) {
+                        constProps = { ...constProps };
+                        constPropsCopied = true;
+                    }
+                    if (!_hasOwnProperty$1.call(constProps, attr) || processedKeys.has(attr)) {
+                        constProps[attr] = constProps[k];
+                    }
+                    delete constProps[k];
+                }
+                processedKeys.add(k);
+            }
+        }
         if (varProps) {
+            const processedKeys = new Set();
             for (const k in varProps) {
-                if (k === 'children') {
-                    children ||= varProps.children;
-                    delete varProps.children;
+                const attr = jsxEventToHtmlAttribute(k);
+                if (attr) {
+                    if (!varPropsCopied) {
+                        varProps = { ...varProps };
+                        varPropsCopied = true;
+                    }
+                    // Transform event name in place
+                    if (!_hasOwnProperty$1.call(varProps, attr) || processedKeys.has(attr)) {
+                        varProps[attr] = varProps[k];
+                    }
+                    delete varProps[k];
+                    toSort = true;
+                }
+                else if (k === BIND_CHECKED) {
+                    // Set flag, will process after walk
+                    bindCheckedSignal = varProps[k];
+                }
+                else if (k === BIND_VALUE) {
+                    // Set flag, will process after walk
+                    bindValueSignal = varProps[k];
+                }
+                processedKeys.add(k);
+            }
+            // Handle bind:* - only in varProps, bind:* should be moved to varProps
+            if (bindCheckedSignal || bindValueSignal) {
+                if (!varPropsCopied) {
+                    varProps = { ...varProps };
+                    varPropsCopied = true;
+                }
+                if (bindCheckedSignal) {
+                    delete varProps[BIND_CHECKED];
+                    varProps.checked = bindCheckedSignal;
+                    const handler = createQRL(null, '_chk', _chk, null, null, [bindCheckedSignal]);
+                    // Move on:input from constProps if it exists
+                    if (constProps && _hasOwnProperty$1.call(constProps, 'on:input')) {
+                        if (!constPropsCopied) {
+                            constProps = { ...constProps };
+                            constPropsCopied = true;
+                        }
+                        const existingHandler = constProps['on:input'];
+                        delete constProps['on:input'];
+                        toSort = mergeHandlers(varProps, 'on:input', existingHandler) || toSort;
+                    }
+                    toSort = mergeHandlers(varProps, 'on:input', handler) || toSort;
+                }
+                else if (bindValueSignal) {
+                    delete varProps[BIND_VALUE];
+                    varProps.value = bindValueSignal;
+                    const handler = createQRL(null, '_val', _val, null, null, [bindValueSignal]);
+                    // Move on:input from constProps if it exists
+                    if (constProps && _hasOwnProperty$1.call(constProps, 'on:input')) {
+                        if (!constPropsCopied) {
+                            constProps = { ...constProps };
+                            constPropsCopied = true;
+                        }
+                        const existingHandler = constProps['on:input'];
+                        delete constProps['on:input'];
+                        toSort = mergeHandlers(varProps, 'on:input', existingHandler) || toSort;
+                    }
+                    toSort = mergeHandlers(varProps, 'on:input', handler) || toSort;
+                }
+            }
+        }
+        // Transform className -> class
+        if (varProps && _hasOwnProperty$1.call(varProps, 'className')) {
+            if (!varPropsCopied) {
+                varProps = { ...varProps };
+                varPropsCopied = true;
+            }
+            varProps.class = varProps.className;
+            varProps.className = undefined;
+            toSort = true;
+            if (qDev) {
+                logOnceWarn(`jsx${dev ? ` ${dev.fileName}${dev?.lineNumber ? `:${dev.lineNumber}` : ''}` : ''}: \`className\` is deprecated. Use \`class\` instead.`);
+            }
+        }
+        if (constProps && _hasOwnProperty$1.call(constProps, 'className')) {
+            if (!constPropsCopied) {
+                constProps = { ...constProps };
+                constPropsCopied = true;
+            }
+            constProps.class = constProps.className;
+            constProps.className = undefined;
+            if (qDev) {
+                logOnceWarn(`jsx${dev ? ` ${dev.fileName}${dev?.lineNumber ? `:${dev.lineNumber}` : ''}` : ''}: \`className\` is deprecated. Use \`class\` instead.`);
+            }
+        }
+    }
+    if (varProps) {
+        for (const k in varProps) {
+            if (k === 'children') {
+                if (!varPropsCopied) {
+                    varProps = { ...varProps };
+                    varPropsCopied = true;
                 }
-                else if (k === 'key') {
-                    key ||= varProps.key;
-                    delete varProps.key;
+                children ||= varProps.children;
+                delete varProps.children;
+            }
+            else if (k === 'key') {
+                if (!varPropsCopied) {
+                    varProps = { ...varProps };
+                    varPropsCopied = true;
                 }
-                else if (constProps && k in constProps) {
-                    delete varProps[k];
+                key ||= varProps.key;
+                delete varProps.key;
+            }
+            else if (constProps && k in constProps) {
+                if (!varPropsCopied) {
+                    varProps = { ...varProps };
+                    varPropsCopied = true;
+                }
+                delete varProps[k];
+            }
+            else if (varProps[k] === null) {
+                if (!varPropsCopied) {
+                    varProps = { ...varProps };
+                    varPropsCopied = true;
                 }
+                // Clean up null markers (from event conversions)
+                delete varProps[k];
             }
         }
-        return new JSXNodeImpl(type, varProps, constProps, children, key, true, dev);
-    });
+    }
+    return new JSXNodeImpl(type, varProps, constProps, children, key, toSort || true, dev);
 };
 /** @internal @deprecated v1 compat */
 const _jsxC = (type, mutable, _flags, key) => jsx(type, mutable, key);
@@ -2547,7 +2624,7 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
     let isInlineComponent = false;
     if (componentQRL === null) {
         componentQRL = container.getHostProp(renderHost, OnRenderProp);
-        assertDefined(componentQRL, 'No Component found at this location');
+        isDev && assertDefined(componentQRL, 'No Component found at this location');
     }
     if (isQrl(componentQRL)) {
         props = props || container.getHostProp(renderHost, ELEMENT_PROPS) || EMPTY_OBJ;
@@ -2566,6 +2643,7 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         const inlineComponent = componentQRL;
         componentFn = () => invokeApply(iCtx, inlineComponent, [props || EMPTY_OBJ]);
     }
+    const isSsr = import.meta.env.TEST ? isServerPlatform() : isServer;
     const executeComponentWithPromiseExceptionRetry = (retryCount = 0) => safeCall(() => {
         if (!isInlineComponent) {
             container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
@@ -2576,6 +2654,19 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         }
         return maybeThen(componentFn(props), (jsx) => maybeThen(iCtx.$waitOn$, () => jsx));
     }, (jsx) => {
+        // In SSR, check if the component was marked dirty (COMPONENT bit) during execution.
+        // This happens when something completes and updates reactive primitives
+        // while we're waiting on $waitOn$. If so, we need to re-execute the component
+        // to get fresh JSX with updated values.
+        if (isSsr && !isInlineComponent) {
+            const ssrNode = renderHost;
+            if (ssrNode.dirty & 4 /* ChoreBits.COMPONENT */) {
+                ssrNode.dirty &= ~4 /* ChoreBits.COMPONENT */;
+                if (retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
+                    return executeComponentWithPromiseExceptionRetry(retryCount + 1);
+                }
+            }
+        }
         const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL);
         if (useOnEvents) {
             return addUseOnEvents(jsx, useOnEvents);
@@ -2744,7 +2835,7 @@ function injectPlaceholderElement(jsx) {
         return [placeholder, jsx];
     }
     // For primitives, we can't add children, so we wrap them in a fragment.
-    if (isPrimitive(jsx)) {
+    if (isPrimitiveOrNullUndefined(jsx)) {
         const placeholder = createPlaceholderScriptNode();
         return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
     }
@@ -2758,7 +2849,7 @@ function injectPlaceholderElement(jsx) {
 }
 /** @returns An empty <script> element for adding qwik metadata attributes to */
 function createPlaceholderScriptNode() {
-    return new JSXNodeImpl('script', null, { hidden: '' });
+    return new JSXNodeImpl('script', null, { hidden: '' }, null, null);
 }
 
 /**
@@ -2874,15 +2965,12 @@ const _restProps = (props, omit = [], target = {}) => {
             varPropsTarget[key] = varProps[key];
         }
     }
-    return createPropsProxy(new JSXNodeImpl(null, varPropsTarget, constPropsTarget));
+    return createPropsProxy(new JSXNodeImpl(null, varPropsTarget, constPropsTarget, null, null));
 };
 
 const styleContent = (styleId) => {
     return ComponentStylesPrefixContent + styleId;
 };
-function hasClassAttr(props) {
-    return 'class' in props;
-}
 function isClassAttr(key) {
     return key === 'class';
 }
@@ -3048,132 +3136,22 @@ function isEnumeratedBooleanAttribute(key) {
     return isAriaAttribute(key) || ['spellcheck', 'draggable', 'contenteditable'].includes(key);
 }
 const setValueForStyle = (styleName, value) => {
-    if (typeof value === 'number' && value !== 0 && !isUnitlessNumber(styleName)) {
-        return value + 'px';
-    }
-    return value;
-};
-function isAriaAttribute(prop) {
-    return prop.startsWith('aria-');
-}
-const styleKey = (qStyles, index) => {
-    assertQrl(qStyles);
-    return `${hashCode(qStyles.$hash$)}-${index}`;
-};
-
-/**
- * @internal
- * The storage provider for hooks. Each invocation increases index i. Data is stored in an array.
- */
-const useSequentialScope = () => {
-    const iCtx = useInvokeContext();
-    const hostElement = iCtx.$hostElement$;
-    const host = hostElement;
-    let seq = iCtx.$container$.getHostProp(host, ELEMENT_SEQ);
-    if (seq === null) {
-        seq = [];
-        iCtx.$container$.setHostProp(host, ELEMENT_SEQ, seq);
-    }
-    let seqIdx = iCtx.$container$.getHostProp(host, ELEMENT_SEQ_IDX);
-    if (seqIdx === null) {
-        seqIdx = 0;
-    }
-    iCtx.$container$.setHostProp(host, ELEMENT_SEQ_IDX, seqIdx + 1);
-    while (seq.length <= seqIdx) {
-        seq.push(undefined);
-    }
-    const set = (value) => {
-        if (qDev && qSerialize) {
-            verifySerializable(value);
-        }
-        return (seq[seqIdx] = value);
-    };
-    return {
-        val: seq[seqIdx],
-        set,
-        i: seqIdx,
-        iCtx,
-    };
-};
-
-/** @internal */
-const useTaskQrl = (qrl, opts) => {
-    const { val, set, iCtx, i } = useSequentialScope();
-    if (val) {
-        return;
-    }
-    assertQrl(qrl);
-    set(1);
-    const taskFlags = 
-    // enabled by default
-    opts?.deferUpdates === false ? 0 : 16 /* TaskFlags.RENDER_BLOCKING */;
-    const task = new Task(8 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */ | taskFlags, i, iCtx.$hostElement$, qrl, undefined, null);
-    // In V2 we add the task to the sequential scope. We need to do this
-    // in order to be able to retrieve it later when the parent element is
-    // deleted and we need to be able to release the task subscriptions.
-    set(task);
-    const container = iCtx.$container$;
-    const { $waitOn$: waitOn } = iCtx;
-    const result = maybeThen(waitOn, () => runTask(task, container, iCtx.$hostElement$));
-    if (isPromise(result)) {
-        iCtx.$waitOn$ = result;
-    }
-};
-const runTask = (task, container, host) => {
-    task.$flags$ &= -9 /* TaskFlags.DIRTY */;
-    cleanupDestroyable(task);
-    const iCtx = newInvokeContext(container.$locale$, host, TaskEvent);
-    iCtx.$container$ = container;
-    const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
-    const track = trackFn(task, container);
-    const [cleanup] = cleanupFn(task, (reason) => container.handleError(reason, host));
-    const taskApi = { track, cleanup };
-    return safeCall(() => taskFn(taskApi), cleanup, (err) => {
-        // If a Promise is thrown, that means we need to re-run the task.
-        if (isPromise(err)) {
-            return err.then(() => runTask(task, container, host));
-        }
-        else {
-            container.handleError(err, host);
-        }
-    });
-};
-class Task extends BackRef {
-    $flags$;
-    $index$;
-    $el$;
-    $qrl$;
-    $state$;
-    $destroy$;
-    constructor($flags$, $index$, $el$, $qrl$, $state$, $destroy$) {
-        super();
-        this.$flags$ = $flags$;
-        this.$index$ = $index$;
-        this.$el$ = $el$;
-        this.$qrl$ = $qrl$;
-        this.$state$ = $state$;
-        this.$destroy$ = $destroy$;
+    if (typeof value === 'number' && value !== 0 && !isUnitlessNumber(styleName)) {
+        return value + 'px';
     }
-}
-/** @internal */
-const isTask = (value) => {
-    return value instanceof Task;
+    return value;
 };
-/**
- * Used internally as a qrl event handler to schedule a task.
- *
- * @internal
- */
-const scheduleTask = (_event, element) => {
-    const [task] = useLexicalScope();
-    const container = getDomContainer(element);
-    task.$flags$ |= 8 /* TaskFlags.DIRTY */;
-    markVNodeDirty(container, task.$el$, 1 /* ChoreBits.TASKS */);
+function isAriaAttribute(prop) {
+    return prop.startsWith('aria-');
+}
+const styleKey = (qStyles, index) => {
+    assertQrl(qStyles);
+    return `${hashCode(qStyles.$hash$)}-${index}`;
 };
 
 /** @internal */
 const mapApp_findIndx = (array, key, start) => {
-    assertTrue(start % 2 === 0, 'Expecting even number.');
+    isDev && assertTrue(start % 2 === 0, 'Expecting even number.');
     let bottom = start >> 1;
     let top = (array.length - 2) >> 1;
     while (bottom <= top) {
@@ -3220,6 +3198,127 @@ const mapArray_has = (array, key, start) => {
     return mapApp_findIndx(array, key, start) >= 0;
 };
 
+class DeleteOperation {
+    target;
+    constructor(target) {
+        this.target = target;
+    }
+}
+class RemoveAllChildrenOperation {
+    target;
+    constructor(target) {
+        this.target = target;
+    }
+}
+class SetTextOperation {
+    target;
+    text;
+    operationType = 16 /* VNodeOperationType.SetText */;
+    constructor(target, text) {
+        this.target = target;
+        this.text = text;
+    }
+}
+class InsertOrMoveOperation {
+    target;
+    parent;
+    beforeTarget;
+    constructor(target, parent, beforeTarget) {
+        this.target = target;
+        this.parent = parent;
+        this.beforeTarget = beforeTarget;
+    }
+}
+class SetAttributeOperation {
+    target;
+    attrName;
+    attrValue;
+    scopedStyleIdPrefix;
+    isSvg;
+    constructor(target, attrName, attrValue, scopedStyleIdPrefix, isSvg) {
+        this.target = target;
+        this.attrName = attrName;
+        this.attrValue = attrValue;
+        this.scopedStyleIdPrefix = scopedStyleIdPrefix;
+        this.isSvg = isSvg;
+    }
+}
+/** Factory functions to create operations with consistent hidden classes. */
+const createDeleteOperation = (target) => new DeleteOperation(target);
+const createRemoveAllChildrenOperation = (target) => new RemoveAllChildrenOperation(target);
+const createSetTextOperation = (target, text) => new SetTextOperation(target, text);
+const createInsertOrMoveOperation = (target, parent, beforeTarget) => new InsertOrMoveOperation(target, parent, beforeTarget);
+const createSetAttributeOperation = (target, attrName, attrValue, scopedStyleIdPrefix = null, isSvg = false) => new SetAttributeOperation(target, attrName, attrValue, scopedStyleIdPrefix, isSvg);
+
+function callQrl(container, host, qrl, event, element, useGetObjectById) {
+    const getObjectById = useGetObjectById ? container?.$getObjectById$ || null : null;
+    const singleItem = vnode_getProp(host, ITERATION_ITEM_SINGLE, getObjectById);
+    if (singleItem !== null) {
+        return qrl(event, element, singleItem);
+    }
+    const multiItems = vnode_getProp(host, ITERATION_ITEM_MULTI, getObjectById);
+    if (multiItems !== null) {
+        return qrl(event, element, ...multiItems);
+    }
+    return qrl(event, element);
+}
+/**
+ * This is called by qwik-loader to run a QRL. It has to be synchronous.
+ *
+ * @internal
+ */
+const _run = (...args) => {
+    // This will already check container
+    const [qrl] = useLexicalScope();
+    const context = getInvokeContext();
+    const hostElement = context.$hostElement$;
+    if (hostElement) {
+        context.$container$ ||= getDomContainer(hostElement.node);
+        vnode_ensureElementInflated(hostElement);
+        return retryOnPromise(() => {
+            if (!(hostElement.flags & 32 /* VNodeFlags.Deleted */)) {
+                return callQrl(context.$container$, hostElement, qrl, args[0], args[1], true).catch((err) => {
+                    const container = context.$container$;
+                    if (container) {
+                        container.handleError(err, hostElement);
+                    }
+                    else {
+                        throw err;
+                    }
+                });
+            }
+        });
+    }
+};
+
+let _setAttribute = null;
+const fastSetAttribute = (target, name, value) => {
+    if (!_setAttribute) {
+        _setAttribute = target.setAttribute;
+    }
+    _setAttribute.call(target, name, value);
+};
+let _setAttributeNS = null;
+const fastSetAttributeNS = (target, namespace, name, value) => {
+    if (!_setAttributeNS) {
+        _setAttributeNS = target.setAttributeNS;
+    }
+    _setAttributeNS.call(target, namespace, name, value);
+};
+function directSetAttribute(element, attrName, attrValue, isSvg) {
+    if (attrValue != null) {
+        if (isSvg) {
+            // only svg elements can have namespace attributes
+            const namespace = getAttributeNamespace(attrName);
+            if (namespace) {
+                fastSetAttributeNS(element, namespace, attrName, attrValue);
+                return;
+            }
+        }
+        fastSetAttribute(element, attrName, attrValue);
+    }
+}
+
 /**
  * Helper to get the next sibling of a VNode. Extracted to module scope to help V8 inline it
  * reliably.
@@ -3229,9 +3328,12 @@ function peekNextSibling(vCurrent) {
 }
 const _hasOwnProperty = Object.prototype.hasOwnProperty;
 /** Helper to set an attribute on a vnode. Extracted to module scope to avoid closure allocation. */
-function setAttribute(journal, vnode, key, value, scopedStyleIdPrefix) {
-    const serializedValue = value != null ? serializeAttribute(key, value, scopedStyleIdPrefix) : null;
-    vnode_setAttr(journal, vnode, key, serializedValue);
+function setAttribute(journal, vnode, key, value, scopedStyleIdPrefix, originalValue) {
+    import.meta.env.TEST &&
+        scopedStyleIdPrefix &&
+        vnode_setProp(vnode, debugStyleScopeIdPrefixAttr, scopedStyleIdPrefix);
+    vnode_setProp(vnode, key, originalValue);
+    addVNodeOperation(journal, createSetAttributeOperation(vnode.node, key, value, scopedStyleIdPrefix, (vnode.flags & 128 /* VNodeFlags.NS_svg */) !== 0));
 }
 const vnode_diff = (container, journal, jsxNode, vStartNode, cursor, scopedStyleIdPrefix) => {
     const diffContext = {
@@ -3253,6 +3355,7 @@ const vnode_diff = (container, journal, jsxNode, vStartNode, cursor, scopedStyle
         jsxIdx: 0,
         jsxCount: 0,
         shouldAdvance: true,
+        isCreationMode: false,
         subscriptionData: {
             const: new SubscriptionData({
                 $scopedStyleIdPrefix$: scopedStyleIdPrefix,
@@ -3281,8 +3384,8 @@ const vnode_diff = (container, journal, jsxNode, vStartNode, cursor, scopedStyle
 //////////////////////////////////////////////
 //////////////////////////////////////////////
 function diff(diffContext, jsxNode, vStartNode) {
-    assertFalse(vnode_isVNode(jsxNode), 'JSXNode should not be a VNode');
-    assertTrue(vnode_isVNode(vStartNode), 'vStartNode should be a VNode');
+    isDev && assertFalse(vnode_isVNode(jsxNode), 'JSXNode should not be a VNode');
+    isDev && assertTrue(vnode_isVNode(vStartNode), 'vStartNode should be a VNode');
     diffContext.vParent = vStartNode;
     diffContext.vNewNode = null;
     diffContext.vCurrent = vnode_getFirstChild(vStartNode);
@@ -3293,7 +3396,8 @@ function diff(diffContext, jsxNode, vStartNode) {
     }
     while (diffContext.stack.length) {
         while (diffContext.jsxIdx < diffContext.jsxCount) {
-            assertFalse(diffContext.vParent === diffContext.vCurrent, "Parent and current can't be the same");
+            isDev &&
+                assertFalse(diffContext.vParent === diffContext.vCurrent, "Parent and current can't be the same");
             if (typeof diffContext.jsxValue === 'string') {
                 expectText(diffContext, diffContext.jsxValue);
             }
@@ -3301,26 +3405,7 @@ function diff(diffContext, jsxNode, vStartNode) {
                 expectText(diffContext, String(diffContext.jsxValue));
             }
             else if (diffContext.jsxValue && typeof diffContext.jsxValue === 'object') {
-                if (Array.isArray(diffContext.jsxValue)) {
-                    descend(diffContext, diffContext.jsxValue, false);
-                }
-                else if (isSignal(diffContext.jsxValue)) {
-                    expectVirtual(diffContext, "S" /* VirtualType.WrappedSignal */, null);
-                    const unwrappedSignal = diffContext.jsxValue instanceof WrappedSignalImpl
-                        ? diffContext.jsxValue.$unwrapIfSignal$()
-                        : diffContext.jsxValue;
-                    const hasUnwrappedSignal = diffContext.vCurrent?.[_EFFECT_BACK_REF]
-                        ?.get("." /* EffectProperty.VNODE */)?.[2 /* EffectSubscriptionProp.BACK_REF */]?.has(unwrappedSignal);
-                    if (!hasUnwrappedSignal) {
-                        const vHost = (diffContext.vNewNode || diffContext.vCurrent);
-                        descend(diffContext, resolveSignalAndDescend(diffContext, () => trackSignalAndAssignHost(unwrappedSignal, vHost, "." /* EffectProperty.VNODE */, diffContext.container)), true);
-                    }
-                }
-                else if (isPromise(diffContext.jsxValue)) {
-                    expectVirtual(diffContext, "A" /* VirtualType.Awaited */, null);
-                    diffContext.asyncQueue.push(diffContext.jsxValue, diffContext.vNewNode || diffContext.vCurrent);
-                }
-                else if (isJSXNode(diffContext.jsxValue)) {
+                if (isJSXNode(diffContext.jsxValue)) {
                     const type = diffContext.jsxValue.type;
                     if (typeof type === 'string') {
                         expectNoMoreTextNodes(diffContext);
@@ -3368,6 +3453,28 @@ function diff(diffContext, jsxNode, vStartNode) {
                         }
                     }
                 }
+                else if (Array.isArray(diffContext.jsxValue)) {
+                    descend(diffContext, diffContext.jsxValue, false);
+                }
+                else if (isSignal(diffContext.jsxValue)) {
+                    expectVirtual(diffContext, "S" /* VirtualType.WrappedSignal */, null);
+                    const unwrappedSignal = diffContext.jsxValue instanceof WrappedSignalImpl
+                        ? diffContext.jsxValue.$unwrapIfSignal$()
+                        : diffContext.jsxValue;
+                    const signals = diffContext.vCurrent?.[_EFFECT_BACK_REF]?.get("." /* EffectProperty.VNODE */)?.backRef;
+                    let hasUnwrappedSignal = signals?.has(unwrappedSignal);
+                    if (signals && unwrappedSignal instanceof WrappedSignalImpl) {
+                        hasUnwrappedSignal = containsWrappedSignal(signals, unwrappedSignal);
+                    }
+                    if (!hasUnwrappedSignal) {
+                        const vHost = (diffContext.vNewNode || diffContext.vCurrent);
+                        descend(diffContext, resolveSignalAndDescend(diffContext, () => trackSignalAndAssignHost(unwrappedSignal, vHost, "." /* EffectProperty.VNODE */, diffContext.container)), true);
+                    }
+                }
+                else if (isPromise(diffContext.jsxValue)) {
+                    expectVirtual(diffContext, "A" /* VirtualType.Awaited */, null);
+                    diffContext.asyncQueue.push(diffContext.jsxValue, diffContext.vNewNode || diffContext.vCurrent);
+                }
             }
             else if (diffContext.jsxValue === SkipRender) ;
             else {
@@ -3447,7 +3554,12 @@ function descend(diffContext, children, descendVNode, shouldExpectNoChildren = t
     }
     stackPush(diffContext, children, descendVNode);
     if (descendVNode) {
-        assertDefined(diffContext.vCurrent || diffContext.vNewNode, 'Expecting vCurrent to be defined.');
+        isDev &&
+            assertDefined(diffContext.vCurrent || diffContext.vNewNode, 'Expecting vCurrent to be defined.');
+        const creationMode = diffContext.isCreationMode ||
+            !!diffContext.vNewNode ||
+            !vnode_getFirstChild(diffContext.vCurrent);
+        diffContext.isCreationMode = creationMode;
         diffContext.vSideBuffer = null;
         diffContext.vSiblings = null;
         diffContext.vSiblingsArray = null;
@@ -3460,6 +3572,7 @@ function descend(diffContext, children, descendVNode, shouldExpectNoChildren = t
 function ascend(diffContext) {
     const descendVNode = diffContext.stack.pop(); // boolean: descendVNode
     if (descendVNode) {
+        diffContext.isCreationMode = diffContext.stack.pop();
         diffContext.vSideBuffer = diffContext.stack.pop();
         diffContext.vSiblings = diffContext.stack.pop();
         diffContext.vSiblingsArray = diffContext.stack.pop();
@@ -3476,7 +3589,7 @@ function ascend(diffContext) {
 function stackPush(diffContext, children, descendVNode) {
     diffContext.stack.push(diffContext.jsxChildren, diffContext.jsxIdx, diffContext.jsxCount, diffContext.jsxValue);
     if (descendVNode) {
-        diffContext.stack.push(diffContext.vParent, diffContext.vCurrent, diffContext.vNewNode, diffContext.vSiblingsArray, diffContext.vSiblings, diffContext.vSideBuffer);
+        diffContext.stack.push(diffContext.vParent, diffContext.vCurrent, diffContext.vNewNode, diffContext.vSiblingsArray, diffContext.vSiblings, diffContext.vSideBuffer, diffContext.isCreationMode);
     }
     diffContext.stack.push(descendVNode);
     if (Array.isArray(children)) {
@@ -3604,12 +3717,20 @@ function expectSlot(diffContext) {
     else if (vProjectedNode === diffContext.vCurrent) ;
     else {
         // move from q:template to the target node
+        const oldParent = vProjectedNode.parent;
         vnode_insertBefore(diffContext.journal, diffContext.vParent, (diffContext.vNewNode = vProjectedNode), diffContext.vCurrent && getInsertBefore(diffContext));
         vnode_setProp(diffContext.vNewNode, QSlot, slotNameKey);
         vHost && vnode_setProp(vHost, slotNameKey, diffContext.vNewNode);
         isDev &&
             vnode_setProp(diffContext.vNewNode, DEBUG_TYPE, "P" /* VirtualType.Projection */);
         isDev && vnode_setProp(diffContext.vNewNode, 'q:code', 'expectSlot' + count++);
+        // If we moved from a q:template and it's now empty, remove it
+        if (oldParent &&
+            vnode_isElementVNode(oldParent) &&
+            !oldParent.firstChild &&
+            vnode_getElementName(oldParent) === QTemplate) {
+            vnode_remove(diffContext.journal, oldParent.parent, oldParent, true);
+        }
     }
     return true;
 }
@@ -3684,7 +3805,8 @@ function expectNoChildren(diffContext, removeDOM = true) {
 }
 /** Expect no more nodes - Any nodes which are still at cursor, need to be removed. */
 function expectNoMore(diffContext) {
-    assertFalse(diffContext.vParent === diffContext.vCurrent, "Parent and current can't be the same");
+    isDev &&
+        assertFalse(diffContext.vParent === diffContext.vCurrent, "Parent and current can't be the same");
     if (diffContext.vCurrent !== null) {
         while (diffContext.vCurrent) {
             const toRemove = diffContext.vCurrent;
@@ -3714,20 +3836,6 @@ function expectNoMoreTextNodes(diffContext) {
  */
 function createNewElement(diffContext, jsx, elementName, currentFile) {
     const element = createElementWithNamespace(diffContext, elementName);
-    function setAttribute(key, value, vHost) {
-        value = serializeAttribute(key, value, diffContext.scopedStyleIdPrefix);
-        if (value != null) {
-            if (vHost.flags & 128 /* VNodeFlags.NS_svg */) {
-                // only svg elements can have namespace attributes
-                const namespace = getAttributeNamespace(key);
-                if (namespace) {
-                    element.setAttributeNS(namespace, key, value);
-                    return;
-                }
-            }
-            element.setAttribute(key, value);
-        }
-    }
     const { constProps } = jsx;
     let needsQDispatchEventPatch = false;
     if (constProps) {
@@ -3778,7 +3886,7 @@ function createNewElement(diffContext, jsx, elementName, currentFile) {
             }
             if (isPromise(value)) {
                 const vHost = diffContext.vNewNode;
-                const attributePromise = value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                const attributePromise = value.then((resolvedValue) => directSetAttribute(element, key, serializeAttribute(key, resolvedValue, diffContext.scopedStyleIdPrefix), (vHost.flags & 128 /* VNodeFlags.NS_svg */) !== 0));
                 diffContext.asyncAttributePromises.push(attributePromise);
                 continue;
             }
@@ -3799,7 +3907,7 @@ function createNewElement(diffContext, jsx, elementName, currentFile) {
                 element.value = escapeHTML(value || '');
                 continue;
             }
-            setAttribute(key, value, diffContext.vNewNode);
+            directSetAttribute(element, key, serializeAttribute(key, value, diffContext.scopedStyleIdPrefix), (diffContext.vNewNode.flags & 128 /* VNodeFlags.NS_svg */) !== 0);
         }
     }
     const key = jsx.key;
@@ -3808,7 +3916,8 @@ function createNewElement(diffContext, jsx, elementName, currentFile) {
     }
     // append class attribute if styleScopedId exists and there is no class attribute
     if (diffContext.scopedStyleIdPrefix) {
-        const classAttributeExists = hasClassAttr(jsx.varProps) || (jsx.constProps && hasClassAttr(jsx.constProps));
+        const classAttributeExists = _hasOwnProperty.call(jsx.varProps, 'class') ||
+            (jsx.constProps && _hasOwnProperty.call(jsx.constProps, 'class'));
         if (!classAttributeExists) {
             element.setAttribute('class', diffContext.scopedStyleIdPrefix);
         }
@@ -3818,28 +3927,35 @@ function createNewElement(diffContext, jsx, elementName, currentFile) {
 }
 function createElementWithNamespace(diffContext, elementName) {
     const domParentVNode = vnode_getDomParentVNode(diffContext.vParent, true);
-    const { elementNamespace, elementNamespaceFlag } = getNewElementNamespaceData(domParentVNode, elementName);
-    const element = diffContext.container.document.createElementNS(elementNamespace, elementName);
+    const namespaceData = getNewElementNamespaceData(domParentVNode, elementName);
+    const currentDocument = import.meta.env.TEST ? diffContext.container.document : document;
+    const element = namespaceData.elementNamespaceFlag === 0 /* VNodeFlags.NS_html */
+        ? currentDocument.createElement(elementName)
+        : currentDocument.createElementNS(namespaceData.elementNamespace, elementName);
     diffContext.vNewNode = vnode_newElement(element, elementName);
-    diffContext.vNewNode.flags |= elementNamespaceFlag;
+    diffContext.vNewNode.flags |= namespaceData.elementNamespaceFlag;
     return element;
 }
 function expectElement(diffContext, jsx, elementName) {
-    const isSameElementName = diffContext.vCurrent &&
-        vnode_isElementVNode(diffContext.vCurrent) &&
-        elementName === vnode_getElementName(diffContext.vCurrent);
-    const jsxKey = jsx.key;
     let needsQDispatchEventPatch = false;
-    const currentKey = getKey(diffContext.vCurrent);
-    if (!isSameElementName || jsxKey !== currentKey) {
-        const sideBufferKey = getSideBufferKey(elementName, jsxKey);
-        if (moveOrCreateKeyedNode(diffContext, elementName, jsxKey, sideBufferKey, diffContext.vParent)) {
-            needsQDispatchEventPatch = createNewElement(diffContext, jsx, elementName, null);
-        }
+    if (diffContext.isCreationMode) {
+        needsQDispatchEventPatch = createNewElement(diffContext, jsx, elementName, null);
     }
     else {
-        // delete the key from the side buffer if it is the same element
-        deleteFromSideBuffer(diffContext, elementName, jsxKey);
+        const isElementVNode = diffContext.vCurrent && vnode_isElementVNode(diffContext.vCurrent);
+        const isSameElementName = isElementVNode && elementName === vnode_getElementName(diffContext.vCurrent);
+        const jsxKey = jsx.key;
+        const currentKey = isElementVNode && diffContext.vCurrent.key;
+        if (!isSameElementName || jsxKey !== currentKey) {
+            const sideBufferKey = getSideBufferKey(elementName, jsxKey);
+            if (moveOrCreateKeyedNode(diffContext, elementName, jsxKey, sideBufferKey, diffContext.vParent)) {
+                needsQDispatchEventPatch = createNewElement(diffContext, jsx, elementName, null);
+            }
+        }
+        else {
+            // delete the key from the side buffer if it is the same element
+            deleteFromSideBuffer(diffContext, elementName, jsxKey);
+        }
     }
     // reconcile attributes
     const jsxProps = jsx.varProps;
@@ -3847,7 +3963,8 @@ function expectElement(diffContext, jsx, elementName) {
     const element = vNode.node;
     if (jsxProps) {
         needsQDispatchEventPatch =
-            diffProps(diffContext, vNode, jsxProps, (vNode.props ||= {}), (isDev && getFileLocationFromJsx(jsx.dev)) || null) || needsQDispatchEventPatch;
+            diffProps(diffContext, vNode, jsxProps, (isDev && getFileLocationFromJsx(jsx.dev)) || null) ||
+                needsQDispatchEventPatch;
     }
     if (needsQDispatchEventPatch) {
         // Event handler needs to be patched onto the element.
@@ -3864,7 +3981,7 @@ function expectElement(diffContext, jsx, elementName) {
                 ];
                 for (const qrl of qrls.flat(2)) {
                     if (qrl) {
-                        catchError(qrl(event, element), (e) => {
+                        callQrl(diffContext.container, vNode, qrl, event, vNode.node, false).catch((e) => {
                             diffContext.container.handleError(e, vNode);
                         });
                     }
@@ -3873,92 +3990,127 @@ function expectElement(diffContext, jsx, elementName) {
         }
     }
 }
-function diffProps(diffContext, vnode, newAttrs, oldAttrs, currentFile) {
-    vnode_ensureElementInflated(vnode);
+function diffProps(diffContext, vnode, newAttrs, currentFile) {
+    if (!diffContext.isCreationMode) {
+        // inflate only resumed vnodes
+        vnode_ensureElementInflated(vnode);
+    }
+    const oldAttrs = vnode.props;
     let patchEventDispatch = false;
-    const record = (key, value) => {
-        if (key.startsWith(':')) {
-            // TODO: there is a potential deoptimization here, because we are setting different keys on props.
-            // Eager bailout - Insufficient type feedback for generic keyed access
-            vnode_setProp(vnode, key, value);
-            return;
-        }
-        if (key === 'ref') {
-            const element = vnode.node;
-            if (isSignal(value)) {
-                value.value = element;
-                return;
+    // Actual diffing logic
+    // Apply all new attributes
+    for (const key in newAttrs) {
+        const newValue = newAttrs[key];
+        const isEvent = isHtmlAttributeAnEventName(key);
+        if (oldAttrs && _hasOwnProperty.call(oldAttrs, key)) {
+            const oldValue = oldAttrs[key];
+            if (newValue !== oldValue) {
+                if (newValue instanceof WrappedSignalImpl &&
+                    oldValue instanceof WrappedSignalImpl &&
+                    areWrappedSignalsEqual(newValue, oldValue)) {
+                    continue;
+                }
+                if (isEvent) {
+                    const result = recordJsxEvent(diffContext, vnode, key, newValue, currentFile);
+                    patchEventDispatch ||= result;
+                }
+                else {
+                    patchProperty(diffContext, vnode, key, newValue, currentFile);
+                }
             }
-            else if (typeof value === 'function') {
-                value(element);
-                return;
+        }
+        else if (newValue != null) {
+            if (isEvent) {
+                const result = recordJsxEvent(diffContext, vnode, key, newValue, currentFile);
+                patchEventDispatch ||= result;
             }
             else {
-                throw qError(15 /* QError.invalidRefValue */, [currentFile]);
+                patchProperty(diffContext, vnode, key, newValue, currentFile);
             }
         }
-        const currentEffect = vnode[_EFFECT_BACK_REF]?.get(key);
-        if (isSignal(value)) {
-            const unwrappedSignal = value instanceof WrappedSignalImpl ? value.$unwrapIfSignal$() : value;
-            if (currentEffect?.[2 /* EffectSubscriptionProp.BACK_REF */]?.has(unwrappedSignal)) {
-                return;
-            }
-            if (currentEffect) {
-                clearEffectSubscription(diffContext.container, currentEffect);
+    }
+    if (oldAttrs) {
+        // Remove attributes that no longer exist in new props
+        for (const key in oldAttrs) {
+            if (!_hasOwnProperty.call(newAttrs, key) &&
+                !key.startsWith(HANDLER_PREFIX) &&
+                !isHtmlAttributeAnEventName(key)) {
+                patchProperty(diffContext, vnode, key, null, currentFile);
             }
-            const vHost = vnode;
-            value = retryOnPromise(() => trackSignalAndAssignHost(unwrappedSignal, vHost, key, diffContext.container, diffContext.subscriptionData.var));
         }
-        else {
-            if (currentEffect) {
-                clearEffectSubscription(diffContext.container, currentEffect);
-            }
+    }
+    return patchEventDispatch;
+}
+const patchProperty = (diffContext, vnode, key, value, currentFile) => {
+    if (
+    // set only property for iteration item, not an attribute
+    key === ITERATION_ITEM_SINGLE ||
+        key === ITERATION_ITEM_MULTI ||
+        key.charAt(0) === HANDLER_PREFIX) {
+        // TODO: there is a potential deoptimization here, because we are setting different keys on props.
+        // Eager bailout - Insufficient type feedback for generic keyed access
+        vnode_setProp(vnode, key, value);
+        return;
+    }
+    const originalValue = value;
+    if (key === 'ref') {
+        const element = vnode.node;
+        if (isSignal(value)) {
+            value.value = element;
+            return;
         }
-        if (isPromise(value)) {
-            const vHost = vnode;
-            const attributePromise = value.then((resolvedValue) => {
-                setAttribute(diffContext.journal, vHost, key, resolvedValue, diffContext.scopedStyleIdPrefix);
-            });
-            diffContext.asyncAttributePromises.push(attributePromise);
+        else if (typeof value === 'function') {
+            value(element);
             return;
         }
-        setAttribute(diffContext.journal, vnode, key, value, diffContext.scopedStyleIdPrefix);
-    };
-    const recordJsxEvent = (key, value) => {
-        const data = getEventDataFromHtmlAttribute(key);
-        if (data) {
-            const [scope, eventName] = data;
-            const scopedEvent = getScopedEventName(scope, eventName);
-            const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
-            record(':' + scopedEvent, value);
-            registerQwikLoaderEvent(diffContext, loaderScopedEvent);
-            patchEventDispatch = true;
+        else {
+            throw qError(15 /* QError.invalidRefValue */, [currentFile]);
         }
-    };
-    // Actual diffing logic
-    // Apply all new attributes
-    for (const key of Object.keys(newAttrs)) {
-        const newValue = newAttrs[key];
-        const isEvent = isHtmlAttributeAnEventName(key);
-        if (_hasOwnProperty.call(oldAttrs, key)) {
-            if (newValue !== oldAttrs[key]) {
-                isEvent ? recordJsxEvent(key, newValue) : record(key, newValue);
-            }
+    }
+    const currentEffect = vnode[_EFFECT_BACK_REF]?.get(key);
+    if (isSignal(value)) {
+        const unwrappedSignal = value instanceof WrappedSignalImpl ? value.$unwrapIfSignal$() : value;
+        if (currentEffect?.backRef?.has(unwrappedSignal)) {
+            return;
         }
-        else if (newValue != null) {
-            isEvent ? recordJsxEvent(key, newValue) : record(key, newValue);
+        if (currentEffect) {
+            clearEffectSubscription(diffContext.container, currentEffect);
         }
+        const vHost = vnode;
+        value = retryOnPromise(() => trackSignalAndAssignHost(unwrappedSignal, vHost, key, diffContext.container, diffContext.subscriptionData.var));
     }
-    // Remove attributes that no longer exist in new props
-    for (const key of Object.keys(oldAttrs)) {
-        if (!_hasOwnProperty.call(newAttrs, key) &&
-            !key.startsWith(HANDLER_PREFIX) &&
-            !isHtmlAttributeAnEventName(key)) {
-            record(key, null);
+    else {
+        if (currentEffect) {
+            clearEffectSubscription(diffContext.container, currentEffect);
         }
     }
-    return patchEventDispatch;
-}
+    if (isPromise(value)) {
+        const vHost = vnode;
+        const attributePromise = value.then((resolvedValue) => {
+            setAttribute(diffContext.journal, vHost, key, resolvedValue, diffContext.scopedStyleIdPrefix, originalValue);
+        });
+        diffContext.asyncAttributePromises.push(attributePromise);
+        return;
+    }
+    setAttribute(diffContext.journal, vnode, key, value, diffContext.scopedStyleIdPrefix, originalValue);
+};
+const recordJsxEvent = (diffContext, vnode, key, value, currentFile) => {
+    const data = getEventDataFromHtmlAttribute(key);
+    if (data) {
+        const props = vnode.props;
+        const [scope, eventName] = data;
+        const scopedEvent = getScopedEventName(scope, eventName);
+        const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
+        const scopedEventKey = ':' + scopedEvent;
+        if (props && _hasOwnProperty.call(props, scopedEventKey)) {
+            return false;
+        }
+        patchProperty(diffContext, vnode, scopedEventKey, value, currentFile);
+        registerQwikLoaderEvent(diffContext, loaderScopedEvent);
+        return true;
+    }
+    return false;
+};
 function registerQwikLoaderEvent(diffContext, eventName) {
     const qWindow = import.meta.env.TEST
         ? diffContext.container.document.defaultView
@@ -3970,6 +4122,16 @@ function registerQwikLoaderEvent(diffContext, eventName) {
 function retrieveChildWithKey(diffContext, nodeName, key) {
     let vNodeWithKey = null;
     if (diffContext.vSiblings === null) {
+        // check if the current node is the one we are looking for
+        const vCurrent = diffContext.vCurrent;
+        if (vCurrent) {
+            const name = vnode_isElementVNode(vCurrent) ? vnode_getElementName(vCurrent) : null;
+            const vKey = getKey(vCurrent) ||
+                getComponentHash(vCurrent, diffContext.container.$getObjectById$);
+            if (vKey === key && name === nodeName) {
+                return vCurrent;
+            }
+        }
         // it is not materialized; so materialize it.
         diffContext.vSiblings = new Map();
         diffContext.vSiblingsArray = [];
@@ -4005,8 +4167,9 @@ function retrieveChildWithKey(diffContext, nodeName, key) {
         }
         else {
             const siblingsKey = getSideBufferKey(nodeName, key);
-            if (diffContext.vSiblings.has(siblingsKey)) {
-                vNodeWithKey = diffContext.vSiblings.get(siblingsKey);
+            const sibling = diffContext.vSiblings.get(siblingsKey);
+            if (sibling) {
+                vNodeWithKey = sibling;
                 diffContext.vSiblings.delete(siblingsKey);
             }
         }
@@ -4075,6 +4238,7 @@ function moveOrCreateKeyedNode(diffContext, nodeName, lookupKey, sideBufferKey,
     // 1) Try to find the node among upcoming siblings
     diffContext.vNewNode = retrieveChildWithKey(diffContext, nodeName, lookupKey);
     if (diffContext.vNewNode) {
+        vnode_insertBefore(diffContext.journal, parentForInsert, diffContext.vNewNode, diffContext.vCurrent);
         diffContext.vCurrent = diffContext.vNewNode;
         diffContext.vNewNode = null;
         return false;
@@ -4118,7 +4282,7 @@ function expectVirtual(diffContext, type, jsxKey) {
         return;
     }
     // For fragments without a key, always create a new virtual node (ensures rerender semantics)
-    if (jsxKey === null) {
+    if (jsxKey === null || diffContext.isCreationMode) {
         vnode_insertBefore(diffContext.journal, diffContext.vParent, (diffContext.vNewNode = vnode_newVirtual()), diffContext.vCurrent && getInsertBefore(diffContext));
         diffContext.vNewNode.key = jsxKey;
         isDev && vnode_setProp(diffContext.vNewNode, DEBUG_TYPE, type);
@@ -4247,7 +4411,7 @@ function expectText(diffContext, text) {
             return;
         }
     }
-    vnode_insertBefore(diffContext.journal, diffContext.vParent, (diffContext.vNewNode = vnode_newText(diffContext.container.document.createTextNode(text), text)), diffContext.vCurrent);
+    vnode_insertBefore(diffContext.journal, diffContext.vParent, (diffContext.vNewNode = vnode_newText((import.meta.env.TEST ? diffContext.container.document : document).createTextNode(text), text)), diffContext.vCurrent);
 }
 /**
  * Retrieve the key from the VNode.
@@ -4304,13 +4468,10 @@ function Projection() { }
 function handleProps(host, jsxProps, vNodeProps, container) {
     let shouldRender = false;
     if (vNodeProps) {
-        const effects = vNodeProps[_PROPS_HANDLER].$effects$;
         const constPropsDifferent = handleChangedProps(jsxProps[_CONST_PROPS], vNodeProps[_CONST_PROPS], vNodeProps[_PROPS_HANDLER], container, false);
         shouldRender ||= constPropsDifferent;
-        if (effects && effects.size > 0) {
-            handleChangedProps(jsxProps[_VAR_PROPS], vNodeProps[_VAR_PROPS], vNodeProps[_PROPS_HANDLER], container, true);
-            // don't mark as should render, effects will take care of it
-        }
+        const varPropsDifferent = handleChangedProps(jsxProps[_VAR_PROPS], vNodeProps[_VAR_PROPS], vNodeProps[_PROPS_HANDLER], container, true);
+        shouldRender ||= varPropsDifferent;
         // Update the owner after all props have been synced
         vNodeProps[_OWNER] = jsxProps[_OWNER];
     }
@@ -4335,7 +4496,6 @@ function handleChangedProps(src, dst, propsHandler, container, triggerEffects =
                 continue;
             }
             if (!dst || src[key] !== dst[key]) {
-                changed = true;
                 if (triggerEffects) {
                     if (dst) {
                         // Update the value in dst BEFORE triggering effects
@@ -4343,7 +4503,11 @@ function handleChangedProps(src, dst, propsHandler, container, triggerEffects =
                         // Note: Value is not triggering effects, because we are modyfing direct VAR_PROPS object
                         dst[key] = src[key];
                     }
-                    triggerPropsProxyEffect(propsHandler, key);
+                    const didTigger = triggerPropsProxyEffect(propsHandler, key);
+                    if (!didTigger) {
+                        // If the effect was not triggered, then the prop has changed and we should rerender
+                        changed = true;
+                    }
                 }
                 else {
                     // Early return for const props (no effects)
@@ -4359,10 +4523,13 @@ function handleChangedProps(src, dst, propsHandler, container, triggerEffects =
                 continue;
             }
             if (!src || !_hasOwnProperty.call(src, key)) {
-                changed = true;
                 if (triggerEffects) {
                     delete dst[key];
-                    triggerPropsProxyEffect(propsHandler, key);
+                    const didTigger = triggerPropsProxyEffect(propsHandler, key);
+                    if (!didTigger) {
+                        // If the effect was not triggered, then the prop has changed and we should rerender
+                        changed = true;
+                    }
                 }
             }
         }
@@ -4535,6 +4702,37 @@ function markVNodeAsDeleted(vCursor) {
      */
     vCursor.flags |= 32 /* VNodeFlags.Deleted */;
 }
+function areWrappedSignalsEqual(oldSignal, newSignal) {
+    if (oldSignal === newSignal) {
+        return true;
+    }
+    return (newSignal.$func$ === oldSignal.$func$ && areArgumentsEqual(newSignal.$args$, oldSignal.$args$));
+}
+function areArgumentsEqual(oldArgs, newArgs) {
+    if (oldArgs === newArgs) {
+        return true;
+    }
+    if (!oldArgs || !newArgs || oldArgs.length !== newArgs.length) {
+        return false;
+    }
+    for (let i = 0; i < oldArgs.length; i++) {
+        if (oldArgs[i] !== newArgs[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+function containsWrappedSignal(data, signal) {
+    if (!(signal instanceof WrappedSignalImpl)) {
+        return false;
+    }
+    for (const item of data) {
+        if (item instanceof WrappedSignalImpl && areWrappedSignalsEqual(item, signal)) {
+            return true;
+        }
+    }
+    return false;
+}
 /**
  * This marks the property as immutable. It is needed for the QRLs so that QwikLoader can get a hold
  * of them. This character must be `:` so that the `vnode_getAttr` can ignore them.
@@ -4542,6 +4740,41 @@ function markVNodeAsDeleted(vCursor) {
 const HANDLER_PREFIX = ':';
 let count = 0;
 
+/**
+ * @internal
+ * The storage provider for hooks. Each invocation increases index i. Data is stored in an array.
+ */
+const useSequentialScope = () => {
+    const iCtx = useInvokeContext();
+    const hostElement = iCtx.$hostElement$;
+    const host = hostElement;
+    let seq = iCtx.$container$.getHostProp(host, ELEMENT_SEQ);
+    if (seq === null) {
+        seq = [];
+        iCtx.$container$.setHostProp(host, ELEMENT_SEQ, seq);
+    }
+    let seqIdx = iCtx.$container$.getHostProp(host, ELEMENT_SEQ_IDX);
+    if (seqIdx === null) {
+        seqIdx = 0;
+    }
+    iCtx.$container$.setHostProp(host, ELEMENT_SEQ_IDX, seqIdx + 1);
+    while (seq.length <= seqIdx) {
+        seq.push(undefined);
+    }
+    const set = (value) => {
+        if (qDev && qSerialize) {
+            verifySerializable(value);
+        }
+        return (seq[seqIdx] = value);
+    };
+    return {
+        val: seq[seqIdx],
+        set,
+        i: seqIdx,
+        iCtx,
+    };
+};
+
 /** @internal */
 const useResourceQrl = (qrl, opts) => {
     const { val, set, i, iCtx } = useSequentialScope();
@@ -4627,6 +4860,7 @@ function getResourceValueAsPromise(props) {
         const isBrowser = !isServerPlatform();
         if (isBrowser) {
             if (state === 'pending' && props.onPending) {
+                resource.value.catch(() => { });
                 return Promise.resolve().then(useBindInvokeContext(props.onPending));
             }
             else if (state === 'rejected' && props.onRejected) {
@@ -4683,7 +4917,8 @@ const runResource = (task, container, host) => {
     iCtx.$container$ = container;
     const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
     const resource = task.$state$;
-    assertDefined(resource, 'useResource: when running a resource, "task.resource" must be a defined.', task);
+    isDev &&
+        assertDefined(resource, 'useResource: when running a resource, "task.resource" must be a defined.', task);
     const track = trackFn(task, container);
     const [cleanup, cleanups] = cleanupFn(task, (reason) => container.handleError(reason, host));
     const resourceTarget = unwrapStore(resource);
@@ -4776,33 +5011,6 @@ const runResource = (task, container, host) => {
     return promise;
 };
 
-/** Factory functions to create operations with consistent hidden classes. */
-const createDeleteOperation = (target) => ({
-    operationType: 1 /* VNodeOperationType.Delete */,
-    target,
-});
-const createRemoveAllChildrenOperation = (target) => ({
-    operationType: 4 /* VNodeOperationType.RemoveAllChildren */,
-    target,
-});
-const createSetTextOperation = (target, text) => ({
-    operationType: 16 /* VNodeOperationType.SetText */,
-    target,
-    text,
-});
-const createInsertOrMoveOperation = (target, parent, beforeTarget) => ({
-    operationType: 2 /* VNodeOperationType.InsertOrMove */,
-    target,
-    parent,
-    beforeTarget,
-});
-const createSetAttributeOperation = (target, attrName, attrValue) => ({
-    operationType: 8 /* VNodeOperationType.SetAttribute */,
-    target,
-    attrName,
-    attrValue,
-});
-
 /**
  * Executes tasks for a vNode if the TASKS dirty bit is set. Tasks are stored in the ELEMENT_SEQ
  * property and executed in order.
@@ -4947,8 +5155,8 @@ function clearNodePropData(vNode) {
     const props = (vNode.props ||= {});
     delete props[NODE_PROPS_DATA_KEY];
 }
-function setNodeProp(domVNode, journal, property, value, isConst) {
-    journal.push(createSetAttributeOperation(domVNode.node, property, value));
+function setNodeProp(domVNode, journal, property, value, isConst, scopedStyleIdPrefix = null) {
+    journal.push(createSetAttributeOperation(domVNode.node, property, value, scopedStyleIdPrefix, (domVNode.flags & 128 /* VNodeFlags.NS_svg */) !== 0));
     if (!isConst) {
         if (domVNode.props && value == null) {
             delete domVNode.props[property];
@@ -4983,10 +5191,9 @@ function executeNodeProps(vNode, journal) {
             // TODO: Handle async signals (promises) - need to track pending async prop data
             value = value.value;
         }
-        // Process synchronously (same logic as scheduler)
-        const serializedValue = serializeAttribute(property, value, nodeProp.scopedStyleIdPrefix);
+        // Pass raw value and scopedStyleIdPrefix - serialization happens in flush
         const isConst = nodeProp.isConst;
-        setNodeProp(domVNode, journal, property, serializedValue, isConst);
+        setNodeProp(domVNode, journal, property, value, isConst, nodeProp.scopedStyleIdPrefix);
     }
     // Clear pending prop data after processing
     clearNodePropData(vNode);
@@ -5063,61 +5270,131 @@ const fastInsertBefore = (insertBeforeParent, target, insertBefore) => {
         _insertBefore = insertBeforeParent.insertBefore;
     }
     _insertBefore.call(insertBeforeParent, target, insertBefore);
-};
-function _flushJournal(journal) {
-    // console.log(vnode_journalToString(journal));
-    for (const operation of journal) {
-        switch (operation.operationType) {
-            case 2 /* VNodeOperationType.InsertOrMove */: {
-                const insertBefore = operation.beforeTarget;
-                const insertBeforeParent = operation.parent;
-                fastInsertBefore(insertBeforeParent, operation.target, insertBefore);
-                break;
-            }
-            case 1 /* VNodeOperationType.Delete */: {
-                operation.target.remove();
-                break;
-            }
-            case 16 /* VNodeOperationType.SetText */: {
-                operation.target.nodeValue = operation.text;
-                break;
+};
+function _flushJournal(journal) {
+    let batchParent = null;
+    let batchBefore = null;
+    let batchNodes = null;
+    const batchSet = new Set();
+    const flush = () => {
+        if (batchNodes) {
+            if (batchNodes.length === 1) {
+                fastInsertBefore(batchParent, batchNodes[0], batchBefore);
             }
-            case 8 /* VNodeOperationType.SetAttribute */: {
-                const element = operation.target;
-                const attrName = operation.attrName;
-                const attrValue = operation.attrValue;
-                const shouldRemove = attrValue == null || attrValue === false;
-                if (isBooleanAttr(element, attrName)) {
-                    element[attrName] = parseBoolean(attrValue);
-                }
-                else if (attrName === dangerouslySetInnerHTML) {
-                    element.innerHTML = attrValue;
-                    element.setAttribute(QContainerAttr, "html" /* QContainerValue.HTML */);
+            else {
+                const doc = batchParent.ownerDocument || batchParent;
+                const fragment = doc.createDocumentFragment();
+                for (const node of batchNodes) {
+                    fragment.appendChild(node);
                 }
-                else if (shouldRemove) {
-                    element.removeAttribute(attrName);
+                fastInsertBefore(batchParent, fragment, batchBefore);
+            }
+            batchNodes = null;
+            batchParent = null;
+            batchBefore = null;
+            batchSet.clear();
+        }
+    };
+    for (const operation of journal) {
+        if (operation instanceof InsertOrMoveOperation) {
+            if (batchParent === operation.parent && batchBefore === operation.beforeTarget) {
+                if (!batchNodes) {
+                    batchNodes = [];
                 }
-                else if (attrName === 'value' && attrName in element) {
-                    element.value = attrValue;
+                batchNodes.push(operation.target);
+                batchSet.add(operation.target);
+                continue;
+            }
+            if (batchNodes) {
+                // If we have an existing batch, we need to check if the new operation conflicts with it.
+                // 1. If we are inserting into the same parent but with a different "before" reference, we must flush.
+                if (batchParent === operation.parent) {
+                    flush();
+                    batchParent = operation.parent;
+                    batchBefore = operation.beforeTarget;
+                    batchNodes = [operation.target];
+                    batchSet.add(operation.target);
+                    continue;
                 }
-                else {
-                    element.setAttribute(attrName, attrValue);
+                // 2. If we are moving a node that is currently in the batch, or moving the node that is the reference for the batch.
+                if (batchSet.has(operation.target) ||
+                    (batchBefore && operation.target === batchBefore) ||
+                    (batchParent && operation.target === batchParent)) {
+                    flush();
+                    batchParent = operation.parent;
+                    batchBefore = operation.beforeTarget;
+                    batchNodes = [operation.target];
+                    batchSet.add(operation.target);
+                    continue;
                 }
-                break;
+                // 3. Otherwise, we can execute this operation immediately without flushing the current batch.
+                // This is important for "interleaved" inserts, e.g. inserting <tr> into <tbody> (batched)
+                // and then inserting <td> into that <tr> (immediate).
+                // The <tr> is in memory, so inserting <td> into it is fine and doesn't require the <tr> to be in the DOM.
             }
-            case 4 /* VNodeOperationType.RemoveAllChildren */: {
-                const removeParent = operation.target;
-                if (removeParent.replaceChildren) {
-                    removeParent.replaceChildren();
-                }
-                else {
-                    // fallback if replaceChildren is not supported
-                    removeParent.textContent = '';
+            else {
+                batchParent = operation.parent;
+                batchBefore = operation.beforeTarget;
+                batchNodes = [operation.target];
+                batchSet.add(operation.target);
+                continue;
+            }
+            fastInsertBefore(operation.parent, operation.target, operation.beforeTarget);
+            continue;
+        }
+        if (operation instanceof DeleteOperation) {
+            if (batchSet.has(operation.target) ||
+                (batchBefore && operation.target === batchBefore) ||
+                (batchParent && operation.target === batchParent)) {
+                flush();
+            }
+            operation.target.remove();
+            continue;
+        }
+        if (operation instanceof RemoveAllChildrenOperation) {
+            if (batchSet.has(operation.target) ||
+                (batchBefore && operation.target === batchBefore) ||
+                (batchParent && operation.target === batchParent)) {
+                flush();
+            }
+            // Removing children of a node in the batch is safe (clears detached node)
+            const removeParent = operation.target;
+            removeParent.textContent = '';
+            continue;
+        }
+        if (operation instanceof SetTextOperation) {
+            operation.target.nodeValue = operation.text;
+        }
+        else if (operation instanceof SetAttributeOperation) {
+            const element = operation.target;
+            const attrName = operation.attrName;
+            const rawValue = operation.attrValue;
+            const attrValue = rawValue != null
+                ? serializeAttribute(attrName, rawValue, operation.scopedStyleIdPrefix)
+                : null;
+            const shouldRemove = attrValue == null || attrValue === false;
+            if (isBooleanAttr(element, attrName)) {
+                element[attrName] = parseBoolean(attrValue);
+            }
+            else if (attrName === dangerouslySetInnerHTML) {
+                if (batchParent === element) {
+                    flush();
                 }
-                break;
+                element.innerHTML = attrValue;
+                element.setAttribute(QContainerAttr, "html" /* QContainerValue.HTML */);
+            }
+            else if (shouldRemove) {
+                element.removeAttribute(attrName);
+            }
+            else if (attrName === 'value' && attrName in element) {
+                element.value = attrValue;
+            }
+            else {
+                directSetAttribute(element, attrName, attrValue, operation.isSvg);
             }
         }
     }
+    flush();
 }
 function executeAfterFlush(container, cursorData) {
     const visibleTasks = cursorData.afterFlushTasks;
@@ -5253,7 +5530,7 @@ function processCursorQueue(options = {
  */
 function walkCursor(cursor, options) {
     const { timeBudget } = options;
-    const isServer = isServerPlatform();
+    const isRunningOnServer = import.meta.env.TEST ? isServerPlatform() : isServer;
     const startTime = performance.now();
     const cursorData = getCursorData(cursor);
     // Check if cursor is blocked by a promise
@@ -5262,10 +5539,10 @@ function walkCursor(cursor, options) {
         return;
     }
     const container = cursorData.container;
-    assertDefined(container, 'Cursor container not found');
+    isDev && assertDefined(container, 'Cursor container not found');
     // Check if cursor is already complete
     if (!cursor.dirty) {
-        finishWalk(container, cursor, cursorData, isServer);
+        finishWalk(container, cursor, cursorData, isRunningOnServer);
         return;
     }
     const journal = (cursorData.journal ||= []);
@@ -5273,7 +5550,7 @@ function walkCursor(cursor, options) {
     let currentVNode = null;
     while ((currentVNode = cursorData.position)) {
         // Check time budget (only for DOM, not SSR)
-        if (!isServer && !import.meta.env.TEST) {
+        if (!isRunningOnServer && !import.meta.env.TEST) {
             const elapsed = performance.now() - startTime;
             if (elapsed >= timeBudget) {
                 // Schedule continuation as macrotask to actually yield to browser
@@ -5356,8 +5633,9 @@ function walkCursor(cursor, options) {
             return;
         }
     }
-    assertFalse(!!(cursor.dirty & 127 /* ChoreBits.DIRTY_MASK */ && !cursorData.position), 'Cursor is still dirty and position is not set after walking');
-    finishWalk(container, cursor, cursorData, isServer);
+    isDev &&
+        assertFalse(!!(cursor.dirty & 127 /* ChoreBits.DIRTY_MASK */ && !cursorData.position), 'Cursor is still dirty and position is not set after walking');
+    finishWalk(container, cursor, cursorData, isRunningOnServer);
 }
 function finishWalk(container, cursor, cursorData, isServer) {
     if (!(cursor.dirty & 127 /* ChoreBits.DIRTY_MASK */)) {
@@ -5377,7 +5655,7 @@ function finishWalk(container, cursor, cursorData, isServer) {
 function resolveCursor(container) {
     // TODO streaming as a cursor? otherwise we need to wait separately for it
     // or just ignore and resolve manually
-    if (container.$cursorCount$ === 0) {
+    if (container.$cursorCount$ === 0 && container.$pausedCursorCount$ === 0) {
         container.$resolveRenderPromise$();
         container.$renderPromise$ = null;
     }
@@ -5441,6 +5719,7 @@ function getNextVNode(vNode, cursor) {
     // all array items checked, children are no longer dirty
     parent.dirty &= -33 /* ChoreBits.CHILDREN */;
     parent.dirtyChildren = null;
+    parent.nextDirtyChildIndex = 0;
     return getNextVNode(parent, cursor);
 }
 
@@ -5529,8 +5808,13 @@ function _executeSsrChores(container, ssrNode) {
             promise = result;
         }
     }
-    if (ssrNode.dirty & 4 /* ChoreBits.COMPONENT */) ;
-    ssrNode.dirty &= -128 /* ChoreBits.DIRTY_MASK */;
+    // In SSR, we don't handle the COMPONENT bit here.
+    // During initial render, if a task completes and marks the component dirty,
+    // we want to leave the COMPONENT bit set so that executeComponent can detect
+    // it after $waitOn$ completes and re-execute the component function.
+    // executeComponent will clear the bit after re-executing.
+    // Clear all dirty bits EXCEPT COMPONENT
+    ssrNode.dirty &= -124;
     if (promise) {
         return promise;
     }
@@ -5649,7 +5933,7 @@ function findAndPropagateToBlockingCursor(vNode) {
     return false;
 }
 function isSsrNodeGuard(_vNode) {
-    return isServerPlatform();
+    return import.meta.env.TEST ? isServerPlatform() : isServer;
 }
 /**
  * Marks a vNode as dirty and propagates dirty bits up the tree.
@@ -5855,21 +6139,22 @@ const fastGetter = (prototype, name) => {
  */
 //////////////////////////////////////////////////////////////////////////////////////////////////////
 const vnode_newElement = (element, elementName, key = null) => {
-    assertEqual(fastNodeType(element), 1 /* ELEMENT_NODE */, 'Expecting element node.');
+    isDev && assertEqual(fastNodeType(element), 1 /* ELEMENT_NODE */, 'Expecting element node.');
     const vnode = new ElementVNode(key, 1 /* VNodeFlags.Element */ | 8 /* VNodeFlags.Inflated */ | (-1 << 9 /* VNodeFlagsIndex.shift */), // Flag
     null, null, null, null, null, null, element, elementName);
     element.vNode = vnode;
     return vnode;
 };
 const vnode_newUnMaterializedElement = (element) => {
-    assertEqual(fastNodeType(element), 1 /* ELEMENT_NODE */, 'Expecting element node.');
+    isDev && assertEqual(fastNodeType(element), 1 /* ELEMENT_NODE */, 'Expecting element node.');
     const vnode = new ElementVNode(null, 1 /* VNodeFlags.Element */ | (-1 << 9 /* VNodeFlagsIndex.shift */), // Flag
     null, null, null, null, undefined, undefined, element, undefined);
     element.vNode = vnode;
     return vnode;
 };
 const vnode_newSharedText = (previousTextNode, sharedTextNode, textContent) => {
-    sharedTextNode &&
+    isDev &&
+        sharedTextNode &&
         assertEqual(fastNodeType(sharedTextNode), 3 /* TEXT_NODE */, 'Expecting text node.');
     const vnode = new TextVNode(4 /* VNodeFlags.Text */ | (-1 << 9 /* VNodeFlagsIndex.shift */), // Flag
     null, // Parent
@@ -5886,18 +6171,18 @@ const vnode_newText = (textNode, textContent) => {
     null, textNode, // TextNode
     textContent // Text Content
     );
-    assertEqual(fastNodeType(textNode), 3 /* TEXT_NODE */, 'Expecting text node.');
-    assertFalse(vnode_isElementVNode(vnode), 'Incorrect format of TextVNode.');
-    assertTrue(vnode_isTextVNode(vnode), 'Incorrect format of TextVNode.');
-    assertFalse(vnode_isVirtualVNode(vnode), 'Incorrect format of TextVNode.');
+    isDev && assertEqual(fastNodeType(textNode), 3 /* TEXT_NODE */, 'Expecting text node.');
+    isDev && assertFalse(vnode_isElementVNode(vnode), 'Incorrect format of TextVNode.');
+    isDev && assertTrue(vnode_isTextVNode(vnode), 'Incorrect format of TextVNode.');
+    isDev && assertFalse(vnode_isVirtualVNode(vnode), 'Incorrect format of TextVNode.');
     return vnode;
 };
 const vnode_newVirtual = () => {
     const vnode = new VirtualVNode(null, 2 /* VNodeFlags.Virtual */ | (-1 << 9 /* VNodeFlagsIndex.shift */), // Flags
     null, null, null, null, null, null);
-    assertFalse(vnode_isElementVNode(vnode), 'Incorrect format of TextVNode.');
-    assertFalse(vnode_isTextVNode(vnode), 'Incorrect format of TextVNode.');
-    assertTrue(vnode_isVirtualVNode(vnode), 'Incorrect format of TextVNode.');
+    isDev && assertFalse(vnode_isElementVNode(vnode), 'Incorrect format of TextVNode.');
+    isDev && assertFalse(vnode_isTextVNode(vnode), 'Incorrect format of TextVNode.');
+    isDev && assertTrue(vnode_isVirtualVNode(vnode), 'Incorrect format of TextVNode.');
     return vnode;
 };
 //////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -5905,16 +6190,16 @@ const vnode_isVNode = (vNode) => {
     return vNode instanceof VNode;
 };
 const vnode_isElementVNode = (vNode) => {
-    return vNode instanceof ElementVNode;
+    return (vNode.flags & 1 /* VNodeFlags.Element */) === 1 /* VNodeFlags.Element */;
 };
 const vnode_isElementOrTextVNode = (vNode) => {
-    assertDefined(vNode, 'Missing vNode');
+    isDev && assertDefined(vNode, 'Missing vNode');
     const flag = vNode.flags;
     return (flag & 5 /* VNodeFlags.ELEMENT_OR_TEXT_MASK */) !== 0;
 };
 /** @internal */
 const vnode_isMaterialized = (vNode) => {
-    assertDefined(vNode, 'Missing vNode');
+    isDev && assertDefined(vNode, 'Missing vNode');
     const flag = vNode.flags;
     return ((flag & 1 /* VNodeFlags.Element */) === 1 /* VNodeFlags.Element */ &&
         vNode.firstChild !== undefined &&
@@ -5922,27 +6207,30 @@ const vnode_isMaterialized = (vNode) => {
 };
 /** @internal */
 const vnode_isTextVNode = (vNode) => {
-    return vNode instanceof TextVNode;
+    return (vNode.flags & 4 /* VNodeFlags.Text */) === 4 /* VNodeFlags.Text */;
 };
 /** @internal */
 const vnode_isVirtualVNode = (vNode) => {
-    return vNode instanceof VirtualVNode;
+    return (vNode.flags & 2 /* VNodeFlags.Virtual */) === 2 /* VNodeFlags.Virtual */;
 };
 const vnode_isProjection = (vNode) => {
-    assertDefined(vNode, 'Missing vNode');
+    isDev && assertDefined(vNode, 'Missing vNode');
     const flag = vNode.flags;
     return ((flag & 2 /* VNodeFlags.Virtual */) === 2 /* VNodeFlags.Virtual */ && vnode_getProp(vNode, QSlot, null) !== null);
 };
 const ensureTextVNode = (vNode) => {
-    assertTrue(vnode_isTextVNode(vNode), 'Expecting TextVNode was: ' + vnode_getNodeTypeName(vNode));
+    isDev &&
+        assertTrue(vnode_isTextVNode(vNode), 'Expecting TextVNode was: ' + vnode_getNodeTypeName(vNode));
     return vNode;
 };
 const ensureElementOrVirtualVNode = (vNode) => {
-    assertDefined(vNode, 'Missing vNode');
-    assertTrue((vNode.flags & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0, 'Expecting ElementVNode or VirtualVNode was: ' + vnode_getNodeTypeName(vNode));
+    isDev && assertDefined(vNode, 'Missing vNode');
+    isDev &&
+        assertTrue((vNode.flags & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0, 'Expecting ElementVNode or VirtualVNode was: ' + vnode_getNodeTypeName(vNode));
 };
 const ensureElementVNode = (vNode) => {
-    assertTrue(vnode_isElementVNode(vNode), 'Expecting ElementVNode was: ' + vnode_getNodeTypeName(vNode));
+    isDev &&
+        assertTrue(vnode_isElementVNode(vNode), 'Expecting ElementVNode was: ' + vnode_getNodeTypeName(vNode));
     return vNode;
 };
 const vnode_getNodeTypeName = (vNode) => {
@@ -5972,20 +6260,21 @@ const vnode_getProp = (vNode, key, getObject) => {
     return null;
 };
 const vnode_setProp = (vNode, key, value) => {
-    if (vnode_isElementVNode(vNode) || vnode_isVirtualVNode(vNode)) {
-        if (value == null && vNode.props) {
-            delete vNode.props[key];
-        }
-        else {
-            vNode.props ||= {};
-            vNode.props[key] = value;
-        }
+    if (value == null && vNode.props) {
+        delete vNode.props[key];
+    }
+    else {
+        vNode.props ||= {};
+        vNode.props[key] = value;
     }
 };
-const vnode_setAttr = (journal, vNode, key, value) => {
+const vnode_setAttr = (journal, vNode, key, value, scopedStyleIdPrefix = null) => {
     if (vnode_isElementVNode(vNode)) {
+        import.meta.env.TEST &&
+            scopedStyleIdPrefix &&
+            vnode_setProp(vNode, debugStyleScopeIdPrefixAttr, scopedStyleIdPrefix);
         vnode_setProp(vNode, key, value);
-        addVNodeOperation(journal, createSetAttributeOperation(vNode.node, key, value));
+        addVNodeOperation(journal, createSetAttributeOperation(vNode.node, key, value, scopedStyleIdPrefix, (vNode.flags & 128 /* VNodeFlags.NS_svg */) !== 0));
     }
 };
 const vnode_ensureElementKeyInflated = (vnode) => {
@@ -6218,7 +6507,7 @@ const vnode_ensureTextInflated = (journal, vnode) => {
     const flags = textVNode.flags;
     if ((flags & 8 /* VNodeFlags.Inflated */) === 0) {
         const parentNode = vnode_getDomParent(vnode, true);
-        assertDefined(parentNode, 'Missing parent node.');
+        isDev && assertDefined(parentNode, 'Missing parent node.');
         const sharedTextNode = textVNode.node;
         const doc = fastOwnerDocument(parentNode);
         // Walk the previous siblings and inflate them.
@@ -6228,7 +6517,7 @@ const vnode_ensureTextInflated = (journal, vnode) => {
         // case we know that the next node MUST be either NULL or an Element.
         const node = vnode_getDomSibling(vnode, true, true);
         const insertBeforeNode = sharedTextNode ||
-            ((node instanceof ElementVNode ? node.node : node?.node) || null);
+            ((node && vnode_isElementVNode(node) ? node.node : node?.node) || null);
         let lastPreviousTextNode = insertBeforeNode;
         while (vCursor && vnode_isTextVNode(vCursor)) {
             if ((vCursor.flags & 8 /* VNodeFlags.Inflated */) === 0) {
@@ -6268,7 +6557,7 @@ const vnode_locate = (rootVNode, id) => {
     let elementOffset = -1;
     let refElement;
     if (typeof id === 'string') {
-        assertDefined(qVNodeRefs, 'Missing qVNodeRefs.');
+        isDev && assertDefined(qVNodeRefs, 'Missing qVNodeRefs.');
         elementOffset = parseInt(id);
         refElement = qVNodeRefs.get(elementOffset);
     }
@@ -6279,9 +6568,10 @@ const vnode_locate = (rootVNode, id) => {
             return vNode;
         }
     }
-    assertDefined(refElement, 'Missing refElement.');
+    isDev && assertDefined(refElement, 'Missing refElement.');
     if (!vnode_isVNode(refElement)) {
-        assertTrue(containerElement.contains(refElement), `Couldn't find the element inside the container while locating the VNode.`);
+        isDev &&
+            assertTrue(containerElement.contains(refElement), `Couldn't find the element inside the container while locating the VNode.`);
         // We need to find the vnode.
         let parent = refElement;
         const elementPath = [refElement];
@@ -6329,10 +6619,10 @@ const vnode_locate = (rootVNode, id) => {
 };
 const vnode_getChildWithIdx = (vNode, childIdx) => {
     let child = vnode_getFirstChild(vNode);
-    assertDefined(child, 'Missing child.');
+    isDev && assertDefined(child, 'Missing child.');
     while (child.flags >>> 9 /* VNodeFlagsIndex.shift */ !== childIdx) {
         child = child.nextSibling;
-        assertDefined(child, 'Missing child.');
+        isDev && assertDefined(child, 'Missing child.');
     }
     return child;
 };
@@ -6340,7 +6630,7 @@ const vNodeStack = [];
 const vnode_getVNodeForChildNode = (vNode, childElement) => {
     ensureElementVNode(vNode);
     let child = vnode_getFirstChild(vNode);
-    assertDefined(child, 'Missing child.');
+    isDev && assertDefined(child, 'Missing child.');
     while (child && (child instanceof ElementVNode ? child.node !== childElement : true)) {
         if (vnode_isVirtualVNode(child)) {
             const next = child.nextSibling;
@@ -6362,13 +6652,13 @@ const vnode_getVNodeForChildNode = (vNode, childElement) => {
                 child = next || vNodeStack.pop();
             }
         }
-        assertDefined(child, 'Missing child.');
+        isDev && assertDefined(child, 'Missing child.');
     }
     while (vNodeStack.length) {
         vNodeStack.pop();
     }
     ensureElementVNode(child);
-    assertEqual(child.node, childElement, 'Child not found.');
+    isDev && assertEqual(child.node, childElement, 'Child not found.');
     // console.log('FOUND', child[VNodeProps.node]?.outerHTML);
     return child;
 };
@@ -6543,7 +6833,7 @@ const vnode_getDomParentVNode = (vnode, includeProjection) => {
     return vnode;
 };
 const vnode_remove = (journal, vParent, vToRemove, removeDOM) => {
-    assertEqual(vParent, vToRemove.parent, 'Parent mismatch.');
+    isDev && assertEqual(vParent, vToRemove.parent, 'Parent mismatch.');
     if (vnode_isTextVNode(vToRemove)) {
         vnode_ensureTextInflated(journal, vToRemove);
     }
@@ -6580,7 +6870,7 @@ const vnode_remove = (journal, vParent, vToRemove, removeDOM) => {
     vToRemove.nextSibling = null;
 };
 const vnode_truncate = (journal, vParent, vDelete, removeDOM = true) => {
-    assertDefined(vDelete, 'Missing vDelete.');
+    isDev && assertDefined(vDelete, 'Missing vDelete.');
     const parent = vnode_getDomParent(vParent, true);
     if (parent && removeDOM) {
         if (vnode_isElementVNode(vParent)) {
@@ -6699,8 +6989,8 @@ const ensureMaterialized = (vnode) => {
             vFirstChild = vnode_materialize(vParent);
         }
     }
-    assertTrue(vParent.firstChild !== undefined, 'Did not materialize.');
-    assertTrue(vParent.lastChild !== undefined, 'Did not materialize.');
+    isDev && assertTrue(vParent.firstChild !== undefined, 'Did not materialize.');
+    isDev && assertTrue(vParent.lastChild !== undefined, 'Did not materialize.');
     return vFirstChild;
 };
 let _fastHasAttribute = null;
@@ -7018,8 +7308,11 @@ function vnode_toString(depth = 20, offset = '', materialize = false, siblings =
         else if (vnode_isVirtualVNode(vnode)) {
             const idx = vnode.flags >>> 9 /* VNodeFlagsIndex.shift */;
             const attrs = ['[' + String(idx) + ']'];
+            if (vnode.dirty) {
+                attrs.push(` dirty:${vnode.dirty}`);
+            }
             vnode_getAttrKeys(vnode).forEach((key) => {
-                if (key !== DEBUG_TYPE) {
+                if (key !== DEBUG_TYPE && key !== debugStyleScopeIdPrefixAttr) {
                     const value = vnode_getProp(vnode, key, null);
                     attrs.push(' ' + key + '=' + qwikDebugToString(value));
                 }
@@ -7309,6 +7602,79 @@ const vnode_getProjectionParentComponent = (vHost) => {
     return vHost;
 };
 
+let _locale = undefined;
+let localAsyncStore;
+if (isServer) {
+    import('node:async_hooks')
+        .then((module) => {
+        localAsyncStore = new module.AsyncLocalStorage();
+    })
+        .catch(() => {
+        // ignore if AsyncLocalStorage is not available
+    });
+}
+/**
+ * Retrieve the current locale.
+ *
+ * If no current locale and there is no `defaultLocale` the function throws an error.
+ *
+ * @returns The locale.
+ * @public
+ */
+function getLocale(defaultLocale) {
+    // Prefer per-request locale from local AsyncLocalStorage if available (server-side)
+    if (localAsyncStore) {
+        const locale = localAsyncStore.getStore();
+        if (locale) {
+            return locale;
+        }
+    }
+    if (_locale === undefined) {
+        const ctx = tryGetInvokeContext();
+        if (ctx && ctx.$locale$) {
+            return ctx.$locale$;
+        }
+        if (defaultLocale !== undefined) {
+            return defaultLocale;
+        }
+        throw new Error('Reading `locale` outside of context.');
+    }
+    return _locale;
+}
+/**
+ * Override the `getLocale` with `lang` within the `fn` execution.
+ *
+ * @public
+ */
+function withLocale(locale, fn) {
+    if (localAsyncStore) {
+        return localAsyncStore.run(locale, fn);
+    }
+    const previousLang = _locale;
+    try {
+        _locale = locale;
+        return fn();
+    }
+    finally {
+        _locale = previousLang;
+    }
+}
+/**
+ * Globally set a lang.
+ *
+ * This can be used only in browser. Server execution requires that each request could potentially
+ * be a different lang, therefore setting a global lang would produce incorrect responses.
+ *
+ * @public
+ */
+function setLocale(locale) {
+    if (localAsyncStore) {
+        localAsyncStore.enterWith(locale);
+        return;
+    }
+    _locale = locale;
+}
+
 let _context;
 const tryGetInvokeContext = () => {
     if (!_context) {
@@ -7336,8 +7702,8 @@ const useInvokeContext = () => {
     if (!ctx || ctx.$event$ !== RenderEvent) {
         throw qError(10 /* QError.useInvokeContext */);
     }
-    assertDefined(ctx.$hostElement$, `invoke: $hostElement$ must be defined`, ctx);
-    assertDefined(ctx.$effectSubscriber$, `invoke: $effectSubscriber$ must be defined`, ctx);
+    isDev && assertDefined(ctx.$hostElement$, `invoke: $hostElement$ must be defined`, ctx);
+    isDev && assertDefined(ctx.$effectSubscriber$, `invoke: $effectSubscriber$ must be defined`, ctx);
     return ctx;
 };
 function useBindInvokeContext(fn) {
@@ -7404,24 +7770,37 @@ function newInvokeContext(locale, hostElement, event, url) {
     return ctx;
 }
 /**
- * Don't track listeners for this callback
+ * Get the value of the expression without tracking listeners. A function will be invoked, signals
+ * will return their value, and stores will be unwrapped (they return the backing object).
  *
+ * When you pass a function, you can also pass additional arguments that the function will receive.
+ *
+ * Note that stores are not unwrapped recursively.
+ *
+ * @param expr - The function or object to evaluate without tracking.
+ * @param args - Additional arguments to pass when `expr` is a function.
  * @public
  */
-const untrack = (fn) => {
-    if (_context) {
-        const sub = _context.$effectSubscriber$;
-        try {
-            _context.$effectSubscriber$ = undefined;
-            return fn();
+const untrack = (expr, ...args) => {
+    if (typeof expr === 'function') {
+        if (_context) {
+            const sub = _context.$effectSubscriber$;
+            try {
+                _context.$effectSubscriber$ = undefined;
+                return expr(...args);
+            }
+            finally {
+                _context.$effectSubscriber$ = sub;
+            }
         }
-        finally {
-            _context.$effectSubscriber$ = sub;
+        else {
+            return expr(...args);
         }
     }
-    else {
-        return fn();
+    if (isSignal(expr)) {
+        return expr.untrackedValue;
     }
+    return unwrapStore(expr);
 };
 const trackInvocation = /*#__PURE__*/ newRenderInvokeContext(undefined, undefined, undefined);
 /**
@@ -7556,7 +7935,8 @@ const _waitUntilRendered = (elm) => {
  */
 // </docs>
 const createContextId = (name) => {
-    assertTrue(/^[\w/.-]+$/.test(name), 'Context name must only contain A-Z,a-z,0-9,_,.,-', name);
+    isDev &&
+        assertTrue(/^[\w/.-]+$/.test(name), 'Context name must only contain A-Z,a-z,0-9,_,.,-', name);
     return /*#__PURE__*/ Object.freeze({
         id: fromCamelToKebabCase(name),
     });
@@ -7803,6 +8183,7 @@ const _typeIdNames = [
     'JSXNode',
     'PropsProxy',
     'SubscriptionData',
+    'EffectSubscription',
 ];
 
 function qrlToString(serializationContext, value, raw) {
@@ -7860,13 +8241,16 @@ function qrlToString(serializationContext, value, raw) {
     return qrlStringInline;
 }
 function createQRLWithBackChannel(chunk, symbol, captureIds) {
-    let qrlRef = null;
+    let qrlImporter = null;
     if (isDev && chunk === QRL_RUNTIME_CHUNK) {
         const backChannel = globalThis.__qrl_back_channel__;
-        assertDefined(backChannel, 'Missing QRL_RUNTIME_CHUNK');
-        qrlRef = backChannel.get(symbol);
+        isDev && assertDefined(backChannel, 'Missing QRL_RUNTIME_CHUNK');
+        const fn = backChannel.get(symbol);
+        if (fn) {
+            qrlImporter = () => Promise.resolve({ [symbol]: fn });
+        }
     }
-    return createQRL(chunk, symbol, qrlRef, null, captureIds, null);
+    return createQRL(chunk, symbol, null, qrlImporter, captureIds, null);
 }
 /** Parses "chunk#hash[...rootRef]" */
 function parseQRL(qrl) {
@@ -7978,7 +8362,7 @@ const allocate = (container, typeId, value) => {
         case 30 /* TypeIds.FormData */:
             return new FormData();
         case 31 /* TypeIds.JSXNode */:
-            return new JSXNodeImpl(null);
+            return new JSXNodeImpl(null, null, null, null, null);
         case 11 /* TypeIds.BigInt */:
             return BigInt(value);
         case 16 /* TypeIds.Set */:
@@ -8042,6 +8426,8 @@ const allocate = (container, typeId, value) => {
             }
         case 33 /* TypeIds.SubscriptionData */:
             return new SubscriptionData({});
+        case 34 /* TypeIds.EffectSubscription */:
+            return new EffectSubscription(null, null, null, null);
         default:
             throw qError(18 /* QError.serializeErrorCannotAllocate */, [typeId]);
     }
@@ -8164,33 +8550,6 @@ const _regSymbol = (symbol, hash) => {
     return symbol;
 };
 
-/**
- * This is called by qwik-loader to run a QRL. It has to be synchronous.
- *
- * @internal
- */
-const _run = (...args) => {
-    // This will already check container
-    const [runQrl] = useLexicalScope();
-    const context = getInvokeContext();
-    const hostElement = context.$hostElement$;
-    if (hostElement) {
-        return retryOnPromise(() => {
-            if (!(hostElement.flags & 32 /* VNodeFlags.Deleted */)) {
-                return catchError(runQrl(...args), (err) => {
-                    const container = (context.$container$ ||= getDomContainer(hostElement.node));
-                    if (container) {
-                        container.handleError(err, hostElement);
-                    }
-                    else {
-                        throw err;
-                    }
-                });
-            }
-        });
-    }
-};
-
 /** @file Shared types */
 /** @internal */
 function isStringifiable(value) {
@@ -8469,6 +8828,14 @@ async function serialize(serializationContext) {
         else if (value instanceof SubscriptionData) {
             output(33 /* TypeIds.SubscriptionData */, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
         }
+        else if (value instanceof EffectSubscription) {
+            output(34 /* TypeIds.EffectSubscription */, [
+                value.consumer,
+                value.property,
+                value.backRef,
+                value.data,
+            ]);
+        }
         else if (isStore(value)) {
             if (isResource(value)) {
                 // let render know about the resource
@@ -8918,7 +9285,7 @@ function filterEffectBackRefs(effectBackRef) {
     let effectBackRefToSerialize = undefined;
     if (effectBackRef) {
         for (const [effectProp, effect] of effectBackRef) {
-            if (effect[2 /* EffectSubscriptionProp.BACK_REF */]) {
+            if (effect.backRef) {
                 effectBackRefToSerialize ||= new Map();
                 effectBackRefToSerialize.set(effectProp, effect);
             }
@@ -9087,6 +9454,7 @@ class _SharedContainer {
     $renderPromise$ = null;
     $resolveRenderPromise$ = null;
     $cursorCount$ = 0;
+    $pausedCursorCount$ = 0;
     constructor(serverData, locale) {
         this.$serverData$ = serverData;
         this.$locale$ = locale;
@@ -9125,8 +9493,6 @@ const applyQwikComponentBody = (ssr, jsx, component) => {
         host.setProp(ELEMENT_KEY, jsx.key);
     }
     return executeComponent(ssr, host, host, componentQrl, srcProps);
-    // const componentChore = ssr.$scheduler$(ChoreType.COMPONENT, host, componentQrl, srcProps);
-    // return getChorePromise(componentChore);
 };
 
 class ParentComponentData {
@@ -9276,7 +9642,7 @@ function processJSXNode(ssr, enqueue, value, options) {
                     children != null && enqueue(children);
                 }
                 else if (type === Slot) {
-                    const componentFrame = options.parentComponentFrame || ssr.unclaimedProjectionComponentFrameQueue.shift();
+                    const componentFrame = options.parentComponentFrame;
                     if (componentFrame) {
                         const compId = componentFrame.componentNode.id || '';
                         const projectionAttrs = isDev ? [DEBUG_TYPE, "P" /* VirtualType.Projection */] : [];
@@ -9398,6 +9764,9 @@ function toSsrAttrs(record, options) {
         if (isPreventDefault(key)) {
             addPreventDefaultEventToSerializationContext(options.serializationCtx, key);
         }
+        else if (key === ITERATION_ITEM_SINGLE || key === ITERATION_ITEM_MULTI) {
+            value = options.serializationCtx.$addRoot$(value);
+        }
         value = serializeAttribute(key, value, options.styleScopedId);
         ssrAttrs.push(key, value);
     };
@@ -9714,7 +10083,7 @@ const inflate = (container, target, typeId, data) => {
             const d = data;
             let owner = d[0];
             if (owner === _UNINITIALIZED) {
-                owner = new JSXNodeImpl(Fragment, d[1], d[2]);
+                owner = new JSXNodeImpl(Fragment, d[1], d[2], null, null);
                 owner._proxy = propsProxy;
             }
             propsProxy[_OWNER] = owner;
@@ -9726,6 +10095,15 @@ const inflate = (container, target, typeId, data) => {
             effectData.data.$isConst$ = data[1];
             break;
         }
+        case 34 /* TypeIds.EffectSubscription */: {
+            const effectSub = target;
+            const d = data;
+            effectSub.consumer = d[0];
+            effectSub.property = d[1];
+            effectSub.backRef = d[2];
+            effectSub.data = d[3];
+            break;
+        }
         default:
             throw qError(16 /* QError.serializeErrorNotImplemented */, [typeId]);
     }
@@ -9770,7 +10148,8 @@ function inflateWrappedSignalValue(signal) {
         let hasAttrValue = false;
         if (effects) {
             // Find string keys (attribute names) in the effect back refs
-            for (const [_, key] of effects) {
+            for (const effect of effects) {
+                const key = effect.property;
                 if (isString(key)) {
                     // This is an attribute name, try to read its value
                     const attrValue = vnode_getProp(hostVNode, key, null);
@@ -10399,7 +10778,7 @@ class DomContainer extends _SharedContainer {
     };
     getSyncFn(id) {
         const fn = this.$qFuncs$[id];
-        assertTrue(typeof fn === 'function', 'Invalid reference: ' + id);
+        isDev && assertTrue(typeof fn === 'function', 'Invalid reference: ' + id);
         return fn;
     }
     $appendStyle$(content, styleId, host, scoped) {
@@ -10441,6 +10820,81 @@ class DomContainer extends _SharedContainer {
     }
 }
 
+/** @internal */
+const useTaskQrl = (qrl, opts) => {
+    const { val, set, iCtx, i } = useSequentialScope();
+    if (val) {
+        return;
+    }
+    assertQrl(qrl);
+    set(1);
+    const taskFlags = 
+    // enabled by default
+    opts?.deferUpdates === false ? 0 : 16 /* TaskFlags.RENDER_BLOCKING */;
+    const task = new Task(8 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */ | taskFlags, i, iCtx.$hostElement$, qrl, undefined, null);
+    // In V2 we add the task to the sequential scope. We need to do this
+    // in order to be able to retrieve it later when the parent element is
+    // deleted and we need to be able to release the task subscriptions.
+    set(task);
+    const container = iCtx.$container$;
+    const { $waitOn$: waitOn } = iCtx;
+    const result = maybeThen(waitOn, () => runTask(task, container, iCtx.$hostElement$));
+    if (isPromise(result)) {
+        iCtx.$waitOn$ = result;
+    }
+};
+const runTask = (task, container, host) => {
+    task.$flags$ &= -9 /* TaskFlags.DIRTY */;
+    cleanupDestroyable(task);
+    const iCtx = newInvokeContext(container.$locale$, host, TaskEvent);
+    iCtx.$container$ = container;
+    const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
+    const track = trackFn(task, container);
+    const [cleanup] = cleanupFn(task, (reason) => container.handleError(reason, host));
+    const taskApi = { track, cleanup };
+    return safeCall(() => taskFn(taskApi), cleanup, (err) => {
+        // If a Promise is thrown, that means we need to re-run the task.
+        if (isPromise(err)) {
+            return err.then(() => runTask(task, container, host));
+        }
+        else {
+            container.handleError(err, host);
+        }
+    });
+};
+class Task extends BackRef {
+    $flags$;
+    $index$;
+    $el$;
+    $qrl$;
+    $state$;
+    $destroy$;
+    constructor($flags$, $index$, $el$, $qrl$, $state$, $destroy$) {
+        super();
+        this.$flags$ = $flags$;
+        this.$index$ = $index$;
+        this.$el$ = $el$;
+        this.$qrl$ = $qrl$;
+        this.$state$ = $state$;
+        this.$destroy$ = $destroy$;
+    }
+}
+/** @internal */
+const isTask = (value) => {
+    return value instanceof Task;
+};
+/**
+ * Used internally as a qrl event handler to schedule a task.
+ *
+ * @internal
+ */
+const scheduleTask = (_event, element) => {
+    const [task] = useLexicalScope();
+    const container = getDomContainer(element);
+    task.$flags$ |= 8 /* TaskFlags.DIRTY */;
+    markVNodeDirty(container, task.$el$, 1 /* ChoreBits.TASKS */);
+};
+
 const throwIfQRLNotResolved = (qrl) => {
     const resolved = qrl.resolved;
     if (!resolved) {
@@ -10457,18 +10911,16 @@ const isSignal = (value) => {
     return value instanceof SignalImpl;
 };
 const ensureContainsSubscription = (array, effectSubscription) => {
-    !array.has(effectSubscription) && array.add(effectSubscription);
+    array.add(effectSubscription);
 };
 /** Ensure the item is in back refs set */
 const ensureContainsBackRef = (array, value) => {
-    array[2 /* EffectSubscriptionProp.BACK_REF */] ||= new Set();
-    !array[2 /* EffectSubscriptionProp.BACK_REF */].has(value) &&
-        array[2 /* EffectSubscriptionProp.BACK_REF */].add(value);
+    (array.backRef ||= new Set()).add(value);
 };
 const addQrlToSerializationCtx = (effectSubscriber, container) => {
-    if (!!container && !isDomContainer(container)) {
-        const effect = effectSubscriber[0 /* EffectSubscriptionProp.CONSUMER */];
-        const property = effectSubscriber[1 /* EffectSubscriptionProp.PROPERTY */];
+    if (container) {
+        const effect = effectSubscriber.consumer;
+        const property = effectSubscriber.property;
         let qrl = null;
         if (isTask(effect)) {
             qrl = effect.$qrl$;
@@ -10485,24 +10937,15 @@ const addQrlToSerializationCtx = (effectSubscriber, container) => {
     }
 };
 const scheduleEffects = (container, signal, effects) => {
-    const isBrowser = !isServerPlatform();
+    const isBrowser = import.meta.env.TEST ? !isServerPlatform() : !isServer;
     if (effects) {
-        let tasksToTrigger = null;
         const scheduleEffect = (effectSubscription) => {
-            const consumer = effectSubscription[0 /* EffectSubscriptionProp.CONSUMER */];
-            const property = effectSubscription[1 /* EffectSubscriptionProp.PROPERTY */];
-            assertDefined(container, 'Container must be defined.');
+            const consumer = effectSubscription.consumer;
+            const property = effectSubscription.property;
+            isDev && assertDefined(container, 'Container must be defined.');
             if (isTask(consumer)) {
                 consumer.$flags$ |= 8 /* TaskFlags.DIRTY */;
-                if (isBrowser) {
-                    markVNodeDirty(container, consumer.$el$, 1 /* ChoreBits.TASKS */);
-                }
-                else {
-                    // for server we run tasks sync, so they can change currently running effects
-                    // in this case we could have infinite loop if we trigger tasks here
-                    // so instead we collect them and trigger them after the effects are scheduled
-                    (tasksToTrigger ||= []).push(consumer);
-                }
+                markVNodeDirty(container, consumer.$el$, 1 /* ChoreBits.TASKS */);
             }
             else if (consumer instanceof SignalImpl) {
                 consumer.invalidate();
@@ -10517,7 +10960,7 @@ const scheduleEffects = (container, signal, effects) => {
                 }
             }
             else {
-                const effectData = effectSubscription[3 /* EffectSubscriptionProp.DATA */];
+                const effectData = effectSubscription.data;
                 if (effectData instanceof SubscriptionData) {
                     const data = effectData.data;
                     const payload = {
@@ -10541,14 +10984,10 @@ const scheduleEffects = (container, signal, effects) => {
                 }
             }
         };
-        for (const effect of effects) {
+        const effectsSnapshot = Array.from(effects);
+        for (const effect of effectsSnapshot) {
             scheduleEffect(effect);
         }
-        if (!isBrowser && container && tasksToTrigger) {
-            for (const task of tasksToTrigger) {
-                markVNodeDirty(container, task.$el$, 1 /* ChoreBits.TASKS */);
-            }
-        }
     }
 };
 /** @internal */
@@ -10779,7 +11218,8 @@ class StoreHandler {
                 this.$container$ = ctx.$container$;
             }
             else {
-                assertTrue(!ctx.$container$ || ctx.$container$ === this.$container$, 'Do not use signals across containers');
+                isDev &&
+                    assertTrue(!ctx.$container$ || ctx.$container$ === this.$container$, 'Do not use signals across containers');
             }
             const effectSubscriber = ctx.$effectSubscriber$;
             if (effectSubscriber) {
@@ -10881,7 +11321,8 @@ function addStoreEffect(target, prop, store, effectSubscription) {
     // to this signal.
     ensureContainsBackRef(effectSubscription, target);
     // TODO is this needed with the preloader?
-    addQrlToSerializationCtx(effectSubscription, store.$container$);
+    (import.meta.env.TEST ? !isDomContainer(store.$container$) : isServer) &&
+        addQrlToSerializationCtx(effectSubscription, store.$container$);
 }
 function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
     target[prop] = value;
@@ -11267,7 +11708,7 @@ function getObjectById(id, stateData) {
     if (typeof id === 'string') {
         id = parseInt(id, 10);
     }
-    assertTrue(id < stateData.length, `Invalid reference ${id} >= ${stateData.length}`);
+    isDev && assertTrue(id < stateData.length, `Invalid reference ${id} >= ${stateData.length}`);
     return stateData[id];
 }
 function _createDeserializeContainer(stateData, element) {
@@ -11526,7 +11967,7 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
             }
             if (chunk === '') {
                 // Sync QRL
-                assertDefined(_containerEl, 'Sync QRL must have container element');
+                isDev && assertDefined(_containerEl, 'Sync QRL must have container element');
                 const hash = _containerEl.getAttribute(QInstanceAttr);
                 const doc = _containerEl.ownerDocument;
                 const qFuncs = getQFuncs(doc, hash);
@@ -11768,8 +12209,8 @@ const _qrlSync = function (fn, serializedFn) {
 const componentQrl = (componentQrl) => {
     // Return a QComponent Factory function.
     function QwikComponent(props, key, flags = 0) {
-        assertQrl(componentQrl);
-        assertNumber(flags, 'The Qwik Component was not invoked correctly');
+        isDev && assertQrl(componentQrl);
+        isDev && assertNumber(flags, 'The Qwik Component was not invoked correctly');
         const hash = qTest ? 'sX' : componentQrl.$hash$.slice(0, 4);
         const finalKey = hash + ':' + (key ? key : '');
         const InnerCmp = () => { };
@@ -12713,15 +13154,20 @@ const useVisibleTaskQrl = (qrl, opts) => {
         return;
     }
     assertQrl(qrl);
-    const task = new Task(1 /* TaskFlags.VISIBLE_TASK */ | 8 /* TaskFlags.DIRTY */, i, iCtx.$hostElement$, qrl, undefined, null);
-    set(task);
-    useRegisterTaskEvents(task, eagerness);
+    let flags;
     if (!isServerPlatform()) {
-        if (!qrl.resolved) {
-            qrl.resolve();
-        }
+        // In DOM we immediately execute
+        flags = 1 /* TaskFlags.VISIBLE_TASK */ | 8 /* TaskFlags.DIRTY */;
+        qrl.resolve();
         markVNodeDirty(iCtx.$container$, iCtx.$hostElement$, 1 /* ChoreBits.TASKS */);
     }
+    else {
+        // In SSR we defer execution until triggered in DOM
+        flags = 1 /* TaskFlags.VISIBLE_TASK */;
+    }
+    const task = new Task(flags, i, iCtx.$hostElement$, qrl, undefined, null);
+    set(task);
+    useRegisterTaskEvents(task, eagerness);
 };
 const useRegisterTaskEvents = (task, eagerness) => {
     if (eagerness === 'intersection-observer') {