@qwik.dev/core 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/core.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.4-dev+374e0d6
+ * @qwik.dev/core 2.0.0-alpha.6-dev+d848ba5
  * 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
@@ -152,7 +152,7 @@
                 'SsrError(tag): {{0}}', // 29
                 'QRLs can not be resolved because it does not have an attached container. This means that the QRL does not know where it belongs inside the DOM, so it cant dynamically import() from a relative path.', // 30
                 'QRLs can not be dynamically resolved, because it does not have a chunk path', // 31
-                'The JSX ref attribute must be a Signal', // 32
+                '{{0}}\nThe JSX ref attribute must be a Signal', // 32
                 'Serialization Error: Deserialization of data type {{0}} is not implemented', // 33
                 'Serialization Error: Expected vnode for ref prop, but got {{0}}', // 34
                 'Serialization Error: Cannot allocate data type {{0}}', // 35
@@ -160,12 +160,11 @@
                 'Serialization Error: Serialization of data type {{0}} is not implemented', // 37
                 'Serialization Error: Unvisited {{0}}', // 38
                 'Serialization Error: Missing QRL chunk for {{0}}', // 39
-                'The value of the textarea must be a string', // 40
+                '{{0}}\nThe value of the textarea must be a string found {{1}}', // 40
                 'Unable to find q:container', // 41
                 "Element must have 'q:container' attribute.", // 42
                 'Unknown vnode type {{0}}.', // 43
                 'Materialize error: missing element: {{0}} {{1}} {{2}}', // 44
-                'SsrError: {{0}}', // 45
                 'Cannot coerce a Signal, use `.value` instead', // 46
                 'useComputedSignal$ QRL {{0}} {{1}} returned a Promise', // 47
                 'ComputedSignal is read-only', // 48
@@ -237,19 +236,130 @@
         QError[QError["elementWithoutContainer"] = 42] = "elementWithoutContainer";
         QError[QError["invalidVNodeType"] = 43] = "invalidVNodeType";
         QError[QError["materializeVNodeDataError"] = 44] = "materializeVNodeDataError";
-        QError[QError["serverHostMismatch"] = 45] = "serverHostMismatch";
-        QError[QError["cannotCoerceSignal"] = 46] = "cannotCoerceSignal";
-        QError[QError["computedNotSync"] = 47] = "computedNotSync";
-        QError[QError["computedReadOnly"] = 48] = "computedReadOnly";
-        QError[QError["wrappedReadOnly"] = 49] = "wrappedReadOnly";
-        QError[QError["promisesNotExpected"] = 50] = "promisesNotExpected";
-        QError[QError["unsafeAttr"] = 51] = "unsafeAttr";
+        QError[QError["cannotCoerceSignal"] = 45] = "cannotCoerceSignal";
+        QError[QError["computedNotSync"] = 46] = "computedNotSync";
+        QError[QError["computedReadOnly"] = 47] = "computedReadOnly";
+        QError[QError["wrappedReadOnly"] = 48] = "wrappedReadOnly";
+        QError[QError["promisesNotExpected"] = 49] = "promisesNotExpected";
+        QError[QError["unsafeAttr"] = 50] = "unsafeAttr";
     })(QError || (QError = {}));
     const qError = (code, errorMessageArgs = []) => {
         const text = codeToText(code, ...errorMessageArgs);
         return logErrorAndStop(text, ...errorMessageArgs);
     };
 
