@qwik.dev/core 2.0.0-alpha.7 → 2.0.0-alpha.8

package/dist/core.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.7-dev+a26598a
+ * @qwik.dev/core 2.0.0-alpha.8-dev+66037b5
  * 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
@@ -316,8 +316,7 @@
     const ComponentStylesPrefixContent = '⚡️';
     /** `<some-element q:slot="...">` */
     const QSlot = 'q:slot';
-    const QSlotParent = ':';
-    const QSlotRef = 'q:sref';
+    const QSlotParent = 'q:sparent';
     const QSlotS = 'q:s';
     const QStyle = 'q:style';
     const QStyleSelector = 'style[q\\:style]';
@@ -354,6 +353,7 @@
     const ResourceEvent = 'qResource';
     const RenderEvent = 'qRender';
     const TaskEvent = 'qTask';
+    /** `<q:slot name="...">` */
     const QDefaultSlot = '';
     /**
      * Attribute to mark that this VNode has a pointer to itself from the `qwik/json` state.
@@ -1153,7 +1153,7 @@
 
     const STORE_TARGET = Symbol('store.target');
     const STORE_HANDLER = Symbol('store.handler');
-    const STORE_ARRAY_PROP = Symbol('store.array');
+    const STORE_ALL_PROPS = Symbol('store.all');
     var StoreFlags;
     (function (StoreFlags) {
         StoreFlags[StoreFlags["NONE"] = 0] = "NONE";
@@ -1228,7 +1228,7 @@
                 }
                 const effectSubscriber = ctx.$effectSubscriber$;
                 if (effectSubscriber) {
-                    addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
+                    addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber);
                 }
             }
             if (prop === 'toString' && value === Object.prototype.toString) {
@@ -1279,7 +1279,7 @@
                 if (ctx) {
                     const effectSubscriber = ctx.$effectSubscriber$;
                     if (effectSubscriber) {
-                        addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
+                        addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber);
                     }
                 }
             }
@@ -1289,7 +1289,7 @@
             const ctx = tryGetInvokeContext();
             const effectSubscriber = ctx?.$effectSubscriber$;
             if (effectSubscriber) {
-                addEffect(target, STORE_ARRAY_PROP, this, effectSubscriber);
+                addStoreEffect(target, STORE_ALL_PROPS, this, effectSubscriber);
             }
             return Reflect.ownKeys(target);
         }
@@ -1307,7 +1307,7 @@
             };
         }
     }
-    function addEffect(target, prop, store, effectSubscription) {
+    function addStoreEffect(target, prop, store, effectSubscription) {
         const effectsMap = (store.$effects$ ||= new Map());
         let effects = effectsMap.get(prop);
         if (!effects) {
@@ -1343,7 +1343,7 @@
                 effectsToTrigger = storeEffects.get(prop);
             }
         }
-        const storeArrayValue = storeEffects?.get(STORE_ARRAY_PROP);
+        const storeArrayValue = storeEffects?.get(STORE_ALL_PROPS);
         if (storeArrayValue) {
             effectsToTrigger ||= new Set();
             for (const effect of storeArrayValue) {
@@ -1592,6 +1592,11 @@
                 else if (isSignal(obj)) {
                     return obj.value;
                 }
+                else if (isStore(obj)) {
+                    // track whole store
+                    addStoreEffect(getStoreTarget(obj), STORE_ALL_PROPS, getStoreHandler(obj), ctx.$effectSubscriber$);
+                    return obj;
+                }
                 else {
                     throw qError(QError.trackObjectWithoutProp);
                 }
@@ -1749,13 +1754,13 @@
         VirtualVNodeProps[VirtualVNodeProps["PROPS_OFFSET"] = 6] = "PROPS_OFFSET";
     })(VirtualVNodeProps || (VirtualVNodeProps = {}));
 
-    const mapApp_findIndx = (elementVNode, key, start) => {
+    const mapApp_findIndx = (array, key, start) => {
         assertTrue(start % 2 === 0, 'Expecting even number.');
         let bottom = start >> 1;
-        let top = (elementVNode.length - 2) >> 1;
+        let top = (array.length - 2) >> 1;
         while (bottom <= top) {
             const mid = bottom + ((top - bottom) >> 1);
-            const midKey = elementVNode[mid << 1];
+            const midKey = array[mid << 1];
             if (midKey === key) {
                 return mid << 1;
             }
@@ -1768,24 +1773,24 @@
         }
         return (bottom << 1) ^ -1;
     };
-    const mapArray_set = (elementVNode, key, value, start) => {
-        const indx = mapApp_findIndx(elementVNode, key, start);
+    const mapArray_set = (array, key, value, start) => {
+        const indx = mapApp_findIndx(array, key, start);
         if (indx >= 0) {
             if (value == null) {
-                elementVNode.splice(indx, 2);
+                array.splice(indx, 2);
             }
             else {
-                elementVNode[indx + 1] = value;
+                array[indx + 1] = value;
             }
         }
         else if (value != null) {
-            elementVNode.splice(indx ^ -1, 0, key, value);
+            array.splice(indx ^ -1, 0, key, value);
         }
     };
-    const mapArray_get = (elementVNode, key, start) => {
-        const indx = mapApp_findIndx(elementVNode, key, start);
+    const mapArray_get = (array, key, start) => {
+        const indx = mapApp_findIndx(array, key, start);
         if (indx >= 0) {
-            return elementVNode[indx + 1];
+            return array[indx + 1];
         }
         else {
             return null;
@@ -2353,9 +2358,6 @@
     function isSlotProp(prop) {
         return !prop.startsWith('q:') && !prop.startsWith(NON_SERIALIZABLE_MARKER_PREFIX);
     }
-    function isParentSlotProp(prop) {
-        return prop.startsWith(QSlotParent);
-    }
     /** @internal */
     const _restProps = (props, omit, target = {}) => {
         let constPropsTarget = null;
@@ -2749,6 +2751,8 @@
             // console.log('expectProjection', JSON.stringify(slotName));
             vCurrent = vnode_getProp(vParent, // The parent is the component and it should have our portal.
             slotName, (id) => vnode_locate(container.rootVNode, id));
+            // if projection is marked as deleted then we need to create a new one
+            vCurrent = vCurrent && vCurrent[VNodeProps.flags] & VNodeFlags.Deleted ? null : vCurrent;
             if (vCurrent == null) {
                 vNewNode = vnode_newVirtual();
                 // you may be tempted to add the projection into the current parent, but
@@ -2785,6 +2789,19 @@
             }
             else if (vProjectedNode === vCurrent) ;
             else {
+                const parent = vnode_getParent(vProjectedNode);
+                const isAlreadyProjected = !!parent && !(vnode_isElementVNode(parent) && vnode_getElementName(parent) === QTemplate);
+                if (isAlreadyProjected && vParent !== parent) {
+                    /**
+                     * The node is already projected, but structure has been changed. In next steps we will
+                     * insert the vProjectedNode at the end. However we will find existing projection elements
+                     * (from already projected THE SAME projection as vProjectedNode!) during
+                     * vnode_insertBefore. We need to remove vnode from the vnode tree to avoid referencing it
+                     * to self and cause infinite loop. Don't remove it from DOM to avoid additional operations
+                     * and flickering.
+                     */
+                    vnode_remove(journal, parent, vProjectedNode, false);
+                }
                 // move from q:template to the target node
                 vnode_insertBefore(journal, vParent, (vNewNode = vProjectedNode), vCurrent && getInsertBefore());
                 vnode_setProp(vNewNode, QSlot, slotNameKey);
@@ -2838,8 +2855,8 @@
                 while (vCurrent) {
                     const toRemove = vCurrent;
                     advanceToNextSibling();
-                    cleanup(container, toRemove);
                     if (vParent === vnode_getParent(toRemove)) {
+                        cleanup(container, toRemove);
                         // If we are diffing projection than the parent is not the parent of the node.
                         // If that is the case we don't want to remove the node from the parent.
                         vnode_remove(journal, vParent, toRemove, true);
@@ -3279,10 +3296,8 @@
                 }
                 else if (!hashesAreEqual) {
                     insertNewComponent(host, componentQRL, jsxProps);
-                    if (vNewNode) {
-                        host = vNewNode;
-                        shouldRender = true;
-                    }
+                    host = vNewNode;
+                    shouldRender = true;
                 }
                 if (host) {
                     const vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
@@ -3303,6 +3318,7 @@
                 const lookupKey = jsxNode.key;
                 const vNodeLookupKey = getKey(host);
                 const lookupKeysAreEqual = lookupKey === vNodeLookupKey;
+                const vNodeComponentHash = getComponentHash(host, container.$getObjectById$);
                 if (!lookupKeysAreEqual) {
                     // See if we already have this inline component later on.
                     vNewNode = retrieveChildWithKey(null, lookupKey);
@@ -3316,6 +3332,11 @@
                     }
                     host = vNewNode;
                 }
+                // inline components don't have component hash - q:renderFn prop, so it should be null
+                else if (vNodeComponentHash != null) {
+                    insertNewInlineComponent();
+                    host = vNewNode;
+                }
                 if (host) {
                     let componentHost = host;
                     // Find the closest component host which has `OnRender` prop. This is need for subscriptions context.
@@ -3460,6 +3481,7 @@
         let vCursor = vNode;
         // Depth first traversal
         if (vnode_isTextVNode(vNode)) {
+            markVNodeAsDeleted(vCursor);
             // Text nodes don't have subscriptions or children;
             return;
         }
@@ -3495,7 +3517,7 @@
                     const attrs = vnode_getProps(vCursor);
                     for (let i = 0; i < attrs.length; i = i + 2) {
                         const key = attrs[i];
-                        if (!isParentSlotProp(key) && isSlotProp(key)) {
+                        if (isSlotProp(key)) {
                             const value = attrs[i + 1];
                             if (value) {
                                 attrs[i + 1] = null; // prevent infinite loop
@@ -3512,7 +3534,7 @@
                         }
                     }
                 }
-                const isProjection = type & VNodeFlags.Virtual && vnode_getProp(vCursor, QSlot, null) !== null;
+                const isProjection = vnode_isProjection(vCursor);
                 // Descend into children
                 if (!isProjection) {
                     // Only if it is not a projection
@@ -3535,6 +3557,9 @@
                     }
                 }
             }
+            else if (type & VNodeFlags.Text) {
+                markVNodeAsDeleted(vCursor);
+            }
             // Out of children
             if (vCursor === vNode) {
                 // we are where we started, this means that vNode has no children, so we are done.
@@ -4473,6 +4498,15 @@
     const DEBUG = false;
     // eslint-disable-next-line no-console
     const log = (...args) => console.log('SIGNAL', ...args.map(qwikDebugToString));
+    var SignalFlags;
+    (function (SignalFlags) {
+        SignalFlags[SignalFlags["INVALID"] = 1] = "INVALID";
+    })(SignalFlags || (SignalFlags = {}));
+    var WrappedSignalFlags;
+    (function (WrappedSignalFlags) {
+        // should subscribe to value and be unwrapped for PropsProxy
+        WrappedSignalFlags[WrappedSignalFlags["UNWRAP"] = 2] = "UNWRAP";
+    })(WrappedSignalFlags || (WrappedSignalFlags = {}));
     const throwIfQRLNotResolved = (qrl) => {
         const resolved = qrl.resolved;
         if (!resolved) {
@@ -4565,7 +4599,7 @@
             }
         }
         toString() {
-            return (`[${this.constructor.name}${this.$invalid$ ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
+            return (`[${this.constructor.name}${this.$flags$ & SignalFlags.INVALID ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
                 (Array.from(this.$effects$ || [])
                     .map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    '))
                     .join('\n') || ''));
@@ -4672,18 +4706,21 @@
          * resolve the QRL during the mark dirty phase so that any call to it will be synchronous). )
          */
         $computeQrl$;
+        $flags$;
+        $forceRunEffects$ = false;
+        [_EFFECT_BACK_REF] = null;
+        constructor(container, fn, 
         // We need a separate flag to know when the computation needs running because
         // we need the old value to know if effects need running after computation
-        $invalid$ = true;
-        $forceRunEffects$ = false;
-        constructor(container, fn) {
+        flags = SignalFlags.INVALID) {
             // The value is used for comparison when signals trigger, which can only happen
             // when it was calculated before. Therefore we can pass whatever we like.
             super(container, NEEDS_COMPUTATION);
             this.$computeQrl$ = fn;
+            this.$flags$ = flags;
         }
         $invalidate$() {
-            this.$invalid$ = true;
+            this.$flags$ |= SignalFlags.INVALID;
             this.$forceRunEffects$ = false;
             // We should only call subscribers if the calculation actually changed.
             // Therefore, we need to calculate the value now.
@@ -4694,7 +4731,7 @@
          * remained the same object
          */
         force() {
-            this.$invalid$ = true;
+            this.$flags$ |= SignalFlags.INVALID;
             this.$forceRunEffects$ = false;
             triggerEffects(this.$container$, this, this.$effects$);
         }
@@ -4707,7 +4744,7 @@
             return this.$untrackedValue$;
         }
         $computeIfNeeded$() {
-            if (!this.$invalid$) {
+            if (!(this.$flags$ & SignalFlags.INVALID)) {
                 return false;
             }
             const computeQrl = this.$computeQrl$;
@@ -4724,7 +4761,7 @@
                     ]);
                 }
                 DEBUG && log('Signal.$compute$', untrackedValue);
-                this.$invalid$ = false;
+                this.$flags$ &= ~SignalFlags.INVALID;
                 const didChange = untrackedValue !== this.$untrackedValue$;
                 if (didChange) {
                     this.$untrackedValue$ = untrackedValue;
@@ -4749,20 +4786,22 @@
         $args$;
         $func$;
         $funcStr$;
-        // We need a separate flag to know when the computation needs running because
-        // we need the old value to know if effects need running after computation
-        $invalid$ = true;
+        $flags$;
         $hostElement$ = null;
         $forceRunEffects$ = false;
         [_EFFECT_BACK_REF] = null;
-        constructor(container, fn, args, fnStr) {
+        constructor(container, fn, args, fnStr, 
+        // We need a separate flag to know when the computation needs running because
+        // we need the old value to know if effects need running after computation
+        flags = SignalFlags.INVALID | WrappedSignalFlags.UNWRAP) {
             super(container, NEEDS_COMPUTATION);
             this.$args$ = args;
             this.$func$ = fn;
             this.$funcStr$ = fnStr;
+            this.$flags$ = flags;
         }
         $invalidate$() {
-            this.$invalid$ = true;
+            this.$flags$ |= SignalFlags.INVALID;
             this.$forceRunEffects$ = false;
             // We should only call subscribers if the calculation actually changed.
             // Therefore, we need to calculate the value now.
@@ -4773,7 +4812,7 @@
          * remained the same object
          */
         force() {
-            this.$invalid$ = true;
+            this.$flags$ |= SignalFlags.INVALID;
             this.$forceRunEffects$ = false;
             triggerEffects(this.$container$, this, this.$effects$);
         }
@@ -4786,10 +4825,12 @@
             return this.$untrackedValue$;
         }
         $computeIfNeeded$() {
-            if (!this.$invalid$) {
+            if (!(this.$flags$ & SignalFlags.INVALID)) {
                 return false;
             }
             const untrackedValue = trackSignal(() => this.$func$(...this.$args$), this, EffectProperty.VNODE, this.$container$);
+            // TODO: we should remove invalid flag here
+            // this.$flags$ &= ~SignalFlags.INVALID;
             const didChange = untrackedValue !== this.$untrackedValue$;
             if (didChange) {
                 this.$untrackedValue$ = untrackedValue;
@@ -4951,7 +4992,7 @@
                         if (componentFrame) {
                             const compId = componentFrame.componentNode.id || '';
                             const projectionAttrs = build.isDev ? [DEBUG_TYPE, VirtualType.Projection] : [];
-                            projectionAttrs.push(':', compId);
+                            projectionAttrs.push(QSlotParent, compId);
                             ssr.openProjection(projectionAttrs);
                             const host = componentFrame.componentNode;
                             const node = ssr.getLastNode();
@@ -5219,7 +5260,7 @@
      *
      * @public
      */
-    const version = "2.0.0-alpha.7-dev+a26598a";
+    const version = "2.0.0-alpha.8-dev+66037b5";
 
     /** @internal */
     class _SharedContainer {
@@ -5274,7 +5315,7 @@
         }
         if (isSignal(obj)) {
             assertEqual(prop, 'value', 'Left side is a signal, prop must be value');
-            if (obj instanceof WrappedSignal) {
+            if (obj instanceof WrappedSignal && obj.flags & WrappedSignalFlags.UNWRAP) {
                 return obj;
             }
             return getWrapped(args);
@@ -5300,6 +5341,17 @@
         // We need to forward the access to the original object
         return getWrapped(args);
     };
+    /** @internal */
+    const _wrapStore = (obj, prop) => {
+        const target = getStoreTarget(obj);
+        const value = target[prop];
+        if (isSignal(value)) {
+            return value;
+        }
+        else {
+            return new WrappedSignal(null, getProp, [obj, prop], null, SignalFlags.INVALID);
+        }
+    };
     /** @internal @deprecated v1 compat */
     const _wrapSignal = (obj, prop) => {
         const r = _wrapProp(obj, prop);
@@ -5570,7 +5622,9 @@
                 ? this.$constProps$[prop]
                 : this.$varProps$[prop];
             // a proxied value that the optimizer made
-            return value instanceof WrappedSignal ? value.value : value;
+            return value instanceof WrappedSignal && value.$flags$ & WrappedSignalFlags.UNWRAP
+                ? value.value
+                : value;
         }
         set(_, prop, value) {
             if (prop === _CONST_PROPS) {
@@ -5804,8 +5858,8 @@
         ID_CHAR: /* ********* */ '=',
         PROPS: /* ************** */ 62, // `>` - `q:props' - Component Props
         PROPS_CHAR: /* ****** */ '>',
-        SLOT_REF: /* *********** */ 63, // `?` - `q:sref` - Slot reference.
-        SLOT_REF_CHAR: /* *** */ '?',
+        SLOT_PARENT: /* ******** */ 63, // `?` - `q:sparent` - Slot parent.
+        SLOT_PARENT_CHAR: /*  */ '?',
         KEY: /* **************** */ 64, // `@` - `q:key` - Element key.
         KEY_CHAR: /* ******** */ '@',
         SEQ: /* **************** */ 91, // `[` - `q:seq' - Seq value from `useSequentialScope()`
@@ -6053,6 +6107,12 @@
         const flag = vNode[VNodeProps.flags];
         return (flag & VNodeFlags.Virtual) === VNodeFlags.Virtual;
     };
+    const vnode_isProjection = (vNode) => {
+        assertDefined(vNode, 'Missing vNode');
+        const flag = vNode[VNodeProps.flags];
+        return ((flag & VNodeFlags.Virtual) === VNodeFlags.Virtual &&
+            vnode_getProp(vNode, QSlot, null) !== null);
+    };
     const ensureTextVNode = (vNode) => {
         assertTrue(vnode_isTextVNode(vNode), 'Expecting TextVNode was: ' + vnode_getNodeTypeName(vNode));
         return vNode;
@@ -6497,7 +6557,7 @@
                         element[key] = parseBoolean(value);
                     }
                     else if (key === 'value' && key in element) {
-                        element.value = escapeHTML(String(value));
+                        element.value = String(value);
                     }
                     else if (key === dangerouslySetInnerHTML) {
                         element.innerHTML = value;
@@ -7249,9 +7309,6 @@
             else if (peek() === VNodeDataChar.PROPS) {
                 vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
             }
-            else if (peek() === VNodeDataChar.SLOT_REF) {
-                vnode_setAttr(null, vParent, QSlotRef, consumeValue());
-            }
             else if (peek() === VNodeDataChar.KEY) {
                 vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
             }
@@ -7267,6 +7324,9 @@
                 }
                 setEffectBackRefFromVNodeData(vParent, consumeValue(), container);
             }
+            else if (peek() === VNodeDataChar.SLOT_PARENT) {
+                vnode_setProp(vParent, QSlotParent, consumeValue());
+            }
             else if (peek() === VNodeDataChar.CONTEXT) {
                 vnode_setAttr(null, vParent, QCtxAttr, consumeValue());
             }
@@ -8169,7 +8229,7 @@
         $styleIds$ = null;
         $renderCount$ = 0;
         constructor(element) {
-            super(() => this.scheduleRender(), () => vnode_applyJournal(this.$journal$), {}, element.getAttribute('q:locale'));
+            super(() => this.scheduleRender(), () => vnode_applyJournal(this.$journal$), {}, element.getAttribute(QLocaleAttr));
             this.qContainer = element.getAttribute(QContainerAttr);
             if (!this.qContainer) {
                 throw qError(QError.elementWithoutContainer);
@@ -8569,8 +8629,9 @@
                 signal.$args$ = d[1];
                 signal[_EFFECT_BACK_REF] = d[2];
                 signal.$untrackedValue$ = d[3];
-                signal.$hostElement$ = d[4];
-                signal.$effects$ = new Set(d.slice(5));
+                signal.$flags$ = d[4];
+                signal.$hostElement$ = d[5];
+                signal.$effects$ = new Set(d.slice(6));
                 break;
             }
             case TypeIds.ComputedSignal: {
@@ -8582,7 +8643,7 @@
                     computed.$untrackedValue$ = d[2];
                 }
                 else {
-                    computed.$invalid$ = true;
+                    computed.$flags$ |= SignalFlags.INVALID;
                     /**
                      * If we try to compute value and the qrl is not resolved, then system throws an error with
                      * qrl promise. To prevent that we should early resolve computed qrl while computed
@@ -8690,7 +8751,7 @@
         EMPTY_ARRAY,
         EMPTY_OBJ,
         NEEDS_COMPUTATION,
-        STORE_ARRAY_PROP,
+        STORE_ALL_PROPS,
         Slot,
         Fragment,
         NaN,
@@ -8995,14 +9056,15 @@
                      */
                     const v = obj instanceof WrappedSignal
                         ? obj.untrackedValue
-                        : obj instanceof ComputedSignal && (obj.$invalid$ || fastSkipSerialize(obj))
+                        : obj instanceof ComputedSignal &&
+                            (obj.$flags$ & SignalFlags.INVALID || fastSkipSerialize(obj))
                             ? NEEDS_COMPUTATION
                             : obj.$untrackedValue$;
                     if (v !== NEEDS_COMPUTATION) {
                         discoveredValues.push(v);
                     }
                     if (obj.$effects$) {
-                        discoveredValues.push(...obj.$effects$);
+                        discoveredValues.push(obj.$effects$);
                     }
                     // WrappedSignal uses syncQrl which has no captured refs
                     if (obj instanceof WrappedSignal) {
@@ -9015,6 +9077,7 @@
                         }
                     }
                     else if (obj instanceof ComputedSignal) {
+                        discoverEffectBackRefs(obj[_EFFECT_BACK_REF], discoveredValues);
                         discoveredValues.push(obj.$computeQrl$);
                     }
                 }
@@ -9111,18 +9174,7 @@
     };
     const discoverEffectBackRefs = (effectsBackRefs, discoveredValues) => {
         if (effectsBackRefs) {
-            // We need serialize effect subscriptions with back refs
-            let hasBackRefs = false;
-            for (const [, effect] of effectsBackRefs) {
-                const backRefs = effect[EffectSubscriptionProp.BACK_REF];
-                if (backRefs) {
-                    hasBackRefs = true;
-                    break;
-                }
-            }
-            if (hasBackRefs) {
-                discoveredValues.push(effectsBackRefs);
-            }
+            discoveredValues.push(effectsBackRefs);
         }
     };
     const promiseResults = new WeakMap();
@@ -9271,8 +9323,8 @@
             else if (value === NEEDS_COMPUTATION) {
                 output(TypeIds.Constant, Constants.NEEDS_COMPUTATION);
             }
-            else if (value === STORE_ARRAY_PROP) {
-                output(TypeIds.Constant, Constants.STORE_ARRAY_PROP);
+            else if (value === STORE_ALL_PROPS) {
+                output(TypeIds.Constant, Constants.STORE_ALL_PROPS);
             }
             else {
                 throw qError(QError.serializeErrorUnknownType, [typeof value]);
@@ -9371,7 +9423,7 @@
                  * It can never be meant to become a vNode, because vNodes are internal only.
                  */
                 const v = value instanceof ComputedSignal &&
-                    (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$))
+                    (value.$flags$ & SignalFlags.INVALID || fastSkipSerialize(value.$untrackedValue$))
                     ? NEEDS_COMPUTATION
                     : value.$untrackedValue$;
                 if (value instanceof WrappedSignal) {
@@ -9379,6 +9431,7 @@
                         ...serializeWrappingFn(serializationContext, value),
                         filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                         v,
+                        value.$flags$,
                         value.$hostElement$,
                         ...(value.$effects$ || []),
                     ]);
@@ -9856,7 +9909,7 @@
         Constants[Constants["EMPTY_ARRAY"] = 5] = "EMPTY_ARRAY";
         Constants[Constants["EMPTY_OBJ"] = 6] = "EMPTY_OBJ";
         Constants[Constants["NEEDS_COMPUTATION"] = 7] = "NEEDS_COMPUTATION";
-        Constants[Constants["STORE_ARRAY_PROP"] = 8] = "STORE_ARRAY_PROP";
+        Constants[Constants["STORE_ALL_PROPS"] = 8] = "STORE_ALL_PROPS";
         Constants[Constants["Slot"] = 9] = "Slot";
         Constants[Constants["Fragment"] = 10] = "Fragment";
         Constants[Constants["NaN"] = 11] = "NaN";
@@ -11409,6 +11462,7 @@
     exports._weakSerialize = _weakSerialize;
     exports._wrapProp = _wrapProp;
     exports._wrapSignal = _wrapSignal;
+    exports._wrapStore = _wrapStore;
     exports.component$ = component$;
     exports.componentQrl = componentQrl;
     exports.createComputed$ = createComputed$;