@angular-architects/ngrx-toolkit 0.0.7 → 0.1.0

package/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "ngrxToolkit",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ngrx-toolkit",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

package/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'ngrx-toolkit',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/libs/ngrx-toolkit',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/ngrx-toolkit",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/ngrx-toolkit",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
@@ -14,18 +14,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/angular-architects-ngrx-toolkit.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/angular-architects-ngrx-toolkit.mjs",
-      "esm": "./esm2022/angular-architects-ngrx-toolkit.mjs",
-      "default": "./fesm2022/angular-architects-ngrx-toolkit.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "ngrx-toolkit",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ngrx-toolkit/src",
+  "prefix": "ngrx-toolkit",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/ngrx-toolkit/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/ngrx-toolkit/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/ngrx-toolkit/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/ngrx-toolkit/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}

package/{index.d.ts → src/index.ts}

@@ -1,8 +1,9 @@
 export { withDevtools, patchState, Action } from './lib/with-devtools';
 export * from './lib/with-redux';
+
 export * from './lib/with-call-state';
 export * from './lib/with-undo-redo';
-export * from './lib/with-data-service';
+export * from './lib/with-data-service'
 export { withStorageSync, SyncConfig } from './lib/with-storage-sync';
 export * from './lib/redux-connector';
-export * from './lib/redux-connector/rxjs-interop';
+export * from './lib/redux-connector/rxjs-interop';

package/src/lib/assertions/assertions.ts

@@ -0,0 +1,9 @@
+import { ActionsFnSpecs } from '../with-redux';
+
+export function assertActionFnSpecs(
+  obj: unknown
+): asserts obj is ActionsFnSpecs {
+  if (!obj || typeof obj !== 'object') {
+    throw new Error('%o is not an Action Specification');
+  }
+}

package/src/lib/redux-connector/create-redux.ts

@@ -0,0 +1,94 @@
+import { ENVIRONMENT_INITIALIZER, inject, makeEnvironmentProviders } from "@angular/core";
+import { ActionCreator, ActionType } from "@ngrx/store/src/models";
+import { CreateReduxState, ExtractActionTypes, MapperTypes, Store } from "./model";
+import { SignalReduxStore, injectReduxDispatch } from "./signal-redux-store";
+import { capitalize, isActionCreator } from "./util";
+
+
+export function mapAction<
+  Creators extends readonly ActionCreator[]
+>(
+  ...args: [
+    ...creators: Creators,
+    storeMethod: (action: ActionType<Creators[number]>) => unknown
+  ]
+): MapperTypes<Creators>;
+export function mapAction<
+  Creators extends readonly ActionCreator[],
+  T
+>(
+  ...args: [
+    ...creators: Creators,
+    storeMethod: (action: ActionType<Creators[number]>, resultMethod: (input: T) => unknown) => unknown,
+    resultMethod: (input: T) => unknown
+  ]
+): MapperTypes<Creators>;
+export function mapAction<
+  Creators extends readonly ActionCreator[]
+>(
+  ...args: [
+    ...creators: Creators,
+    storeMethod: (action: ActionType<Creators[number]>) => unknown,
+    resultMethod?: (input: unknown) => unknown
+  ]
+): MapperTypes<Creators> {
+  let resultMethod = args.pop() as unknown as ((input: unknown) => unknown ) | undefined;
+  let storeMethod = args.pop() as unknown as (action: ActionType<Creators[number]>) => unknown;
+
+  if (isActionCreator(storeMethod)) {
+    args.push(storeMethod);
+    storeMethod = resultMethod || storeMethod;
+    resultMethod = undefined;
+  }
+
+  const types = (args as unknown as Creators).map(
+    (creator) => creator.type
+  ) as unknown as ExtractActionTypes<Creators>;
+
+  return {
+    types,
+    storeMethod,
+    resultMethod
+  };
+}
+
+export function withActionMappers(
+  ...mappers: MapperTypes<ActionCreator<any, any>[]>[]
+): MapperTypes<ActionCreator<any, any>[]>[] {
+  return mappers;
+}
+
+export function createReduxState<
+  StoreName extends string,
+  STORE extends Store
+>(
+  storeName: StoreName,
+  signalStore: STORE,
+  withActionMappers: (store: InstanceType<STORE>) => MapperTypes<ActionCreator<any, any>[]>[],
+): CreateReduxState<StoreName, STORE> {
+  const isRootProvider = (signalStore as any)?.ɵprov?.providedIn === 'root';
+  return {
+    [`provide${capitalize(storeName)}Store`]: (connectReduxDevtools = false) => makeEnvironmentProviders([
+      isRootProvider? [] : signalStore,
+      {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (
+          signalReduxStore = inject(SignalReduxStore),
+          store = inject(signalStore)
+        ) => () => {
+          if (connectReduxDevtools) {
+            // addStoreToReduxDevtools(store, storeName, false);
+          }
+          signalReduxStore.connectFeatureStore(
+            withActionMappers(store)
+          );
+        }
+      }
+    ]),
+    [`inject${capitalize(storeName)}Store`]: () => Object.assign(
+      inject(signalStore),
+      { dispatch: injectReduxDispatch() }
+    )
+  } as CreateReduxState<StoreName, STORE>;
+}

