@angular-architects/ngrx-toolkit 20.0.0 → 20.0.2

package/src/lib/with-undo-redo.spec.ts

@@ -0,0 +1,274 @@
+import { computed, inject } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+  patchState,
+  signalStore,
+  type,
+  withComputed,
+  withMethods,
+  withState,
+} from '@ngrx/signals';
+import { addEntity, withEntities } from '@ngrx/signals/entities';
+import { withCallState } from './with-call-state';
+import { withUndoRedo } from './with-undo-redo';
+
+const testState = { test: '' };
+const testKeys = ['test' as const];
+const newValue = 'new value';
+const newerValue = 'newer value';
+
+describe('withUndoRedo', () => {
+  it('adds methods for undo, redo, canUndo, canRedo', () => {
+    TestBed.runInInjectionContext(() => {
+      const Store = signalStore(
+        withState(testState),
+        withUndoRedo({ keys: testKeys }),
+      );
+      const store = new Store();
+
+      expect(Object.keys(store)).toEqual([
+        'test',
+        'canUndo',
+        'canRedo',
+        'undo',
+        'redo',
+        'clearStack',
+      ]);
+    });
+  });
+
+  it('should check keys and collection types', () => {
+    signalStore(
+      withState(testState),
+      // @ts-expect-error - should not allow invalid keys
+      withUndoRedo({ keys: ['tes'] }),
+    );
+    signalStore(
+      withState(testState),
+      withEntities({ entity: type(), collection: 'flight' }),
+      // @ts-expect-error - should not allow invalid keys when entities are present
+      withUndoRedo({ keys: ['flightIdsTest'] }),
+    );
+    signalStore(
+      withState(testState),
+      // @ts-expect-error - should not allow collections without named entities
+      withUndoRedo({ collections: ['tee'] }),
+    );
+    signalStore(
+      withState(testState),
+      withComputed((store) => ({ testComputed: computed(() => store.test()) })),
+      // @ts-expect-error - should not allow collections without named entities with other computed
+      withUndoRedo({ collections: ['tested'] }),
+    );
+    signalStore(
+      withEntities({ entity: type() }),
+      // @ts-expect-error - should not allow collections without named entities
+      withUndoRedo({ collections: ['test'] }),
+    );
+    signalStore(
+      withEntities({ entity: type(), collection: 'flight' }),
+      // @ts-expect-error - should not allow invalid collections
+      withUndoRedo({ collections: ['test'] }),
+    );
+  });
+
+  describe('undo and redo', () => {
+    it('restores previous state for regular store key', () => {
+      TestBed.runInInjectionContext(() => {
+        const Store = signalStore(
+          withState(testState),
+          withMethods((store) => ({
+            updateTest: (newTest: string) =>
+              patchState(store, { test: newTest }),
+          })),
+          withUndoRedo({ keys: testKeys }),
+        );
+
+        const store = new Store();
+
+        store.updateTest(newValue);
+
+        expect(store.test()).toEqual(newValue);
+        expect(store.canUndo()).toBe(true);
+        expect(store.canRedo()).toBe(false);
+
+        store.undo();
+
+        expect(store.test()).toEqual('');
+        expect(store.canUndo()).toBe(false);
+        expect(store.canRedo()).toBe(true);
+      });
+    });
+
+    it('restores previous state for regular store key and respects skip', () => {
+      TestBed.runInInjectionContext(() => {
+        const Store = signalStore(
+          withState(testState),
+          withMethods((store) => ({
+            updateTest: (newTest: string) =>
+              patchState(store, { test: newTest }),
+          })),
+          withUndoRedo({ keys: testKeys, skip: 1 }),
+        );
+
+        const store = new Store();
+
+        store.updateTest(newValue);
+
+        expect(store.test()).toEqual(newValue);
+
+        store.updateTest(newerValue);
+
+        store.undo();
+
+        expect(store.test()).toEqual(newValue);
+        expect(store.canUndo()).toBe(false);
+
+        store.undo();
+
+        // should not change
+        expect(store.test()).toEqual(newValue);
+      });
+    });
+
+    it('undoes and redoes previous state for entity', () => {
+      const Store = signalStore(
+        withEntities({ entity: type<{ id: string }>() }),
+        withMethods((store) => ({
+          addEntity: (newTest: string) =>
+            patchState(store, addEntity({ id: newTest })),
+        })),
+        withUndoRedo(),
+      );
+      TestBed.configureTestingModule({ providers: [Store] });
+      TestBed.runInInjectionContext(() => {
+        const store = inject(Store);
+
+        expect(store.entities()).toEqual([]);
+        expect(store.canUndo()).toBe(false);
+        expect(store.canRedo()).toBe(false);
+
+        store.addEntity(newValue);
+
+        expect(store.entities()).toEqual([{ id: newValue }]);
+        expect(store.canUndo()).toBe(true);
+        expect(store.canRedo()).toBe(false);
+
+        store.addEntity(newerValue);
+
+        expect(store.entities()).toEqual([
+          { id: newValue },
+          { id: newerValue },
+        ]);
+        expect(store.canUndo()).toBe(true);
+        expect(store.canRedo()).toBe(false);
+
+        store.undo();
+
+        expect(store.entities()).toEqual([{ id: newValue }]);
+        expect(store.canUndo()).toBe(true);
+        expect(store.canRedo()).toBe(true);
+
+        store.undo();
+
+        expect(store.entities()).toEqual([]);
+        expect(store.canUndo()).toBe(false);
+        expect(store.canRedo()).toBe(true);
+
+        store.redo();
+
+        expect(store.entities()).toEqual([{ id: newValue }]);
+        expect(store.canUndo()).toBe(true);
+        expect(store.canRedo()).toBe(true);
+
+        // should return canRedo=false after a change
+        store.addEntity('newest');
+
+        expect(store.canUndo()).toBe(true);
+        expect(store.canRedo()).toBe(false);
+      });
+    });
+
+    it('restores previous state for named entity', () => {
+      TestBed.runInInjectionContext(() => {
+        const Store = signalStore(
+          withEntities({
+            entity: type<{ id: string }>(),
+            collection: 'flight',
+          }),
+          withMethods((store) => ({
+            addEntity: (newTest: string) =>
+              patchState(
+                store,
+                addEntity({ id: newTest }, { collection: 'flight' }),
+              ),
+          })),
+          withCallState({ collection: 'flight' }),
+          withUndoRedo({ collections: ['flight'] }),
+        );
+
+        const store = new Store();
+
+        store.addEntity(newValue);
+
+        expect(store.flightEntities()).toEqual([{ id: newValue }]);
+        expect(store.canUndo()).toBe(true);
+        expect(store.canRedo()).toBe(false);
+
+        store.undo();
+
+        expect(store.flightEntities()).toEqual([]);
+        expect(store.canUndo()).toBe(false);
+        expect(store.canRedo()).toBe(true);
+      });
+    });
+
+    it('clears undo redo stack', () => {
+      const Store = signalStore(
+        { providedIn: 'root' },
+        withState(testState),
+        withMethods((store) => ({
+          update: (value: string) => patchState(store, { test: value }),
+        })),
+        withUndoRedo({ keys: testKeys }),
+      );
+
+      const store = TestBed.inject(Store);
+
+      store.update('Foo');
+      store.update('Bar');
+      store.undo();
+      store.clearStack();
+
+      expect(store.canUndo()).toBe(false);
+      expect(store.canRedo()).toBe(false);
+    });
+
+    it('cannot undo after clearing and setting a new value', () => {
+      const Store = signalStore(
+        { providedIn: 'root' },
+        withState(testState),
+        withMethods((store) => ({
+          update: (value: string) => patchState(store, { test: value }),
+        })),
+        withUndoRedo({ keys: testKeys }),
+      );
+
+      const store = TestBed.inject(Store);
+
+      store.update('Alan');
+
+      store.update('Gordon');
+
+      store.clearStack();
+
+      // After clearing the undo/redo stack, there is no previous item anymore.
+      // The following update becomes the first value.
+      // Since there is no other value before, it cannot be undone.
+      store.update('Hugh');
+
+      expect(store.canUndo()).toBe(false);
+      expect(store.canRedo()).toBe(false);
+    });
+  });
+});

