Skip to content

Commit efa3afd

Browse files
riccardoperrariccardoperra
committed
feat: Add angular adapter and devtools-utils/angular
1 parent 3f27799 commit efa3afd

File tree

20 files changed

+320
-380
lines changed

20 files changed

+320
-380
lines changed

‎examples/angular/basic/src/app/app.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core'
1+
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
22

33
export const appConfig: ApplicationConfig = {
44
providers: [provideBrowserGlobalErrorListeners()],
5-
}
5+
};

‎examples/angular/basic/src/app/app.ts‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
import {
2-
ChangeDetectionStrategy,
3-
Component,
4-
reflectComponentType,
5-
signal,
6-
Type,
7-
} from '@angular/core'
8-
import { createCounter } from './counter'
9-
import type { TanStackDevtoolsAngularInit } from '@tanstack/angular-devtools'
10-
import { CustomDevtoolPanel } from './devtools/custom-devtools-panel'
11-
import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
1+
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2+
import { createCounter } from './counter';
3+
import type { TanStackDevtoolsAngularInit } from '@tanstack/angular-devtools';
4+
import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools';
125

136
@Component({
147
selector: 'app-root',
@@ -23,20 +16,22 @@ import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
2316
</div>
2417
</div>
2518
26-
<tanstack-devtools [plugins]="plugins()" [eventBusConfig]="{ debug: true }" />
19+
@defer (when true) {
20+
<tanstack-devtools [plugins]="plugins()" [eventBusConfig]="{ debug: true }" />
21+
}
2722
`,
2823
changeDetection: ChangeDetectionStrategy.OnPush,
2924
})
3025
export class App {
3126
readonly plugins = signal<NonNullable<TanStackDevtoolsAngularInit['plugins']>>([
3227
{
3328
name: 'Custom devtools',
34-
render: CustomDevtoolPanel,
29+
render: () => import('./devtools/custom-devtools-panel'),
3530
},
36-
])
31+
]);
3732

38-
readonly counter = createCounter()
33+
readonly counter = createCounter();
3934

40-
readonly increment = () => this.counter.increment()
41-
readonly decrement = () => this.counter.decrement()
35+
readonly increment = () => this.counter.increment();
36+
readonly decrement = () => this.counter.decrement();
4237
}

‎examples/angular/basic/src/app/devtools/custom-devtools-panel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { JsonPipe } from '@angular/common'
2121
changeDetection: ChangeDetectionStrategy.OnPush,
2222
imports: [JsonPipe],
2323
})
24-
export class CustomDevtoolPanel {
24+
export default class CustomDevtoolPanel {
2525
#destroyRef = inject(DestroyRef)
2626

2727
// Automatically added

‎examples/angular/panel/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@angular/router": "^21.2.0",
2020
"@tanstack/angular-devtools": "workspace:*",
2121
"@tanstack/devtools": "workspace:^",
22+
"@tanstack/devtools-utils": "workspace:*",
2223
"@tanstack/devtools-event-client": "workspace:*",
2324
"rxjs": "~7.8.0",
2425
"tslib": "^2.3.0"

‎examples/angular/panel/src/app/app.ts‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import {
22
ChangeDetectionStrategy,
33
Component,
4-
reflectComponentType,
54
signal,
6-
Type,
75
} from '@angular/core'
86
import { createCounter } from './counter'
97
import type { TanStackDevtoolsAngularInit } from '@tanstack/angular-devtools'
10-
import { CustomDevtoolPanel } from './devtools/custom-devtools-panel'
8+
import {
9+
CustomDevtoolPanel,
10+
customDevtoolPlugin,
11+
noOpCustomDevtoolPlugin,
12+
} from './devtools/custom-devtools-panel';
1113
import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
1214

1315
@Component({
@@ -23,20 +25,25 @@ import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
2325
</div>
2426
</div>
2527
26-
<tanstack-devtools [plugins]="plugins()" [eventBusConfig]="{ debug: true }" />
28+
@defer (when true) {
29+
<tanstack-devtools [plugins]="plugins()" [eventBusConfig]="{ debug: true }" />
30+
}
2731
`,
2832
changeDetection: ChangeDetectionStrategy.OnPush,
2933
})
3034
export class App {
3135
readonly plugins = signal<NonNullable<TanStackDevtoolsAngularInit['plugins']>>([
3236
{
33-
name: 'Custom devtools',
37+
name: 'Custom devtools (Panel)',
3438
render: CustomDevtoolPanel,
3539
},
36-
])
40+
customDevtoolPlugin(),
41+
// No-op plugin -> will not be rendered
42+
noOpCustomDevtoolPlugin(),
43+
]);
3744

