@qwik.dev/core 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/core.prod.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.2-dev+3ddc6c7
+ * @qwik.dev/core 2.0.0-beta.3-dev+aa098fc
  * 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
@@ -50,9 +50,9 @@ const logWarn = () => {
 const createAndLogError = (asyncThrow, message, ...optionalParams) => {
     const err = message instanceof Error ? message : new Error(message);
     return console.error("%cQWIK ERROR", "", err.message, ...optionalParams, err.stack), 
-    asyncThrow && setTimeout((() => {
+    asyncThrow && setTimeout(() => {
         throw err;
-    }), 0), err;
+    }, 0), err;
 };
 
 const codeToText = code => `Code(Q${code}) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L${8 + code}`;
@@ -196,18 +196,18 @@ const createPlatform = () => ({
         const urlDoc = toUrl(containerEl.ownerDocument, containerEl, url).toString();
         const urlCopy = new URL(urlDoc);
         urlCopy.hash = "";
-        return import(urlCopy.href).then((mod => mod[symbolName]));
+        return import(urlCopy.href).then(mod => mod[symbolName]);
     },
-    raf: fn => new Promise((resolve => {
-        requestAnimationFrame((() => {
+    raf: fn => new Promise(resolve => {
+        requestAnimationFrame(() => {
             resolve(fn());
-        }));
-    })),
-    nextTick: fn => new Promise((resolve => {
-        setTimeout((() => {
+        });
+    }),
+    nextTick: fn => new Promise(resolve => {
+        setTimeout(() => {
             resolve(fn());
-        }));
-    })),
+        });
+    }),
     chunkForSymbol: (symbolName, chunk) => [ symbolName, chunk ?? "_" ]
 });
 
@@ -250,9 +250,9 @@ const shouldNotError = reason => {
     throwErrorAndStop(reason);
 };
 
