@gluonjs/devtools / packages/devtools/src / DevtoolsArtifactContract

Interface: DevtoolsArtifactContract

Properties

format

readonly format: "esm-package"

inspectorExport

readonly inspectorExport: "mountGluonDevtools"

manifest

readonly manifest: "./browser-inspector.manifest.json"

name

readonly name: "gluon-devtools-browser-inspector"

packageExport

readonly packageExport: "."

packageName

readonly packageName: "@gluonjs/devtools"

runtime

readonly runtime: object

global

readonly global: "__GLUON_DEVTOOLS__"

mode

readonly mode: "serve-only"

productionExposure

readonly productionExposure: false

security

readonly security: object

permissions

readonly permissions: readonly []

remoteInspection

readonly remoteInspection: false

sourceNavigation

readonly sourceNavigation: "callback-only-redacted"

version

readonly version: 1

virtualId

readonly virtualId: string

Example

Negotiate the reproducible package artifact and its zero-permission, no-remote-inspection security contract:

import { createApp, html } from '@gluonjs/core';
import {
  GLUON_DEVTOOLS_GLOBAL,
  GluonDevtoolsBridge,
  createDevtoolsArtifactContract,
  createDevtoolsBridge,
  gluonDevtoolsPlugin,
  mountGluonDevtools,
  type DevtoolsBridgeOptions,
  type DevtoolsArtifactContract,
  type DevtoolsInspectorOptions,
  type GluonDevtoolsPluginOptions,
  type InspectableRouter,
  type InspectableStore,
  type MountedDevtools,
} from '@gluonjs/devtools';

const root = document.querySelector<HTMLElement>('#app')!;
const app = createApp(() => html`<main>Shop</main>`);
app.mount(root);
const router: InspectableRouter = {
  currentRoute: { value: { fullPath: '/shop' } },
  afterEach: (_hook) => () => undefined,
};
const store: InspectableStore = {
  subscribe: (_callback) => () => undefined,
  dehydrate: () => ({ version: 1, stores: {} }),
};
const globalObject: Record<string, unknown> = {};
const bridgeOptions = { enabled: true, exposeGlobal: true, globalObject } satisfies DevtoolsBridgeOptions;
const bridge: GluonDevtoolsBridge = createDevtoolsBridge(bridgeOptions);
const unregister = bridge.registerApplication({ id: 'shop', app, root, router, store });
const inspectorOptions = { navigateToSource: (location) => console.log(location) } satisfies DevtoolsInspectorOptions;
const mounted: MountedDevtools = mountGluonDevtools(bridge, document.body, inspectorOptions);
const artifact: DevtoolsArtifactContract = createDevtoolsArtifactContract();
const pluginOptions = { virtualId: 'virtual:shop-devtools' } satisfies GluonDevtoolsPluginOptions;
const vitePlugin = gluonDevtoolsPlugin(pluginOptions);
console.log(globalObject[GLUON_DEVTOOLS_GLOBAL] === bridge, vitePlugin.name, mounted.element, artifact.manifest);
mounted.unmount();
unregister();
bridge.dispose();
app.unmount();