38-
readonly counter = createCounter()
45+
readonly counter = createCounter();
3946

40-
readonly increment = () => this.counter.increment()
41-
readonly decrement = () => this.counter.decrement()
47+
readonly increment = () => this.counter.increment();
48+
readonly decrement = () => this.counter.decrement();
4249
}

‎examples/angular/panel/src/app/devtools/custom-devtools-panel.ts‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,45 @@
1-
import { DevtoolsEventClient } from './eventClient'
2-
import { createAngularPanel } from '@tanstack/angular-devtools/utils'
1+
import { DevtoolsEventClient } from './eventClient';
2+
import { createAngularPanel, createAngularPlugin } from '@tanstack/devtools-utils/angular';
33

44
class BasePanel {
5-
#unsubscribes = [] as Array<() => void>
6-
#dispose = () => void 0
5+
#unsubscribes = [] as Array<() => void>;
6+
#dispose = () => void 0;
77

88
mount<T extends HTMLElement>(element: T) {
9-
const plugin = element.ownerDocument.createElement('div')
10-
element.appendChild(plugin)
9+
const plugin = element.ownerDocument.createElement('div');
10+
element.appendChild(plugin);
1111

1212
function render(count: number, history: string) {
1313
plugin.innerHTML = `
1414
<div>counter state: ${count}</div>
1515
<div>counter history: ${history}</div>
16-
`
16+
`;
1717
}
1818

19-
render(0, '')
19+
render(0, '');
2020

2121
this.#unsubscribes.push(
2222
DevtoolsEventClient.on('counter-state', (e) => {
23-
const count = e.payload.count ?? 0
24-
const history = JSON.stringify(e.payload.history ?? {})
25-
render(count, history)
23+
const count = e.payload.count ?? 0;
24+
const history = JSON.stringify(e.payload.history ?? {});
25+
render(count, history);
2626
}),
27-
)
27+
);
2828

2929
this.#dispose = () => {
30-
plugin.remove()
31-
}
30+
plugin.remove();
31+
};
3232
}
3333

3434
unmount() {
35-
this.#unsubscribes.forEach((unsubscribe) => unsubscribe())
36-
this.#dispose()
35+
this.#unsubscribes.forEach((unsubscribe) => unsubscribe());
36+
this.#dispose();
3737
}
3838
}
3939

40-
export const [CustomDevtoolPanel] = createAngularPanel(BasePanel)
40+
export const [CustomDevtoolPanel, NoOpCustomDevtoolPanel] = createAngularPanel(BasePanel);
41+
42+
export const [customDevtoolPlugin, noOpCustomDevtoolPlugin] = createAngularPlugin({
43+
name: 'Custom Devtools (Plugin)',
44+
render: CustomDevtoolPanel,
45+
});

‎packages/angular-devtools/package.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,6 @@
2626
"types": "./dist/types/tanstack-angular-devtools.d.ts",
2727
"default": "./dist/fesm2022/tanstack-angular-devtools.mjs"
2828
},
29-
"./utils": {
30-
"types": "./dist/types/tanstack-angular-devtools-utils.d.ts",
31-
"default": "./dist/fesm2022/tanstack-angular-devtools-utils.mjs"
32-
},
3329
"./package.json": {
3430
"default": "./package.json"
3531
}

0 commit comments

Comments
 (0)