@angular-architects/ngrx-toolkit 0.0.7 → 0.1.0

package/src/lib/with-data-service.ts

@@ -0,0 +1,312 @@
+import { ProviderToken, Signal, computed, inject } from "@angular/core";
+import { SignalStoreFeature, patchState, signalStoreFeature, withComputed, withMethods, withState } from "@ngrx/signals";
+import { CallState, getCallStateKeys, setError, setLoaded, setLoading } from "./with-call-state";
+import { setAllEntities, EntityId, addEntity, updateEntity, removeEntity } from "@ngrx/signals/entities";
+import { EntityState, NamedEntitySignals } from "@ngrx/signals/entities/src/models";
+import { StateSignal } from "@ngrx/signals/src/state-signal";
+import { Emtpy } from "./shared/empty";
+
+export type Filter = Record<string, unknown>;
+export type Entity = { id: EntityId };
+
+export interface DataService<E extends Entity, F extends Filter> {
+    load(filter: F): Promise<E[]>;
+    loadById(id: EntityId): Promise<E>;
+    create(entity: E): Promise<E>;
+    update(entity: E): Promise<E>;
+    updateAll(entity: E[]): Promise<E[]>;
+    delete(entity: E): Promise<void>;
+}
+
+export function capitalize(str: string): string {
+    return str ? str[0].toUpperCase() + str.substring(1) : str;
+}
+
+export function getDataServiceKeys(options: { collection?: string }) {
+    const filterKey = options.collection ? `${options.collection}Filter` : 'filter';
+    const selectedIdsKey = options.collection ? `selected${capitalize(options.collection)}Ids` : 'selectedIds';
+    const selectedEntitiesKey = options.collection ? `selected${capitalize(options.collection)}Entities` : 'selectedEntities';
+
+    const updateFilterKey = options.collection ? `update${capitalize(options.collection)}Filter` : 'updateFilter';
+    const updateSelectedKey = options.collection ? `updateSelected${capitalize(options.collection)}Entities` : 'updateSelected';
+    const loadKey = options.collection ? `load${capitalize(options.collection)}Entities` : 'load';
+
+    const currentKey = options.collection ? `current${capitalize(options.collection)}` : 'current';
+    const loadByIdKey = options.collection ? `load${capitalize(options.collection)}ById` : 'loadById';
+    const setCurrentKey = options.collection ? `setCurrent${capitalize(options.collection)}` : 'setCurrent';
+    const createKey = options.collection ? `create${capitalize(options.collection)}` : 'create';
+    const updateKey = options.collection ? `update${capitalize(options.collection)}` : 'update';
+    const updateAllKey = options.collection ? `updateAll${capitalize(options.collection)}` : 'updateAll';
+    const deleteKey = options.collection ? `delete${capitalize(options.collection)}` : 'delete';
+
+    // TODO: Take these from @ngrx/signals/entities, when they are exported
+    const entitiesKey = options.collection ? `${options.collection}Entities` : 'entities';
+    const entityMapKey = options.collection ? `${options.collection}EntityMap` : 'entityMap';
+    const idsKey = options.collection ? `${options.collection}Ids` : 'ids';
+
+    return {
+        filterKey,
+        selectedIdsKey,
+        selectedEntitiesKey,
+        updateFilterKey,
+        updateSelectedKey,
+        loadKey,
+        entitiesKey,
+        entityMapKey,
+        idsKey,
+
+        currentKey,
+        loadByIdKey,
+        setCurrentKey,
+        createKey,
+        updateKey,
+        updateAllKey,
+        deleteKey
+    };
+}
+
+export type NamedDataServiceState<E extends Entity, F extends Filter, Collection extends string> =
+    {
+        [K in Collection as `${K}Filter`]: F;
+    } & {
+        [K in Collection as `selected${Capitalize<K>}Ids`]: Record<EntityId, boolean>;
+    } & {
+        [K in Collection as `current${Capitalize<K>}`]: E;
+    }
+
+export type DataServiceState<E extends Entity, F extends Filter> = {
+    filter: F;
+    selectedIds: Record<EntityId, boolean>;
+    current: E;
+}
+
+export type NamedDataServiceSignals<E extends Entity, Collection extends string> =
+    {
+        [K in Collection as `selected${Capitalize<K>}Entities`]: Signal<E[]>;
+    }
+
+export type DataServiceSignals<E extends Entity> =
+    {
+        selectedEntities: Signal<E[]>;
+    }
+
+export type NamedDataServiceMethods<E extends Entity, F extends Filter, Collection extends string> =
+    {
+        [K in Collection as `update${Capitalize<K>}Filter`]: (filter: F) => void;
+    } &
+    {
+        [K in Collection as `updateSelected${Capitalize<K>}Entities`]: (id: EntityId, selected: boolean) => void;
+    } &
+    {
+        [K in Collection as `load${Capitalize<K>}Entities`]: () => Promise<void>;
+    } &
+
+    {
+        [K in Collection as `setCurrent${Capitalize<K>}`]: (entity: E) => void;
+    } &
+    {
+        [K in Collection as `load${Capitalize<K>}ById`]: (id: EntityId) => Promise<void>;
+    } &
+    {
+        [K in Collection as `create${Capitalize<K>}`]: (entity: E) => Promise<void>;
+    } &
+    {
+        [K in Collection as `update${Capitalize<K>}`]: (entity: E) => Promise<void>;
+    } &
+    {
+        [K in Collection as `updateAll${Capitalize<K>}`]: (entity: E[]) => Promise<void>;
+    } &
+    {
+        [K in Collection as `delete${Capitalize<K>}`]: (entity: E) => Promise<void>;
+    };
+
+
+export type DataServiceMethods<E extends Entity, F extends Filter> =
+    {
+        updateFilter: (filter: F) => void;
+        updateSelected: (id: EntityId, selected: boolean) => void;
+        load: () => Promise<void>;
+
+        setCurrent(entity: E): void;
+        loadById(id: EntityId): Promise<void>;
+        create(entity: E): Promise<void>;
+        update(entity: E): Promise<void>;
+        updateAll(entities: E[]): Promise<void>;
+        delete(entity: E): Promise<void>;
+    }
+
+export type Empty = Record<string, never>
+
+export function withDataService<E extends Entity, F extends Filter, Collection extends string>(options: { dataServiceType: ProviderToken<DataService<E, F>>, filter: F, collection: Collection }): SignalStoreFeature<
+    {
+        state: Emtpy,
+        // These alternatives break type inference:
+        // state: { callState: CallState } & NamedEntityState<E, Collection>,
+        // state: NamedEntityState<E, Collection>,
+
+        signals: NamedEntitySignals<E, Collection>,
+        methods: Emtpy,
+    },
+    {
+        state: NamedDataServiceState<E, F, Collection>
+        signals: NamedDataServiceSignals<E, Collection>
+        methods: NamedDataServiceMethods<E, F, Collection>
+    }
+>;
+export function withDataService<E extends Entity, F extends Filter>(options: { dataServiceType: ProviderToken<DataService<E, F>>, filter: F }): SignalStoreFeature<
+    {
+        state: { callState: CallState } & EntityState<E>
+        signals: Emtpy,
+        methods: Emtpy,
+    },
+    {
+        state: DataServiceState<E, F>
+        signals: DataServiceSignals<E>
+        methods: DataServiceMethods<E, F>
+    }>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function withDataService<E extends Entity, F extends Filter, Collection extends string>(options: { dataServiceType: ProviderToken<DataService<E, F>>, filter: F, collection?: Collection }): SignalStoreFeature<any, any> {
+    const { dataServiceType, filter, collection: prefix } = options;
+    const {
+        entitiesKey,
+        filterKey,
+        loadKey,
+        selectedEntitiesKey,
+        selectedIdsKey,
+        updateFilterKey,
+        updateSelectedKey,
+
+        currentKey,
+        createKey,
+        updateKey,
+        updateAllKey,
+        deleteKey,
+        loadByIdKey,
+        setCurrentKey
+    } = getDataServiceKeys(options);
+
+    const { callStateKey } = getCallStateKeys({ collection: prefix });
+
+    return signalStoreFeature(
+        withState(() => ({
+            [filterKey]: filter,
+            [selectedIdsKey]: {} as Record<EntityId, boolean>,
+            [currentKey]: undefined as E | undefined
+        })),
+        withComputed((store: Record<string, unknown>) => {
+            const entities = store[entitiesKey] as Signal<E[]>;
+            const selectedIds = store[selectedIdsKey] as Signal<Record<EntityId, boolean>>;
+
+            return {
+                [selectedEntitiesKey]: computed(() => entities().filter(e => selectedIds()[e.id]))
+            }
+        }),
+        withMethods((store: Record<string, unknown> & StateSignal<object>) => {
+            const dataService = inject(dataServiceType)
+            return {
+                [updateFilterKey]: (filter: F): void => {
+                    patchState(store, { [filterKey]: filter });
+                },
+                [updateSelectedKey]: (id: EntityId, selected: boolean): void => {
+                    patchState(store, (state: Record<string, unknown>) => ({
+                        [selectedIdsKey]: {
+                            ...state[selectedIdsKey] as Record<EntityId, boolean>,
+                            [id]: selected,
+                        }
+                    }));
+                },
+                [loadKey]: async (): Promise<void> => {
+                    const filter = store[filterKey] as Signal<F>;
+                    store[callStateKey] && patchState(store, setLoading(prefix));
+
+                    try {
+                        const result = await dataService.load(filter());
+                        patchState(store, prefix ? setAllEntities(result, { collection: prefix }) : setAllEntities(result));
+                        store[callStateKey] && patchState(store, setLoaded(prefix));
+                    }
+                    catch (e) {
+                        store[callStateKey] && patchState(store, setError(e, prefix));
+                        throw e;
+                    }
+                },
+                [loadByIdKey]: async (id: EntityId): Promise<void> => {
+                    store[callStateKey] && patchState(store, setLoading(prefix));
+
+                    try {
+                        const current = await dataService.loadById(id);
+                        store[callStateKey] && patchState(store, setLoaded(prefix));
+                        patchState(store, { [currentKey]: current });
+                    }
+                    catch (e) {
+                        store[callStateKey] && patchState(store, setError(e, prefix));
+                        throw e;
+                    }
+                },
+                [setCurrentKey]: (current: E): void => {
+                    patchState(store, { [currentKey]: current });
+                },
+                [createKey]: async (entity: E): Promise<void> => {
+                    patchState(store, { [currentKey]: entity });
+                    store[callStateKey] && patchState(store, setLoading(prefix));
+
+                    try {
+                        const created = await dataService.create(entity);
+                        patchState(store, { [currentKey]: created });
+                        patchState(store, prefix ? addEntity(created, { collection: prefix }) : addEntity(created));
+                        store[callStateKey] && patchState(store, setLoaded(prefix));
+                    }
+                    catch (e) {
+                        store[callStateKey] && patchState(store, setError(e, prefix));
+                        throw e;
+                    }
+                },
+                [updateKey]: async (entity: E): Promise<void> => {
+                    patchState(store, { [currentKey]: entity });
+                    store[callStateKey] && patchState(store, setLoading(prefix));
+
+                    try {
+                        const updated = await dataService.update(entity);
+                        patchState(store, { [currentKey]: updated });
+                        // Why do we need this cast to Partial<Entity>?
+                        const updateArg = { id: updated.id, changes: updated as Partial<Entity> };
+                        patchState(store, prefix ? updateEntity(updateArg, { collection: prefix }) : updateEntity(updateArg));
+                        store[callStateKey] && patchState(store, setLoaded(prefix));
+                    }
+                    catch (e) {
+                        store[callStateKey] && patchState(store, setError(e, prefix));
+                        throw e;
+                    }
+                },
+                [updateAllKey]: async (entities: E[]): Promise<void> => {
+                  store[callStateKey] && patchState(store, setLoading(prefix));
+
+                  try {
+                    const result = await dataService.updateAll(entities);
+                    patchState(store, prefix ? setAllEntities(result, { collection: prefix }) : setAllEntities(result));
+                    store[callStateKey] && patchState(store, setLoaded(prefix));
+                  }
+                  catch (e) {
+                    store[callStateKey] && patchState(store, setError(e, prefix));
+                    throw e;
+                  }
+                },
+                [deleteKey]: async (entity: E): Promise<void> => {
+                    patchState(store, { [currentKey]: entity });
+                    store[callStateKey] && patchState(store, setLoading(prefix));
+
+                    try {
+                        await dataService.delete(entity);
+                        patchState(store, { [currentKey]: undefined });
+                        patchState(store, prefix ? removeEntity(entity.id, { collection: prefix }) : removeEntity(entity.id));
+                        store[callStateKey] && patchState(store, setLoaded(prefix));
+                    }
+                    catch (e) {
+                        store[callStateKey] && patchState(store, setError(e, prefix));
+                        throw e;
+                    }
+                },
+            };
+        })
+    );
+}

