feat(angular-query): move devtools to conditional sub-paths (#9270)

* feat(angular-query-devtools): move devtools to conditional sub-paths, improves tree shaking and dependency injection

* Fix compatibility with moduleResolution node

* ci: apply automated fixes

* fix preview release for angular-query

* Fix angular-query preview release

* Revert some changes made obsolete by better Vite based alternative

* Update export paths

* Fix production exports and publishconfig

* knip config

* remove postpack

* Generate API reference docs

* type declarations in correct directory

* Update documentation

* knip config

* Optional core devtools dependency

* ci: apply automated fixes

* regenerate api reference docs

* ci: apply automated fixes

* ci: apply automated fixes (attempt 2/3)

* regenerate api reference docs

* formatting

* apply coderabbit suggestions

* Improve unit tests

* docs

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: arnoud-dv

codecov.yml

@@ -19,10 +19,6 @@ comment:
 
 component_management:
   individual_components:
-    - component_id: angular-query-devtools-experimental
-      name: '@tanstack/angular-query-devtools-experimental'
-      paths:
-        - packages/angular-query-devtools-experimental/**
     - component_id: angular-query-experimental
       name: '@tanstack/angular-query-experimental'
       paths:

docs/framework/angular/devtools.md

@@ -13,27 +13,38 @@ title: Devtools
 
 The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.
 
-By default, the devtools are enabled when Angular [`isDevMode`](https://angular.dev/api/core/isDevMode) returns true. So you don't need to worry about excluding them during a production build. The core tools are lazily loaded and excluded from bundled code. In most cases, all you'll need to do is add `withDevtools()` to `provideTanStackQuery` without any additional configuration.
+By default, Angular Query Devtools are only included in development mode bundles, so you don't need to worry about excluding them during a production build.
 
 ```ts
 import {
   QueryClient,
   provideTanStackQuery,
-  withDevtools,
 } from '@tanstack/angular-query-experimental'
 
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
+
 export const appConfig: ApplicationConfig = {
   providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
 }
 ```
 
-## Configuring if devtools are loaded
+## Devtools in production
 
-If you need more control over when devtools are loaded, you can use the `loadDevtools` option. This is particularly useful if you want to load devtools based on environment configurations. For instance, you might have a test environment running in production mode but still require devtools to be available.
+Devtools are automatically excluded from production builds. However, it might be desirable to lazy load the devtools in production.
 
-When not setting the option or setting it to 'auto', the devtools will be loaded when Angular is in development mode.
+To use `withDevtools` in production builds, import using the `production` sub-path. The function exported from the production subpath is identical to the main one, but won't be excluded from production builds.
 
 ```ts
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
+```
+
+To control when devtools are loaded, you can use the `loadDevtools` option.
+
+When not setting the option or setting it to 'auto', the devtools will be loaded automatically only when Angular runs in development mode.
+
+```ts
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
+
 provideTanStackQuery(new QueryClient(), withDevtools())
 
 // which is equivalent to
@@ -45,10 +56,16 @@ provideTanStackQuery(
 
 When setting the option to true, the devtools will be loaded in both development and production mode.
 
+This is useful if you want to load devtools based on [Angular environment configurations](https://angular.dev/tools/cli/environments). E.g. you could set this to true when the application is running on your production build staging environment.
+
 ```ts
+import { environment } from './environments/environment'
+// Make sure to use the production sub-path to load devtools in production builds
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
+
 provideTanStackQuery(
   new QueryClient(),
-  withDevtools(() => ({ loadDevtools: true })),
+  withDevtools(() => ({ loadDevtools: environment.loadDevtools })),
 )
 ```
 
@@ -61,44 +78,66 @@ provideTanStackQuery(
 )
 ```
 
-The `withDevtools` options are returned from a callback function to support reactivity through signals. In the following example
-a signal is created from a RxJS observable that listens for a keyboard shortcut. When the event is triggered, the devtools are lazily loaded.
-Using this technique allows you to support on-demand loading of the devtools even in production mode, without including the full tools in the bundled code.
+## Derive options through reactivity
+
+Options are passed to `withDevtools` from a callback function to support reactivity through signals. In the following example
+a signal is created from a RxJS observable that emits on a keyboard shortcut. When the derived signal is set to true, the devtools are lazily loaded.
+
+The example below always loads devtools in development mode and loads on-demand in production mode when a keyboard shortcut is pressed.
 
 ```ts
+import { Injectable, isDevMode } from '@angular/core'
+import { fromEvent, map, scan } from 'rxjs'
+import { toSignal } from '@angular/core/rxjs-interop'
+
 @Injectable({ providedIn: 'root' })
-class DevtoolsOptionsManager {
+export class DevtoolsOptionsManager {
   loadDevtools = toSignal(
     fromEvent<KeyboardEvent>(document, 'keydown').pipe(
       map(
         (event): boolean =>
           event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
       ),
-      scan((acc, curr) => acc || curr, false),
+      scan((acc, curr) => acc || curr, isDevMode()),
     ),
     {
-      initialValue: false,
+      initialValue: isDevMode(),
     },
   )
 }
+```
+
+If you want to use an injectable such as a service in the callback you can use `deps`. The injected value will be passed as parameter to the callback function.
+
+This is similar to `deps` in Angular's [`useFactory`](https://angular.dev/guide/di/dependency-injection-providers#factory-providers-usefactory) provider.
+
+```ts
+// ...
+// 👇 Note we import from the production sub-path to enable devtools lazy loading in production builds
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(),
     provideTanStackQuery(
       new QueryClient(),
-      withDevtools(() => ({
-        initialIsOpen: true,
-        loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
-      })),
+      withDevtools(
+        (devToolsOptionsManager: DevtoolsOptionsManager) => ({
+          loadDevtools: devToolsOptionsManager.loadDevtools(),
+        }),
+        {
+          // `deps` is used to inject and pass `DevtoolsOptionsManager` to the `withDevtools` callback.
+          deps: [DevtoolsOptionsManager],
+        },
+      ),
     ),
   ],
 }
 ```
 
-### Options
+### Options returned from the callback
 
-Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
+Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
 
 - `loadDevtools?: 'auto' | boolean`
   - Defaults to `auto`: lazily loads devtools when in development mode. Skips loading in production mode.
@@ -121,3 +160,5 @@ Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `init
 - `shadowDOMTarget?: ShadowRoot`
   - Default behavior will apply the devtool's styles to the head tag within the DOM.
   - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `hideDisabledQueries?: boolean`
+  - Set this to true to hide disabled queries from the devtools panel.

docs/framework/angular/guides/query-cancellation.md

@@ -60,7 +60,7 @@ query = injectQuery(() => ({
 
 [//]: # 'Example3'
 
-```tsx
+```ts
 import axios from 'axios'
 
 const query = injectQuery(() => ({

docs/framework/angular/reference/functions/infinitequeryoptions.md

@@ -3,6 +3,8 @@ id: infiniteQueryOptions
 title: infiniteQueryOptions
 ---
 
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
 # Function: infiniteQueryOptions()
 
 Allows to share and re-use infinite query options in a type-safe way.
@@ -24,16 +26,19 @@ function infiniteQueryOptions<
   TPageParam,
 >(
   options,
-): DefinedInitialDataInfiniteOptions<
+): CreateInfiniteQueryOptions<
   TQueryFnData,
   TError,
   TData,
   TQueryKey,
   TPageParam
 > &
+  object &
   object
 ```
 
+Defined in: [infinite-query-options.ts:88](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L88)
+
 Allows to share and re-use infinite query options in a type-safe way.
 
 The `queryKey` will be tagged with the type from `queryFn`.
@@ -60,7 +65,7 @@ The infinite query options to tag with the type from `queryFn`.
 
 ### Returns
 
-[`DefinedInitialDataInfiniteOptions`](../../type-aliases/definedinitialdatainfiniteoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object`
+[`CreateInfiniteQueryOptions`](../../interfaces/createinfinitequeryoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object`
 
 The tagged infinite query options.
 
@@ -70,10 +75,6 @@ The tagged infinite query options.
 
 The infinite query options to tag with the type from `queryFn`.
 
-### Defined in
-
-[infinite-query-options.ts:94](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L94)
-
 ## Call Signature
 
 ```ts
@@ -85,16 +86,22 @@ function infiniteQueryOptions<
   TPageParam,
 >(
   options,
-): UnusedSkipTokenInfiniteOptions<
-  TQueryFnData,
-  TError,
-  TData,
-  TQueryKey,
-  TPageParam
+): OmitKeyof<
+  CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+  'queryFn'
 > &
+  object &
   object
 ```
 
+Defined in: [infinite-query-options.ts:119](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L119)
+
 Allows to share and re-use infinite query options in a type-safe way.
 
 The `queryKey` will be tagged with the type from `queryFn`.
@@ -121,7 +128,7 @@ The infinite query options to tag with the type from `queryFn`.
 
 ### Returns
 
-[`UnusedSkipTokenInfiniteOptions`](../../type-aliases/unusedskiptokeninfiniteoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object`
+`OmitKeyof`\<[`CreateInfiniteQueryOptions`](../../interfaces/createinfinitequeryoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"queryFn"`\> & `object` & `object`
 
 The tagged infinite query options.
 
@@ -131,10 +138,6 @@ The tagged infinite query options.
 
 The infinite query options to tag with the type from `queryFn`.
 
-### Defined in
-
-[infinite-query-options.ts:126](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L126)
-
 ## Call Signature
 
 ```ts
@@ -146,16 +149,19 @@ function infiniteQueryOptions<
   TPageParam,
 >(
   options,
-): UndefinedInitialDataInfiniteOptions<
+): CreateInfiniteQueryOptions<
   TQueryFnData,
   TError,
   TData,
   TQueryKey,
   TPageParam
 > &
+  object &
   object
 ```
 
+Defined in: [infinite-query-options.ts:150](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L150)
+
 Allows to share and re-use infinite query options in a type-safe way.
 
 The `queryKey` will be tagged with the type from `queryFn`.
@@ -182,7 +188,7 @@ The infinite query options to tag with the type from `queryFn`.
 
 ### Returns
 
-[`UndefinedInitialDataInfiniteOptions`](../../type-aliases/undefinedinitialdatainfiniteoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object`
+[`CreateInfiniteQueryOptions`](../../interfaces/createinfinitequeryoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object`
 
 The tagged infinite query options.
 
@@ -191,7 +197,3 @@ The tagged infinite query options.
 ### Param
 
 The infinite query options to tag with the type from `queryFn`.
-
-### Defined in
-
-[infinite-query-options.ts:158](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/infinite-query-options.ts#L158)

docs/framework/angular/reference/functions/injectinfinitequery.md

@@ -3,6 +3,8 @@ id: injectInfiniteQuery
 title: injectInfiniteQuery
 ---
 
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
 # Function: injectInfiniteQuery()
 
 Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
@@ -31,6 +33,8 @@ function injectInfiniteQuery<
 ): DefinedCreateInfiniteQueryResult<TData, TError>
 ```
 
+Defined in: [inject-infinite-query.ts:41](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L41)
+
 Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
 Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
 
@@ -76,10 +80,6 @@ A function that returns infinite query options.
 
 Additional configuration.
 
-### Defined in
-
-[inject-infinite-query.ts:42](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L42)
-
 ## Call Signature
 
 ```ts
@@ -92,6 +92,8 @@ function injectInfiniteQuery<
 >(injectInfiniteQueryFn, options?): CreateInfiniteQueryResult<TData, TError>
 ```
 
+Defined in: [inject-infinite-query.ts:65](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L65)
+
 Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
 Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
 
@@ -137,10 +139,6 @@ A function that returns infinite query options.
 
 Additional configuration.
 
-### Defined in
-
-[inject-infinite-query.ts:67](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L67)
-
 ## Call Signature
 
 ```ts
@@ -153,6 +151,8 @@ function injectInfiniteQuery<
 >(injectInfiniteQueryFn, options?): CreateInfiniteQueryResult<TData, TError>
 ```
 
+Defined in: [inject-infinite-query.ts:89](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L89)
+
 Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
 Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
 
@@ -172,7 +172,7 @@ Infinite queries can additively "load more" data onto an existing set of data or
 
 #### injectInfiniteQueryFn
 
-() => [`CreateInfiniteQueryOptions`](../../interfaces/createinfinitequeryoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`, `TPageParam`\>
+() => [`CreateInfiniteQueryOptions`](../../interfaces/createinfinitequeryoptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
 
 A function that returns infinite query options.
 
@@ -197,7 +197,3 @@ A function that returns infinite query options.
 ### Param
 
 Additional configuration.
-
-### Defined in
-
-[inject-infinite-query.ts:92](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L92)