@gluonjs/devtools / packages/devtools/src / InspectableRouter

Interface: InspectableRouter

Properties

currentRoute

readonly currentRoute: object

value

readonly value: object

value.fullPath?

readonly optional fullPath?: string

value.path?

readonly optional path?: string

Methods

afterEach()

afterEach(hook): () => void

Parameters

hook

(to, from, failure?) => void

Returns

() => void

Example

Adapt current-route and after-navigation evidence from any compatible Router without coupling the bridge to its full API:

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