+    /**
+     * A friendly name tag for a VirtualVNode.
+     *
+     * Theses are used to give a name to a VirtualVNode. This is useful for debugging and testing.
+     *
+     * The name is only added in development mode and is not included in production builds.
+     */
+    const DEBUG_TYPE = 'q:type';
+    var VirtualType;
+    (function (VirtualType) {
+        VirtualType["Virtual"] = "V";
+        VirtualType["Fragment"] = "F";
+        VirtualType["WrappedSignal"] = "S";
+        VirtualType["Awaited"] = "A";
+        VirtualType["Component"] = "C";
+        VirtualType["InlineComponent"] = "I";
+        VirtualType["Projection"] = "P";
+    })(VirtualType || (VirtualType = {}));
+    const START = '\x1b[34m';
+    const END = '\x1b[0m';
+    const VirtualTypeName = {
+        [VirtualType.Virtual]: /* ********* */ START + 'Virtual' + END, //
+        [VirtualType.Fragment]: /* ******** */ START + 'Fragment' + END, //
+        [VirtualType.WrappedSignal]: /* *** */ START + 'Signal' + END, //
+        [VirtualType.Awaited]: /* ********* */ START + 'Awaited' + END, //
+        [VirtualType.Component]: /* ******* */ START + 'Component' + END, //
+        [VirtualType.InlineComponent]: /* * */ START + 'InlineComponent' + END, //
+        [VirtualType.Projection]: /* ****** */ START + 'Projection' + END, //
+    };
+    var QContainerValue;
+    (function (QContainerValue) {
+        QContainerValue["PAUSED"] = "paused";
+        QContainerValue["RESUMED"] = "resumed";
+        // these values below are used in the qwik loader as a plain text for the q:container selector
+        // standard dangerouslySetInnerHTML
+        QContainerValue["HTML"] = "html";
+        // textarea
+        QContainerValue["TEXT"] = "text";
+    })(QContainerValue || (QContainerValue = {}));
+
+    /** State factory of the component. */
+    const OnRenderProp = 'q:renderFn';
+    /** Component style content prefix */
+    const ComponentStylesPrefixContent = '⭐️';
+    /** `<some-element q:slot="...">` */
+    const QSlot = 'q:slot';
+    const QSlotParent = ':';
+    const QSlotRef = 'q:sref';
+    const QSlotS = 'q:s';
+    const QStyle = 'q:style';
+    const QStyleSelector = 'style[q\\:style]';
+    const QStyleSSelector = 'style[q\\:sstyle]';
+    const QStylesAllSelector = QStyleSelector + ',' + QStyleSSelector;
+    const QScopedStyle = 'q:sstyle';
+    const QCtxAttr = 'q:ctx';
+    const QSubscribers = 'q:subs';
+    const QFuncsPrefix = 'qFuncs_';
+    const getQFuncs = (document, hash) => {
+        return document[QFuncsPrefix + hash] || [];
+    };
+    const QBaseAttr = 'q:base';
+    const QLocaleAttr = 'q:locale';
+    const QManifestHashAttr = 'q:manifest-hash';
+    const QInstanceAttr = 'q:instance';
+    const QContainerIsland = 'q:container-island';
+    const QContainerIslandEnd = '/' + QContainerIsland;
+    const QIgnore = 'q:ignore';
+    const QIgnoreEnd = '/' + QIgnore;
+    const QContainerAttr = 'q:container';
+    const QContainerAttrEnd = '/' + QContainerAttr;
+    const QTemplate = 'q:template';
+    // the same selector should be inside the qwik loader
+    // and the same selector should be inside the qwik router spa-shim and spa-init
+    const QContainerSelector = '[q\\:container]:not([q\\:container=' +
+        QContainerValue.HTML +
+        ']):not([q\\:container=' +
+        QContainerValue.TEXT +
+        '])';
+    const HTML_NS = 'http://www.w3.org/1999/xhtml';
+    const SVG_NS = 'http://www.w3.org/2000/svg';
+    const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
+    const ResourceEvent = 'qResource';
+    const RenderEvent = 'qRender';
+    const TaskEvent = 'qTask';
+    const QDefaultSlot = '';
+    /**
+     * Attribute to mark that this VNode has a pointer to itself from the `qwik/json` state.
+     *
+     * As the VNode get materialized the vnode now becomes eligible for mutation. Once the vnode mutates
+     * the `VNode` references from the `qwik/json` may become invalid. For this reason, these references
+     * need to be eagerly resolved. `VNODE_REF` stores a pointer to "this" vnode. This allows the system
+     * to eagerly resolve these pointes as the vnodes are materialized.
+     */
+    const ELEMENT_ID = 'q:id';
+    const ELEMENT_KEY = 'q:key';
+    const ELEMENT_PROPS = 'q:props';
+    const ELEMENT_SEQ = 'q:seq';
+    const ELEMENT_SEQ_IDX = 'q:seqIdx';
+    const Q_PREFIX = 'q:';
+    /** Non serializable markers - always begins with `:` character */
+    const NON_SERIALIZABLE_MARKER_PREFIX = ':';
+    const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
+    const USE_ON_LOCAL_SEQ_IDX = NON_SERIALIZABLE_MARKER_PREFIX + 'onIdx';
+    const USE_ON_LOCAL_FLAGS = NON_SERIALIZABLE_MARKER_PREFIX + 'onFlags';
+    // comment nodes
+    const FLUSH_COMMENT = 'qkssr-f';
+    const STREAM_BLOCK_START_COMMENT = 'qkssr-pu';
+    const STREAM_BLOCK_END_COMMENT = 'qkssr-po';
+    const Q_PROPS_SEPARATOR = ':';
+    const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
+    const qwikInspectorAttr = 'data-qwik-inspector';
+
     // keep this import from core/build so the cjs build works
     const createPlatform = () => {
         return {
@@ -310,7 +420,7 @@
      */
     const toUrl = (doc, containerEl, url) => {
         const baseURI = doc.baseURI;
-        const base = new URL(containerEl.getAttribute('q:base') ?? baseURI, baseURI);
+        const base = new URL(containerEl.getAttribute(QBaseAttr) ?? baseURI, baseURI);
         return new URL(url, base);
     };
     let _platform = /*#__PURE__ */ createPlatform();
@@ -402,15 +512,24 @@
             setTimeout(resolve, timeout);
         });
     };
+    // Retries a function that throws a promise.
     function retryOnPromise(fn, retryCount = 0) {
-        try {
-            return fn();
-        }
-        catch (e) {
+        const retryOrThrow = (e) => {
             if (isPromise(e) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
                 return e.then(retryOnPromise.bind(null, fn, retryCount++));
             }
             throw e;
+        };
+        try {
+            const result = fn();
+            if (isPromise(result)) {
+                // not awaited promise is not caught by try/catch block
+                return result.catch((e) => retryOrThrow(e));
+            }
+            return result;
+        }
+        catch (e) {
+            return retryOrThrow(e);
         }
     }
 
@@ -453,118 +572,6 @@
         VNodeDataFlag[VNodeDataFlag["SERIALIZE"] = 16] = "SERIALIZE";
     })(VNodeDataFlag || (VNodeDataFlag = {}));
 