package/{lib/redux-connector/index.d.ts → src/lib/redux-connector/index.ts}

@@ -1 +1,2 @@
+
 export { createReduxState, mapAction, withActionMappers } from './create-redux';

package/src/lib/redux-connector/model.ts

@@ -0,0 +1,67 @@
+import { EnvironmentProviders, Signal, Type } from "@angular/core";
+import { DeepSignal } from "@ngrx/signals/src/deep-signal";
+import { SignalStoreFeatureResult } from "@ngrx/signals/src/signal-store-models";
+import { StateSignal } from "@ngrx/signals/src/state-signal";
+import { Action, ActionCreator, ActionType, Prettify } from "@ngrx/store/src/models";
+import { Observable, Unsubscribable } from "rxjs";
+
+
+export type IncludePropType<T, V, WithNevers =
+  { [K in keyof T]: Exclude<T[K], undefined> extends V
+    ? T[K] extends Record<string, unknown>
+      ? IncludePropType<T[K], V>
+      : T[K]
+    : never
+  }> = Prettify<
+    Pick<
+      WithNevers,
+      { [K in keyof WithNevers]: WithNevers[K] extends never
+        ? never
+        : K extends string
+          ? K
+          : never
+      }[keyof WithNevers]
+    >
+  >;
+
+export type Store = Type<Record<string, unknown> & StateSignal<SignalStoreFeatureResult['state']>>;
+
+export type CreateReduxState<
+  StoreName extends string,
+  STORE extends Store
+> = {
+  [K in StoreName as `provide${Capitalize<K>}Store`]: (connectReduxDevtools?: boolean) => EnvironmentProviders
+} & {
+  [K in StoreName as `inject${Capitalize<K>}Store`]: () => InjectableReduxSlice<STORE>
+};
+
+export type Selectors<STORE extends Store> = IncludePropType<InstanceType<STORE>, Signal<unknown> | DeepSignal<unknown>>;
+export type Dispatch = { dispatch: (input: Action | Observable<Action> | Signal<Action>) => Unsubscribable };
+export type InjectableReduxSlice<STORE extends Store> = Selectors<STORE> & Dispatch;
+
+export type ExtractActionTypes<Creators extends readonly ActionCreator[]> = {
+  [Key in keyof Creators]: Creators[Key] extends ActionCreator<infer T>
+    ? T
+    : never;
+};
+
+export interface ActionMethod<T, V extends Action = Action> {
+  (action: V): T;
+}
+
+export interface StoreMethod<
+  Creators extends readonly ActionCreator[],
+  ResultState = unknown,
+> {
+  (
+    action: ActionType<Creators[number]>
+  ): ResultState;
+}
+
+export interface MapperTypes<
+  Creators extends readonly ActionCreator[]
+> {
+  types: ExtractActionTypes<Creators>,
+  storeMethod: StoreMethod<Creators>,
+  resultMethod?: (...args: unknown[]) => unknown
+}

package/{lib/redux-connector/rxjs-interop/index.d.ts → src/lib/redux-connector/rxjs-interop/index.ts}

@@ -1 +1,2 @@
+
 export { reduxMethod } from './redux-method';

package/src/lib/redux-connector/rxjs-interop/redux-method.ts

