@nodomx/devtools

@nodomx/devtools is the official runtime debugging panel for NodomX.

Features

• Discover mounted NodomX apps automatically
• Browse the module tree and inspect the selected module
• Auto-scroll the tree to the selected module and jump back from picked DOM nodes
• Inspect setup, state, props, route, exposed, and official store state
• Record runtime timeline events including Transition, KeepAlive, and Suspense
• Group timeline events by reason or module and drill into event details
• Copy the visible timeline, copy grouped event summaries, and export grouped events
• Persist panel filters, active tab, and timeline grouping between close/open cycles
• Highlight the selected module's real DOM
• Pick a live DOM element and jump back to the owning module
• Jump from grouped timeline events directly to the owning module or highlighted DOM node
• Patch module setup / state directly from the panel
• Patch official store state directly from the panel
• Edit route path, query rows, query JSON, and hash directly from the panel
• Load query JSON back into query rows and sort query keys before navigation
• Reset route editors, copy the current route, and copy or inspect event payloads
• Export snapshots and inspect data in the browser console
• Open or close the panel with Ctrl + Shift + D

Install

npm install -D @nodomx/devtools

Usage

import { createDevtools } from "@nodomx/devtools";
import { Nodom } from "nodomx";
import App from "./App.nd";

const app = Nodom.createApp(App, "#app");
app.use(createDevtools());
app.mount("#app");

Panel areas

• App tabs: switch between mounted apps
• Module tree: browse modules, search by name or hot id, and change selection
• Timeline: review lifecycle, render, and suspense-related events, then group them by reason or module
• Timeline exports: copy the currently visible timeline or the active group summary/events
• Events: inspect the selected timeline event payload in detail, copy it, or send it to the console
• Timeline groups: inspect the active group summary and recent events inside that group
• Inspector: inspect and patch the selected module or store, edit route path/query/hash, and view the selected module path
• Pick element: hover the page and click a real DOM element to focus its owning module
• Route editor: edit query rows visually, round-trip them through JSON, reset drafts, or copy the current route

Runtime API

import {
  createDevtools,
  getDevtoolsHook,
  installDevtoolsHook,
  notifyDevtoolsUpdate
} from "@nodomx/devtools";

Common hook methods:

• installDevtoolsHook(options?)
• getDevtoolsHook()
• notifyDevtoolsUpdate(app, reason, details?)
• hook.getSnapshot(appId?)
• hook.getTimeline(appId?)
• hook.exportSnapshot(appId?)
• hook.inspectSelection(appId?, moduleId?)
• hook.highlightSelection(appId?, moduleId?)
• hook.pickElement(target, appId?)
• hook.navigateRoute(pathOrLocation, options?)
• hook.applyModulePatch(appId?, moduleId?, "setup" | "state", payload)
• hook.applyStorePatch(appId?, storeId, payload)

Notes

This is an embedded runtime panel, so it works without a separate browser extension. It can later evolve into a dedicated standalone DevTools experience.