@korajs/devtools 0.1.0 → 0.1.2
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 +58 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @korajs/devtools
|
|
2
|
+
|
|
3
|
+
Browser DevTools extension for Kora.js. Inspect operations, trace conflict resolution decisions, monitor sync status, and debug your offline-first app in real time.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add -D @korajs/devtools
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Enable
|
|
12
|
+
|
|
13
|
+
Add `devtools: true` to your app config:
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { createApp } from 'korajs'
|
|
17
|
+
|
|
18
|
+
const app = createApp({
|
|
19
|
+
schema,
|
|
20
|
+
devtools: process.env.NODE_ENV === 'development',
|
|
21
|
+
})
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
When enabled, the Kora DevTools panel appears in your browser's developer tools.
|
|
25
|
+
|
|
26
|
+
## Panels
|
|
27
|
+
|
|
28
|
+
### Sync Timeline
|
|
29
|
+
Horizontal timeline of operations and sync events, color-coded by type. Click any event to inspect it. Causal arrows show dependencies between operations.
|
|
30
|
+
|
|
31
|
+
### Conflict Inspector
|
|
32
|
+
Table of all merge events, filterable by collection, tier, and strategy. Expand any row to see the full `MergeTrace` -- input values, base value, resolved output, and which tier handled it.
|
|
33
|
+
|
|
34
|
+
### Operation Log
|
|
35
|
+
Searchable list of all operations. Click an operation to view its full payload, causal dependencies, and the database state at that point in time.
|
|
36
|
+
|
|
37
|
+
### Network Status
|
|
38
|
+
Real-time connection quality indicator, pending operation count, bandwidth graph, and last sync timestamp.
|
|
39
|
+
|
|
40
|
+
## Instrumentation Events
|
|
41
|
+
|
|
42
|
+
The DevTools extension listens for events emitted by the Kora runtime:
|
|
43
|
+
|
|
44
|
+
- `operation:created` / `operation:applied`
|
|
45
|
+
- `merge:started` / `merge:completed` / `merge:conflict`
|
|
46
|
+
- `sync:connected` / `sync:disconnected` / `sync:sent` / `sync:received`
|
|
47
|
+
- `query:subscribed` / `query:invalidated` / `query:executed`
|
|
48
|
+
- `connection:quality`
|
|
49
|
+
|
|
50
|
+
## Keyboard Shortcut
|
|
51
|
+
|
|
52
|
+
In development mode, press `Ctrl+Shift+K` (or `Cmd+Shift+K` on macOS) to toggle the embedded DevTools overlay.
|
|
53
|
+
|
|
54
|
+
## License
|
|
55
|
+
|
|
56
|
+
MIT
|
|
57
|
+
|
|
58
|
+
See the [full documentation](https://github.com/ehoneahobed/kora) for guides, API reference, and examples.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@korajs/devtools",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Kora.js devtools package",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"dist"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@korajs/core": "0.1.
|
|
25
|
+
"@korajs/core": "0.1.2"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"typescript": "^5.7.3",
|