[signalStore] Adding extra properties and internal methods on the store instance

[jits]

Is it possible to add extra properties and internal methods on the store instance?

This is one of the really useful things about ComponentStore: since it's a class you can add anything (public, protected or private) and use it internally or externally.

[jits]

Looks like I can define a store as a class, which solves this need.

Example:

type AuthState = { user: User | null };

const _AuthStore = signalStore(
  { providedIn: 'root' },
  withState<AuthState>({ user: null })
);

@Injectable({ providedIn: 'root' })
export class AuthStore extends _AuthStore {
  // Add any extra properties etc. here
}

[markostanimirovic]

What would be a use case where SignalStore should have additional properties that are not methods or computed signals?

[jits]

With the caveat that I'm still at the exploratory phase and figuring out what I can and cannot do with signalStore, and what are the best practices, here are some use cases:

1. Defining public helper properties

Mainly signals wrapped as observables (but could be anything).

Example: a reusable observable that ensures you wait until the store has connected to it's data source / stream:

readonly waitUntilConnected$ = toObservable(this.status).pipe(
  filter((status) => status === 'connected'),
  shareReplay(1),
);

2. Connecting external observables to state

Example:

constructor() {
  this.myService.obs$.pipe(
    tap((value) => patchState(this, { value })),
  );
}

3. Internal methods to be used only within the store (for encapsulation)

Note: I haven't figured out how to actually do this, even with defining the store as a class, because the signal store definition can't access anything from the extended class.

Example: I want to have simple updater functions that are internal to the store and not exposed via the public withMethods, to be used within rxMethod chains etc. Examples:

readonly #setConnecting = (store) => {
  patchState(store, { status: 'connecting', profile: null, error: null });
};

readonly #setError = (store, error: string) => {;
  patchState(store, { status: 'error', profile: null, error });
};

At the moment, I am putting these within the body of the withMethods factory function (so they're only accessible within that context), but that quickly makes that function body long and harder to parse.

[rosostolato]

If we can extend a class and put our signals and methods over there, what are the benefits of using the signal store features, withComputed and withMethods?