add store toJSON

Author: Varixo

packages/qwik/src/core/v2/signal/v2-signal.ts

@@ -213,7 +213,7 @@ export class Signal2<T = any> extends Subscriber implements ISignal2<T> {
   toString() {
     return (
       `[${this.constructor.name}${(this as any).$invalid$ ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
-        this.$effects$?.map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    ')).join('\n') || ''
+      (this.$effects$?.map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    ')).join('\n') || '')
     );
   }
   toJSON() {

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

@@ -1,5 +1,6 @@
 import { pad, qwikDebugToString } from '../../debug';
 import { assertTrue } from '../../error/assert';
+import { _wrapProp } from '../../state/signal';
 import { tryGetInvokeContext } from '../../use/use-core';
 import { isSerializableObject } from '../../util/types';
 import { SERIALIZER_PROXY_UNWRAP } from '../shared/shared-serialization';
@@ -121,6 +122,18 @@ export class StoreHandler<T extends Record<string | symbol, any>> implements Pro
       // we will return the naked object which removes ourselves,
       // and that is not the intention so prevent of SERIALIZER_PROXY_UNWRAP.
       return undefined;
+    } else if (p === 'toJSON') {
+      return () => {
+        // we need to add subscription to all properties
+        // TODO: could this be done another way?
+        for (const key in this.$target$) {
+          if (isStore2(this.$target$[key])) {
+            continue;
+          }
+          this.get(this.$target$, key);
+        }
+        return this.$target$;
+      };
     }
     const target = this.$target$;
     const ctx = tryGetInvokeContext();

packages/qwik/src/core/v2/tests/use-store.spec.tsx

@@ -466,6 +466,73 @@ describe.each([
     );
   });
 
+  it('should render value via JSON.stringify', async () => {
+    const Stringify = component$<{
+      data: any;
+      style?: any;
+    }>((props) => {
+      return <>{JSON.stringify(props.data)}</>;
+    });
+
+    const Cmp = component$(() => {
+      const group = useStore({
+        controls: {
+          ctrl: {
+            value: '',
+          },
+        },
+      });
+
+      return (
+        <button onClick$={() => (group.controls.ctrl.value = 'test')}>
+          <Stringify data={group} />
+          <Stringify data={group.controls} />
+          <Stringify data={group.controls.ctrl} />
+          <Stringify data={group.controls.ctrl.value} />
+        </button>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <button>
+          <Component>
+            <Signal>{'{"controls":{"ctrl":{"value":""}}}'}</Signal>
+          </Component>
+          <Component>
+            <Signal>{'{"ctrl":{"value":""}}'}</Signal>
+          </Component>
+          <Component>
+            <Signal>{'{"value":""}'}</Signal>
+          </Component>
+          <Component>
+            <Signal>{'""'}</Signal>
+          </Component>
+        </button>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <button>
+          <Component>
+            <Signal>{'{"controls":{"ctrl":{"value":"test"}}}'}</Signal>
+          </Component>
+          <Component>
+            <Signal>{'{"ctrl":{"value":"test"}}'}</Signal>
+          </Component>
+          <Component>
+            <Signal>{'{"value":"test"}'}</Signal>
+          </Component>
+          <Component>
+            <Signal>{'"test"'}</Signal>
+          </Component>
+        </button>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#5597 - should update value', async () => {
       (globalThis as any).clicks = 0;