[Suggestion] Quality of Life improvement on @Input with coerceObservable

[renatoaraujoc]

Hello,

I've just installed version 16, it's a hell of nice work, amazing job!

Problem Solved By The Feature

Right now, we could to pass inputs to components like it's described in the docs:

@Input() set someStringInput(value: string | Observable<string>) {
    this.state.connect('someStringInput', coerceObservable(value));
}

While this works very nicely already, it's cumbersome to re-type the type twice, so I made a little helper here.

Solution

// Declare the wrapper for the input value
type RxInput<T> = Observable<T> | T;

// Decalre this function to route the connect
function rxConnectInput<TState extends object, TStateKey extends keyof TState>(
    state: RxState<TState>,
    key: TStateKey,
    value: RxInput<TState[TStateKey]>
) {
    state.connect(key, coerceObservable(value));
}

// This should be done inside the wrapping class, obviously, but for sake of simplicity, I'm writting like this.
const state = rxState<{ someStringInput: string}(({ set }) => {
    set({
        someStringInput: 'Initial value'
    });
});

@Input() set someStringInput(value: RxInput<string>) {
    rxConnectInput(this.state, 'someStringInput', value);
}

My idea here is just to make things a little bit less boilerplate and more direct to the point, it's working fine here and fully tested.

Renato

[edbzn]

Hey @renatoaraujoc,

What about using @Input({ transform: coerceObservable }) value instead? This way there's less boilerplate, RxInput is not necessary anymore and you just have to call connect.

What do you think?