@gluonjs/devtools


@gluonjs/devtools / packages/devtools/src / RegisterApplicationOptions

Interface: RegisterApplicationOptions

Properties

app

readonly app: Pick<GluonApp, "mounted">


context?

readonly optional context?: () => unknown

Returns

unknown


id

readonly id: string


name?

readonly optional name?: string


root

readonly root: Element


router?

readonly optional router?: InspectableRouter


state?

readonly optional state?: () => unknown

Returns

unknown


store?

readonly optional store?: InspectableStore

Example

Describe the application identity, mount state, and root element that the Devtools bridge should inspect:

ts
import { createApp, html } from '@gluonjs/core';
import {
  createDevtoolsBridge,
  mountGluonDevtools,
  type RegisterApplicationOptions,
} from '@gluonjs/devtools';

const root = document.querySelector<HTMLElement>('#app')!;
const app = createApp(() => html`<main>Shop</main>`);
app.mount(root);

const bridge = createDevtoolsBridge({ enabled: true });
const registration = { id: 'shop', name: 'Shop', app, root } satisfies RegisterApplicationOptions;
const unregister = bridge.registerApplication(registration);
const panel = mountGluonDevtools(bridge);

panel.unmount();
unregister();
bridge.dispose();
app.unmount();