package/src/lib/with-devtools.spec.ts

@@ -0,0 +1,157 @@
+import { signalStore } from '@ngrx/signals';
+import { withEntities } from '@ngrx/signals/entities';
+import { Action, withDevtools } from 'ngrx-toolkit';
+import { TestBed } from '@angular/core/testing';
+import { PLATFORM_ID } from '@angular/core';
+import SpyInstance = jest.SpyInstance;
+import Mock = jest.Mock;
+import { reset } from './with-devtools';
+
+type Flight = {
+  id: number;
+  from: string;
+  to: string;
+  date: Date;
+  delayed: boolean;
+};
+
+let currentFlightId = 1;
+
+const createFlight = (flight: Partial<Flight> = {}) => ({
+  ...{
+    id: ++currentFlightId,
+    from: 'Vienna',
+    to: 'London',
+    date: new Date(2024, 2, 1),
+    delayed: false,
+  },
+  ...flight,
+});
+
+interface SetupOptions {
+  extensionsAvailable: boolean;
+  inSsr: boolean;
+}
+
+interface TestData {
+  store: unknown;
+  connectSpy: Mock;
+  sendSpy: SpyInstance;
+  runEffects: () => void;
+}
+
+function run(
+  fn: (testData: TestData) => void,
+  options: Partial<SetupOptions> = {}
+): any {
+  return () => {
+    const defaultOptions: SetupOptions = {
+      inSsr: false,
+      extensionsAvailable: true,
+    };
+    const realOptions = { ...defaultOptions, ...options };
+
+    const sendSpy = jest.fn<void, [Action, Record<string, unknown>]>();
+    const connection = {
+      send: sendSpy,
+    };
+    const connectSpy = jest.fn(() => connection);
+    window.__REDUX_DEVTOOLS_EXTENSION__ = { connect: connectSpy };
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: PLATFORM_ID,
+          useValue: realOptions.inSsr ? 'server' : 'browser',
+        },
+      ],
+    });
+
+    if (!realOptions.extensionsAvailable) {
+      window.__REDUX_DEVTOOLS_EXTENSION__ = undefined;
+    }
+
+    TestBed.runInInjectionContext(() => {
+      const Store = signalStore(
+        withEntities<Flight>(),
+        withDevtools('flights')
+      );
+      const store = new Store();
+      fn({
+        connectSpy,
+        sendSpy,
+        store,
+        runEffects: () => TestBed.flushEffects(),
+      });
+      reset();
+    });
+  };
+}
+
+describe('Devtools', () => {
+  it(
+    'should connection',
+    run(({ connectSpy }) => {
+      expect(connectSpy).toHaveBeenCalledTimes(1);
+    })
+  );
+
+  it(
+    'should not connect if no Redux Devtools are available',
+    run(
+      ({ connectSpy }) => {
+        expect(connectSpy).toHaveBeenCalledTimes(0);
+      },
+      { extensionsAvailable: false }
+    )
+  );
+
+  it(
+    'should not connect if it runs on the server',
+    run(
+      ({ connectSpy }) => {
+        expect(connectSpy).toHaveBeenCalledTimes(0);
+      },
+      { inSsr: true }
+    )
+  );
+
+  it(
+    'should dispatch todo state',
+    run(({ sendSpy, runEffects }) => {
+      runEffects();
+      expect(sendSpy).toHaveBeenCalledWith(
+        { type: 'Store Update' },
+        { flights: { entityMap: {}, ids: [] } }
+      );
+    })
+  );
+
+  it.skip(
+    'add multiple store as feature stores',
+    run(({ runEffects, sendSpy }) => {
+      signalStore(withDevtools('category'));
+      signalStore(withDevtools('bookings'));
+      runEffects();
+      const [, state] = sendSpy.mock.calls[0];
+      expect(Object.keys(state)).toContainEqual([
+        'category',
+        'bookings',
+        'flights',
+      ]);
+    })
+  );
+
+  it.todo('should only send when store is initalisaed');
+  it.todo('should removed state once destroyed');
+  it.todo('should allow to set name afterwards');
+  it.todo('should allow to run with names');
+  it.todo('should provide a patch method with action names');
+  it.todo('should index store names by default');
+  it.todo('should fail, if indexing is disabled');
+  it.todo('should work with a signalStore added lazily, i.e. after a CD cycle');
+  it.todo('should patchState with action name');
+  it.todo('should use patchState with default action name');
+  it.todo('should group multiple patchStates (glitch-free) in one action');
+  it.todo('should not run if in prod mode');
+});

