Help with Typings needed

[markusahrweileramcon]

I want to create features for my stores.

I started with a simple one, which didn't need typing.
Now I've created a feature which works like withMethods with a factory wich receives the store as argument.

I have no idea, how to type the store for the factory correctly, since all interfaces which are used in withMethods are not exported.
I've came up with a working solution, where I needed to import directly from the src directory.
But this solution gives no access to store features, which were added before this feature.

import { patchState, signalStoreFeature, StateSignal, type, withMethods } from '@ngrx/signals';
import { inject, Type } from '@angular/core';
import { Observable } from 'rxjs';
import { ErrorType, setError, setLoaded, setLoading } from '../call-state';
import { SignalStoreFeatureResult, SignalStoreSlices } from '@ngrx/signals/src/signal-store-models';
import { Prettify } from '@ngrx/signals/src/ts-helpers';

function _setItem<T>(store: StateSignal<any> & { clearStack?: () => void }, item: T | null, clear: boolean) {

    patchState(store, { item, ...setLoaded() });
    if (clear && store.clearStack)
        store.clearStack();
}

function _setError<T>(store: StateSignal<any> & { clearStack?: () => void }, error: ErrorType) {

    patchState(store, { item: null, ...setError(error) });
    if (store.clearStack)
        store.clearStack();
}

type CrdMethodsFactory<Input extends SignalStoreFeatureResult, T, C, S> = (store: Prettify<SignalStoreSlices<Input['state']> & Input['signals'] & Input['methods'] & StateSignal<Prettify<Input['state']>>>) => CrdMethods<T, C, S>;

type CrdMethods<T, C, S> = {
    getter: (client: S, id: string) => Observable<T>,
    creator: (client: S, item: C) => Observable<string>
}

export function withCrd<Input extends SignalStoreFeatureResult, T, C, S>(factory: CrdMethodsFactory<Input, T, C, S>, service: Type<S>) {

    return signalStoreFeature(
        {
            state: {
                id: type<string | null>(),
                item: type<T | null>()
            }
        },
        withMethods(store => {

            // @ts-ignore
            const result = factory(store);
            const client = inject(service);

            return {

                setId(id: string | null) {

                    const changed = store.id() !== id;
                    patchState(store, { id, ...setLoading() });

                    if (id)
                        result.getter(client, id).subscribe({
                            next: item => _setItem(store, item, changed),
                            error: error => _setError(store, error)
                        });
                    else
                        _setItem(store, null, true);
                },
                create(item: C) {
                    return result.creator(client, item);
                }
            };
        })
    );
}

export const ExampleStore = signalStore(
    { providedIn: 'root' },
    withMethods(store => ({
        _updateRelations(data: any) {
            /* request other data */
            return of(data)
        }
    })),
    withCrd(store => ({
        getter: (client, id) => client.get(id).pipe(
            switchMap(data => store._updateRelations(data)) // <- compile error since _updateRelations is type of () => unknown
        ),
        creator: (client, request: any) => client.create(request)
    }), Client)
)

[rainerhahnekamp]

Hey @markusahrweileramcon, could you maybe set that one up with the official StackBlitz version at https://stackblitz.com/github/ngrx/signal-store-starter?file=src%2Fmain.ts?

[markusahrweileramcon]

@rainerhahnekamp here you go
https://stackblitz.com/edit/github-swmcpq-o7lkx7?file=src%2Fwith-crd.feature.ts

[rainerhahnekamp]

Here's my current status: https://stackblitz.com/edit/github-swmcpq-ctbfgr?file=src%2Fwith-crd.feature.ts

It works without importing internal stuff but the type inference for the store in your factory doesn't work. Let me know if you managed to fix it. Would be curious.

In the meantime, I try out a different approach.

[rainerhahnekamp]

And here's a prototype of a working, alternate version: https://stackblitz.com/edit/github-sf729z?file=src%2Fspecial-store.ts

A little bit clumsy, but hopefully a good starting point. Let me know, if I should investigate more time in improving it.

[markusahrweileramcon]

Did you have time to investigate?

[rainerhahnekamp]

You mean in terms of improving?

Because I don't loose the types. That seems to work as expected:

[markusahrweileramcon]

Ok, I'm not sure, what I did wrong in the first place, but with a git rollback and fresh mind, it works.
Interesting, that this can't be achieved with signalStoreFeature.
I don't really like the casting to as Parameters<typeof feature>[0] either, but I can live with that

[markusahrweileramcon]

If you can improve it, I would be happy to see the result
I have just created new types to reuse

[rainerhahnekamp]

Yeah, I was thinking about a generic approach but these TypeScript issues seem to consume so much time, once you start with them.

[markusahrweileramcon]

Thanks for your reply.

I realized, that i was still on the 18 beta version.
But if I use your example, I lose the typing of the previous added features after the new feature. (hard to explain)

https://stackblitz.com/edit/github-sf729z-dqd3ha?file=src%2Fspecial-store.ts
If you scroll down to the end, I've added another withMethods and this has forgotten, that _log exists.
On the other hat, the type of the store in the returned function from withSignalStoreFactory is any. In the best case, this can be prevented