refactor(core): improve linkedSignal type definitions, add debugName to options (#63346)

Avcharov · thePunderWoman · commit 8d1891a5323e · 2025-09-23T18:15:49.000Z
Add debugName for having ability to visualize linkedSignal name in devtools signal graph PR Close #63346
diff --git a/goldens/public-api/core/index.api.md b/goldens/public-api/core/index.api.md
@@ -1156,6 +1156,7 @@ export function linkedSignal<S, D>(options: {
         value: NoInfer<D>;
     }) => D;
     equal?: ValueEqualityFn<NoInfer<D>>;
+    debugName?: string;
 }): WritableSignal<D>;
 
 // @public
diff --git a/packages/core/src/render3/reactivity/linked_signal.ts b/packages/core/src/render3/reactivity/linked_signal.ts
@@ -42,6 +42,7 @@ export function linkedSignal<S, D>(options: {
   source: () => S;
   computation: (source: NoInfer<S>, previous?: {source: NoInfer<S>; value: NoInfer<D>}) => D;
   equal?: ValueEqualityFn<NoInfer<D>>;
+  debugName?: string;
 }): WritableSignal<D>;
 
 export function linkedSignal<S, D>(
@@ -50,30 +51,35 @@ export function linkedSignal<S, D>(
         source: () => S;
         computation: ComputationFn<S, D>;
         equal?: ValueEqualityFn<D>;
+        debugName?: string;
       }
     | (() => D),
-  options?: {equal?: ValueEqualityFn<D>},
+  options?: {equal?: ValueEqualityFn<D>; debugName?: string},
 ): WritableSignal<D> {
   if (typeof optionsOrComputation === 'function') {
     const getter = createLinkedSignal<D, D>(
       optionsOrComputation,
       identityFn<D>,
       options?.equal,
     ) as LinkedSignalGetter<D, D> & WritableSignal<D>;
-    return upgradeLinkedSignalGetter(getter);
+    return upgradeLinkedSignalGetter(getter, options?.debugName);
   } else {
     const getter = createLinkedSignal<S, D>(
       optionsOrComputation.source,
       optionsOrComputation.computation,
       optionsOrComputation.equal,
     );
-    return upgradeLinkedSignalGetter(getter);
+    return upgradeLinkedSignalGetter(getter, optionsOrComputation.debugName);
   }
 }
 
-function upgradeLinkedSignalGetter<S, D>(getter: LinkedSignalGetter<S, D>): WritableSignal<D> {
+function upgradeLinkedSignalGetter<S, D>(
+  getter: LinkedSignalGetter<S, D>,
+  debugName?: string,
+): WritableSignal<D> {
   if (ngDevMode) {
     getter.toString = () => `[LinkedSignal: ${getter()}]`;
+    getter[SIGNAL].debugName = debugName;
   }
 
   const node = getter[SIGNAL] as LinkedSignalNode<S, D>;
diff --git a/packages/core/test/signals/linked_signal_spec.ts b/packages/core/test/signals/linked_signal_spec.ts
@@ -46,6 +46,18 @@ describe('linkedSignal', () => {
     expect(firstLetterReadonly()).toBe('c');
   });
 
+  it('should support debugName in options object', () => {
+    const options = signal(['apple', 'banana', 'fig']);
+    const choice = linkedSignal({
+      source: options,
+      computation: (options) => options[0],
+      debugName: 'TestChoice',
+    });
+
+    expect(choice()).toBe('apple');
+    expect(choice.toString()).toBe('[LinkedSignal: apple]');
+  });
+
   it('should update when the source changes', () => {
     const options = signal(['apple', 'banana', 'fig']);
     const choice = linkedSignal({
