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

Interface: DevtoolsSourceLocationInput

Properties

column?

readonly optional column?: number

file?

readonly optional file?: string

kind

readonly kind: "render" | "error" | "component" | "store" | "router"

line?

readonly optional line?: number

redacted?

readonly optional redacted?: boolean

A transport marker is accepted for round-tripping but never trusted.

Example

Provide optional component, render, Router, Store, or error source metadata for validation and redaction at the protocol boundary:

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