@tachui/devtools 0.11.0 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -47
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -42,27 +42,27 @@ pnpm add @tachui/devtools
|
|
|
42
42
|
|
|
43
43
|
### Component Inspector
|
|
44
44
|
|
|
45
|
+
There is no `ComponentInspector` overlay component. Inspection is a singleton
|
|
46
|
+
you enable and query — `globalDevTools`, or `getDevTools()`.
|
|
47
|
+
|
|
45
48
|
```typescript
|
|
46
|
-
import {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
// Only in development
|
|
53
|
-
Show(() => import.meta.env.DEV).children([
|
|
54
|
-
ComponentInspector()
|
|
55
|
-
.position('bottom-left')
|
|
56
|
-
.features([
|
|
57
|
-
'component-tree',
|
|
58
|
-
'props-inspection',
|
|
59
|
-
'state-inspection',
|
|
60
|
-
'modifier-inspection',
|
|
61
|
-
])
|
|
62
|
-
.hotkey('Cmd+Shift+I'),
|
|
63
|
-
]),
|
|
64
|
-
])
|
|
49
|
+
import { globalDevTools } from '@tachui/devtools'
|
|
50
|
+
|
|
51
|
+
if (import.meta.env.DEV) {
|
|
52
|
+
globalDevTools.configure({ trackAllComponents: true, trackMemoryUsage: true })
|
|
53
|
+
globalDevTools.enable()
|
|
65
54
|
}
|
|
55
|
+
|
|
56
|
+
// The component tree, as a snapshot or as a signal you can observe
|
|
57
|
+
const tree = globalDevTools.getComponentTree()
|
|
58
|
+
const roots = globalDevTools.getRootComponents()
|
|
59
|
+
const live = globalDevTools.getComponentTreeSignal()
|
|
60
|
+
|
|
61
|
+
// Find something specific
|
|
62
|
+
const buttons = globalDevTools.findComponentsByName('Button')
|
|
63
|
+
|
|
64
|
+
// What it has recorded
|
|
65
|
+
const events = globalDevTools.getDebugEvents()
|
|
66
66
|
```
|
|
67
67
|
|
|
68
68
|
### Performance Profiler
|
|
@@ -89,35 +89,11 @@ if (import.meta.env.DEV) {
|
|
|
89
89
|
}
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
### Development Panel
|
|
93
|
-
|
|
94
|
-
```typescript
|
|
95
|
-
import { DevPanel } from '@tachui/devtools'
|
|
96
|
-
|
|
97
|
-
const App = () => {
|
|
98
|
-
return VStack().children([
|
|
99
|
-
AppContent(),
|
|
100
|
-
|
|
101
|
-
// Development panel overlay
|
|
102
|
-
Show(() => import.meta.env.DEV).children([
|
|
103
|
-
DevPanel()
|
|
104
|
-
.position('bottom-right')
|
|
105
|
-
.collapsible(true)
|
|
106
|
-
.hotkey('Cmd+Shift+D')
|
|
107
|
-
.tabs([
|
|
108
|
-
'component-inspector',
|
|
109
|
-
'performance-profiler',
|
|
110
|
-
'memory-monitor',
|
|
111
|
-
'network-inspector',
|
|
112
|
-
'console-logger',
|
|
113
|
-
'accessibility-checker',
|
|
114
|
-
]),
|
|
115
|
-
]),
|
|
116
|
-
])
|
|
117
|
-
}
|
|
118
|
-
```
|
|
92
|
+
### 🚧 Development Panel (planned)
|
|
119
93
|
|
|
120
|
-
|
|
94
|
+
`DevPanel` — a docked overlay with tabs for the inspector, profiler, memory and
|
|
95
|
+
network — is not implemented. `globalDevTools` above is the programmatic
|
|
96
|
+
equivalent of its component-inspector tab.
|
|
121
97
|
|
|
122
98
|
### Component Inspector
|
|
123
99
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tachui/devtools",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.1",
|
|
4
4
|
"description": "Development & debugging tools for tachUI framework",
|
|
5
5
|
"homepage": "https://tachui.dev/",
|
|
6
6
|
"type": "module",
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"lint": "oxlint src"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@tachui/core": "0.11.
|
|
57
|
-
"@tachui/primitives": "0.11.
|
|
58
|
-
"@tachui/registry": "0.11.
|
|
56
|
+
"@tachui/core": "0.11.1",
|
|
57
|
+
"@tachui/primitives": "0.11.1",
|
|
58
|
+
"@tachui/registry": "0.11.1",
|
|
59
59
|
"magic-string": "^0.30.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|