feat!: migrate to ngrx signals v19

chore(deps): bump ngrx signals query from 18.1.1 to 19.0.0-rc.0 chore(deps): bump tanstack angular query from 5.61.1 to 5.62.7 chore(deps): bump angular from 19.0.0 to 19.0.4 chore(deps): bump angular material from 19.0.0 to 19.0.3 chore(deps-dev): bump angular cli from 19.0.1 to 19.0.5
k3nsei · Dec 14, 2024 · ca99e52 · ca99e52
1 parent ad70542
commit ca99e52
Show file tree

Hide file tree

Showing 9 changed files with 1,450 additions and 1,529 deletions.
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -49,7 +49,7 @@ jobs:
     name: Run E2E tests
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.49.0-noble
+      image: mcr.microsoft.com/playwright:v1.49.1-noble
     timeout-minutes: 10
     strategy:
       fail-fast: false

diff --git a/apps/demo-e2e/package.json b/apps/demo-e2e/package.json
@@ -7,8 +7,8 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@playwright/test": "1.49.0",
-    "@types/node": "^22.9.3"
+    "@playwright/test": "1.49.1",
+    "@types/node": "22.10.2"
   },
   "volta": {
     "extends": "../../package.json"

diff --git a/apps/demo/src/app/__snapshots__/app.component.spec.ts.snap b/apps/demo/src/app/__snapshots__/app.component.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`GIVEN AppComponent > WHEN component was initialized > THEN component should be rendered 1`] = `
 <div
   id="root1"
-  ng-version="19.0.0"
+  ng-version="19.0.4"
 >
   <ssq-counter>
     <output

diff --git a/libs/ngx-signal-store-query/eslint.config.mjs b/libs/ngx-signal-store-query/eslint.config.mjs
@@ -25,6 +25,7 @@ const config = tsEslint.config(
           style: 'kebab-case',
         },
       ],
+      '@typescript-eslint/no-explicit-any': 'warn',
     },
   },
   {

diff --git a/libs/ngx-signal-store-query/src/types.ts b/libs/ngx-signal-store-query/src/types.ts
@@ -1,52 +1,36 @@
-import {
-  type Prettify,
-  type SignalStoreFeatureResult,
-  type StateSignals,
-  type WritableStateSource,
-} from '@ngrx/signals';
-import {
-  type CreateMutationResult,
-  type CreateQueryOptions,
-  type CreateQueryResult,
-  type injectMutation,
-  type QueryKey,
-} from '@tanstack/angular-query-experimental';
+import { type SignalStoreFeatureResult, type withProps } from '@ngrx/signals';
+import { type CreateQueryOptions, type injectMutation, type QueryKey } from '@tanstack/angular-query-experimental';
 
-export type QueryStore<Input extends SignalStoreFeatureResult> = Prettify<
-  StateSignals<Input['state']> & Input['computed'] & Input['methods'] & WritableStateSource<Prettify<Input['state']>>
->;
+export type StoreType<Input extends SignalStoreFeatureResult, Props extends object> = Parameters<
+  Parameters<typeof withProps<Input, Props>>[0]
+>[0];
+
+export type QueryProp<Name extends string> = `${Uncapitalize<Name>}Query`;
 
 export type CreateQueryFn<
+  Name extends string,
   TDataFn = unknown,
   TError = Error,
   TData = TDataFn,
   TQueryKey extends QueryKey = QueryKey,
   Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
-> = (store: QueryStore<Input>) => () => CreateQueryOptions<TDataFn, TError, TData, TQueryKey>;
-
-export type QueryProp<Name extends string> = `${Uncapitalize<Name>}Query`;
-
-export type QueryMethod<TData = unknown, TError = Error> = (() => CreateQueryResult<TData, TError>) &
-  CreateQueryResult<TData, TError>;
+> = (
+  store: StoreType<Input, Record<QueryProp<Name>, unknown>>,
+) => () => CreateQueryOptions<TDataFn, TError, TData, TQueryKey>;
 
 type CreateMutationOptions<TData = unknown, TError = Error, TVariables = void, TContext = unknown> = ReturnType<
   NonNullable<Parameters<typeof injectMutation<TData, TError, TVariables, TContext>>[0]>
 >;
 
-export type CreateMutationFn<
-  TData = unknown,
-  TError = Error,
-  TVariables = void,
-  TContext = unknown,
-  Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
-> = (store: QueryStore<Input>) => () => CreateMutationOptions<TData, TError, TVariables, TContext>;
-
 export type MutationProp<Name extends string> = `${Uncapitalize<Name>}Mutation`;
 
-export type MutationMethod<
+export type CreateMutationFn<
+  Name extends string,
   TData = unknown,
   TError = Error,
   TVariables = void,
   TContext = unknown,
-> = (() => CreateMutationResult<TData, TError, TVariables, TContext>) &
-  CreateMutationResult<TData, TError, TVariables, TContext>;
+  Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
+> = (
+  store: StoreType<Input, Record<MutationProp<Name>, unknown>>,
+) => () => CreateMutationOptions<TData, TError, TVariables, TContext>;
diff --git a/libs/ngx-signal-store-query/src/with-mutation.ts b/libs/ngx-signal-store-query/src/with-mutation.ts
@@ -1,13 +1,7 @@
-import {
-  type EmptyFeatureResult,
-  signalStoreFeature,
-  type SignalStoreFeature,
-  type SignalStoreFeatureResult,
-  withMethods,
-} from '@ngrx/signals';
-import { injectMutation } from '@tanstack/angular-query-experimental';
+import { type SignalStoreFeatureResult, withProps } from '@ngrx/signals';
+import { type CreateMutationResult, injectMutation } from '@tanstack/angular-query-experimental';
 
-import { type CreateMutationFn, type MutationMethod, type MutationProp, type QueryStore } from './types';
+import { type CreateMutationFn, type MutationProp } from './types';
 import { lowerFirst } from './utils';
 
 export const withMutation = <
@@ -17,33 +11,17 @@ export const withMutation = <
   TVariables = void,
   TContext = unknown,
   Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
+  Props extends object = Record<MutationProp<Name>, CreateMutationResult<TData, TError, TVariables, TContext>>,
 >(
   name: Name,
-  createMutationFn: CreateMutationFn<TData, TError, TVariables, TContext, NoInfer<Input>>,
-): SignalStoreFeature<
-  Input,
-  EmptyFeatureResult & {
-    methods: Record<
-      MutationProp<NoInfer<Name>>,
-      MutationMethod<NoInfer<TData>, NoInfer<TError>, NoInfer<TVariables>, NoInfer<TContext>>
-    >;
-  }
-> => {
-  const prop: MutationProp<NoInfer<Name>> = `${lowerFirst(name)}Mutation`;
+  createMutationFn: CreateMutationFn<Name, TData, TError, TVariables, TContext, Input>,
+) => {
+  const prop: MutationProp<Name> = `${lowerFirst(name)}Mutation`;
 
-  return signalStoreFeature(
-    withMethods((store) => {
-      const mutation = injectMutation(createMutationFn(store as QueryStore<NoInfer<Input>>));
+  return withProps<Input, Props>((store) => {
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    const mutation = injectMutation(createMutationFn(store as any));
 
-      return {
-        [prop]: new Proxy(() => mutation, {
-          get: (_, prop) => Reflect.get(mutation, prop),
-          has: (_, prop) => Reflect.has(mutation, prop),
-        }),
-      } as Record<
-        MutationProp<NoInfer<Name>>,
-        MutationMethod<NoInfer<TData>, NoInfer<TError>, NoInfer<TVariables>, NoInfer<TContext>>
-      >;
-    }),
-  );
+    return { [prop]: mutation } as Props;
+  });
 };
diff --git a/libs/ngx-signal-store-query/src/with-query.ts b/libs/ngx-signal-store-query/src/with-query.ts
@@ -1,13 +1,7 @@
-import {
-  type EmptyFeatureResult,
-  signalStoreFeature,
-  type SignalStoreFeature,
-  type SignalStoreFeatureResult,
-  withMethods,
-} from '@ngrx/signals';
-import { injectQuery, type QueryKey } from '@tanstack/angular-query-experimental';
+import { type SignalStoreFeatureResult, withProps } from '@ngrx/signals';
+import { type CreateQueryResult, injectQuery, type QueryKey } from '@tanstack/angular-query-experimental';
 
-import { type CreateQueryFn, type QueryMethod, type QueryProp, type QueryStore } from './types';
+import { type CreateQueryFn, type QueryProp } from './types';
 import { lowerFirst } from './utils';
 
 export const withQuery = <
@@ -17,25 +11,17 @@ export const withQuery = <
   TData = TDataFn,
   TQueryKey extends QueryKey = QueryKey,
   Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
+  Props extends object = Record<QueryProp<Name>, CreateQueryResult<TData, TError>>,
 >(
   name: Name,
-  createQueryFn: CreateQueryFn<TDataFn, TError, TData, TQueryKey, NoInfer<Input>>,
-): SignalStoreFeature<
-  Input,
-  EmptyFeatureResult & { methods: Record<QueryProp<NoInfer<Name>>, QueryMethod<NoInfer<TData>, NoInfer<TError>>> }
-> => {
-  const prop: QueryProp<NoInfer<Name>> = `${lowerFirst(name)}Query`;
+  createQueryFn: CreateQueryFn<Name, TDataFn, TError, TData, TQueryKey, Input>,
+) => {
+  const prop: QueryProp<Name> = `${lowerFirst(name)}Query`;
 
-  return signalStoreFeature(
-    withMethods((store) => {
-      const query = injectQuery(createQueryFn(store as QueryStore<NoInfer<Input>>));
+  return withProps<Input, Props>((store) => {
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    const query = injectQuery(createQueryFn(store as any));
 
-      return {
-        [prop]: new Proxy(() => query, {
-          get: (_, prop) => Reflect.get(query, prop),
-          has: (_, prop) => Reflect.has(query, prop),
-        }),
-      } as Record<QueryProp<NoInfer<Name>>, QueryMethod<NoInfer<TData>, NoInfer<TError>>>;
-    }),
-  );
+    return { [prop]: query } as Props;
+  });
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngx-signal-store-query/source",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "build": "ng build ngx-signal-store-query --configuration=production",
@@ -17,72 +17,60 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "^19.0.0",
-    "@angular/cdk": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/material": "^19.0.0",
-    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@angular/platform-server": "^19.0.0",
-    "@angular/router": "^19.0.0",
-    "@angular/ssr": "^19.0.1",
-    "@ngrx/signals": "^18.1.1",
-    "@tanstack/angular-query-experimental": "^5.61.1",
-    "express": "^4.21.1",
+    "@angular/animations": "^19.0.4",
+    "@angular/cdk": "^19.0.3",
+    "@angular/common": "^19.0.4",
+    "@angular/compiler": "^19.0.4",
+    "@angular/core": "^19.0.4",
+    "@angular/forms": "^19.0.4",
+    "@angular/material": "^19.0.3",
+    "@angular/platform-browser": "^19.0.4",
+    "@angular/platform-browser-dynamic": "^19.0.4",
+    "@angular/platform-server": "^19.0.4",
+    "@angular/router": "^19.0.4",
+    "@angular/ssr": "^19.0.5",
+    "@ngrx/signals": "^19.0.0-rc.0",
+    "@tanstack/angular-query-experimental": "^5.62.7",
+    "express": "^4.21.2",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.9.4",
-    "@analogjs/vitest-angular": "^1.9.4",
-    "@angular-devkit/build-angular": "^19.0.1",
-    "@angular/cli": "^19.0.1",
-    "@angular/compiler-cli": "^19.0.0",
+    "@analogjs/vite-plugin-angular": "^1.10.1",
+    "@analogjs/vitest-angular": "^1.10.1",
+    "@angular-devkit/build-angular": "^19.0.5",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.4",
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
-    "@eslint/js": "^9.15.0",
-    "@octokit/types": "^13.6.1",
-    "@playwright/test": "1.49.0",
-    "@types/express": "^4.17.21",
-    "@types/node": "^22.9.3",
-    "@vitest/coverage-v8": "^2.1.5",
-    "angular-eslint": "18.4.1",
+    "@eslint/js": "^9.17.0",
+    "@octokit/types": "^13.6.2",
+    "@playwright/test": "1.49.1",
+    "@types/express": "4.17.21",
+    "@types/node": "22.10.2",
+    "@vitest/coverage-v8": "^2.1.8",
+    "angular-eslint": "19.0.2",
     "cross-env": "^7.0.3",
-    "eslint": "^9.15.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
     "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.2.11",
     "ng-packagr": "^19.0.1",
-    "prettier": "3.3.3",
-    "prettier-plugin-packagejson": "2.5.5",
+    "prettier": "3.4.2",
+    "prettier-plugin-packagejson": "2.5.6",
     "prettier-plugin-sh": "0.14.0",
     "typescript": "~5.6.3",
-    "typescript-eslint": "8.15.0",
+    "typescript-eslint": "8.18.0",
     "vite": "^5.4.11",
-    "vite-tsconfig-paths": "^5.1.3",
-    "vitest": "^2.1.5"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.1.8"
   },
-  "packageManager": "pnpm@9.14.2",
+  "packageManager": "pnpm@9.15.0",
   "volta": {
-    "node": "22.11.0",
-    "pnpm": "9.14.2"
-  },
-  "overrides": {
-    "@analogjs/vitest-angular": {
-      "@angular-devkit/architect": "0.1900.1"
-    },
-    "@ngrx/signals": {
-      "@angular/core": "^19.0.0"
-    },
-    "angular-eslint": {
-      "@angular-devkit/core": "^19.0.1",
-      "@angular-devkit/schematics": "^19.0.1"
-    }
+    "node": "22.12.0",
+    "pnpm": "9.15.0"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,6 +25,7 @@ const config = tsEslint.config( @@
               style: 'kebab-case',
             },
           ],
+          '@typescript-eslint/no-explicit-any': 'warn',
         },
       },
       {
@@ Expand Down @@