package/src/lib/with-undo-redo.ts

@@ -0,0 +1,200 @@
+import { Signal, isSignal, signal, untracked } from '@angular/core';
+import {
+  EmptyFeatureResult,
+  SignalStoreFeature,
+  SignalStoreFeatureResult,
+  patchState,
+  signalStoreFeature,
+  watchState,
+  withComputed,
+  withHooks,
+  withMethods,
+} from '@ngrx/signals';
+import { capitalize } from './with-data-service';
+
+export type StackItem = Record<string, unknown>;
+
+export type NormalizedUndoRedoOptions = {
+  maxStackSize: number;
+  collections?: string[];
+  keys: string[];
+  skip: number;
+};
+
+const defaultOptions: NormalizedUndoRedoOptions = {
+  maxStackSize: 100,
+  keys: [],
+  skip: 0,
+};
+
+export function getUndoRedoKeys(collections?: string[]): string[] {
+  if (collections) {
+    return collections.flatMap((c) => [
+      `${c}EntityMap`,
+      `${c}Ids`,
+      `selected${capitalize(c)}Ids`,
+      `${c}Filter`,
+    ]);
+  }
+  return ['entityMap', 'ids', 'selectedIds', 'filter'];
+}
+
+type NonNever<T> = T extends never ? never : T;
+
+type ExtractEntityCollection<T> = T extends `${infer U}Entities` ? U : never;
+
+type ExtractEntityCollections<Store extends SignalStoreFeatureResult> =
+  NonNever<
+    {
+      [K in keyof Store['props']]: ExtractEntityCollection<K>;
+    }[keyof Store['props']]
+  >;
+
+type OptionsForState<Store extends SignalStoreFeatureResult> = Partial<
+  Omit<NormalizedUndoRedoOptions, 'collections' | 'keys'>
+> & {
+  collections?: ExtractEntityCollections<Store>[];
+  keys?: (keyof Store['state'])[];
+};
+
+export function withUndoRedo<Input extends EmptyFeatureResult>(
+  options?: OptionsForState<Input>,
+): SignalStoreFeature<
+  Input,
+  EmptyFeatureResult & {
+    props: {
+      canUndo: Signal<boolean>;
+      canRedo: Signal<boolean>;
+    };
+    methods: {
+      undo: () => void;
+      redo: () => void;
+      clearStack: () => void;
+    };
+  }
+> {
+  let previous: StackItem | null = null;
+  let skipOnce = false;
+
+  const normalized = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  //
+  // Design Decision: This feature has its own
+  // internal state.
+  //
+
+  const undoStack: StackItem[] = [];
+  const redoStack: StackItem[] = [];
+
+  const canUndo = signal(false);
+  const canRedo = signal(false);
+
+  const updateInternal = () => {
+    canUndo.set(undoStack.length !== 0);
+    canRedo.set(redoStack.length !== 0);
+  };
+
+  const keys = [...getUndoRedoKeys(normalized.collections), ...normalized.keys];
+
+  return signalStoreFeature(
+    withComputed(() => ({
+      canUndo: canUndo.asReadonly(),
+      canRedo: canRedo.asReadonly(),
+    })),
+    withMethods((store) => ({
+      undo(): void {
+        const item = undoStack.pop();
+
+        if (item && previous) {
+          redoStack.push(previous);
+        }
+
+        if (item) {
+          skipOnce = true;
+          patchState(store, item);
+          previous = item;
+        }
+
+        updateInternal();
+      },
+      redo(): void {
+        const item = redoStack.pop();
+
+        if (item && previous) {
+          undoStack.push(previous);
+        }
+
+        if (item) {
+          skipOnce = true;
+          patchState(store, item);
+          previous = item;
+        }
+
+        updateInternal();
+      },
+      clearStack(): void {
+        undoStack.splice(0);
+        redoStack.splice(0);
+        previous = null;
+        updateInternal();
+      },
+    })),
+    withHooks({
+      onInit(store) {
+        watchState(store, () => {
+          const cand = keys.reduce((acc, key) => {
+            const s = (store as Record<string | keyof Input['state'], unknown>)[
+              key
+            ];
+            if (s && isSignal(s)) {
+              return {
+                ...acc,
+                [key]: s(),
+              };
+            }
+            return acc;
+          }, {});
+
+          if (normalized.skip > 0) {
+            normalized.skip--;
+            return;
+          }
+
+          if (skipOnce) {
+            skipOnce = false;
+            return;
+          }
+
+          //
+          // Deep Comparison to prevent duplicated entries
+          // on the stack. This can e.g. happen after an undo
+          // if the component sends back the undone filter
+          // to the store.
+          //
+          if (JSON.stringify(cand) === JSON.stringify(previous)) {
+            return;
+          }
+
+          // Clear redoStack after recorded action
+          redoStack.splice(0);
+
+          if (previous) {
+            undoStack.push(previous);
+          }
+
+          if (redoStack.length > normalized.maxStackSize) {
+            undoStack.unshift();
+          }
+
+          previous = cand;
+
+          // Don't propogate current reactive context
+          untracked(() => updateInternal());
+        });
+      },
+    }),
+  );
+}