package/src/lib/with-devtools.ts

@@ -0,0 +1,128 @@
+import {
+  patchState as originalPatchState,
+  SignalStoreFeature,
+} from '@ngrx/signals';
+import { SignalStoreFeatureResult } from '@ngrx/signals/src/signal-store-models';
+import { effect, inject, PLATFORM_ID, signal, Signal } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+
+declare global {
+  interface Window {
+    __REDUX_DEVTOOLS_EXTENSION__:
+      | {
+          connect: (options: { name: string }) => {
+            send: (action: Action, state: Record<string, unknown>) => void;
+          };
+        }
+      | undefined;
+  }
+}
+
+type EmptyFeatureResult = { state: {}; signals: {}; methods: {} };
+export type Action = { type: string };
+
+const storeRegistry = signal<Record<string, Signal<unknown>>>({});
+
+let currentActionNames = new Set<string>();
+
+let synchronizationInitialized = false;
+
+function initSynchronization() {
+  effect(() => {
+    if (!connection) {
+      return;
+    }
+
+    const stores = storeRegistry();
+    const rootState: Record<string, unknown> = {};
+    for (const name in stores) {
+      const store = stores[name];
+      rootState[name] = store();
+    }
+
+    const names = Array.from(currentActionNames);
+    const type = names.length ? names.join(', ') : 'Store Update';
+    currentActionNames = new Set<string>();
+
+    connection.send({ type }, rootState);
+  });
+}
+
+function getValueFromSymbol(obj: unknown, symbol: symbol) {
+  if (typeof obj === 'object' && obj && symbol in obj) {
+    return (obj as { [key: symbol]: any })[symbol];
+  }
+}
+
+function getStoreSignal(store: unknown): Signal<unknown> {
+  const [signalStateKey] = Object.getOwnPropertySymbols(store);
+  if (!signalStateKey) {
+    throw new Error('Cannot find State Signal');
+  }
+
+  return getValueFromSymbol(store, signalStateKey);
+}
+
+type ConnectResponse = {
+  send: (action: Action, state: Record<string, unknown>) => void;
+};
+let connection: ConnectResponse | undefined;
+
+/**
+ * required for testing. is not exported during build
+ */
+export function reset() {
+  connection = undefined;
+  synchronizationInitialized = false;
+  storeRegistry.set({});
+}
+
+/**
+ * @param name store's name as it should appear in the DevTools
+ */
+export function withDevtools<Input extends SignalStoreFeatureResult>(
+  name: string
+): SignalStoreFeature<Input, EmptyFeatureResult> {
+  return (store) => {
+    const isServer = isPlatformServer(inject(PLATFORM_ID));
+    if (isServer) {
+      return store;
+    }
+
+    const extensions = window.__REDUX_DEVTOOLS_EXTENSION__;
+    if (!extensions) {
+      return store;
+    }
+
+    if (!connection) {
+      connection = extensions.connect({
+        name: 'NgRx Signal Store',
+      });
+    }
+
+    const storeSignal = getStoreSignal(store);
+    storeRegistry.update((value) => ({
+      ...value,
+      [name]: storeSignal,
+    }));
+
+    if (!synchronizationInitialized) {
+      initSynchronization();
+      synchronizationInitialized = true;
+    }
+
+    return store;
+  };
+}
+
+type PatchFn = typeof originalPatchState extends (
+  arg1: infer First,
+  ...args: infer Rest
+) => infer Returner
+  ? (state: First, action: string, ...rest: Rest) => Returner
+  : never;
+
+export const patchState: PatchFn = (state, action, ...rest) => {
+  currentActionNames.add(action);
+  return originalPatchState(state, ...rest);
+};

