How to distinguish a function and a signalStoreFeature ?

[ronnain]

Hi,

It looks like there is no way to detect a random function and a signalStorefeature at runtime (at Typing Level it is possible).

Do you have an idea how I can do that ?
If there is a signalStoreFeature assigned to a constant, how can I check if it is really a signalStoreFeature and not a random function?

Problem

As you can check in this demo, when you log const simpleFunction = (data: { id: number }) => ({ data }); and const mySignalStoreFeature = signalStoreFeature(withState({ id: '3' }));.

There is nothing to use to distinguish if it is a signalStoreFeature.

Idea to solve that

I hope you know a way; otherwise, I think the signalStoreFeature can be branded (like Signals are).
And instead of returning a regular function, it will also return a brand that we can be used to check if the function is a signalStoreFeature.

I am not totally sure about this solution works, but if it can, there is no regression with the existing features.

What do you think?

Edit

Something like this helper can be used:

export const __INTERNAL_QueryBrand: unique symbol = Symbol(
  '__INTERNAL_QueryBrand'
);

export type HasQueryBrand<T> = typeof __INTERNAL_QueryBrand extends keyof T
  ? true
  : false;

export function brandQueryFunction<F extends (...args: any[]) => any>(
  fn: F
): F & { [__INTERNAL_QueryBrand]: true } {
  // Attach a non-enumerable brand if you prefer DefineProperty; Object.assign is fine too
  return Object.assign(fn, { [__INTERNAL_QueryBrand]: true as const });
}

export function isBrandQueryFn(fn: unknown): boolean {
  return (
    typeof fn === 'function' && (fn as any)[__INTERNAL_QueryBrand] === true
  );
}

[rainerhahnekamp]

signalStoreFeature generates a function that takes the Store as its parameter. And as you know, a function is just a function - there’s no real way to distinguish one from another at runtime.

Signals are a bit different: they act like functions but are also objects. One reason for their branding is to prevent people from inventing their own Signal type 😉 - but that’s not a requirement for us here.

So my first question would be: why do you need this distinction?

[ronnain]

I am creating a server-state management tool around the signalStore (a bit like TanStackQuery plugged into the signalStore).

It is still experimental, but I would like to propose a function ServerStateStore that can be used to create a specific feature dedicated to handling a server state.
It can be local or global (providedIn:"roor" or not).

Here are some snippets:

// Local, should be provided
const { UserServerStateStore, withUserServerState } = ServerStateStore(
      'user',
      signalStoreFeature(
        withMutation('updateName', () =>
          rxMutation({
            method: (user: User) => user,
            stream: ({ params: user }) => of(user),
          })
        ),
        withQuery('user', () =>
          rxQuery({
            params: () => '1',
            stream: ({ params }) =>
              of({
                id: params,
                name: 'Romain',
              }),
          })
        )
      )
    );

// Global
const { UserServerStateStore, withUserServerState } = ServerStateStore(
      'user',
      signalStoreFeature(
        withMutation('updateName', () =>
          rxMutation({
            method: (user: User) => user,
            stream: ({ params: user }) => of(user),
          })
        ),
        withQuery('user', () =>
          rxQuery({
            params: () => '1',
            stream: ({ params }) =>
              of({
                id: params,
                name: 'Romain',
              }),
          })
        ),
        withProps(() => {
          instanceCount++;
          return {};
        })
      ),
      {
        providedIn: 'root',
      }
    );

Problem case

But in some cases, I would like to propose a simple way to pass some entries to this server state store

const { injectUserServerState, withUserServerState } = ServerStateStore(
      'user',
     // 👇 data can be provided where injectUserServerState, withUserServerState is used
      (data: SignalProxy<{ selectedId: string | undefined }>) =>
        signalStoreFeature(
          withMutation('updateName', () =>
            rxMutation({
              method: (user: User) => user,
              stream: ({ params: user }) => of(user),
            })
          ),
          withQuery('user', () => {
            return rxQuery({
              params: data.selectedId,
              stream: ({ params }) =>
                of({
                  id: params,
                  name: 'Romain',
                }),
            });
          })
        ),
      {
        isPluggable: true, // 👈 Because I cannot detect if the previous parameter is a signalStoreFeature or a function that return a signalStoreFeature
      }
    );
    
  // How it can be used

// In a component, to link an input (for example that can retrieved an id in the url)

readonly userId = input<string>()
private readonly userServerStateStore = injectUserServerState({
        selectedId: this.userId,
      });
      
  // Or in a signalStore or feature

signalStore(withState({userId: '1'}), withUserServerState((store) => {
        selectedId: store.userId,
      }))

Alternative

An alternative, that I can use, is to create a custom function like signalStoreFeature but only for my case that will just wrap the signalStoreFeature and brand it.

I do not know if my examples are explicit enough.
If you have more questions, tell me.

[rainerhahnekamp]

Can't you do that via ServerStateStore? You have full control over all parameters and can therefore come up with constraints where your users can only use a signalStoreFeature function. You would have to check out the signature of signalStoreFeature and reuse that in ServerStateStore.