package/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts",
+    "src/lib/storage-sync/tests/with-storage-sync-indexedb.spec.ts"
+  ]
+}

package/fesm2022/angular-architects-ngrx-toolkit-redux-connector.mjs

@@ -1,119 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, inject, makeEnvironmentProviders, provideEnvironmentInitializer, Injector } from '@angular/core';
-import { rxMethod } from '@ngrx/signals/rxjs-interop';
-import { pipe, tap, map } from 'rxjs';
-
-function isUnsubscribable(fn) {
-    return !!fn?.unsubscribe;
-}
-function capitalize(str) {
-    return str ? str[0].toUpperCase() + str.substring(1) : str;
-}
-function isActionCreator(action) {
-    return Boolean(typeof action === 'function' &&
-        action &&
-        'type' in action &&
-        action.type &&
-        typeof action.type === 'string');
-}
-
-class SignalReduxStore {
-    constructor() {
-        this.mapperDict = {};
-        this.dispatch = rxMethod(pipe(tap((action) => {
-            const callbacks = this.mapperDict[action.type];
-            if (callbacks?.storeMethod) {
-                if (isUnsubscribable(callbacks.storeMethod) &&
-                    callbacks.resultMethod) {
-                    return callbacks.storeMethod(action, (a) => {
-                        const resultAction = callbacks.resultMethod?.(a);
-                        this.dispatch(resultAction);
-                    });
-                }
-                return callbacks?.storeMethod(action);
-            }
-            return;
-        })));
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    connectFeatureStore(mappers) {
-        mappers.forEach((mapper) => mapper.types.forEach((action) => (this.mapperDict[action] = {
-            storeMethod: mapper.storeMethod,
-            resultMethod: mapper.resultMethod,
-        })));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SignalReduxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SignalReduxStore, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SignalReduxStore, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-function injectReduxDispatch() {
-    return inject(SignalReduxStore).dispatch;
-}
-
-function mapAction(...args) {
-    let resultMethod = args.pop();
-    let storeMethod = args.pop();
-    if (isActionCreator(storeMethod)) {
-        args.push(storeMethod);
-        storeMethod = resultMethod || storeMethod;
-        resultMethod = undefined;
-    }
-    const types = args.map((creator) => creator.type);
-    return {
-        types,
-        storeMethod,
-        resultMethod,
-    };
-}
-function withActionMappers(...mappers) {
-    return mappers;
-}
-function createReduxState(storeName, signalStore, withActionMappers) {
-    const isRootProvider = signalStore?.ɵprov?.providedIn === 'root';
-    return {
-        [`provide${capitalize(storeName)}Store`]: (connectReduxDevtools = false) => makeEnvironmentProviders([
-            isRootProvider ? [] : signalStore,
-            provideEnvironmentInitializer(() => {
-                const initializerFn = ((signalReduxStore = inject(SignalReduxStore), store = inject(signalStore)) => () => {
-                    if (connectReduxDevtools) {
-                        // addStoreToReduxDevtools(store, storeName, false);
-                    }
-                    signalReduxStore.connectFeatureStore(withActionMappers(store));
-                })();
-                return initializerFn();
-            }),
-        ]),
-        [`inject${capitalize(storeName)}Store`]: () => Object.assign(inject(signalStore), { dispatch: injectReduxDispatch() }),
-    };
-}
-
-function reduxMethod(generator, resultMethodOrConfig, config) {
-    const injector = inject(Injector);
-    if (typeof resultMethodOrConfig === 'function') {
-        let unsubscribable;
-        const inputResultFn = ((input, resultMethod = resultMethodOrConfig) => {
-            const rxMethodWithResult = rxMethod(pipe(generator, map(resultMethod)), {
-                ...(config || {}),
-                injector: config?.injector || injector,
-            });
-            const rxWithInput = rxMethodWithResult(input);
-            unsubscribable = { unsubscribe: rxWithInput.destroy.bind(rxWithInput) };
-            return rxWithInput;
-        });
-        inputResultFn.destroy = () => unsubscribable?.unsubscribe();
-        return inputResultFn;
-    }
-    return rxMethod(generator, resultMethodOrConfig);
-}
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { createReduxState, mapAction, reduxMethod, withActionMappers };
-//# sourceMappingURL=angular-architects-ngrx-toolkit-redux-connector.mjs.map