@@ -0,0 +1,61 @@
+import { Injector, Signal, inject } from "@angular/core";
+import { rxMethod } from "@ngrx/signals/rxjs-interop";
+import { Observable, Unsubscribable, map, pipe } from "rxjs";
+
+
+type RxMethodInput<Input> = Input | Observable<Input> | Signal<Input>;
+
+type RxMethod<Input, MethodInput = Input, MethodResult = unknown> = ((
+  input: RxMethodInput<Input>,
+  resultMethod: (input: MethodInput) => MethodResult
+) => Unsubscribable) & Unsubscribable;
+
+export function reduxMethod<Input, MethodInput = Input>(
+  generator: (source$: Observable<Input>) => Observable<MethodInput>,
+  config?: { injector?: Injector }
+): RxMethod<Input, MethodInput>;
+export function reduxMethod<Input, MethodInput = Input, MethodResult = unknown>(
+  generator: (source$: Observable<Input>) => Observable<MethodInput>,
+  resultMethod: (input: MethodInput) => MethodResult,
+  config?: {
+    injector?: Injector
+  }
+): RxMethod<Input, MethodInput, MethodResult>;
+export function reduxMethod<Input, MethodInput = Input, MethodResult = unknown>(
+  generator: (source$: Observable<Input>) => Observable<MethodInput>,
+  resultMethodOrConfig?: ((input: MethodInput) => MethodResult) | {
+    injector?: Injector
+  },
+  config?: {
+    injector?: Injector
+  }
+): RxMethod<Input, MethodInput, MethodResult>  {
+  const injector = inject(Injector);
+
+  if (typeof resultMethodOrConfig === 'function') {
+    let unsubscribable: Unsubscribable;
+    const inputResultFn = ((
+      input: RxMethodInput<Input>,
+      resultMethod = resultMethodOrConfig
+    ) => {
+
+      const rxMethodWithResult = rxMethod<Input>(pipe(
+        generator,
+        map(resultMethod)
+      ), {
+        ...(config || {}),
+        injector: config?.injector || injector
+      });
+      const rxWithInput = rxMethodWithResult(input);
+      unsubscribable = { unsubscribe: rxWithInput.unsubscribe.bind(rxWithInput) };
+
+      return rxWithInput;
+    }) as RxMethod<Input, MethodInput, MethodResult>;
+
+    inputResultFn.unsubscribe = () => unsubscribable?.unsubscribe();
+
+    return inputResultFn;
+  }
+
+  return rxMethod<Input>(generator, resultMethodOrConfig);
+}

package/src/lib/redux-connector/signal-redux-store.ts

@@ -0,0 +1,54 @@
+import { Injectable, inject } from "@angular/core";
+import { rxMethod } from "@ngrx/signals/rxjs-interop";
+import { Action, ActionCreator } from "@ngrx/store";
+import { pipe, tap } from "rxjs";
+import { MapperTypes } from "./model";
+import { isUnsubscribable } from "./util";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SignalReduxStore {
+  private mapperDict: Record<string, {
+    storeMethod: (...args: unknown[]) => unknown,
+    resultMethod?: (...args: unknown[]) => unknown,
+  }> = {};
+
+  dispatch = rxMethod<Action>(pipe(
+    tap((action: Action) => {
+      const callbacks = this.mapperDict[action.type];
+      if (callbacks?.storeMethod) {
+        if (
+          isUnsubscribable(callbacks.storeMethod) &&
+          callbacks.resultMethod
+        ) {
+          return callbacks.storeMethod(action, (a: Action) => {
+            const resultAction = callbacks.resultMethod?.(a) as Action;
+            this.dispatch(resultAction);
+          });
+        }
+
+        return callbacks?.storeMethod(action);
+      }
+
+      return;
+    })
+  ));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  connectFeatureStore(mappers: MapperTypes<ActionCreator<any, any>[]>[]): void {
+    mappers.forEach(
+      mapper => mapper.types.forEach(
+        action => this.mapperDict[action] = {
+          storeMethod: mapper.storeMethod,
+          resultMethod: mapper.resultMethod
+        }
+      )
+    );
+  }
+}
+
+export function injectReduxDispatch() {
+  return inject(SignalReduxStore).dispatch;
+}

package/src/lib/redux-connector/util.ts

@@ -0,0 +1,22 @@
+import { Action } from '@ngrx/store';
+import { Unsubscribable } from 'rxjs';
+
+
+export function isUnsubscribable<F extends (...args: unknown[]) => unknown>(
+  fn: F | (F & Unsubscribable)
+): fn is F & Unsubscribable {
+  return !!(fn as any as F & Unsubscribable)?.unsubscribe;
+}
+
+export function capitalize(str: string): string {
+  return str ? str[0].toUpperCase() + str.substring(1) : str;
+}
+
+export function isActionCreator(action: any): action is Action {
+  return (
+    typeof action === 'function' &&
+    action &&
+    action.type &&
+    typeof action.type === 'string'
+  );
+}

package/src/lib/shared/empty.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Emtpy = {};

package/src/lib/with-call-state.spec.ts

@@ -0,0 +1,24 @@
+import { patchState, signalStore } from '@ngrx/signals';
+import { setLoaded, setLoading, withCallState } from 'ngrx-toolkit';
+
+describe('withCallState', () => {
+  it('should use and update a callState', () => {
+    const DataStore = signalStore(withCallState());
+    const dataStore = new DataStore();
+
+    patchState(dataStore, setLoading());
+
+    expect(dataStore.callState()).toBe('loading');
+    expect(dataStore.loading()).toBe(true);
+  });
+
+  it('should use the callState for a collection', () => {
+    const DataStore = signalStore(withCallState({ collection: 'entities' }));
+    const dataStore = new DataStore();
+
+    patchState(dataStore, setLoaded('entities'));
+
+    expect(dataStore.entitiesCallState()).toBe('loaded');
+    expect(dataStore.entitiesLoaded()).toBe(true);
+  });
+});

