docs(angular-devtools): update docs

Author: riccardoperra

docs/framework/angular/adapter.md

@@ -13,7 +13,7 @@ npm install @tanstack/angular-devtools
 
 ## Component Inputs
 
-The `TanStackDevtoolsComponent` (selector: `tanstack-devtools`) accepts the following signal-based inputs, defined by the `TanStackDevtoolsAngularInit` interface:
+The `TanStackDevtools` (selector: `tanstack-devtools`) accepts the following signal-based inputs, defined by the `TanStackDevtoolsAngularInit` interface:
 
 | Input | Type | Description |
 | --- | --- | --- |
@@ -28,19 +28,19 @@ Each plugin in the `plugins` array must conform to the `TanStackDevtoolsAngularP
 ```ts
 type TanStackDevtoolsAngularPlugin = {
   id?: string
-  component: Type<any>
+  render: TanStackDevtoolsAngularPluginRender
   name: string | Type<any>
   inputs?: Record<string, any>
   defaultOpen?: boolean
 }
 ```
 
-| Field | Type | Description |
-| --- | --- | --- |
-| `id` | `string` (optional) | Unique identifier for the plugin. |
-| `component` | `Type<any>` | The Angular component class to render as the plugin panel content. |
-| `name` | `string \| Type<any>` | Display name for the tab title. Can be a plain string or an Angular component class for custom rendering. |
-| `inputs` | `Record<string, any>` (optional) | Additional inputs passed to the plugin component via `setInput()`. |
+| Field         | Type | Description |
+|---------------| --- | --- |
+| `id`          | `string` (optional) | Unique identifier for the plugin. |
+| `render`      | `Type<any>` | The Angular component class to render as the plugin panel content. |
+| `name`        | `string \| Type<any>` | Display name for the tab title. Can be a plain string or an Angular component class for custom rendering. |
+| `inputs`      | `Record<string, any>` (optional) | Additional inputs passed to the plugin component via `setInput()`. |
 | `defaultOpen` | `boolean` (optional) | Whether this plugin tab should be open by default. |
 
 ## Key Differences from Other Frameworks
@@ -49,22 +49,22 @@ The Angular adapter uses `component` (an Angular component class reference) inst
 
 ```typescript
 import { Component } from '@angular/core'
-import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+import { TanStackDevtools } from '@tanstack/angular-devtools'
 import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [TanStackDevtoolsComponent],
+  imports: [TanStackDevtools],
   template: `
     <tanstack-devtools [plugins]="plugins" />
   `,
 })
-export class AppComponent {
+export class App {
   plugins = [
     {
       name: 'Angular Query',
-      component: AngularQueryDevtoolsPanel,
+      render: AngularQueryDevtoolsPanel,
       inputs: { style: 'height: 100%' },
     },
   ]
@@ -75,7 +75,7 @@ export class AppComponent {
 
 The `@tanstack/angular-devtools` package exports:
 
-- **`TanStackDevtoolsComponent`** -- The main Angular standalone component that renders the devtools panel.
+- **`TanStackDevtools`** -- The main Angular standalone component that renders the devtools panel.
 - **`TanStackDevtoolsAngularPlugin`** (type) -- The type for plugin definitions.
 - **`TanStackDevtoolsAngularInit`** (type) -- The inputs interface for the `TanStackDevtoolsComponent`.
 

docs/framework/angular/basic-setup.md

@@ -22,27 +22,27 @@ import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [TanStackDevtoolsComponent],
+  imports: [TanStackDevtools],
   template: `
     <app-content />
     <tanstack-devtools />
   `,
 })
-export class AppComponent {}
+export class App {}
 ```
 
-Import the desired devtools and provide them to the `TanStackDevtoolsComponent` via the `[plugins]` input along with a label for the menu.
+Import the desired devtools and provide them to the `TanStackDevtools` via the `[plugins]` input along with a label for the menu.
 
 ```typescript
 import { Component } from '@angular/core'
-import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+import { TanStackDevtools } from '@tanstack/angular-devtools'
 import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'
 import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [TanStackDevtoolsComponent],
+  imports: [TanStackDevtools],
   template: `
     <app-content />
     <tanstack-devtools [plugins]="plugins" />
@@ -52,12 +52,10 @@ export class AppComponent {
   plugins: Array<TanStackDevtoolsAngularPlugin> = [
     {
       name: 'Angular Query',
-      component: AngularQueryDevtoolsPanel,
+      render: AngularQueryDevtoolsPanel,
     },
   ]
 }
 ```
 
-> Note: The Angular adapter uses `component` (an Angular component class) instead of `render` (a JSX element) in plugin definitions. Additional inputs can be provided via the `inputs` field and are bound to the component with `setInput()`.
-
-Finally, add any additional configuration you desire to the `TanStackDevtoolsComponent`. More information can be found under the [TanStack Devtools Configuration](../../configuration) section.
+Finally, add any additional configuration you desire to the `TanStackDevtools`. More information can be found under the [TanStack Devtools Configuration](../../configuration) section.

docs/framework/angular/guides/custom-plugins.md

@@ -126,7 +126,7 @@ import { DevtoolsEventClient } from './eventClient'
     </div>
   `,
 })
-export class DevtoolPanelComponent implements OnInit, OnDestroy {
+export class DevtoolPanel implements OnInit, OnDestroy {
   state = signal<{ count: number; history: number[] } | undefined>(undefined)
   private cleanup?: () => void
 
@@ -153,29 +153,29 @@ This step follows what's shown in [basic-setup](../basic-setup) for a more docum
 app.component.ts
 ```typescript
 import { Component } from '@angular/core'
-import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+import { TanStackDevtools } from '@tanstack/angular-devtools'
 import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'
 import { DevtoolPanelComponent } from './devtool-panel.component'
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [TanStackDevtoolsComponent],
+  imports: [TanStackDevtools],
   template: `
     <app-content />
     <tanstack-devtools [plugins]="plugins" />
   `,
 })
 export class AppComponent {
   plugins: Array<TanStackDevtoolsAngularPlugin> = [
-    { name: 'Custom devtools', component: DevtoolPanelComponent },
+    { name: 'Custom devtools', component: DevtoolPanel },
   ]
 }
 ```
 
 ## Debugging
 
-Both the `TanStackDevtoolsComponent` and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+Both the `TanStackDevtools` and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
 
 TanStackDevtools debugging mode can be activated like so:
 ```typescript
@@ -188,9 +188,9 @@ TanStackDevtools debugging mode can be activated like so:
   `,
   imports: [TanStackDevtoolsComponent],
 })
-export class AppComponent {
+export class App {
   plugins: Array<TanStackDevtoolsAngularPlugin> = [
-    { name: 'Custom devtools', component: DevtoolPanelComponent },
+    { name: 'Custom devtools', component: DevtoolPanel },
   ]
 }
 ```

examples/react/bundling-repro/.wrangler/deploy/config.json

@@ -1 +1 @@
-{ "configPath": "..\\..\\dist\\server\\wrangler.json", "auxiliaryWorkers": [] }
+{"configPath":"../../dist/server/wrangler.json","auxiliaryWorkers":[]}