Dynamic "with" feature based on prop value

[blackholegalaxy]

Hi! We use signal store in our app. It's working like a charm. We didn't manage to achieve something though. It occured while implementing withDevTools from @angular-architects/ngrx-toolkit but it could benefit other cases.

In the case of withDevTools, we want to disable it on production. BUT we don't want to use environment.ts since our stores are in a separate library and it doesn't "know" there is a environment data. To expose environment to lib, we use a configService with injection token.

So basically we have:

export const CompaniesStore = signalStore(
  { providedIn: 'root' },

  withState(companiesInitialState),

  withProps(() => ({
   configService: inject(ConfigService),
  })),

  withDevtools('companies', withGlitchTracking()),
  
  ...
  }

We wonder if there is some syntax somewhere to achieve this pseudo code:

export const CompaniesStore = signalStore(
  { providedIn: 'root' },

  withState(companiesInitialState),

  withProps(() => ({
   configService: inject(ConfigService),
  })),

  // dynamically loading a "with" feature while using store current state and props
  ({ configService }) => configService.isProd
    ? withDevToolsStub('companies')
    : withDevtools('companies', withGlitchTracking()),
  
  ...
  }

[rainerhahnekamp]

@blackholegalaxy, yeah that would work with a new withCondition:

const ConditionalStoreWithFeatures = signalStore(
  withCondition(isDev, withUser(), withFakeUser())
);

const ConditionalStoreWithoutFeatures = signalStore(
  withCondition(isDev, withDevtools('store'), emptyFeatures)
);

---

Here's the full example https://stackblitz.com/edit/github-3sl45keu?file=src%2Fquiz.store.ts

function withCondition<
  Input extends SignalStoreFeatureResult,
  Output extends SignalStoreFeatureResult
>(
  condition: (
    store: Input['state'] & Input['props'] & Input['methods']
  ) => boolean,
  featureIfTrue: SignalStoreFeature<Input, Output>,
  featureIfFalse: SignalStoreFeature<Input, NoInfer<Output>>
): SignalStoreFeature<Input, Output> {
  return (store) => {
    const conditionStore = {
      ...store['stateSignals'],
      ...store['props'],
      ...store['methods'],
    };
    if (condition(conditionStore)) {
      return featureIfTrue(store);
    } else {
      return featureIfFalse(store);
    }
  };
}

function withUser() {
  return signalStoreFeature(
    withState({ id: 1, name: 'Konrad' }),
    withMethods((store) => ({
      load(): boolean {
        /// here we would have a lot of logic()
        return true;
      },
    }))
  );
}

function withFakeUser() {
  return signalStoreFeature(
    withState({ id: 0, name: '' }),
    withMethods(() => ({
      load(): boolean {
        return false;
      },
    }))
  );
}

const emptyFeatures = signalStoreFeature(withState({}));
const isDev = () => Math.random() >= 0.5;

export const ConditionalStoreWithFeatures = signalStore(
  withCondition(isDev, withUser(), withFakeUser())
);

export const ConditionalStoreWithoutFeatures = signalStore(
  withCondition(isDev, withDevtools('store'), emptyFeatures)
);

const quizStore = new ConditionalStoreWithFeatures();
const id = quizStore.id;
const name = quizStore.name;
quizStore.load();

I might have to ask the team, if they want see that landing in core. Since it might be an edge case, it is better suited for community projects like the one which delivered you already the devtools 😊

[blackholegalaxy]

That's great! I only encounter a type error: if you try in condition method to use store which should be passed as input, it sees store as {}

https://stackblitz.com/edit/github-3sl45keu-9ln81x4o?file=src%2Fquiz.store.ts%3AL66

[rainerhahnekamp]

I've applied a fix. New version:

function withCondition<
  Input extends SignalStoreFeatureResult,
  Output extends SignalStoreFeatureResult
>(
  condition: (
    store: StateSignals<Input['state']> & Input['props'] & Input['methods']
  ) => boolean,
  featureIfTrue: SignalStoreFeature<NoInfer<Input>, Output>,
  featureIfFalse: SignalStoreFeature<NoInfer<Input>, NoInfer<Output>>
): SignalStoreFeature<Input, Output> {
  return (store) => {
    const conditionStore = {
      ...store['stateSignals'],
      ...store['props'],
      ...store['methods'],
    };
    if (condition(conditionStore)) {
      return featureIfTrue(store);
    } else {
      return featureIfFalse(store);
    }
  };
}

[blackholegalaxy]

Seems to get the job done. We could add this in examples for custom features. Thank you very much as usual.

[rainerhahnekamp]

Thanks.

We could add this in examples for custom features

Well, I think it would be even better if it becomes part of the toolkit. Do you want to provide a PR for it?

[blackholegalaxy]

Why not. I'll try to make it relevant.

[markostanimirovic]

Ternary operator can also be used directly (without withCondition):

const EMPTY_FEATURE = signalStoreFeature(withState({}));

const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods((store) => ({
    increment(): void {
      patchState(store, (state) => ({ count: state.count + 1 }));
    },
  })),
  isDevMode() ? withDevtools('counter') : EMPTY_FEATURE
);

Here is the full example: https://stackblitz.com/edit/github-qwnvt6yt?file=src%2Fmain.ts

We'll consider adding the EMPTY_FEATURE constant to the public API.