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

package/dist/core.prod.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.19-dev+0d046fb
+ * @qwik.dev/core 2.0.0-beta.21-dev+c008e88
  * Copyright QwikDev. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -11,7 +11,7 @@ export { isBrowser, isDev, isServer } from "@qwik.dev/core/build";
 
 import { p } from "@qwik.dev/core/preloader";
 
-const version = "2.0.0-beta.19-dev+0d046fb";
+const version = "2.0.0-beta.21-dev+c008e88";
 
 const qDev = !1;
 
@@ -270,23 +270,45 @@ const delay = timeout => new Promise(resolve => {
     setTimeout(resolve, timeout);
 });
 
-function retryOnPromise(fn, retryCount = 0) {
-    const retryOrThrow = e => {
-        if (isPromise(e) && retryCount < 100) {
-            return e.then(retryOnPromise.bind(null, fn, retryCount++));
-        }
-        throw e;
-    };
+const checkError = e => {
+    isServer && e instanceof ReferenceError && e.message.includes("window") && (e.message = 'It seems like you forgot to add "if (isBrowser) {...}" here:' + e.message);
+};
+
+const justThrow = e => {
+    throw e;
+};
+
+function retryOnPromise(fn, onError = justThrow) {
+    let ok = !1;
+    let result;
     try {
-        const result = fn();
-        return isPromise(result) ? result.catch(e => retryOrThrow(e)) : result;
+        result = fn(), ok = !0;
     } 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, 
-            e;
-        }
-        return retryOrThrow(e);
+        result = e;
+    }
+    if (!isPromise(result)) {
+        return ok ? result : (isDev && checkError(result), onError(result));
     }
+    let retryCount = 100;
+    const retry = async p => {
+        for (;isPromise(p); ) {
+            try {
+                return await p, await fn();
+            } catch (err) {
+                if (!isPromise(err)) {
+                    p = err;
+                    break;
+                }
+                if (! --retryCount) {
+                    p = new Error("Exceeded max retry count in retryOnPromise");
+                    break;
+                }
+                p = err;
+            }
+        }
+        return isDev && checkError(p), onError(p);
+    };
+    return ok ? result.catch(retry) : retry(result);
 }
 
 const ASSERT_DISCLAIMER = "Internal assert, this is likely caused by a bug in Qwik: ";
@@ -352,15 +374,15 @@ const isSvgElement = elementName => "svg" === elementName || isForeignObjectElem
 
 const isMathElement = elementName => "math" === elementName;
 