package/src/lib/with-redux.spec.ts

@@ -0,0 +1,100 @@
+import { patchState, signalStore, withState } from '@ngrx/signals';
+import { inject } from '@angular/core';
+import {
+  HttpClient,
+  HttpParams,
+  provideHttpClient,
+} from '@angular/common/http';
+import { map, switchMap } from 'rxjs';
+import { noPayload, payload, withRedux } from './with-redux';
+import { TestBed } from '@angular/core/testing';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+
+interface Flight {
+  id: number;
+  from: string;
+  to: string;
+  delayed: boolean;
+  date: Date;
+}
+
+let currentId = 1;
+
+const createFlight = (flight: Partial<Flight> = {}) => {
+  return {
+    ...{
+      id: currentId++,
+      from: 'Vienna',
+      to: 'London',
+      delayed: false,
+      date: new Date(2024, 0, 1),
+    },
+    ...flight,
+  };
+};
+
+describe('with redux', () => {
+  it('should load flights', () => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+
+    TestBed.runInInjectionContext(() => {
+      const controller = TestBed.inject(HttpTestingController);
+      const FlightsStore = signalStore(
+        withState({ flights: [] as Flight[] }),
+        withRedux({
+          actions: {
+            public: {
+              loadFlights: payload<{ from: string; to: string }>(),
+              delayFirst: noPayload,
+            },
+            private: {
+              flightsLoaded: payload<{ flights: Flight[] }>(),
+            },
+          },
+
+          reducer: (actions, on) => {
+            on(actions.flightsLoaded, (state, { flights }) => {
+              patchState(state, { flights });
+            });
+          },
+
+          effects: (actions, create) => {
+            const httpClient = inject(HttpClient);
+
+            return {
+              loadFlights$: create(actions.loadFlights).pipe(
+                switchMap(({ from, to }) => {
+                  return httpClient.get<Flight[]>(
+                    'https://www.angulararchitects.io',
+                    {
+                      params: new HttpParams().set('from', from).set('to', to),
+                    },
+                  );
+                }),
+                map((flights) => actions.flightsLoaded({ flights })),
+              ),
+            };
+          },
+        }),
+      );
+
+      const flightsStore = new FlightsStore();
+      flightsStore.loadFlights({ from: 'Vienna', to: 'London' });
+      const flight = createFlight();
+      controller
+        .expectOne((req) =>
+          req.url.startsWith('https://www.angulararchitects.io'),
+        )
+        .flush([flight]);
+
+      expect(flightsStore.flights()).toEqual([flight]);
+
+      controller.verify();
+    });
+  });
+});