@gluonjs/devtools-api / packages/devtools-api/src / DevtoolsHandshake

Interface: DevtoolsHandshake

Properties

capabilities

readonly capabilities: readonly ["application-selection", "component-snapshots", "error-events", "source-locations", "render-events", "router-events", "scheduler-events", "store-events", "timeline"]

protocol

readonly protocol: 1

Example

Inspect the protocol version and advertised capability set before connecting an external Devtools client:

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