Merge pull request #7367 from QwikDev/v2-track-whole-store

fix: tracking whole store

Author: wmertens

.changeset/young-cameras-hang.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: tracking whole store

packages/qwik/src/core/shared/shared-serialization.ts

@@ -22,7 +22,7 @@ import {
   getStoreHandler,
   getStoreTarget,
   isStore,
-  STORE_ARRAY_PROP,
+  STORE_ALL_PROPS,
 } from '../signal/store';
 import type { ISsrNode, SsrAttrs, SymbolToChunkResolver } from '../ssr/ssr-types';
 import { untrack } from '../use/use-core';
@@ -401,7 +401,7 @@ export const _constants = [
   EMPTY_ARRAY,
   EMPTY_OBJ,
   NEEDS_COMPUTATION,
-  STORE_ARRAY_PROP,
+  STORE_ALL_PROPS,
   Slot,
   Fragment,
   NaN,
@@ -420,7 +420,7 @@ const _constantNames = [
   'EMPTY_ARRAY',
   'EMPTY_OBJ',
   'NEEDS_COMPUTATION',
-  'STORE_ARRAY_PROP',
+  'STORE_ALL_PROPS',
   'Slot',
   'Fragment',
   'NaN',
@@ -1084,8 +1084,8 @@ function serialize(serializationContext: SerializationContext): void {
       output(TypeIds.Constant, Constants.Undefined);
     } 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]);
     }
@@ -1712,7 +1712,7 @@ export const enum Constants {
   EMPTY_ARRAY,
   EMPTY_OBJ,
   NEEDS_COMPUTATION,
-  STORE_ARRAY_PROP,
+  STORE_ALL_PROPS,
   Slot,
   Fragment,
   NaN,

packages/qwik/src/core/shared/shared-serialization.unit.ts

@@ -56,7 +56,7 @@ describe('shared-serialization', () => {
         5 Constant EMPTY_ARRAY
         6 Constant EMPTY_OBJ
         7 Constant NEEDS_COMPUTATION
-        8 Constant STORE_ARRAY_PROP
+        8 Constant STORE_ALL_PROPS
         9 Constant Slot
         10 Constant Fragment
         11 Constant NaN

packages/qwik/src/core/signal/store.ts

@@ -18,7 +18,7 @@ const log = (...args: any[]) => console.log('STORE', ...args.map(qwikDebugToStri
 
 const STORE_TARGET = Symbol('store.target');
 const STORE_HANDLER = Symbol('store.handler');
-export const STORE_ARRAY_PROP = Symbol('store.array');
+export const STORE_ALL_PROPS = Symbol('store.all');
 
 export type TargetType = Record<string | symbol, any>;
 
@@ -113,7 +113,12 @@ export class StoreHandler implements ProxyHandler<TargetType> {
       }
       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
+        );
       }
     }
 
@@ -173,9 +178,9 @@ export class StoreHandler implements ProxyHandler<TargetType> {
       if (ctx) {
         const effectSubscriber = ctx.$effectSubscriber$;
         if (effectSubscriber) {
-          addEffect(
+          addStoreEffect(
             target,
-            Array.isArray(target) ? STORE_ARRAY_PROP : prop,
+            Array.isArray(target) ? STORE_ALL_PROPS : prop,
             this,
             effectSubscriber
           );
@@ -189,7 +194,7 @@ export class StoreHandler implements ProxyHandler<TargetType> {
     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);
   }
@@ -212,7 +217,7 @@ export class StoreHandler implements ProxyHandler<TargetType> {
   }
 }
 
-function addEffect(
+export function addStoreEffect(
   target: TargetType,
   prop: string | symbol,
   store: StoreHandler,
@@ -271,7 +276,7 @@ function getEffects<T extends Record<string | symbol, any>>(
     }
   }
 
-  const storeArrayValue = storeEffects?.get(STORE_ARRAY_PROP);
+  const storeArrayValue = storeEffects?.get(STORE_ALL_PROPS);
   if (storeArrayValue) {
     effectsToTrigger ||= new Set();
     for (const effect of storeArrayValue) {

packages/qwik/src/core/tests/use-task.spec.tsx

@@ -238,6 +238,33 @@ describe.each([
         </Component>
       );
     });
+    it('should track store', async () => {
+      const Counter = component$(() => {
+        const store = useStore({ count: 1, double: 0 });
+        useTask$(({ track }) => {
+          const storeCounter = track(store);
+          store.double = 2 * storeCounter.count;
+        });
+        return <button onClick$={() => store.count++}>{store.double}</button>;
+      });
+
+      const { vNode, document } = await render(<Counter />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <button>
+            <Signal ssr-required>2</Signal>
+          </button>
+        </Component>
+      );
+      await trigger(document.body, 'button', 'click');
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <button>
+            <Signal ssr-required>4</Signal>
+          </button>
+        </Component>
+      );
+    });
 
     it('should unsubscribe from removed component', async () => {
       (global as any).logs = [] as string[];

packages/qwik/src/core/use/use-task.ts

@@ -18,6 +18,13 @@ import { useLexicalScope } from './use-lexical-scope.public';
 import type { ResourceReturnInternal } from './use-resource';
 import { useSequentialScope } from './use-sequential-scope';
 import { getSubscriber } from '../signal/subscriber';
+import {
+  STORE_ALL_PROPS,
+  addStoreEffect,
+  getStoreHandler,
+  getStoreTarget,
+  isStore,
+} from '../signal/store';
 
 export const enum TaskFlags {
   VISIBLE_TASK = 1 << 0,
@@ -188,6 +195,15 @@ export const runTask = (
         return (obj as Record<string, unknown>)[prop];
       } 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);
       }