refactor(core): add debugName option to rxjs-interop toSignal

toSignal predates the debugName option for signals to name the signals in the Angular dev-tools This adds the debugName option to toSignal.

Author: meDavidNS

goldens/public-api/core/rxjs-interop/index.api.md

@@ -71,6 +71,7 @@ export function toSignal<T, const U extends T>(source: Observable<T> | Subscriba
 
 // @public
 export interface ToSignalOptions<T> {
+    debugName?: string;
     equal?: ValueEqualityFn_2<T>;
     initialValue?: unknown;
     injector?: Injector;

packages/core/rxjs-interop/src/to_signal.ts

@@ -68,6 +68,11 @@ export interface ToSignalOptions<T> {
    * Equality comparisons are executed against the initial value if one is provided.
    */
   equal?: ValueEqualityFn<T>;
+
+  /**
+   * A debug name for the signal. Used in Angular DevTools to identify the signal.
+   */
+  debugName?: string;
 }
 
 // Base case: no options -> `undefined` in the result type.
@@ -149,12 +154,15 @@ export function toSignal<T, U = undefined>(
   let state: WritableSignal<State<T | U>>;
   if (options?.requireSync) {
     // Initially the signal is in a `NoValue` state.
-    state = signal({kind: StateKind.NoValue}, {equal});
+    state = signal(
+      {kind: StateKind.NoValue},
+      {equal, ...(ngDevMode ? createDebugNameObject(options?.debugName, 'state') : undefined)},
+    );
   } else {
     // If an initial value was passed, use it. Otherwise, use `undefined` as the initial value.
     state = signal<State<T | U>>(
       {kind: StateKind.Value, value: options?.initialValue as U},
-      {equal},
+      {equal, ...(ngDevMode ? createDebugNameObject(options?.debugName, 'state') : undefined)},
     );
   }
 
@@ -209,7 +217,10 @@ export function toSignal<T, U = undefined>(
           );
       }
     },
-    {equal: options?.equal},
+    {
+      equal: options?.equal,
+      ...(ngDevMode ? createDebugNameObject(options?.debugName, 'source') : undefined),
+    },
   );
 }
 
@@ -220,6 +231,18 @@ function makeToSignalEqual<T>(
     a.kind === StateKind.Value && b.kind === StateKind.Value && userEquality(a.value, b.value);
 }
 
+/**
+ * Creates a debug name object for an internal toSignal signal.
+ */
+function createDebugNameObject(
+  toSignalDebugName: string | undefined,
+  internalSignalDebugName: string,
+): {debugName?: string} {
+  return {
+    debugName: `toSignal${toSignalDebugName ? '#' + toSignalDebugName : ''}.${internalSignalDebugName}`,
+  };
+}
+
 const enum StateKind {
   NoValue,
   Value,

packages/core/rxjs-interop/test/BUILD.bazel

@@ -7,6 +7,7 @@ ts_project(
     deps = [
         "//:node_modules/rxjs",
         "//packages/core",
+        "//packages/core/primitives/signals",
         "//packages/core/rxjs-interop",
         "//packages/core/testing",
         "//packages/private/testing",

packages/core/rxjs-interop/test/to_signal_spec.ts

@@ -26,6 +26,7 @@ import {
   Subscribable,
   Unsubscribable,
 } from 'rxjs';
+import {ReactiveNode, SIGNAL} from '../../primitives/signals';
 
 describe('toSignal()', () => {
   it(
@@ -42,6 +43,28 @@ describe('toSignal()', () => {
     }),
   );
 
+  it(
+    'should set debugName when a debugName is provided',
+    test(() => {
+      const counter$ = new BehaviorSubject(0);
+      const counter = toSignal(counter$, {debugName: 'counterSignal'});
+      const node = counter[SIGNAL] as ReactiveNode;
+
+      expect(node.debugName).toBe('toSignal#counterSignal.source');
+    }),
+  );
+
+  it(
+    'should set debugName when a debugName is provided together with requireSync',
+    test(() => {
+      const counter$ = new BehaviorSubject(0);
+      const counter = toSignal(counter$, {debugName: 'counterSignal', requireSync: true});
+      const node = counter[SIGNAL] as ReactiveNode;
+
+      expect(node.debugName).toBe('toSignal#counterSignal.source');
+    }),
+  );
+
   it(
     'should notify when the last emitted value of an Observable changes',
     test(() => {