|
1 | | -import { DevtoolsEventClient } from './eventClient'; |
2 | | -import { createAngularPanel, createAngularPlugin } from '@tanstack/devtools-utils/angular'; |
| 1 | +import { DevtoolsEventClient } from './eventClient' |
| 2 | +import { createAngularPanel, createAngularPlugin } from '@tanstack/devtools-utils/angular' |
3 | 3 |
|
4 | 4 | class BasePanel { |
5 | | - #unsubscribes = [] as Array<() => void>; |
6 | | - #dispose = () => void 0; |
| 5 | + #unsubscribes = [] as Array<() => void> |
| 6 | + #dispose = () => void 0 |
7 | 7 |
|
8 | 8 | 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) |
11 | 11 |
|
12 | 12 | function render(count: number, history: string) { |
13 | 13 | plugin.innerHTML = ` |
14 | 14 | <div>counter state: ${count}</div> |
15 | 15 | <div>counter history: ${history}</div> |
16 | | - `; |
| 16 | + ` |
17 | 17 | } |
18 | 18 |
|
19 | | - render(0, ''); |
| 19 | + render(0, '') |
20 | 20 |
|
21 | 21 | this.#unsubscribes.push( |
22 | 22 | 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) |
26 | 26 | }), |
27 | | - ); |
| 27 | + ) |
28 | 28 |
|
29 | 29 | this.#dispose = () => { |
30 | | - plugin.remove(); |
31 | | - }; |
| 30 | + plugin.remove() |
| 31 | + } |
32 | 32 | } |
33 | 33 |
|
34 | 34 | unmount() { |
35 | | - this.#unsubscribes.forEach((unsubscribe) => unsubscribe()); |
36 | | - this.#dispose(); |
| 35 | + this.#unsubscribes.forEach((unsubscribe) => unsubscribe()) |
| 36 | + this.#dispose() |
37 | 37 | } |
38 | 38 | } |
39 | 39 |
|
40 | | -export const [CustomDevtoolPanel, NoOpCustomDevtoolPanel] = createAngularPanel(BasePanel); |
| 40 | +export const [CustomDevtoolPanel, NoOpCustomDevtoolPanel] = createAngularPanel(BasePanel) |
41 | 41 |
|
42 | 42 | export const [customDevtoolPlugin, noOpCustomDevtoolPlugin] = createAngularPlugin({ |
43 | 43 | name: 'Custom Devtools (Plugin)', |
44 | 44 | render: CustomDevtoolPanel, |
45 | | -}); |
| 45 | +}) |
0 commit comments