@gluonjs/core / 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

DevtoolsHandshake

---

record()

record(applicationId, kind, payload, timestamp?): DevtoolsEvent

Parameters

applicationId

string

kind

DevtoolsEventKind

payload

unknown

timestamp?

number = ...

Returns

DevtoolsEvent

---

registerApplication()

registerApplication(inspector): () => void

Parameters

inspector

ApplicationInspector

Returns

() => void

---

selectApplication()

selectApplication(id): void

Parameters

id

string

Returns

void

---

snapshot()

snapshot(): DevtoolsSnapshot

Returns

DevtoolsSnapshot

---

subscribe()

subscribe(listener): () => void

Parameters

listener

DevtoolsListener

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();