@gluonjs/devtools-api / packages/devtools-api/src / DevtoolsProtocol
Class: DevtoolsProtocol
Constructors
Constructor
new DevtoolsProtocol():
DevtoolsProtocol
Returns
DevtoolsProtocol
Methods
clearTimeline()
clearTimeline():
void
Returns
void
handshake()
handshake():
DevtoolsHandshake
Returns the stable contract external Devtools clients must negotiate.
Returns
record()
record(
applicationId,kind,payload,timestamp?):DevtoolsEvent
Parameters
applicationId
string
kind
payload
unknown
timestamp?
number = ...
Returns
registerApplication()
registerApplication(
inspector): () =>void
Parameters
inspector
Returns
() => void
selectApplication()
selectApplication(
id):void
Parameters
id
string
Returns
void
snapshot()
snapshot():
DevtoolsSnapshot
Returns
subscribe()
subscribe(
listener): () =>void
Parameters
listener
Returns
() => void
Example
Own application inspectors, selection, a sequenced timeline, immutable snapshots, and subscriber notification behind the versioned Devtools contract:
import {
DevtoolsProtocol,
GLUON_DEVTOOLS_PROTOCOL_CAPABILITIES,
GLUON_DEVTOOLS_PROTOCOL_VERSION,
toDevtoolsSourceLocation,
toDevtoolsValue,
type ApplicationInspector,
type ApplicationSnapshot,
type ComponentSnapshot,
type DevtoolsEvent,
type DevtoolsEventKind,
type DevtoolsHandshake,
type DevtoolsListener,
type DevtoolsSnapshot,
type DevtoolsSourceLocation,
type DevtoolsSourceLocationInput,
type DevtoolsValue,
} from '@gluonjs/devtools-api';
const sourceInput = { kind: 'component', file: '/workspace/product-card.ts', line: 12 } satisfies DevtoolsSourceLocationInput;
const source: DevtoolsSourceLocation | undefined = toDevtoolsSourceLocation(sourceInput);
const component = {
id: 'shop:product-card:0',
name: 'product-card',
attributes: { role: 'article' },
properties: { productId: 'orbit-lamp' },
stylesheets: 1,
sourceLocation: source,
children: [],
} satisfies ComponentSnapshot;
const inspector: ApplicationInspector = {
id: 'shop',
name: 'GLUON GOODS',
snapshot: (selected): ApplicationSnapshot => ({
id: 'shop', name: 'GLUON GOODS', selected, mounted: true, route: '/products/orbit-lamp',
state: { bagCount: 1 }, context: {}, components: [component], stylesheets: 3,
}),
};
const protocol = new DevtoolsProtocol();
const handshake: DevtoolsHandshake = protocol.handshake();
const unregister = protocol.registerApplication(inspector);
const listener: DevtoolsListener = (snapshot: DevtoolsSnapshot, event?: DevtoolsEvent) =>
console.log(snapshot.selectedApplicationId, event?.sequence);
const unsubscribe = protocol.subscribe(listener);
const kind: DevtoolsEventKind = 'store';
const payload: DevtoolsValue = toDevtoolsValue({ action: 'add', product: 'orbit-lamp' });
protocol.record('shop', kind, payload);
console.log(GLUON_DEVTOOLS_PROTOCOL_VERSION, GLUON_DEVTOOLS_PROTOCOL_CAPABILITIES, handshake, protocol.snapshot());
unsubscribe();
unregister();