-const delay = timeout => new Promise((resolve => {
+const delay = timeout => new Promise(resolve => {
     setTimeout(resolve, timeout);
-}));
+});
 
 function retryOnPromise(fn, retryCount = 0) {
     const retryOrThrow = e => {
@@ -263,7 +263,7 @@ function retryOnPromise(fn, retryCount = 0) {
     };
     try {
         const result = fn();
-        return isPromise(result) ? result.catch((e => retryOrThrow(e))) : result;
+        return isPromise(result) ? result.catch(e => retryOrThrow(e)) : result;
     } catch (e) {
         if (isDev && isServer && e instanceof ReferenceError && e.message.includes("window")) {
             throw e.message = 'It seems like you forgot to add "if (isBrowser) {...}" here:' + e.message, 
@@ -361,7 +361,7 @@ class SignalImpl {
         this.$untrackedValue$ = value;
     }
     get value() {
-        return setupSignalValueAccess(this, (() => this.$effects$ ||= new Set), (() => this.untrackedValue));
+        return setupSignalValueAccess(this, () => this.$effects$ ||= new Set, () => this.untrackedValue);
     }
     set value(value) {
         value !== this.$untrackedValue$ && (this.$untrackedValue$ = value, triggerEffects(this.$container$, this, this.$effects$));
@@ -370,7 +370,7 @@ class SignalImpl {
         qDev;
     }
     toString() {
-        return isDev ? `[${this.constructor.name}${1 & this.$flags$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + (Array.from(this.$effects$ || []).map((e => "\n -> " + pad(qwikDebugToString(e[0]), "    "))).join("\n") || "") : this.constructor.name;
+        return isDev ? `[${this.constructor.name}${1 & this.$flags$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + (Array.from(this.$effects$ || []).map(e => "\n -> " + pad(qwikDebugToString(e[0]), "    ")).join("\n") || "") : this.constructor.name;
     }
     toJSON() {
         return {
@@ -428,7 +428,7 @@ class WrappedSignalImpl extends SignalImpl {
         if (!(1 & this.$flags$)) {
             return !1;
         }
-        const untrackedValue = trackSignal((() => this.$func$(...this.$args$)), this, ".", this.$container$);
+        const untrackedValue = trackSignal(() => this.$func$(...this.$args$), this, ".", this.$container$);
         const didChange = untrackedValue !== this.$untrackedValue$;
         return didChange && (this.$untrackedValue$ = untrackedValue), didChange;
     }
@@ -546,7 +546,7 @@ const trackSignal = (fn, subscriber, property, container, data) => {
 };
 
 const trackSignalAndAssignHost = (value, host, property, container, data) => (value instanceof WrappedSignalImpl && value.$hostElement$ !== host && host && (value.$hostElement$ = host), 
-trackSignal((() => value.value), host, property, container, data));
+trackSignal(() => value.value, host, property, container, data));
 
 const _getContextElement = () => {
     const iCtx = tryGetInvokeContext();
@@ -696,7 +696,7 @@ const ERROR_CONTEXT = /*#__PURE__*/ createContextId("qk-error");
 
 const isRecoverable = err => !(err && err instanceof Error && "plugin" in err);
 
-const version = "2.0.0-beta.2-dev+3ddc6c7";
+const version = "2.0.0-beta.3-dev+aa098fc";
 
 const EMPTY_ARRAY = [];
 
@@ -727,7 +727,7 @@ const qrl = (chunkOrFn, symbol, lexicalScopeCapture = EMPTY_ARRAY, stackOffset =
                 {
                     const ref = "QWIK-SELF";
                     const frames = new Error(ref).stack.split("\n");
-                    const start = frames.findIndex((f => f.includes(ref)));
+                    const start = frames.findIndex(f => f.includes(ref));
                     match = frames[start + 2 + stackOffset].match(EXTRACT_FILE_NAME), chunk = match ? match[1] : "main";
                 }
             }
@@ -869,7 +869,7 @@ class SerializerSignalImpl extends ComputedSignalImpl {
         const {deserialize, initial} = arg;
         const update = arg.update;
         const currentValue = this.$untrackedValue$ === NEEDS_COMPUTATION ? initial : this.$untrackedValue$;
-        const untrackedValue = trackSignal((() => this.$didInitialize$ ? update?.(currentValue) : deserialize(currentValue)), this, ".", this.$container$);
+        const untrackedValue = trackSignal(() => this.$didInitialize$ ? update?.(currentValue) : deserialize(currentValue), this, ".", this.$container$);
         const didChange = this.$didInitialize$ && "undefined" !== untrackedValue || untrackedValue !== this.$untrackedValue$;
         return this.$flags$ &= -2, this.$didInitialize$ = !0, didChange && (this.$untrackedValue$ = untrackedValue), 
         didChange;
@@ -1012,7 +1012,7 @@ function getEffects(target, prop, storeEffects) {
 const trackFn = (target, container) => (obj, prop) => {
     const ctx = newInvokeContext();
     return ctx.$effectSubscriber$ = getSubscriber(target, ":"), ctx.$container$ = container || void 0, 
-    invoke(ctx, (() => {
+    invoke(ctx, () => {
         if (isFunction(obj)) {
             return obj();
         }
@@ -1027,21 +1027,21 @@ const trackFn = (target, container) => (obj, prop) => {
             obj;
         }
         throw qError(2);
-    }));
+    });
 };
 
 const cleanupFn = (target, handleError) => {
     let cleanupFns = null;
     return [ fn => {
-        "function" == typeof fn && (cleanupFns || (cleanupFns = [], target.$destroy$ = noSerialize((() => {
-            target.$destroy$ = null, cleanupFns.forEach((fn => {
+        "function" == typeof fn && (cleanupFns || (cleanupFns = [], target.$destroy$ = noSerialize(() => {
+            target.$destroy$ = null, cleanupFns.forEach(fn => {
                 try {
                     fn();
                 } catch (err) {
                     handleError(err);
                 }
-            }));
-        }))), cleanupFns.push(fn));
+            });
+        })), cleanupFns.push(fn));
     }, cleanupFns ?? [] ];
 };
 
@@ -1057,7 +1057,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         super(container, fn, flags);
     }
     get loading() {
-        return setupSignalValueAccess(this, (() => this.$loadingEffects$ ||= new Set), (() => this.untrackedLoading));
+        return setupSignalValueAccess(this, () => this.$loadingEffects$ ||= new Set, () => this.untrackedLoading);
     }
     set untrackedLoading(value) {
         value !== this.$untrackedLoading$ && (this.$untrackedLoading$ = value, this.$container$?.$scheduler$(7, null, this, this.$loadingEffects$));
@@ -1066,7 +1066,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         return this.$untrackedLoading$;
     }
     get error() {
-        return setupSignalValueAccess(this, (() => this.$errorEffects$ ||= new Set), (() => this.untrackedError));
+        return setupSignalValueAccess(this, () => this.$errorEffects$ ||= new Set, () => this.untrackedError);
     }
     set untrackedError(value) {
         value !== this.$untrackedError$ && (this.$untrackedError$ = value, this.$container$?.$scheduler$(7, null, this, this.$errorEffects$));
@@ -1080,17 +1080,17 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         }
         const computeQrl = this.$computeQrl$;
         throwIfQRLNotResolved(computeQrl);
-        const [cleanup] = cleanupFn(this, (err => this.$container$?.handleError(err, null)));
+        const [cleanup] = cleanupFn(this, err => this.$container$?.handleError(err, null));
         const untrackedValue = this.$promiseValue$ ?? computeQrl.getFn()({
             track: trackFn(this, this.$container$),
             cleanup
         });
         if (isPromise(untrackedValue)) {
-            throw this.untrackedLoading = !0, this.untrackedError = null, untrackedValue.then((promiseValue => {
+            throw this.untrackedLoading = !0, this.untrackedError = null, untrackedValue.then(promiseValue => {
                 this.$promiseValue$ = promiseValue, this.untrackedLoading = !1, this.untrackedError = null;
-            })).catch((err => {
+            }).catch(err => {
                 this.untrackedLoading = !1, this.untrackedError = err;
-            }));
+            });
         }
         this.$promiseValue$ = null, this.$flags$ &= -2;
         const didChange = untrackedValue !== this.$untrackedValue$;
@@ -1410,24 +1410,24 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         const inlineComponent = componentQRL;
         componentFn = () => invokeApply(iCtx, inlineComponent, [ props || EMPTY_OBJ ]);
     }
-    const executeComponentWithPromiseExceptionRetry = (retryCount = 0) => safeCall((() => (isInlineComponent || (container.setHostProp(renderHost, "q:seqIdx", null), 
-    container.setHostProp(renderHost, ":onIdx", null), container.setHostProp(renderHost, "q:props", props)), 
-    vnode_isVNode(renderHost) && clearAllEffects(container, renderHost), componentFn(props))), (jsx => {
+    const executeComponentWithPromiseExceptionRetry = (retryCount = 0) => safeCall(() => (isInlineComponent || (container.setHostProp(renderHost, "q:seqIdx", null), 
+    container.setHostProp(renderHost, ":onIdx", null)), vnode_isVNode(renderHost) && clearAllEffects(container, renderHost), 
+    componentFn(props)), jsx => {
         const useOnEvents = container.getHostProp(renderHost, ":on");
         return useOnEvents ? addUseOnEvents(jsx, useOnEvents) : jsx;
-    }), (err => {
+    }, err => {
         if (isPromise(err) && retryCount < 100) {
-            return err.then((() => executeComponentWithPromiseExceptionRetry(retryCount++)));
+            return err.then(() => executeComponentWithPromiseExceptionRetry(retryCount++));
         }
         throw err;
-    }));
+    });
     return executeComponentWithPromiseExceptionRetry();
 };
 
 function addUseOnEvents(jsx, useOnEvents) {
     const jsxElement = findFirstStringJSX(jsx);
     let jsxResult = jsx;
-    return maybeThen(jsxElement, (jsxElement => {
+    return maybeThen(jsxElement, jsxElement => {
         let isInvisibleComponent = !1;
         jsxElement || (isInvisibleComponent = !0);
         for (const key in useOnEvents) {
@@ -1448,7 +1448,7 @@ function addUseOnEvents(jsx, useOnEvents) {
             }
         }
         return jsxResult;
-    }));
+    });
 }
 
 function addUseOnEvent(jsxElement, key, value) {
@@ -1472,10 +1472,10 @@ function findFirstStringJSX(jsx) {
             queue.push(...jsx);
         } else {
             if (isPromise(jsx)) {
-                return maybeThen(jsx, (jsx => findFirstStringJSX(jsx)));
+                return maybeThen(jsx, jsx => findFirstStringJSX(jsx));
             }
             if (isSignal(jsx)) {
-                return findFirstStringJSX(untrack((() => jsx.value)));
+                return findFirstStringJSX(untrack(() => jsx.value));
             }
         }
     }
@@ -1531,7 +1531,12 @@ async function _walkJSX(ssr, value, options) {
             const value = stack.pop();
             if (value instanceof ParentComponentData) {
                 options.currentStyleScoped = value.$scopedStyle$, options.parentComponentFrame = value.$componentFrame$;
-            } else if (value !== MaybeAsyncSignal) {
+            } else {
+                if (value === MaybeAsyncSignal) {
+                    const trackFn = stack.pop();
+                    await retryOnPromise(() => stack.push(trackFn()));
+                    continue;
+                }
                 if ("function" != typeof value) {
                     processJSXNode(ssr, enqueue, value, {
                         styleScoped: options.currentStyleScoped,
@@ -1544,9 +1549,6 @@ async function _walkJSX(ssr, value, options) {
                     }
                     await value.apply(ssr);
                 }
-            } else {
-                const trackFn = stack.pop();
-                await retryOnPromise((() => stack.push(trackFn())));
             }
         }
     })();
@@ -1569,20 +1571,20 @@ function processJSXNode(ssr, enqueue, value, options) {
         } else if (isSignal(value)) {
             ssr.openFragment(isDev ? [ DEBUG_TYPE, "S" ] : EMPTY_ARRAY);
             const signalNode = ssr.getOrCreateLastNode();
-            enqueue(ssr.closeFragment), enqueue((() => trackSignalAndAssignHost(value, signalNode, ".", ssr))), 
+            enqueue(ssr.closeFragment), enqueue(() => trackSignalAndAssignHost(value, signalNode, ".", ssr)), 
             enqueue(MaybeAsyncSignal);
         } else if (isPromise(value)) {
             ssr.openFragment(isDev ? [ DEBUG_TYPE, "A" ] : EMPTY_ARRAY), enqueue(ssr.closeFragment), 
-            enqueue(value), enqueue(Promise), enqueue((() => ssr.commentNode("qkssr-f")));
+            enqueue(value), enqueue(Promise), enqueue(() => ssr.commentNode("qkssr-f"));
         } else if (isAsyncGenerator(value)) {
-            enqueue((async () => {
+            enqueue(async () => {
                 for await (const chunk of value) {
                     await _walkJSX(ssr, chunk, {
                         currentStyleScoped: options.styleScoped,
                         parentComponentFrame: options.parentComponentFrame
                     }), ssr.commentNode("qkssr-f");
                 }
-            }));
+            });
         } else {
             const jsx = value;
             const type = jsx.type;
@@ -1685,10 +1687,10 @@ function toSsrAttrs(record, anotherRecord, serializationCtx, pushMergedEventProp
             }
             const eventValue = setEvent(serializationCtx, key, value);
             eventValue && ssrAttrs.push(jsxEventToHtmlAttribute(key), eventValue);
-        } else {
-            isSignal(value) ? isClassAttr(key) ? ssrAttrs.push(key, [ value, styleScopedId ]) : ssrAttrs.push(key, value) : (isPreventDefault(key) && addPreventDefaultEventToSerializationContext(serializationCtx, key), 
-            value = serializeAttribute(key, value, styleScopedId), ssrAttrs.push(key, value));
+            continue;
         }
+        isSignal(value) ? isClassAttr(key) ? ssrAttrs.push(key, [ value, styleScopedId ]) : ssrAttrs.push(key, value) : (isPreventDefault(key) && addPreventDefaultEventToSerializationContext(serializationCtx, key), 
+        value = serializeAttribute(key, value, styleScopedId), ssrAttrs.push(key, value));
     }
     return null != key && ssrAttrs.push("q:key", key), ssrAttrs;
 }
@@ -1772,26 +1774,26 @@ const useTaskQrl = qrl => {
     const task = new Task(10, i, iCtx.$hostElement$, qrl, void 0, null);
     set(task);
     const promise = iCtx.$container$.$scheduler$(3, task);
-    isPromise(promise) && promise.catch((() => {}));
+    isPromise(promise) && promise.catch(() => {});
 };
 
 const runTask = (task, container, host) => {
     task.$flags$ &= -9, cleanupTask(task);
     const iCtx = newInvokeContext(container.$locale$, host, void 0, "qTask");
     iCtx.$container$ = container;
-    const taskFn = task.$qrl$.getFn(iCtx, (() => clearAllEffects(container, task)));
+    const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
     const track = trackFn(task, container);
-    const [cleanup] = cleanupFn(task, (reason => container.handleError(reason, host)));
+    const [cleanup] = cleanupFn(task, reason => container.handleError(reason, host));
     const taskApi = {
         track,
         cleanup
     };
-    return safeCall((() => taskFn(taskApi)), cleanup, (err => {
+    return safeCall(() => taskFn(taskApi), cleanup, err => {
         if (isPromise(err)) {
-            return err.then((() => runTask(task, container, host)));
+            return err.then(() => runTask(task, container, host));
         }
         throw err;
-    }));
+    });
 };
 
 const cleanupTask = task => {
@@ -1835,11 +1837,11 @@ const _jsxSorted = (type, varProps, constProps, children, flags, key) => {
 
 const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
     let sortedProps;
-    return sortedProps = varProps ? Object.fromEntries(untrack((() => Object.entries(varProps))).filter((entry => {
+    return sortedProps = varProps ? Object.fromEntries(untrack(() => Object.entries(varProps)).filter(entry => {
         const attr = entry[0];
         return "children" === attr ? (children ??= entry[1], !1) : "key" === attr ? (key = entry[1], 
         !1) : !constProps || !(attr in constProps) || /^on[A-Z].*\$$/.test(attr);
-    })).sort((([a], [b]) => a < b ? -1 : 1))) : "string" == typeof type ? EMPTY_OBJ : {}, 
+    }).sort(([a], [b]) => a < b ? -1 : 1)) : "string" == typeof type ? EMPTY_OBJ : {}, 
     constProps && "children" in constProps && (children = constProps.children, constProps.children = void 0), 
     _jsxSorted(type, sortedProps, constProps, children, flags, key, dev);
 };
@@ -1910,10 +1912,10 @@ const Fragment = props => props.children;
 
 const jsxDEV = (type, props, key, _isStatic, opts) => {
     const processed = null == key ? null : String(key);
-    const children = untrack((() => {
+    const children = untrack(() => {
         const c = props.children;
         return "string" == typeof type && delete props.children, c;
-    }));
+    });
     isString(type) && "className" in props && (props.class = props.className, delete props.className);
     const node = new JSXNodeImpl(type, props, null, children, 0, processed);
     return node.dev = {
@@ -2000,7 +2002,7 @@ const mapApp_findIndx = (array, key, start) => {
 
 const mapArray_set = (array, key, value, start) => {
     const indx = mapApp_findIndx(array, key, start);
-    indx >= 0 ? null == value ? array.splice(indx, 2) : array[indx + 1] = value : null != value && array.splice(~indx, 0, key, value);
+    indx >= 0 ? null == value ? array.splice(indx, 2) : array[indx + 1] = value : null != value && array.splice(-1 ^ indx, 0, key, value);
 };
 
 const mapArray_get = (array, key, start) => {
@@ -2198,7 +2200,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             const jsxNode = asyncQueue.shift();
             const vHostNode = asyncQueue.shift();
             if (isPromise(jsxNode)) {
-                return jsxNode.then((jsxNode => (diff(jsxNode, vHostNode), drainAsyncQueue())));
+                return jsxNode.then(jsxNode => (diff(jsxNode, vHostNode), drainAsyncQueue()));
             }
             diff(jsxNode, vHostNode);
         }
@@ -2285,7 +2287,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     }
     function expectProjection() {
         const slotName = jsxValue.key;
-        vCurrent = vnode_getProp(vParent, slotName, (id => vnode_locate(container.rootVNode, id))), 
+        vCurrent = vnode_getProp(vParent, slotName, id => vnode_locate(container.rootVNode, id)), 
         vCurrent = vCurrent && 32 & vCurrent[0] ? null : vCurrent, null == vCurrent && (vNewNode = vnode_newVirtual(), 
         isDev && vnode_setProp(vNewNode, DEBUG_TYPE, "P"), isDev && vnode_setProp(vNewNode, "q:code", "expectProjection"), 
         vnode_setProp(vNewNode, QSlot, slotName), vnode_setProp(vNewNode, "q:sparent", vParent), 
@@ -2351,43 +2353,43 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                         htmlEvent && vnode_setAttr(journal, vNewNode, htmlEvent, "");
                     }
                     needsQDispatchEventPatch = !0;
-                } else {
-                    if ("ref" === key) {
-                        if (isSignal(value)) {
-                            value.value = element;
-                            continue;
-                        }
-                        if ("function" == typeof value) {
-                            value(element);
-                            continue;
-                        }
-                        if (null == value) {
-                            continue;
-                        }
-                        throw qError(15, [ currentFile ]);
-                    }
+                    continue;
+                }
+                if ("ref" === key) {
                     if (isSignal(value)) {
-                        const signalData = new SubscriptionData({
-                            $scopedStyleIdPrefix$: scopedStyleIdPrefix,
-                            $isConst$: !0
-                        });
-                        value = trackSignalAndAssignHost(value, vNewNode, key, container, signalData);
+                        value.value = element;
+                        continue;
                     }
-                    if (key !== dangerouslySetInnerHTML) {
-                        if ("textarea" !== elementName || "value" !== key) {
-                            value = serializeAttribute(key, value, scopedStyleIdPrefix), null != value && element.setAttribute(key, String(value));
-                        } else {
-                            if (value && "string" != typeof value) {
-                                if (isDev) {
-                                    throw qError(23, [ currentFile, value ]);
-                                }
-                                continue;
+                    if ("function" == typeof value) {
+                        value(element);
+                        continue;
+                    }
+                    if (null == value) {
+                        continue;
+                    }
+                    throw qError(15, [ currentFile ]);
+                }
+                if (isSignal(value)) {
+                    const signalData = new SubscriptionData({
+                        $scopedStyleIdPrefix$: scopedStyleIdPrefix,
+                        $isConst$: !0
+                    });
+                    value = trackSignalAndAssignHost(value, vNewNode, key, container, signalData);
+                }
+                if (key !== dangerouslySetInnerHTML) {
+                    if ("textarea" !== elementName || "value" !== key) {
+                        value = serializeAttribute(key, value, scopedStyleIdPrefix), null != value && element.setAttribute(key, String(value));
+                    } else {
+                        if (value && "string" != typeof value) {
+                            if (isDev) {
+                                throw qError(23, [ currentFile, value ]);
                             }
-                            element.value = escapeHTML(value || "");
+                            continue;
                         }
-                    } else {
-                        element.innerHTML = value, element.setAttribute("q:container", "html");
+                        element.value = escapeHTML(value || "");
                     }
+                } else {
+                    element.innerHTML = value, element.setAttribute("q:container", "html");
                 }
             }
         }
@@ -2484,12 +2486,12 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             const eventProp = ":" + scope.substring(1) + ":" + eventName;
             const qrls = [ vnode_getProp(vNode, eventProp, null), vnode_getProp(vNode, HANDLER_PREFIX + eventProp, null) ];
             let returnValue = !1;
-            return qrls.flat(2).forEach((qrl => {
+            return qrls.flat(2).forEach(qrl => {
                 if (qrl) {
                     const value = container.$scheduler$(2, vNode, qrl, [ event, element ]);
                     returnValue = returnValue || !0 === value;
                 }
-            })), returnValue;
+            }), returnValue;
         }));
     }
     function registerQwikLoaderEvent(eventName) {
@@ -2541,9 +2543,12 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             host = vNewNode, shouldRender = !0) : (vNewNode = retrieveChildWithKey(null, lookupKey), 
             vNewNode ? vnode_insertBefore(journal, vParent, vNewNode, vCurrent) : (insertNewComponent(host, componentQRL, jsxProps), 
             shouldRender = !0), host = vNewNode), host) {
-                const vNodeProps = vnode_getProp(host, "q:props", container.$getObjectById$);
-                shouldRender = shouldRender || propsDiffer(jsxProps, vNodeProps), shouldRender && (host[0] &= -33, 
-                container.$scheduler$(6, host, componentQRL, jsxProps));
+                let vNodeProps = vnode_getProp(host, "q:props", container.$getObjectById$);
+                const propsAreDifferent = propsDiffer(jsxProps, vNodeProps);
+                shouldRender = shouldRender || propsAreDifferent, shouldRender && (propsAreDifferent && (vNodeProps ? (vNodeProps[_CONST_PROPS] = jsxProps[_CONST_PROPS], 
+                vNodeProps[_VAR_PROPS] = jsxProps[_VAR_PROPS]) : jsxProps && (vnode_setProp(host, "q:props", jsxProps), 
+                vNodeProps = jsxProps)), vnode_setProp(host, "q:renderFn", componentQRL), host[0] &= -33, 
+                container.$scheduler$(6, host, componentQRL, vNodeProps));
             }
             !function(children, host) {
                 const projectionChildren = Array.isArray(children) ? children : [ children ];
@@ -2784,7 +2789,7 @@ function getResourceValueAsPromise(props) {
                 return Promise.resolve(resource._error).then(useBindInvokeContext(props.onRejected));
             }
             {
-                const resolvedValue = untrack((() => resource._resolved));
+                const resolvedValue = untrack(() => resource._resolved);
                 if (void 0 !== resolvedValue) {
                     return Promise.resolve(resolvedValue).then(useBindInvokeContext(props.onResolved));
                 }
@@ -2818,11 +2823,11 @@ const runResource = (task, container, host) => {
     task.$flags$ &= -9, cleanupTask(task);
     const iCtx = newInvokeContext(container.$locale$, host, void 0, "qResource");
     iCtx.$container$ = container;
-    const taskFn = task.$qrl$.getFn(iCtx, (() => clearAllEffects(container, task)));
+    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);
     const track = trackFn(task, container);
-    const [cleanup, cleanups] = cleanupFn(task, (reason => container.handleError(reason, host)));
+    const [cleanup, cleanups] = cleanupFn(task, reason => container.handleError(reason, host));
     const resourceTarget = unwrapStore(resource);
     const opts = {
         track,
@@ -2840,29 +2845,29 @@ const runResource = (task, container, host) => {
     resource.loading = !1, resource._state = "resolved", resource._resolved = value, 
     resource._error = void 0, resolve(value)) : (done = !0, resource.loading = !1, resource._state = "rejected", 
     resource._error = value, reject(value)), !0);
-    cleanups.push((() => {
-        if (!0 === untrack((() => resource.loading))) {
-            const value = untrack((() => resource._resolved));
+    cleanups.push(() => {
+        if (!0 === untrack(() => resource.loading)) {
+            const value = untrack(() => resource._resolved);
             setState(!0, value);
         }
-    })), invoke(iCtx, (() => {
+    }), invoke(iCtx, () => {
         resource._state = "pending", resource.loading = !isServerPlatform();
-        (resource.value = new Promise(((r, re) => {
+        (resource.value = new Promise((r, re) => {
             resolve = r, reject = re;
-        }))).catch(ignoreErrorToPreventNodeFromCrashing);
-    }));
-    const promise = safeCall((() => Promise.resolve(taskFn(opts))), (value => {
+        })).catch(ignoreErrorToPreventNodeFromCrashing);
+    });
+    const promise = safeCall(() => Promise.resolve(taskFn(opts)), value => {
         setState(!0, value);
-    }), (err => {
+    }, err => {
         if (isPromise(err)) {
-            return err.then((() => runResource(task, container, host)));
+            return err.then(() => runResource(task, container, host));
         }
         setState(!1, err);
-    }));
+    });
     const timeout = resourceTarget._timeout;
-    return timeout > 0 ? Promise.race([ promise, delay(timeout).then((() => {
+    return timeout > 0 ? Promise.race([ promise, delay(timeout).then(() => {
         setState(!1, new Error("timeout")) && cleanupTask(task);
-    })) ]) : promise;
+    }) ]) : promise;
 };
 
 const ignoreErrorToPreventNodeFromCrashing = () => {};
@@ -2878,10 +2883,10 @@ const vnode_documentPosition = (a, b, rootVNode) => {
     let aDepth = -1;
     let bDepth = -1;
     for (;a; ) {
-        a = (aVNodePath[++aDepth] = a)[1] || rootVNode && vnode_getProp(a, "q:sparent", (id => vnode_locate(rootVNode, id)));
+        a = (aVNodePath[++aDepth] = a)[1] || rootVNode && vnode_getProp(a, "q:sparent", id => vnode_locate(rootVNode, id));
     }
     for (;b; ) {
-        b = (bVNodePath[++bDepth] = b)[1] || rootVNode && vnode_getProp(b, "q:sparent", (id => vnode_locate(rootVNode, id)));
+        b = (bVNodePath[++bDepth] = b)[1] || rootVNode && vnode_getProp(b, "q:sparent", id => vnode_locate(rootVNode, id));
     }
     for (;aDepth >= 0 && bDepth >= 0; ) {
         if ((a = aVNodePath[aDepth]) !== (b = bVNodePath[bDepth])) {
@@ -2897,7 +2902,7 @@ const vnode_documentPosition = (a, b, rootVNode) => {
                     return -1;
                 }
             } while (cursor);
-            return rootVNode && vnode_getProp(b, "q:sparent", (id => vnode_locate(rootVNode, id))) ? -1 : 1;
+            return rootVNode && vnode_getProp(b, "q:sparent", id => vnode_locate(rootVNode, id)) ? -1 : 1;
         }
         aDepth--, bDepth--;
     }
@@ -2931,9 +2936,9 @@ const ssrNodeDocumentPosition = (a, b) => {
 
 const DEBUG = !1;
 
-const getPromise = chore => chore.$promise$ ||= new Promise((resolve => {
+const getPromise = chore => chore.$promise$ ||= new Promise(resolve => {
     chore.$resolve$ = resolve;
-}));
+});
 
 const createScheduler = (container, scheduleDrain, journalFlush) => {
     const choreQueue = [];
@@ -2983,11 +2988,11 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
                 return sortedArray.splice(~idx, 0, value), value;
             }
             const existing = sortedArray[idx];
-            4 === existing.$type$ && (existing.$payload$ = value.$payload$);
+            existing.$payload$ !== value.$payload$ && (existing.$payload$ = value.$payload$);
             existing.$executed$ && (existing.$executed$ = !1);
             return existing;
         }(choreQueue, chore, container.rootVNode || null), !drainScheduled && runLater && (drainScheduled = !0, 
-        schedule(16), scheduleDrain()?.catch?.((() => {})));
+        schedule(16), scheduleDrain()?.catch?.(() => {}));
         return runLater ? getPromise(chore) : drainUpTo(chore, isServer);
     };
     function drainUpTo(runUptoChore, isServer) {
@@ -2997,9 +3002,9 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
                 throw new Error("drainUpTo: max retries reached");
             }
             if (currentChore) {
-                return getPromise(currentChore).then((() => drainUpTo(runUptoChore, isServer))).catch((e => {
+                return getPromise(currentChore).then(() => drainUpTo(runUptoChore, isServer)).catch(e => {
                     container.handleError(e, currentChore?.$host$);
-                }));
+                });
             }
             const nextChore = choreQueue[0];
             if (nextChore.$executed$) {
@@ -3027,27 +3032,27 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
                 break;
 
               case 6:
-                returnValue = safeCall((() => executeComponent(container, host, host, chore.$target$, chore.$payload$)), (jsx => {
+                returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), jsx => {
                     if (isServer) {
                         return jsx;
                     }
                     {
                         const styleScopedId = container.getHostProp(host, "q:sstyle");
-                        return retryOnPromise((() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId))));
+                        return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
                     }
-                }), (err => container.handleError(err, host)));
+                }, err => container.handleError(err, host));
                 break;
 
               case 2:
                 {
                     const fn = chore.$target$.getFn();
-                    const result = retryOnPromise((() => fn(...chore.$payload$)));
+                    const result = retryOnPromise(() => fn(...chore.$payload$));
                     if (isPromise(result)) {
-                        const handled = result.finally((() => {
+                        const handled = result.finally(() => {
                             qrlRuns.splice(qrlRuns.indexOf(handled), 1);
-                        })).catch((error => {
+                        }).catch(error => {
                             container.handleError(error, chore.$host$);
-                        }));
+                        });
                         return qrlRuns.push(handled), chore.$returnValue$ = handled, chore.$resolve$?.(handled), 
                         currentChore = null, void (chore.$executed$ = !0);
                     }
@@ -3076,7 +3081,7 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
                 {
                     const parentVirtualNode = chore.$target$;
                     let jsx = chore.$payload$;
-                    isSignal(jsx) && (jsx = jsx.value), returnValue = retryOnPromise((() => vnode_diff(container, jsx, parentVirtualNode, null)));
+                    isSignal(jsx) && (jsx = jsx.value), returnValue = retryOnPromise(() => vnode_diff(container, jsx, parentVirtualNode, null));
                 }
                 break;
 
@@ -3109,18 +3114,19 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
                 {
                     const target = chore.$target$;
                     const effects = chore.$payload$;
-                    if (target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl) {
+                    const ctx = newInvokeContext();
+                    if (ctx.$container$ = container, target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl) {
                         const forceRunEffects = target.$forceRunEffects$;
-                        if (target.$forceRunEffects$ = !1, !target.$effects$?.size) {
+                        if (target.$forceRunEffects$ = !1, !effects?.size) {
                             break;
                         }
-                        returnValue = retryOnPromise((() => {
-                            (target.$computeIfNeeded$() || forceRunEffects) && triggerEffects(container, target, effects);
-                        }));
+                        returnValue = maybeThen(retryOnPromise(() => invoke.call(target, ctx, target.$computeIfNeeded$)), didChange => {
+                            if (didChange || forceRunEffects) {
+                                return retryOnPromise(() => triggerEffects(container, target, effects));
+                            }
+                        });
                     } else {
-                        returnValue = retryOnPromise((() => {
-                            triggerEffects(container, target, effects);
-                        }));
+                        returnValue = retryOnPromise(() => triggerEffects(container, target, effects));
                     }
                 }
             }
@@ -3131,7 +3137,7 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             currentChore = null, chore.$executed$ = !0, error ? container.handleError(error, host) : (chore.$returnValue$ = value, 
             chore.$resolve$?.(value));
         };
-        isPromise(returnValue) ? (chore.$promise$ = returnValue.then(after, (error => after(void 0, error))), 
+        isPromise(returnValue) ? (chore.$promise$ = returnValue.then(after, error => after(void 0, error)), 
         chore.$resolve$?.(chore.$promise$), chore.$resolve$ = void 0) : after(returnValue);
     }
     function choreComparator(a, b, rootVNode) {
@@ -3163,7 +3169,7 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             return microTypeDiff;
         }
         const idxDiff = toNumber(a.$idx$) - toNumber(b.$idx$);
-        return 0 !== idxDiff ? idxDiff : a.$target$ !== b.$target$ || a.$payload$ !== b.$payload$ || b === currentChore ? 1 : 0;
+        return 0 !== idxDiff ? idxDiff : a.$target$ !== b.$target$ ? isQrl(a.$target$) && isQrl(b.$target$) && a.$target$.$hash$ === b.$target$.$hash$ ? 0 : 1 : b === currentChore ? 1 : 0;
     }
 };
 
@@ -3199,9 +3205,9 @@ function debugChoreToString(chore) {
 function debugTrace(action, arg, currentChore, queue) {
     const lines = [ "===========================\nScheduler: " + action ];
     arg && !("$type$" in arg) && lines.push("      arg: " + String(arg).replaceAll(/\n.*/gim, "")), 
-    queue && queue.forEach((chore => {
+    queue && queue.forEach(chore => {
         lines.push(`     ${chore === arg ? ">>>" : "   "} > ` + (chore === currentChore ? "[running] " : "") + debugChoreToString(chore));
-    })), console.log(lines.join("\n") + "\n");
+    }), console.log(lines.join("\n") + "\n");
 }
 
 class _SharedContainer {
@@ -3266,14 +3272,14 @@ function processVNodeData$1(document) {
         };
     })(prototype, "nodeType");
     const attachVnodeDataAndRefs = element => {
-        Array.from(element.querySelectorAll('script[type="qwik/vnode"]')).forEach((script => {
+        Array.from(element.querySelectorAll('script[type="qwik/vnode"]')).forEach(script => {
             script.setAttribute("type", "x-qwik/vnode");
             const qContainerElement = script.closest("[q\\:container]");
             qContainerElement.qVnodeData = script.textContent, qContainerElement.qVNodeRefs = new Map;
-        })), element.querySelectorAll("[q\\:shadowroot]").forEach((parent => {
+        }), element.querySelectorAll("[q\\:shadowroot]").forEach(parent => {
             const shadowRoot = parent.shadowRoot;
             shadowRoot && attachVnodeDataAndRefs(shadowRoot);
-        }));
+        });
     };
     attachVnodeDataAndRefs(document);
     const getFastNodeType = node => {
@@ -3451,7 +3457,7 @@ class DomContainer extends _SharedContainer {
     $styleIds$=null;
     $renderCount$=0;
     constructor(element) {
-        if (super((() => this.scheduleRender()), (() => vnode_applyJournal(this.$journal$)), {}, element.getAttribute("q:locale")), 
+        if (super(() => this.scheduleRender(), () => vnode_applyJournal(this.$journal$), {}, element.getAttribute("q:locale")), 
         this.qContainer = element.getAttribute("q:container"), !this.qContainer) {
             throw qError(25);
         }
@@ -3534,22 +3540,22 @@ class DomContainer extends _SharedContainer {
         return vnode_getProp(vNode, name, getObjectById);
     }
     scheduleRender() {
-        return this.$renderCount$++, this.renderDone ||= getPlatform().nextTick((() => this.processChores())), 
-        this.renderDone.finally((() => emitEvent("qrender", {
+        return this.$renderCount$++, this.renderDone ||= getPlatform().nextTick(() => this.processChores()), 
+        this.renderDone.finally(() => emitEvent("qrender", {
             instanceHash: this.$instanceHash$,
             renderCount: this.$renderCount$
-        })));
+        }));
     }
     processChores() {
         let renderCount = this.$renderCount$;
         const result = this.$scheduler$(255);
         if (isPromise(result)) {
-            return result.then((async () => {
+            return result.then(async () => {
                 for (;renderCount !== this.$renderCount$; ) {
                     renderCount = this.$renderCount$, await this.$scheduler$(255);
                 }
                 this.renderDone = null;
-            }));
+            });
         }
         renderCount === this.$renderCount$ ? this.renderDone = null : this.processChores();
     }
@@ -3576,9 +3582,9 @@ class DomContainer extends _SharedContainer {
             const scopedStyleIds = new Set(convertScopedStyleIdsToArray(scopedStyleIdsString));
             scopedStyleIds.add(styleId), this.setHostProp(host, "q:sstyle", convertStyleIdsToString(scopedStyleIds));
         }
-        if (null == this.$styleIds$ && (this.$styleIds$ = new Set, this.element.querySelectorAll(QStyleSelector).forEach((style => {
+        if (null == this.$styleIds$ && (this.$styleIds$ = new Set, this.element.querySelectorAll(QStyleSelector).forEach(style => {
             this.$styleIds$.add(style.getAttribute(QStyle));
-        }))), !this.$styleIds$.has(styleId)) {
+        })), !this.$styleIds$.has(styleId)) {
             this.$styleIds$.add(styleId);
             const styleElement = this.document.createElement("style");
             styleElement.setAttribute(QStyle, styleId), styleElement.textContent = content, 
@@ -3721,7 +3727,7 @@ function qwikDebugToString(value) {
     return value;
 }
 
-const pad = (text, prefix) => String(text).split("\n").map(((line, idx) => (idx ? prefix : "") + line)).join("\n");
+const pad = (text, prefix) => String(text).split("\n").map((line, idx) => (idx ? prefix : "") + line).join("\n");
 
 const jsxToString = value => {
     if (isJSXNode(value)) {
@@ -3731,9 +3737,9 @@ const jsxToString = value => {
                 str += " " + key + "=" + qwikDebugToString(val);
             }
             const children = value.children;
-            null != children ? (str += ">", Array.isArray(children) ? children.forEach((child => {
+            null != children ? (str += ">", Array.isArray(children) ? children.forEach(child => {
                 str += jsxToString(child);
-            })) : str += jsxToString(children), str += "</" + value.type + ">") : str += "/>";
+            }) : str += jsxToString(children), str += "</" + value.type + ">") : str += "/>";
         }
         return str;
     }
@@ -4371,7 +4377,7 @@ const materializeFromDOM = (vParent, firstChild, vData) => {
     }
     if (vParent[5] = vChild || null, vParent[4] = vFirstChild, vData) {
         let container = null;
-        processVNodeData(vData, ((peek, consumeValue) => {
+        processVNodeData(vData, (peek, consumeValue) => {
             if (peek() === VNodeDataChar.ID) {
                 container || (container = getDomContainer(vParent[6]));
                 const id = consumeValue();
@@ -4380,7 +4386,7 @@ const materializeFromDOM = (vParent, firstChild, vData) => {
                 peek() === VNodeDataChar.BACK_REFS ? (container || (container = getDomContainer(vParent[6])), 
                 setEffectBackRefFromVNodeData(vParent, consumeValue(), container)) : consumeValue();
             }
-        }));
+        });
     }
     return vFirstChild;
 };
@@ -4400,7 +4406,8 @@ const processVNodeData = (vData, callback) => {
     let nextToConsumeIdx = 0;
     let ch = 0;
     let peekCh = 0;
-    const peek = () => 0 !== peekCh ? peekCh : peekCh = nextToConsumeIdx < vData.length ? vData.charCodeAt(nextToConsumeIdx) : 0;
+    const getChar = idx => idx < vData.length ? vData.charCodeAt(idx) : 0;
+    const peek = () => 0 !== peekCh ? peekCh : peekCh = getChar(nextToConsumeIdx);
     const consume = () => (ch = peek(), peekCh = 0, nextToConsumeIdx++, ch);
     const consumeValue = () => {
         consume();
@@ -4411,7 +4418,7 @@ const processVNodeData = (vData, callback) => {
         return vData.substring(start, nextToConsumeIdx);
     };
     for (;0 !== peek(); ) {
-        callback(peek, consumeValue, consume, nextToConsumeIdx);
+        callback(peek, consumeValue, consume, getChar, nextToConsumeIdx);
     }
 };
 
@@ -4444,7 +4451,7 @@ const vnode_setAttr = (journal, vnode, key, value) => {
                 journal && journal.push(2, vnode[6], key, value);
             }
             null == value ? props.splice(idx, 2) : props[idx + 1] = value;
-        } else if (null != value && (props.splice(~idx, 0, key, value), 1 & type)) {
+        } else if (null != value && (props.splice(-1 ^ idx, 0, key, value), 1 & type)) {
             journal && journal.push(2, vnode[6], key, value);
         }
     }
@@ -4478,7 +4485,7 @@ const vnode_setProp = (vnode, key, value) => {
     ensureElementOrVirtualVNode(vnode);
     const props = vnode_getProps(vnode);
     const idx = mapApp_findIndx(props, key, 0);
-    idx >= 0 ? props[idx + 1] = value : null != value && props.splice(~idx, 0, key, value);
+    idx >= 0 ? props[idx + 1] = value : null != value && props.splice(-1 ^ idx, 0, key, value);
 };
 
 const vnode_getPropStartIndex = vnode => {
@@ -4516,12 +4523,12 @@ function vnode_toString(depth = 20, offset = "", materialize = !1, siblings = !1
             strings.push(qwikDebugToString(vnode_getText(vnode)));
         } else if (vnode_isVirtualVNode(vnode)) {
             const attrs = [ "[" + String(vnode[0] >>> 8) + "]" ];
-            vnode_getAttrKeys(vnode).forEach((key => {
+            vnode_getAttrKeys(vnode).forEach(key => {
                 if (key !== DEBUG_TYPE) {
                     const value = vnode_getAttr(vnode, key);
                     attrs.push(" " + key + "=" + qwikDebugToString(value));
                 }
-            }));
+            });
             const name = (colorize ? "" : "") + (VirtualTypeName[vnode_getAttr(vnode, DEBUG_TYPE) || "V"] || VirtualTypeName.V) + (colorize ? "" : "");
             strings.push("<" + name + attrs.join("") + ">");
             const child = vnode_getFirstChild(vnode);
@@ -4531,10 +4538,10 @@ function vnode_toString(depth = 20, offset = "", materialize = !1, siblings = !1
             const tag = vnode_getElementName(vnode);
             const attrs = [];
             const keys = vnode_getAttrKeys(vnode);
-            keys.forEach((key => {
+            keys.forEach(key => {
                 const value = vnode_getAttr(vnode, key);
                 attrs.push(" " + key + "=" + qwikDebugToString(value));
-            }));
+            });
             const node = vnode_getNode(vnode);
             if (node) {
                 const vnodeData = node.ownerDocument.qVNodeData?.get(node);
@@ -4576,16 +4583,13 @@ function materializeFromVNodeData(vParent, vData, element, child) {
     let textIdx = 0;
     let combinedText = null;
     let container = null;
-    return processVNodeData(vData, ((peek, consumeValue, consume, nextToConsumeIdx) => {
+    return processVNodeData(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
         if (isNumber(peek())) {
-            for (;!isElement(child); ) {
+            for (;!isElement(child) || isQStyleElement(child); ) {
                 if (!(child = fastNextSibling(child))) {
                     throw qError(27, [ vData, peek(), nextToConsumeIdx ]);
                 }
             }
-            for (;isQStyleElement(child); ) {
-                child = fastNextSibling(child);
-            }
             combinedText = null, previousTextNode = null;
             let value = 0;
             for (;isNumber(peek()); ) {
@@ -4605,7 +4609,9 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         } else if (peek() === VNodeDataChar.PROPS) {
             vnode_setAttr(null, vParent, "q:props", consumeValue());
         } else if (peek() === VNodeDataChar.KEY) {
-            vnode_setAttr(null, vParent, "q:key", consumeValue());
+            let value;
+            getChar(nextToConsumeIdx + 1) === VNodeDataChar.SEPARATOR ? (consume(), value = decodeURI(consumeValue()), 
+            consume()) : value = consumeValue(), vnode_setAttr(null, vParent, "q:key", value);
         } else if (peek() === VNodeDataChar.SEQ) {
             vnode_setAttr(null, vParent, "q:seq", consumeValue());
         } else if (peek() === VNodeDataChar.SEQ_IDX) {
@@ -4629,6 +4635,9 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         } else if (peek() === VNodeDataChar.SLOT) {
             vnode_setAttr(null, vParent, QSlot, consumeValue());
         } else {
+            for (;isQStyleElement(child); ) {
+                child = fastNextSibling(child);
+            }
             const textNode = child && 3 === fastNodeType(child) ? child : null;
             null === combinedText && (combinedText = textNode ? textNode.nodeValue : null, textIdx = 0);
             let length = 0;
@@ -4640,7 +4649,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             addVNode(previousTextNode = vnode_newSharedText(previousTextNode, textNode, text)), 
             textIdx += length;
         }
-    })), vParent[5] = vLast, vFirst;
+    }), vParent[5] = vLast, vFirst;
 }
 
 const vnode_getType = vnode => {
@@ -4663,7 +4672,7 @@ const vnode_getProjectionParentComponent = (vHost, rootVNode) => {
     let projectionDepth = 1;
     for (;projectionDepth--; ) {
         for (;vHost && (!vnode_isVirtualVNode(vHost) || null === vnode_getProp(vHost, "q:renderFn", null)); ) {
-            const qSlotParent = vnode_getProp(vHost, "q:sparent", (id => vnode_locate(rootVNode, id)));
+            const qSlotParent = vnode_getProp(vHost, "q:sparent", id => vnode_locate(rootVNode, id));
             const vProjectionParent = vnode_isVirtualVNode(vHost) && qSlotParent;
             vProjectionParent && projectionDepth++, vHost = vProjectionParent || vnode_getParent(vHost);
         }
@@ -5048,10 +5057,10 @@ const allocate = (container, typeId, value) => {
       case 16:
         let resolve;
         let reject;
-        const promise = new Promise(((res, rej) => {
+        const promise = new Promise((res, rej) => {
             resolve = res, reject = rej;
-        }));
-        return resolvers.set(promise, [ resolve, reject ]), promise.catch((() => {})), promise;
+        });
+        return resolvers.set(promise, [ resolve, reject ]), promise.catch(() => {}), promise;
 
       case 19:
         const encodedLength = value.length;
@@ -5089,7 +5098,7 @@ function parseQRL(qrl) {
     const captureEnd = qrl.indexOf("]", captureStart);
     const chunk = qrl.slice(0, hashIdx > -1 ? hashIdx : captureStart);
     const symbol = captureStart > -1 ? qrl.slice(hashIdx + 1, captureStart) : qrl.slice(hashIdx + 1);
-    const captureIds = captureStart > -1 && captureEnd > -1 ? qrl.slice(captureStart + 1, captureEnd).split(" ").filter((v => v.length)).map((s => parseInt(s, 10))) : null;
+    const captureIds = captureStart > -1 && captureEnd > -1 ? qrl.slice(captureStart + 1, captureEnd).split(" ").filter(v => v.length).map(s => parseInt(s, 10)) : null;
     let qrlRef = null;
     if (chunk === QRL_RUNTIME_CHUNK) {
         const backChannel = globalThis.__qrl_back_channel__;
@@ -5100,7 +5109,7 @@ function parseQRL(qrl) {
 
 function inflateQRL(container, qrl) {
     const captureIds = qrl.$capture$;
-    return qrl.$captureRef$ = captureIds ? captureIds.map((id => container.$getObjectById$(id))) : null, 
+    return qrl.$captureRef$ = captureIds ? captureIds.map(id => container.$getObjectById$(id)) : null, 
     container.element && qrl.$setContainer$(container.element), qrl;
 }
 
@@ -5262,9 +5271,9 @@ async function serialize(serializationContext) {
             }
             $writer$.write(0 === lastIdx ? s : s.slice(lastIdx));
         } else {
-            depth++, outputArray(value, ((valueItem, idx) => {
+            depth++, outputArray(value, (valueItem, idx) => {
                 $discoverRoots$(serializationContext, valueItem, parent, idx), writeValue(valueItem);
-            })), depth--;
+            }), depth--;
         }
     };
     const addPreloadQrl = qrl => {
@@ -5348,7 +5357,7 @@ async function serialize(serializationContext) {
             } else if (isStore(value)) {
                 if (isResource(value)) {
                     serializationContext.$resources$.add(value);
-                    const forwardRefId = $resolvePromise$(value.value, $addRoot$, ((resolved, resolvedValue) => new PromiseResult(23, resolved, resolvedValue, getStoreHandler(value).$effects$)));
+                    const forwardRefId = $resolvePromise$(value.value, $addRoot$, (resolved, resolvedValue) => new PromiseResult(23, resolved, resolvedValue, getStoreHandler(value).$effects$));
                     output(1, forwardRefId);
                 } else {
                     const storeHandler = getStoreHandler(value);
@@ -5372,7 +5381,7 @@ async function serialize(serializationContext) {
             } else if (isSerializerObj(value)) {
                 const result = value[SerializerSymbol](value);
                 if (isPromise(result)) {
-                    const forwardRef = $resolvePromise$(result, $addRoot$, ((resolved, resolvedValue) => new PromiseResult(29, resolved, resolvedValue, null, null)));
+                    const forwardRef = $resolvePromise$(result, $addRoot$, (resolved, resolvedValue) => new PromiseResult(29, resolved, resolvedValue, null, null));
                     output(1, forwardRef);
                 } else {
                     depth--, writeValue(result), depth++;
@@ -5392,7 +5401,7 @@ async function serialize(serializationContext) {
             } else if (value instanceof SignalImpl) {
                 if (value instanceof SerializerSignalImpl) {
                     addPreloadQrl(value.$computeQrl$);
-                    const forwardRefId = $resolvePromise$($getCustomSerializerPromise$(value, value.$untrackedValue$), $addRoot$, ((resolved, resolvedValue) => new PromiseResult(29, resolved, resolvedValue, value.$effects$, value.$computeQrl$)));
+                    const forwardRefId = $resolvePromise$($getCustomSerializerPromise$(value, value.$untrackedValue$), $addRoot$, (resolved, resolvedValue) => new PromiseResult(29, resolved, resolvedValue, value.$effects$, value.$computeQrl$));
                     return void output(1, forwardRefId);
                 }
                 const v = value instanceof ComputedSignalImpl && (1 & value.$flags$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
@@ -5422,14 +5431,14 @@ async function serialize(serializationContext) {
                 const rootIndex = $addRoot$(value);
                 serializationContext.$setProp$(value, "q:id", String(rootIndex)), output(10, value.id);
                 const vNodeData = value.vnodeData;
-                if (vNodeData && (discoverValuesForVNodeData(vNodeData, (vNodeDataValue => $addRoot$(vNodeDataValue))), 
+                if (vNodeData && (discoverValuesForVNodeData(vNodeData, vNodeDataValue => $addRoot$(vNodeDataValue)), 
                 vNodeData[0] |= 16), value.children) {
                     for (const child of value.children) {
                         const childVNodeData = child.vnodeData;
                         if (childVNodeData) {
                             for (const value of childVNodeData) {
                                 if (isSsrAttrs(value)) {
-                                    const backRefKeyIndex = value.findIndex((v => "q:brefs" === v));
+                                    const backRefKeyIndex = value.findIndex(v => "q:brefs" === v);
                                     -1 !== backRefKeyIndex && $addRoot$(value[backRefKeyIndex + 1]);
                                 }
                             }
@@ -5439,9 +5448,9 @@ async function serialize(serializationContext) {
                 }
             } else if ("undefined" != typeof FormData && value instanceof FormData) {
                 const array = [];
-                value.forEach(((value, key) => {
+                value.forEach((value, key) => {
                     array.push(key, "string" == typeof value ? value : value.name);
-                })), output(32, array);
+                }), output(32, array);
             } else if (value instanceof URLSearchParams) {
                 output(13, value.toString());
             } else if (value instanceof Set) {
@@ -5461,7 +5470,7 @@ async function serialize(serializationContext) {
                 }
                 output(22, out);
             } else if (isPromise(value)) {
-                const forwardRefId = $resolvePromise$(value, $addRoot$, ((resolved, resolvedValue) => new PromiseResult(16, resolved, resolvedValue)));
+                const forwardRefId = $resolvePromise$(value, $addRoot$, (resolved, resolvedValue) => new PromiseResult(16, resolved, resolvedValue));
                 output(1, forwardRefId);
             } else if (value instanceof PromiseResult) {
                 if (23 === value.$type$) {
@@ -5495,11 +5504,11 @@ async function serialize(serializationContext) {
     };
     function $resolvePromise$(promise, $addRoot$, classCreator) {
         const forwardRefId = forwardRefsId++;
-        return promise.then((resolvedValue => {
+        return promise.then(resolvedValue => {
             promises.delete(promise), forwardRefs[forwardRefId] = $addRoot$(classCreator(!0, resolvedValue));
-        })).catch((err => {
+        }).catch(err => {
             promises.delete(promise), forwardRefs[forwardRefId] = $addRoot$(classCreator(!1, err));
-        })), promises.add(promise), forwardRefId;
+        }), promises.add(promise), forwardRefId;
     }
     await (async () => {
         $writer$.write("[");
@@ -5518,20 +5527,20 @@ async function serialize(serializationContext) {
             }
             lastRootsLength = rootsLength, rootsLength = serializationContext.$roots$.length;
         }
-        forwardRefs.length && ($writer$.write(","), $writer$.write("2,"), outputArray(forwardRefs, (value => {
+        forwardRefs.length && ($writer$.write(","), $writer$.write("2,"), outputArray(forwardRefs, value => {
             $writer$.write(String(value));
-        }))), $writer$.write("]");
+        })), $writer$.write("]");
     })();
 }
 
 function $getCustomSerializerPromise$(signal, value) {
-    return new Promise((resolve => {
-        signal.$computeQrl$.resolve().then((arg => {
+    return new Promise(resolve => {
+        signal.$computeQrl$.resolve().then(arg => {
             let data;
             arg.serialize ? data = arg.serialize(value) : SerializerSymbol in value && (data = value[SerializerSymbol](value)), 
             void 0 === data && (data = NEEDS_COMPUTATION), resolve(data);
-        }));
-    }));
+        });
+    });
 }
 
 function filterEffectBackRefs(effectBackRef) {
@@ -5585,7 +5594,7 @@ function qrlToString(serializationContext, value) {
 }
 
 async function _serialize(data) {
-    const serializationContext = createSerializationContext(null, null, (() => ""), (() => ""), (() => {}), new WeakMap);
+    const serializationContext = createSerializationContext(null, null, () => "", () => "", () => {}, new WeakMap);
     for (const root of data) {
         serializationContext.$addRoot$(root);
     }
@@ -5639,6 +5648,7 @@ function _createDeserializeContainer(stateData, element) {
 }
 
 function preprocessState(data, container) {
+    const isRootDeepRef = (type, value) => 0 === type && "string" == typeof value;
     const isForwardRefsMap = type => 2 === type;
     const isPreloadQrlType = type => 21 === type;
     const processRootRef = index => {
@@ -5659,10 +5669,9 @@ function preprocessState(data, container) {
         data[index + 1] = object;
     };
     for (let i = 0; i < data.length; i += 2) {
-        value = data[i + 1], 0 === data[i] && "string" == typeof value ? processRootRef(i) : isForwardRefsMap(data[i]) ? container.$forwardRefs$ = data[i + 1] : isPreloadQrlType(data[i]) && (container.$initialQRLsIndexes$ ||= [], 
+        isRootDeepRef(data[i], data[i + 1]) ? processRootRef(i) : isForwardRefsMap(data[i]) ? container.$forwardRefs$ = data[i + 1] : isPreloadQrlType(data[i]) && (container.$initialQRLsIndexes$ ||= [], 
         container.$initialQRLsIndexes$.push(i / 2));
     }
-    var value;
 }
 
 function shouldTrackObj(obj) {
@@ -5692,7 +5701,7 @@ const canSerialize = (value, seen = new WeakSet) => {
         const proto = Object.getPrototypeOf(value);
         if (isStore(value) && (value = getStoreTarget(value)), proto == Object.prototype) {
             for (const key in value) {
-                if (!canSerialize(untrack((() => value[key])), seen)) {
+                if (!canSerialize(untrack(() => value[key]), seen)) {
                     return !1;
                 }
             }
@@ -5760,7 +5769,7 @@ const _typeIdNames = [ "RootRef", "ForwardRef", "ForwardRefs", "Constant", "Numb
 
 const circularProofJson = (obj, indent) => {
     const seen = new WeakSet;
-    return JSON.stringify(obj, ((key, value) => {
+    return JSON.stringify(obj, (key, value) => {
         if ("object" == typeof value && null !== value) {
             if (seen.has(value)) {
                 return `[Circular ${value.constructor.name}]`;
@@ -5768,7 +5777,7 @@ const circularProofJson = (obj, indent) => {
             seen.add(value);
         }
         return value;
-    }), indent);
+    }, indent);
 };
 
 const printRaw = (value, prefix) => {
@@ -5795,7 +5804,7 @@ const dumpState = (state, color = !1, prefix = "", limit = 20) => {
         value.length > 120 && (value = value.slice(0, 120) + '"...')) : 2 === key ? value = `[\n${prefix}  ${value.join(`\n${prefix}  `)}\n${prefix}]` : Array.isArray(value) && (value = value.length ? `[\n${dumpState(value, color, `${prefix}  `)}\n${prefix}]` : "[]"), 
         out.push(`${RED}${typeIdToName(key)}${RESET} ${value}`));
     }
-    const result = out.map(((v, i) => `${prefix}${isRoot ? `${i} ` : ""}${v}`)).join("\n");
+    const result = out.map((v, i) => `${prefix}${isRoot ? `${i} ` : ""}${v}`).join("\n");
     if (isRoot) {
         const count = hasRaw ? "" : `(${JSON.stringify(state).length} chars)`;
         return hasRaw = !1, `\n${result}\n${count}`;
@@ -5841,12 +5850,12 @@ const _verifySerializable = (value, seen, ctx, preMessage) => {
             }
             if (isArray(unwrapped)) {
                 let expectIndex = 0;
-                return unwrapped.forEach(((v, i) => {
+                return unwrapped.forEach((v, i) => {
                     if (i !== expectIndex) {
                         throw qError(3, [ unwrapped ]);
                     }
                     _verifySerializable(v, seen, ctx + "[" + i + "]"), expectIndex = i + 1;
-                })), value;
+                }), value;
             }
             if (isSerializableObject(unwrapped)) {
                 for (const [key, item] of Object.entries(unwrapped)) {
@@ -5891,6 +5900,8 @@ const NoSerializeSymbol = Symbol("noSerialize");
 
 const SerializerSymbol = Symbol("serialize");
 
+const resolvedSymbol = Symbol("resolved");
+
 const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
     let _containerEl;
     const qrl = async function(...args) {
@@ -5901,12 +5912,12 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
     function bindFnToContext(currentCtx, beforeFn) {
         const bound = (...args) => {
             if (!qrl.resolved) {
-                return retryOnPromise((() => qrl.resolve())).then((fn => {
+                return retryOnPromise(() => qrl.resolve()).then(fn => {
                     if (!isFunction(fn)) {
                         throw qError(5);
                     }
                     return bound(...args);
-                }));
+                });
             }
             if (beforeFn && !1 === beforeFn()) {
                 return;
@@ -5940,7 +5951,8 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         return context = newInvokeContext(), context.$qrl$ = qrl, context.$event$ = this, 
         invoke.call(this, context, fn, ...args);
     };
-    const resolve = async containerEl => {
+    symbolFn && resolvedSymbol in symbolFn && (symbolRef = symbolFn[resolvedSymbol]);
+    const resolve = symbolRef ? async () => symbolRef : async containerEl => {
         if (null !== symbolRef) {
             return symbolRef;
         }
@@ -5954,14 +5966,17 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         const start = now();
         const ctx = tryGetInvokeContext();
         if (null !== symbolFn) {
-            symbolRef = symbolFn().then((module => qrl.resolved = wrapFn(symbolRef = module[symbol])));
+            symbolRef = symbolFn().then(module => {
+                const resolved = wrapFn(symbolRef = module[symbol]);
+                return symbolFn[resolvedSymbol] = resolved, qrl.resolved = resolved, resolved;
+            });
         } else {
             const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-            symbolRef = maybeThen(imported, (ref => qrl.resolved = wrapFn(symbolRef = ref)));
+            symbolRef = maybeThen(imported, ref => qrl.resolved = wrapFn(symbolRef = ref));
         }
-        return "object" == typeof symbolRef && isPromise(symbolRef) && symbolRef.then((() => emitUsedSymbol(symbol, ctx?.$element$, start)), (err => {
+        return isPromise(symbolRef) && symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), err => {
             console.error(`qrl ${symbol} failed to load`, err), symbolRef = null;
-        })), symbolRef;
+        }), symbolRef;
     };
     const createOrReuseInvocationContext = invoke => null == invoke ? newInvokeContext() : isArray(invoke) ? newInvokeContextFromTuple(invoke) : invoke;
     const hash = getSymbolHash(symbol);
@@ -5970,7 +5985,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         getHash: () => hash,
         getCaptured: () => captureRef,
         resolve,
-        $resolveLazy$: containerEl => null !== symbolRef ? symbolRef : resolve(containerEl),
         $setContainer$: setContainer,
         $chunk$: chunk,
         $symbol$: symbol,
@@ -5980,7 +5994,7 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         $captureRef$: captureRef,
         dev: null,
         resolved: void 0
-    }), symbolRef && (symbolRef = maybeThen(symbolRef, (resolved => qrl.resolved = wrapFn(symbolRef = resolved)))), 
+    }), symbolRef && (symbolRef = maybeThen(symbolRef, resolved => qrl.resolved = wrapFn(symbolRef = resolved))), 
     isDev && Object.defineProperty(qrl, "_devOnlySymbolRef", {
         get: () => symbolRef
     }), isBrowser && symbol && p(symbol, .8), qrl;
@@ -6295,7 +6309,7 @@ const STRINGS_COMMENTS = [ [ ANY, 39, 14 ], [ ANY, 34, 15 ], [ ANY, 47, 16, "*"
 const STATE_MACHINE = [ [ [ ANY, 42, starSelector ], [ ANY, OPEN_BRACKET, 7 ], [ ANY, COLON, pseudoElement, ":", "before", "after", "first-letter", "first-line" ], [ ANY, COLON, pseudoGlobal, "global" ], [ ANY, COLON, 3, "has", "host-context", "not", "where", "is", "matches", "any" ], [ ANY, COLON, 4 ], [ ANY, IDENT, 1 ], [ ANY, DOT, 1 ], [ ANY, HASH, 1 ], [ ANY, 64, atRuleSelector, "keyframe" ], [ ANY, 64, atRuleBlock, "media", "supports", "container" ], [ ANY, 64, atRuleInert ], [ ANY, 123, 13 ], [ 47, 42, 16 ], [ ANY, 59, EXIT ], [ ANY, 125, EXIT ], [ ANY, CLOSE_PARENTHESIS, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, 40, rule ], [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, 40, 8 ], [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, 40, rule ], [ ANY, NOT_IDENT, EXIT ] ], [ [ ANY, NOT_IDENT, EXIT ] ], [ [ ANY, 93, EXIT_INSERT_SCOPE ], [ ANY, 39, 14 ], [ ANY, 34, 15 ] ], [ [ ANY, CLOSE_PARENTHESIS, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, 125, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, 125, EXIT ], [ WHITESPACE, IDENT, 1 ], [ ANY, COLON, pseudoGlobal, "global" ], [ ANY, 123, 13 ], ...STRINGS_COMMENTS ], [ [ ANY, 123, rule ], [ ANY, 59, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, 59, EXIT ], [ ANY, 123, 9 ], ...STRINGS_COMMENTS ], [ [ ANY, 125, EXIT ], [ ANY, 123, 13 ], [ ANY, 40, 8 ], ...STRINGS_COMMENTS ], [ [ ANY, 39, EXIT ] ], [ [ ANY, 34, EXIT ] ], [ [ 42, 47, EXIT ] ] ];
 
 const useStylesQrl = styles => ({
-    styleId: _useStyles(styles, (str => str), !1)
+    styleId: _useStyles(styles, str => str, !1)
 });
 
 const useStyles$ = /*#__PURE__*/ implicit$FirstArg(useStylesQrl);
@@ -6314,13 +6328,10 @@ const _useStyles = (styleQrl, transform, scoped) => {
     }
     const styleId = styleKey(styleQrl, i);
     const host = iCtx.$hostElement$;
-    set(styleId);
-    const value = styleQrl.$resolveLazy$(iCtx.$element$);
-    if (isPromise(value)) {
-        throw value.then((val => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped))), 
-        value;
+    if (set(styleId), !styleQrl.resolved) {
+        throw styleQrl.resolve().then(val => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped));
     }
-    return iCtx.$container$.$appendStyle$(transform(value, styleId), styleId, host, scoped), 
+    return iCtx.$container$.$appendStyle$(transform(styleQrl.resolved, styleId), styleId, host, scoped), 
     styleId;
 };
 
@@ -6346,7 +6357,7 @@ const createEventName = (event, eventScope) => {
 
 const _useOn = (eventName, eventQrl) => {
     const {isAdded, addEvent} = useOnEventsSequentialScope();
-    isAdded || eventQrl && (Array.isArray(eventName) ? eventName.forEach((event => addEvent(event, eventQrl))) : addEvent(eventName, eventQrl));
+    isAdded || eventQrl && (Array.isArray(eventName) ? eventName.forEach(event => addEvent(event, eventQrl)) : addEvent(eventName, eventQrl));
 };
 
 const useOnEventsSequentialScope = () => {
@@ -6370,10 +6381,10 @@ const useOnEventsSequentialScope = () => {
     };
 };
 
-const useSignal = initialState => useConstant((() => {
+const useSignal = initialState => useConstant(() => {
     const value = isFunction(initialState) && !isQwikComponent(initialState) ? invoke(void 0, initialState) : initialState;
     return createSignal(value);
-}));
+});
 
 const useConstant = value => {
     const {val, set} = useSequentialScope();
@@ -6406,7 +6417,7 @@ const useVisibleTaskQrl = (qrl, opts) => {
     }
     assertQrl(qrl);
     const task = new Task(1, i, iCtx.$hostElement$, qrl, void 0, null);
-    set(task), useRunTask(task, eagerness), isServerPlatform() || (qrl.$resolveLazy$(iCtx.$element$), 
+    set(task), useRunTask(task, eagerness), isServerPlatform() || (qrl.resolve(iCtx.$element$), 
     iCtx.$container$.$scheduler$(32, task));
 };
 
@@ -6455,11 +6466,11 @@ const PrefetchServiceWorker = opts => {
 };
 
 const PREFETCH_CODE = /*#__PURE__*/ (c => {
-    "getRegistrations" in c && c.getRegistrations().then((registrations => {
-        registrations.forEach((registration => {
+    "getRegistrations" in c && c.getRegistrations().then(registrations => {
+        registrations.forEach(registration => {
             registration.active && registration.active.scriptURL.endsWith("_URL_") && registration.unregister().catch(console.error);
-        }));
-    }));
+        });
+    });
 }).toString();
 
 const PrefetchGraph = () => null;