@tanstack/devtools
Version:
TanStack Devtools is a set of tools for building advanced devtools for your application.
210 lines (202 loc) • 6.9 kB
TypeScript
import * as solid_js from 'solid-js';
import { TanStackDevtoolsTheme } from '@tanstack/devtools-ui';
export { TanStackDevtoolsTheme } from '@tanstack/devtools-ui';
import { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
export { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
declare const PLUGIN_CONTAINER_ID = "plugin-container";
declare const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
declare const tabs: readonly [{
readonly name: "Plugins";
readonly id: "plugins";
readonly component: (props: {
isOpen: boolean;
}) => solid_js.JSX.Element;
readonly icon: () => solid_js.JSX.Element;
}, {
readonly name: "SEO";
readonly id: "seo";
readonly component: () => solid_js.JSX.Element;
readonly icon: () => solid_js.JSX.Element;
}, {
readonly name: "Settings";
readonly id: "settings";
readonly component: () => solid_js.JSX.Element;
readonly icon: () => solid_js.JSX.Element;
}];
type TabName = (typeof tabs)[number]['id'];
type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta';
type KeyboardKey = ModifierKey | (string & {});
type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
type TriggerProps = {
theme: TanStackDevtoolsTheme;
};
type DevtoolsStore = {
settings: {
/**
* Whether the dev tools should be open by default
* @default false
*/
defaultOpen: boolean;
/**
* Whether the dev tools trigger should be hidden until the user hovers over it
* @default false
*/
hideUntilHover: boolean;
/**
* The position of the trigger button
* @default "bottom-right"
*/
position: TriggerPosition;
/**
* The location of the panel once it is open
* @default "bottom"
*/
panelLocation: 'top' | 'bottom';
/**
* The hotkey to open the dev tools
* @default ["Control", "~"]
*/
openHotkey: Array<KeyboardKey>;
/**
* The hotkey to open the source inspector
* @default ["Shift", "Alt", "CtrlOrMeta"]
*/
inspectHotkey: Array<KeyboardKey>;
/**
* Whether to require the URL flag to open the dev tools
* @default false
*/
requireUrlFlag: boolean;
/**
* The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)
* @default "tanstack-devtools"
*/
urlFlag: string;
/**
* The theme of the dev tools
* @default "dark"
*/
theme: TanStackDevtoolsTheme;
/**
* The action to perform when clicking a source-inspected element
* - "ide-warp": open the file in the IDE via the Vite middleware
* - "copy-path": copy the file path to the clipboard
* @default "ide-warp"
*/
sourceAction: 'ide-warp' | 'copy-path';
/**
* Whether the trigger should be completely hidden or not (you can still open with the hotkey)
*/
triggerHidden?: boolean;
/**
* An optional custom function to render the dev tools trigger component.
* If provided, it replaces the default trigger button.
* @default undefined
*/
customTrigger?: (el: HTMLElement, props: TriggerProps) => void;
};
state: {
activeTab: TabName;
height: number;
activePlugins: Array<string>;
persistOpen: boolean;
};
plugins?: Array<TanStackDevtoolsPlugin>;
};
interface TanStackDevtoolsPluginProps {
theme: TanStackDevtoolsTheme;
devtoolsOpen: boolean;
}
interface TanStackDevtoolsPlugin {
/**
* Name to be displayed in the devtools UI.
* If a string, it will be used as the plugin name.
* If a function, it will be called with the mount element.
*
* Example:
* ```ts
* {
* // If a string, it will be used as the plugin name
* name: "Your Plugin",
* render: () => {}
* }
* ```
* or
*
* ```ts
* {
* // If a function, it will be called with the mount element
* name: (el) => {
* el.innerText = "Your Plugin Name"
* // Your name logic here
* },
* render: () => {}
* }
* ```
*/
name: string | ((el: HTMLHeadingElement, props: TanStackDevtoolsPluginProps) => void);
/**
* Unique identifier for the plugin.
* If not provided, it will be generated based on the name.
*/
id?: string;
/**
* Whether the plugin should be open by default when there are no active plugins.
* If true, this plugin will be added to activePlugins on initial load when activePlugins is empty.
* @default false
*/
defaultOpen?: boolean;
/**
* Render the plugin UI by using the provided element. This function will be called
* when the plugin tab is clicked and expected to be mounted.
* @param el The mount element for the plugin.
* @returns void
*
* Example:
* ```ts
* render: (el) => {
* el.innerHTML = "<h1>Your Plugin</h1>"
* }
* ```
*/
render: (el: HTMLDivElement, props: TanStackDevtoolsPluginProps) => void;
destroy?: (pluginId: string) => void;
}
type TanStackDevtoolsConfig = DevtoolsStore['settings'];
interface TanStackDevtoolsInit {
/**
* Configuration for the devtools shell. These configuration options are used to set the
* initial state of the devtools when it is started for the first time. Afterwards,
* the settings are persisted in local storage and changed through the settings panel.
*/
config?: Partial<TanStackDevtoolsConfig>;
/**
* Array of plugins to be used in the devtools.
* Each plugin has a `render` function that gives you the dom node to mount into
*
* Example:
* ```ts
* const devtools = new TanStackDevtoolsCore({
* plugins: [
* {
* id: "your-plugin-id",
* name: "Your Plugin",
* render: (el) => {
* // Your render logic here
* },
* },
* ],
* })
* ```
*/
plugins?: Array<TanStackDevtoolsPlugin>;
eventBusConfig?: ClientEventBusConfig;
}
declare class TanStackDevtoolsCore {
#private;
constructor(init: TanStackDevtoolsInit);
mount<T extends HTMLElement>(el: T): void;
unmount(): void;
setConfig(config: Partial<TanStackDevtoolsInit>): void;
}
export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, type TanStackDevtoolsConfig, TanStackDevtoolsCore, type TanStackDevtoolsInit, type TanStackDevtoolsPlugin, type TanStackDevtoolsPluginProps };