fix(core): add toString implementation to signals (#54002)

Since signals are function, currently stringifying them reveals the implementation of the function. This can lead to confusion since it contains internal implementation details. These changes add static `toString` function to address the issue.

**Note:** it's tempting to have `toString` output the actual value of the signal, but that would encourage users not to call the function which will be problematic in the long run. That's why these changes are using a static string instead.

PR Close #54002

packages/core/primitives/signals/src/computed.ts

@@ -40,6 +40,9 @@ export type ComputedGetter<T> = (() => T)&{
   [SIGNAL]: ComputedNode<T>;
 };
 
+/** Function used as the `toString` implementation of computed. */
+const computedToString = () => '[COMPUTED]';
+
 /**
  * Create a computed signal which derives a reactive value from an expression.
  */
@@ -61,6 +64,7 @@ export function createComputed<T>(computation: () => T): ComputedGetter<T> {
     return node.value;
   };
   (computed as ComputedGetter<T>)[SIGNAL] = node;
+  computed.toString = computedToString;
   return computed as unknown as ComputedGetter<T>;
 }
 

packages/core/primitives/signals/src/signal.ts

@@ -35,6 +35,9 @@ export interface SignalGetter<T> extends SignalBaseGetter<T> {
   readonly[SIGNAL]: SignalNode<T>;
 }
 
+/** Function used as the `toString` implementation of signals. */
+const signalToString = () => '[SIGNAL]';
+
 /**
  * Create a `Signal` that can be set or updated directly.
  */
@@ -46,6 +49,7 @@ export function createSignal<T>(initialValue: T): SignalGetter<T> {
                    return node.value;
                  }) as SignalGetter<T>;
   (getter as any)[SIGNAL] = node;
+  getter.toString = signalToString;
   return getter;
 }
 

packages/core/src/authoring/input_signal.ts

@@ -68,6 +68,9 @@ export interface InputSignal<ReadT, WriteT = ReadT> extends Signal<ReadT> {
   [ɵINPUT_SIGNAL_BRAND_WRITE_TYPE]: WriteT;
 }
 
+/** Function used as the `toString` implementation of input signals. */
+const signalInputToString = () => '[INPUT_SIGNAL]';
+
 /**
  * Creates an input signal.
  *
@@ -99,5 +102,6 @@ export function createInputSignal<ReadT, WriteT>(
   }
 
   (inputValueFn as any)[SIGNAL] = node;
+  inputValueFn.toString = signalInputToString;
   return inputValueFn as InputSignal<ReadT, WriteT>;
 }

packages/core/src/render3/query_reactive.ts

@@ -18,6 +18,9 @@ import {collectQueryResults, getTQuery, loadQueryInternal, materializeViewResult
 import {Signal} from './reactivity/api';
 import {getLView} from './state';
 
+/** Function used as the `toString` implementation of query signals. */
+const querySignalToString = () => '[QUERY_SIGNAL]';
+
 function createQuerySignalFn<V>(firstOnly: true, required: true): Signal<V>;
 function createQuerySignalFn<V>(firstOnly: true, required: false): Signal<V|undefined>;
 function createQuerySignalFn<V>(firstOnly: false, required: false): Signal<ReadonlyArray<V>>;
@@ -45,6 +48,7 @@ function createQuerySignalFn<V>(firstOnly: boolean, required: boolean) {
     }
   }
   (signalFn as any)[SIGNAL] = node;
+  signalFn.toString = querySignalToString;
 
   return signalFn;
 }

packages/core/test/authoring/input_signal_spec.ts

@@ -79,4 +79,9 @@ describe('input signal', () => {
     node.applyValueToInputSignal(node, 1);
     expect(expr()).toBe(1001);
   });
+
+  it('should have a toString implementation', () => {
+    const signal = input(0);
+    expect(signal + '').toBe('[INPUT_SIGNAL]');
+  });
 });

packages/core/test/signals/computed_spec.ts

@@ -186,4 +186,10 @@ describe('computed', () => {
 
     expect(illegal).toThrow();
   });
+
+  it('should have a toString implementation', () => {
+    const counter = signal(0);
+    const double = computed(() => counter() * 2);
+    expect(double + '').toBe('[COMPUTED]');
+  });
 });

packages/core/test/signals/signal_spec.ts

@@ -123,6 +123,11 @@ describe('signals', () => {
     expect(double()).toBe(4);
   });
 
+  it('should have a toString implementation', () => {
+    const state = signal(false);
+    expect(state + '').toBe('[SIGNAL]');
+  });
+
   describe('optimizations', () => {
     it('should not repeatedly poll status of a non-live node if no signals have changed', () => {
       const unrelated = signal(0);