package/src/lib/with-call-state.ts

@@ -0,0 +1,136 @@
+import { Signal, computed } from '@angular/core';
+import {
+  SignalStoreFeature,
+  signalStoreFeature,
+  withComputed,
+  withState,
+} from '@ngrx/signals';
+import { Emtpy } from './shared/empty';
+
+export type CallState = 'init' | 'loading' | 'loaded' | { error: string };
+
+export type NamedCallStateSlice<Collection extends string> = {
+  [K in Collection as `${K}CallState`]: CallState;
+};
+
+export type CallStateSlice = {
+  callState: CallState
+}
+
+export type NamedCallStateSignals<Prop extends string> = {
+  [K in Prop as `${K}Loading`]: Signal<boolean>;
+} & {
+    [K in Prop as `${K}Loaded`]: Signal<boolean>;
+  } & {
+    [K in Prop as `${K}Error`]: Signal<string | null>;
+  }
+
+export type CallStateSignals = {
+  loading: Signal<boolean>;
+  loaded: Signal<boolean>;
+  error: Signal<string | null>
+}
+
+export type SetCallState<Prop extends string | undefined> = Prop extends string
+  ? NamedCallStateSlice<Prop>
+  : CallStateSlice;
+
+export function getCallStateKeys(config?: { collection?: string }) {
+  const prop = config?.collection;
+  return {
+    callStateKey: prop ?  `${config.collection}CallState` : 'callState',
+    loadingKey: prop ? `${config.collection}Loading` : 'loading',
+    loadedKey: prop ? `${config.collection}Loaded` : 'loaded',
+    errorKey: prop ? `${config.collection}Error` : 'error',
+  };
+}
+
+export function withCallState<Collection extends string>(config: {
+  collection: Collection;
+}): SignalStoreFeature<
+  { state: Emtpy, signals: Emtpy, methods: Emtpy },
+  {
+    state: NamedCallStateSlice<Collection>,
+    signals: NamedCallStateSignals<Collection>,
+    methods: Emtpy
+  }
+>;
+export function withCallState(): SignalStoreFeature<
+  { state: Emtpy, signals: Emtpy, methods: Emtpy },
+  {
+    state: CallStateSlice,
+    signals: CallStateSignals,
+    methods: Emtpy
+  }
+>;
+export function withCallState<Collection extends string>(config?: {
+  collection: Collection;
+}): SignalStoreFeature {
+  const { callStateKey, errorKey, loadedKey, loadingKey } =
+    getCallStateKeys(config);
+
+  return signalStoreFeature(
+    withState({ [callStateKey]: 'init' }),
+    withComputed((state: Record<string, Signal<unknown>>) => {
+
+      const callState = state[callStateKey] as Signal<CallState>;
+
+      return {
+        [loadingKey]: computed(() => callState() === 'loading'),
+        [loadedKey]: computed(() => callState() === 'loaded'),
+        [errorKey]: computed(() => {
+          const v = callState();
+          return typeof v === 'object' ? v.error : null;
+        })
+      }
+    })
+  );
+}
+
+export function setLoading<Prop extends string | undefined = undefined>(
+  prop?: Prop
+): SetCallState<Prop> {
+  if (prop) {
+    return { [`${prop}CallState`]: 'loading' } as SetCallState<Prop>;
+  }
+
+  return { callState: 'loading' } as SetCallState<Prop>;
+}
+
+export function setLoaded<Prop extends string | undefined = undefined>(
+  prop?: Prop
+): SetCallState<Prop> {
+
+  if (prop) {
+    return { [`${prop}CallState`]: 'loaded' } as SetCallState<Prop>;
+  }
+  else {
+    return { callState: 'loaded' } as SetCallState<Prop>;
+  }
+}
+
+export function setError<Prop extends string | undefined = undefined>(
+  error: unknown,
+  prop?: Prop,
+  ): SetCallState<Prop> {
+
+    let errorMessage = '';
+
+    if (!error) {
+      errorMessage = '';
+    }
+    else if (typeof error === 'object' && 'message' in error) {
+      errorMessage = String(error.message);
+    }
+    else {
+      errorMessage = String(error);
+    }
+    
+
+    if (prop) {
+      return { [`${prop}CallState`]: { error: errorMessage } } as SetCallState<Prop>;
+    }
+    else {
+      return { callState: { error: errorMessage } } as SetCallState<Prop>;
+    }
+}