Skip to content

Commit 416b8e7

Browse files
AlemTuzlakAlemTuzlak
committed
feat(angular-devtools): create angular adapter package
Add the @tanstack/angular-devtools package with: - TanStackDevtoolsComponent: standalone Angular component that wraps TanStackDevtoolsCore - Plugin system supporting Angular components rendered into devtools containers - Type definitions for Angular-specific plugin and init configuration - Build config using @analogjs/vite-plugin-angular for AOT compilation
1 parent fc8c329 commit 416b8e7

7 files changed

Lines changed: 306 additions & 0 deletions

File tree

‎packages/angular-devtools/eslint.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// @ts-check
2+
3+
import rootConfig from '../../eslint.config.js'
4+
5+
export default [
6+
...rootConfig,
7+
]

‎packages/angular-devtools/package.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"name": "@tanstack/angular-devtools",
3+
"version": "0.0.1",
4+
"description": "TanStack Devtools is a set of tools for building advanced devtools for your Angular application.",
5+
"author": "Tanner Linsley",
6+
"license": "MIT",
7+
"repository": {
8+
"type": "git",
9+
"url": "git+https://github.com/TanStack/devtools.git",
10+
"directory": "packages/angular-devtools"
11+
},
12+
"homepage": "https://tanstack.com/devtools",
13+
"funding": {
14+
"type": "github",
15+
"url": "https://github.com/sponsors/tannerlinsley"
16+
},
17+
"keywords": [
18+
"angular",
19+
"devtools"
20+
],
21+
"type": "module",
22+
"types": "dist/esm/index.d.ts",
23+
"module": "dist/esm/index.js",
24+
"exports": {
25+
".": {
26+
"import": {
27+
"types": "./dist/esm/index.d.ts",
28+
"default": "./dist/esm/index.js"
29+
}
30+
},
31+
"./package.json": "./package.json"
32+
},
33+
"sideEffects": false,
34+
"engines": {
35+
"node": ">=18"
36+
},
37+
"files": [
38+
"dist",
39+
"src"
40+
],
41+
"scripts": {
42+
"clean": "premove ./build ./dist",
43+
"test:eslint": "eslint ./src",
44+
"test:lib": "vitest --passWithNoTests",
45+
"test:lib:dev": "pnpm test:lib --watch",
46+
"test:types": "tsc",
47+
"test:build": "publint --strict",
48+
"build": "vite build"
49+
},
50+
"dependencies": {
51+
"@tanstack/devtools": "workspace:*"
52+
},
53+
"devDependencies": {
54+
"@analogjs/vite-plugin-angular": "^1.15.0",
55+
"@angular/compiler": "^19.0.0",
56+
"@angular/compiler-cli": "^19.0.0",
57+
"@angular/core": "^19.0.0",
58+
"@angular/platform-browser": "^19.0.0",
59+
"@angular/platform-browser-dynamic": "^19.0.0",
60+
"zone.js": "^0.15.0"
61+
},
62+
"peerDependencies": {
63+
"@angular/core": ">=19.0.0",
64+
"@angular/platform-browser": ">=19.0.0"
65+
}
66+
}

‎packages/angular-devtools/src/devtools.ts‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import {
2+
ApplicationRef,
3+
Component,
4+
DestroyRef,
5+
ElementRef,
6+
EnvironmentInjector,
7+
afterNextRender,
8+
createComponent,
9+
inject,
10+
input,
11+
} from '@angular/core'
12+
import {
13+
PLUGIN_CONTAINER_ID,
14+
TanStackDevtoolsCore,
15+
} from '@tanstack/devtools'
16+
import type { ComponentRef, Type } from '@angular/core'
17+
import type { TanStackDevtoolsPlugin } from '@tanstack/devtools'
18+
import type {
19+
TanStackDevtoolsAngularInit,
20+
TanStackDevtoolsAngularPlugin,
21+
} from './types'
22+
23+
@Component({
24+
selector: 'tanstack-devtools',
25+
standalone: true,
26+
template: '<div #devtoolsHost></div>',
27+
})
28+
export class TanStackDevtoolsComponent {
29+
plugins = input<TanStackDevtoolsAngularInit['plugins']>()
30+
config = input<TanStackDevtoolsAngularInit['config']>()
31+
eventBusConfig = input<TanStackDevtoolsAngularInit['eventBusConfig']>()
32+
33+
private hostRef = inject(ElementRef)
34+
private appRef = inject(ApplicationRef)
35+
private injector = inject(EnvironmentInjector)
36+
private destroyRef = inject(DestroyRef)
37+
38+
private componentRefs: ComponentRef<any>[] = []
39+
private devtools: TanStackDevtoolsCore | null = null
40+
41+
constructor() {
42+
afterNextRender(() => {
43+
const hostEl = this.hostRef.nativeElement.querySelector('div')
44+
if (!hostEl) return
45+
46+
const pluginsMap = this.getPluginsMap()
47+
48+
this.devtools = new TanStackDevtoolsCore({
49+
config: this.config(),
50+
eventBusConfig: this.eventBusConfig(),
51+
plugins: pluginsMap,
52+
})
53+
54+
this.devtools.mount(hostEl)
55+
})
56+
57+
this.destroyRef.onDestroy(() => {
58+
this.destroyAllComponents()
59+
if (this.devtools) {
60+
this.devtools.unmount()
61+
this.devtools = null
62+
}
63+
})
64+
}
65+
66+
private getPluginsMap(): Array<TanStackDevtoolsPlugin> {
67+
const plugins = this.plugins()
68+
if (!plugins) return []
69+
70+
return plugins.map((plugin) => this.convertPlugin(plugin))
71+
}
72+
73+
private convertPlugin(plugin: TanStackDevtoolsAngularPlugin): TanStackDevtoolsPlugin {
74+
return {
75+
id: plugin.id,
76+
defaultOpen: plugin.defaultOpen,
77+
name:
78+
typeof plugin.name === 'string'
79+
? plugin.name
80+
: (e, theme) => {
81+
this.renderComponent(plugin.name as Type<any>, e, {
82+
theme,
83+
...(plugin.inputs ?? {}),
84+
})
85+
},
86+
render: (e, theme) => {
87+
this.renderComponent(plugin.component, e, {
88+
theme,
89+
...(plugin.inputs ?? {}),
90+
})
91+
},
92+
destroy: (pluginId) => {
93+
this.destroyComponentsInContainer(
94+
`${PLUGIN_CONTAINER_ID}-${pluginId}`,
95+
)
96+
},
97+
}
98+
}
99+
100+
private renderComponent(
101+
component: Type<any>,
102+
container: HTMLElement,
103+
inputs: Record<string, unknown>,
104+
) {
105+
const componentRef = createComponent(component, {
106+
environmentInjector: this.injector,
107+
hostElement: container,
108+
})
109+
110+
for (const [key, value] of Object.entries(inputs)) {
111+
componentRef.setInput(key, value)
112+
}
113+
114+
this.appRef.attachView(componentRef.hostView)
115+
componentRef.changeDetectorRef.detectChanges()
116+
this.componentRefs.push(componentRef)
117+
}
118+
119+
private destroyComponentsInContainer(containerId: string) {
120+
this.componentRefs = this.componentRefs.filter((ref) => {
121+
const el = ref.location.nativeElement as HTMLElement
122+
if (el.parentElement?.id === containerId) {
123+
this.appRef.detachView(ref.hostView)
124+
ref.destroy()
125+
return false
126+
}
127+
return true
128+
})
129+
}
130+
131+
private destroyAllComponents() {
132+
for (const ref of this.componentRefs) {
133+
this.appRef.detachView(ref.hostView)
134+
ref.destroy()
135+
}
136+
this.componentRefs = []
137+
}
138+
}

