refactor(angular-query): build with tsup and remove devtools component (#8284)

* chore(angular-query): build with tsup

* ci: apply automated fixes

* remove unused tslib dependency

---------

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

Author: arnoud-dv

examples/angular/pagination/package.json

@@ -23,7 +23,6 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.60.0",
     "typescript": "5.3.3"
   }
 }

examples/angular/pagination/src/app/app.component.ts

@@ -1,12 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { ExampleComponent } from './components/example.component'
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-root',
   standalone: true,
-  template: `<example /><angular-query-devtools initialIsOpen />`,
-  imports: [AngularQueryDevtools, ExampleComponent],
+  template: `<example />`,
+  imports: [ExampleComponent],
 })
 export class AppComponent {}

examples/angular/pagination/src/app/app.config.ts

@@ -6,13 +6,14 @@ import {
 import {
   QueryClient,
   provideTanStackQuery,
+  withDevtools,
 } from '@tanstack/angular-query-experimental'
 import { projectsMockInterceptor } from './api/projects-mock.interceptor'
 import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(withInterceptors([projectsMockInterceptor]), withFetch()),
-    provideTanStackQuery(new QueryClient()),
+    provideTanStackQuery(new QueryClient(), withDevtools()),
   ],
 }

examples/angular/query-options-from-a-service/package.json

@@ -24,7 +24,6 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.60.0",
     "typescript": "5.3.3"
   }
 }

examples/angular/query-options-from-a-service/src/app/app.component.html

@@ -8,5 +8,4 @@
     sequences)
   </strong>
 </p>
-<angular-query-devtools initialIsOpen />
 <router-outlet />

examples/angular/query-options-from-a-service/src/app/app.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core'
 import { RouterOutlet } from '@angular/router'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [AngularQueryDevtools, RouterOutlet],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styles: [],
 })

examples/angular/rxjs/package.json

@@ -9,7 +9,6 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/cdk": "17.3.10",
     "@angular/common": "^17.3.12",
     "@angular/compiler": "^17.3.12",
     "@angular/core": "^17.3.12",
@@ -25,7 +24,6 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.60.0",
     "typescript": "5.3.3"
   }
 }

examples/angular/rxjs/src/app/app.component.ts

@@ -1,12 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { ExampleComponent } from './components/example.component'
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-root',
   standalone: true,
-  template: `<example /><angular-query-devtools initialIsOpen />`,
-  imports: [AngularQueryDevtools, ExampleComponent],
+  template: `<example />`,
+  imports: [ExampleComponent],
 })
 export class AppComponent {}

examples/angular/rxjs/src/app/components/example.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import {
   injectQuery,
   keepPreviousData,
@@ -14,7 +13,7 @@ import { AutocompleteService } from '../services/autocomplete-service'
   selector: 'example',
   standalone: true,
   templateUrl: './example.component.html',
-  imports: [AngularQueryDevtools, ReactiveFormsModule],
+  imports: [ReactiveFormsModule],
 })
 export class ExampleComponent {
   #autocompleteService = inject(AutocompleteService)

examples/angular/rxjs/src/app/services/autocomplete-service.ts

@@ -11,7 +11,7 @@ interface Response {
 })
 export class AutocompleteService {
   #http = inject(HttpClient)
-  getSuggestions = (term: string) =>
+  getSuggestions = (term: string = '') =>
     term.trim() === ''
       ? of({ suggestions: [] })
       : this.#http.get<Response>(`/api/autocomplete?term=${term}`)

examples/angular/simple/package.json

@@ -14,7 +14,6 @@
     "@angular/core": "^17.3.12",
     "@angular/platform-browser": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/router": "^17.3.12",
     "@tanstack/angular-query-experimental": "^5.60.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",

integrations/angular-cli-17/package.json

@@ -8,7 +8,6 @@
     "@angular/common": "^17.3.12",
     "@angular/core": "^17.3.12",
     "@angular/platform-browser": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "workspace:*",
     "@tanstack/angular-query-experimental": "workspace:*",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",

integrations/angular-cli-17/src/app/app.component.ts

@@ -1,4 +1,3 @@
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { injectQuery } from '@tanstack/angular-query-experimental'
@@ -13,9 +12,8 @@ import { injectQuery } from '@tanstack/angular-query-experimental'
     <div *ngIf="query.data()">
       {{ query.data() }}
     </div>
-    <angular-query-devtools initialIsOpen />
   `,
-  imports: [AngularQueryDevtools, CommonModule],
+  imports: [CommonModule],
 })
 export class AppComponent {
   /**

integrations/angular-cli-17/src/assets/.gitkeep

@@ -1,3 +1,7 @@
 {
-  "ignoreRules": ["cjs-resolves-to-esm", "internal-resolution-error"]
+  "ignoreRules": [
+    "cjs-resolves-to-esm",
+    "internal-resolution-error",
+    "no-resolution"
+  ]
 }

packages/angular-query-devtools-experimental/.attw.json

@@ -22,39 +22,39 @@
     "test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js",
     "test:types:ts53": "tsc",
     "test:build": "publint --strict && attw --pack",
-    "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && rimraf ./build/package.json"
+    "build": "pnpm build:tsup",
+    "build:tsup": "tsup"
   },
   "type": "module",
   "types": "build/index.d.ts",
-  "module": "build/fesm2022/tanstack-angular-query-devtools-experimental.mjs",
+  "module": "build/index.js",
   "exports": {
     ".": {
-      "types": "./build/index.d.ts",
-      "esm2022": "./build/esm2022/tanstack-angular-query-devtools-experimental.mjs",
-      "esm": "./build/esm2022/tanstack-angular-query-devtools-experimental.mjs",
-      "default": "./build/fesm2022/tanstack-angular-query-devtools-experimental.mjs"
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/index.js"
+      }
     },
     "./package.json": {
       "default": "./package.json"
     }
   },
   "sideEffects": false,
   "files": [
-    "build"
+    "build",
+    "src",
+    "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "workspace:*",
-    "tslib": "^2.6.3"
+    "@tanstack/query-devtools": "workspace:*"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^1.6.4",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler-cli": "^17.3.12",
     "@angular/core": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
     "@tanstack/angular-query-experimental": "workspace:*",
     "eslint-plugin-jsdoc": "^50.2.2",
-    "ng-packagr": "^17.3.0",
+    "tsup": "8.0.2",
     "typescript": "5.3.3"
   },
   "peerDependencies": {

packages/angular-query-devtools-experimental/ng-package.json

@@ -1,2 +1 @@
-export * from './angular-query-devtools.component'
 export * from './inject-devtools-panel'

packages/angular-query-devtools-experimental/package.json

@@ -71,6 +71,7 @@ export function injectDevtoolsPanel(
       } = options()
 
       untracked(() => {
+        if (!client) throw new Error('No QueryClient found')
         if (!devtools && hostElement) {
           devtools = new TanstackQueryDevtoolsPanel({
             client,