fix(core): return a readonly signal on asReadonly. (#54719)

JeanMeche · pkozlowski-opensource · commit 443e5f159189 · 2024-03-06T15:18:51.000+01:00
Previous `asReadonly()` returned the signal value and not the signal itself. Fixes #54704 PR Close #54719
diff --git a/packages/core/src/authoring/model/model_signal.ts b/packages/core/src/authoring/model/model_signal.ts
@@ -10,7 +10,7 @@ import {producerAccessed, SIGNAL, signalSetFn} from '@angular/core/primitives/si
 
 import {RuntimeError, RuntimeErrorCode} from '../../errors';
 import {Signal} from '../../render3/reactivity/api';
-import {WritableSignal} from '../../render3/reactivity/signal';
+import {signalAsReadonlyFn, WritableSignal} from '../../render3/reactivity/signal';
 import {ɵINPUT_SIGNAL_BRAND_READ_TYPE, ɵINPUT_SIGNAL_BRAND_WRITE_TYPE} from '../input/input_signal';
 import {INPUT_SIGNAL_NODE, InputSignalNode, REQUIRED_UNSET_VALUE} from '../input/input_signal_node';
 
@@ -71,7 +71,7 @@ export function createModelSignal<T>(initialValue: T): ModelSignal<T> {
   }
 
   (getter as any)[SIGNAL] = node;
-  (getter as any).asReadonly = (() => getter()) as Signal<T>;
+  (getter as any).asReadonly = signalAsReadonlyFn.bind(getter as any) as () => Signal<T>;
 
   getter.set = (newValue: T) => {
     if (!node.equal(node.value, newValue)) {
diff --git a/packages/core/src/render3/reactivity/signal.ts b/packages/core/src/render3/reactivity/signal.ts
@@ -81,7 +81,7 @@ export function signal<T>(initialValue: T, options?: CreateSignalOptions<T>): Wr
   return signalFn as WritableSignal<T>;
 }
 
-function signalAsReadonlyFn<T>(this: SignalGetter<T>): Signal<T> {
+export function signalAsReadonlyFn<T>(this: SignalGetter<T>): Signal<T> {
   const node = this[SIGNAL] as SignalNode<T>& {readonlyFn?: Signal<T>};
   if (node.readonlyFn === undefined) {
     const readonlyFn = () => this();
diff --git a/packages/core/test/authoring/model_input_spec.ts b/packages/core/test/authoring/model_input_spec.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {computed} from '@angular/core';
+import {computed, isSignal, WritableSignal} from '@angular/core';
 import {model} from '@angular/core/src/authoring/model/model';
 import {ModelSignal} from '@angular/core/src/authoring/model/model_signal';
+import {TestBed} from '@angular/core/testing';
 
 /**
  * Utility type representing a signal that can be subscribed to. This is already captured
@@ -44,6 +45,16 @@ describe('model signal', () => {
     expect(signal()).toBe(18);
   });
 
+  it('should return readonly signal', () => {
+    const signal = model(2);
+    const readOnly = signal.asReadonly();
+
+    expect(isSignal(readOnly)).toBeTrue();
+    expect(readOnly()).toBe(2);
+    expect((readOnly as WritableSignal<unknown>).set).toBeUndefined();
+    expect((readOnly as WritableSignal<unknown>).update).toBeUndefined();
+  });
+
   it('should emit when the value changes', () => {
     const signal = model(1) as SubscribableSignal<number>;
     const values: number[] = [];

Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ export function signal<T>(initialValue: T, options?: CreateSignalOptions<T>): Wr`
`81`	`81`	`return signalFn as WritableSignal<T>;`
`82`	`82`	`}`
`83`	`83`
`84`		`-function signalAsReadonlyFn<T>(this: SignalGetter<T>): Signal<T> {`
	`84`	`+export function signalAsReadonlyFn<T>(this: SignalGetter<T>): Signal<T> {`
`85`	`85`	`const node = this[SIGNAL] as SignalNode<T>& {readonlyFn?: Signal<T>};`
`86`	`86`	`if (node.readonlyFn === undefined) {`
`87`	`87`	`const readonlyFn = () => this();`