‎packages/angular-devtools/src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export { TanStackDevtoolsComponent } from './devtools'
2+
3+
export type {
4+
TanStackDevtoolsAngularPlugin,
5+
TanStackDevtoolsAngularInit,
6+
} from './types'

‎packages/angular-devtools/src/types.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { Type } from '@angular/core'
2+
import type {
3+
ClientEventBusConfig,
4+
TanStackDevtoolsConfig,
5+
} from '@tanstack/devtools'
6+
7+
export type TanStackDevtoolsAngularPlugin = {
8+
id?: string
9+
component: Type<any>
10+
name: string | Type<any>
11+
inputs?: Record<string, any>
12+
defaultOpen?: boolean
13+
}
14+
15+
export interface TanStackDevtoolsAngularInit {
16+
/**
17+
* Array of plugins to be used in the devtools.
18+
* Each plugin should have a `component` that is an Angular component class.
19+
*
20+
* Example:
21+
* ```typescript
22+
* @Component({
23+
* template: `<tanstack-devtools [plugins]="plugins" />`,
24+
* imports: [TanStackDevtoolsComponent],
25+
* })
26+
* class AppComponent {
27+
* plugins: TanStackDevtoolsAngularPlugin[] = [
28+
* { name: 'My Plugin', component: MyPluginComponent }
29+
* ];
30+
* }
31+
* ```
32+
*/
33+
plugins?: Array<TanStackDevtoolsAngularPlugin>
34+
/**
35+
* Configuration for the devtools shell. These configuration options are used to set the
36+
* initial state of the devtools when it is started for the first time. Afterwards,
37+
* the settings are persisted in local storage and changed through the settings panel.
38+
*/
39+
config?: Partial<TanStackDevtoolsConfig>
40+
/**
41+
* Configuration for the TanStack Devtools client event bus.
42+
*/
43+
eventBusConfig?: ClientEventBusConfig
44+
}
45+
46+
export type RenderArray = Array<{
47+
id: string
48+
component: Type<any>
49+
inputs: Record<string, unknown>
50+
}>

‎packages/angular-devtools/tsconfig.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"experimentalDecorators": true
5+
},
6+
"include": ["src", "eslint.config.js", "vite.config.ts", "tests"],
7+
"angularCompilerOptions": {
8+
"enableI18nLegacyMessageIdFormat": false,
9+
"strictInjectionParameters": true,
10+
"strictInputAccessModifiers": true,
11+
"strictTemplates": true,
12+
"compilationMode": "partial"
13+
}
14+
}

‎packages/angular-devtools/vite.config.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { defineConfig, mergeConfig } from 'vitest/config'
2+
import { tanstackViteConfig } from '@tanstack/vite-config'
3+
import angular from '@analogjs/vite-plugin-angular'
4+
import packageJson from './package.json'
5+
6+
const config = defineConfig({
7+
plugins: [angular() as any],
8+
test: {
9+
name: packageJson.name,
10+
dir: './tests',
11+
watch: false,
12+
environment: 'jsdom',
13+
globals: true,
14+
},
15+
})
16+
17+
export default mergeConfig(
18+
config,
19+
tanstackViteConfig({
20+
entry: ['./src/index.ts'],
21+
srcDir: './src',
22+
externalDeps: ['@angular/core', '@angular/platform-browser', 'rxjs', 'zone.js'],
23+
cjs: false,
24+
}),
25+
)

0 commit comments

Comments
 (0)