-    /**
-     * A friendly name tag for a VirtualVNode.
-     *
-     * Theses are used to give a name to a VirtualVNode. This is useful for debugging and testing.
-     *
-     * The name is only added in development mode and is not included in production builds.
-     */
-    const DEBUG_TYPE = 'q:type';
-    var VirtualType;
-    (function (VirtualType) {
-        VirtualType["Virtual"] = "V";
-        VirtualType["Fragment"] = "F";
-        VirtualType["WrappedSignal"] = "S";
-        VirtualType["Awaited"] = "A";
-        VirtualType["Component"] = "C";
-        VirtualType["InlineComponent"] = "I";
-        VirtualType["Projection"] = "P";
-    })(VirtualType || (VirtualType = {}));
-    const START = '\x1b[34m';
-    const END = '\x1b[0m';
-    const VirtualTypeName = {
-        [VirtualType.Virtual]: /* ********* */ START + 'Virtual' + END, //
-        [VirtualType.Fragment]: /* ******** */ START + 'Fragment' + END, //
-        [VirtualType.WrappedSignal]: /* *** */ START + 'Signal' + END, //
-        [VirtualType.Awaited]: /* ********* */ START + 'Awaited' + END, //
-        [VirtualType.Component]: /* ******* */ START + 'Component' + END, //
-        [VirtualType.InlineComponent]: /* * */ START + 'InlineComponent' + END, //
-        [VirtualType.Projection]: /* ****** */ START + 'Projection' + END, //
-    };
-    var QContainerValue;
-    (function (QContainerValue) {
-        QContainerValue["PAUSED"] = "paused";
-        QContainerValue["RESUMED"] = "resumed";
-        // these values below are used in the qwik loader as a plain text for the q:container selector
-        // standard dangerouslySetInnerHTML
-        QContainerValue["HTML"] = "html";
-        // textarea
-        QContainerValue["TEXT"] = "text";
-    })(QContainerValue || (QContainerValue = {}));
-
-    /** State factory of the component. */
-    const OnRenderProp = 'q:renderFn';
-    /** Component style content prefix */
-    const ComponentStylesPrefixContent = '⭐️';
-    /** `<some-element q:slot="...">` */
-    const QSlot = 'q:slot';
-    const QSlotParent = ':';
-    const QSlotRef = 'q:sref';
-    const QSlotS = 'q:s';
-    const QStyle = 'q:style';
-    const QStyleSelector = 'style[q\\:style]';
-    const QStyleSSelector = 'style[q\\:sstyle]';
-    const QStylesAllSelector = QStyleSelector + ',' + QStyleSSelector;
-    const QScopedStyle = 'q:sstyle';
-    const QCtxAttr = 'q:ctx';
-    const QSubscribers = 'q:subs';
-    const QFuncsPrefix = 'qFuncs_';
-    const getQFuncs = (document, hash) => {
-        return document[QFuncsPrefix + hash] || [];
-    };
-    const QBaseAttr = 'q:base';
-    const QLocaleAttr = 'q:locale';
-    const QManifestHashAttr = 'q:manifest-hash';
-    const QInstanceAttr = 'q:instance';
-    const QContainerIsland = 'q:container-island';
-    const QContainerIslandEnd = '/' + QContainerIsland;
-    const QIgnore = 'q:ignore';
-    const QIgnoreEnd = '/' + QIgnore;
-    const QContainerAttr = 'q:container';
-    const QContainerAttrEnd = '/' + QContainerAttr;
-    const QTemplate = 'q:template';
-    // the same selector should be inside the qwik loader
-    // and the same selector should be inside the qwik router spa-shim and spa-init
-    const QContainerSelector = '[q\\:container]:not([q\\:container=' +
-        QContainerValue.HTML +
-        ']):not([q\\:container=' +
-        QContainerValue.TEXT +
-        '])';
-    const HTML_NS = 'http://www.w3.org/1999/xhtml';
-    const SVG_NS = 'http://www.w3.org/2000/svg';
-    const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
-    const ResourceEvent = 'qResource';
-    const RenderEvent = 'qRender';
-    const TaskEvent = 'qTask';
-    const QDefaultSlot = '';
-    /**
-     * Attribute to mark that this VNode has a pointer to itself from the `qwik/json` state.
-     *
-     * As the VNode get materialized the vnode now becomes eligible for mutation. Once the vnode mutates
-     * the `VNode` references from the `qwik/json` may become invalid. For this reason, these references
-     * need to be eagerly resolved. `VNODE_REF` stores a pointer to "this" vnode. This allows the system
-     * to eagerly resolve these pointes as the vnodes are materialized.
-     */
-    const ELEMENT_ID = 'q:id';
-    const ELEMENT_KEY = 'q:key';
-    const ELEMENT_PROPS = 'q:props';
-    const ELEMENT_SEQ = 'q:seq';
-    const ELEMENT_SEQ_IDX = 'q:seqIdx';
-    const Q_PREFIX = 'q:';
-    /** Non serializable markers - always begins with `:` character */
-    const NON_SERIALIZABLE_MARKER_PREFIX = ':';
-    const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
-    const USE_ON_LOCAL_SEQ_IDX = NON_SERIALIZABLE_MARKER_PREFIX + 'onIdx';
-    const USE_ON_LOCAL_FLAGS = NON_SERIALIZABLE_MARKER_PREFIX + 'onFlags';
-    // comment nodes
-    const FLUSH_COMMENT = 'qkssr-f';
-    const STREAM_BLOCK_START_COMMENT = 'qkssr-pu';
-    const STREAM_BLOCK_END_COMMENT = 'qkssr-po';
-    const Q_PROPS_SEPARATOR = ':';
-    const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
-    const qwikInspectorAttr = 'data-qwik-inspector';
-
     let _locale = undefined;
     /**
      * Retrieve the current locale.
@@ -1138,7 +1145,6 @@
         }
         /** In the case of oldValue and value are the same, the effects are not triggered. */
         set(target, prop, value) {
-            target = unwrapDeserializerProxy(target);
             if (typeof prop === 'symbol') {
                 target[prop] = value;
                 return true;
@@ -1207,6 +1213,8 @@
         // to unsubscribe from. So we need to store the reference from the effect back
         // to this signal.
         ensureContains(effectSubscriber, target);
+        // We need to add the subscriber to the effect so that we can clean it up later
+        ensureEffectContainsSubscriber(effectSubscriber[EffectSubscriptionsProp.EFFECT], target, store.$container$);
     }
     function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
         target[prop] = value;
@@ -1277,32 +1285,40 @@
         }
         for (let i = effects.length - 1; i >= 0; i--) {
             const subscriber = effects[i];
-            const subscriptionRemoved = clearEffects(subscriber, value);
-            if (subscriptionRemoved) {
-                effects.splice(i, 1);
-            }
+            clearEffects(subscriber, value, effects, i, container);
+        }
+        if (effects.length === 0) {
+            vnode_setProp(value, QSubscribers, null);
         }
     }
