@qwik.dev/core 2.0.0-beta.28 → 2.0.0-beta.29

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.28-dev+fac55b7
+ * @qwik.dev/core 2.0.0-beta.29-dev+bc61b71
  * 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
@@ -270,11 +270,8 @@ function assertQrl(qrl) {
     }
 }
 const getSymbolHash = (symbolName) => {
-    const index = symbolName.lastIndexOf('_');
-    if (index > -1) {
-        return symbolName.slice(index + 1);
-    }
-    return symbolName;
+    const index = symbolName.lastIndexOf('_') + 1;
+    return symbolName.slice(index);
 };
 
 /**
@@ -385,6 +382,8 @@ function decodeVNodeDataString(str) {
 
 /** State factory of the component. */
 const OnRenderProp = 'q:renderFn';
+/** Target DOM element for external projection rendering. */
+const QTargetElement = 'q:targetEl';
 /** Component style content prefix */
 const ComponentStylesPrefixContent = '⚡️';
 /** `<some-element q:slot="...">` */
@@ -1008,7 +1007,7 @@ const COMMA = ',';
  *
  * @public
  */
-const version = "2.0.0-beta.28-dev+fac55b7";
+const version = "2.0.0-beta.29-dev+bc61b71";
 
 // keep this import from core/build so the cjs build works
 const createPlatform = () => {
@@ -2073,7 +2072,7 @@ class ComputedSignalImpl extends SignalImpl {
         16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */) {
         // The value is used for comparison when signals trigger, which can only happen
         // when it was calculated before. Therefore we can pass whatever we like.
-        super(container || fn.$container$, NEEDS_COMPUTATION);
+        super(container || tryGetInvokeContext()?.$container$, NEEDS_COMPUTATION);
         this.$computeQrl$ = fn;
         this.$flags$ = flags;
     }
@@ -6324,14 +6323,14 @@ const createFastGetter = (propName) => {
 //////////////////////////////////////////////////////////////////////////////////////////////////////
 const vnode_newElement = (element, elementName, key = null) => {
     isDev && assertEqual(fastNodeType(element), 1 /* ELEMENT_NODE */, 'Expecting element node.');
-    const vnode = new ElementVNode(key, 1 /* VNodeFlags.Element */ | 8 /* VNodeFlags.Inflated */ | (-1 << 11 /* VNodeFlagsIndex.shift */), // Flag
+    const vnode = new ElementVNode(key, 1 /* VNodeFlags.Element */ | 8 /* VNodeFlags.Inflated */ | (-1 << 12 /* VNodeFlagsIndex.shift */), // Flag
     null, null, null, null, null, null, element, elementName);
     element.vNode = vnode;
     return vnode;
 };
 const vnode_newUnMaterializedElement = (element) => {
     isDev && assertEqual(fastNodeType(element), 1 /* ELEMENT_NODE */, 'Expecting element node.');
-    const vnode = new ElementVNode(null, 1 /* VNodeFlags.Element */ | (-1 << 11 /* VNodeFlagsIndex.shift */), // Flag
+    const vnode = new ElementVNode(null, 1 /* VNodeFlags.Element */ | (-1 << 12 /* VNodeFlagsIndex.shift */), // Flag
     null, null, null, null, undefined, undefined, element, undefined);
     element.vNode = vnode;
     return vnode;
@@ -6340,7 +6339,7 @@ const vnode_newSharedText = (previousTextNode, sharedTextNode, textContent) => {
     isDev &&
         sharedTextNode &&
         assertEqual(fastNodeType(sharedTextNode), 3 /* TEXT_NODE */, 'Expecting text node.');
-    const vnode = new TextVNode(4 /* VNodeFlags.Text */ | (-1 << 11 /* VNodeFlagsIndex.shift */), // Flag
+    const vnode = new TextVNode(4 /* VNodeFlags.Text */ | (-1 << 12 /* VNodeFlagsIndex.shift */), // Flag
     null, // Parent
     previousTextNode, // Previous TextNode (usually first child)
     null, // Next sibling
@@ -6348,7 +6347,7 @@ const vnode_newSharedText = (previousTextNode, sharedTextNode, textContent) => {
     return vnode;
 };
 const vnode_newText = (textNode, textContent) => {
-    const vnode = new TextVNode(4 /* VNodeFlags.Text */ | 8 /* VNodeFlags.Inflated */ | (-1 << 11 /* VNodeFlagsIndex.shift */), // Flags
+    const vnode = new TextVNode(4 /* VNodeFlags.Text */ | 8 /* VNodeFlags.Inflated */ | (-1 << 12 /* VNodeFlagsIndex.shift */), // Flags
     null, // Parent
     null, // No previous sibling
     null, // We may have a next sibling.
@@ -6362,7 +6361,7 @@ const vnode_newText = (textNode, textContent) => {
     return vnode;
 };
 const vnode_newVirtual = () => {
-    const vnode = new VirtualVNode(null, 2 /* VNodeFlags.Virtual */ | (-1 << 11 /* VNodeFlagsIndex.shift */), // Flags
+    const vnode = new VirtualVNode(null, 2 /* VNodeFlags.Virtual */ | (-1 << 12 /* VNodeFlagsIndex.shift */), // Flags
     null, null, null, null, null, null);
     isDev && assertFalse(vnode_isElementVNode(vnode), 'Incorrect format of TextVNode.');
     isDev && assertFalse(vnode_isTextVNode(vnode), 'Incorrect format of TextVNode.');
@@ -6522,8 +6521,7 @@ function registerQrlHandlers(attr, key, container, element) {
     const scopedKebabName = key.slice(2);
     const qrls = value.split('|');
     const handlers = qrls.map((qrl) => {
-        const handler = parseQRL(qrl);
-        handler.$container$ = container;
+        const handler = parseQRL(qrl, container);
         // These QRLs are mostly _run and _task and don't need wrapping with retryOnPromise
         return handler;
     });
@@ -6818,7 +6816,7 @@ const vnode_locate = (rootVNode, id) => {
 const vnode_getChildWithIdx = (vNode, childIdx) => {
     let child = vnode_getFirstChild(vNode);
     isDev && assertDefined(child, 'Missing child.');
-    while (child.flags >>> 11 /* VNodeFlagsIndex.shift */ !== childIdx) {
+    while (child.flags >>> 12 /* VNodeFlagsIndex.shift */ !== childIdx) {
         child = child.nextSibling;
         isDev && assertDefined(child, 'Missing child.');
     }
@@ -6894,6 +6892,7 @@ const vnode_createErrorDiv = (journal, document, host, err) => {
     }
     return vErrorDiv;
 };
+const vnode_applyJournal = _flushJournal;
 //////////////////////////////////////////////////////////////////////////////////////////////////////
 const vnode_insertElementBefore = (journal, parent, newChild, insertBefore) => {
     ensureElementOrVirtualVNode(parent);
@@ -6949,8 +6948,15 @@ const vnode_insertVirtualBefore = (journal, parent, newChild, insertBefore) => {
     }
     vnode_unlinkFromOldParent(journal, newChildCurrentParent, parent, newChild);
     const parentIsDeleted = parent.flags & 32 /* VNodeFlags.Deleted */;
-    const domParentVNode = parentIsElement ? parent : vnode_getDomParentVNode(parent, false);
-    const parentNode = domParentVNode?.node;
+    const targetEl = !parentIsElement && parent.flags & 2048 /* VNodeFlags.HasTargetElement */
+        ? parent.props?.[QTargetElement]
+        : null;
+    const domParentVNode = targetEl
+        ? null
+        : parentIsElement
+            ? parent
+            : vnode_getDomParentVNode(parent, false);
+    const parentNode = targetEl || domParentVNode?.node;
     const adjustedInsertBefore = vnode_findInsertBefore(journal, parent, insertBefore);
     const adjustedInsertBeforeNode = adjustedInsertBefore?.node ?? null;
     const isProjection = vnode_isProjection(newChild);
@@ -7139,8 +7145,13 @@ const vnode_insertBefore = (journal, parent, newChild, insertBefore) => {
     }
 };
 const vnode_getDomParent = (vnode, includeProjection) => {
-    vnode = vnode_getDomParentVNode(vnode, includeProjection);
-    return (vnode && vnode.node);
+    while (vnode && !vnode_isElementVNode(vnode)) {
+        if (vnode.flags & 2048 /* VNodeFlags.HasTargetElement */) {
+            return vnode.props?.[QTargetElement];
+        }
+        vnode = (vnode.parent || (includeProjection ? vnode.slotParent : null));
+    }
+    return vnode ? vnode.node : null;
 };
 const vnode_getDomParentVNode = (vnode, includeProjection) => {
     while (vnode && !vnode_isElementVNode(vnode)) {
@@ -7346,7 +7357,9 @@ const fastNextSibling = (node) => {
                     return getNodeAfterCommentNode(node, QContainerIsland, _fastNextSibling, _fastFirstChild);
                 }
                 else if (node.nodeValue?.startsWith(QContainerIslandEnd)) {
-                    return getNodeAfterCommentNode(node, QIgnoreEnd, _fastNextSibling, _fastFirstChild);
+                    // Search for either the next container-island or the end of the q:ignore block,
+                    // whichever comes first. This handles multiple islands within a single q:ignore.
+                    return getNodeAfterCommentNode(node, [QContainerIsland, QIgnoreEnd], _fastNextSibling, _fastFirstChild);
                 }
                 else if (nodeValue?.startsWith(QContainerAttr)) {
                     while (node && (node = _fastNextSibling.call(node))) {
@@ -7362,8 +7375,23 @@ const fastNextSibling = (node) => {
     return node;
 };
 function getNodeAfterCommentNode(node, commentValue, nextSibling, firstChild) {
+    const isSingleValue = typeof commentValue === 'string';
+    const length = commentValue.length;
     while (node) {
-        if (node.nodeValue?.startsWith(commentValue)) {
+        const nodeValue = node.nodeValue;
+        let isMatch;
+        if (isSingleValue) {
+            isMatch = nodeValue?.startsWith(commentValue);
+        }
+        else {
+            for (let i = 0; i < length; i++) {
+                if (nodeValue?.startsWith(commentValue[i])) {
+                    isMatch = true;
+                    break;
+                }
+            }
+        }
+        if (isMatch) {
             node = nextSibling.call(node) || null;
             return node;
         }
@@ -7371,11 +7399,14 @@ function getNodeAfterCommentNode(node, commentValue, nextSibling, firstChild) {
         if (!nextNode) {
             nextNode = nextSibling.call(node);
         }
-        if (!nextNode) {
+        // Go up through parents until we find one with a next sibling
+        while (!nextNode) {
             nextNode = fastParentNode(node);
-            if (nextNode) {
-                nextNode = nextSibling.call(nextNode);
+            if (!nextNode) {
+                break;
             }
+            node = nextNode;
+            nextNode = nextSibling.call(nextNode);
         }
         node = nextNode;
     }
@@ -7388,6 +7419,16 @@ const fastFirstChild = (node) => {
         _fastFirstChild = fastGetter(node, 'firstChild');
     }
     node = node && _fastFirstChild.call(node);
+    // Handle q:ignore as first child (e.g. qwikify$ Host with reactify$ projections).
+    // Navigate depth-first to the first q:container-island and return its first element.
+    if (node &&
+        fastNodeType(node) === /* Node.COMMENT_NODE */ 8 &&
+        node.nodeValue?.startsWith(QIgnore)) {
+        if (!_fastNextSibling) {
+            _fastNextSibling = fastGetter(node, 'nextSibling');
+        }
+        return getNodeAfterCommentNode(node, QContainerIsland, _fastNextSibling, _fastFirstChild);
+    }
     while (node && !fastIsTextOrElement(node)) {
         node = fastNextSibling(node);
     }
@@ -7590,7 +7631,7 @@ function vnode_toString(depth = 20, offset = '', materialize = false, siblings =
             strings.push(qwikDebugToString(vnode_getText(vnode)));
         }
         else if (vnode_isVirtualVNode(vnode)) {
-            const idx = vnode.flags >>> 11 /* VNodeFlagsIndex.shift */;
+            const idx = vnode.flags >>> 12 /* VNodeFlagsIndex.shift */;
             const attrs = ['[' + String(idx) + ']'];
             if (vnode.dirty) {
                 attrs.push(` dirty:${vnode.dirty}`);
@@ -7678,7 +7719,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
     let vLast = null;
     let previousTextNode = null;
     const addVNode = (node) => {
-        node.flags = (node.flags & 2047 /* VNodeFlagsIndex.mask */) | (idx << 11 /* VNodeFlagsIndex.shift */);
+        node.flags = (node.flags & 4095 /* VNodeFlagsIndex.mask */) | (idx << 12 /* VNodeFlagsIndex.shift */);
         idx++;
         vLast && (vLast.nextSibling = node);
         node.previousSibling = vLast;
@@ -8498,7 +8539,8 @@ function qrlToString(serializationContext, qrl, raw) {
             const backChannel = (globalThis.__qrl_back_channel__ ||=
                 new Map());
             // During tests the resolved value is always available
-            backChannel.set(qrl.$symbol$, qrl.$symbolRef$);
+            const lazy = qrl.$lazy$;
+            backChannel.set(lazy.$symbol$, lazy.$ref$);
             if (!chunk) {
                 chunk = QRL_RUNTIME_CHUNK;
             }
@@ -8531,7 +8573,7 @@ function qrlToString(serializationContext, qrl, raw) {
     }
     return qrlStringInline;
 }
-function createQRLWithBackChannel(chunk, symbol, captures) {
+function createQRLWithBackChannel(chunk, symbol, captures, container) {
     let qrlImporter = null;
     if (isDev && chunk === QRL_RUNTIME_CHUNK) {
         const backChannel = globalThis.__qrl_back_channel__;
@@ -8541,12 +8583,12 @@ function createQRLWithBackChannel(chunk, symbol, captures) {
             qrlImporter = () => Promise.resolve({ [symbol]: fn });
         }
     }
-    return createQRL(chunk, symbol, null, qrlImporter, captures);
+    return createQRL(chunk, symbol, null, qrlImporter, captures, container);
 }
 /** Parses "chunk#hash#...rootRef" */
-function parseQRL(qrl) {
+function parseQRL(qrl, container) {
     const [chunk, symbol, captures] = qrl.split('#');
-    return createQRLWithBackChannel(chunk, symbol, captures || null);
+    return createQRLWithBackChannel(chunk, symbol, captures || null, container);
 }
 const QRL_RUNTIME_CHUNK = 'mock-chunk';
 
@@ -8583,13 +8625,12 @@ const allocate = (container, typeId, value) => {
                 const [chunkId, symbolId, captureIds] = value.split('#');
                 const chunk = container.$getObjectById$(chunkId);
                 const symbol = container.$getObjectById$(symbolId);
-                qrl = createQRLWithBackChannel(chunk, symbol, captureIds || null);
+                qrl = createQRLWithBackChannel(chunk, symbol, captureIds || null, container);
             }
             else {
                 // Sync qrl
-                qrl = createQRLWithBackChannel('', String(value), null);
+                qrl = createQRLWithBackChannel('', String(value), null, container);
             }
-            qrl.$container$ = container;
             return qrl;
         }
         case 20 /* TypeIds.Task */:
@@ -8796,19 +8837,19 @@ const _noopQrl = (symbolName, lexicalScopeCapture) => {
 /** @internal */
 const _noopQrlDEV = (symbolName, opts, lexicalScopeCapture) => {
     const newQrl = _noopQrl(symbolName, lexicalScopeCapture);
-    newQrl.dev = opts;
+    newQrl.$lazy$.dev = opts;
     return newQrl;
 };
 /** @internal */
 const qrlDEV = (chunkOrFn, symbol, opts, lexicalScopeCapture) => {
     const newQrl = qrl(chunkOrFn, symbol, lexicalScopeCapture, 1);
-    newQrl.dev = opts;
+    newQrl.$lazy$.dev = opts;
     return newQrl;
 };
 /** @internal */
 const inlinedQrlDEV = (symbol, symbolName, opts, lexicalScopeCapture) => {
     const qrl = inlinedQrl(symbol, symbolName, lexicalScopeCapture);
-    qrl.dev = opts;
+    qrl.$lazy$.dev = opts;
     return qrl;
 };
 /**
@@ -10104,8 +10145,7 @@ const useResourceQrl = (qrl, opts) => {
     }
     const ref = {};
     // Wrap the function so we can maintain a stable reference to the store
-    const wrapped = createQRL(null, '_rsc', _rsc, null, [qrl, ref]);
-    qrl.$container$ = iCtx.$container$;
+    const wrapped = createQRL(null, '_rsc', _rsc, null, [qrl, ref], iCtx.$container$);
     const asyncSignal = createAsyncSignal(wrapped, {
         timeout: opts?.timeout,
         container: iCtx.$container$,
@@ -10407,18 +10447,26 @@ const _hmr = (event, element) => {
         host = parent;
     }
     // Replace the component QRL with a fresh one to bypass caching
-    // TODO use a qrl registry to invalidate all QRLs from a parent
-    const oldQrl = container.getHostProp(host, OnRenderProp);
-    if (oldQrl) {
-        const chunk = oldQrl.$chunk$;
-        const now = Date.now();
-        const bustUrl = chunk.includes('?') ? chunk + '&t=' + now : chunk + '?t=' + now;
-        const freshQrl = qrl(bustUrl, oldQrl.$symbol$);
-        freshQrl.$container$ = container;
-        freshQrl.dev = oldQrl.dev;
-        container.setHostProp(host, OnRenderProp, freshQrl);
-    }
-    markVNodeDirty(container, host, 4 /* ChoreBits.COMPONENT */);
+    // Maybe we should use a qrl registry to invalidate all QRLs from a parent?
+    const qrl = container.getHostProp(host, OnRenderProp);
+    if (qrl) {
+        // This code is highly coupled to the internal implementation of QRL
+        const instance = qrl.__proto__;
+        const lazy = instance.$lazy$;
+        const chunk = lazy.$chunk$;
+        if (chunk) {
+            /**
+             * Bust the cache by appending a timestamp to the chunk URL. There's some chance that we
+             * import the same chunk multiple times, but that's not really a problem for segments.
+             */
+            const bustUrl = chunk.split('?')[0] + '?t=' + Date.now();
+            lazy.$chunk$ = bustUrl;
+            lazy.$ref$ = undefined;
+            instance.resolved = undefined;
+            // Force rerender
+            markVNodeDirty(container, host, 4 /* ChoreBits.COMPONENT */);
+        }
+    }
 };
 /** Sanitize path to a valid CSS-safe event name (no colons, dots, slashes). */
 const toEventName = (devPath) => 'qHmr' + devPath.replace(/[^a-zA-Z0-9_]/g, '_');
@@ -10440,7 +10488,86 @@ function _useHmr(devPath) {
     useOnDocument(toEventName(devPath), hmrQrl);
 }
 
+/**
+ * Register an external projection on a parent component VNode.
+ *
+ * Creates a new VirtualVNode that will render the given component QRL with the given props. The
+ * VNode is stored as a projection on the parent, and a low-priority cursor is added so the cursor
+ * walker will process it.
+ *
+ * Use `_setProjectionTarget` to set the DOM target element before the cursor fires.
+ *
+ * @internal
+ */
+function _addProjection(container, parentVNode, componentQRL, props, slotName) {
+    const vnode = vnode_newVirtual();
+    vnode_setProp(vnode, QSlot, slotName);
+    vnode.parent = parentVNode;
+    vnode_setProp(parentVNode, slotName, vnode);
+    vnode_setProp(vnode, OnRenderProp, componentQRL);
+    vnode_setProp(vnode, ELEMENT_PROPS, props);
+    vnode.dirty = 4 /* ChoreBits.COMPONENT */;
+    addCursor(container, vnode, 1); // low priority
+    return vnode;
+}
+/**
+ * Set the DOM target element for an external projection VNode.
+ *
+ * When the cursor walker processes this VNode, DOM operations will target this element instead of
+ * walking the parent chain.
+ *
+ * @internal
+ */
+function _setProjectionTarget(vnode, targetElement) {
+    vnode_setProp(vnode, QTargetElement, targetElement);
+    vnode.flags |= 2048 /* VNodeFlags.HasTargetElement */;
+}
+/**
+ * Update the props on an external projection VNode and trigger re-rendering.
+ *
+ * @internal
+ */
+function _updateProjectionProps(container, vnode, newProps) {
+    vnode_setProp(vnode, ELEMENT_PROPS, newProps);
+    markVNodeDirty(container, vnode, 4 /* ChoreBits.COMPONENT */);
+}
+/**
+ * Remove an external projection from its parent and clean up.
+ *
+ * @internal
+ */
+function _removeProjection(container, parentVNode, vnode, slotName) {
+    // Remove from parent's projections
+    vnode_setProp(parentVNode, slotName, null);
+    // Clean up effects, subscriptions, and child vnodes
+    const journal = [];
+    cleanup(container, journal, vnode);
+    vnode_applyJournal(journal);
+    // Clean up DOM
+    if (vnode.flags & 2048 /* VNodeFlags.HasTargetElement */) {
+        const targetEl = vnode_getProp(vnode, QTargetElement, null);
+        if (targetEl) {
+            targetEl.replaceChildren();
+        }
+        vnode_setProp(vnode, QTargetElement, null);
+        vnode.flags &= -2049 /* VNodeFlags.HasTargetElement */;
+    }
+}
+
 let loading = Promise.resolve();
+const dangerousObjectKeys = new Set([
+    'constructor',
+    'prototype',
+    'toString',
+    'valueOf',
+    'toJSON',
+    'then',
+]);
+const isSafeObjectKV = (key, value) => {
+    return (typeof key === 'string' &&
+        key !== '__proto__' &&
+        (typeof value !== 'function' || !dangerousObjectKeys.has(key)));
+};
 const inflate = (container, target, typeId, data) => {
     if (typeId === 0 /* TypeIds.Plain */) {
         // Already processed
@@ -10463,6 +10590,9 @@ const inflate = (container, target, typeId, data) => {
             for (let i = 0; i < data.length; i += 2) {
                 const key = data[i];
                 const value = data[i + 1];
+                if (!isSafeObjectKV(key, value)) {
+                    continue;
+                }
                 target[key] = value;
             }
             break;
@@ -11036,13 +11166,18 @@ function processVNodeData(document) {
                 nextNode = null;
             }
             else if (nodeType === 64 /* NodeType.COMMENT_ISLAND_END */) {
+                // Walk forward to find either the next container-island or the end of the q:ignore block.
+                // This handles multiple islands within a single q:ignore block.
                 nextNode = node;
+                let nextNodeType;
                 do {
                     nextNode = walker.nextNode();
                     if (!nextNode) {
                         throw new Error(`Ignore block not closed!`);
                     }
-                } while (getFastNodeType(nextNode) !== 32 /* NodeType.COMMENT_IGNORE_END */);
+                    nextNodeType = getFastNodeType(nextNode);
+                } while (nextNodeType !== 32 /* NodeType.COMMENT_IGNORE_END */ &&
+                    nextNodeType !== 65 /* NodeType.COMMENT_ISLAND_START */);
                 nextNode = null;
             }
             else if (nodeType === 9 /* NodeType.COMMENT_SKIP_START */) {
@@ -11247,8 +11382,7 @@ class DomContainer extends _SharedContainer {
         this.$stateData$[id] = vParent;
     }
     parseQRL(qrlStr) {
-        const qrl = parseQRL(qrlStr);
-        qrl.$container$ = this;
+        const qrl = parseQRL(qrlStr, this);
         return qrl;
     }
     handleError(err, host) {
@@ -12406,6 +12540,198 @@ const NoSerializeSymbol = Symbol('noSerialize');
 const SerializerSymbol = Symbol('serialize');
 
 // keep these imports above the rest to prevent circular dep issues
+/**
+ * Shared lazy-loading reference that holds module loading metadata. Multiple QRLs pointing to the
+ * same chunk+symbol can share a single LazyRef, differing only in their captured scope.
+ */
+class LazyRef {
+    $chunk$;
+    $symbol$;
+    $symbolFn$;
+    $ref$;
+    $container$;
+    // Don't allocate dev property immediately so that in prod we don't have this property
+    dev;
+    constructor($chunk$, $symbol$, $symbolFn$, $ref$, container) {
+        this.$chunk$ = $chunk$;
+        this.$symbol$ = $symbol$;
+        this.$symbolFn$ = $symbolFn$;
+        this.$ref$ = $ref$;
+        if ($ref$) {
+            this.$setRef$($ref$);
+        }
+        if (container && !$ref$ && typeof $chunk$ === 'string' && !$symbolFn$) {
+            // We only store the container if we're going to import the chunk
+            // Note that this container is not necessarily the same one as from the captures
+            this.$container$ = container;
+        }
+        if (qDev) {
+            // this will be filled in later
+            this.dev = null;
+        }
+        /** Preload the chunk with somewhat lower probability when we create the QRL. */
+        if (isBrowser && $chunk$) {
+            p($chunk$, 0.8);
+        }
+    }
+    /** We don't read hash very often so let's not allocate a string for every QRL */
+    get $hash$() {
+        return getSymbolHash(this.$symbol$);
+    }
+    $setRef$(ref) {
+        this.$ref$ = ref;
+        if (isPromise(ref)) {
+            ref.then((r) => (this.$ref$ = r), (err) => {
+                console.error(`qrl ${this.$symbol$} failed to load`, err);
+                // We shouldn't cache rejections, we can try again later
+                this.$ref$ = null;
+            });
+        }
+    }
+    /** Load the raw module export without capture binding. */
+    $load$() {
+        if (this.$ref$ != null) {
+            return this.$ref$;
+        }
+        if (this.$chunk$ === '') {
+            // Sync QRL
+            isDev && assertDefined(this.$container$, 'Sync QRL must have container element');
+            const hash = this.$container$.$instanceHash$;
+            const doc = this.$container$.element?.ownerDocument || document;
+            const qFuncs = getQFuncs(doc, hash);
+            return (this.$ref$ = qFuncs[Number(this.$symbol$)]);
+        }
+        if (isBrowser && this.$chunk$) {
+            /** We will run the QRL, so now the probability of the chunk is 100% */
+            p(this.$chunk$, 1);
+        }
+        const symbol = this.$symbol$;
+        const importP = this.$symbolFn$
+            ? this.$symbolFn$().then((module) => module[symbol])
+            : getPlatform().importSymbol(this.$container$?.element, this.$chunk$, symbol);
+        this.$setRef$(importP);
+        return this.$ref$;
+    }
+}
+/**
+ * When a method is called on the qrlFn wrapper function, `this` is the function, not the QRLClass
+ * instance that holds the data. This helper returns the actual instance by checking whether `this`
+ * owns `resolved` (always set on the instance).
+ */
+const getInstance = (instance) => {
+    return Object.prototype.hasOwnProperty.call(instance, 'resolved')
+        ? instance
+        : Object.getPrototypeOf(instance);
+};
+/**
+ * We use a class here to avoid copying all the methods for every QRL instance. The QRL itself is a
+ * function that calls the internal $callFn$ method, and we set the prototype to the class instance
+ * so it has access to all the properties and methods. That's why we need to extend Function, so
+ * that `.apply()` etc work.
+ *
+ * So a QRL is a function that has a prototype of a QRLClass instance. This is unconventional, but
+ * it allows us to have a callable QRL that is also a class.
+ *
+ * Note the use of getInstance everywhere when writing to `this`. If you write to `this` directly,
+ * it will be stored on the function itself, and we don't want that because the QRLClass instance
+ * doesn't have access to it, and it uses more memory.
+ */
+class QRLClass extends Function {
+    $lazy$;
+    resolved = undefined;
+    // This is defined or undefined for the lifetime of the QRL, so we set it lazily
+    $captures$;
+    $container$;
+    constructor($lazy$, $captures$, container) {
+        super();
+        this.$lazy$ = $lazy$;
+        if ($captures$) {
+            this.$captures$ = $captures$;
+            if (typeof $captures$ === 'string') {
+                // We cannot rely on the container of the lazy ref, it may be missing or different
+                this.$container$ = container;
+            }
+            if (qDev) {
+                if ($captures$ && typeof $captures$ === 'object') {
+                    for (const item of $captures$) {
+                        verifySerializable(item, 'Captured variable in the closure can not be serialized');
+                    }
+                }
+            }
+        }
+        // If it is plain value with deserialized or missing captures, resolve it immediately
+        // Otherwise we keep using the async path so we can wait for qrls to load
+        if ($lazy$.$ref$ != null && typeof this.$captures$ !== 'string' && !isPromise($lazy$.$ref$)) {
+            // we can pass this instead of using getInstance because we know we are not the qrlFn
+            this.resolved = bindCaptures(this, $lazy$.$ref$);
+        }
+    }
+    w(captures) {
+        const newQrl = new QRLClass(this.$lazy$, captures, this.$captures$ ? this.$container$ : undefined);
+        return makeQrlFn(newQrl);
+    }
+    s(ref) {
+        const qrl = getInstance(this);
+        qrl.$lazy$.$setRef$(ref);
+        qrl.resolved = bindCaptures(qrl, ref);
+    }
+    // --- Getter proxies for backward compat ---
+    get $chunk$() {
+        return this.$lazy$.$chunk$;
+    }
+    get $symbol$() {
+        return this.$lazy$.$symbol$;
+    }
+    get $hash$() {
+        return this.$lazy$.$hash$;
+    }
+    get dev() {
+        return this.$lazy$.dev;
+    }
+    $callFn$(withThis, ...args) {
+        if (this.resolved) {
+            return this.resolved.apply(withThis, args);
+        }
+        // Not resolved yet: we'll return a promise
+        // grab the context while we are sync
+        const ctx = tryGetInvokeContext();
+        return this.resolve(ctx?.$container$).then(() => invokeApply.call(withThis, ctx, this.resolved, args));
+    }
+    async resolve(container) {
+        // We need to write to the QRLClass instance, not the function
+        const qrl = getInstance(this);
+        return maybeThen($resolve$(qrl, container), () => qrl.resolved);
+    }
+    getSymbol() {
+        return this.$symbol$;
+    }
+    getHash() {
+        return this.$hash$;
+    }
+    getCaptured() {
+        const qrl = getInstance(this);
+        ensureQrlCaptures(qrl);
+        return qrl.$captures$;
+    }
+    getFn(currentCtx, beforeFn) {
+        const qrl = getInstance(this);
+        const bound = (...args) => {
+            if (!qrl.resolved) {
+                return qrl.resolve().then((fn) => {
+                    if (qDev && !isFunction(fn)) {
+                        throw qError(5 /* QError.qrlIsNotFunction */);
+                    }
+                    return bound(...args);
+                });
+            }
+            if (beforeFn && beforeFn() === false) {
+                return undefined;
+            }
+            return invokeApply(currentCtx, qrl.resolved, args);
+        };
+        return bound;
+    }
+}
 /**
  * The current captured scope during QRL invocation. This is used to provide the lexical scope for
  * QRL functions. It is used one time per invocation, synchronously, so it is safe to store it in
@@ -12428,114 +12754,62 @@ const deserializeCaptures = (container, captures) => {
 const ensureQrlCaptures = (qrl) => {
     // We read the captures once, synchronously, so no need to keep previous
     _captures = qrl.$captures$;
+    const container = qrl.$container$;
     if (typeof _captures === 'string') {
-        if (!qrl.$container$) {
+        if (!container) {
             throw qError(13 /* QError.qrlMissingContainer */);
         }
         const prevLoading = loading;
-        _captures = qrl.$captures$ = deserializeCaptures(qrl.$container$, _captures);
+        _captures = qrl.$captures$ = deserializeCaptures(container, _captures);
         if (loading !== prevLoading) {
             // return the loading promise so callers can await it
             return loading;
         }
     }
 };
-function bindFnToContext(qrl, currentCtx, beforeFn) {
-    // Note that we bind the current `this`
-    const bound = (...args) => {
-        if (!qrl.resolved) {
-            return qrl.resolve().then((fn) => {
-                if (!isFunction(fn)) {
-                    throw qError(5 /* QError.qrlIsNotFunction */);
-                }
-                return bound(...args);
-            });
-        }
-        if (beforeFn && beforeFn() === false) {
-            return;
-        }
-        return invokeApply.call(this, currentCtx, qrl.resolved, args);
-    };
-    return bound;
-}
 // Wrap functions to provide their lexical scope
-const bindCaptures = (qrl, fn) => {
-    if (typeof fn !== 'function' || !qrl.$captures$) {
-        return fn;
+const bindCaptures = (qrl, ref) => {
+    if (typeof ref !== 'function' || !qrl.$captures$) {
+        return ref;
     }
-    return function withCaptures(...args) {
+    return function boundCaptures(...args) {
         ensureQrlCaptures(qrl);
-        return fn.apply(this, args);
+        return ref.apply(this, args);
     };
 };
-const makeResolveFunction = (qrl, symbolFn) => {
-    let symbolRef;
-    // Always return a promise, even for sync QRLs
-    return async (container) => {
-        if (symbolRef != null) {
-            // Resolving (Promise) or already resolved (value)
-            return symbolRef;
-        }
+const $resolve$ = (qrl, container) => {
+    const lazy = qrl.$lazy$;
+    const shouldDeserialize = typeof qrl.$captures$ === 'string';
+    if (shouldDeserialize && !qrl.$container$) {
         if (container) {
             qrl.$container$ = container;
         }
-        else if (!qrl.$container$) {
-            const ctx = tryGetInvokeContext();
-            if (ctx?.$container$) {
-                qrl.$container$ = ctx.$container$;
-            }
-        }
-        if (qrl.$chunk$ === '') {
-            // Sync QRL
-            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);
-            // No need to wrap, syncQRLs can't have captured scope
-            return (qrl.resolved = symbolRef = qFuncs[Number(qrl.$symbol$)]);
-        }
-        if (isBrowser && qrl.$chunk$) {
-            /** We run the QRL, so now the probability of the chunk is 100% */
-            p(qrl.$chunk$, 1);
-        }
-        const start = now();
-        const symbol = qrl.$symbol$;
-        const importP = symbolFn
-            ? symbolFn().then((module) => module[symbol])
-            : getPlatform().importSymbol(qrl.$container$?.element, qrl.$chunk$, symbol);
-        symbolRef = maybeThen(importP, (resolved) => {
-            // We memoize the result on the symbolFn
-            // Make sure not to memoize the wrapped function!
-            if (!isDev && symbolFn) {
-                symbolFn[symbol] = resolved;
-            }
-            return (symbolRef = qrl.resolved = bindCaptures(qrl, resolved));
-        });
-        if (isPromise(symbolRef)) {
-            const ctx = tryGetInvokeContext();
-            symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$hostElement$ instanceof ElementVNode ? ctx?.$hostElement$.node : undefined, start), (err) => {
-                console.error(`qrl ${symbol} failed to load`, err);
-                // We shouldn't cache rejections, we can try again later
-                symbolRef = null;
-            });
-        }
-        // Try to deserialize captures if any
-        if (qrl.$container$) {
-            await ensureQrlCaptures(qrl);
+        else {
+            qrl.$container$ = tryGetInvokeContext()?.$container$;
         }
-        return symbolRef;
-    };
+    }
+    if (qrl.resolved) {
+        return;
+    }
+    // Capture context while still sync
+    const start = now();
+    const ctx = tryGetInvokeContext();
+    // Load raw value via LazyRef - may be sync (e.g. sync QRLs) or async
+    const rawOrPromise = lazy.$load$();
+    const maybePromise = maybeThen(rawOrPromise, (raw) => {
+        qrl.resolved = bindCaptures(qrl, raw);
+    });
+    if (maybePromise) {
+        // We're importing; emit symbol usage event
+        const symbol = lazy.$symbol$;
+        emitUsedSymbol(symbol, ctx?.$hostElement$ instanceof ElementVNode ? ctx?.$hostElement$.node : undefined, start);
+    }
+    const capturedPromise = shouldDeserialize && qrl.$container$ && ensureQrlCaptures(qrl);
+    if (capturedPromise) {
+        return capturedPromise.then(() => maybePromise);
+    }
+    return maybePromise;
 };
-function getSymbol() {
-    return this.$symbol$;
-}
-function getHash() {
-    return this.$hash$;
-}
-function getCaptured() {
-    ensureQrlCaptures(this);
-    return this.$captures$;
-}
 /**
  * Creates a QRL instance to represent a lazily loaded value. Normally this is a function, but it
  * can be any value.
@@ -12549,64 +12823,19 @@ function getCaptured() {
  *
  * @internal
  */
-const createQRL = (chunk, symbol, symbolRef, symbolFn, captures) => {
-    // In dev mode we need to preserve the original symbolRef without wrapping
-    const origSymbolRef = symbolRef;
-    if (qDev && qSerialize) {
-        if (captures && typeof captures === 'object') {
-            for (const item of captures) {
-                verifySerializable(item, 'Captured variable in the closure can not be serialized');
-            }
-        }
-    }
-    const qrl = async function qrlFn(...args) {
-        if (qrl.resolved) {
-            return qrl.resolved.apply(this, args);
-        }
-        // grab the context while we are sync
-        const ctx = tryGetInvokeContext();
-        await qrl.resolve(ctx?.$container$);
-        return invokeApply.call(this, ctx, qrl.resolved, args);
+const createQRL = (chunk, symbol, symbolRef, symbolFn, captures, container) => {
+    const lazy = new LazyRef(chunk, symbol, symbolFn, symbolRef, container);
+    const qrl = new QRLClass(lazy, captures, container);
+    return makeQrlFn(qrl);
+};
+const makeQrlFn = (qrl) => {
+    // The QRL has to be callable, so we create a function that calls the internal $callFn$
+    const qrlFn = async function (...args) {
+        return qrl.$callFn$(this, ...args);
     };
-    // Retrieve memoized result from symbolFn
-    if (symbolFn && symbol in symbolFn) {
-        symbolRef = symbolFn[symbol];
-    }
-    const resolve = symbolRef != null ? async () => symbolRef : makeResolveFunction(qrl, symbolFn);
-    const hash = getSymbolHash(symbol);
-    Object.assign(qrl, {
-        getSymbol,
-        getHash,
-        getCaptured,
-        // This can be called with other `this`
-        getFn: function (currentCtx, beforeFn) {
-            return bindFnToContext.call(this, qrl, currentCtx, beforeFn);
-        },
-        resolve,
-        resolved: undefined,
-        $chunk$: chunk,
-        $symbol$: symbol,
-        $hash$: hash,
-        $captures$: captures,
-        $container$: null,
-    });
-    if (qDev) {
-        qrl.dev = null;
-        qrl.$symbolRef$ = origSymbolRef;
-        seal(qrl);
-    }
-    // Now that the qrl is fully constructed, we can resolve/wrap the symbolRef if we received it. If it is a plain value without computed captures, the qrl will be resolved immediately.
-    if (symbolRef != null) {
-        symbolRef = maybeThen(ensureQrlCaptures(qrl), () => maybeThen(symbolRef, (resolved) => {
-            symbolRef = qrl.resolved = bindCaptures(qrl, resolved);
-            return symbolRef;
-        }));
-    }
-    if (isBrowser && chunk) {
-        /** Preloading the chunk when we create the QRL. */
-        p(chunk, 0.8);
-    }
-    return qrl;
+    // ...and set the prototype to the QRL instance so it has all the properties and methods without copying them
+    Object.setPrototypeOf(qrlFn, qrl);
+    return qrlFn;
 };
 const EMITTED = /*#__PURE__*/ new Set();
 const emitUsedSymbol = (symbol, element, reqTime) => {
@@ -12781,6 +13010,7 @@ const componentQrl = (componentQrl) => {
     QwikComponent[SERIALIZABLE_STATE] = [componentQrl];
     return QwikComponent;
 };
+/** @internal */
 const SERIALIZABLE_STATE = Symbol('serializable-data');
 const isQwikComponent = (component) => {
     return typeof component == 'function' && component[SERIALIZABLE_STATE] !== undefined;
@@ -13910,5 +14140,5 @@ if (import.meta.hot) {
     });
 }
 
-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, EMPTY_OBJ as _EMPTY_OBJ, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _captures, _chk, createQRL as _createQRL, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, _hmr, 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, qrlToString as _qrlToString, _regSymbol, _res, _resolveContextWithoutSequentialScope, _restProps, _rsc, _run, _serialize, setEvent as _setEvent, scheduleTask as _task, _useHmr, _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 };
+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, EMPTY_OBJ as _EMPTY_OBJ, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _addProjection, _captures, _chk, createQRL as _createQRL, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, _hmr, 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, qrlToString as _qrlToString, _regSymbol, _removeProjection, _res, _resolveContextWithoutSequentialScope, _restProps, _rsc, _run, _serialize, setEvent as _setEvent, _setProjectionTarget, scheduleTask as _task, _updateProjectionProps, _useHmr, _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 };
 //# sourceMappingURL=core.mjs.map