@qwik.dev/core 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/server.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core/server 2.0.0-alpha.1-dev+10f5414
+ * @qwik.dev/core/server 2.0.0-alpha.2-dev+58b6f8d
  * 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
@@ -647,6 +647,12 @@ __publicField(SsrNode, "ELEMENT_NODE", 1);
 __publicField(SsrNode, "TEXT_NODE", 3);
 __publicField(SsrNode, "DOCUMENT_NODE", 9);
 __publicField(SsrNode, "DOCUMENT_FRAGMENT_NODE", 11);
+var DomRef = class {
+  /** @id is the same id as for SsrNode */
+  constructor(id) {
+    this.id = id;
+  }
+};
 var SsrComponentFrame = class {
   constructor(componentNode) {
     this.componentNode = componentNode;
@@ -945,7 +951,7 @@ function getBuildBase(opts) {
   return `${import.meta.env.BASE_URL}build/`;
 }
 var versions = {
-  qwik: "2.0.0-alpha.1-dev+10f5414",
+  qwik: "2.0.0-alpha.2-dev+58b6f8d",
   qwikDom: "2.1.19"
 };
 
@@ -1140,6 +1146,20 @@ var StoreHandler = class {
     if (prop === STORE_TARGET) {
       return true;
     }
+    if (typeof prop === "string") {
+      const ctx = tryGetInvokeContext();
+      if (ctx) {
+        const effectSubscriber = ctx.$effectSubscriber$;
+        if (effectSubscriber) {
+          addEffect(
+            target,
+            Array.isArray(target) ? STORE_ARRAY_PROP : prop,
+            this,
+            effectSubscriber
+          );
+        }
+      }
+    }
     return Object.prototype.hasOwnProperty.call(target, prop);
   }
   ownKeys(target) {
@@ -2829,7 +2849,10 @@ function choreComparator(a, b, shouldThrowOnHostMismatch) {
           return hostDiff;
         }
       } else {
-        const errorMessage = "SERVER: during HTML streaming, it is not possible to cause a re-run of tasks on a different host";
+        const errorMessage = `SERVER: during HTML streaming, re-running tasks on a different host is not allowed.
+          You are attempting to change a state that has already been streamed to the client.
+          This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
+          Problematic Node: ${aHost.toString()}`;
         if (shouldThrowOnHostMismatch) {
           throwErrorAndStop(errorMessage);
         }
@@ -2999,9 +3022,11 @@ var isTask = (value) => {
   return value instanceof Task;
 };
 
+// packages/qwik/src/core/signal/flags.ts
+var NEEDS_COMPUTATION = Symbol("invalid");
+
 // packages/qwik/src/core/signal/signal.ts
 var DEBUG3 = false;
-var NEEDS_COMPUTATION = Symbol("invalid");
 var log2 = (...args) => console.log("SIGNAL", ...args.map(qwikDebugToString));
 var throwIfQRLNotResolved = (qrl) => {
   const resolved = qrl.resolved;
@@ -3334,7 +3359,7 @@ var WrappedSignal = class extends Signal {
 };
 
 // packages/qwik/src/core/version.ts
-var version = "2.0.0-alpha.1-dev+10f5414";
+var version = "2.0.0-alpha.2-dev+58b6f8d";
 
 // packages/qwik/src/core/shared/shared-container.ts
 var _SharedContainer = class {
@@ -3361,9 +3386,10 @@ var _SharedContainer = class {
   trackSignalValue(signal, subscriber, property, data) {
     return trackSignal(() => signal.value, subscriber, property, this, data);
   }
-  serializationCtxFactory(NodeConstructor, symbolToChunkResolver, writer, prepVNodeData) {
+  serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
     return createSerializationContext(
       NodeConstructor,
+      DomRefConstructor,
       symbolToChunkResolver,
       this.getHostProp.bind(this),
       this.setHostProp.bind(this),
@@ -6243,12 +6269,7 @@ function inflateQRL(container, qrl) {
   }
   return qrl;
 }
-var DomVRef = class {
-  constructor(id) {
-    this.id = id;
-  }
-};
-var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
+var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
   if (!writer) {
     const buffer = [];
     writer = {
@@ -6272,11 +6293,13 @@ var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getPro
     return id;
   };
   const isSsrNode = NodeConstructor ? (obj) => obj instanceof NodeConstructor : () => false;
+  const isDomRef = DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : () => false;
   return {
     $serialize$() {
       serialize(this);
     },
     $isSsrNode$: isSsrNode,
+    $isDomRef$: isDomRef,
     $symbolToChunkResolver$: symbolToChunkResolver,
     $wasSeen$,
     $roots$: roots,
@@ -6385,6 +6408,8 @@ var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getPro
         discoveredValues.push(obj.$el$, obj.$qrl$, obj.$state$, obj.$effectDependencies$);
       } else if (isSsrNode(obj)) {
         discoveredValues.push(obj.vnodeData);
+      } else if (isDomRef(obj)) {
+        discoveredValues.push(obj.id);
       } else if (isJSXNode2(obj)) {
         discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
       } else if (Array.isArray(obj)) {
@@ -6439,7 +6464,7 @@ var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getPro
 };
 var promiseResults = /* @__PURE__ */ new WeakMap();
 function serialize(serializationContext) {
-  const { $writer$, $isSsrNode$, $setProp$, $storeProxyMap$ } = serializationContext;
+  const { $writer$, $isSsrNode$, $isDomRef$, $setProp$, $storeProxyMap$ } = serializationContext;
   let depth = -1;
   let writeType = false;
   const output = (type, value) => {
@@ -6607,14 +6632,10 @@ function serialize(serializationContext) {
         }
         output(13 /* Object */, out);
       }
-    } else if (value instanceof DomVRef) {
+    } else if ($isDomRef$(value)) {
       output(9 /* RefVNode */, value.id);
     } else if (value instanceof Signal) {
-      let v = value instanceof ComputedSignal && (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
-      if ($isSsrNode$(v)) {
-        serializationContext.$addRoot$(v);
-        v = new DomVRef(v.id);
-      }
+      const v = value instanceof ComputedSignal && (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
       if (value instanceof WrappedSignal) {
         output(23 /* WrappedSignal */, [
           ...serializeWrappingFn(serializationContext, value),
@@ -7000,8 +7021,8 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
   }
   let _containerEl;
   const qrl = async function(...args) {
-    const fn = invokeFn.call(this, tryGetInvokeContext());
-    const result = await fn(...args);
+    const boundedFn = bindFnToContext.call(this, tryGetInvokeContext());
+    const result = await boundedFn(...args);
     return result;
   };
   const setContainer = (el) => {
@@ -7010,6 +7031,30 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     }
     return _containerEl;
   };
+  function bindFnToContext(currentCtx, beforeFn) {
+    return (...args) => maybeThen(resolveLazy(), (fn) => {
+      if (!isFunction(fn)) {
+        throw qError(QError_qrlIsNotFunction);
+      }
+      if (beforeFn && beforeFn() === false) {
+        return;
+      }
+      const context = createOrReuseInvocationContext(currentCtx);
+      const prevQrl = context.$qrl$;
+      const prevEvent = context.$event$;
+      context.$qrl$ = qrl;
+      context.$event$ || (context.$event$ = this);
+      try {
+        return invoke.call(this, context, fn, ...args);
+      } finally {
+        context.$qrl$ = prevQrl;
+        context.$event$ = prevEvent;
+      }
+    });
+  }
+  const resolveLazy = (containerEl) => {
+    return symbolRef !== null ? symbolRef : resolve(containerEl);
+  };
   const wrapFn = (fn) => {
     if (typeof fn !== "function" || !capture?.length && !captureRef?.length) {
       return fn;
@@ -7059,30 +7104,6 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     }
     return symbolRef;
   };
-  const resolveLazy = (containerEl) => {
-    return symbolRef !== null ? symbolRef : resolve(containerEl);
-  };
-  function invokeFn(currentCtx, beforeFn) {
-    return (...args) => maybeThen(resolveLazy(), (f) => {
-      if (!isFunction(f)) {
-        throw qError(QError_qrlIsNotFunction);
-      }
-      if (beforeFn && beforeFn() === false) {
-        return;
-      }
-      const context = createOrReuseInvocationContext(currentCtx);
-      const prevQrl = context.$qrl$;
-      const prevEvent = context.$event$;
-      context.$qrl$ = qrl;
-      context.$event$ || (context.$event$ = this);
-      try {
-        return invoke.call(this, context, f, ...args);
-      } finally {
-        context.$qrl$ = prevQrl;
-        context.$event$ = prevEvent;
-      }
-    });
-  }
   const createOrReuseInvocationContext = (invoke2) => {
     if (invoke2 == null) {
       return newInvokeContext();
@@ -7105,7 +7126,7 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     $symbol$: symbol,
     $refSymbol$: refSymbol,
     $hash$: hash2,
-    getFn: invokeFn,
+    getFn: bindFnToContext,
     $capture$: capture,
     $captureRef$: captureRef,
     dev: null,
@@ -7816,6 +7837,7 @@ var SSRContainer = class extends _SharedContainer2 {
     };
     this.serializationCtx = this.serializationCtxFactory(
       SsrNode,
+      DomRef,
       this.symbolToChunkResolver,
       opts.writer,
       (vNodeData) => this.addVNodeToSerializationRoots(vNodeData)
@@ -8579,10 +8601,10 @@ var SSRContainer = class extends _SharedContainer2 {
         if (key === "ref") {
           const lastNode = this.getLastNode();
           if (isSignal2(value)) {
-            value.value = lastNode;
+            value.value = new DomRef(lastNode.id);
             continue;
           } else if (typeof value === "function") {
-            value(lastNode);
+            value(new DomRef(lastNode.id));
             continue;
           }
         }
@@ -8856,8 +8878,8 @@ function resolveManifest(manifest) {
 var Q_FUNCS_PREFIX = 'document["qFuncs_HASH"]=';
 
 // packages/qwik/src/server/scripts.ts
-var QWIK_LOADER_DEFAULT_MINIFIED = '(()=>{var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,o=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,s=(e,s)=>{for(var a in s||(s={}))n.call(s,a)&&o(e,a,s[a]);if(t)for(var a of t(s))r.call(s,a)&&o(e,a,s[a]);return e};((e,t)=>{const n="__q_context__",r=window,o=new Set,a=new Set([e]),c="replace",i="forEach",l="target",f="getAttribute",p="isConnected",b="qvisible",u="_qwikjson_",h=(e,t)=>Array.from(e.querySelectorAll(t)),y=e=>{const t=[];return a.forEach((n=>t.push(...h(n,e)))),t},d=e=>{S(e),h(e,"[q\\\\:shadowroot]").forEach((e=>{const t=e.shadowRoot;t&&d(t)}))},q=e=>e&&"function"==typeof e.then,m=(e,t,n=t.type)=>{y("[on"+e+"\\\\:"+n+"]")[i]((r=>E(r,e,t,n)))},w=t=>{if(void 0===t[u]){let n=(t===e.documentElement?e.body:t).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n[f]("type")){t[u]=JSON.parse(n.textContent[c](/\\\\x3C(\\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},v=(e,t)=>new CustomEvent(e,{detail:t}),E=async(t,r,o,a=o.type)=>{const i="on"+r+":"+a;t.hasAttribute("preventdefault:"+a)&&o.preventDefault();const l=t._qc_,b=l&&l.li.filter((e=>e[0]===i));if(b&&b.length>0){for(const e of b){const n=e[1].getFn([t,o],(()=>t[p]))(o,t),r=o.cancelBubble;q(n)&&await n,r&&o.stopPropagation()}return}const u=t.qDispatchEvent;if(u)return u(o,r);const h=t[f](i);if(h){const r=t.closest("[q\\\\:container]:not([q\\\\:container=html]):not([q\\\\:container=text])"),a=r[f]("q:base"),i=r[f]("q:version")||"unknown",l=r[f]("q:manifest-hash")||"dev",b=new URL(a,e.baseURI);for(const f of h.split("\\n")){const u=new URL(f,b),h=u.href,y=u.hash[c](/^#?([^?[|]*).*$/,"$1")||"default",d=performance.now();let m,v,E;const _=f.startsWith("#"),A={qBase:a,qManifest:l,qVersion:i,href:h,symbol:y,element:t,reqTime:d};if(_){const t=r.getAttribute("q:instance");m=(e["qFuncs_"+t]||[])[Number.parseInt(y)],m||(v="sync",E=Error("sync handler error for symbol: "+y))}else{const e=u.href.split("#")[0];try{const t=import(e);w(r),m=(await t)[y],m||(v="no-symbol",E=Error(`${y} not in ${e}`))}catch(e){v||(v="async"),E=e}}if(!m){g("qerror",s({importError:v,error:E},A)),console.error(E);break}const k=e[n];if(t[p]){const r=async(a=0)=>{try{e[n]=[t,o,u],_||g("qsymbol",s({},A));const r=m(o,t);q(r)&&await r}catch(e){q(e)&&a<100?e.then((()=>r(a++))):g("qerror",s({error:e},A))}finally{e[n]=k}};r()}}}},g=(t,n)=>{e.dispatchEvent(v(t,n))},_=e=>e[c](/([A-Z])/g,(e=>"-"+e.toLowerCase())),A=async e=>{let t=_(e.type),n=e[l];for(m("-document",e,t);n&&n[f];){const r=E(n,"",e,t);let o=e.cancelBubble;q(r)&&await r,o=o||e.cancelBubble||n.hasAttribute("stoppropagation:"+e.type),n=e.bubbles&&!0!==o?n.parentElement:null}},k=e=>{m("-window",e,_(e.type))},C=()=>{var n;const s=e.readyState;if(!t&&("interactive"==s||"complete"==s)&&(a.forEach(d),t=1,g("qinit"),(null!=(n=r.requestIdleCallback)?n:r.setTimeout).bind(r)((()=>g("qidle"))),o.has(b))){const e=y("[on\\\\:"+b+"]"),t=new IntersectionObserver((e=>{for(const n of e)n.isIntersecting&&(t.unobserve(n[l]),E(n[l],"",v(b,n)))}));e[i]((e=>t.observe(e)))}},O=(e,t,n,r=!1)=>e.addEventListener(t,n,{capture:r,passive:!1}),S=(...e)=>{for(const t of e)"string"==typeof t?o.has(t)||(a.forEach((e=>O(e,t,A,!0))),O(r,t,k,!0),o.add(t)):a.has(t)||(o.forEach((e=>O(t,e,A,!0))),a.add(t))};if(!(n in e)){e[n]=0;const t=r.qwikevents;Array.isArray(t)&&S(...t),r.qwikevents={events:o,roots:a,push:S},O(e,"readystatechange",C),C()}})(document)})()';
-var QWIK_LOADER_DEFAULT_DEBUG = '(() => {\n    var __defProp = Object.defineProperty;\n    var __getOwnPropSymbols = Object.getOwnPropertySymbols;\n    var __hasOwnProp = Object.prototype.hasOwnProperty;\n    var __propIsEnum = Object.prototype.propertyIsEnumerable;\n    var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {\n        enumerable: !0,\n        configurable: !0,\n        writable: !0,\n        value: value\n    }) : obj[key] = value;\n    var __spreadValues = (a, b) => {\n        for (var prop in b || (b = {})) {\n            __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);\n        }\n        if (__getOwnPropSymbols) {\n            for (var prop of __getOwnPropSymbols(b)) {\n                __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);\n            }\n        }\n        return a;\n    };\n    ((doc, hasInitialized) => {\n        const Q_CONTEXT = "__q_context__";\n        const win = window;\n        const events =  new Set;\n        const roots =  new Set([ doc ]);\n        const nativeQuerySelectorAll = (root, selector) => Array.from(root.querySelectorAll(selector));\n        const querySelectorAll = query => {\n            const elements = [];\n            roots.forEach((root => elements.push(...nativeQuerySelectorAll(root, query))));\n            return elements;\n        };\n        const findShadowRoots = fragment => {\n            processEventOrNode(fragment);\n            nativeQuerySelectorAll(fragment, "[q\\\\:shadowroot]").forEach((parent => {\n                const shadowRoot = parent.shadowRoot;\n                shadowRoot && findShadowRoots(shadowRoot);\n            }));\n        };\n        const isPromise = promise => promise && "function" == typeof promise.then;\n        const broadcast = (infix, ev, type = ev.type) => {\n            querySelectorAll("[on" + infix + "\\\\:" + type + "]").forEach((el => dispatch(el, infix, ev, type)));\n        };\n        const resolveContainer = containerEl => {\n            if (void 0 === containerEl._qwikjson_) {\n                let script = (containerEl === doc.documentElement ? doc.body : containerEl).lastElementChild;\n                while (script) {\n                    if ("SCRIPT" === script.tagName && "qwik/json" === script.getAttribute("type")) {\n                        containerEl._qwikjson_ = JSON.parse(script.textContent.replace(/\\\\x3C(\\/?script)/gi, "<$1"));\n                        break;\n                    }\n                    script = script.previousElementSibling;\n                }\n            }\n        };\n        const createEvent = (eventName, detail) => new CustomEvent(eventName, {\n            detail: detail\n        });\n        const dispatch = async (element, scope, ev, eventName = ev.type) => {\n            const attrName = "on" + scope + ":" + eventName;\n            element.hasAttribute("preventdefault:" + eventName) && ev.preventDefault();\n            const ctx = element._qc_;\n            const relevantListeners = ctx && ctx.li.filter((li => li[0] === attrName));\n            if (relevantListeners && relevantListeners.length > 0) {\n                for (const listener of relevantListeners) {\n                    const results = listener[1].getFn([ element, ev ], (() => element.isConnected))(ev, element);\n                    const cancelBubble = ev.cancelBubble;\n                    isPromise(results) && await results;\n                    cancelBubble && ev.stopPropagation();\n                }\n                return;\n            }\n            const qDispatchEvent = element.qDispatchEvent;\n            if (qDispatchEvent) {\n                return qDispatchEvent(ev, scope);\n            }\n            const attrValue = element.getAttribute(attrName);\n            if (attrValue) {\n                const container = element.closest("[q\\\\:container]:not([q\\\\:container=html]):not([q\\\\:container=text])");\n                const qBase = container.getAttribute("q:base");\n                const qVersion = container.getAttribute("q:version") || "unknown";\n                const qManifest = container.getAttribute("q:manifest-hash") || "dev";\n                const base = new URL(qBase, doc.baseURI);\n                for (const qrl of attrValue.split("\\n")) {\n                    const url = new URL(qrl, base);\n                    const href = url.href;\n                    const symbol = url.hash.replace(/^#?([^?[|]*).*$/, "$1") || "default";\n                    const reqTime = performance.now();\n                    let handler;\n                    let importError;\n                    let error;\n                    const isSync = qrl.startsWith("#");\n                    const eventData = {\n                        qBase: qBase,\n                        qManifest: qManifest,\n                        qVersion: qVersion,\n                        href: href,\n                        symbol: symbol,\n                        element: element,\n                        reqTime: reqTime\n                    };\n                    if (isSync) {\n                        const hash = container.getAttribute("q:instance");\n                        handler = (doc["qFuncs_" + hash] || [])[Number.parseInt(symbol)];\n                        if (!handler) {\n                            importError = "sync";\n                            error = new Error("sync handler error for symbol: " + symbol);\n                        }\n                    } else {\n                        const uri = url.href.split("#")[0];\n                        try {\n                            const module = import(\n                                                        uri);\n                            resolveContainer(container);\n                            handler = (await module)[symbol];\n                            if (!handler) {\n                                importError = "no-symbol";\n                                error = new Error(`${symbol} not in ${uri}`);\n                            }\n                        } catch (err) {\n                            importError || (importError = "async");\n                            error = err;\n                        }\n                    }\n                    if (!handler) {\n                        emitEvent("qerror", __spreadValues({\n                            importError: importError,\n                            error: error\n                        }, eventData));\n                        console.error(error);\n                        break;\n                    }\n                    const previousCtx = doc[Q_CONTEXT];\n                    if (element.isConnected) {\n                        const handleEvent = async (retryCount = 0) => {\n                            try {\n                                doc[Q_CONTEXT] = [ element, ev, url ];\n                                isSync || emitEvent("qsymbol", __spreadValues({}, eventData));\n                                const results = handler(ev, element);\n                                isPromise(results) && await results;\n                            } catch (error2) {\n                                isPromise(error2) && retryCount < 100 ? error2.then((() => handleEvent(retryCount++))) : emitEvent("qerror", __spreadValues({\n                                    error: error2\n                                }, eventData));\n                            } finally {\n                                doc[Q_CONTEXT] = previousCtx;\n                            }\n                        };\n                        handleEvent();\n                    }\n                }\n            }\n        };\n        const emitEvent = (eventName, detail) => {\n            doc.dispatchEvent(createEvent(eventName, detail));\n        };\n        const camelToKebab = str => str.replace(/([A-Z])/g, (a => "-" + a.toLowerCase()));\n        const processDocumentEvent = async ev => {\n            let type = camelToKebab(ev.type);\n            let element = ev.target;\n            broadcast("-document", ev, type);\n            while (element && element.getAttribute) {\n                const results = dispatch(element, "", ev, type);\n                let cancelBubble = ev.cancelBubble;\n                isPromise(results) && await results;\n                cancelBubble = cancelBubble || ev.cancelBubble || element.hasAttribute("stoppropagation:" + ev.type);\n                element = ev.bubbles && !0 !== cancelBubble ? element.parentElement : null;\n            }\n        };\n        const processWindowEvent = ev => {\n            broadcast("-window", ev, camelToKebab(ev.type));\n        };\n        const processReadyStateChange = () => {\n            var _a;\n            const readyState = doc.readyState;\n            if (!hasInitialized && ("interactive" == readyState || "complete" == readyState)) {\n                roots.forEach(findShadowRoots);\n                hasInitialized = 1;\n                emitEvent("qinit");\n                (null != (_a = win.requestIdleCallback) ? _a : win.setTimeout).bind(win)((() => emitEvent("qidle")));\n                if (events.has("qvisible")) {\n                    const results = querySelectorAll("[on\\\\:qvisible]");\n                    const observer = new IntersectionObserver((entries => {\n                        for (const entry of entries) {\n                            if (entry.isIntersecting) {\n                                observer.unobserve(entry.target);\n                                dispatch(entry.target, "", createEvent("qvisible", entry));\n                            }\n                        }\n                    }));\n                    results.forEach((el => observer.observe(el)));\n                }\n            }\n        };\n        const addEventListener = (el, eventName, handler, capture = !1) => el.addEventListener(eventName, handler, {\n            capture: capture,\n            passive: !1\n        });\n        const processEventOrNode = (...eventNames) => {\n            for (const eventNameOrNode of eventNames) {\n                if ("string" == typeof eventNameOrNode) {\n                    if (!events.has(eventNameOrNode)) {\n                        roots.forEach((root => addEventListener(root, eventNameOrNode, processDocumentEvent, !0)));\n                        addEventListener(win, eventNameOrNode, processWindowEvent, !0);\n                        events.add(eventNameOrNode);\n                    }\n                } else if (!roots.has(eventNameOrNode)) {\n                    events.forEach((eventName => addEventListener(eventNameOrNode, eventName, processDocumentEvent, !0)));\n                    roots.add(eventNameOrNode);\n                }\n            }\n        };\n        if (!(Q_CONTEXT in doc)) {\n            doc[Q_CONTEXT] = 0;\n            const qwikevents = win.qwikevents;\n            Array.isArray(qwikevents) && processEventOrNode(...qwikevents);\n            win.qwikevents = {\n                events: events,\n                roots: roots,\n                push: processEventOrNode\n            };\n            addEventListener(doc, "readystatechange", processReadyStateChange);\n            processReadyStateChange();\n        }\n    })(document);\n})()';
+var QWIK_LOADER_DEFAULT_MINIFIED = '(()=>{var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,n,o)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,s=(e,s)=>{for(var a in s||(s={}))n.call(s,a)&&r(e,a,s[a]);if(t)for(var a of t(s))o.call(s,a)&&r(e,a,s[a]);return e};((e,t)=>{const n="__q_context__",o=window,r=new Set,a=new Set([e]),i="replace",c="forEach",l="target",f="getAttribute",p="isConnected",b="qvisible",u="_qwikjson_",h=(e,t)=>Array.from(e.querySelectorAll(t)),y=e=>{const t=[];return a.forEach((n=>t.push(...h(n,e)))),t},d=e=>{S(e),h(e,"[q\\\\:shadowroot]").forEach((e=>{const t=e.shadowRoot;t&&d(t)}))},q=e=>e&&"function"==typeof e.then,m=(e,t,n=t.type)=>{y("[on"+e+"\\\\:"+n+"]")[c]((o=>g(o,e,t,n)))},w=t=>{if(void 0===t[u]){let n=(t===e.documentElement?e.body:t).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n[f]("type")){t[u]=JSON.parse(n.textContent[i](/\\\\x3C(\\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},v=(e,t)=>new CustomEvent(e,{detail:t}),g=async(t,o,r,a=r.type)=>{const c="on"+o+":"+a;t.hasAttribute("preventdefault:"+a)&&r.preventDefault(),t.hasAttribute("stoppropagation:"+a)&&r.stopPropagation();const l=t._qc_,b=l&&l.li.filter((e=>e[0]===c));if(b&&b.length>0){for(const e of b){const n=e[1].getFn([t,r],(()=>t[p]))(r,t),o=r.cancelBubble;q(n)&&await n,o&&r.stopPropagation()}return}const u=t.qDispatchEvent;if(u)return u(r,o);const h=t[f](c);if(h){const o=t.closest("[q\\\\:container]:not([q\\\\:container=html]):not([q\\\\:container=text])"),a=o[f]("q:base"),c=o[f]("q:version")||"unknown",l=o[f]("q:manifest-hash")||"dev",b=new URL(a,e.baseURI);for(const f of h.split("\\n")){const u=new URL(f,b),h=u.href,y=u.hash[i](/^#?([^?[|]*).*$/,"$1")||"default",d=performance.now();let m,v,g;const A=f.startsWith("#"),_={qBase:a,qManifest:l,qVersion:c,href:h,symbol:y,element:t,reqTime:d};if(A){const t=o.getAttribute("q:instance");m=(e["qFuncs_"+t]||[])[Number.parseInt(y)],m||(v="sync",g=Error("sync handler error for symbol: "+y))}else{const e=u.href.split("#")[0];try{const t=import(e);w(o),m=(await t)[y],m||(v="no-symbol",g=Error(`${y} not in ${e}`))}catch(e){v||(v="async"),g=e}}if(!m){E("qerror",s({importError:v,error:g},_)),console.error(g);break}const k=e[n];if(t[p]){const o=async(a=0)=>{try{e[n]=[t,r,u],A||E("qsymbol",s({},_));const o=m(r,t);q(o)&&await o}catch(e){q(e)&&a<100?e.then((()=>o(a++))):E("qerror",s({error:e},_))}finally{e[n]=k}};o()}}}},E=(t,n)=>{e.dispatchEvent(v(t,n))},A=e=>e[i](/([A-Z])/g,(e=>"-"+e.toLowerCase())),_=async e=>{let t=A(e.type),n=e[l];for(m("-document",e,t);n&&n[f];){const o=g(n,"",e,t);let r=e.cancelBubble;q(o)&&await o,r=r||e.cancelBubble||n.hasAttribute("stoppropagation:"+e.type),n=e.bubbles&&!0!==r?n.parentElement:null}},k=e=>{m("-window",e,A(e.type))},C=()=>{var n;const s=e.readyState;if(!t&&("interactive"==s||"complete"==s)&&(a.forEach(d),t=1,E("qinit"),(null!=(n=o.requestIdleCallback)?n:o.setTimeout).bind(o)((()=>E("qidle"))),r.has(b))){const e=y("[on\\\\:"+b+"]"),t=new IntersectionObserver((e=>{for(const n of e)n.isIntersecting&&(t.unobserve(n[l]),g(n[l],"",v(b,n)))}));e[c]((e=>t.observe(e)))}},O=(e,t,n,o=!1)=>e.addEventListener(t,n,{capture:o,passive:!1}),S=(...e)=>{for(const t of e)"string"==typeof t?r.has(t)||(a.forEach((e=>O(e,t,_,!0))),O(o,t,k,!0),r.add(t)):a.has(t)||(r.forEach((e=>O(t,e,_,!0))),a.add(t))};if(!(n in e)){e[n]=0;const t=o.qwikevents;Array.isArray(t)&&S(...t),o.qwikevents={events:r,roots:a,push:S},O(e,"readystatechange",C),C()}})(document)})()';
+var QWIK_LOADER_DEFAULT_DEBUG = '(() => {\n    var __defProp = Object.defineProperty;\n    var __getOwnPropSymbols = Object.getOwnPropertySymbols;\n    var __hasOwnProp = Object.prototype.hasOwnProperty;\n    var __propIsEnum = Object.prototype.propertyIsEnumerable;\n    var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {\n        enumerable: !0,\n        configurable: !0,\n        writable: !0,\n        value: value\n    }) : obj[key] = value;\n    var __spreadValues = (a, b) => {\n        for (var prop in b || (b = {})) {\n            __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);\n        }\n        if (__getOwnPropSymbols) {\n            for (var prop of __getOwnPropSymbols(b)) {\n                __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);\n            }\n        }\n        return a;\n    };\n    ((doc, hasInitialized) => {\n        const Q_CONTEXT = "__q_context__";\n        const win = window;\n        const events =  new Set;\n        const roots =  new Set([ doc ]);\n        const nativeQuerySelectorAll = (root, selector) => Array.from(root.querySelectorAll(selector));\n        const querySelectorAll = query => {\n            const elements = [];\n            roots.forEach((root => elements.push(...nativeQuerySelectorAll(root, query))));\n            return elements;\n        };\n        const findShadowRoots = fragment => {\n            processEventOrNode(fragment);\n            nativeQuerySelectorAll(fragment, "[q\\\\:shadowroot]").forEach((parent => {\n                const shadowRoot = parent.shadowRoot;\n                shadowRoot && findShadowRoots(shadowRoot);\n            }));\n        };\n        const isPromise = promise => promise && "function" == typeof promise.then;\n        const broadcast = (infix, ev, type = ev.type) => {\n            querySelectorAll("[on" + infix + "\\\\:" + type + "]").forEach((el => dispatch(el, infix, ev, type)));\n        };\n        const resolveContainer = containerEl => {\n            if (void 0 === containerEl._qwikjson_) {\n                let script = (containerEl === doc.documentElement ? doc.body : containerEl).lastElementChild;\n                while (script) {\n                    if ("SCRIPT" === script.tagName && "qwik/json" === script.getAttribute("type")) {\n                        containerEl._qwikjson_ = JSON.parse(script.textContent.replace(/\\\\x3C(\\/?script)/gi, "<$1"));\n                        break;\n                    }\n                    script = script.previousElementSibling;\n                }\n            }\n        };\n        const createEvent = (eventName, detail) => new CustomEvent(eventName, {\n            detail: detail\n        });\n        const dispatch = async (element, scope, ev, eventName = ev.type) => {\n            const attrName = "on" + scope + ":" + eventName;\n            element.hasAttribute("preventdefault:" + eventName) && ev.preventDefault();\n            element.hasAttribute("stoppropagation:" + eventName) && ev.stopPropagation();\n            const ctx = element._qc_;\n            const relevantListeners = ctx && ctx.li.filter((li => li[0] === attrName));\n            if (relevantListeners && relevantListeners.length > 0) {\n                for (const listener of relevantListeners) {\n                    const results = listener[1].getFn([ element, ev ], (() => element.isConnected))(ev, element);\n                    const cancelBubble = ev.cancelBubble;\n                    isPromise(results) && await results;\n                    cancelBubble && ev.stopPropagation();\n                }\n                return;\n            }\n            const qDispatchEvent = element.qDispatchEvent;\n            if (qDispatchEvent) {\n                return qDispatchEvent(ev, scope);\n            }\n            const attrValue = element.getAttribute(attrName);\n            if (attrValue) {\n                const container = element.closest("[q\\\\:container]:not([q\\\\:container=html]):not([q\\\\:container=text])");\n                const qBase = container.getAttribute("q:base");\n                const qVersion = container.getAttribute("q:version") || "unknown";\n                const qManifest = container.getAttribute("q:manifest-hash") || "dev";\n                const base = new URL(qBase, doc.baseURI);\n                for (const qrl of attrValue.split("\\n")) {\n                    const url = new URL(qrl, base);\n                    const href = url.href;\n                    const symbol = url.hash.replace(/^#?([^?[|]*).*$/, "$1") || "default";\n                    const reqTime = performance.now();\n                    let handler;\n                    let importError;\n                    let error;\n                    const isSync = qrl.startsWith("#");\n                    const eventData = {\n                        qBase: qBase,\n                        qManifest: qManifest,\n                        qVersion: qVersion,\n                        href: href,\n                        symbol: symbol,\n                        element: element,\n                        reqTime: reqTime\n                    };\n                    if (isSync) {\n                        const hash = container.getAttribute("q:instance");\n                        handler = (doc["qFuncs_" + hash] || [])[Number.parseInt(symbol)];\n                        if (!handler) {\n                            importError = "sync";\n                            error = new Error("sync handler error for symbol: " + symbol);\n                        }\n                    } else {\n                        const uri = url.href.split("#")[0];\n                        try {\n                            const module = import(\n                                                        uri);\n                            resolveContainer(container);\n                            handler = (await module)[symbol];\n                            if (!handler) {\n                                importError = "no-symbol";\n                                error = new Error(`${symbol} not in ${uri}`);\n                            }\n                        } catch (err) {\n                            importError || (importError = "async");\n                            error = err;\n                        }\n                    }\n                    if (!handler) {\n                        emitEvent("qerror", __spreadValues({\n                            importError: importError,\n                            error: error\n                        }, eventData));\n                        console.error(error);\n                        break;\n                    }\n                    const previousCtx = doc[Q_CONTEXT];\n                    if (element.isConnected) {\n                        const handleEvent = async (retryCount = 0) => {\n                            try {\n                                doc[Q_CONTEXT] = [ element, ev, url ];\n                                isSync || emitEvent("qsymbol", __spreadValues({}, eventData));\n                                const results = handler(ev, element);\n                                isPromise(results) && await results;\n                            } catch (error2) {\n                                isPromise(error2) && retryCount < 100 ? error2.then((() => handleEvent(retryCount++))) : emitEvent("qerror", __spreadValues({\n                                    error: error2\n                                }, eventData));\n                            } finally {\n                                doc[Q_CONTEXT] = previousCtx;\n                            }\n                        };\n                        handleEvent();\n                    }\n                }\n            }\n        };\n        const emitEvent = (eventName, detail) => {\n            doc.dispatchEvent(createEvent(eventName, detail));\n        };\n        const camelToKebab = str => str.replace(/([A-Z])/g, (a => "-" + a.toLowerCase()));\n        const processDocumentEvent = async ev => {\n            let type = camelToKebab(ev.type);\n            let element = ev.target;\n            broadcast("-document", ev, type);\n            while (element && element.getAttribute) {\n                const results = dispatch(element, "", ev, type);\n                let cancelBubble = ev.cancelBubble;\n                isPromise(results) && await results;\n                cancelBubble = cancelBubble || ev.cancelBubble || element.hasAttribute("stoppropagation:" + ev.type);\n                element = ev.bubbles && !0 !== cancelBubble ? element.parentElement : null;\n            }\n        };\n        const processWindowEvent = ev => {\n            broadcast("-window", ev, camelToKebab(ev.type));\n        };\n        const processReadyStateChange = () => {\n            var _a;\n            const readyState = doc.readyState;\n            if (!hasInitialized && ("interactive" == readyState || "complete" == readyState)) {\n                roots.forEach(findShadowRoots);\n                hasInitialized = 1;\n                emitEvent("qinit");\n                (null != (_a = win.requestIdleCallback) ? _a : win.setTimeout).bind(win)((() => emitEvent("qidle")));\n                if (events.has("qvisible")) {\n                    const results = querySelectorAll("[on\\\\:qvisible]");\n                    const observer = new IntersectionObserver((entries => {\n                        for (const entry of entries) {\n                            if (entry.isIntersecting) {\n                                observer.unobserve(entry.target);\n                                dispatch(entry.target, "", createEvent("qvisible", entry));\n                            }\n                        }\n                    }));\n                    results.forEach((el => observer.observe(el)));\n                }\n            }\n        };\n        const addEventListener = (el, eventName, handler, capture = !1) => el.addEventListener(eventName, handler, {\n            capture: capture,\n            passive: !1\n        });\n        const processEventOrNode = (...eventNames) => {\n            for (const eventNameOrNode of eventNames) {\n                if ("string" == typeof eventNameOrNode) {\n                    if (!events.has(eventNameOrNode)) {\n                        roots.forEach((root => addEventListener(root, eventNameOrNode, processDocumentEvent, !0)));\n                        addEventListener(win, eventNameOrNode, processWindowEvent, !0);\n                        events.add(eventNameOrNode);\n                    }\n                } else if (!roots.has(eventNameOrNode)) {\n                    events.forEach((eventName => addEventListener(eventNameOrNode, eventName, processDocumentEvent, !0)));\n                    roots.add(eventNameOrNode);\n                }\n            }\n        };\n        if (!(Q_CONTEXT in doc)) {\n            doc[Q_CONTEXT] = 0;\n            const qwikevents = win.qwikevents;\n            Array.isArray(qwikevents) && processEventOrNode(...qwikevents);\n            win.qwikevents = {\n                events: events,\n                roots: roots,\n                push: processEventOrNode\n            };\n            addEventListener(doc, "readystatechange", processReadyStateChange);\n            processReadyStateChange();\n        }\n    })(document);\n})()';
 function getQwikLoaderScript(opts = {}) {
   return opts.debug ? QWIK_LOADER_DEFAULT_DEBUG : QWIK_LOADER_DEFAULT_MINIFIED;
 }

package/dist/starters/features/auth/package.json

@@ -9,12 +9,14 @@
     ],
     "nextSteps": {
       "lines": [
+        " Please add `optimizeDeps: { include: ['@auth/core'] }`",
+        " to your vite.config.ts file.",
         " Have a look at the docs for more info: ",
         " https://qwik.dev/docs/integrations/authjs/"
       ]
     }
   },
   "devDependencies": {
-    "@auth/qwik": "0.2.2"
+    "@auth/qwik": "0.5.4"
   }
 }

package/dist/starters/features/drizzle/package.json

@@ -22,7 +22,8 @@
         " Check out the Drizzle docs for more info:",
         "   - https://orm.drizzle.team/docs/overview"
       ]
-    }
+    },
+    "alwaysInRoot": []
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.9",

package/dist/starters/features/postcss/package.json

@@ -7,6 +7,9 @@
     "docs": [
       "https://qwik.dev/integrations/integration/postcss/",
       "https://github.com/postcss/postcss-load-config"
+    ],
+    "alwaysInRoot": [
+      ".vscode"
     ]
   },
   "devDependencies": {

package/dist/starters/features/prisma/package.json

@@ -20,7 +20,8 @@
         " Check out the Prisma docs for more info:",
         "   - https://www.prisma.io/docs/getting-started"
       ]
-    }
+    },
+    "alwaysInRoot": []
   },
   "devDependencies": {
     "@prisma/client": "5.3.1",

package/dist/starters/features/tailwind/package.json

@@ -7,6 +7,9 @@
     "docs": [
       "https://qwik.dev/integrations/integration/tailwind/",
       "https://tailwindcss.com/docs/utility-first"
+    ],
+    "alwaysInRoot": [
+      ".vscode"
     ]
   },
   "devDependencies": {

package/dist/starters/features/turso/package.json

@@ -19,7 +19,10 @@
         " To get an authentication token for the database, run:",
         "   turso db tokens create <db-name>"
       ]
-    }
+    },
+    "alwaysInRoot": [
+      ".env.local"
+    ]
   },
   "dependencies": {
     "@libsql/client": "latest"

package/dist/testing/index.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core/testing 2.0.0-alpha.1-dev+10f5414
+ * @qwik.dev/core/testing 2.0.0-alpha.2-dev+58b6f8d
  * 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
@@ -23077,9 +23077,11 @@ function clearEffects(subscriber, value) {
   return subscriptionRemoved;
 }
 
+// packages/qwik/src/core/signal/flags.ts
+var NEEDS_COMPUTATION = Symbol("invalid");
+
 // packages/qwik/src/core/signal/signal.ts
 var DEBUG = false;
-var NEEDS_COMPUTATION = Symbol("invalid");
 var log = (...args) => console.log("SIGNAL", ...args.map(qwikDebugToString));
 var throwIfQRLNotResolved = (qrl2) => {
   const resolved = qrl2.resolved;
@@ -23615,6 +23617,20 @@ var StoreHandler = class {
     if (prop === STORE_TARGET) {
       return true;
     }
+    if (typeof prop === "string") {
+      const ctx = tryGetInvokeContext();
+      if (ctx) {
+        const effectSubscriber = ctx.$effectSubscriber$;
+        if (effectSubscriber) {
+          addEffect(
+            target,
+            Array.isArray(target) ? STORE_ARRAY_PROP : prop,
+            this,
+            effectSubscriber
+          );
+        }
+      }
+    }
     return Object.prototype.hasOwnProperty.call(target, prop);
   }
   ownKeys(target) {
@@ -25245,7 +25261,10 @@ function choreComparator(a, b, shouldThrowOnHostMismatch) {
           return hostDiff;
         }
       } else {
-        const errorMessage = "SERVER: during HTML streaming, it is not possible to cause a re-run of tasks on a different host";
+        const errorMessage = `SERVER: during HTML streaming, re-running tasks on a different host is not allowed.
+          You are attempting to change a state that has already been streamed to the client.
+          This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
+          Problematic Node: ${aHost.toString()}`;
         if (shouldThrowOnHostMismatch) {
           throwErrorAndStop(errorMessage);
         }
@@ -25360,9 +25379,10 @@ var _SharedContainer = class {
   trackSignalValue(signal, subscriber, property, data) {
     return trackSignal(() => signal.value, subscriber, property, this, data);
   }
-  serializationCtxFactory(NodeConstructor, symbolToChunkResolver, writer, prepVNodeData) {
+  serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
     return createSerializationContext(
       NodeConstructor,
+      DomRefConstructor,
       symbolToChunkResolver,
       this.getHostProp.bind(this),
       this.setHostProp.bind(this),
@@ -27891,6 +27911,12 @@ var SsrNode = class {
     return `SSRNode [<${this.id}> ${stringifiedAttrs}]`;
   }
 };
+var DomRef = class {
+  /** @id is the same id as for SsrNode */
+  constructor(id) {
+    this.id = id;
+  }
+};
 var SsrComponentFrame = class {
   constructor(componentNode) {
     this.componentNode = componentNode;
@@ -28505,12 +28531,7 @@ function inflateQRL(container, qrl2) {
   }
   return qrl2;
 }
-var DomVRef = class {
-  constructor(id) {
-    this.id = id;
-  }
-};
-var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
+var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
   if (!writer) {
     const buffer = [];
     writer = {
@@ -28534,11 +28555,13 @@ var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getPro
     return id;
   };
   const isSsrNode = NodeConstructor ? (obj) => obj instanceof NodeConstructor : () => false;
+  const isDomRef = DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : () => false;
   return {
     $serialize$() {
       serialize(this);
     },
     $isSsrNode$: isSsrNode,
+    $isDomRef$: isDomRef,
     $symbolToChunkResolver$: symbolToChunkResolver,
     $wasSeen$,
     $roots$: roots,
@@ -28647,6 +28670,8 @@ var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getPro
         discoveredValues.push(obj.$el$, obj.$qrl$, obj.$state$, obj.$effectDependencies$);
       } else if (isSsrNode(obj)) {
         discoveredValues.push(obj.vnodeData);
+      } else if (isDomRef(obj)) {
+        discoveredValues.push(obj.id);
       } else if (isJSXNode(obj)) {
         discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
       } else if (Array.isArray(obj)) {
@@ -28701,7 +28726,7 @@ var createSerializationContext = (NodeConstructor, symbolToChunkResolver, getPro
 };
 var promiseResults = /* @__PURE__ */ new WeakMap();
 function serialize(serializationContext) {
-  const { $writer$, $isSsrNode$, $setProp$, $storeProxyMap$ } = serializationContext;
+  const { $writer$, $isSsrNode$, $isDomRef$, $setProp$, $storeProxyMap$ } = serializationContext;
   let depth = -1;
   let writeType = false;
   const output = (type, value) => {
@@ -28870,14 +28895,10 @@ function serialize(serializationContext) {
         }
         output(13 /* Object */, out);
       }
-    } else if (value instanceof DomVRef) {
+    } else if ($isDomRef$(value)) {
       output(9 /* RefVNode */, value.id);
     } else if (value instanceof Signal) {
-      let v = value instanceof ComputedSignal && (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
-      if ($isSsrNode$(v)) {
-        serializationContext.$addRoot$(v);
-        v = new DomVRef(v.id);
-      }
+      const v = value instanceof ComputedSignal && (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
       if (value instanceof WrappedSignal) {
         output(23 /* WrappedSignal */, [
           ...serializeWrappingFn(serializationContext, value),
@@ -29372,8 +29393,8 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
   }
   let _containerEl;
   const qrl2 = async function(...args) {
-    const fn = invokeFn.call(this, tryGetInvokeContext());
-    const result = await fn(...args);
+    const boundedFn = bindFnToContext.call(this, tryGetInvokeContext());
+    const result = await boundedFn(...args);
     return result;
   };
   const setContainer = (el) => {
@@ -29382,6 +29403,30 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     }
     return _containerEl;
   };
+  function bindFnToContext(currentCtx, beforeFn) {
+    return (...args) => maybeThen(resolveLazy(), (fn) => {
+      if (!isFunction(fn)) {
+        throw qError(QError_qrlIsNotFunction);
+      }
+      if (beforeFn && beforeFn() === false) {
+        return;
+      }
+      const context = createOrReuseInvocationContext(currentCtx);
+      const prevQrl = context.$qrl$;
+      const prevEvent = context.$event$;
+      context.$qrl$ = qrl2;
+      context.$event$ ||= this;
+      try {
+        return invoke.call(this, context, fn, ...args);
+      } finally {
+        context.$qrl$ = prevQrl;
+        context.$event$ = prevEvent;
+      }
+    });
+  }
+  const resolveLazy = (containerEl) => {
+    return symbolRef !== null ? symbolRef : resolve(containerEl);
+  };
   const wrapFn = (fn) => {
     if (typeof fn !== "function" || !(capture == null ? void 0 : capture.length) && !(captureRef == null ? void 0 : captureRef.length)) {
       return fn;
@@ -29431,30 +29476,6 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     }
     return symbolRef;
   };
-  const resolveLazy = (containerEl) => {
-    return symbolRef !== null ? symbolRef : resolve(containerEl);
-  };
-  function invokeFn(currentCtx, beforeFn) {
-    return (...args) => maybeThen(resolveLazy(), (f) => {
-      if (!isFunction(f)) {
-        throw qError(QError_qrlIsNotFunction);
-      }
-      if (beforeFn && beforeFn() === false) {
-        return;
-      }
-      const context = createOrReuseInvocationContext(currentCtx);
-      const prevQrl = context.$qrl$;
-      const prevEvent = context.$event$;
-      context.$qrl$ = qrl2;
-      context.$event$ ||= this;
-      try {
-        return invoke.call(this, context, f, ...args);
-      } finally {
-        context.$qrl$ = prevQrl;
-        context.$event$ = prevEvent;
-      }
-    });
-  }
   const createOrReuseInvocationContext = (invoke2) => {
     if (invoke2 == null) {
       return newInvokeContext();
@@ -29477,7 +29498,7 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     $symbol$: symbol,
     $refSymbol$: refSymbol,
     $hash$: hash3,
-    getFn: invokeFn,
+    getFn: bindFnToContext,
     $capture$: capture,
     $captureRef$: captureRef,
     dev: null,
@@ -31160,6 +31181,7 @@ var SSRContainer = class extends import_core5._SharedContainer {
     };
     this.serializationCtx = this.serializationCtxFactory(
       SsrNode,
+      DomRef,
       this.symbolToChunkResolver,
       opts.writer,
       (vNodeData) => this.addVNodeToSerializationRoots(vNodeData)
@@ -31933,10 +31955,10 @@ var SSRContainer = class extends import_core5._SharedContainer {
         if (key === "ref") {
           const lastNode = this.getLastNode();
           if ((0, import_core5.isSignal)(value)) {
-            value.value = lastNode;
+            value.value = new DomRef(lastNode.id);
             continue;
           } else if (typeof value === "function") {
-            value(lastNode);
+            value(new DomRef(lastNode.id));
             continue;
           }
         }