-    function clearSubscriberEffectDependencies(value) {
+    function clearSubscriberEffectDependencies(container, value) {
         if (value.$effectDependencies$) {
             for (let i = value.$effectDependencies$.length - 1; i >= 0; i--) {
                 const subscriber = value.$effectDependencies$[i];
-                const subscriptionRemoved = clearEffects(subscriber, value);
-                if (subscriptionRemoved) {
-                    value.$effectDependencies$.splice(i, 1);
-                }
+                clearEffects(subscriber, value, value.$effectDependencies$, i, container);
+            }
+            if (value.$effectDependencies$.length === 0) {
+                value.$effectDependencies$ = null;
             }
         }
     }
-    function clearEffects(subscriber, value) {
-        if (!isSignal(subscriber)) {
-            return false;
+    function clearEffects(subscriber, value, effectArray, indexToRemove, container) {
+        let subscriptionRemoved = false;
+        const seenSet = new Set();
+        if (subscriber instanceof WrappedSignal) {
+            subscriptionRemoved = clearSignalEffects(subscriber, value, seenSet);
         }
-        const effectSubscriptions = subscriber.$effects$;
-        const hostElement = subscriber.$hostElement$;
-        if (hostElement && hostElement === value) {
-            subscriber.$hostElement$ = null;
+        else if (container.$storeProxyMap$.has(subscriber)) {
+            const store = container.$storeProxyMap$.get(subscriber);
+            const handler = getStoreHandler(store);
+            subscriptionRemoved = clearStoreEffects(handler, value);
         }
+        if (subscriptionRemoved) {
+            effectArray.splice(indexToRemove, 1);
+        }
+    }
+    function clearSignalEffects(subscriber, value, seenSet) {
+        const effectSubscriptions = subscriber.$effects$;
         let subscriptionRemoved = false;
         if (effectSubscriptions) {
             for (let i = effectSubscriptions.length - 1; i >= 0; i--) {
@@ -1313,15 +1329,84 @@
                 }
             }
         }
-        // clear the effects of the arguments
-        const args = subscriber.$args$;
-        if (args) {
-            for (let i = args.length - 1; i >= 0; i--) {
-                clearEffects(args[i], subscriber);
+        if (subscriber instanceof WrappedSignal) {
+            const hostElement = subscriber.$hostElement$;
+            if (hostElement && hostElement === value) {
+                subscriber.$hostElement$ = null;
+            }
+            // clear the effects of the arguments
+            const args = subscriber.$args$;
+            if (args) {
+                clearArgsEffects(args, subscriber, seenSet);
             }
         }
         return subscriptionRemoved;
     }
+    function clearStoreEffects(storeHandler, value) {
+        const effectSubscriptions = storeHandler.$effects$;
+        if (!effectSubscriptions) {
+            return false;
+        }
+        let subscriptionRemoved = false;
+        for (const key in effectSubscriptions) {
+            const effects = effectSubscriptions[key];
+            for (let i = effects.length - 1; i >= 0; i--) {
+                const effect = effects[i];
+                if (effect[EffectSubscriptionsProp.EFFECT] === value) {
+                    effects.splice(i, 1);
+                    subscriptionRemoved = true;
+                }
+            }
+            if (effects.length === 0) {
+                delete effectSubscriptions[key];
+            }
+        }
+        return subscriptionRemoved;
+    }
+    function clearArgsEffects(args, subscriber, seenSet) {
+        for (let i = args.length - 1; i >= 0; i--) {
+            const arg = args[i];
+            clearArgEffect(arg, subscriber, seenSet);
+        }
+    }
+    function clearArgEffect(arg, subscriber, seenSet) {
+        if (seenSet.has(arg)) {
+            return;
+        }
+        seenSet.add(arg);
+        if (isSignal(arg)) {
+            clearSignalEffects(arg, subscriber, seenSet);
+        }
+        else if (typeof arg === 'object' && arg !== null) {
+            if (isStore(arg)) {
+                clearStoreEffects(getStoreHandler(arg), subscriber);
+            }
+            else if (isPropsProxy(arg)) {
+                // Separate check for props proxy, because props proxy getter could call signal getter.
+                // To avoid that we need to get the constProps and varProps directly
+                // from the props proxy object and loop over them.
+                const constProps = arg[_CONST_PROPS];
+                const varProps = arg[_VAR_PROPS];
+                if (constProps) {
+                    for (const key in constProps) {
+                        clearArgEffect(constProps[key], subscriber, seenSet);
+                    }
+                }
+                for (const key in varProps) {
+                    clearArgEffect(varProps[key], subscriber, seenSet);
+                }
+            }
+            else {
+                for (const key in arg) {
+                    clearArgEffect(arg[key], subscriber, seenSet);
+                }
+            }
+        }
+        else if (Array.isArray(arg)) {
+            clearArgsEffects(arg, subscriber, seenSet);
+        }
+        else ;
+    }
 
     /** @internal */
     const useResourceQrl = (qrl, opts) => {
@@ -1408,14 +1493,17 @@
                 // create a subscription for the resource._state changes
                 const state = resource._state;
                 if (state === 'pending' && props.onPending) {
-                    return Promise.resolve(props.onPending());
+                    return Promise.resolve().then(useBindInvokeContext(props.onPending));
                 }
                 else if (state === 'rejected' && props.onRejected) {
-                    return Promise.resolve(resource._error).then(props.onRejected);
+                    return Promise.resolve(resource._error).then(useBindInvokeContext(props.onRejected));
                 }
                 else {
-                    // resolved, pending without onPending prop or rejected with onRejected prop
-                    return Promise.resolve(untrack(() => resource._resolved)).then(props.onResolved);
+                    const resolvedValue = untrack(() => resource._resolved);
+                    if (resolvedValue !== undefined) {
+                        // resolved, pending without onPending prop or rejected without onRejected prop
+                        return Promise.resolve(resolvedValue).then(useBindInvokeContext(props.onResolved));
+                    }
                 }
             }
             return resource.value.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
@@ -1456,7 +1544,7 @@
         cleanupTask(task);
         const iCtx = newInvokeContext(container.$locale$, host, undefined, ResourceEvent);
         iCtx.$container$ = container;
-        const taskFn = task.$qrl$.getFn(iCtx, () => clearSubscriberEffectDependencies(task));
+        const taskFn = task.$qrl$.getFn(iCtx, () => clearSubscriberEffectDependencies(container, task));
         const resource = task.$state$;
         assertDefined(resource, 'useResource: when running a resource, "task.resource" must be a defined.', task);
         const track = (obj, prop) => {
@@ -2257,6 +2345,17 @@
         }
     }
 
+    function getFileLocationFromJsx(jsxDev) {
+        if (!jsxDev) {
+            return null;
+        }
+        const sanitizedFileName = jsxDev.fileName?.replace(/\\/g, '/');
+        if (sanitizedFileName) {
+            return `${sanitizedFileName}:${jsxDev.lineNumber}:${jsxDev.columnNumber}`;
+        }
+        return null;
+    }
+
     const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         let journal = container.$journal$;
         /**
@@ -2700,7 +2799,7 @@
          *
          * @returns {boolean}
          */
-        function createNewElement(jsx, elementName) {
+        function createNewElement(jsx, elementName, currentFile) {
             const element = createElementWithNamespace(elementName);
             const { constProps } = jsx;
             let needsQDispatchEventPatch = false;
@@ -2731,6 +2830,9 @@
                             value(element);
                             continue;
                         }
+                        else {
+                            throw qError(QError.invalidRefValue, [currentFile]);
+                        }
                     }
                     if (isSignal(value)) {
                         const signalData = new EffectPropData({
@@ -2745,13 +2847,13 @@
                         continue;
                     }
                     if (elementName === 'textarea' && key === 'value') {
-                        if (typeof value !== 'string') {
+                        if (value && typeof value !== 'string') {
                             if (build.isDev) {
-                                throw qError(QError.wrongTextareaValue);
+                                throw qError(QError.wrongTextareaValue, [currentFile, value]);
                             }
                             continue;
                         }
-                        element.value = escapeHTML(value);
+                        element.value = escapeHTML(value || '');
                         continue;
                     }
                     value = serializeAttribute(key, value, scopedStyleIdPrefix);
@@ -2785,6 +2887,7 @@
             const isSameElementName = vCurrent && vnode_isElementVNode(vCurrent) && elementName === vnode_getElementName(vCurrent);
             const jsxKey = jsx.key;
             let needsQDispatchEventPatch = false;
+            const currentFile = getFileLocationFromJsx(jsx.dev);
             if (!isSameElementName || jsxKey !== getKey(vCurrent)) {
                 // So we have a key and it does not match the current node.
                 // We need to do a forward search to find it.
@@ -2797,14 +2900,21 @@
                 else {
                     // Existing keyed node
                     vnode_insertBefore(journal, vParent, vNewNode, vCurrent);
+                    // We are here, so jsx is different from the vCurrent, so now we want to point to the moved node.
+                    vCurrent = vNewNode;
+                    // We need to clean up the vNewNode, because we don't want to skip advance to next sibling (see `advance` function).
+                    vNewNode = null;
+                    // We need also to go back to the previous sibling, because we assigned previous sibling to the vCurrent.
+                    if (vSiblings !== null) {
+                        vSiblingsIdx -= SiblingsArray.Size;
+                    }
                 }
             }
             // reconcile attributes
             const jsxAttrs = [];
             const props = jsx.varProps;
             for (const key in props) {
-                let value = props[key];
-                value = serializeAttribute(key, value, scopedStyleIdPrefix);
+                const value = props[key];
                 if (value != null) {
                     mapArray_set(jsxAttrs, key, value, 0);
                 }
@@ -2813,7 +2923,8 @@
                 mapArray_set(jsxAttrs, ELEMENT_KEY, jsxKey, 0);
             }
             const vNode = (vNewNode || vCurrent);
-            needsQDispatchEventPatch = setBulkProps(vNode, jsxAttrs) || needsQDispatchEventPatch;
+            needsQDispatchEventPatch =
+                setBulkProps(vNode, jsxAttrs, currentFile) || needsQDispatchEventPatch;
             if (needsQDispatchEventPatch) {
                 // Event handler needs to be patched onto the element.
                 const element = vnode_getNode(vNode);
@@ -2838,7 +2949,7 @@
             }
         }
         /** @param tag Returns true if `qDispatchEvent` needs patching */
-        function setBulkProps(vnode, srcAttrs) {
+        function setBulkProps(vnode, srcAttrs, currentFile) {
             vnode_ensureElementInflated(vnode);
             const dstAttrs = vnode;
             let srcIdx = 0;
@@ -2863,11 +2974,18 @@
                         value(element);
                         return;
                     }
+                    else {
+                        throw qError(QError.invalidRefValue, [currentFile]);
+                    }
                 }
                 if (isSignal(value)) {
-                    value = untrack(() => value.value);
+                    const signalData = new EffectPropData({
+                        $scopedStyleIdPrefix$: scopedStyleIdPrefix,
+                        $isConst$: false,
+                    });
+                    value = trackSignalAndAssignHost(value, vnode, key, container, signalData);
                 }
-                vnode_setAttr(journal, vnode, key, value);
+                vnode_setAttr(journal, vnode, key, serializeAttribute(key, value, scopedStyleIdPrefix));
                 if (value === null) {
                     // if we set `null` than attribute was removed and we need to shorten the dstLength
                     dstLength = dstAttrs.length;
@@ -2923,6 +3041,10 @@
                     }
                     srcIdx++;
                     srcKey = srcIdx < srcLength ? srcAttrs[srcIdx++] : null;
+                    // we need to increment dstIdx too, because we added destination key and value to the VNode
+                    // and dstAttrs is a reference to the VNode
+                    dstIdx++;
+                    dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
                 }
                 else if (srcKey == dstKey) {
                     const srcValue = srcAttrs[srcIdx++];
@@ -3040,7 +3162,7 @@
                 vNewNode = retrieveChildWithKey(null, jsxKey);
                 if (vNewNode != null) {
                     // We found it, move it up.
-                    vnode_insertBefore(journal, vParent, (vNewNode = vnode_newVirtual()), vCurrent && getInsertBefore());
+                    vnode_insertBefore(journal, vParent, vNewNode, vCurrent && getInsertBefore());
                     return;
                 }
             }
@@ -3282,7 +3404,7 @@
                             const obj = seq[i];
                             if (isTask(obj)) {
                                 const task = obj;
-                                clearSubscriberEffectDependencies(task);
+                                clearSubscriberEffectDependencies(container, task);
                                 if (task.$flags$ & TaskFlags.VISIBLE_TASK) {
                                     container.$scheduler$(ChoreType.CLEANUP_VISIBLE, task);
                                 }
@@ -3483,6 +3605,108 @@
      */
     const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedQrl);
 
+    /// These global variables are used to avoid creating new arrays for each call to `vnode_documentPosition`.
+    const aVNodePath = [];
+    const bVNodePath = [];
+    /**
+     * Compare two VNodes and determine their document position relative to each other.
+     *
+     * @param a VNode to compare
+     * @param b VNode to compare
+     * @param rootVNode - Root VNode of a container
+     * @returns -1 if `a` is before `b`, 0 if `a` is the same as `b`, 1 if `a` is after `b`.
+     */
+    const vnode_documentPosition = (a, b, rootVNode) => {
+        if (a === b) {
+            return 0;
+        }
+        let aDepth = -1;
+        let bDepth = -1;
+        while (a) {
+            const vNode = (aVNodePath[++aDepth] = a);
+            a = (vNode[VNodeProps.parent] ||
+                (rootVNode && vnode_getProp(a, QSlotParent, (id) => vnode_locate(rootVNode, id))));
+        }
+        while (b) {
+            const vNode = (bVNodePath[++bDepth] = b);
+            b = (vNode[VNodeProps.parent] ||
+                (rootVNode && vnode_getProp(b, QSlotParent, (id) => vnode_locate(rootVNode, id))));
+        }
+        while (aDepth >= 0 && bDepth >= 0) {
+            a = aVNodePath[aDepth];
+            b = bVNodePath[bDepth];
+            if (a === b) {
+                // if the nodes are the same, we need to check the next level.
+                aDepth--;
+                bDepth--;
+            }
+            else {
+                // We found a difference so we need to scan nodes at this level.
+                let cursor = b;
+                do {
+                    cursor = vnode_getNextSibling(cursor);
+                    if (cursor === a) {
+                        return 1;
+                    }
+                } while (cursor);
+                cursor = b;
+                do {
+                    cursor = vnode_getPreviousSibling(cursor);
+                    if (cursor === a) {
+                        return -1;
+                    }
+                } while (cursor);
+                if (rootVNode && vnode_getProp(b, QSlotParent, (id) => vnode_locate(rootVNode, id))) {
+                    // The "b" node is a projection, so we need to set it after "a" node,
+                    // because the "a" node could be a context provider.
+                    return -1;
+                }
+                // The node is not in the list of siblings, that means it must be disconnected.
+                return 1;
+            }
+        }
+        return aDepth < bDepth ? -1 : 1;
+    };
+    /// These global variables are used to avoid creating new arrays for each call to `ssrNodeDocumentPosition`.
+    const aSsrNodePath = [];
+    const bSsrNodePath = [];
+    /**
+     * Compare two SSR nodes and determine their document position relative to each other. Compares only
+     * position between parent and child.
+     *
+     * @param a SSR node to compare
+     * @param b SSR node to compare
+     * @returns -1 if `a` is before `b`, 0 if `a` is the same as `b`, 1 if `a` is after `b`.
+     */
+    const ssrNodeDocumentPosition = (a, b) => {
+        if (a === b) {
+            return 0;
+        }
+        let aDepth = -1;
+        let bDepth = -1;
+        while (a) {
+            const ssrNode = (aSsrNodePath[++aDepth] = a);
+            a = ssrNode.currentComponentNode;
+        }
+        while (b) {
+            const ssrNode = (bSsrNodePath[++bDepth] = b);
+            b = ssrNode.currentComponentNode;
+        }
+        while (aDepth >= 0 && bDepth >= 0) {
+            a = aSsrNodePath[aDepth];
+            b = bSsrNodePath[bDepth];
+            if (a === b) {
+                // if the nodes are the same, we need to check the next level.
+                aDepth--;
+                bDepth--;
+            }
+            else {
+                return 1;
+            }
+        }
+        return aDepth < bDepth ? -1 : 1;
+    };
+
     /**
      * Scheduler is responsible for running application code in predictable order.
      *
@@ -3615,7 +3839,7 @@
                 $executed$: false,
             };
             chore.$promise$ = new Promise((resolve) => (chore.$resolve$ = resolve));
-            chore = sortedInsert(choreQueue, chore);
+            chore = sortedInsert(choreQueue, chore, container.rootVNode || null);
             if (!journalFlushScheduled && runLater) {
                 // If we are not currently draining, we need to schedule a drain.
                 journalFlushScheduled = true;
@@ -3626,7 +3850,7 @@
                 return chore.$promise$;
             }
             else {
-                return drainUpTo(chore);
+                return drainUpTo(chore, container.rootVNode || null);
             }
         }
         /**
@@ -3634,7 +3858,7 @@
          *
          * @param runUptoChore
          */
-        function drainUpTo(runUptoChore) {
+        function drainUpTo(runUptoChore, rootVNode) {
             // If it already ran, it's not in the queue
             if (runUptoChore.$executed$) {
                 return runUptoChore.$returnValue$;
@@ -3645,7 +3869,7 @@
             }
             while (choreQueue.length) {
                 const nextChore = choreQueue.shift();
-                const order = choreComparator(nextChore, runUptoChore, false);
+                const order = choreComparator(nextChore, runUptoChore, rootVNode);
                 if (order === null) {
                     continue;
                 }
@@ -3661,7 +3885,7 @@
                 }
                 const returnValue = executeChore(nextChore);
                 if (isPromise(returnValue)) {
-                    const promise = returnValue.then(() => drainUpTo(runUptoChore));
+                    const promise = returnValue.then(() => drainUpTo(runUptoChore, rootVNode));
                     return promise;
                 }
             }
@@ -3682,7 +3906,7 @@
                     returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
                         if (chore.$type$ === ChoreType.COMPONENT) {
                             const styleScopedId = container.getHostProp(host, QScopedStyle);
-                            return vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId));
+                            return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
                         }
                         else {
                             return jsx;
@@ -3713,7 +3937,7 @@
                     if (isSignal(jsx)) {
                         jsx = jsx.value;
                     }
-                    returnValue = vnode_diff(container, jsx, parentVirtualNode, null);
+                    returnValue = retryOnPromise(() => vnode_diff(container, jsx, parentVirtualNode, null));
                     break;
                 case ChoreType.NODE_PROP:
                     const virtualNode = chore.$host$;
@@ -3782,7 +4006,15 @@
             vnode_isVNode(chore.$host$) &&
             chore.$host$[VNodeProps.flags] & VNodeFlags.Deleted);
     }
-    function choreComparator(a, b, shouldThrowOnHostMismatch) {
+    /**
+     * Compares two chores to determine their execution order in the scheduler's queue.
+     *
+     * @param a - The first chore to compare
+     * @param b - The second chore to compare
+     * @returns A number indicating the relative order of the chores. A negative number means `a` runs
+     *   before `b`.
+     */
+    function choreComparator(a, b, rootVNode) {
         const macroTypeDiff = (a.$type$ & ChoreType.MACRO) - (b.$type$ & ChoreType.MACRO);
         if (macroTypeDiff !== 0) {
             return macroTypeDiff;
@@ -3795,7 +4027,7 @@
             if (aHost !== bHost && aHost !== null && bHost !== null) {
                 if (vnode_isVNode(aHost) && vnode_isVNode(bHost)) {
                     // we are running on the client.
-                    const hostDiff = vnode_documentPosition(aHost, bHost);
+                    const hostDiff = vnode_documentPosition(aHost, bHost, rootVNode);
                     if (hostDiff !== 0) {
                         return hostDiff;
                     }
@@ -3809,11 +4041,11 @@
           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) {
-                        throw qError(QError.serverHostMismatch, [errorMessage]);
-                    }
                     logWarn(errorMessage);
-                    return null;
+                    const hostDiff = ssrNodeDocumentPosition(aHost, bHost);
+                    if (hostDiff !== 0) {
+                        return hostDiff;
+                    }
                 }
             }
             const microTypeDiff = (a.$type$ & ChoreType.MICRO) - (b.$type$ & ChoreType.MICRO);
@@ -3836,7 +4068,7 @@
         }
         return 0;
     }
-    function sortedFindIndex(sortedArray, value) {
+    function sortedFindIndex(sortedArray, value, rootVNode) {
         /// We need to ensure that the `queue` is sorted by priority.
         /// 1. Find a place where to insert into.
         let bottom = 0;
@@ -3844,7 +4076,7 @@
         while (bottom < top) {
             const middle = bottom + ((top - bottom) >> 1);
             const midChore = sortedArray[middle];
-            const comp = choreComparator(value, midChore, true);
+            const comp = choreComparator(value, midChore, rootVNode);
             if (comp < 0) {
                 top = middle;
             }
@@ -3858,10 +4090,10 @@
         }
         return ~bottom;
     }
-    function sortedInsert(sortedArray, value) {
+    function sortedInsert(sortedArray, value, rootVNode) {
         /// We need to ensure that the `queue` is sorted by priority.
         /// 1. Find a place where to insert into.
-        const idx = sortedFindIndex(sortedArray, value);
+        const idx = sortedFindIndex(sortedArray, value, rootVNode);
         if (idx < 0) {
             /// 2. Insert the chore into the queue.
             sortedArray.splice(~idx, 0, value);
@@ -3939,7 +4171,7 @@
         cleanupTask(task);
         const iCtx = newInvokeContext(container.$locale$, host, undefined, TaskEvent);
         iCtx.$container$ = container;
-        const taskFn = task.$qrl$.getFn(iCtx, () => clearSubscriberEffectDependencies(task));
+        const taskFn = task.$qrl$.getFn(iCtx, () => clearSubscriberEffectDependencies(container, task));
         const track = (obj, prop) => {
             const ctx = newInvokeContext();
             ctx.$effectSubscriber$ = [task, EffectProperty.COMPONENT];
@@ -4571,7 +4803,7 @@
                     appendClassIfScopedStyleExists(jsx, options.styleScoped);
                     let qwikInspectorAttrValue = null;
                     if (build.isDev && jsx.dev && jsx.type !== 'head') {
-                        qwikInspectorAttrValue = getQwikInspectorAttributeValue(jsx.dev);
+                        qwikInspectorAttrValue = getFileLocationFromJsx(jsx.dev);
                         if (qInspector) {
                             appendQwikInspectorAttribute(jsx, qwikInspectorAttrValue);
                         }
@@ -4845,13 +5077,6 @@
         }
         return directGetPropsProxyProp(jsx, 'name') || QDefaultSlot;
     }
-    function getQwikInspectorAttributeValue(jsxDev) {
-        const sanitizedFileName = jsxDev.fileName?.replace(/\\/g, '/');
-        if (sanitizedFileName) {
-            return `${sanitizedFileName}:${jsxDev.lineNumber}:${jsxDev.columnNumber}`;
-        }
-        return null;
-    }
     function appendQwikInspectorAttribute(jsx, qwikInspectorAttrValue) {
         if (qwikInspectorAttrValue && (!jsx.constProps || !(qwikInspectorAttr in jsx.constProps))) {
             (jsx.constProps ||= {})[qwikInspectorAttr] = qwikInspectorAttrValue;
@@ -4873,7 +5098,7 @@
      *
      * @public
      */
-    const version = "2.0.0-alpha.4-dev+374e0d6";
+    const version = "2.0.0-alpha.6-dev+d848ba5";
 
     /** @internal */
     class _SharedContainer {
@@ -6764,7 +6989,7 @@
         assertTrue(vnode_isTextVNode(vnode), 'Expecting Text Node.');
         return vnode[TextVNodeProps.node];
     };
-    function vnode_toString(depth = 10, offset = '', materialize = false, siblings = false) {
+    function vnode_toString(depth = 20, offset = '', materialize = false, siblings = false) {
         let vnode = this;
         if (depth === 0) {
             return '...';
@@ -6981,51 +7206,6 @@
         throw qError(QError.invalidVNodeType, [type]);
     };
     const isElement = (node) => node && typeof node == 'object' && fastNodeType(node) === /** Node.ELEMENT_NODE* */ 1;
-    /// These global variables are used to avoid creating new arrays for each call to `vnode_getPathToClosestDomNode`.
-    const aPath = [];
-    const bPath = [];
-    const vnode_documentPosition = (a, b) => {
-        if (a === b) {
-            return 0;
-        }
-        let aDepth = -1;
-        let bDepth = -1;
-        while (a) {
-            a = (aPath[++aDepth] = a)[VNodeProps.parent];
-        }
-        while (b) {
-            b = (bPath[++bDepth] = b)[VNodeProps.parent];
-        }
-        while (aDepth >= 0 && bDepth >= 0) {
-            a = aPath[aDepth];
-            b = bPath[bDepth];
-            if (a === b) {
-                // if the nodes are the same, we need to check the next level.
-                aDepth--;
-                bDepth--;
-            }
-            else {
-                // We found a difference so we need to scan nodes at this level.
-                let cursor = b;
-                do {
-                    cursor = vnode_getNextSibling(cursor);
-                    if (cursor === a) {
-                        return 1;
-                    }
-                } while (cursor);
-                cursor = b;
-                do {
-                    cursor = vnode_getPreviousSibling(cursor);
-                    if (cursor === a) {
-                        return -1;
-                    }
-                } while (cursor);
-                // The node is not in the list of siblings, that means it must be disconnected.
-                return 1;
-            }
-        }
-        return aDepth < bDepth ? -1 : 1;
-    };
     /**
      * Use this method to find the parent component for projection.
      *
@@ -7052,11 +7232,7 @@
         while (projectionDepth--) {
             while (vHost &&
                 (vnode_isVirtualVNode(vHost) ? vnode_getProp(vHost, OnRenderProp, null) === null : true)) {
-                const qSlotParentProp = vnode_getProp(vHost, QSlotParent, null);
-                const qSlotParent = qSlotParentProp &&
-                    (typeof qSlotParentProp === 'string'
-                        ? vnode_locate(rootVNode, qSlotParentProp)
-                        : qSlotParentProp);
+                const qSlotParent = vnode_getProp(vHost, QSlotParent, (id) => vnode_locate(rootVNode, id));
                 const vProjectionParent = vnode_isVirtualVNode(vHost) && qSlotParent;
                 if (vProjectionParent) {
                     // We found a projection, so we need to go up one more level.
@@ -7965,14 +8141,14 @@
                     if (vnode_getProp(vNode, OnRenderProp, null) !== null) {
                         return vNode;
                     }
-                    // If virtual node, than it could be a slot so we need to read its parent.
-                    const parent = vnode_getProp(vNode, QSlotParent, this.$vnodeLocate$);
-                    if (parent) {
-                        vNode = parent;
-                        continue;
-                    }
+                    vNode =
+                        vnode_getParent(vNode) ||
+                            // If virtual node, than it could be a slot so we need to read its parent.
+                            vnode_getProp(vNode, QSlotParent, this.$vnodeLocate$);
+                }
+                else {
+                    vNode = vnode_getParent(vNode);
                 }
-                vNode = vnode_getParent(vNode);
             }
             return null;
         }
@@ -8072,12 +8248,6 @@
 
     /** There's [documentation](./serialization.md) */
     const deserializedProxyMap = new WeakMap();
-    const unwrapDeserializerProxy = (value) => {
-        const unwrapped = typeof value === 'object' &&
-            value !== null &&
-            value[SERIALIZER_PROXY_UNWRAP];
-        return unwrapped ? unwrapped : value;
-    };
     const isDeserializerProxy = (value) => {
         return typeof value === 'object' && value !== null && SERIALIZER_PROXY_UNWRAP in value;
     };
@@ -8130,14 +8300,14 @@
                 return value;
             }
             const container = this.$container$;
-            const propValue = allocate(container, typeId, value);
-            Reflect.set(target, property, propValue);
-            this.$data$[idx] = undefined;
-            this.$data$[idx + 1] = propValue;
+            let propValue = allocate(container, typeId, value);
             /** We stored the reference, so now we can inflate, allowing cycles. */
             if (typeId >= TypeIds.Error) {
-                inflate(container, propValue, typeId, value);
+                propValue = inflate(container, propValue, typeId, value);
             }
+            Reflect.set(target, property, propValue);
+            this.$data$[idx] = undefined;
+            this.$data$[idx + 1] = propValue;
             return propValue;
         }
         has(target, property) {
@@ -8176,7 +8346,7 @@
     const inflate = (container, target, typeId, data) => {
         if (typeId === undefined) {
             // Already processed
-            return;
+            return target;
         }
         // restore the complex data, except for plain objects
         if (typeId !== TypeIds.Object && Array.isArray(data)) {
@@ -8248,16 +8418,13 @@
             case TypeIds.Store:
             case TypeIds.StoreArray: {
                 const [value, flags, effects, storeEffect] = data;
-                const handler = getStoreHandler(target);
-                handler.$flags$ = flags;
-                // First assign so it sets up the deep stores
-                Object.assign(getStoreTarget(target), value);
-                // Afterwards restore the effects so they don't get triggered
+                const store = getOrCreateStore(value, flags, container);
+                const storeHandler = getStoreHandler(store);
                 if (storeEffect) {
                     effects[STORE_ARRAY_PROP] = storeEffect;
                 }
-                handler.$effects$ = effects;
-                container.$storeProxyMap$.set(value, target);
+                storeHandler.$effects$ = effects;
+                target = store;
                 break;
             }
             case TypeIds.Signal: {
@@ -8384,6 +8551,7 @@
             default:
                 throw qError(QError.serializeErrorNotImplemented, [typeId]);
         }
+        return target;
     };
     const _constants = [
         undefined,
@@ -8449,9 +8617,9 @@
             case TypeIds.ComputedSignal:
                 return new ComputedSignal(container, null);
             case TypeIds.Store:
-                return createStore(container, {}, 0);
             case TypeIds.StoreArray:
-                return createStore(container, [], 0);
+                // ignore allocate, we need to assign target while creating store
+                return null;
             case TypeIds.URLSearchParams:
                 return new URLSearchParams(value);
             case TypeIds.FormData:
@@ -9313,15 +9481,15 @@
         }
         return output;
     }
-    function deserializeData(container, typeId, propValue) {
+    function deserializeData(container, typeId, value) {
         if (typeId === undefined) {
-            return propValue;
+            return value;
         }
-        const value = allocate(container, typeId, propValue);
+        let propValue = allocate(container, typeId, value);
         if (typeId >= TypeIds.Error) {
-            inflate(container, value, typeId, propValue);
+            propValue = inflate(container, propValue, typeId, value);
         }
-        return value;
+        return propValue;
     }
     function getObjectById(id, stateData) {
         if (typeof id === 'string') {