react-inspector-devtools 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +199 -2
- package/dist/DevtoolsApp.d.ts +1 -0
- package/dist/InspectorDevTools.d.ts +8 -0
- package/dist/components/ConfirmDialog/index.d.ts +12 -0
- package/dist/components/ContextMenu/index.d.ts +27 -0
- package/dist/components/DevToolsContainer/index.d.ts +3 -0
- package/dist/components/ErrorBoundary/index.d.ts +18 -0
- package/dist/components/Icons/index.d.ts +39 -0
- package/dist/components/ObjectInspector/index.d.ts +28 -0
- package/dist/components/SplitPane/index.d.ts +17 -0
- package/dist/components/StatusBar/index.d.ts +2 -0
- package/dist/components/Toolbar/index.d.ts +6 -0
- package/dist/core/eventBus.d.ts +32 -0
- package/dist/core/ownership.d.ts +9 -0
- package/dist/core/panelRegistry.d.ts +9 -0
- package/dist/hooks/useConfig.d.ts +13 -0
- package/dist/hooks/useDevtoolsContext.d.ts +8 -0
- package/dist/hooks/useDrag.d.ts +6 -0
- package/dist/hooks/useThemeResolved.d.ts +2 -0
- package/dist/index.cjs +10667 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +10662 -0
- package/dist/index.js.map +1 -0
- package/dist/inspectors/CSSInspector/BoxModel.d.ts +4 -0
- package/dist/inspectors/CSSInspector/ComputedPane.d.ts +3 -0
- package/dist/inspectors/CSSInspector/StylesPane.d.ts +3 -0
- package/dist/inspectors/CSSInspector/cssModel.d.ts +72 -0
- package/dist/inspectors/CookieInspector/index.d.ts +1 -0
- package/dist/inspectors/DOMInspector/DOMTree.d.ts +1 -0
- package/dist/inspectors/DOMInspector/Overlay.d.ts +2 -0
- package/dist/inspectors/DOMInspector/PropertiesPane.d.ts +7 -0
- package/dist/inspectors/DOMInspector/treeModel.d.ts +19 -0
- package/dist/inspectors/DOMInspector/usePicker.d.ts +6 -0
- package/dist/inspectors/StorageInspector/index.d.ts +10 -0
- package/dist/inspectors/StorageInspector/providers.d.ts +2 -0
- package/dist/instrumentation/console/index.d.ts +10 -0
- package/dist/instrumentation/dom/index.d.ts +9 -0
- package/dist/instrumentation/errors/index.d.ts +5 -0
- package/dist/instrumentation/index.d.ts +26 -0
- package/dist/instrumentation/network/fetch.d.ts +9 -0
- package/dist/instrumentation/network/resources.d.ts +15 -0
- package/dist/instrumentation/network/shared.d.ts +26 -0
- package/dist/instrumentation/network/xhr.d.ts +10 -0
- package/dist/instrumentation/storage/index.d.ts +9 -0
- package/dist/panels/Application/index.d.ts +1 -0
- package/dist/panels/Console/ConsoleInput.d.ts +3 -0
- package/dist/panels/Console/evaluate.d.ts +26 -0
- package/dist/panels/Console/format.d.ts +8 -0
- package/dist/panels/Console/index.d.ts +1 -0
- package/dist/panels/DeviceToolbar/emulation.d.ts +34 -0
- package/dist/panels/DeviceToolbar/index.d.ts +1 -0
- package/dist/panels/Elements/index.d.ts +1 -0
- package/dist/panels/Network/RequestDetails.d.ts +5 -0
- package/dist/panels/Network/index.d.ts +1 -0
- package/dist/panels/Network/util.d.ts +11 -0
- package/dist/panels/Settings/index.d.ts +1 -0
- package/dist/panels/index.d.ts +3 -0
- package/dist/store/applicationStore.d.ts +10 -0
- package/dist/store/consoleStore.d.ts +30 -0
- package/dist/store/deviceStore.d.ts +24 -0
- package/dist/store/devtoolsStore.d.ts +49 -0
- package/dist/store/elementsStore.d.ts +24 -0
- package/dist/store/networkStore.d.ts +33 -0
- package/dist/themes/index.d.ts +1 -0
- package/dist/types/index.d.ts +158 -0
- package/dist/utils/cookies.d.ts +32 -0
- package/dist/utils/domSelector.d.ts +4 -0
- package/dist/utils/format.d.ts +15 -0
- package/dist/utils/mediaQuery.d.ts +19 -0
- package/dist/utils/safeStorage.d.ts +10 -0
- package/dist/utils/shortcut.d.ts +15 -0
- package/dist/utils/specificity.d.ts +6 -0
- package/dist/utils/stack.d.ts +2 -0
- package/package.json +66 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Faizan Pinjari
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,200 @@
|
|
|
1
|
-
#
|
|
1
|
+
# react-inspector-devtools
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Chrome DevTools–style developer tools that you embed directly in a React application: **Elements**, **Console**, **Network**, **Application**, and a **Device Toolbar**.
|
|
4
|
+
|
|
5
|
+
Use it when you can't open the browser's own DevTools, for example because corporate policy, managed browsers or kiosk environments disable them. The panels look and work like Chrome DevTools, so there is no new interface to learn.
|
|
6
|
+
|
|
7
|
+
- React 18 and React 19
|
|
8
|
+
- Renders inside a Shadow DOM, so your CSS can't affect the tools and the tools' CSS can't affect your app
|
|
9
|
+
- Uses its own React root, so it never re-renders or breaks your component tree
|
|
10
|
+
- SSR-safe: works with Vite, Create React App, Next.js (client side) and Webpack
|
|
11
|
+
- One runtime dependency (`zustand`), about 65 KB gzipped (minified)
|
|
12
|
+
|
|
13
|
+
> **What it is not:** a replacement for the browser's privileged debugger. Everything runs as JavaScript inside the page, with the same permissions as your app. See [Limitations](../../docs/limitations.md).
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install react-inspector-devtools
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick start
|
|
24
|
+
|
|
25
|
+
Add the component once, near the root of your app:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { InspectorDevTools } from 'react-inspector-devtools';
|
|
29
|
+
|
|
30
|
+
export default function App() {
|
|
31
|
+
return (
|
|
32
|
+
<>
|
|
33
|
+
<MainApplication />
|
|
34
|
+
{import.meta.env.DEV && <InspectorDevTools />}
|
|
35
|
+
</>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Open and close the tools with **Ctrl + Shift + D** (**⌘ + Shift + D** on macOS), or with the floating launcher button in the bottom-right corner.
|
|
41
|
+
|
|
42
|
+
### Capture startup logs and requests (recommended)
|
|
43
|
+
|
|
44
|
+
The component patches `console`, `fetch` and `XMLHttpRequest` when it mounts. To also capture what happens *before* the first render, call `installEarly()` in your entry file:
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
// main.tsx
|
|
48
|
+
import { installEarly } from 'react-inspector-devtools';
|
|
49
|
+
if (import.meta.env.DEV) installEarly();
|
|
50
|
+
|
|
51
|
+
createRoot(document.getElementById('root')!).render(<App />);
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
`installEarly()` also lets the Device Toolbar emulate `matchMedia()` lists that the app creates during startup.
|
|
55
|
+
|
|
56
|
+
## Configuration
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<InspectorDevTools
|
|
60
|
+
enabled={true}
|
|
61
|
+
defaultOpen={false}
|
|
62
|
+
position="bottom" // 'bottom' | 'right' | 'floating'
|
|
63
|
+
theme="system" // 'system' | 'light' | 'dark'
|
|
64
|
+
height={360} // initial height when docked to the bottom
|
|
65
|
+
width={520} // initial width when docked to the right
|
|
66
|
+
shortcut="Ctrl+Shift+D" // or false to disable
|
|
67
|
+
panels={['elements', 'console', 'network', 'application']}
|
|
68
|
+
options={{
|
|
69
|
+
enableElementPicker: true,
|
|
70
|
+
enableDeviceToolbar: true,
|
|
71
|
+
enableConsole: true,
|
|
72
|
+
enableNetwork: true,
|
|
73
|
+
enableApplication: true,
|
|
74
|
+
emulateMediaQueries: true,
|
|
75
|
+
}}
|
|
76
|
+
target="#root" // app root used by the Device Toolbar (auto-detected)
|
|
77
|
+
dockPushesContent={false} // true = shrink the page instead of overlaying it
|
|
78
|
+
showLauncher={true}
|
|
79
|
+
maxConsoleEntries={1000}
|
|
80
|
+
maxNetworkEntries={500}
|
|
81
|
+
ignoreUrls={['/__vite_ping', /analytics/]}
|
|
82
|
+
zIndex={2147483000}
|
|
83
|
+
onOpenChange={(open) => {}}
|
|
84
|
+
/>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
| Prop | Type | Default | Description |
|
|
88
|
+
| --- | --- | --- | --- |
|
|
89
|
+
| `enabled` | `boolean` | `true` | Master switch. When `false`, nothing renders and nothing is patched. |
|
|
90
|
+
| `defaultOpen` | `boolean` | `false` | Open on the first visit. Later visits restore the user's last state. |
|
|
91
|
+
| `open` / `onOpenChange` | `boolean` / `fn` | — | Controlled mode. |
|
|
92
|
+
| `position` | `'bottom' \| 'right' \| 'floating'` | `'bottom'` | Initial dock position. The user can change it in the ⋮ menu or in Settings. |
|
|
93
|
+
| `theme` | `'system' \| 'light' \| 'dark'` | `'system'` | Initial theme. |
|
|
94
|
+
| `height` / `width` | `number` | `360` / `520` | Initial panel size in px. |
|
|
95
|
+
| `shortcut` | `string \| false` | `'Ctrl+Shift+D'` | Toggle shortcut. `Ctrl` also matches ⌘ on macOS. Users can re-bind it in Settings. |
|
|
96
|
+
| `panels` | `BuiltInPanelId[]` | all | Which built-in panels to show, and in what order. |
|
|
97
|
+
| `customPanels` | `PanelDefinition[]` | `[]` | Extra panels. See [Extending](../../docs/extending.md). |
|
|
98
|
+
| `options` | `InspectorOptions` | all `true` | Feature switches. |
|
|
99
|
+
| `target` | `string \| HTMLElement` | auto | The element the Device Toolbar resizes (`#root`, `#__next` and `#app` are auto-detected). |
|
|
100
|
+
| `dockPushesContent` | `boolean` | `false` | When docked, add padding to `<html>` so page content isn't covered. |
|
|
101
|
+
| `showLauncher` | `boolean` | `true` | Show a floating button while the tools are closed. |
|
|
102
|
+
| `maxConsoleEntries` / `maxNetworkEntries` | `number` | `1000` / `500` | Ring-buffer sizes. |
|
|
103
|
+
| `ignoreUrls` | `(string \| RegExp)[]` | `[]` | Requests that are not recorded. |
|
|
104
|
+
| `zIndex` | `number` | `2147483000` | Stacking order of the tools layer. |
|
|
105
|
+
|
|
106
|
+
User preferences (dock, sizes, theme, active tab, custom devices, console history) are stored in `localStorage` under keys prefixed with `__rid_`. These keys are hidden from the Application panel.
|
|
107
|
+
|
|
108
|
+
### Organisation-wide setup
|
|
109
|
+
|
|
110
|
+
A common pattern is to enable the tools only for internal builds, or behind a flag:
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
const devtoolsEnabled = import.meta.env.DEV || localStorage.getItem('enable-devtools') === '1';
|
|
114
|
+
|
|
115
|
+
<InspectorDevTools enabled={devtoolsEnabled} shortcut="Ctrl+Alt+I" />
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
To keep the package out of production bundles entirely, load it lazily:
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
const InspectorDevTools = lazy(() =>
|
|
122
|
+
import('react-inspector-devtools').then((m) => ({ default: m.InspectorDevTools })),
|
|
123
|
+
);
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Features
|
|
127
|
+
|
|
128
|
+
### Elements
|
|
129
|
+
- Live DOM tree that updates as React re-renders. You can expand and collapse nodes (Alt+click expands recursively), see `#shadow-root (open)` nodes, and use the breadcrumb bar.
|
|
130
|
+
- Element picker (**Ctrl + Shift + C**): hover to see a margin/border/padding/content highlight with tag, id, classes, size and position. Click to select the element; **Esc** cancels.
|
|
131
|
+
- Edit attributes and text by double-clicking, or use **Edit as HTML**, delete (**Del**, with undo **Ctrl+Z**), hide (**H**), copy selector or JS path, and **Store as global variable**.
|
|
132
|
+
- Search by text, CSS selector or XPath.
|
|
133
|
+
- **Styles**:
|
|
134
|
+
- Shows matched rules in cascade order, `element.style`, `@media`/`@supports` context and inherited properties. Overridden declarations are struck through.
|
|
135
|
+
- Edit any value live; ↑/↓ change numbers.
|
|
136
|
+
- Toggle declarations with checkboxes, add declarations and new rules, and toggle classes with `.cls`.
|
|
137
|
+
- Use the colour picker for colour values.
|
|
138
|
+
- **Revert changes** undoes every edit. Nothing is written to source files.
|
|
139
|
+
- **Computed** style list (properties at their default value are hidden unless you tick *Show all*), an editable **box model**, a layout and typography summary, and an attributes/properties view.
|
|
140
|
+
|
|
141
|
+
### Console
|
|
142
|
+
- Captures `log`, `info`, `warn`, `error`, `debug`, `table`, `group`, `groupCollapsed`, `groupEnd`, `time`, `timeLog`, `timeEnd`, `count`, `countReset`, `trace`, `assert`, `dir` and `clear`.
|
|
143
|
+
- Also captures uncaught exceptions, unhandled promise rejections and failed resource loads.
|
|
144
|
+
- Supports `%s %d %i %f %o %O %c` format specifiers. Objects are shown in expandable trees (getters are evaluated on click), and DOM nodes are clickable.
|
|
145
|
+
- Identical consecutive messages are grouped, and source locations are shown.
|
|
146
|
+
- Filter by level, text, `/regex/` or `-exclude`. Preserve log across reloads, and show timestamps.
|
|
147
|
+
- Evaluate JavaScript in the page scope:
|
|
148
|
+
- Top-level `await` works, and `let`/`const` declarations persist between commands.
|
|
149
|
+
- Helpers: `$0`, `$_`, `$()`, `$$()`, `$x()`, `copy()`, `clear()`, `keys()`, `values()`, `inspect()`.
|
|
150
|
+
- Autocomplete and command history (↑/↓). Shift+Enter inserts a new line.
|
|
151
|
+
|
|
152
|
+
### Network
|
|
153
|
+
- Records `fetch`, `XMLHttpRequest` and WebSocket traffic (frames included). Static resources come from the Resource Timing API, including resources that loaded before the tools mounted.
|
|
154
|
+
- Columns: Name, Status, Method, Type, Initiator, Size, Time and Waterfall, all sortable.
|
|
155
|
+
- Filters: URL text or regex (with invert), resource type (Ctrl/⌘-click to select several), method, status class and domain.
|
|
156
|
+
- Detail tabs: Headers (with raw view), Payload (query string, form data, JSON tree), Preview (JSON tree, sandboxed HTML, images), Response, Initiator, Timing and Messages.
|
|
157
|
+
- Controls: pause recording, clear, preserve log, and simulated *Disable cache*.
|
|
158
|
+
- Row menu: Copy as cURL or fetch, and copy the response or headers.
|
|
159
|
+
|
|
160
|
+
### Application
|
|
161
|
+
- **Local Storage / Session Storage**: search, add, edit (double-click), delete, and clear with confirmation. Values are previewed as JSON. Changes made by the app appear live.
|
|
162
|
+
- **Cookies**: Name, Value, Domain, Path, Expires, Size, HttpOnly, Secure and SameSite, with add, edit and delete. Uses the Cookie Store API where it is available.
|
|
163
|
+
- **IndexedDB** (read-only): databases, object stores, keys and records.
|
|
164
|
+
- **Cache Storage** (read-only): caches, entries and cached responses.
|
|
165
|
+
|
|
166
|
+
### Device Toolbar
|
|
167
|
+
- Toggle it with the 📱 button or **Ctrl + Shift + M**. It includes 15 presets (iPhone SE/14/15/16/Pro Max, Galaxy S24, Pixel 8, iPad Mini/Air/Pro, Galaxy Tab, laptops and desktops), plus custom devices you can add, edit and delete.
|
|
168
|
+
- Editable width and height, drag-to-resize handles, DPR, zoom (fit or 50–200%), rotate, device frame, and touch simulation.
|
|
169
|
+
- The app root is resized in place, so application state is kept.
|
|
170
|
+
- While it is on, viewport-dependent **CSS media rules**, `matchMedia()`, `innerWidth`/`innerHeight`, `devicePixelRatio` and `screen.*` report the emulated device. This is partial emulation; see [Limitations](../../docs/limitations.md#device-toolbar).
|
|
171
|
+
|
|
172
|
+
## Public API
|
|
173
|
+
|
|
174
|
+
```ts
|
|
175
|
+
import {
|
|
176
|
+
InspectorDevTools, // the component
|
|
177
|
+
installEarly, // start capturing before first render; returns an undo function
|
|
178
|
+
registerPanel, // add a custom panel; returns an unregister function
|
|
179
|
+
DEVICE_PRESETS, // built-in device list
|
|
180
|
+
useDevToolsStore, // zustand store (open state, dock, theme…) for advanced integrations
|
|
181
|
+
} from 'react-inspector-devtools';
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Programmatic control:
|
|
185
|
+
|
|
186
|
+
```ts
|
|
187
|
+
useDevToolsStore.getState().setOpen(true);
|
|
188
|
+
useDevToolsStore.getState().updateSettings({ activePanel: 'network', dock: 'right' });
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
## Documentation
|
|
192
|
+
|
|
193
|
+
- [Integration guides](../../docs/integration/): Vite, Create React App, Next.js and Webpack
|
|
194
|
+
- [Limitations](../../docs/limitations.md): what can't be done from inside a page, and why
|
|
195
|
+
- [Extending](../../docs/extending.md): custom panels
|
|
196
|
+
- [Architecture](../../docs/architecture.md)
|
|
197
|
+
|
|
198
|
+
## License
|
|
199
|
+
|
|
200
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function DevtoolsApp(): import("react").JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { InspectorDevToolsProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Chrome DevTools-style developer tools for React applications.
|
|
4
|
+
*
|
|
5
|
+
* Renders into its own Shadow DOM and React root, so it neither inherits the
|
|
6
|
+
* application's CSS nor participates in the application's React tree.
|
|
7
|
+
*/
|
|
8
|
+
export declare function InspectorDevTools(props: InspectorDevToolsProps): import("react").JSX.Element | null;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
interface ConfirmDialogProps {
|
|
3
|
+
title: string;
|
|
4
|
+
message?: ReactNode;
|
|
5
|
+
confirmLabel?: string;
|
|
6
|
+
danger?: boolean;
|
|
7
|
+
onConfirm: () => void;
|
|
8
|
+
onCancel: () => void;
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export declare function ConfirmDialog({ title, message, confirmLabel, danger, onConfirm, onCancel, children }: ConfirmDialogProps): import("react").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
export interface MenuItem {
|
|
3
|
+
label?: ReactNode;
|
|
4
|
+
hint?: string;
|
|
5
|
+
onSelect?: () => void;
|
|
6
|
+
separator?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
custom?: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
interface ContextMenuProps {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
items: MenuItem[];
|
|
14
|
+
onClose: () => void;
|
|
15
|
+
}
|
|
16
|
+
export declare function ContextMenu({ x, y, items, onClose }: ContextMenuProps): import("react").JSX.Element;
|
|
17
|
+
/** Convenience hook managing context-menu state. */
|
|
18
|
+
export declare function useContextMenu(): {
|
|
19
|
+
open: (e: {
|
|
20
|
+
clientX: number;
|
|
21
|
+
clientY: number;
|
|
22
|
+
preventDefault?: () => void;
|
|
23
|
+
}, items: MenuItem[]) => void;
|
|
24
|
+
close: () => void;
|
|
25
|
+
element: import("react").JSX.Element | null;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Component, type ReactNode } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
label?: string;
|
|
5
|
+
}
|
|
6
|
+
/** Keeps a crashing panel from taking down the rest of devtools (or the host app). */
|
|
7
|
+
export declare class ErrorBoundary extends Component<Props, {
|
|
8
|
+
error: Error | null;
|
|
9
|
+
}> {
|
|
10
|
+
state: {
|
|
11
|
+
error: Error | null;
|
|
12
|
+
};
|
|
13
|
+
static getDerivedStateFromError(error: Error): {
|
|
14
|
+
error: Error;
|
|
15
|
+
};
|
|
16
|
+
render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export interface IconProps {
|
|
2
|
+
size?: number;
|
|
3
|
+
title?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare const InspectIcon: (p: IconProps) => import("react").JSX.Element;
|
|
7
|
+
export declare const DeviceIcon: (p: IconProps) => import("react").JSX.Element;
|
|
8
|
+
export declare const CloseIcon: (p: IconProps) => import("react").JSX.Element;
|
|
9
|
+
export declare const GearIcon: (p: IconProps) => import("react").JSX.Element;
|
|
10
|
+
export declare const KebabIcon: (p: IconProps) => import("react").JSX.Element;
|
|
11
|
+
export declare const ClearIcon: (p: IconProps) => import("react").JSX.Element;
|
|
12
|
+
export declare const FilterIcon: (p: IconProps) => import("react").JSX.Element;
|
|
13
|
+
export declare const RefreshIcon: (p: IconProps) => import("react").JSX.Element;
|
|
14
|
+
export declare const PlusIcon: (p: IconProps) => import("react").JSX.Element;
|
|
15
|
+
export declare const TrashIcon: (p: IconProps) => import("react").JSX.Element;
|
|
16
|
+
export declare const ErrorIcon: (p: IconProps) => import("react").JSX.Element;
|
|
17
|
+
export declare const WarnIcon: (p: IconProps) => import("react").JSX.Element;
|
|
18
|
+
export declare const InfoIcon: (p: IconProps) => import("react").JSX.Element;
|
|
19
|
+
export declare const SearchIcon: (p: IconProps) => import("react").JSX.Element;
|
|
20
|
+
export declare const DockBottomIcon: (p: IconProps) => import("react").JSX.Element;
|
|
21
|
+
export declare const DockRightIcon: (p: IconProps) => import("react").JSX.Element;
|
|
22
|
+
export declare const UndockIcon: (p: IconProps) => import("react").JSX.Element;
|
|
23
|
+
export declare const MinimizeIcon: (p: IconProps) => import("react").JSX.Element;
|
|
24
|
+
export declare const MaximizeIcon: (p: IconProps) => import("react").JSX.Element;
|
|
25
|
+
export declare const RestoreIcon: (p: IconProps) => import("react").JSX.Element;
|
|
26
|
+
export declare const RotateIcon: (p: IconProps) => import("react").JSX.Element;
|
|
27
|
+
export declare const RecordIcon: ({ on, ...p }: IconProps & {
|
|
28
|
+
on?: boolean;
|
|
29
|
+
}) => import("react").JSX.Element;
|
|
30
|
+
export declare const ChevronRightIcon: (p: IconProps) => import("react").JSX.Element;
|
|
31
|
+
export declare const PromptIcon: (p: IconProps) => import("react").JSX.Element;
|
|
32
|
+
export declare const ResultIcon: (p: IconProps) => import("react").JSX.Element;
|
|
33
|
+
export declare const ElementsIcon: (p: IconProps) => import("react").JSX.Element;
|
|
34
|
+
export declare const ConsoleIcon: (p: IconProps) => import("react").JSX.Element;
|
|
35
|
+
export declare const NetworkIcon: (p: IconProps) => import("react").JSX.Element;
|
|
36
|
+
export declare const ApplicationIcon: (p: IconProps) => import("react").JSX.Element;
|
|
37
|
+
export declare const EditIcon: (p: IconProps) => import("react").JSX.Element;
|
|
38
|
+
export declare const CopyIcon: (p: IconProps) => import("react").JSX.Element;
|
|
39
|
+
export declare const LauncherIcon: (p: IconProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
type Kind = 'string' | 'number' | 'bigint' | 'boolean' | 'undefined' | 'null' | 'symbol' | 'function' | 'array' | 'typedarray' | 'map' | 'set' | 'weak' | 'date' | 'regexp' | 'error' | 'node' | 'promise' | 'object';
|
|
2
|
+
export declare function kindOf(v: unknown): Kind;
|
|
3
|
+
export declare function isExpandable(v: unknown): boolean;
|
|
4
|
+
export declare function nodeLabel(n: Node): string;
|
|
5
|
+
interface PreviewProps {
|
|
6
|
+
value: unknown;
|
|
7
|
+
/** Top-level strings are rendered without quotes in console messages. */
|
|
8
|
+
quoteStrings?: boolean;
|
|
9
|
+
depth?: number;
|
|
10
|
+
}
|
|
11
|
+
export declare const ValuePreview: import("react").NamedExoticComponent<PreviewProps>;
|
|
12
|
+
export declare function NodeRef({ node }: {
|
|
13
|
+
node: Node;
|
|
14
|
+
}): import("react").JSX.Element;
|
|
15
|
+
interface InspectorProps {
|
|
16
|
+
value: unknown;
|
|
17
|
+
name?: string;
|
|
18
|
+
dimName?: boolean;
|
|
19
|
+
defaultExpanded?: boolean;
|
|
20
|
+
quoteStrings?: boolean;
|
|
21
|
+
/** Nesting level, used to prevent runaway recursion. */
|
|
22
|
+
level?: number;
|
|
23
|
+
/** Allow expanding DOM nodes into their JS properties (Properties pane). */
|
|
24
|
+
expandNodes?: boolean;
|
|
25
|
+
}
|
|
26
|
+
/** Chrome-style expandable object tree. Properties are read lazily on expand. */
|
|
27
|
+
export declare function ObjectInspector({ value, name, dimName, defaultExpanded, quoteStrings, level, expandNodes }: InspectorProps): import("react").JSX.Element;
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
interface SplitPaneProps {
|
|
3
|
+
/** Size in px of the secondary (side) pane. */
|
|
4
|
+
size: number;
|
|
5
|
+
onResize: (size: number) => void;
|
|
6
|
+
vertical?: boolean;
|
|
7
|
+
/** Where the secondary pane sits. */
|
|
8
|
+
side?: 'end' | 'start';
|
|
9
|
+
min?: number;
|
|
10
|
+
minMain?: number;
|
|
11
|
+
main: ReactNode;
|
|
12
|
+
secondary: ReactNode;
|
|
13
|
+
hideSecondary?: boolean;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare function SplitPane({ size, onResize, vertical, side, min, minMain, main, secondary, hideSecondary, className }: SplitPaneProps): import("react").JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ConsoleEntry, NetworkRequest, StorageArea } from '../types';
|
|
2
|
+
export interface DevToolsEvents {
|
|
3
|
+
'console:entry': Omit<ConsoleEntry, 'id' | 'depth' | 'groupPath' | 'repeat'>;
|
|
4
|
+
'console:clear': {
|
|
5
|
+
fromApp: boolean;
|
|
6
|
+
};
|
|
7
|
+
'network:start': NetworkRequest;
|
|
8
|
+
'network:update': {
|
|
9
|
+
id: string;
|
|
10
|
+
patch: Partial<NetworkRequest>;
|
|
11
|
+
};
|
|
12
|
+
'network:resource': NetworkRequest;
|
|
13
|
+
'dom:mutation': {
|
|
14
|
+
records: number;
|
|
15
|
+
};
|
|
16
|
+
'storage:change': {
|
|
17
|
+
area: StorageArea | 'cookie';
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
type Handler<T> = (payload: T) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Minimal typed pub/sub used to decouple instrumentation (which patches globals)
|
|
23
|
+
* from the stores/panels (which render data).
|
|
24
|
+
*/
|
|
25
|
+
export declare class EventBus<E extends object> {
|
|
26
|
+
private handlers;
|
|
27
|
+
on<K extends keyof E>(event: K, handler: Handler<E[K]>): () => void;
|
|
28
|
+
emit<K extends keyof E>(event: K, payload: E[K]): void;
|
|
29
|
+
clear(): void;
|
|
30
|
+
}
|
|
31
|
+
export declare const bus: EventBus<DevToolsEvents>;
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** Attribute placed on the devtools shadow host. Everything inside it is ignored by inspectors. */
|
|
2
|
+
export declare const HOST_ATTR = "data-rid-host";
|
|
3
|
+
export declare function setHostElement(el: HTMLElement | null): void;
|
|
4
|
+
export declare function getHostElement(): HTMLElement | null;
|
|
5
|
+
/** True when the node is the devtools host, or lives inside it. */
|
|
6
|
+
export declare function isDevtoolsNode(node: Node | null | undefined): boolean;
|
|
7
|
+
/** True when an event originated from inside the devtools UI. */
|
|
8
|
+
export declare function isDevtoolsEvent(e: Event): boolean;
|
|
9
|
+
export declare const isBrowser: () => boolean;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { PanelDefinition } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Registers an additional panel (tab) in the devtools. Returns an unregister function.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* registerPanel({ id: 'redux', title: 'Redux', component: ReduxPanel });
|
|
7
|
+
*/
|
|
8
|
+
export declare function registerPanel(def: PanelDefinition): () => void;
|
|
9
|
+
export declare function useRegisteredPanels(): PanelDefinition[];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { BuiltInPanelId, InspectorOptions, PanelDefinition } from '../types';
|
|
2
|
+
export interface ResolvedConfig {
|
|
3
|
+
panels: BuiltInPanelId[];
|
|
4
|
+
customPanels: PanelDefinition[];
|
|
5
|
+
options: Required<InspectorOptions>;
|
|
6
|
+
shortcut: string | false;
|
|
7
|
+
showLauncher: boolean;
|
|
8
|
+
dockPushesContent: boolean;
|
|
9
|
+
target?: string | HTMLElement;
|
|
10
|
+
}
|
|
11
|
+
export declare const defaultOptions: Required<InspectorOptions>;
|
|
12
|
+
export declare const ConfigContext: import("react").Context<ResolvedConfig>;
|
|
13
|
+
export declare const useConfig: () => ResolvedConfig;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface DevtoolsContextValue {
|
|
2
|
+
shadowRoot: ShadowRoot | null;
|
|
3
|
+
/** The element that panels' popups (menus, dialogs) should be rendered into. */
|
|
4
|
+
container: HTMLElement | null;
|
|
5
|
+
targetSelector?: string | HTMLElement;
|
|
6
|
+
}
|
|
7
|
+
export declare const DevtoolsContext: import("react").Context<DevtoolsContextValue>;
|
|
8
|
+
export declare const useDevtoolsContext: () => DevtoolsContextValue;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Starts a pointer drag from a pointerdown event. Uses pointer capture so the
|
|
4
|
+
* drag keeps working when the pointer leaves the handle (or crosses iframes).
|
|
5
|
+
*/
|
|
6
|
+
export declare function startDrag(e: React.PointerEvent<Element>, onMove: (dx: number, dy: number, ev: PointerEvent) => void, onEnd?: (ev: PointerEvent) => void): void;
|