@gluonjs/core / packages/devtools/src / mountGluonDevtools

Function: mountGluonDevtools()

mountGluonDevtools(bridge, target?, options?): MountedDevtools

Parameters

bridge

GluonDevtoolsBridge

target?

Element = document.body

options?

DevtoolsInspectorOptions = {}

Returns

MountedDevtools

Example

Mount the opt-in Devtools panel for a registered application and release the panel, registration, bridge, and application in ownership order:

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