-const vnode_isDefaultNamespace = vnode => !(384 & vnode.flags);
+const vnode_isDefaultNamespace = vnode => !(1536 & vnode.flags);
 
 const vnode_getElementNamespaceFlags = element => {
     switch (fastNamespaceURI(element)) {
       case SVG_NS:
-        return 128;
+        return 512;
 
       case MATH_NS:
-        return 256;
+        return 1024;
 
       default:
         return 0;
@@ -380,7 +402,7 @@ function vnode_getDomChildrenWithCorrectNamespacesToInsert(journal, domParentVNo
                 domChildren.push(childVNode);
                 continue;
             }
-            if ((384 & childVNode.flags) == (384 & domParentVNode.flags)) {
+            if ((1536 & childVNode.flags) == (1536 & domParentVNode.flags)) {
                 domChildren.push(childVNode);
                 continue;
             }
@@ -426,7 +448,7 @@ function vnode_cloneElementWithNamespace(elementVNode, parentVNode, namespace, n
             const vFirstChild = vnode_getFirstChild(vCursor);
             if (newChildElement = cloneDomTreeWithNamespace(childElement, childElementTag, namespace, !vFirstChild), 
             childElement.remove(), null == rootElement && (rootElement = newChildElement), parentElement && parentElement.appendChild(newChildElement), 
-            vCursor.node = newChildElement, vCursor.flags &= -385, vCursor.flags |= namespaceFlag, 
+            vCursor.node = newChildElement, vCursor.flags &= -1537, vCursor.flags |= namespaceFlag, 
             vFirstChild) {
                 vCursor = vFirstChild, parentElement = newChildElement;
                 continue;
@@ -479,23 +501,23 @@ function getNewElementNamespaceData(domParentVNode, tagOrVNode) {
     let elementNamespaceFlag = 0;
     const isElementVNodeOrString = "string" == typeof tagOrVNode || vnode_isElementVNode(tagOrVNode);
     if (isElementVNodeOrString && isSvg(tagOrVNode)) {
-        elementNamespace = SVG_NS, elementNamespaceFlag = 128;
+        elementNamespace = SVG_NS, elementNamespaceFlag = 512;
     } else if (isElementVNodeOrString && isMath(tagOrVNode)) {
-        elementNamespace = MATH_NS, elementNamespaceFlag = 256;
+        elementNamespace = MATH_NS, elementNamespaceFlag = 1024;
     } else if (domParentVNode && !parentIsForeignObject && !parentIsDefaultNamespace) {
-        elementNamespace = !!(128 & domParentVNode.flags) ? SVG_NS : !!(256 & domParentVNode.flags) ? MATH_NS : HTML_NS, 
-        elementNamespaceFlag = 384 & domParentVNode.flags;
+        elementNamespace = !!(512 & domParentVNode.flags) ? SVG_NS : !!(1024 & domParentVNode.flags) ? MATH_NS : HTML_NS, 
+        elementNamespaceFlag = 1536 & domParentVNode.flags;
     }
     return NEW_NAMESPACE_DATA.elementNamespace = elementNamespace, NEW_NAMESPACE_DATA.elementNamespaceFlag = elementNamespaceFlag, 
     NEW_NAMESPACE_DATA;
 }
 
 function isSvg(tagOrVNode) {
-    return "string" == typeof tagOrVNode ? isSvgElement(tagOrVNode) : !!vnode_isElementVNode(tagOrVNode) && (isSvgElement(vnode_getElementName(tagOrVNode)) || !!(128 & tagOrVNode.flags));
+    return "string" == typeof tagOrVNode ? isSvgElement(tagOrVNode) : !!vnode_isElementVNode(tagOrVNode) && (isSvgElement(vnode_getElementName(tagOrVNode)) || !!(512 & tagOrVNode.flags));
 }
 
 function isMath(tagOrVNode) {
-    return "string" == typeof tagOrVNode ? isMathElement(tagOrVNode) : !!vnode_isElementVNode(tagOrVNode) && (isMathElement(vnode_getElementName(tagOrVNode)) || !!(256 & tagOrVNode.flags));
+    return "string" == typeof tagOrVNode ? isMathElement(tagOrVNode) : !!vnode_isElementVNode(tagOrVNode) && (isMathElement(vnode_getElementName(tagOrVNode)) || !!(1024 & tagOrVNode.flags));
 }
 
 function getAttributeNamespace(attributeName) {
@@ -526,6 +548,42 @@ const mergeMaps = (map1, map2) => {
     return map1;
 };
 
+const EVENT_SUFFIX = "$";
+
+const isHtmlAttributeAnEventName = name => 113 === name.charCodeAt(0) && 45 === name.charCodeAt(1) && 58 === name.charCodeAt(3);
+
+function jsxEventToHtmlAttribute(jsxEvent) {
+    if (jsxEvent.endsWith("$")) {
+        const [prefix, idx] = getEventScopeDataFromJsxEvent(jsxEvent);
+        if (-1 !== idx) {
+            const name = jsxEvent.slice(idx, -1);
+            return "DOMContentLoaded" === name ? prefix + "-d-o-m-content-loaded" : createEventName("-" === name.charAt(0) ? name.slice(1) : name.toLowerCase(), prefix);
+        }
+    }
+    return null;
+}
+
+function createEventName(event, prefix) {
+    return prefix + fromCamelToKebabCase(event);
+}
+
+function getEventScopeDataFromJsxEvent(eventName) {
+    let prefix;
+    let idx = -1;
+    return eventName.startsWith("on") ? (prefix = "q-e:", idx = 2) : eventName.startsWith("window:on") ? (prefix = "q-w:", 
+    idx = 9) : eventName.startsWith("document:on") && (prefix = "q-d:", idx = 11), [ prefix, idx ];
+}
+
+function isPreventDefault(key) {
+    return key.startsWith("preventdefault:");
+}
+
+const fromCamelToKebabCase = text => text.replace(/([A-Z-])/g, a => "-" + a.toLowerCase());
+
+const getEventDataFromHtmlAttribute = htmlKey => [ htmlKey.charAt(2), htmlKey.substring(4) ];
+
+const getScopedEventName = (scope, eventName) => scope + ":" + eventName;
+
 const _EFFECT_BACK_REF = Symbol("backRef");
 
 class BackRef {
@@ -627,7 +685,7 @@ function resumeCursor(cursor, container) {
 }
 
 function removeCursorFromQueue(cursor, container, keepCursorFlag) {
-    keepCursorFlag || (cursor.flags &= -65);
+    keepCursorFlag || (cursor.flags &= -257);
     const index = globalCursorQueue.indexOf(cursor);
     -1 !== index && (globalCursorQueue.splice(index, 1), container.$cursorCount$--);
 }
@@ -757,48 +815,6 @@ const _IMMUTABLE = Symbol("IMMUTABLE");
 
 const _UNINITIALIZED = Symbol("UNINITIALIZED");
 
-const EVENT_SUFFIX = "$";
-
-const isHtmlAttributeAnEventName = name => 111 === name.charCodeAt(0) && 110 === name.charCodeAt(1) && (58 === name.charCodeAt(2) || (name.startsWith("on-window:") || name.startsWith("on-document:")));
-
-function jsxEventToHtmlAttribute(jsxEvent) {
-    if (jsxEvent.endsWith("$")) {
-        const [prefix, idx] = getEventScopeDataFromJsxEvent(jsxEvent);
-        if (-1 !== idx) {
-            const name = jsxEvent.slice(idx, -1);
-            return "DOMContentLoaded" === name ? prefix + "-d-o-m-content-loaded" : createEventName("-" === name.charAt(0) ? name.slice(1) : name.toLowerCase(), prefix);
-        }
-    }
-    return null;
-}
-
-function createEventName(event, prefix) {
-    return prefix + fromCamelToKebabCase(event);
-}
-
-function getEventScopeDataFromJsxEvent(eventName) {
-    let prefix = "on:";
-    let idx = -1;
-    return eventName.startsWith("on") ? (prefix = "on:", idx = 2) : eventName.startsWith("window:on") ? (prefix = "on-window:", 
-    idx = 9) : eventName.startsWith("document:on") && (prefix = "on-document:", idx = 11), 
-    [ prefix, idx ];
-}
-
-function isPreventDefault(key) {
-    return key.startsWith("preventdefault:");
-}
-
-const fromCamelToKebabCase = text => text.replace(/([A-Z-])/g, a => "-" + a.toLowerCase());
-
-const getEventDataFromHtmlAttribute = htmlKey => htmlKey.startsWith("on:") ? [ "", htmlKey.substring(3) ] : htmlKey.startsWith("on-window:") ? [ "window", htmlKey.substring(10) ] : [ "document", htmlKey.substring(12) ];
-
-const getScopedEventName = (scope, eventName) => {
-    const suffix = ":" + eventName;
-    return scope ? scope + suffix : suffix;
-};
-
-const getLoaderScopedEventName = (scope, scopedEvent) => scope ? "-" + scopedEvent : scopedEvent;
-
 const EMPTY_ARRAY = [];
 
 const EMPTY_OBJ = {};
@@ -1014,7 +1030,7 @@ class ComputedSignalImpl extends SignalImpl {
     $computeQrl$;
     $flags$;
     [_EFFECT_BACK_REF]=void 0;
-    constructor(container, fn, flags = 33) {
+    constructor(container, fn, flags = 17) {
         super(container, NEEDS_COMPUTATION), this.$computeQrl$ = fn, this.$flags$ = flags;
     }
     invalidate() {
@@ -1055,15 +1071,9 @@ class ComputedSignalImpl extends SignalImpl {
             ctx && (ctx.$effectSubscriber$ = previousEffectSubscription);
         }
     }
-    set value(_) {
-        throw qError(30);
-    }
-    get value() {
-        return super.value;
-    }
 }
 
-class AsyncComputedSignalImpl extends ComputedSignalImpl {
+class AsyncSignalImpl extends ComputedSignalImpl {
     $untrackedLoading$=!1;
     $untrackedError$=void 0;
     $loadingEffects$=void 0;
@@ -1097,7 +1107,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         this.$promise$ = null, super.invalidate();
     }
     async promise() {
-        return this.$promise$ = null, await retryOnPromise(() => this.$computeIfNeeded$()), 
+        return this.$promise$ = null, await retryOnPromise(this.$computeIfNeeded$.bind(this)), 
         this.$untrackedValue$;
     }
     $computeIfNeeded$() {
@@ -1144,7 +1154,7 @@ const implicit$FirstArg = fn => function(first, ...rest) {
 
 class SerializerSignalImpl extends ComputedSignalImpl {
     constructor(container, argQrl) {
-        super(container, argQrl, 33);
+        super(container, argQrl, 17);
     }
     $didInitialize$=!1;
     $computeIfNeeded$() {
@@ -1168,7 +1178,7 @@ const createSignal$1 = value => new SignalImpl(null, value);
 
 const createComputedSignal = (qrl, options) => new ComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || "always"));
 
-const createAsyncComputedSignal = (qrl, options) => new AsyncComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || "never"));
+const createAsyncSignal = (qrl, options) => new AsyncSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || "never"));
 
 const createSerializerSignal = arg => new SerializerSignalImpl(null, arg);
 
@@ -1176,7 +1186,8 @@ const createSignal = createSignal$1;
 
 const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedSignal);
 
-const createAsyncComputed$ = /*#__PURE__*/ implicit$FirstArg(createAsyncComputedSignal);
+const createAsync$ = 
+/*#__PURE__*/ implicit$FirstArg(createAsyncSignal);
 
 const createSerializer$ = implicit$FirstArg(createSerializerSignal);
 
@@ -1193,7 +1204,7 @@ const _wrapProp = (...args) => {
         return obj[prop];
     }
     if (isSignal(obj)) {
-        return obj instanceof AsyncComputedSignalImpl || isDev && assertEqual(prop, "value", "Left side is a signal, prop must be value"), 
+        return obj instanceof AsyncSignalImpl || isDev && assertEqual(prop, "value", "Left side is a signal, prop must be value"), 
         obj instanceof WrappedSignalImpl && 4 & obj.$flags$ ? obj : getWrapped(args);
     }
     if (isPropsProxy(obj)) {
@@ -1284,8 +1295,8 @@ function clearEffectSubscription(container, effect) {
     const backRefs = effect.backRef;
     if (backRefs) {
         for (const producer of backRefs) {
-            if (producer instanceof AsyncComputedSignalImpl) {
-                clearAsyncComputedSignal(producer, effect);
+            if (producer instanceof AsyncSignalImpl) {
+                clearAsyncSignal(producer, effect);
             } else if (producer instanceof SignalImpl) {
                 clearSignal(container, producer, effect);
             } else if (isPropsProxy(producer)) {
@@ -1305,7 +1316,7 @@ function clearSignal(container, producer, effect) {
     clearAllEffects(container, producer));
 }
 
-function clearAsyncComputedSignal(producer, effect) {
+function clearAsyncSignal(producer, effect) {
     const effects = producer.$effects$;
     effects && effects.has(effect) && effects.delete(effect);
     const pendingEffects = producer.$loadingEffects$;
@@ -1328,31 +1339,23 @@ class SubscriptionData {
     }
 }
 
-const useLexicalScope = () => {
-    const context = getInvokeContext();
-    let qrl = context.$qrl$;
-    if (qrl) {
-        isDev && assertQrl(qrl), isDev && assertDefined(qrl.$captureRef$, "invoke: qrl $captureRef$ must be defined inside useLexicalScope()", qrl);
-    } else {
-        const el = context.$hostElement$ instanceof ElementVNode ? context.$hostElement$.node : void 0;
-        isDev && assertDefined(el, "invoke: element must be defined inside useLexicalScope()", context);
-        const containerElement = _getQContainerElement(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$)));
+const maybeScopeFromQL = (captureIds, element) => {
+    if ("string" == typeof captureIds) {
+        const container = getDomContainer(element);
+        setCaptures(deserializeCaptures(container, captureIds));
     }
-    return qrl.$captureRef$;
+    return null;
 };
 
-const _val = (_, element) => {
-    const [signal] = useLexicalScope();
-    signal.value = "number" === element.type ? element.valueAsNumber : element.value;
-};
+function _val(_, element) {
+    maybeScopeFromQL(this, element);
+    _captures[0].value = "number" === element.type ? element.valueAsNumber : element.value;
+}
 
-const _chk = (_, element) => {
-    const [signal] = useLexicalScope();
-    signal.value = element.checked;
-};
+function _chk(_, element) {
+    maybeScopeFromQL(this, element);
+    _captures[0].value = element.checked;
+}
 
 const _hasOwnProperty$2 = Object.prototype.hasOwnProperty;
 
@@ -1427,26 +1430,26 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
                     ...varProps
                 }, varPropsCopied = !0), bindCheckedSignal) {
                     delete varProps[BIND_CHECKED], varProps.checked = bindCheckedSignal;
-                    const handler = createQRL(null, "_chk", _chk, null, null, [ bindCheckedSignal ]);
-                    if (constProps && _hasOwnProperty$1.call(constProps, "on:input")) {
+                    const handler = createQRL(null, "_chk", _chk, null, [ bindCheckedSignal ]);
+                    if (constProps && _hasOwnProperty$1.call(constProps, "q-e:input")) {
                         constPropsCopied || (constProps = {
                             ...constProps
                         }, constPropsCopied = !0);
-                        const existingHandler = constProps["on:input"];
-                        delete constProps["on:input"], toSort = mergeHandlers(varProps, "on:input", existingHandler) || toSort;
+                        const existingHandler = constProps["q-e:input"];
+                        delete constProps["q-e:input"], toSort = mergeHandlers(varProps, "q-e:input", existingHandler) || toSort;
                     }
-                    toSort = mergeHandlers(varProps, "on:input", handler) || toSort;
+                    toSort = mergeHandlers(varProps, "q-e:input", handler) || toSort;
                 } else if (bindValueSignal) {
                     delete varProps[BIND_VALUE], varProps.value = bindValueSignal;
-                    const handler = createQRL(null, "_val", _val, null, null, [ bindValueSignal ]);
-                    if (constProps && _hasOwnProperty$1.call(constProps, "on:input")) {
+                    const handler = createQRL(null, "_val", _val, null, [ bindValueSignal ]);
+                    if (constProps && _hasOwnProperty$1.call(constProps, "q-e:input")) {
                         constPropsCopied || (constProps = {
                             ...constProps
                         }, constPropsCopied = !0);
-                        const existingHandler = constProps["on:input"];
-                        delete constProps["on:input"], toSort = mergeHandlers(varProps, "on:input", existingHandler) || toSort;
+                        const existingHandler = constProps["q-e:input"];
+                        delete constProps["q-e:input"], toSort = mergeHandlers(varProps, "q-e:input", existingHandler) || toSort;
                     }
-                    toSort = mergeHandlers(varProps, "on:input", handler) || toSort;
+                    toSort = mergeHandlers(varProps, "q-e:input", handler) || toSort;
                 }
             }
         }
@@ -1559,7 +1562,7 @@ function addUseOnEvents(jsx, useOnEvents) {
                 let targetElement = jsxElement;
                 let eventKey = key;
                 if (isHeadless) {
-                    if ("on:qvisible" !== key && !key.startsWith("on-document:") && !key.startsWith("on-window:")) {
+                    if ("q-e:qvisible" !== key && !key.startsWith("q-d:") && !key.startsWith("q-w:")) {
                         isDev && logWarn('You are trying to add an event "' + key + '" using `useOn` hook, but a node to which you can add an event is not found. Please make sure that the component has a valid element node. ');
                         continue;
                     }
@@ -1569,7 +1572,7 @@ function addUseOnEvents(jsx, useOnEvents) {
                     }
                     targetElement = placeholderElement;
                 }
-                targetElement && ("script" === targetElement.type && "on:qvisible" === key && (eventKey = "on-document:qinit", 
+                targetElement && ("script" === targetElement.type && "q-e:qvisible" === key && (eventKey = "q-d:qinit", 
                 isDev && logWarn('You are trying to add an event "' + key + '" using the `useVisibleTask$` hook with the "intersection-observer" strategy, but a node to which you can add an event is not found. Using "document-ready" or "document-idle" instead.')), 
                 addUseOnEvent(targetElement, eventKey, useOnEvents[key]));
             }
@@ -1586,6 +1589,8 @@ function addUseOnEvent(jsxElement, key, value) {
     props[key] = void 0);
 }
 
+const getValue$1 = o => o.value;
+
 function findFirstElementNode(jsx) {
     const queue = [ jsx ];
     for (;queue.length; ) {
@@ -1602,7 +1607,7 @@ function findFirstElementNode(jsx) {
                 return maybeThen(jsx, jsx => findFirstElementNode(jsx));
             }
             if (isSignal(jsx)) {
-                return findFirstElementNode(untrack(() => jsx.value));
+                return findFirstElementNode(untrack(getValue$1, jsx));
             }
         }
     }
@@ -1654,6 +1659,30 @@ const SSRStream = (props, key) => jsx(RenderOnce, {
 
 const InternalSSRStream = () => null;
 
+let _setAttribute = null;
+
+const fastSetAttribute = (target, name, value) => {
+    _setAttribute || (_setAttribute = target.setAttribute), _setAttribute.call(target, name, value);
+};
+
+let _setAttributeNS = null;
+
+const fastSetAttributeNS = (target, namespace, name, value) => {
+    _setAttributeNS || (_setAttributeNS = target.setAttributeNS), _setAttributeNS.call(target, namespace, name, value);
+};
+
+function directSetAttribute(element, attrName, attrValue, isSvg) {
+    if (null != attrValue) {
+        if (isSvg) {
+            const namespace = getAttributeNamespace(attrName);
+            if (namespace) {
+                return void fastSetAttributeNS(element, namespace, attrName, attrValue);
+            }
+        }
+        fastSetAttribute(element, attrName, attrValue);
+    }
+}
+
 function escapeHTML(html) {
     let escapedHTML = "";
     const length = html.length;
@@ -1820,33 +1849,6 @@ function isAriaAttribute(prop) {
 
 const styleKey = (qStyles, index) => (assertQrl(qStyles), `${hashCode(qStyles.$hash$)}-${index}`);
 
-const mapApp_findIndx = (array, key, start) => {
-    isDev && assertTrue(start % 2 == 0, "Expecting even number.");
-    let bottom = start >> 1;
-    let top = array.length - 2 >> 1;
-    for (;bottom <= top; ) {
-        const mid = bottom + (top - bottom >> 1);
-        const midKey = array[mid << 1];
-        if (midKey === key) {
-            return mid << 1;
-        }
-        midKey < key ? bottom = mid + 1 : top = mid - 1;
-    }
-    return ~(bottom << 1);
-};
-
-const mapArray_set = (array, key, value, start, allowNullValue = !1) => {
-    const indx = mapApp_findIndx(array, key, start);
-    indx >= 0 ? null != value || allowNullValue ? array[indx + 1] = value : array.splice(indx, 2) : (null != value || allowNullValue) && array.splice(-1 ^ indx, 0, key, value);
-};
-
-const mapArray_get = (array, key, start) => {
-    const indx = mapApp_findIndx(array, key, start);
-    return indx >= 0 ? array[indx + 1] : null;
-};
-
-const mapArray_has = (array, key, start) => mapApp_findIndx(array, key, start) >= 0;
-
 class DeleteOperation {
     target;
     constructor(target) {
@@ -1901,59 +1903,63 @@ const createInsertOrMoveOperation = (target, parent, beforeTarget) => new Insert
 
 const createSetAttributeOperation = (target, attrName, attrValue, scopedStyleIdPrefix = null, isSvg = !1) => new SetAttributeOperation(target, attrName, attrValue, scopedStyleIdPrefix, isSvg);
 
-function callQrl(container, host, qrl, event, element, useGetObjectById) {
-    const getObjectById = useGetObjectById && container?.$getObjectById$ || null;
-    const singleItem = vnode_getProp(host, "q:p", getObjectById);
-    if (null !== singleItem) {
-        return qrl(event, element, singleItem);
+function runEventHandlerQRL(handler, event, element, ctx = newInvokeContextFromDOM(event, element)) {
+    const container = ctx.$container$;
+    const hostElement = ctx.$hostElement$;
+    vnode_ensureElementInflated(container, hostElement);
+    let realHandler = handler;
+    if (64 & hostElement.flags) {
+        let shouldInflate;
+        128 & hostElement.flags || (shouldInflate = !0, hostElement.flags |= 128);
+        const getObj = shouldInflate ? container.$getObjectById$ : null;
+        const singleItem = vnode_getProp(hostElement, "q:p", getObj);
+        if (null !== singleItem) {
+            realHandler = () => handler(event, element, singleItem);
+        } else {
+            const multiItems = vnode_getProp(hostElement, "q:ps", getObj);
+            null !== multiItems && (realHandler = () => handler(event, element, ...multiItems));
+        }
     }
-    const multiItems = vnode_getProp(host, "q:ps", getObjectById);
-    return null !== multiItems ? qrl(event, element, ...multiItems) : qrl(event, element);
+    return retryOnPromise(() => {
+        if (!(32 & hostElement.flags)) {
+            return invokeApply(ctx, realHandler, [ event, element ]);
+        }
+    }, err => container.handleError(err, hostElement));
 }
 
-const _run = (...args) => {
-    const [qrl] = useLexicalScope();
-    const context = getInvokeContext();
-    const hostElement = context.$hostElement$;
-    if (hostElement) {
-        return context.$container$ ||= getDomContainer(hostElement.node), vnode_ensureElementInflated(hostElement), 
-        retryOnPromise(() => {
-            if (!(32 & hostElement.flags)) {
-                return callQrl(context.$container$, hostElement, qrl, args[0], args[1], !0).catch(err => {
-                    const container = context.$container$;
-                    if (!container) {
-                        throw err;
-                    }
-                    container.handleError(err, hostElement);
-                });
-            }
-        });
+function _run(event, element) {
+    const ctx = newInvokeContextFromDOM(event, element);
+    "string" == typeof this && setCaptures(deserializeCaptures(ctx.$container$, this));
+    const qrlToRun = _captures[0];
+    return isDev && assertQrl(qrlToRun), runEventHandlerQRL(qrlToRun, event, element, ctx);
+}
+
+const mapApp_findIndx = (array, key, start) => {
+    isDev && assertTrue(start % 2 == 0, "Expecting even number.");
+    let bottom = start >> 1;
+    let top = array.length - 2 >> 1;
+    for (;bottom <= top; ) {
+        const mid = bottom + (top - bottom >> 1);
+        const midKey = array[mid << 1];
+        if (midKey === key) {
+            return mid << 1;
+        }
+        midKey < key ? bottom = mid + 1 : top = mid - 1;
     }
+    return ~(bottom << 1);
 };
 
-let _setAttribute = null;
-
-const fastSetAttribute = (target, name, value) => {
-    _setAttribute || (_setAttribute = target.setAttribute), _setAttribute.call(target, name, value);
+const mapArray_set = (array, key, value, start, allowNullValue = !1) => {
+    const indx = mapApp_findIndx(array, key, start);
+    indx >= 0 ? null != value || allowNullValue ? array[indx + 1] = value : array.splice(indx, 2) : (null != value || allowNullValue) && array.splice(-1 ^ indx, 0, key, value);
 };
 
-let _setAttributeNS = null;
-
-const fastSetAttributeNS = (target, namespace, name, value) => {
-    _setAttributeNS || (_setAttributeNS = target.setAttributeNS), _setAttributeNS.call(target, namespace, name, value);
+const mapArray_get = (array, key, start) => {
+    const indx = mapApp_findIndx(array, key, start);
+    return indx >= 0 ? array[indx + 1] : null;
 };
 
-function directSetAttribute(element, attrName, attrValue, isSvg) {
-    if (null != attrValue) {
-        if (isSvg) {
-            const namespace = getAttributeNamespace(attrName);
-            if (namespace) {
-                return void fastSetAttributeNS(element, namespace, attrName, attrValue);
-            }
-        }
-        fastSetAttribute(element, attrName, attrValue);
-    }
-}
+const mapArray_has = (array, key, start) => mapApp_findIndx(array, key, start) >= 0;
 
 function peekNextSibling(vCurrent) {
     return vCurrent ? vCurrent.nextSibling : null;
@@ -1963,7 +1969,7 @@ const _hasOwnProperty = Object.prototype.hasOwnProperty;
 
 function setAttribute(journal, vnode, key, value, scopedStyleIdPrefix, originalValue) {
     import.meta.env.TEST && scopedStyleIdPrefix && vnode_setProp(vnode, "__scopedStyleIdPrefix__", scopedStyleIdPrefix), 
-    vnode_setProp(vnode, key, originalValue), addVNodeOperation(journal, createSetAttributeOperation(vnode.node, key, value, scopedStyleIdPrefix, !!(128 & vnode.flags)));
+    vnode_setProp(vnode, key, originalValue), addVNodeOperation(journal, createSetAttributeOperation(vnode.node, key, value, scopedStyleIdPrefix, !!(512 & vnode.flags)));
 }
 
 const vnode_diff = (container, journal, jsxNode, vStartNode, cursor, scopedStyleIdPrefix) => {
@@ -2259,61 +2265,52 @@ function expectNoMoreTextNodes(diffContext) {
 function createNewElement(diffContext, jsx, elementName, currentFile) {
     const element = createElementWithNamespace(diffContext, elementName);
     const {constProps} = jsx;
-    let needsQDispatchEventPatch = !1;
     if (constProps) {
         for (const key in constProps) {
             let value = constProps[key];
             if (isHtmlAttributeAnEventName(key)) {
-                const data = getEventDataFromHtmlAttribute(key);
-                if (data) {
-                    const [scope, eventName] = data;
-                    const scopedEvent = getScopedEventName(scope, eventName);
-                    const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
-                    eventName && (vnode_setProp(diffContext.vNewNode, "::" + scopedEvent, value), scope && vnode_setAttr(diffContext.journal, diffContext.vNewNode, key, ""), 
-                    registerQwikLoaderEvent(diffContext, loaderScopedEvent));
+                registerEventHandlers(key, value, element, diffContext.vNewNode, diffContext);
+            } 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 ]);
                 }
-                needsQDispatchEventPatch = !0;
-                continue;
-            }
-            if ("ref" === key) {
                 if (isSignal(value)) {
-                    value.value = element;
-                    continue;
+                    const vHost = diffContext.vNewNode;
+                    const signal = value;
+                    value = retryOnPromise(() => trackSignalAndAssignHost(signal, vHost, key, diffContext.container, diffContext.subscriptionData.const));
                 }
-                if ("function" == typeof value) {
-                    value(element);
+                if (isPromise(value)) {
+                    const vHost = diffContext.vNewNode;
+                    const attributePromise = value.then(resolvedValue => directSetAttribute(element, key, serializeAttribute(key, resolvedValue, diffContext.scopedStyleIdPrefix), !!(512 & vHost.flags)));
+                    diffContext.asyncAttributePromises.push(attributePromise);
                     continue;
                 }
-                if (null == value) {
-                    continue;
-                }
-                throw qError(15, [ currentFile ]);
-            }
-            if (isSignal(value)) {
-                const vHost = diffContext.vNewNode;
-                const signal = value;
-                value = retryOnPromise(() => trackSignalAndAssignHost(signal, vHost, key, diffContext.container, diffContext.subscriptionData.const));
-            }
-            if (isPromise(value)) {
-                const vHost = diffContext.vNewNode;
-                const attributePromise = value.then(resolvedValue => directSetAttribute(element, key, serializeAttribute(key, resolvedValue, diffContext.scopedStyleIdPrefix), !!(128 & vHost.flags)));
-                diffContext.asyncAttributePromises.push(attributePromise);
-                continue;
-            }
-            if (key !== dangerouslySetInnerHTML) {
-                if ("textarea" !== elementName || "value" !== key) {
-                    directSetAttribute(element, key, serializeAttribute(key, value, diffContext.scopedStyleIdPrefix), !!(128 & diffContext.vNewNode.flags));
-                } else {
-                    if (value && "string" != typeof value) {
-                        if (isDev) {
-                            throw qError(23, [ currentFile, value ]);
+                if (key !== dangerouslySetInnerHTML) {
+                    if ("textarea" !== elementName || "value" !== key) {
+                        directSetAttribute(element, key, serializeAttribute(key, value, diffContext.scopedStyleIdPrefix), !!(512 & diffContext.vNewNode.flags));
+                    } else {
+                        if (value && "string" != typeof value) {
+                            if (isDev) {
+                                throw qError(23, [ currentFile, value ]);
+                            }
+                            continue;
                         }
-                        continue;
+                        element.value = escapeHTML(value || "");
                     }
-                    element.value = escapeHTML(value || "");
+                } else {
+                    value && (element.innerHTML = String(value), element.setAttribute("q:container", "html"));
                 }
-            } else {
-                value && (element.innerHTML = String(value), element.setAttribute("q:container", "html"));
             }
         }
     }
@@ -2321,8 +2318,18 @@ function createNewElement(diffContext, jsx, elementName, currentFile) {
     if (key && (diffContext.vNewNode.key = key), diffContext.scopedStyleIdPrefix) {
         _hasOwnProperty.call(jsx.varProps, "class") || jsx.constProps && _hasOwnProperty.call(jsx.constProps, "class") || element.setAttribute("class", diffContext.scopedStyleIdPrefix);
     }
-    return vnode_insertBefore(diffContext.journal, diffContext.vParent, diffContext.vNewNode, diffContext.vCurrent), 
-    needsQDispatchEventPatch;
+    vnode_insertBefore(diffContext.journal, diffContext.vParent, diffContext.vNewNode, diffContext.vCurrent);
+}
+
+function registerEventHandlers(key, value, element, vnode, diffContext) {
+    const scopedKebabName = key.slice(2);
+    Array.isArray(value) || (value = [ value ]);
+    const handlers = [];
+    for (const handler of value.flat(2)) {
+        handler && handlers.push(runEventHandlerQRL.bind(null, handler));
+    }
+    (element._qDispatch ||= {})[scopedKebabName] = handlers, "e" !== key.charAt(2) && vnode_setAttr(diffContext.journal, vnode, key, ""), 
+    registerQwikLoaderEvent(diffContext, scopedKebabName);
 }
 
 function createElementWithNamespace(diffContext, elementName) {
@@ -2334,9 +2341,8 @@ function createElementWithNamespace(diffContext, elementName) {
 }
 
 function expectElement(diffContext, jsx, elementName) {
-    let needsQDispatchEventPatch = !1;
     if (diffContext.isCreationMode) {
-        needsQDispatchEventPatch = createNewElement(diffContext, jsx, elementName, null);
+        createNewElement(diffContext, jsx, elementName, null);
     } else {
         const isElementVNode = diffContext.vCurrent && vnode_isElementVNode(diffContext.vCurrent);
         const isSameElementName = isElementVNode && elementName === vnode_getElementName(diffContext.vCurrent);
@@ -2344,69 +2350,43 @@ function expectElement(diffContext, jsx, elementName) {
         if (isSameElementName && jsxKey === (isElementVNode && diffContext.vCurrent.key)) {
             deleteFromSideBuffer(diffContext, elementName, jsxKey);
         } else {
-            const sideBufferKey = getSideBufferKey(elementName, jsxKey);
-            moveOrCreateKeyedNode(diffContext, elementName, jsxKey, sideBufferKey, diffContext.vParent) && (needsQDispatchEventPatch = createNewElement(diffContext, jsx, elementName, null));
+            moveOrCreateKeyedNode(diffContext, elementName, jsxKey, getSideBufferKey(elementName, jsxKey), diffContext.vParent) && createNewElement(diffContext, jsx, elementName, null);
         }
     }
     const jsxProps = jsx.varProps;
-    const vNode = diffContext.vNewNode || diffContext.vCurrent;
-    const element = vNode.node;
-    jsxProps && (needsQDispatchEventPatch = diffProps(diffContext, vNode, jsxProps, isDev && getFileLocationFromJsx(jsx.dev) || null) || needsQDispatchEventPatch), 
-    needsQDispatchEventPatch && (element.qDispatchEvent || (element.qDispatchEvent = (event, scope) => {
-        if (32 & vNode.flags) {
-            return;
-        }
-        const eventName = fromCamelToKebabCase(event.type);
-        const eventProp = ":" + scope.substring(1) + ":" + eventName;
-        const qrls = [ vnode_getProp(vNode, eventProp, null), vnode_getProp(vNode, HANDLER_PREFIX + eventProp, null) ];
-        for (const qrl of qrls.flat(2)) {
-            qrl && callQrl(diffContext.container, vNode, qrl, event, vNode.node, !1).catch(e => {
-                diffContext.container.handleError(e, vNode);
-            });
-        }
-    }));
+    jsxProps && diffProps(diffContext, diffContext.vNewNode || diffContext.vCurrent, jsxProps, isDev && getFileLocationFromJsx(jsx.dev) || null);
 }
 
 function diffProps(diffContext, vnode, newAttrs, currentFile) {
-    diffContext.isCreationMode || vnode_ensureElementInflated(vnode);
+    diffContext.isCreationMode || vnode_ensureElementInflated(diffContext.container, vnode);
     const oldAttrs = vnode.props;
-    let patchEventDispatch = !1;
     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 (null != newValue) {
-            if (isEvent) {
-                const result = recordJsxEvent(diffContext, vnode, key, newValue, currentFile);
-                patchEventDispatch ||= result;
-            } else {
                 patchProperty(diffContext, vnode, key, newValue, currentFile);
             }
+        } else {
+            null != newValue && patchProperty(diffContext, vnode, key, newValue, currentFile);
         }
     }
     if (oldAttrs) {
         for (const key in oldAttrs) {
-            _hasOwnProperty.call(newAttrs, key) || key.startsWith(HANDLER_PREFIX) || isHtmlAttributeAnEventName(key) || patchProperty(diffContext, vnode, key, null, currentFile);
+            _hasOwnProperty.call(newAttrs, key) || ":" === key.charAt(0) || isHtmlAttributeAnEventName(key) || patchProperty(diffContext, vnode, key, null, currentFile);
         }
     }
-    return patchEventDispatch;
 }
 
 const patchProperty = (diffContext, vnode, key, value, currentFile) => {
-    if ("q:p" === key || "q:ps" === key || key.charAt(0) === HANDLER_PREFIX) {
-        return void vnode_setProp(vnode, key, value);
+    if (isHtmlAttributeAnEventName(key)) {
+        return void registerEventHandlers(key, value, vnode.node, vnode, diffContext);
+    }
+    if ("q:p" === key || "q:ps" === key) {
+        return vnode_setProp(vnode, key, value), void (vnode.flags |= 192);
     }
     const originalValue = value;
     if ("ref" === key) {
@@ -2441,23 +2421,9 @@ const patchProperty = (diffContext, vnode, key, value, currentFile) => {
     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;
-        return (!props || !_hasOwnProperty.call(props, scopedEventKey)) && (patchProperty(diffContext, vnode, scopedEventKey, value, currentFile), 
-        registerQwikLoaderEvent(diffContext, loaderScopedEvent), !0);
-    }
-    return !1;
-};
-
 function registerQwikLoaderEvent(diffContext, eventName) {
     const qWindow = import.meta.env.TEST ? diffContext.container.document.defaultView : window;
-    qWindow && (qWindow.qwikevents ||= []).push(eventName);
+    qWindow && (qWindow._qwikEv ||= []).push(eventName);
 }
 
 function retrieveChildWithKey(diffContext, nodeName, key) {
@@ -2532,7 +2498,7 @@ function deleteFromSideBuffer(diffContext, nodeName, key) {
 function moveOrCreateKeyedNode(diffContext, nodeName, lookupKey, sideBufferKey, parentForInsert, addCurrentToSideBufferOnSideInsert) {
     if (diffContext.vNewNode = retrieveChildWithKey(diffContext, nodeName, lookupKey), 
     diffContext.vNewNode) {
-        return vnode_insertBefore(diffContext.journal, parentForInsert, diffContext.vNewNode, diffContext.vCurrent), 
+        return sideBufferKey || vnode_insertBefore(diffContext.journal, parentForInsert, diffContext.vNewNode, diffContext.vCurrent), 
         diffContext.vCurrent = diffContext.vNewNode, diffContext.vNewNode = null, !1;
     }
     if (null != sideBufferKey) {
@@ -2545,7 +2511,7 @@ function moveOrCreateKeyedNode(diffContext, nodeName, lookupKey, sideBufferKey,
                     null != currentSideKey && (diffContext.vSideBuffer ||= new Map, diffContext.vSideBuffer.set(currentSideKey, diffContext.vCurrent));
                 }
             }
-            return vnode_insertBefore(diffContext.journal, parentForInsert, buffered, diffContext.vCurrent), 
+            return buffered !== diffContext.vCurrent && vnode_insertBefore(diffContext.journal, parentForInsert, buffered, diffContext.vCurrent), 
             diffContext.vCurrent = buffered, diffContext.vNewNode = null, !1;
         }
     }
@@ -2704,7 +2670,7 @@ function cleanup(container, journal, vNode, cursorRoot = null) {
                                 continue;
                             }
                             (obj instanceof SignalImpl || isStore(obj)) && clearAllEffects(container, obj), 
-                            (objIsTask || obj instanceof AsyncComputedSignalImpl) && cleanupDestroyable(obj);
+                            (objIsTask || obj instanceof AsyncSignalImpl) && cleanupDestroyable(obj);
                         }
                     }
                 }
@@ -2810,8 +2776,6 @@ function containsWrappedSignal(data, signal) {
     return !1;
 }
 
-const HANDLER_PREFIX = ":";
-
 let count = 0;
 
 const useSequentialScope = () => {
@@ -2846,6 +2810,12 @@ const useResourceQrl = (qrl, opts) => {
 
 const Resource = props => _jsxSorted(Fragment, null, null, getResourceValueAsPromise(props), 0, null);
 
+const getResolved = resource => resource._resolved;
+
+const getValue = resource => resource.value;
+
+const getLoading = resource => resource.loading;
+
 function getResourceValueAsPromise(props) {
     const resource = props.value;
     if (isResourceReturn(resource)) {
@@ -2858,13 +2828,13 @@ function getResourceValueAsPromise(props) {
                 return Promise.resolve(resource._error).then(useBindInvokeContext(props.onRejected));
             }
             {
-                const resolvedValue = untrack(() => resource._resolved);
+                const resolvedValue = untrack(getResolved, resource);
                 if (void 0 !== resolvedValue) {
                     return Promise.resolve(resolvedValue).then(useBindInvokeContext(props.onResolved));
                 }
             }
         }
-        return untrack(() => resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        return untrack(getValue, resource).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
     }
     if (isPromise(resource)) {
         return resource.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
@@ -2924,8 +2894,8 @@ const runResource = (task, container, host) => {
     resourceTarget._state = "rejected", resourceTarget._error = value, reject(value)), 
     isServerPlatform() || forceStoreEffects(resource, "_state"), !0);
     cleanups.push(() => {
-        if (!0 === untrack(() => resource.loading)) {
-            const value = untrack(() => resource._resolved);
+        if (!0 === untrack(getLoading, resource)) {
+            const value = untrack(getResolved, resource);
             setState(!0, value);
         }
     }), invoke(iCtx, () => {
@@ -3024,7 +2994,7 @@ function clearNodePropData(vNode) {
 }
 
 function setNodeProp(domVNode, journal, property, value, isConst, scopedStyleIdPrefix = null) {
-    journal.push(createSetAttributeOperation(domVNode.node, property, value, scopedStyleIdPrefix, !!(128 & domVNode.flags))), 
+    journal.push(createSetAttributeOperation(domVNode.node, property, value, scopedStyleIdPrefix, !!(512 & domVNode.flags))), 
     isConst || (domVNode.props && null == value ? delete domVNode.props[property] : (domVNode.props ||= {})[property] = value);
 }
 
@@ -3222,11 +3192,6 @@ function walkCursor(cursor, options) {
     const journal = cursorData.journal ||= [];
     let currentVNode = null;
     for (;currentVNode = cursorData.position; ) {
-        if (!isRunningOnServer && !import.meta.env.TEST) {
-            if (performance.now() - startTime >= timeBudget) {
-                return void scheduleYield();
-            }
-        }
         if (cursorData.promise) {
             return;
         }
@@ -3272,6 +3237,11 @@ function walkCursor(cursor, options) {
                 cursorData.promise = null, resumeCursor(cursor, container), triggerCursors();
             });
         }
+        if (!isRunningOnServer && !import.meta.env.TEST) {
+            if (performance.now() - startTime >= timeBudget) {
+                return void scheduleYield();
+            }
+        }
     }
     isDev && assertFalse(!(!(127 & cursor.dirty) || cursorData.position), "Cursor is still dirty and position is not set after walking"), 
     finishWalk(container, cursor, cursorData, isRunningOnServer);
@@ -3343,12 +3313,12 @@ function addCursor(container, root, priority) {
         promise: null
     });
     const cursor = root;
-    return cursor.flags |= 64, addCursorToQueue(container, cursor), triggerCursors(), 
+    return cursor.flags |= 256, addCursorToQueue(container, cursor), triggerCursors(), 
     cursor;
 }
 
 function isCursor(vNode) {
-    return !!(64 & vNode.flags);
+    return !!(256 & vNode.flags);
 }
 
 function findCursor(vNode) {
@@ -3513,23 +3483,23 @@ const fastGetter = (prototype, name) => {
 
 const vnode_newElement = (element, elementName, key = null) => {
     isDev && assertEqual(fastNodeType(element), 1, "Expecting element node.");
-    const vnode = new ElementVNode(key, -503, null, null, null, null, null, null, element, elementName);
+    const vnode = new ElementVNode(key, -2039, null, null, null, null, null, null, element, elementName);
     return element.vNode = vnode, vnode;
 };
 
 const vnode_newUnMaterializedElement = element => {
     isDev && assertEqual(fastNodeType(element), 1, "Expecting element node.");
-    const vnode = new ElementVNode(null, -511, null, null, null, null, void 0, void 0, element, void 0);
+    const vnode = new ElementVNode(null, -2047, null, null, null, null, void 0, void 0, element, void 0);
     return element.vNode = vnode, vnode;
 };
 
 const vnode_newSharedText = (previousTextNode, sharedTextNode, textContent) => {
     isDev && sharedTextNode && assertEqual(fastNodeType(sharedTextNode), 3, "Expecting text node.");
-    return new TextVNode(-508, null, previousTextNode, null, null, sharedTextNode, textContent);
+    return new TextVNode(-2044, null, previousTextNode, null, null, sharedTextNode, textContent);
 };
 
 const vnode_newText = (textNode, textContent) => {
-    const vnode = new TextVNode(-500, null, null, null, null, textNode, textContent);
+    const vnode = new TextVNode(-2036, null, null, null, null, textNode, textContent);
     return isDev && assertEqual(fastNodeType(textNode), 3, "Expecting text node."), 
     isDev && assertFalse(vnode_isElementVNode(vnode), "Incorrect format of TextVNode."), 
     isDev && assertTrue(vnode_isTextVNode(vnode), "Incorrect format of TextVNode."), 
@@ -3538,7 +3508,7 @@ const vnode_newText = (textNode, textContent) => {
 };
 
 const vnode_newVirtual = () => {
-    const vnode = new VirtualVNode(null, -510, null, null, null, null, null, null);
+    const vnode = new VirtualVNode(null, -2046, null, null, null, null, null, null);
     return 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."), 
@@ -3612,7 +3582,7 @@ const vnode_setProp = (vNode, key, value) => {
 
 const vnode_setAttr = (journal, vNode, key, value, scopedStyleIdPrefix = null) => {
     vnode_isElementVNode(vNode) && (import.meta.env.TEST && scopedStyleIdPrefix && vnode_setProp(vNode, "__scopedStyleIdPrefix__", scopedStyleIdPrefix), 
-    vnode_setProp(vNode, key, value), addVNodeOperation(journal, createSetAttributeOperation(vNode.node, key, value, scopedStyleIdPrefix, !!(128 & vNode.flags))));
+    vnode_setProp(vNode, key, value), addVNodeOperation(journal, createSetAttributeOperation(vNode.node, key, value, scopedStyleIdPrefix, !!(512 & vNode.flags))));
 };
 
 const vnode_ensureElementKeyInflated = vnode => {
@@ -3623,30 +3593,44 @@ const vnode_ensureElementKeyInflated = vnode => {
     value && (vnode.key = value);
 };
 
-const vnode_ensureElementInflated = vnode => {
+const vnode_ensureElementInflated = (container, vnode) => {
     if (1 == (15 & vnode.flags)) {
         const elementVNode = vnode;
         elementVNode.flags ^= 8;
         const element = elementVNode.node;
         const attributes = element.attributes;
+        let isConst = !1;
         for (let idx = 0; idx < attributes.length; idx++) {
             const attr = attributes[idx];
             const key = attr.name;
-            if (":" === key || !key) {
-                const value = attr.value;
-                value && (elementVNode.key = value);
-                break;
-            }
-            if (key.startsWith("q:container")) {
+            if (isHtmlAttributeAnEventName(key)) {
+                registerQrlHandlers(attr, key, container, element);
+            } else if (isConst) {} else if (":" !== key && key) {
+                if (key.startsWith("q:container")) {
+                    const value = attr.value;
+                    "html" === value ? vnode_setProp(elementVNode, "dangerouslySetInnerHTML", element.innerHTML) : "text" === value && "value" in element && vnode_setProp(elementVNode, "value", element.value);
+                } else {
+                    vnode_setProp(elementVNode, key, attr.value);
+                }
+            } else {
                 const value = attr.value;
-                "html" === value ? vnode_setProp(elementVNode, "dangerouslySetInnerHTML", element.innerHTML) : "text" === value && "value" in element && vnode_setProp(elementVNode, "value", element.value);
-            } else if (!key.startsWith("on:")) {
-                vnode_setProp(elementVNode, key, attr.value);
+                value && (elementVNode.key = value), isConst = !0;
             }
         }
+        null === vnode_getProp(elementVNode, "q:p", null) && null === vnode_getProp(elementVNode, "q:ps", null) || (vnode.flags |= 64);
     }
 };
 
+function registerQrlHandlers(attr, key, container, element) {
+    const value = attr.value;
+    const scopedKebabName = key.slice(2);
+    const handlers = value.split("|").map(qrl => {
+        const handler = parseQRL(qrl);
+        return handler.$container$ = container, handler;
+    });
+    (element._qDispatch ||= {})[scopedKebabName] = handlers;
+}
+
 function vnode_walkVNode(vNode, callback) {
     let vCursor = vNode;
     if (vnode_isTextVNode(vNode)) {
@@ -3701,6 +3685,21 @@ function vnode_getDOMChildNodes(journal, root, isVNode = !1, childNodes = []) {
     return childNodes;
 }
 
+function vnode_getDOMContainer(vNode) {
+    let cursor = vNode;
+    for (;cursor; ) {
+        if (vnode_isElementVNode(cursor)) {
+            try {
+                return getDomContainer(cursor.node);
+            } catch {
+                return null;
+            }
+        }
+        cursor = cursor.parent;
+    }
+    return null;
+}
+
 const vnode_getDomSibling = (vNode, nextDirection, descend) => {
     let cursor = vNode;
     for (;descend && cursor && vnode_isVirtualVNode(cursor); ) {
@@ -3833,7 +3832,7 @@ const vnode_locate = (rootVNode, id) => {
 
 const vnode_getChildWithIdx = (vNode, childIdx) => {
     let child = vnode_getFirstChild(vNode);
-    for (isDev && assertDefined(child, "Missing child."); child.flags >>> 9 !== childIdx; ) {
+    for (isDev && assertDefined(child, "Missing child."); child.flags >>> 11 !== childIdx; ) {
         child = child.nextSibling, isDev && assertDefined(child, "Missing child.");
     }
     return child;
@@ -4198,9 +4197,9 @@ const processVNodeData$1 = (vData, callback) => {
     }
 };
 
-const vnode_getAttrKeys = vnode => {
+const vnode_getAttrKeys = (container, vnode) => {
     if (3 & vnode.flags) {
-        vnode_ensureElementInflated(vnode);
+        vnode_ensureElementInflated(container, vnode);
         const keys = [];
         const props = vnode.props;
         if (props) {
@@ -4228,7 +4227,7 @@ const vnode_getProjectionParentOrParent = vnode => vnode.parent || vnode.slotPar
 
 const vnode_getNode = vnode => null === vnode || vnode_isVirtualVNode(vnode) ? null : vnode.node;
 
-function vnode_toString(depth = 20, offset = "", materialize = !1, siblings = !1, colorize = !0) {
+function vnode_toString(depth = 20, offset = "", materialize = !1, siblings = !1, colorize = !0, container = this && vnode_getDOMContainer(this)) {
     let vnode = this;
     if (0 === depth) {
         return "...";
@@ -4244,8 +4243,8 @@ function vnode_toString(depth = 20, offset = "", materialize = !1, siblings = !1
         if (vnode_isTextVNode(vnode)) {
             strings.push(qwikDebugToString(vnode_getText(vnode)));
         } else if (vnode_isVirtualVNode(vnode)) {
-            const attrs = [ "[" + String(vnode.flags >>> 9) + "]" ];
-            vnode.dirty && attrs.push(` dirty:${vnode.dirty}`), vnode_getAttrKeys(vnode).forEach(key => {
+            const attrs = [ "[" + String(vnode.flags >>> 11) + "]" ];
+            vnode.dirty && attrs.push(` dirty:${vnode.dirty}`), vnode_getAttrKeys(container, vnode).forEach(key => {
                 if ("q:type" !== key && "__scopedStyleIdPrefix__" !== key) {
                     const value = vnode_getProp(vnode, key, null);
                     attrs.push(" " + key + "=" + qwikDebugToString(value));
@@ -4261,7 +4260,7 @@ function vnode_toString(depth = 20, offset = "", materialize = !1, siblings = !1
             const attrs = [];
             isCursor(vnode) && attrs.push(" cursor"), vnode.dirty && attrs.push(` dirty:${vnode.dirty}`), 
             vnode.dirtyChildren && attrs.push(` dirtyChildren[${vnode.dirtyChildren.length}]`);
-            const keys = vnode_getAttrKeys(vnode);
+            const keys = vnode_getAttrKeys(container, vnode);
             for (const key of keys) {
                 const value = vnode_getProp(vnode, key, null);
                 attrs.push(" " + key + "=" + qwikDebugToString(value));
@@ -4305,7 +4304,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
     let vLast = null;
     let previousTextNode = null;
     const addVNode = node => {
-        node.flags = 511 & node.flags | idx << 9, idx++, vLast && (vLast.nextSibling = node), 
+        node.flags = 2047 & node.flags | idx << 11, idx++, vLast && (vLast.nextSibling = node), 
         node.previousSibling = vLast, node.parent = vParent, vFirst || (vParent.firstChild = vFirst = node), 
         vLast = node;
     };
@@ -4470,16 +4469,7 @@ isServer && import("node:async_hooks").then(module => {
     localAsyncStore = new module.AsyncLocalStorage;
 }).catch(() => {});
 
-const tryGetInvokeContext = () => {
-    if (!_context) {
-        const context = "undefined" != typeof document && document && document.__q_context__;
-        if (!context) {
-            return;
-        }
-        return isArray(context) ? document.__q_context__ = newInvokeContextFromTuple(context) : context;
-    }
-    return _context;
-};
+const tryGetInvokeContext = () => _context;
 
 const getInvokeContext = () => {
     const ctx = tryGetInvokeContext();
@@ -4515,28 +4505,26 @@ function invoke(context, fn, ...args) {
 
 function invokeApply(context, fn, args) {
     const previousContext = _context;
-    let returnValue;
     try {
-        _context = context, returnValue = fn.apply(this, args);
+        return _context = context, fn.apply(this, args);
     } finally {
         _context = previousContext;
     }
-    return returnValue;
 }
 
-const newInvokeContextFromTuple = ([element, event, url]) => {
+const newInvokeContextFromDOM = (event, element) => {
     const domContainer = getDomContainer(element);
     const hostElement = vnode_locate(domContainer.rootVNode, element);
     const locale = domContainer.$locale$;
-    return locale && setLocale(locale), newInvokeContext(locale, hostElement, event, url);
+    locale && setLocale(locale);
+    const context = newInvokeContext(locale, hostElement, event);
+    return context.$container$ = domContainer, context;
 };
 
-function newRenderInvokeContext(locale, hostElement, container, url) {
+function newRenderInvokeContext(locale, hostElement, container) {
     const ctx = {
-        $url$: url,
         $hostElement$: hostElement,
         $event$: "qRender",
-        $qrl$: void 0,
         $effectSubscriber$: void 0,
         $locale$: locale,
         $container$: container,
@@ -4545,12 +4533,10 @@ function newRenderInvokeContext(locale, hostElement, container, url) {
     return seal(), ctx;
 }
 
-function newInvokeContext(locale, hostElement, event, url) {
+function newInvokeContext(locale, hostElement, event) {
     const ctx = {
-        $url$: url,
         $hostElement$: hostElement,
         $event$: event,
-        $qrl$: void 0,
         $effectSubscriber$: void 0,
         $locale$: locale || (event && isObject(event) && "locale" in event ? event.locale : void 0),
         $container$: void 0
@@ -4591,15 +4577,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));
 
-const _getContextElement = () => {
-    const iCtx = tryGetInvokeContext();
-    if (iCtx) {
-        const hostElement = iCtx.$hostElement$;
-        let element = null;
-        return null != hostElement && (vnode_isVNode(hostElement) ? vnode_isElementVNode(hostElement) && (element = vnode_getNode(hostElement)) : element = hostElement), 
-        element ?? iCtx.$qrl$?.$setContainer$(void 0);
-    }
-};
+const _getContextHostElement = () => tryGetInvokeContext()?.$hostElement$;
 
 const _getContextEvent = () => {
     const iCtx = tryGetInvokeContext();
@@ -4617,11 +4595,7 @@ const _getContextContainer = () => {
 
 const _jsxBranch = input => input;
 
-const _waitUntilRendered = elm => {
-    const container = getDomContainer(elm);
-    const promise = container?.$renderPromise$;
-    return promise || Promise.resolve();
-};
+const _waitUntilRendered = container => container.$renderPromise$ || Promise.resolve();
 
 const createContextId = name => (isDev && assertTrue(/^[\w/.-]+$/.test(name), "Context name must only contain A-Z,a-z,0-9,_,.,-", name), 
 /*#__PURE__*/ Object.freeze({
@@ -4674,40 +4648,40 @@ const _constants = [ void 0, null, !0, !1, "", EMPTY_ARRAY, EMPTY_OBJ, NEEDS_COM
 
 const _constantNames = [ "undefined", "null", "true", "false", "''", "EMPTY_ARRAY", "EMPTY_OBJ", "NEEDS_COMPUTATION", "STORE_ALL_PROPS", "_UNINITIALIZED", "Slot", "Fragment", "NaN", "Infinity", "-Infinity", "MAX_SAFE_INTEGER", "MAX_SAFE_INTEGER-1", "MIN_SAFE_INTEGER" ];
 
-const _typeIdNames = [ "Plain", "RootRef", "ForwardRef", "Constant", "Array", "Object", "URL", "Date", "Regex", "VNode", "RefVNode", "BigInt", "URLSearchParams", "ForwardRefs", "Error", "Promise", "Set", "Map", "Uint8Array", "QRL", "PreloadQRL", "Task", "Resource", "Component", "Signal", "WrappedSignal", "ComputedSignal", "AsyncComputedSignal", "SerializerSignal", "Store", "FormData", "JSXNode", "PropsProxy", "SubscriptionData", "EffectSubscription" ];
+const _typeIdNames = [ "Plain", "RootRef", "ForwardRef", "Constant", "Array", "Object", "URL", "Date", "Regex", "QRL", "VNode", "RefVNode", "BigInt", "URLSearchParams", "ForwardRefs", "Error", "Promise", "Set", "Map", "Uint8Array", "Task", "Resource", "Component", "Signal", "WrappedSignal", "ComputedSignal", "AsyncSignal", "SerializerSignal", "Store", "FormData", "JSXNode", "PropsProxy", "SubscriptionData", "EffectSubscription" ];
 
-function qrlToString(serializationContext, value, raw) {
-    let symbol = value.$symbol$;
-    let chunk = value.$chunk$;
+function qrlToString(serializationContext, qrl, raw) {
+    let symbol = qrl.$symbol$;
+    let chunk = qrl.$chunk$;
     const platform = getPlatform();
     if (platform) {
-        const result = platform.chunkForSymbol(symbol, chunk, value.dev?.file);
+        const result = isDev ? platform.chunkForSymbol(symbol, chunk, qrl.dev?.file) : platform.chunkForSymbol(symbol, chunk);
         result && (chunk = result[1], symbol = result[0]);
     }
-    if (isSyncQrl(value)) {
-        chunk = "", symbol = String(serializationContext.$addSyncFn$(null, 0, value.resolved));
+    if (isSyncQrl(qrl)) {
+        chunk = "", symbol = String(serializationContext.$addSyncFn$(null, 0, qrl.resolved));
     } else {
-        if (chunk || (chunk = serializationContext.$symbolToChunkResolver$(value.$hash$)), 
+        if (chunk || (chunk = serializationContext.$symbolToChunkResolver$(qrl.$hash$)), 
         isDev) {
-            (globalThis.__qrl_back_channel__ ||= new Map).set(value.$symbol$, value.resolved), 
+            (globalThis.__qrl_back_channel__ ||= new Map).set(qrl.$symbol$, qrl.$symbolRef$), 
             chunk || (chunk = QRL_RUNTIME_CHUNK);
         }
         if (!chunk) {
-            throw qError(14, [ value.$symbol$ ]);
+            throw qError(14, [ qrl.$symbol$ ]);
         }
         chunk.startsWith("./") && (chunk = chunk.slice(2));
     }
-    let capturedIds = null;
-    if (Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0 && (capturedIds = value.$captureRef$.map(ref => `${serializationContext.$addRoot$(ref)}`)), 
+    const captures = qrl.getCaptured();
+    let captureIds = null;
+    if (captures && captures.length > 0 && (captureIds = captures.map(ref => `${serializationContext.$addRoot$(ref)}`).join(" ")), 
     raw) {
-        return [ chunk, symbol, capturedIds ];
+        return [ chunk, symbol, captureIds ];
     }
     let qrlStringInline = `${chunk}#${symbol}`;
-    return capturedIds && capturedIds.length > 0 && (qrlStringInline += `[${capturedIds.join(" ")}]`), 
-    qrlStringInline;
+    return captureIds && (qrlStringInline += `#${captureIds}`), qrlStringInline;
 }
 
-function createQRLWithBackChannel(chunk, symbol, captureIds) {
+function createQRLWithBackChannel(chunk, symbol, captures) {
     let qrlImporter = null;
     if (isDev && chunk === QRL_RUNTIME_CHUNK) {
         const backChannel = globalThis.__qrl_back_channel__;
@@ -4717,14 +4691,12 @@ function createQRLWithBackChannel(chunk, symbol, captureIds) {
             [symbol]: fn
         }));
     }
-    return createQRL(chunk, symbol, null, qrlImporter, captureIds, null);
+    return createQRL(chunk, symbol, null, qrlImporter, captures);
 }
 
 function parseQRL(qrl) {
-    const hashIdx = qrl.indexOf("#");
-    const captureStart = qrl.indexOf("[", hashIdx);
-    const captureEnd = qrl.indexOf("]", captureStart);
-    return createQRLWithBackChannel(qrl.slice(0, hashIdx > -1 ? hashIdx : captureStart), captureStart > -1 ? qrl.slice(hashIdx + 1, captureStart) : qrl.slice(hashIdx + 1), captureStart > -1 && captureEnd > -1 ? qrl.slice(captureStart + 1, captureEnd).split(" ").filter(v => v.length).map(s => parseInt(s, 10)) : null);
+    const [chunk, symbol, captures] = qrl.split("#");
+    return createQRLWithBackChannel(chunk, symbol, captures || null);
 }
 
 const QRL_RUNTIME_CHUNK = "mock-chunk";
@@ -4736,7 +4708,7 @@ const pendingStoreTargets = new Map;
 const allocate = (container, typeId, value) => {
     switch (typeId) {
       case 0:
-      case 13:
+      case 14:
         return value;
 
       case 1:
@@ -4758,18 +4730,22 @@ const allocate = (container, typeId, value) => {
       case 5:
         return {};
 
-      case 19:
-      case 20:
-        if ("string" == typeof value) {
-            const data = value.split(" ").map(Number);
-            return createQRLWithBackChannel(container.$getObjectById$(data[0]), container.$getObjectById$(data[1]), data.length > 2 ? data.slice(2) : null);
+      case 9:
+        {
+            let qrl;
+            if ("string" == typeof value) {
+                const [chunkId, symbolId, captureIds] = value.split("#");
+                qrl = createQRLWithBackChannel(container.$getObjectById$(chunkId), container.$getObjectById$(symbolId), captureIds || null);
+            } else {
+                qrl = createQRLWithBackChannel("", String(value), null);
+            }
+            return qrl.$container$ = container, qrl;
         }
-        return createQRLWithBackChannel("", String(value));
 
-      case 21:
+      case 20:
         return new Task(-1, -1, null, null, null, null);
 
-      case 22:
+      case 21:
         {
             const res = createResourceReturn(container, void 0, void 0);
             return res.loading = !1, res;
@@ -4785,28 +4761,28 @@ const allocate = (container, typeId, value) => {
         const idx = value.lastIndexOf("/");
         return new RegExp(value.slice(1, idx), value.slice(idx + 1));
 
-      case 14:
+      case 15:
         return new Error;
 
-      case 23:
+      case 22:
         return componentQrl(null);
 
-      case 24:
+      case 23:
         return new SignalImpl(container, 0);
 
-      case 25:
+      case 24:
         return new WrappedSignalImpl(container, null, null, null);
 
-      case 26:
+      case 25:
         return new ComputedSignalImpl(container, null);
 
-      case 27:
-        return new AsyncComputedSignalImpl(container, null);
+      case 26:
+        return new AsyncSignalImpl(container, null);
 
-      case 28:
+      case 27:
         return new SerializerSignalImpl(container, null);
 
-      case 29:
+      case 28:
         {
             const data = value;
             const t = data[0];
@@ -4819,25 +4795,25 @@ const allocate = (container, typeId, value) => {
             }), data[0] = 0, data[1] = storeValue, store;
         }
 
-      case 12:
+      case 13:
         return new URLSearchParams(value);
 
-      case 30:
+      case 29:
         return new FormData;
 
-      case 31:
+      case 30:
         return new JSXNodeImpl(null, null, null, null, null);
 
-      case 11:
+      case 12:
         return BigInt(value);
 
-      case 16:
+      case 17:
         return new Set;
 
-      case 17:
+      case 18:
         return new Map;
 
-      case 15:
+      case 16:
         let resolve;
         let reject;
         const promise = new Promise((res, rej) => {
@@ -4845,28 +4821,28 @@ const allocate = (container, typeId, value) => {
         });
         return resolvers.set(promise, [ resolve, reject ]), promise.catch(() => {}), promise;
 
-      case 18:
+      case 19:
         const encodedLength = value.length;
         const rest = 3 & encodedLength;
         return new Uint8Array(3 * (encodedLength >>> 2) + (rest ? rest - 1 : 0));
 
-      case 32:
+      case 31:
         return createPropsProxy(null);
 
-      case 9:
+      case 10:
         return retrieveVNodeOrDocument(container, value);
 
-      case 10:
+      case 11:
         const vNode = retrieveVNodeOrDocument(container, value);
         if (vnode_isVNode(vNode)) {
             return ensureMaterialized(vNode), vnode_getNode(vNode);
         }
         throw qError(17, [ typeof vNode ]);
 
-      case 33:
+      case 32:
         return new SubscriptionData({});
 
-      case 34:
+      case 33:
         return new EffectSubscription(null, null, null, null);
 
       default:
@@ -4884,7 +4860,7 @@ const EXTRACT_SELF_IMPORT = /Promise\s*\.\s*resolve/;
 
 const EXTRACT_FILE_NAME = /[\\/(]([\w\d.\-_]+\.(js|ts)x?):/;
 
-const qrl = (chunkOrFn, symbol, lexicalScopeCapture = EMPTY_ARRAY, stackOffset = 0) => {
+const qrl = (chunkOrFn, symbol, lexicalScopeCapture, stackOffset = 0) => {
     let chunk = null;
     let symbolFn = null;
     if (isFunction(chunkOrFn)) {
@@ -4912,24 +4888,24 @@ const qrl = (chunkOrFn, symbol, lexicalScopeCapture = EMPTY_ARRAY, stackOffset =
         }
         chunk = chunkOrFn;
     }
-    return createQRL(chunk, symbol, null, symbolFn, null, lexicalScopeCapture);
+    return createQRL(chunk, symbol, null, symbolFn, lexicalScopeCapture);
 };
 
-const inlinedQrl = (symbol, symbolName, lexicalScopeCapture = EMPTY_ARRAY) => createQRL(null, symbolName, symbol, null, null, lexicalScopeCapture);
+const inlinedQrl = (symbol, symbolName, lexicalScopeCapture) => createQRL(null, symbolName, symbol, null, lexicalScopeCapture);
 
-const _noopQrl = (symbolName, lexicalScopeCapture = EMPTY_ARRAY) => createQRL(null, symbolName, null, null, null, lexicalScopeCapture);
+const _noopQrl = (symbolName, lexicalScopeCapture) => createQRL(null, symbolName, null, null, lexicalScopeCapture);
 
-const _noopQrlDEV = (symbolName, opts, lexicalScopeCapture = EMPTY_ARRAY) => {
+const _noopQrlDEV = (symbolName, opts, lexicalScopeCapture) => {
     const newQrl = _noopQrl(symbolName, lexicalScopeCapture);
     return newQrl.dev = opts, newQrl;
 };
 
-const qrlDEV = (chunkOrFn, symbol, opts, lexicalScopeCapture = EMPTY_ARRAY) => {
+const qrlDEV = (chunkOrFn, symbol, opts, lexicalScopeCapture) => {
     const newQrl = qrl(chunkOrFn, symbol, lexicalScopeCapture, 1);
     return newQrl.dev = opts, newQrl;
 };
 
-const inlinedQrlDEV = (symbol, symbolName, opts, lexicalScopeCapture = EMPTY_ARRAY) => {
+const inlinedQrlDEV = (symbol, symbolName, opts, lexicalScopeCapture) => {
     const qrl = inlinedQrl(symbol, symbolName, lexicalScopeCapture);
     return qrl.dev = opts, qrl;
 };
@@ -4949,7 +4925,6 @@ async function serialize(serializationContext) {
     const forwardRefs = [];
     let forwardRefsId = 0;
     const promises = new Set;
-    const preloadQrls = new Set;
     const s11nWeakRefs = new Map;
     let parent;
     const qrlMap = new Map;
@@ -4987,9 +4962,6 @@ async function serialize(serializationContext) {
             });
         }
     };
-    const addPreloadQrl = qrl => {
-        isSyncQrl(qrl) || (preloadQrls.add(qrl), serializationContext.$addRoot$(qrl));
-    };
     const getSeenRefOrOutput = (value, index, keepWeak) => {
         let seen = getSeenRef(value);
         const forwardRefIdx = !keepWeak && s11nWeakRefs.get(value);
@@ -5033,7 +5005,7 @@ async function serialize(serializationContext) {
                 break;
 
               case "bigint":
-                (value < 1e4 && value > -1e3 || getSeenRefOrOutput(value, index)) && output(11, value.toString());
+                (value < 1e4 && value > -1e3 || getSeenRefOrOutput(value, index)) && output(12, value.toString());
                 break;
 
               case "symbol":
@@ -5047,21 +5019,20 @@ async function serialize(serializationContext) {
                     output(3, 11);
                 } else if (isQrl(value)) {
                     if (getSeenRefOrOutput(value, index)) {
-                        const [chunk, symbol, captureIds] = qrlToString(serializationContext, value, !0);
+                        const [chunk, symbol, captures] = qrlToString(serializationContext, value, !0);
                         let data;
-                        let type;
                         if ("" !== chunk) {
-                            data = `${$addRoot$(chunk)} ${$addRoot$(symbol)}${captureIds ? " " + captureIds.join(" ") : ""}`;
+                            data = `${$addRoot$(chunk)}#${$addRoot$(symbol)}${captures ? "#" + captures : ""}`;
                             const existing = qrlMap.get(data);
                             if (existing) {
                                 const ref = $addRoot$(existing);
                                 return void output(1, ref);
                             }
-                            qrlMap.set(data, value), type = preloadQrls.has(value) ? 20 : 19;
+                            qrlMap.set(data, value);
                         } else {
-                            data = Number(symbol), type = 19;
+                            data = Number(symbol);
                         }
-                        output(type, data);
+                        output(9, data);
                     }
                 } else {
                     if (!isQwikComponent(value)) {
@@ -5069,7 +5040,7 @@ async function serialize(serializationContext) {
                     }
                     {
                         const [qrl] = value[SERIALIZABLE_STATE];
-                        serializationContext.$renderSymbols$.add(qrl.$symbol$), output(23, [ qrl ]);
+                        serializationContext.$renderSymbols$.add(qrl.$symbol$), output(22, [ qrl ]);
                     }
                 }
                 break;
@@ -5100,15 +5071,15 @@ async function serialize(serializationContext) {
     const writeObjectValue = value => {
         if (isPropsProxy(value)) {
             const owner = value[_OWNER];
-            output(32, [ _serializationWeakRef(owner), owner.varProps, owner.constProps, value[_PROPS_HANDLER].$effects$ ]);
+            output(31, [ _serializationWeakRef(owner), owner.varProps, owner.constProps, value[_PROPS_HANDLER].$effects$ ]);
         } else if (value instanceof SubscriptionData) {
-            output(33, [ value.data.$scopedStyleIdPrefix$, value.data.$isConst$ ]);
+            output(32, [ value.data.$scopedStyleIdPrefix$, value.data.$isConst$ ]);
         } else if (value instanceof EffectSubscription) {
-            output(34, [ value.consumer, value.property, value.backRef, value.data ]);
+            output(33, [ value.consumer, value.property, value.backRef, value.data ]);
         } else if (isStore(value)) {
             if (isResource(value)) {
                 serializationContext.$resources$.add(value);
-                const forwardRefId = resolvePromise(value.value, $addRoot$, (resolved, resolvedValue) => new PromiseResult(22, resolved, resolvedValue, getStoreHandler(value).$effects$));
+                const forwardRefId = resolvePromise(value.value, $addRoot$, (resolved, resolvedValue) => new PromiseResult(21, resolved, resolvedValue, getStoreHandler(value).$effects$));
                 output(2, forwardRefId);
             } else {
                 const storeHandler = getStoreHandler(value);
@@ -5124,12 +5095,12 @@ async function serialize(serializationContext) {
                 for (;void 0 === out[out.length - 1]; ) {
                     out.pop();
                 }
-                output(29, out);
+                output(28, out);
             }
         } else if (isSerializerObj(value)) {
             const result = value[SerializerSymbol](value);
             if (isPromise(result)) {
-                const forwardRef = resolvePromise(result, $addRoot$, (resolved, resolvedValue) => new PromiseResult(28, resolved, resolvedValue, void 0, void 0));
+                const forwardRef = resolvePromise(result, $addRoot$, (resolved, resolvedValue) => new PromiseResult(27, resolved, resolvedValue, void 0, void 0));
                 output(2, forwardRef);
             } else {
                 const index = parent.$index$;
@@ -5149,40 +5120,38 @@ async function serialize(serializationContext) {
                 output(5, out.length ? out : 0);
             }
         } else if ($isDomRef$(value)) {
-            value.$ssrNode$.vnodeData[0] |= 16, output(10, value.$ssrNode$.id);
+            value.$ssrNode$.vnodeData[0] |= 16, output(11, value.$ssrNode$.id);
         } else if (value instanceof SignalImpl) {
             if (value instanceof SerializerSignalImpl) {
-                addPreloadQrl(value.$computeQrl$);
                 const maybeValue = getCustomSerializerPromise(value, value.$untrackedValue$);
                 if (isPromise(maybeValue)) {
-                    const forwardRefId = resolvePromise(maybeValue, $addRoot$, (resolved, resolvedValue) => new PromiseResult(28, resolved, resolvedValue, value.$effects$, value.$computeQrl$));
+                    const forwardRefId = resolvePromise(maybeValue, $addRoot$, (resolved, resolvedValue) => new PromiseResult(27, resolved, resolvedValue, value.$effects$, value.$computeQrl$));
                     output(2, forwardRefId);
                 } else {
-                    output(28, [ value.$computeQrl$, filterEffectBackRefs(value[_EFFECT_BACK_REF]), value.$effects$, maybeValue ]);
+                    output(27, [ value.$computeQrl$, filterEffectBackRefs(value[_EFFECT_BACK_REF]), value.$effects$, maybeValue ]);
                 }
                 return;
             }
             if (value instanceof WrappedSignalImpl) {
-                output(25, [ ...serializeWrappingFn(serializationContext, value), filterEffectBackRefs(value[_EFFECT_BACK_REF]), value.$flags$, value.$hostElement$, ...value.$effects$ || [] ]);
+                output(24, [ ...serializeWrappingFn(serializationContext, value), filterEffectBackRefs(value[_EFFECT_BACK_REF]), value.$flags$, value.$hostElement$, ...value.$effects$ || [] ]);
             } else if (value instanceof ComputedSignalImpl) {
                 let v = value.$untrackedValue$;
-                const shouldAlwaysSerialize = 32 & value.$flags$;
-                const shouldNeverSerialize = 16 & value.$flags$;
+                const shouldAlwaysSerialize = 16 & value.$flags$;
+                const shouldNeverSerialize = 8 & value.$flags$;
                 const isInvalid = 1 & value.$flags$;
                 const isSkippable = fastSkipSerialize(value.$untrackedValue$);
-                shouldAlwaysSerialize ? v = value.$untrackedValue$ : (shouldNeverSerialize || isInvalid || isSkippable) && (v = NEEDS_COMPUTATION), 
-                addPreloadQrl(value.$computeQrl$);
+                shouldAlwaysSerialize ? v = value.$untrackedValue$ : (shouldNeverSerialize || isInvalid || isSkippable) && (v = NEEDS_COMPUTATION);
                 const out = [ value.$computeQrl$, filterEffectBackRefs(value[_EFFECT_BACK_REF]), value.$effects$ ];
-                const isAsync = value instanceof AsyncComputedSignalImpl;
+                const isAsync = value instanceof AsyncSignalImpl;
                 isAsync && out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedLoading$, value.$untrackedError$);
                 let keepUndefined = !1;
                 v !== NEEDS_COMPUTATION && (out.push(v), isAsync || void 0 !== v || (keepUndefined = !0)), 
-                output(isAsync ? 27 : 26, out, keepUndefined);
+                output(isAsync ? 26 : 25, out, keepUndefined);
             } else {
                 const v = value.$untrackedValue$;
                 const keepUndefined = void 0 === v;
                 const out = [ v ];
-                value.$effects$ && out.push(...value.$effects$), output(24, out, keepUndefined);
+                value.$effects$ && out.push(...value.$effects$), output(23, out, keepUndefined);
             }
         } else if (value instanceof URL) {
             output(6, value.href);
@@ -5193,10 +5162,10 @@ async function serialize(serializationContext) {
         } else if (value instanceof Error) {
             const out = [ value.message ];
             out.push(...Object.entries(value).flat()), isDev && out.push("stack", value.stack), 
-            output(14, out);
+            output(15, out);
         } else if ($isSsrNode$(value)) {
             const rootIndex = $addRoot$(value);
-            serializationContext.$setProp$(value, "q:id", String(rootIndex)), output(9, value.id);
+            serializationContext.$setProp$(value, "q:id", String(rootIndex)), output(10, value.id);
             const vNodeData = value.vnodeData;
             if (vNodeData && (discoverValuesForVNodeData(vNodeData, vNodeDataValue => $addRoot$(vNodeDataValue)), 
             vNodeData[0] |= 16), value.children) {
@@ -5217,38 +5186,38 @@ async function serialize(serializationContext) {
             const array = [];
             value.forEach((value, key) => {
                 array.push(key, "string" == typeof value ? value : value.name);
-            }), output(30, array);
+            }), output(29, array);
         } else if (value instanceof URLSearchParams) {
-            output(12, value.toString());
+            output(13, value.toString());
         } else if (value instanceof Set) {
-            output(16, [ ...value.values() ]);
+            output(17, [ ...value.values() ]);
         } else if (value instanceof Map) {
             const combined = [];
             for (const [k, v] of value.entries()) {
                 combined.push(k, v);
             }
-            output(17, combined);
+            output(18, combined);
         } else if (isJSXNode(value)) {
             const out = [ value.type, value.key, value.varProps, value.constProps, value.children, value.toSort || void 0 ];
             for (;void 0 === out[out.length - 1]; ) {
                 out.pop();
             }
-            output(31, out);
+            output(30, out);
         } else if (value instanceof Task) {
             const out = [ value.$qrl$, value.$flags$, value.$index$, value.$el$, value[_EFFECT_BACK_REF], value.$state$ ];
             for (;void 0 === out[out.length - 1]; ) {
                 out.pop();
             }
-            output(21, out);
+            output(20, out);
         } else if (isPromise(value)) {
-            const forwardRefId = resolvePromise(value, $addRoot$, (resolved, resolvedValue) => new PromiseResult(15, resolved, resolvedValue));
+            const forwardRefId = resolvePromise(value, $addRoot$, (resolved, resolvedValue) => new PromiseResult(16, resolved, resolvedValue));
             output(2, forwardRefId);
         } else if (value instanceof PromiseResult) {
-            if (22 === value.$type$) {
-                output(22, [ value.$resolved$, value.$value$, value.$effects$ ]);
-            } else if (28 === value.$type$) {
+            if (21 === value.$type$) {
+                output(21, [ value.$resolved$, value.$value$, value.$effects$ ]);
+            } else if (27 === value.$type$) {
                 if (value.$qrl$) {
-                    output(28, [ value.$qrl$, value.$effects$, value.$value$ ]);
+                    output(27, [ value.$qrl$, value.$effects$, value.$value$ ]);
                 } else {
                     if (!value.$resolved$) {
                         throw console.error(value.$value$), qError(33);
@@ -5259,7 +5228,7 @@ async function serialize(serializationContext) {
                     }
                 }
             } else {
-                output(15, [ value.$resolved$, value.$value$ ]);
+                output(16, [ value.$resolved$, value.$value$ ]);
             }
         } else if (value instanceof Uint8Array) {
             let buf = "";
@@ -5267,7 +5236,7 @@ async function serialize(serializationContext) {
                 buf += String.fromCharCode(c);
             }
             const out = btoa(buf).replace(/=+$/, "");
-            output(18, out);
+            output(19, out);
         } else if (value instanceof SerializationWeakRef) {
             const obj = value.$obj$;
             if (getSeenRefOrOutput(obj, parent.$index$, !0)) {
@@ -5311,7 +5280,7 @@ async function serialize(serializationContext) {
                 lastIdx--;
             }
             if (lastIdx >= 0) {
-                $writer$.write(","), $writer$.write("13,");
+                $writer$.write(","), $writer$.write("14,");
                 const out = lastIdx === forwardRefs.length - 1 ? forwardRefs : forwardRefs.slice(0, lastIdx + 1);
                 outputArray(out, !0, value => {
                     $writer$.write(String(value));
@@ -5720,9 +5689,9 @@ function setEvent(serializationCtx, key, rawValue) {
     let value = null;
     const qrls = rawValue;
     const appendToValue = valueToAppend => {
-        value = (null == value ? "" : value + "\n") + valueToAppend;
+        value = (null == value ? "" : value + "|") + valueToAppend;
     };
-    const getQrlString = qrl => (!qrl.$symbol$.startsWith("_") && qrl.$captureRef$?.length && (qrl = createQRL(null, "_run", _run, null, null, [ qrl ])), 
+    const getQrlString = qrl => (!qrl.$symbol$.startsWith("_") && qrl.$captures$?.length && (qrl = createQRL(null, "_run", _run, null, [ qrl ])), 
     qrlToString(serializationCtx, qrl));
     if (Array.isArray(qrls)) {
         for (let i = 0; i <= qrls.length; i++) {
@@ -5745,13 +5714,12 @@ function addQwikEventToSerializationContext(serializationCtx, key, qrl) {
     if (data) {
         const [scope, eventName] = data;
         const scopedEvent = getScopedEventName(scope, eventName);
-        const loaderScopedEvent = getLoaderScopedEventName(scope, scopedEvent);
-        serializationCtx.$eventNames$.add(loaderScopedEvent), serializationCtx.$eventQrls$.add(qrl);
+        serializationCtx.$eventNames$.add(scopedEvent), serializationCtx.$eventQrls$.add(qrl);
     }
 }
 
 function addPreventDefaultEventToSerializationContext(serializationCtx, key) {
-    const eventName = key.substring(14);
+    const eventName = "e" + key.substring(14);
     eventName && serializationCtx.$eventNames$.add(eventName);
 }
 
@@ -5775,6 +5743,11 @@ function appendClassIfScopedStyleExists(jsx, styleScoped) {
     jsx.constProps.class = "");
 }
 
+const useLexicalScope = () => (isDev && assertDefined(_captures, "invoke: captures must be defined for useLexicalScope()"), 
+_captures);
+
+let loading = Promise.resolve();
+
 const inflate = (container, target, typeId, data) => {
     if (0 !== typeId) {
         switch (4 !== typeId && Array.isArray(data) && (data = _eagerDeserializeArray(container, data)), 
@@ -5792,19 +5765,14 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
 
-          case 19:
           case 20:
-            _inflateQRL(container, target), 20 === typeId && target.resolve();
-            break;
-
-          case 21:
             const task = target;
             const v = data;
             task.$qrl$ = v[0], task.$flags$ = v[1], task.$index$ = v[2], task.$el$ = v[3], task[_EFFECT_BACK_REF] = v[4], 
             task.$state$ = v[5];
             break;
 
-          case 22:
+          case 21:
             const [resolved, result, effects] = data;
             const resource = target;
             resolved ? (resource.value = Promise.resolve(result), resource._resolved = result, 
@@ -5812,11 +5780,11 @@ const inflate = (container, target, typeId, data) => {
             resource._state = "rejected"), getStoreHandler(target).$effects$ = effects;
             break;
 
-          case 23:
+          case 22:
             target[SERIALIZABLE_STATE][0] = data[0];
             break;
 
-          case 29:
+          case 28:
             {
                 const store = unwrapStore(target);
                 const storeTarget = pendingStoreTargets.get(store);
@@ -5827,7 +5795,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 24:
+          case 23:
             {
                 const signal = target;
                 const d = data;
@@ -5835,7 +5803,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 25:
+          case 24:
             {
                 const signal = target;
                 const d = data;
@@ -5845,30 +5813,31 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 27:
+          case 26:
             {
-                const asyncComputed = target;
+                const asyncSignal = target;
                 const d = data;
-                asyncComputed.$computeQrl$ = d[0], asyncComputed[_EFFECT_BACK_REF] = d[1], asyncComputed.$effects$ = new Set(d[2]), 
-                asyncComputed.$loadingEffects$ = new Set(d[3]), asyncComputed.$errorEffects$ = new Set(d[4]), 
-                asyncComputed.$untrackedLoading$ = d[5], asyncComputed.$untrackedError$ = d[6];
-                d.length > 7 && (asyncComputed.$untrackedValue$ = d[7], asyncComputed.$promiseValue$ = d[7]), 
-                asyncComputed.$flags$ |= 1;
+                asyncSignal.$computeQrl$ = d[0], asyncSignal[_EFFECT_BACK_REF] = d[1], asyncSignal.$effects$ = new Set(d[2]), 
+                asyncSignal.$loadingEffects$ = new Set(d[3]), asyncSignal.$errorEffects$ = new Set(d[4]), 
+                asyncSignal.$untrackedLoading$ = d[5], asyncSignal.$untrackedError$ = d[6];
+                d.length > 7 && (asyncSignal.$untrackedValue$ = d[7], asyncSignal.$promiseValue$ = d[7]), 
+                asyncSignal.$flags$ |= 1;
                 break;
             }
 
-          case 28:
-          case 26:
+          case 27:
+          case 25:
             {
                 const computed = target;
                 const d = data;
-                computed.$computeQrl$ = d[0], computed[_EFFECT_BACK_REF] = d[1], d[2] && (computed.$effects$ = new Set(d[2]));
-                d.length > 3 ? (computed.$untrackedValue$ = d[3], 28 === typeId && (computed.$flags$ |= 1)) : (computed.$flags$ |= 1, 
-                computed.$computeQrl$.resolve());
+                computed.$computeQrl$ = d[0];
+                const p = computed.$computeQrl$.resolve(container).catch(() => {});
+                loading = loading.finally(() => p), computed[_EFFECT_BACK_REF] = d[1], d[2] && (computed.$effects$ = new Set(d[2]));
+                d.length > 3 ? (computed.$untrackedValue$ = d[3], 27 === typeId && (computed.$flags$ |= 1)) : computed.$flags$ |= 1;
                 break;
             }
 
-          case 14:
+          case 15:
             {
                 const d = data;
                 target.message = d[0];
@@ -5878,7 +5847,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 30:
+          case 29:
             {
                 const formData = target;
                 const d = data;
@@ -5888,7 +5857,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 31:
+          case 30:
             {
                 const jsx = target;
                 const [type, key, varProps, constProps, children, toSort] = data;
@@ -5897,7 +5866,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 16:
+          case 17:
             {
                 const set = target;
                 const d = data;
@@ -5907,7 +5876,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 17:
+          case 18:
             {
                 const map = target;
                 const d = data;
@@ -5917,7 +5886,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 15:
+          case 16:
             {
                 const promise = target;
                 const [resolved, result] = data;
@@ -5926,7 +5895,7 @@ const inflate = (container, target, typeId, data) => {
                 break;
             }
 
-          case 18:
+          case 19:
             const bytes = target;
             const buf = atob(data);
             let i = 0;
@@ -5935,7 +5904,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
 
-          case 32:
+          case 31:
             const propsProxy = target;
             const d = data;
             let owner = d[0];
@@ -5943,14 +5912,14 @@ const inflate = (container, target, typeId, data) => {
             owner._proxy = propsProxy), propsProxy[_OWNER] = owner, propsProxy[_PROPS_HANDLER].$effects$ = d[3];
             break;
 
-          case 33:
+          case 32:
             {
                 const effectData = target;
                 effectData.data.$scopedStyleIdPrefix$ = data[0], effectData.data.$isConst$ = data[1];
                 break;
             }
 
-          case 34:
+          case 33:
             {
                 const effectSub = target;
                 const d = data;
@@ -5972,16 +5941,6 @@ const _eagerDeserializeArray = (container, data, output = Array(data.length / 2)
     return output;
 };
 
-function _inflateQRL(container, qrl) {
-    if (qrl.$captureRef$) {
-        return qrl;
-    }
-    const captureIds = qrl.$capture$;
-    return qrl.$captureRef$ = captureIds ? captureIds.map(id => container.$getObjectById$(id)) : null, 
-    qrl.$capture$ = null, container.element && qrl.$setContainer$(container.element), 
-    qrl;
-}
-
 function deserializeData(container, typeId, value) {
     if (0 === typeId) {
         return value;
@@ -6014,7 +5973,7 @@ function inflateWrappedSignalValue(signal) {
     }
 }
 
-const needsInflation = typeId => typeId >= 14 || 4 === typeId || 5 === typeId;
+const needsInflation = typeId => typeId >= 15 || 4 === typeId || 5 === typeId;
 
 const deserializedProxyMap = new WeakMap;
 
@@ -6306,8 +6265,9 @@ class DomContainer extends _SharedContainer {
     $setRawState$(id, vParent) {
         this.$stateData$[id] = vParent;
     }
-    parseQRL(qrl) {
-        return _inflateQRL(this, parseQRL(qrl));
+    parseQRL(qrlStr) {
+        const qrl = parseQRL(qrlStr);
+        return qrl.$container$ = this, qrl;
     }
     handleError(err, host) {
         const errorStore = host && this.resolveContext(host, ERROR_CONTEXT);
@@ -6465,11 +6425,12 @@ class Task extends BackRef {
 
 const isTask = value => value instanceof Task;
 
-const scheduleTask = (_event, element) => {
-    const [task] = useLexicalScope();
+function scheduleTask(_event, element) {
     const container = getDomContainer(element);
+    "string" == typeof this && setCaptures(deserializeCaptures(container, this));
+    const task = _captures[0];
     task.$flags$ |= 8, markVNodeDirty(container, task.$el$, 1);
-};
+}
 
 const throwIfQRLNotResolved = qrl => {
     if (!qrl.resolved) {
@@ -6544,11 +6505,11 @@ const getComputedSignalFlags = serializationStrategy => {
     let flags = 1;
     switch (serializationStrategy) {
       case "never":
-        flags |= 16;
+        flags |= 8;
         break;
 
       case "always":
-        flags |= 32;
+        flags |= 16;
     }
     return flags;
 };
@@ -6781,6 +6742,8 @@ function getEffects(target, prop, storeEffects) {
     return effectsToTrigger;
 }
 
+const getKeyVal = (value, key) => value[key];
+
 const canSerialize = (value, seen = new WeakSet) => {
     if (null == value || "string" == typeof value || "number" == typeof value || "boolean" == typeof value || "bigint" == typeof value) {
         return !0;
@@ -6793,7 +6756,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(getKeyVal, value, key), seen)) {
                     return !1;
                 }
             }
@@ -6901,7 +6864,7 @@ const _dumpState = (state, color = !1, prefix = "", limit = 20) => {
             out.push(`${RED}${type}${RESET} ${printRaw(value, `${prefix}  `)}`);
         } else {
             3 === key ? value = constantToName(value) : "string" == typeof value ? (value = JSON.stringify(value), 
-            value.length > 120 && (value = value.slice(0, 120) + '"...')) : 13 === key ? value = `[\n${prefix}  ${value.join(`\n${prefix}  `)}\n${prefix}]` : Array.isArray(value) && (value = value.length ? `[\n${_dumpState(value, color, `${prefix}  `)}\n${prefix}]` : "[]"), 
+            value.length > 120 && (value = value.slice(0, 120) + '"...')) : 14 === 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}`);
         }
     }
@@ -6919,8 +6882,7 @@ const constantToName = code => _constantNames[code] || `Unknown(${code})`;
 
 function preprocessState(data, container) {
     const isRootDeepRef = (type, value) => 1 === type && "string" == typeof value;
-    const isForwardRefsMap = type => 13 === type;
-    const isPreloadQrlType = type => 20 === type;
+    const isForwardRefsMap = type => 14 === type;
     const processRootRef = index => {
         const rootRefPath = data[index + 1].split(" ");
         let object = data;
@@ -6938,31 +6900,8 @@ function preprocessState(data, container) {
         parent && (parent[typeIndex] = 1, parent[valueIndex] = index / 2), data[index] = objectType, 
         data[index + 1] = object;
     };
-    const toPreload = isServer ? void 0 : [];
     for (let i = 0; i < data.length; i += 2) {
-        if (isRootDeepRef(data[i], data[i + 1])) {
-            processRootRef(i);
-        } else if (isForwardRefsMap(data[i])) {
-            container.$forwardRefs$ = data[i + 1];
-        } else if (!isServer && isPreloadQrlType(data[i])) {
-            const chunkIdx = Number(data[i + 1].split(" ")[0]);
-            toPreload.push(chunkIdx);
-        }
-    }
-    if (!isServer) {
-        for (const idx of toPreload) {
-            const chunkType = data[2 * idx];
-            let chunk;
-            if (0 === chunkType) {
-                chunk = data[2 * idx + 1];
-            } else {
-                if (1 !== chunkType) {
-                    continue;
-                }
-                chunk = data[2 * data[2 * idx + 1] + 1];
-            }
-            p(chunk, .3);
-        }
+        isRootDeepRef(data[i], data[i + 1]) ? processRootRef(i) : isForwardRefsMap(data[i]) && (container.$forwardRefs$ = data[i + 1]);
     }
 }
 
@@ -6974,7 +6913,7 @@ async function _serialize(data) {
     return await serializationContext.$serialize$(), serializationContext.$writer$.toString();
 }
 
-function _deserialize(rawStateData, element) {
+function _deserialize(rawStateData) {
     if (null == rawStateData) {
         return [];
     }
@@ -6982,8 +6921,7 @@ function _deserialize(rawStateData, element) {
     if (!Array.isArray(stateData)) {
         return [];
     }
-    let container;
-    container = isNode(element) && isElement$1(element) ? _createDeserializeContainer(stateData, element) : _createDeserializeContainer(stateData);
+    const container = _createDeserializeContainer(stateData);
     const output = [];
     for (let i = 0; i < stateData.length; i += 2) {
         output[i / 2] = deserializeData(container, stateData[i], stateData[i + 1]);
@@ -6992,11 +6930,11 @@ function _deserialize(rawStateData, element) {
 }
 
 function getObjectById(id, stateData) {
-    return "string" == typeof id && (id = parseInt(id, 10)), isDev && assertTrue(id < stateData.length, `Invalid reference ${id} >= ${stateData.length}`), 
-    stateData[id];
+    return "string" == typeof id ? stateData[id = parseInt(id, 10)] : (isDev && assertTrue(id < stateData.length, `Invalid reference ${id} >= ${stateData.length}`), 
+    stateData[id]);
 }
 
-function _createDeserializeContainer(stateData, element) {
+function _createDeserializeContainer(stateData) {
     let state;
     const container = {
         $getObjectById$: id => getObjectById(id, state),
@@ -7006,12 +6944,12 @@ function _createDeserializeContainer(stateData, element) {
         $forwardRefs$: null
     };
     return preprocessState(stateData, container), state = wrapDeserializerProxy(container, stateData), 
-    container.$state$ = state, element && (container.element = element), container;
+    container.$state$ = state, container;
 }
 
 const verifySerializable = (value, preMessage) => {
     const seen = new WeakSet;
-    return untrack(() => _verifySerializable(value, seen, "_", preMessage));
+    return untrack(_verifySerializable, value, seen, "_", preMessage);
 };
 
 const _verifySerializable = (value, seen, ctx, preMessage) => {
@@ -7082,101 +7020,119 @@ const NoSerializeSymbol = Symbol("noSerialize");
 
 const SerializerSymbol = Symbol("serialize");
 
-const resolvedSymbol = Symbol("resolved");
+let _captures = null;
 
-const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
-    let _containerEl;
-    const qrl = async function(...args) {
-        const boundedFn = bindFnToContext.call(this, tryGetInvokeContext());
-        return await boundedFn(...args);
-    };
-    const setContainer = el => (_containerEl || (_containerEl = el), _containerEl);
-    function bindFnToContext(currentCtx, beforeFn) {
-        const bound = (...args) => {
-            if (!qrl.resolved) {
-                return qrl.resolve().then(fn => {
-                    if (!isFunction(fn)) {
-                        throw qError(5);
-                    }
-                    return bound(...args);
-                });
-            }
-            if (beforeFn && !1 === beforeFn()) {
-                return;
-            }
-            const context = createOrReuseInvocationContext(currentCtx);
-            const prevQrl = context.$qrl$;
-            const prevEvent = context.$event$;
-            context.$qrl$ = qrl, context.$event$ ||= this;
-            try {
-                return invoke.call(this, context, symbolRef, ...args);
-            } finally {
-                context.$qrl$ = prevQrl, context.$event$ = prevEvent;
-            }
-        };
-        return bound;
+const setCaptures = captures => {
+    _captures = captures;
+};
+
+const deserializeCaptures = (container, captures) => {
+    const refs = [];
+    for (const id of captures.split(" ")) {
+        refs.push(container.$getObjectById$(id));
     }
-    const wrapFn = fn => "function" != typeof fn || !capture?.length && !captureRef?.length ? fn : function(...args) {
-        let context = tryGetInvokeContext();
-        if (context) {
-            if (context.$qrl$?.$symbol$ === qrl.$symbol$) {
-                return fn.apply(this, args);
-            }
-            const prevQrl = context.$qrl$;
-            context.$qrl$ = qrl;
-            try {
-                return fn.apply(this, args);
-            } finally {
-                context.$qrl$ = prevQrl;
-            }
+    return refs;
+};
+
+const ensureQrlCaptures = qrl => {
+    if (_captures = qrl.$captures$, "string" == typeof _captures) {
+        if (!qrl.$container$) {
+            throw qError(13);
         }
-        return context = newInvokeContext(), context.$qrl$ = qrl, context.$event$ = this, 
-        invoke.call(this, context, fn, ...args);
-    };
-    symbolFn && resolvedSymbol in symbolFn && (symbolRef = symbolFn[resolvedSymbol]);
-    const resolve = symbolRef ? async () => symbolRef : async containerEl => {
-        if (null !== symbolRef) {
+        const prevLoading = loading;
+        if (_captures = qrl.$captures$ = deserializeCaptures(qrl.$container$, _captures), 
+        loading !== prevLoading) {
+            return loading;
+        }
+    }
+};
+
+function bindFnToContext(qrl, currentCtx, beforeFn) {
+    const bound = (...args) => qrl.resolved ? beforeFn && !1 === beforeFn() ? void 0 : invokeApply.call(this, currentCtx, qrl.resolved, args) : qrl.resolve().then(fn => {
+        if (!isFunction(fn)) {
+            throw qError(5);
+        }
+        return bound(...args);
+    });
+    return bound;
+}
+
+const bindCaptures = (qrl, fn) => "function" == typeof fn && qrl.$captures$ ? function(...args) {
+    return ensureQrlCaptures(qrl), fn.apply(this, args);
+} : fn;
+
+const makeResolveFunction = (qrl, symbolFn) => {
+    let symbolRef;
+    return async container => {
+        if (null != symbolRef) {
             return symbolRef;
         }
-        if (containerEl && setContainer(containerEl), "" === chunk) {
-            isDev && assertDefined(_containerEl, "Sync QRL must have container element");
-            const hash = _containerEl.getAttribute("q:instance");
-            const qFuncs = getQFuncs(_containerEl.ownerDocument, hash);
-            return qrl.resolved = symbolRef = qFuncs[Number(symbol)];
+        if (container) {
+            qrl.$container$ = container;
+        } else if (!qrl.$container$) {
+            const ctx = tryGetInvokeContext();
+            ctx?.$container$ && (qrl.$container$ = ctx.$container$);
+        }
+        if ("" === qrl.$chunk$) {
+            isDev && assertDefined(qrl.$container$, "Sync QRL must have container element");
+            const hash = qrl.$container$.$instanceHash$;
+            const doc = qrl.$container$.element?.ownerDocument || document;
+            const qFuncs = getQFuncs(doc, hash);
+            return qrl.resolved = symbolRef = qFuncs[Number(qrl.$symbol$)];
         }
-        isBrowser && chunk && p(chunk, 1);
+        isBrowser && qrl.$chunk$ && p(qrl.$chunk$, 1);
         const start = now();
-        const ctx = tryGetInvokeContext();
-        if (null !== symbolFn) {
-            symbolRef = symbolFn().then(module => {
-                const resolved = wrapFn(symbolRef = module[symbol]);
-                return symbolFn[resolvedSymbol] = resolved, qrl.resolved = resolved, resolved;
+        const symbol = qrl.$symbol$;
+        const importP = symbolFn ? symbolFn().then(module => module[symbol]) : getPlatform().importSymbol(qrl.$container$?.element, qrl.$chunk$, symbol);
+        if (symbolRef = maybeThen(importP, resolved => (symbolFn && (symbolFn[symbol] = resolved), 
+        symbolRef = qrl.resolved = bindCaptures(qrl, resolved))), isPromise(symbolRef)) {
+            const ctx = tryGetInvokeContext();
+            symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$hostElement$ instanceof ElementVNode ? ctx?.$hostElement$.node : void 0, start), err => {
+                console.error(`qrl ${symbol} failed to load`, err), symbolRef = null;
             });
-        } else {
-            const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-            symbolRef = maybeThen(imported, ref => qrl.resolved = wrapFn(symbolRef = ref));
         }
-        return isPromise(symbolRef) && symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$hostElement$ instanceof ElementVNode ? ctx?.$hostElement$.node : void 0, start), err => {
-            console.error(`qrl ${symbol} failed to load`, err), symbolRef = null;
-        }), symbolRef;
+        return qrl.$container$ && await ensureQrlCaptures(qrl), symbolRef;
     };
-    const createOrReuseInvocationContext = invoke => null == invoke ? newInvokeContext() : isArray(invoke) ? newInvokeContextFromTuple(invoke) : invoke;
+};
+
+function getSymbol() {
+    return this.$symbol$;
+}
+
+function getHash() {
+    return this.$hash$;
+}
+
+function getCaptured() {
+    return ensureQrlCaptures(this), this.$captures$;
+}
+
+const createQRL = (chunk, symbol, symbolRef, symbolFn, captures) => {
+    const qrl = async function(...args) {
+        if (qrl.resolved) {
+            return qrl.resolved.apply(this, args);
+        }
+        const ctx = tryGetInvokeContext();
+        return await qrl.resolve(ctx?.$container$), invokeApply.call(this, ctx, qrl.resolved, args);
+    };
+    symbolFn && symbol in symbolFn && (symbolRef = symbolFn[symbol]);
+    const resolve = null != symbolRef ? async () => symbolRef : makeResolveFunction(qrl, symbolFn);
     const hash = getSymbolHash(symbol);
     return Object.assign(qrl, {
-        getSymbol: () => symbol,
-        getHash: () => hash,
-        getCaptured: () => qrl.$captureRef$,
+        getSymbol,
+        getHash,
+        getCaptured,
+        getFn: function(currentCtx, beforeFn) {
+            return bindFnToContext.call(this, qrl, currentCtx, beforeFn);
+        },
         resolve,
-        $setContainer$: setContainer,
+        resolved: void 0,
         $chunk$: chunk,
         $symbol$: symbol,
         $hash$: hash,
-        getFn: bindFnToContext,
-        $capture$: capture,
-        $captureRef$: captureRef,
-        dev: null,
-        resolved: void 0
-    }), symbolRef && (symbolRef = maybeThen(symbolRef, resolved => qrl.resolved = wrapFn(symbolRef = resolved))), 
+        $captures$: captures,
+        $container$: null
+    }), null != symbolRef && (symbolRef = maybeThen(ensureQrlCaptures(qrl), () => maybeThen(symbolRef, resolved => symbolRef = qrl.resolved = bindCaptures(qrl, resolved)))), 
     isBrowser && symbol && p(symbol, .8), qrl;
 };
 
@@ -7201,17 +7157,17 @@ const now = () => isServerPlatform() ? 0 : "object" == typeof performance ? perf
 
 let runtimeSymbolId = 0;
 
-const $ = expression => createQRL(null, "s" + runtimeSymbolId++, expression, null, null, null);
+const $ = expression => createQRL(null, "s" + runtimeSymbolId++, expression, null, null);
 
 const dollar = $;
 
 const eventQrl = qrl => qrl;
 
-const sync$ = fn => createQRL("", "<sync>", fn, null, null, null);
+const sync$ = fn => createQRL("", "<sync>", fn, null, null);
 
 const _qrlSync = function(fn, serializedFn) {
     return void 0 === serializedFn && (serializedFn = fn.toString()), fn.serialized = serializedFn, 
-    createQRL("", "<sync>", fn, null, null, null);
+    createQRL("", "<sync>", fn, null, null);
 };
 
 const componentQrl = componentQrl => {
@@ -7516,15 +7472,15 @@ const _useStyles = (styleQrl, transform, scoped) => {
 };
 
 const useOn = (event, eventQrl) => {
-    _useOn("on:", event, eventQrl);
+    _useOn("q-e:", event, eventQrl);
 };
 
 const useOnDocument = (event, eventQrl) => {
-    _useOn("on-document:", event, eventQrl);
+    _useOn("q-d:", event, eventQrl);
 };
 
 const useOnWindow = (event, eventQrl) => {
-    _useOn("on-window:", event, eventQrl);
+    _useOn("q-w:", event, eventQrl);
 };
 
 const _useOn = (prefix, eventName, eventQrl) => {
@@ -7561,31 +7517,27 @@ const useOnEventsSequentialScope = () => {
     };
 };
 
-const useSignal = initialState => useConstant(() => {
+const getSignal = initialState => {
     const value = isFunction(initialState) && !isQwikComponent(initialState) ? invoke(void 0, initialState) : initialState;
     return createSignal(value);
-});
-
-const useConstant = value => {
-    const {val, set} = useSequentialScope();
-    return null != val ? val : set(value = isFunction(value) && !isQwikComponent(value) ? value() : value);
 };
 
-const useComputedCommon = (qrl, createFn, options) => {
+const useSignal = initialState => useConstant(getSignal, initialState);
+
+const useConstant = (value, ...args) => {
     const {val, set} = useSequentialScope();
-    if (val) {
-        return val;
-    }
-    assertQrl(qrl);
-    const signal = createFn(qrl, options);
-    return set(signal), throwIfQRLNotResolved(qrl), signal;
+    return null != val ? val : set(value = isFunction(value) && !isQwikComponent(value) ? untrack(value, ...args) : value);
 };
 
-const useComputedQrl = (qrl, options) => useComputedCommon(qrl, createComputedSignal, options);
+const creator$2 = (qrl, options) => (qrl.resolve(), createComputedSignal(qrl, options));
+
+const useComputedQrl = (qrl, options) => useConstant(creator$2, qrl, options);
 
 const useComputed$ = implicit$FirstArg(useComputedQrl);
 
-const useSerializerQrl = qrl => useComputedCommon(qrl, createSerializerSignal);
+const creator$1 = qrl => (qrl.resolve(), createSerializerSignal(qrl));
+
+const useSerializerQrl = qrl => useConstant(creator$1, qrl);
 
 const useSerializer$ = implicit$FirstArg(useSerializerQrl);
 
@@ -7605,7 +7557,7 @@ const useRegisterTaskEvents = (task, eagerness) => {
     "intersection-observer" === eagerness ? useOn("qvisible", getTaskHandlerQrl(task)) : "document-ready" === eagerness ? useOnDocument("qinit", getTaskHandlerQrl(task)) : "document-idle" === eagerness && useOnDocument("qidle", getTaskHandlerQrl(task));
 };
 
-const getTaskHandlerQrl = task => createQRL(null, "_task", scheduleTask, null, null, [ task ]);
+const getTaskHandlerQrl = task => createQRL(null, "_task", scheduleTask, null, [ task ]);
 
 const useResource$ = (generatorFn, opts) => useResourceQrl(dollar(generatorFn), opts);
 
@@ -7613,9 +7565,11 @@ const useTask$ = /*#__PURE__*/ implicit$FirstArg(useTaskQrl);
 
 const useVisibleTask$ = /*#__PURE__*/ implicit$FirstArg(useVisibleTaskQrl);
 
-const useAsyncComputedQrl = (qrl, options) => useComputedCommon(qrl, createAsyncComputedSignal, options);
+const creator = (qrl, options) => (qrl.resolve(), createAsyncSignal(qrl, options));
+
+const useAsyncQrl = (qrl, options) => useConstant(creator, qrl, options);
 
-const useAsyncComputed$ = implicit$FirstArg(useAsyncComputedQrl);
+const useAsync$ = implicit$FirstArg(useAsyncQrl);
 
 const useErrorBoundary = () => {
     const error = useStore({
@@ -7663,4 +7617,4 @@ globalThis.__qwik = version, import.meta.hot && import.meta.hot.dispose(() => {
     globalThis.__qwik = void 0;
 });
 
-export { $, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _chk, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextElement, _getContextEvent, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, _regSymbol, _resolveContextWithoutSequentialScope, _restProps, _run, _serialize, scheduleTask as _task, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getFirstChild as _vnode_getFirstChild, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsyncComputed$, createAsyncComputedSignal as createAsyncComputedQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsyncComputed$, useAsyncComputedQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
+export { $, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _captures, _chk, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, _regSymbol, _resolveContextWithoutSequentialScope, _restProps, _run, _serialize, scheduleTask as _task, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getFirstChild as _vnode_getFirstChild, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsync$, createAsyncSignal as createAsyncQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsync$, useAsyncQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };