Add WritableComputed to allow computed with write operations

[Harpush]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Revival with use case of #50498

Currently signal produces a writable signal.
Currently computed produces a non writable signal.
What I am missing is a writableComputed.

Use case example:
I have a required input called value but inside the component I can edit this value without affecting the outside. At the end an apply button is clicked and I emit the new value via an output.
Something like this:

class Test {
  value = input.required<string>();
  tempValue = signal(/*??*/);
  commit = output<string>()

  onEdit(newValue: string) {
    this.tempValue.set(newValue);
  }

  onApply() {
    this.commit.emit(this.tempValue());
  }
}

The first problem is tempValue isn't based on value.
The second problem is when value is changed from outside. At this point I wish to discard tempValue and start fresh with the new value.
If I had writableComputed I could do:

tempValue = writableComputed(() => this.value());

Which means anytime value changes it becomes the new tempValue value. If tempValue is edited the new edit is the tempValue new value until something gets changed in value.

Proposed solution

A new writableComputed which tracks the value inside based on the writeable part and will get reset each time the computed function runs to what it creates.
Examples:

const a = signal(7);
const b = writableComputed(() => a() + 1);
// b is 8

const a = signal(7);
const b = writableComputed(() => a() + 1);
b.set(9);
// A design question - 8 or 9

const a = signal(7);
const b = writableComputed(() => a() + 1);
a.set(11);
b.set(9);
// A design question - 12 or 9

const a = signal(7);
const b = writableComputed(() => a() + 1);
// b is 8
// Later
b.set(10)
// b is 10
// Later
a.set(20);
// b is 21

Alternatives considered

Using effect. The downside is with required inputs.

tempValue = signal<string | undefined>(undefined);
effect(() => this.tempValue.set(this.value()), {allowSignalWrites: true});

This will result in tempValue having undefined initially and for example in ngOnInit it will still have undefined although value already have the actual value set. Also a computed will have its value set too.
using writableComputed in ngOnInit will have the correct computed value.

Another option is that scenario hints that something I am doing is wrong from the basis and I would like to hear better suggestions how to handle it.

[json-derulo]

Did you also consider splitting up your computation and writing logic? Something like the following:

class Test {
  value = input.required<string>();
  writableValue = signal<string | undefined>(undefined);
  computedValue = computed(() => this.writableValue() ?? this.value() + 1);
}

IMHO Angular shouldn't offer a signal which is both computed and writable. It leads to ambiguity, you will never know whether the current value of the signal comes from the computation or from a signal write. Also when the input is updated, the previously set value will be reset, which I assume would be an unintended side effect.

[Harpush]

Did you also consider splitting up your computation and writing logic? Something like the following:

class Test {
  value = input.required<string>();
  writableValue = signal<string | undefined>(undefined);
  computedValue = computed(() => this.writableValue() ?? this.value() + 1);
}

IMHO Angular shouldn't offer a signal which is both computed and writable. It leads to ambiguity, you will never know whether the current value of the signal comes from the computation or from a signal write. Also when the input is updated, the previously set value will be reset, which I assume would be an unintended side effect.

This won't reset neither writableValue nor computedValue when value changes though...
I will still need an effect to reset writableValue when value changes.

[alxhub]

class Test {
  value = input.required<string>();
  // the trick: project the input's value to a `WritableSignal` of that value.
  // when the input changes, the inner `WritableSignal` will be replaced with a new one.
  writableInnerValue = computed(() => signal(this.value()));

  // helper to get rid of the double read
  innerValue = () => this.writableInnerValue()();
  
  setInnerValue(value: string): void {
    // the WritableSignal allows for internal mutation
    this.writableInnerValue().set(value);
  }
}

[JoostK]

Or pulled out into a helper function:

interface MirrorSignal<T> {
  (): T;

  set(value: T);
}

function mirror<T>(outer: Signal<T>): MirrorSignal<T> {
  const inner = computed(() => signal(outer()));
  const mirror: MirrorSignal<T> = () = inner()();
  mirror.set = (value: T) => untracked(inner).set(value);
  return mirror;
}

[Harpush]

Thanks @alxhub and @JoostK!
That seems to answer it mostly although that's not a real signal and I need to implement update fn too.
But it's probably the best I can get :)