@groundstate/devtools

Developer tools for inspecting, debugging, and monitoring @groundstate CRDT documents.

Installation

# npm
npm install @groundstate/devtools

# yarn
yarn add @groundstate/devtools

# pnpm
pnpm add @groundstate/devtools

Quick Start

import { DevToolsInspector, OperationStream, NetworkSimulator } from '@groundstate/devtools';
import { Doc, Field } from '@groundstate/crdt';

const doc = Doc({ title: Field(''), body: Field('') });

// Inspect document structure
const inspector = new DevToolsInspector(doc);
const tree = inspector.getTree();
console.log(tree); // Full CRDT metadata for every field

// Stream live operations
const stream = new OperationStream(doc);
stream.on('op', (event) => {
  console.log(`[${event.type}] ${event.path}: ${event.value}`);
});

// Simulate adverse network conditions
const sim = new NetworkSimulator({ latency: 500, packetLoss: 0.1 });
sim.connect(peerA, peerB);
sim.start();

API Highlights

Inspector

• DevToolsInspector -- Deep introspection into document structure and CRDT metadata
• FieldInfo / DocTreeNode -- Types describing the document tree

Operations

• OperationStream -- Subscribe to a live stream of all CRDT operations
• OperationEvent / OperationFilter -- Event shape and filtering options

Network Simulator

• NetworkSimulator -- Simulate latency, packet loss, and partitions to test convergence

Metrics

• MetricsCollector -- OpenTelemetry-compatible metrics collection (op rates, merge times, doc sizes)
• Span / MetricPoint -- Metric types for custom dashboards

Browser Extension Bridge

• DevToolsBridge -- Connect a running app to the Groundstate browser DevTools panel
• DevToolsHook -- Global hook for extension discovery
• DevToolsMessageType -- Message protocol enum

Documentation

See the full documentation for complete API reference.

License

MIT