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

package/dist/core.prod.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.1-dev+10f5414
+ * @qwik.dev/core 2.0.0-alpha.3-dev+418fd6d
  * 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
@@ -824,7 +824,17 @@
             !0);
         }
         has(target, prop) {
-            return prop === STORE_TARGET || Object.prototype.hasOwnProperty.call(target, prop);
+            if (prop === STORE_TARGET) {
+                return !0;
+            }
+            if ("string" == typeof prop) {
+                const ctx = tryGetInvokeContext();
+                if (ctx) {
+                    const effectSubscriber = ctx.$effectSubscriber$;
+                    effectSubscriber && addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
+                }
+            }
+            return Object.prototype.hasOwnProperty.call(target, prop);
         }
         ownKeys(target) {
             const ctx = tryGetInvokeContext();
@@ -1550,21 +1560,22 @@
                     }(jsxProps, vNodeProps), shouldRender && (host[VNodeProps.flags] &= ~VNodeFlags.Deleted, 
                     container.$scheduler$(ChoreType.COMPONENT, host, componentQRL, jsxProps));
                 }
-                null != jsxNode.children && function(children, host) {
-                    if (Array.isArray(children) || (children = [ children ]), children.length) {
-                        const createProjectionJSXNode = slotName => new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
-                        const projections = [];
-                        if (host) {
-                            for (let i = vnode_getPropStartIndex(host); i < host.length; i += 2) {
-                                const prop = host[i];
-                                if (isSlotProp(prop)) {
-                                    const slotName = prop;
-                                    projections.push(slotName), projections.push(createProjectionJSXNode(slotName));
-                                }
+                !function(children, host) {
+                    const projectionChildren = Array.isArray(children) ? children : [ children ];
+                    const createProjectionJSXNode = slotName => new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
+                    const projections = [];
+                    if (host) {
+                        for (let i = vnode_getPropStartIndex(host); i < host.length; i += 2) {
+                            const prop = host[i];
+                            if (isSlotProp(prop)) {
+                                const slotName = prop;
+                                projections.push(slotName), projections.push(createProjectionJSXNode(slotName));
                             }
                         }
-                        for (let i = 0; i < children.length; i++) {
-                            const child = children[i];
+                    }
+                    if (0 !== projections.length || null != children) {
+                        for (let i = 0; i < projectionChildren.length; i++) {
+                            const child = projectionChildren[i];
                             const slotName = String(isJSXNode(child) && directGetPropsProxyProp(child, QSlot) || "");
                             const idx = mapApp_findIndx(projections, slotName, 0);
                             let jsxBucket;
@@ -1814,7 +1825,13 @@
 
               case ChoreType.COMPONENT:
               case ChoreType.COMPONENT_SSR:
-                returnValue = safeCall((() => executeComponent(container, host, host, chore.$target$, chore.$payload$)), (jsx => chore.$type$ === ChoreType.COMPONENT ? maybeThen(container.processJsx(host, jsx), (() => jsx)) : jsx), (err => container.handleError(err, host)));
+                returnValue = safeCall((() => executeComponent(container, host, host, chore.$target$, chore.$payload$)), (jsx => {
+                    if (chore.$type$ === ChoreType.COMPONENT) {
+                        const styleScopedId = container.getHostProp(host, "q:sstyle");
+                        return vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId));
+                    }
+                    return jsx;
+                }), (err => container.handleError(err, host)));
                 break;
 
               case ChoreType.RESOURCE:
@@ -1879,7 +1896,7 @@
             const bHost = b.$host$;
             if (aHost !== bHost && null !== aHost && null !== bHost) {
                 if (!vnode_isVNode(aHost) || !vnode_isVNode(bHost)) {
-                    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.\n          You are attempting to change a state that has already been streamed to the client.\n          This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).\n          Problematic Node: ${aHost.toString()}`;
                     return shouldThrowOnHostMismatch && throwErrorAndStop(errorMessage), logWarn(errorMessage), 
                     null;
                 }
@@ -1904,7 +1921,7 @@
         }
         return 0;
     }
-    const version = "2.0.0-alpha.1-dev+10f5414";
+    const version = "2.0.0-alpha.3-dev+418fd6d";
     class _SharedContainer {
         $version$;
         $scheduler$;
@@ -1923,8 +1940,8 @@
         trackSignalValue(signal, subscriber, property, data) {
             return trackSignal((() => signal.value), subscriber, property, this, data);
         }
-        serializationCtxFactory(NodeConstructor, symbolToChunkResolver, writer, prepVNodeData) {
-            return createSerializationContext(NodeConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
+        serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
+            return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
         }
     }
     const VNodeDataSeparator_REFERENCE = 126, VNodeDataSeparator_ADVANCE_1 = 33, VNodeDataSeparator_ADVANCE_8192 = 46;
@@ -2153,10 +2170,6 @@
         parseQRL(qrl) {
             return inflateQRL(this, parseQRL(qrl));
         }
-        processJsx(host, jsx) {
-            const styleScopedId = this.getHostProp(host, "q:sstyle");
-            return vnode_diff(this, jsx, host, addComponentStylePrefix(styleScopedId));
-        }
         handleError(err, host) {
             const errorStore = this.resolveContext(host, ERROR_CONTEXT);
             if (!errorStore) {
@@ -3753,7 +3766,10 @@
                     const valType = data[i + 2];
                     const valData = data[i + 3];
                     valType === TypeIds.RootRef || valType >= TypeIds.Error ? Object.defineProperty(target, key, {
-                        get: () => deserializeData(container, valType, valData),
+                        get() {
+                            const value = deserializeData(container, valType, valData);
+                            return target[key] = value, value;
+                        },
                         set(value) {
                             Object.defineProperty(target, key, {
                                 value,
@@ -4053,13 +4069,8 @@
         return qrl.$captureRef$ = captureIds ? captureIds.map((id => container.$getObjectById$(id))) : null, 
         container.element && qrl.$setContainer$(container.element), qrl;
     }
-    class DomVRef {
-        id;
-        constructor(id) {
-            this.id = id;
-        }
-    }
-    const createSerializationContext = (NodeConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
+    let isDomRef = () => !1;
+    const createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
         if (!writer) {
             const buffer = [];
             writer = {
@@ -4079,10 +4090,11 @@
             roots.push(obj)), id;
         };
         const isSsrNode = NodeConstructor ? obj => obj instanceof NodeConstructor : () => !1;
-        return {
+        return isDomRef = DomRefConstructor ? obj => obj instanceof DomRefConstructor : () => !1, 
+        {
             $serialize$() {
                 !function(serializationContext) {
-                    const {$writer$, $isSsrNode$, $setProp$, $storeProxyMap$} = serializationContext;
+                    const {$writer$, $isSsrNode$, $isDomRef$, $setProp$, $storeProxyMap$} = serializationContext;
                     let depth = -1;
                     let writeType = !1;
                     const output = (type, value) => {
@@ -4200,12 +4212,11 @@
                                 }
                                 output(TypeIds.Object, out);
                             }
-                        } else if (value instanceof DomVRef) {
-                            output(TypeIds.RefVNode, value.id);
+                        } else if ($isDomRef$(value)) {
+                            value.$ssrNode$.vnodeData[0] |= VNodeDataFlag.SERIALIZE, output(TypeIds.RefVNode, value.$ssrNode$.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)), 
-                            value instanceof WrappedSignal) {
+                            const v = value instanceof ComputedSignal && (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
+                            if (value instanceof WrappedSignal) {
                                 output(TypeIds.WrappedSignal, [ ...serializeWrappingFn(serializationContext, value), value.$effectDependencies$, v, ...value.$effects$ || [] ]);
                             } else if (value instanceof ComputedSignal) {
                                 const out = [ value.$computeQrl$, value.$effects$ ];
@@ -4283,6 +4294,7 @@
                 }(this);
             },
             $isSsrNode$: isSsrNode,
+            $isDomRef$: isDomRef,
             $symbolToChunkResolver$: symbolToChunkResolver,
             $wasSeen$,
             $roots$: roots,
@@ -4351,6 +4363,8 @@
                         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.$ssrNode$.id);
                     } else if (isJSXNode(obj)) {
                         discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
                     } else if (Array.isArray(obj)) {
@@ -4528,6 +4542,9 @@
             if (value instanceof Uint8Array) {
                 return !0;
             }
+            if (isDomRef?.(value)) {
+                return !0;
+            }
         } else if ("function" == typeof value && (isQrl(value) || isQwikComponent(value))) {
             return !0;
         }
@@ -4633,10 +4650,30 @@
     const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSymbol) => {
         let _containerEl;
         const qrl = async function(...args) {
-            const fn = invokeFn.call(this, tryGetInvokeContext());
-            return await fn(...args);
+            const boundedFn = bindFnToContext.call(this, tryGetInvokeContext());
+            return await boundedFn(...args);
         };
         const setContainer = el => (_containerEl || (_containerEl = el), _containerEl);
+        function bindFnToContext(currentCtx, beforeFn) {
+            return (...args) => maybeThen(resolveLazy(), (fn => {
+                if (!isFunction(fn)) {
+                    throw qError(10);
+                }
+                if (beforeFn && !1 === beforeFn()) {
+                    return;
+                }
+                const context = createOrReuseInvocationContext(currentCtx);
+                const prevQrl = context.$qrl$;
+                const prevEvent = context.$event$;
+                context.$qrl$ = qrl, context.$event$ ||= this;
+                try {
+                    return invoke.call(this, context, fn, ...args);
+                } finally {
+                    context.$qrl$ = prevQrl, context.$event$ = prevEvent;
+                }
+            }));
+        }
+        const resolveLazy = containerEl => null !== symbolRef ? symbolRef : resolve(containerEl);
         const wrapFn = fn => "function" != typeof fn || !capture?.length && !captureRef?.length ? fn : function(...args) {
             let context = tryGetInvokeContext();
             return context ? fn.apply(this, args) : (context = newInvokeContext(), context.$qrl$ = qrl, 
@@ -4664,26 +4701,6 @@
                 throw console.error(`qrl ${symbol} failed to load`, err), symbolRef = null, err;
             })), symbolRef;
         };
-        const resolveLazy = containerEl => null !== symbolRef ? symbolRef : resolve(containerEl);
-        function invokeFn(currentCtx, beforeFn) {
-            return (...args) => maybeThen(resolveLazy(), (f => {
-                if (!isFunction(f)) {
-                    throw qError(10);
-                }
-                if (beforeFn && !1 === beforeFn()) {
-                    return;
-                }
-                const context = createOrReuseInvocationContext(currentCtx);
-                const prevQrl = context.$qrl$;
-                const prevEvent = context.$event$;
-                context.$qrl$ = qrl, context.$event$ ||= this;
-                try {
-                    return invoke.call(this, context, f, ...args);
-                } finally {
-                    context.$qrl$ = prevQrl, context.$event$ = prevEvent;
-                }
-            }));
-        }
         const createOrReuseInvocationContext = invoke => null == invoke ? newInvokeContext() : isArray(invoke) ? newInvokeContextFromTuple(invoke) : invoke;
         const resolvedSymbol = refSymbol ?? symbol;
         const hash = getSymbolHash(resolvedSymbol);
@@ -4698,7 +4715,7 @@
             $symbol$: symbol,
             $refSymbol$: refSymbol,
             $hash$: hash,
-            getFn: invokeFn,
+            getFn: bindFnToContext,
             $capture$: capture,
             $captureRef$: captureRef,
             dev: null,
@@ -5059,7 +5076,7 @@
         }
         return target;
     }, exports._serialize = async function(data) {
-        const serializationContext = createSerializationContext(null, (() => ""), (() => ""), (() => {}), new WeakMap);
+        const serializationContext = createSerializationContext(null, null, (() => ""), (() => ""), (() => {}), new WeakMap);
         for (const root of data) {
             serializationContext.$addRoot$(root);
         }

package/dist/core.prod.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.1-dev+10f5414
+ * @qwik.dev/core 2.0.0-alpha.3-dev+418fd6d
  * 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
@@ -736,10 +736,10 @@ function clearEffects(subscriber, value) {
     return subscriptionRemoved;
 }
 
-const DEBUG = !1;
-
 const NEEDS_COMPUTATION = Symbol("invalid");
 
+const DEBUG = !1;
+
 const log = (...args) => console.log("SIGNAL", ...args.map(qwikDebugToString));
 
 const throwIfQRLNotResolved = qrl => {
@@ -1232,7 +1232,17 @@ class StoreHandler {
         !0);
     }
     has(target, prop) {
-        return prop === STORE_TARGET || Object.prototype.hasOwnProperty.call(target, prop);
+        if (prop === STORE_TARGET) {
+            return !0;
+        }
+        if ("string" == typeof prop) {
+            const ctx = tryGetInvokeContext();
+            if (ctx) {
+                const effectSubscriber = ctx.$effectSubscriber$;
+                effectSubscriber && addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
+            }
+        }
+        return Object.prototype.hasOwnProperty.call(target, prop);
     }
     ownKeys(target) {
         const ctx = tryGetInvokeContext();
@@ -2015,21 +2025,22 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 shouldRender = shouldRender || propsDiffer(jsxProps, vNodeProps), shouldRender && (host[VNodeProps.flags] &= ~VNodeFlags.Deleted, 
                 container.$scheduler$(ChoreType.COMPONENT, host, componentQRL, jsxProps));
             }
-            null != jsxNode.children && function(children, host) {
-                if (Array.isArray(children) || (children = [ children ]), children.length) {
-                    const createProjectionJSXNode = slotName => new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
-                    const projections = [];
-                    if (host) {
-                        for (let i = vnode_getPropStartIndex(host); i < host.length; i += 2) {
-                            const prop = host[i];
-                            if (isSlotProp(prop)) {
-                                const slotName = prop;
-                                projections.push(slotName), projections.push(createProjectionJSXNode(slotName));
-                            }
+            !function(children, host) {
+                const projectionChildren = Array.isArray(children) ? children : [ children ];
+                const createProjectionJSXNode = slotName => new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
+                const projections = [];
+                if (host) {
+                    for (let i = vnode_getPropStartIndex(host); i < host.length; i += 2) {
+                        const prop = host[i];
+                        if (isSlotProp(prop)) {
+                            const slotName = prop;
+                            projections.push(slotName), projections.push(createProjectionJSXNode(slotName));
                         }
                     }
-                    for (let i = 0; i < children.length; i++) {
-                        const child = children[i];
+                }
+                if (0 !== projections.length || null != children) {
+                    for (let i = 0; i < projectionChildren.length; i++) {
+                        const child = projectionChildren[i];
                         const slotName = String(isJSXNode(child) && directGetPropsProxyProp(child, QSlot) || "");
                         const idx = mapApp_findIndx(projections, slotName, 0);
                         let jsxBucket;
@@ -2289,7 +2300,13 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
 
           case ChoreType.COMPONENT:
           case ChoreType.COMPONENT_SSR:
-            returnValue = safeCall((() => executeComponent(container, host, host, chore.$target$, chore.$payload$)), (jsx => chore.$type$ === ChoreType.COMPONENT ? maybeThen(container.processJsx(host, jsx), (() => jsx)) : jsx), (err => container.handleError(err, host)));
+            returnValue = safeCall((() => executeComponent(container, host, host, chore.$target$, chore.$payload$)), (jsx => {
+                if (chore.$type$ === ChoreType.COMPONENT) {
+                    const styleScopedId = container.getHostProp(host, "q:sstyle");
+                    return vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId));
+                }
+                return jsx;
+            }), (err => container.handleError(err, host)));
             break;
 
           case ChoreType.RESOURCE:
@@ -2360,7 +2377,7 @@ function choreComparator(a, b, shouldThrowOnHostMismatch) {
         const bHost = b.$host$;
         if (aHost !== bHost && null !== aHost && null !== bHost) {
             if (!vnode_isVNode(aHost) || !vnode_isVNode(bHost)) {
-                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.\n          You are attempting to change a state that has already been streamed to the client.\n          This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).\n          Problematic Node: ${aHost.toString()}`;
                 return shouldThrowOnHostMismatch && throwErrorAndStop(errorMessage), logWarn(errorMessage), 
                 null;
             }
@@ -2413,7 +2430,7 @@ function sortedInsert(sortedArray, value) {
     return choreUpdate(existing, value), existing;
 }
 
-const version = "2.0.0-alpha.1-dev+10f5414";
+const version = "2.0.0-alpha.3-dev+418fd6d";
 
 class _SharedContainer {
     $version$;
@@ -2433,8 +2450,8 @@ class _SharedContainer {
     trackSignalValue(signal, subscriber, property, data) {
         return trackSignal((() => signal.value), subscriber, property, this, data);
     }
-    serializationCtxFactory(NodeConstructor, symbolToChunkResolver, writer, prepVNodeData) {
-        return createSerializationContext(NodeConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
+    serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
+        return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
     }
 }
 
@@ -2744,10 +2761,6 @@ class DomContainer extends _SharedContainer {
     parseQRL(qrl) {
         return inflateQRL(this, parseQRL(qrl));
     }
-    processJsx(host, jsx) {
-        const styleScopedId = this.getHostProp(host, "q:sstyle");
-        return vnode_diff(this, jsx, host, addComponentStylePrefix(styleScopedId));
-    }
     handleError(err, host) {
         const errorStore = this.resolveContext(host, ERROR_CONTEXT);
         if (!errorStore) {
@@ -4554,7 +4567,10 @@ const inflate = (container, target, typeId, data) => {
                 const valType = data[i + 2];
                 const valData = data[i + 3];
                 valType === TypeIds.RootRef || valType >= TypeIds.Error ? Object.defineProperty(target, key, {
-                    get: () => deserializeData(container, valType, valData),
+                    get() {
+                        const value = deserializeData(container, valType, valData);
+                        return target[key] = value, value;
+                    },
                     set(value) {
                         Object.defineProperty(target, key, {
                             value,
@@ -4860,14 +4876,9 @@ function inflateQRL(container, qrl) {
     container.element && qrl.$setContainer$(container.element), qrl;
 }
 
-class DomVRef {
-    id;
-    constructor(id) {
-        this.id = id;
-    }
-}
+let isDomRef = () => !1;
 
-const createSerializationContext = (NodeConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
+const createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
     if (!writer) {
         const buffer = [];
         writer = {
@@ -4887,11 +4898,13 @@ const createSerializationContext = (NodeConstructor, symbolToChunkResolver, getP
         roots.push(obj)), id;
     };
     const isSsrNode = NodeConstructor ? obj => obj instanceof NodeConstructor : () => !1;
-    return {
+    return isDomRef = DomRefConstructor ? obj => obj instanceof DomRefConstructor : () => !1, 
+    {
         $serialize$() {
             serialize(this);
         },
         $isSsrNode$: isSsrNode,
+        $isDomRef$: isDomRef,
         $symbolToChunkResolver$: symbolToChunkResolver,
         $wasSeen$,
         $roots$: roots,
@@ -4960,6 +4973,8 @@ const createSerializationContext = (NodeConstructor, symbolToChunkResolver, getP
                     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.$ssrNode$.id);
                 } else if (isJSXNode(obj)) {
                     discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
                 } else if (Array.isArray(obj)) {
@@ -5014,7 +5029,7 @@ const createSerializationContext = (NodeConstructor, symbolToChunkResolver, getP
 const promiseResults = new WeakMap;
 
 function serialize(serializationContext) {
-    const {$writer$, $isSsrNode$, $setProp$, $storeProxyMap$} = serializationContext;
+    const {$writer$, $isSsrNode$, $isDomRef$, $setProp$, $storeProxyMap$} = serializationContext;
     let depth = -1;
     let writeType = !1;
     const output = (type, value) => {
@@ -5130,12 +5145,11 @@ function serialize(serializationContext) {
                 }
                 output(TypeIds.Object, out);
             }
-        } else if (value instanceof DomVRef) {
-            output(TypeIds.RefVNode, value.id);
+        } else if ($isDomRef$(value)) {
+            value.$ssrNode$.vnodeData[0] |= VNodeDataFlag.SERIALIZE, output(TypeIds.RefVNode, value.$ssrNode$.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)), 
-            value instanceof WrappedSignal) {
+            const v = value instanceof ComputedSignal && (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
+            if (value instanceof WrappedSignal) {
                 output(TypeIds.WrappedSignal, [ ...serializeWrappingFn(serializationContext, value), value.$effectDependencies$, v, ...value.$effects$ || [] ]);
             } else if (value instanceof ComputedSignal) {
                 const out = [ value.$computeQrl$, value.$effects$ ];
@@ -5251,7 +5265,7 @@ function qrlToString(serializationContext, value) {
 }
 
 async function _serialize(data) {
-    const serializationContext = createSerializationContext(null, (() => ""), (() => ""), (() => {}), new WeakMap);
+    const serializationContext = createSerializationContext(null, null, (() => ""), (() => ""), (() => {}), new WeakMap);
     for (const root of data) {
         serializationContext.$addRoot$(root);
     }
@@ -5378,6 +5392,9 @@ const canSerialize = value => {
         if (value instanceof Uint8Array) {
             return !0;
         }
+        if (isDomRef?.(value)) {
+            return !0;
+        }
     } else if ("function" == typeof value && (isQrl(value) || isQwikComponent(value))) {
         return !0;
     }
@@ -5501,10 +5518,30 @@ const isSyncQrl = value => isQrl(value) && "<sync>" == value.$symbol$;
 const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSymbol) => {
     let _containerEl;
     const qrl = async function(...args) {
-        const fn = invokeFn.call(this, tryGetInvokeContext());
-        return await fn(...args);
+        const boundedFn = bindFnToContext.call(this, tryGetInvokeContext());
+        return await boundedFn(...args);
     };
     const setContainer = el => (_containerEl || (_containerEl = el), _containerEl);
+    function bindFnToContext(currentCtx, beforeFn) {
+        return (...args) => maybeThen(resolveLazy(), (fn => {
+            if (!isFunction(fn)) {
+                throw qError(10);
+            }
+            if (beforeFn && !1 === beforeFn()) {
+                return;
+            }
+            const context = createOrReuseInvocationContext(currentCtx);
+            const prevQrl = context.$qrl$;
+            const prevEvent = context.$event$;
+            context.$qrl$ = qrl, context.$event$ ||= this;
+            try {
+                return invoke.call(this, context, fn, ...args);
+            } finally {
+                context.$qrl$ = prevQrl, context.$event$ = prevEvent;
+            }
+        }));
+    }
+    const resolveLazy = containerEl => null !== symbolRef ? symbolRef : resolve(containerEl);
     const wrapFn = fn => "function" != typeof fn || !capture?.length && !captureRef?.length ? fn : function(...args) {
         let context = tryGetInvokeContext();
         return context ? fn.apply(this, args) : (context = newInvokeContext(), context.$qrl$ = qrl, 
@@ -5532,26 +5569,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
             throw console.error(`qrl ${symbol} failed to load`, err), symbolRef = null, err;
         })), symbolRef;
     };
-    const resolveLazy = containerEl => null !== symbolRef ? symbolRef : resolve(containerEl);
-    function invokeFn(currentCtx, beforeFn) {
-        return (...args) => maybeThen(resolveLazy(), (f => {
-            if (!isFunction(f)) {
-                throw qError(10);
-            }
-            if (beforeFn && !1 === beforeFn()) {
-                return;
-            }
-            const context = createOrReuseInvocationContext(currentCtx);
-            const prevQrl = context.$qrl$;
-            const prevEvent = context.$event$;
-            context.$qrl$ = qrl, context.$event$ ||= this;
-            try {
-                return invoke.call(this, context, f, ...args);
-            } finally {
-                context.$qrl$ = prevQrl, context.$event$ = prevEvent;
-            }
-        }));
-    }
     const createOrReuseInvocationContext = invoke => null == invoke ? newInvokeContext() : isArray(invoke) ? newInvokeContextFromTuple(invoke) : invoke;
     const resolvedSymbol = refSymbol ?? symbol;
     const hash = getSymbolHash(resolvedSymbol);
@@ -5566,7 +5583,7 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         $symbol$: symbol,
         $refSymbol$: refSymbol,
         $hash$: hash,
-        getFn: invokeFn,
+        getFn: bindFnToContext,
         $capture$: capture,
         $captureRef$: captureRef,
         dev: null,

package/dist/insights/index.qwik.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const core = require("@qwik.dev/core");
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.1-dev+10f5414
+ * @qwik.dev/core 2.0.0-alpha.3-dev+418fd6d
  * 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

package/dist/insights/index.qwik.mjs

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { sync$, component$ } from "@qwik.dev/core";
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.1-dev+10f5414
+ * @qwik.dev/core 2.0.0-alpha.3-dev+418fd6d
  * 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