react-reinspect 0.1.8 → 0.2.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/README.md +34 -328
- package/dist/lib/constants.d.ts +2 -1
- package/dist/lib/constants.d.ts.map +1 -1
- package/dist/lib/core/state.d.ts +27 -2
- package/dist/lib/core/state.d.ts.map +1 -1
- package/dist/lib/index.cjs +1 -1
- package/dist/lib/index.d.ts +1 -1
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/lib/index.js +707 -227
- package/dist/lib/internal/auto-wrap.cjs +1 -1
- package/dist/lib/internal/auto-wrap.js +1 -1
- package/dist/lib/propsInspector.d.ts +9 -2
- package/dist/lib/propsInspector.d.ts.map +1 -1
- package/dist/lib/react/focusTrap.d.ts +3 -0
- package/dist/lib/react/focusTrap.d.ts.map +1 -0
- package/dist/lib/react/overlay.d.ts +1 -2
- package/dist/lib/react/overlay.d.ts.map +1 -1
- package/dist/lib/react/provider.d.ts.map +1 -1
- package/dist/lib/react/wrap.d.ts.map +1 -1
- package/dist/lib/style.css +1 -1
- package/dist/lib/syntaxHighlight.d.ts +6 -0
- package/dist/lib/syntaxHighlight.d.ts.map +1 -0
- package/dist/lib/types.d.ts +48 -3
- package/dist/lib/types.d.ts.map +1 -1
- package/dist/lib/utils.d.ts +31 -2
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/wrap-DQM25n-h.js +2471 -0
- package/dist/lib/wrap-TqMeJ7Q-.cjs +2 -0
- package/package.json +25 -2
- package/dist/lib/wrap-8xVFW-im.js +0 -996
- package/dist/lib/wrap-Bu931FVO.cjs +0 -1
package/README.md
CHANGED
|
@@ -1,43 +1,17 @@
|
|
|
1
1
|
# react-reinspect
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
`react-reinspect` helps you inspect components directly in your running UI:
|
|
5
|
-
- See component boundaries and names.
|
|
6
|
-
- Right-click any wrapped component to edit style props live.
|
|
7
|
-
- Inspect and override props at runtime.
|
|
8
|
-
- Track rerenders by attempts, commits, or both.
|
|
2
|
+
Inspect and tweak React components live, directly in your running app.
|
|
9
3
|
|
|
10
4
|
[](https://www.npmjs.com/package/react-reinspect)
|
|
11
5
|
[](https://www.npmjs.com/package/react-reinspect)
|
|
12
6
|
[](./LICENSE)
|
|
13
7
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
- Inspect where a component lives visually.
|
|
20
|
-
- Tune common style props instantly.
|
|
21
|
-
- Test prop overrides without editing source first.
|
|
22
|
-
- Spot rerender hotspots while interacting with the real UI.
|
|
8
|
+
`react-reinspect` is built for fast in-context debugging:
|
|
9
|
+
- See component boundaries in the UI.
|
|
10
|
+
- Right-click components and edit style props live.
|
|
11
|
+
- Inspect and override props without changing source.
|
|
12
|
+
- Track rerenders while you interact with the real screen.
|
|
23
13
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
- Runtime overlay + floating settings panel.
|
|
27
|
-
- Right-click inspector menu per component.
|
|
28
|
-
- CSS prop editing:
|
|
29
|
-
- `backgroundColor`, `color`, `fontSize`, `padding`, `margin`, `borderRadius`, `borderWidth`, `borderColor`, `opacity`, `width`, `height`, `gap`
|
|
30
|
-
- Props inspector:
|
|
31
|
-
- `Detected` view for readable values
|
|
32
|
-
- `Raw` JSON editor for direct overrides
|
|
33
|
-
- Function preview + copy source
|
|
34
|
-
- JSON preview + copy for object/array props
|
|
35
|
-
- Render counting:
|
|
36
|
-
- Global toggle or per-component toggle
|
|
37
|
-
- Capture mode: `attempts` | `commits` | `both`
|
|
38
|
-
- Flexible wrapping:
|
|
39
|
-
- `withReinspect(...)`
|
|
40
|
-
- auto-discovery wrapping via `reinspectAutoDiscoverPlugin(...)` / `withReinspectAutoDiscover(...)`
|
|
14
|
+

|
|
41
15
|
|
|
42
16
|
## Install
|
|
43
17
|
|
|
@@ -45,174 +19,18 @@ React DevTools is excellent for component trees and profiling.
|
|
|
45
19
|
pnpm add react-reinspect
|
|
46
20
|
```
|
|
47
21
|
|
|
48
|
-
Peer
|
|
22
|
+
Peer deps:
|
|
49
23
|
- `react >= 18`
|
|
50
24
|
- `react-dom >= 18`
|
|
51
25
|
|
|
52
|
-
|
|
53
|
-
If your app enforces strict CSP and blocks inline styles, import this once in your app root:
|
|
26
|
+
## Quick Start (Vite)
|
|
54
27
|
|
|
55
28
|
```tsx
|
|
56
|
-
import 'react-reinspect/style.css'
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Auto-discovery is compile-time and requires the Vite plugin:
|
|
60
|
-
|
|
61
|
-
```ts
|
|
62
|
-
// vite.config.ts
|
|
63
|
-
import { defineConfig } from 'vite'
|
|
64
|
-
import react from '@vitejs/plugin-react'
|
|
65
|
-
import { reinspectAutoDiscoverPlugin } from 'react-reinspect/vite-plugin'
|
|
66
|
-
|
|
67
|
-
export default defineConfig({
|
|
68
|
-
plugins: [reinspectAutoDiscoverPlugin({ include: 'first-party' }), react()],
|
|
69
|
-
})
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
Without this plugin, only manually wrapped components (`withReinspect`) are inspectable.
|
|
73
|
-
|
|
74
|
-
Next.js (webpack mode) can use:
|
|
75
|
-
|
|
76
|
-
```ts
|
|
77
|
-
// next.config.ts
|
|
78
|
-
import { withReinspectAutoDiscover } from 'react-reinspect/next-plugin'
|
|
79
|
-
|
|
80
|
-
const nextConfig = {}
|
|
81
|
-
|
|
82
|
-
export default withReinspectAutoDiscover(nextConfig)
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
If your Next dev server runs with Turbopack, switch to webpack mode for this transform plugin.
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
## Example
|
|
89
|
-
|
|
90
|
-

|
|
91
|
-
|
|
92
|
-
## Screenshots
|
|
93
|
-
|
|
94
|
-
### Runtime inspector in-app
|
|
95
|
-
|
|
96
|
-

|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
## Agentic Quick Start
|
|
100
|
-
|
|
101
|
-
Use this prompt on your favorite AI coding agent.
|
|
102
|
-
|
|
103
|
-
```text
|
|
104
|
-
You are a senior React code agent, your task is to integrate react-reinspect to this project. react-reinspect is a frontend utility that helps developers see the outline of react components and edit their props at runtime within their browser. it is not intended for production use at all.
|
|
105
|
-
|
|
106
|
-
Do all of the following in one pass:
|
|
107
|
-
1) Install `react-reinspect` using this repo's package manager.
|
|
108
|
-
2) Turn it on in dev mode ONLY by wiring `ReinspectProvider` at app root (on CLIENT SIDE only, not server-rendered!).
|
|
109
|
-
- Vite: use `enabled: import.meta.env.DEV`
|
|
110
|
-
- Next.js: use `enabled: process.env.NODE_ENV !== 'production'`
|
|
111
|
-
- Next App Router: mount a client `Providers` component from `app/layout.tsx`
|
|
112
|
-
- Next Pages Router: mount `ReinspectProvider` in `pages/_app.tsx`
|
|
113
|
-
3) If this app uses Vite, add `reinspectAutoDiscoverPlugin` from `react-reinspect/vite-plugin` in `vite.config.*`.
|
|
114
|
-
4) If this app uses Next.js (webpack mode), wrap the Next config with `withReinspectAutoDiscover` from `react-reinspect/next-plugin`.
|
|
115
|
-
5) If Next.js is running with Turbopack, either switch dev to webpack for auto-discovery transforms (`next dev --webpack`) or fall back to manual wrapping (`withReinspect`).
|
|
116
|
-
6) Keep production safe (e.g.: `enabled: import.meta.env.DEV` or however we manage dev/prod in this repo.).
|
|
117
|
-
7) Run validation (build/tests if available) and fix any issues.
|
|
118
|
-
8) Output a concise summary with changed files and how to use it.
|
|
119
|
-
|
|
120
|
-
Use this example as the baseline:
|
|
121
|
-
|
|
122
|
-
import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
|
|
123
|
-
import 'react-reinspect/style.css'
|
|
124
|
-
|
|
125
|
-
const reinspectConfig: ReinspectConfig = {
|
|
126
|
-
enabled: import.meta.env.DEV,
|
|
127
|
-
// startActive: true,
|
|
128
|
-
// showFloatingToggle: true,
|
|
129
|
-
// inspectMode: 'wrapped',
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
133
|
-
return <ReinspectProvider config={reinspectConfig}>{children}</ReinspectProvider>
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
// Next.js App Router (app/providers.tsx)
|
|
137
|
-
'use client'
|
|
138
29
|
import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
|
|
139
30
|
import 'react-reinspect/style.css'
|
|
140
31
|
|
|
141
|
-
const nextReinspectConfig: ReinspectConfig = {
|
|
142
|
-
enabled: process.env.NODE_ENV !== 'production',
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
export function Providers({ children }: { children: React.ReactNode }) {
|
|
146
|
-
return (
|
|
147
|
-
<ReinspectProvider config={nextReinspectConfig}>
|
|
148
|
-
{children}
|
|
149
|
-
</ReinspectProvider>
|
|
150
|
-
)
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
// Next.js App Router mount (app/layout.tsx)
|
|
154
|
-
import { Providers } from './providers'
|
|
155
|
-
|
|
156
|
-
export default function RootLayout({
|
|
157
|
-
children,
|
|
158
|
-
}: {
|
|
159
|
-
children: React.ReactNode
|
|
160
|
-
}) {
|
|
161
|
-
return (
|
|
162
|
-
<html lang="en">
|
|
163
|
-
<body>
|
|
164
|
-
<Providers>{children}</Providers>
|
|
165
|
-
</body>
|
|
166
|
-
</html>
|
|
167
|
-
)
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
For auto-discovery setup, apply one of these depending on framework:
|
|
171
|
-
|
|
172
|
-
// Vite
|
|
173
|
-
import { defineConfig } from 'vite'
|
|
174
|
-
import react from '@vitejs/plugin-react'
|
|
175
|
-
import { reinspectAutoDiscoverPlugin } from 'react-reinspect/vite-plugin'
|
|
176
|
-
|
|
177
|
-
export default defineConfig({
|
|
178
|
-
plugins: [reinspectAutoDiscoverPlugin(), react()],
|
|
179
|
-
})
|
|
180
|
-
|
|
181
|
-
// Next.js (webpack mode)
|
|
182
|
-
import { withReinspectAutoDiscover } from 'react-reinspect/next-plugin'
|
|
183
|
-
|
|
184
|
-
const nextConfig = {}
|
|
185
|
-
export default withReinspectAutoDiscover(nextConfig, {
|
|
186
|
-
includeThirdParty: false,
|
|
187
|
-
})
|
|
188
|
-
|
|
189
|
-
// Next.js dev script for auto-discovery:
|
|
190
|
-
// package.json -> "dev": "next dev --webpack"
|
|
191
|
-
|
|
192
|
-
Output format I want from you:
|
|
193
|
-
- What changed (bullet list)
|
|
194
|
-
- Why this is safe in production
|
|
195
|
-
- How to run it locally
|
|
196
|
-
- 1 copy-paste PR title + PR description
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
## Manual Quick Start
|
|
200
|
-
### 1) Wrap your app with `ReinspectProvider`
|
|
201
|
-
|
|
202
|
-
Vite:
|
|
203
|
-
|
|
204
|
-
```tsx
|
|
205
|
-
import {
|
|
206
|
-
ReinspectProvider,
|
|
207
|
-
type ReinspectConfig,
|
|
208
|
-
} from 'react-reinspect'
|
|
209
|
-
|
|
210
32
|
const reinspectConfig: ReinspectConfig = {
|
|
211
|
-
enabled: import.meta.env.DEV, //
|
|
212
|
-
// startActive: true, // start with inspector active when page loads
|
|
213
|
-
// showFloatingToggle: true, // show floating react-reinspect settings button
|
|
214
|
-
// inspectMode: 'wrapped', // wrapped: only wrapped components, first-party: wrapped + components with inspectable metadata, all: all components
|
|
215
|
-
// editableProps: ['padding', 'margin'], // change the CSS props you can edit
|
|
33
|
+
enabled: import.meta.env.DEV, // keep it dev-only
|
|
216
34
|
}
|
|
217
35
|
|
|
218
36
|
export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
@@ -220,71 +38,6 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
|
220
38
|
}
|
|
221
39
|
```
|
|
222
40
|
|
|
223
|
-
Next.js App Router:
|
|
224
|
-
|
|
225
|
-
```tsx
|
|
226
|
-
// app/providers.tsx
|
|
227
|
-
'use client'
|
|
228
|
-
|
|
229
|
-
import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
|
|
230
|
-
import 'react-reinspect/style.css'
|
|
231
|
-
|
|
232
|
-
const reinspectConfig: ReinspectConfig = {
|
|
233
|
-
enabled: process.env.NODE_ENV !== 'production',
|
|
234
|
-
// startActive: true,
|
|
235
|
-
// showFloatingToggle: true,
|
|
236
|
-
// inspectMode: 'first-party',
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
export function Providers({ children }: { children: React.ReactNode }) {
|
|
240
|
-
return <ReinspectProvider config={reinspectConfig}>{children}</ReinspectProvider>
|
|
241
|
-
}
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
```tsx
|
|
245
|
-
// app/layout.tsx
|
|
246
|
-
import { Providers } from './providers'
|
|
247
|
-
|
|
248
|
-
export default function RootLayout({
|
|
249
|
-
children,
|
|
250
|
-
}: {
|
|
251
|
-
children: React.ReactNode
|
|
252
|
-
}) {
|
|
253
|
-
return (
|
|
254
|
-
<html lang="en">
|
|
255
|
-
<body>
|
|
256
|
-
<Providers>{children}</Providers>
|
|
257
|
-
</body>
|
|
258
|
-
</html>
|
|
259
|
-
)
|
|
260
|
-
}
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
Next.js Pages Router:
|
|
264
|
-
|
|
265
|
-
```tsx
|
|
266
|
-
// pages/_app.tsx
|
|
267
|
-
import type { AppProps } from 'next/app'
|
|
268
|
-
import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
|
|
269
|
-
import 'react-reinspect/style.css'
|
|
270
|
-
|
|
271
|
-
const reinspectConfig: ReinspectConfig = {
|
|
272
|
-
enabled: process.env.NODE_ENV !== 'production',
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
export default function App({ Component, pageProps }: AppProps) {
|
|
276
|
-
return (
|
|
277
|
-
<ReinspectProvider config={reinspectConfig}>
|
|
278
|
-
<Component {...pageProps} />
|
|
279
|
-
</ReinspectProvider>
|
|
280
|
-
)
|
|
281
|
-
}
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
### 2) Enable auto-discovery transforms (pick your framework)
|
|
285
|
-
|
|
286
|
-
Vite:
|
|
287
|
-
|
|
288
41
|
```ts
|
|
289
42
|
// vite.config.ts
|
|
290
43
|
import { defineConfig } from 'vite'
|
|
@@ -296,7 +49,7 @@ export default defineConfig({
|
|
|
296
49
|
})
|
|
297
50
|
```
|
|
298
51
|
|
|
299
|
-
Next.js (webpack mode)
|
|
52
|
+
## Next.js (webpack mode)
|
|
300
53
|
|
|
301
54
|
```ts
|
|
302
55
|
// next.config.ts
|
|
@@ -306,76 +59,36 @@ const nextConfig = {}
|
|
|
306
59
|
export default withReinspectAutoDiscover(nextConfig)
|
|
307
60
|
```
|
|
308
61
|
|
|
309
|
-
If your
|
|
310
|
-
If you keep Turbopack enabled, skip the Next transform plugin and use manual wrapping (`withReinspect`) instead.
|
|
311
|
-
|
|
312
|
-
Next.js webpack dev script example:
|
|
313
|
-
|
|
314
|
-
```json
|
|
315
|
-
{
|
|
316
|
-
"scripts": {
|
|
317
|
-
"dev": "next dev --webpack"
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
```
|
|
62
|
+
If your dev server uses Turbopack, use manual wrapping via `withReinspect` or switch dev to webpack (`next dev --webpack`) for auto-discovery transforms.
|
|
321
63
|
|
|
322
|
-
|
|
64
|
+
## Use It
|
|
323
65
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
-
|
|
327
|
-
|
|
66
|
+
1. Open your app in dev mode.
|
|
67
|
+
2. Click the `Reinspect settings` button.
|
|
68
|
+
3. Right-click a component.
|
|
69
|
+
4. Edit CSS/Props and enable rerender counters as needed.
|
|
328
70
|
|
|
329
71
|
## API
|
|
330
72
|
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
```
|
|
336
|
-
<ReinspectProvider config={...}>{children}</ReinspectProvider>
|
|
337
|
-
```
|
|
338
|
-
|
|
339
|
-
### `ReinspectConfig`
|
|
340
|
-
|
|
341
|
-
| Option | Type | Default | Notes |
|
|
342
|
-
|---|---|---|---|
|
|
343
|
-
| `enabled` | `boolean` | `false` | Master on/off. |
|
|
344
|
-
| `startActive` | `boolean` | `true` | Initial inspector active state. |
|
|
345
|
-
| `showFloatingToggle` | `boolean` | `enabled` | Show built-in settings button. |
|
|
346
|
-
| `inspectMode` | `'wrapped' \| 'first-party' \| 'all'` | `'wrapped'` | Auto-wrap visibility behavior. |
|
|
347
|
-
| `editableProps` | `EditableStyleProp[]` | built-in defaults | CSS props editable in inspector. |
|
|
348
|
-
| `palette` | `string[]` | built-in defaults | Component outline/badge colors. |
|
|
349
|
-
| `zIndexBase` | `number` | `2147483000` | Overlay stacking baseline. |
|
|
350
|
-
| `renderCounters` | `'off' \| 'attempts' \| 'commits' \| 'both'` | `'off'` | Global render-counter mode. |
|
|
351
|
-
| `countRendersForComponents` | `string[]` | `[]` | Component-specific counting when global mode is `off`. |
|
|
352
|
-
|
|
353
|
-
### `withReinspect(Component, options?)`
|
|
354
|
-
|
|
355
|
-
Wrap a component manually.
|
|
356
|
-
|
|
357
|
-
`options`:
|
|
358
|
-
- `name?: string`
|
|
359
|
-
|
|
360
|
-
`wrapInspectableMap` remains available as an internal utility (`react-reinspect/dist` deep-import), but is no longer part of the stable public runtime API.
|
|
361
|
-
|
|
362
|
-
`autoWrapInspectable` is now internal-only and used by the transform plugins via `react-reinspect/internal/auto-wrap`.
|
|
73
|
+
- `ReinspectProvider`
|
|
74
|
+
Wrap your app root:
|
|
75
|
+
```tsx
|
|
76
|
+
<ReinspectProvider config={...}>{children}</ReinspectProvider>
|
|
77
|
+
```
|
|
363
78
|
|
|
364
|
-
|
|
79
|
+
- `withReinspect(Component, options?)`
|
|
80
|
+
Manual wrapper if you don’t use transform plugins.
|
|
365
81
|
|
|
366
|
-
|
|
82
|
+
- `ReinspectConfig` (common options)
|
|
83
|
+
- `enabled` (`boolean`, default `false`)
|
|
84
|
+
- `inspectMode` (`'wrapped' | 'first-party' | 'all'`, default `'wrapped'`)
|
|
85
|
+
- `editableProps` (`EditableStyleProp[]`)
|
|
86
|
+
- `renderCounters` (`'off' | 'attempts' | 'commits' | 'both'`)
|
|
367
87
|
|
|
368
|
-
## Production
|
|
88
|
+
## Production Safety
|
|
369
89
|
|
|
370
|
-
-
|
|
371
|
-
-
|
|
372
|
-
|
|
373
|
-
```tsx
|
|
374
|
-
import { withReinspect } from 'react-reinspect'
|
|
375
|
-
|
|
376
|
-
const maybeWrap = <P extends object>(Component: React.ComponentType<P>) =>
|
|
377
|
-
import.meta.env.DEV ? withReinspect(Component) : Component
|
|
378
|
-
```
|
|
90
|
+
- Production-safe by default (`enabled: false`).
|
|
91
|
+
- Recommended: explicitly gate with `import.meta.env.DEV` (Vite) or `process.env.NODE_ENV !== 'production'` (Next.js).
|
|
379
92
|
|
|
380
93
|
## Development
|
|
381
94
|
|
|
@@ -385,13 +98,6 @@ pnpm test
|
|
|
385
98
|
pnpm build:lib
|
|
386
99
|
```
|
|
387
100
|
|
|
388
|
-
##
|
|
101
|
+
## License
|
|
389
102
|
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
```bash
|
|
393
|
-
pnpm build:lib
|
|
394
|
-
pnpm pack:check
|
|
395
|
-
npm login
|
|
396
|
-
pnpm publish:npm
|
|
397
|
-
```
|
|
103
|
+
MIT
|
package/dist/lib/constants.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { EditableStyleProp } from './types';
|
|
2
2
|
export declare const DEFAULT_EDITABLE_PROPS: readonly EditableStyleProp[];
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const REINSPECT_DEFAULT_RUNTIME_COLOR = "var(--reinspect-brand-500)";
|
|
4
|
+
export declare const REINSPECT_FALLBACK_COLOR_INPUT_HEX = "#1f2937";
|
|
4
5
|
export declare const COLOR_STYLE_PROPS: Set<EditableStyleProp>;
|
|
5
6
|
export declare const NUMERIC_STYLE_PROPS: Set<EditableStyleProp>;
|
|
6
7
|
export declare const OPACITY_STYLE_PROP: EditableStyleProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/reinspect/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,eAAO,MAAM,sBAAsB,EAAE,SAAS,iBAAiB,EAa9D,CAAA;AAED,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/reinspect/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,eAAO,MAAM,sBAAsB,EAAE,SAAS,iBAAiB,EAa9D,CAAA;AAED,eAAO,MAAM,+BAA+B,+BAA+B,CAAA;AAC3E,eAAO,MAAM,kCAAkC,YAAY,CAAA;AAE3D,eAAO,MAAM,iBAAiB,wBAI5B,CAAA;AAEF,eAAO,MAAM,mBAAmB,wBAS9B,CAAA;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAA6B,CAAA"}
|
package/dist/lib/core/state.d.ts
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import type { ComponentStyleOverrides, EditableStyleProp, InspectMode, RenderCounterMode, ResolvedReinspectConfig, StyleOverrideValue } from '../types';
|
|
1
|
+
import type { ComponentStyleOverrides, EditableStyleProp, InspectFilter, InspectMode, MenuOpenGesture, MenuTheme, PropsSerializationMode, RenderCounterMode, ResolvedReinspectConfig, StyleOverrideValue } from '../types';
|
|
2
2
|
export interface ReinspectState {
|
|
3
3
|
isActive: boolean;
|
|
4
4
|
inspectMode: InspectMode;
|
|
5
5
|
pendingInspectMode: InspectMode;
|
|
6
|
+
inspectWhitelist: InspectFilter;
|
|
7
|
+
inspectBlacklist: InspectFilter;
|
|
6
8
|
renderCounterMode: RenderCounterMode;
|
|
9
|
+
propsSerializationMode: PropsSerializationMode;
|
|
10
|
+
menuTheme: MenuTheme;
|
|
11
|
+
menuOpenGesture: MenuOpenGesture;
|
|
7
12
|
renderCountComponents: Record<string, true>;
|
|
8
13
|
overrides: Record<string, ComponentStyleOverrides>;
|
|
9
14
|
}
|
|
@@ -19,10 +24,30 @@ interface SetPendingInspectModeAction {
|
|
|
19
24
|
type: 'set-pending-inspect-mode';
|
|
20
25
|
value: InspectMode;
|
|
21
26
|
}
|
|
27
|
+
interface SetInspectWhitelistAction {
|
|
28
|
+
type: 'set-inspect-whitelist';
|
|
29
|
+
value: InspectFilter;
|
|
30
|
+
}
|
|
31
|
+
interface SetInspectBlacklistAction {
|
|
32
|
+
type: 'set-inspect-blacklist';
|
|
33
|
+
value: InspectFilter;
|
|
34
|
+
}
|
|
22
35
|
interface SetRenderCounterModeAction {
|
|
23
36
|
type: 'set-render-counter-mode';
|
|
24
37
|
value: RenderCounterMode;
|
|
25
38
|
}
|
|
39
|
+
interface SetPropsSerializationModeAction {
|
|
40
|
+
type: 'set-props-serialization-mode';
|
|
41
|
+
value: PropsSerializationMode;
|
|
42
|
+
}
|
|
43
|
+
interface SetMenuThemeAction {
|
|
44
|
+
type: 'set-menu-theme';
|
|
45
|
+
value: MenuTheme;
|
|
46
|
+
}
|
|
47
|
+
interface SetMenuOpenGestureAction {
|
|
48
|
+
type: 'set-menu-open-gesture';
|
|
49
|
+
value: MenuOpenGesture;
|
|
50
|
+
}
|
|
26
51
|
interface SetRenderCountingForComponentAction {
|
|
27
52
|
type: 'set-render-counting-for-component';
|
|
28
53
|
componentName: string;
|
|
@@ -34,7 +59,7 @@ interface UpdateOverrideAction {
|
|
|
34
59
|
prop: EditableStyleProp;
|
|
35
60
|
value: StyleOverrideValue | undefined;
|
|
36
61
|
}
|
|
37
|
-
export type ReinspectStateAction = HydrateConfigAction | SetIsActiveAction | SetPendingInspectModeAction | SetRenderCounterModeAction | SetRenderCountingForComponentAction | UpdateOverrideAction;
|
|
62
|
+
export type ReinspectStateAction = HydrateConfigAction | SetIsActiveAction | SetPendingInspectModeAction | SetInspectWhitelistAction | SetInspectBlacklistAction | SetRenderCounterModeAction | SetPropsSerializationModeAction | SetMenuThemeAction | SetMenuOpenGestureAction | SetRenderCountingForComponentAction | UpdateOverrideAction;
|
|
38
63
|
export declare function buildRenderCountComponentMap(componentNames: readonly string[]): Record<string, true>;
|
|
39
64
|
export declare function buildInitialReinspectState(config: ResolvedReinspectConfig): ReinspectState;
|
|
40
65
|
export declare function reinspectStateReducer(state: ReinspectState, action: ReinspectStateAction): ReinspectState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../src/reinspect/core/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,WAAW,CAAA;IACxB,kBAAkB,EAAE,WAAW,CAAA;IAC/B,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;CACnD;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,EAAE,uBAAuB,CAAA;CAChC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,eAAe,CAAA;IACrB,KAAK,EAAE,OAAO,CAAA;CACf;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,0BAA0B,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;CACnB;AAED,UAAU,0BAA0B;IAClC,IAAI,EAAE,yBAAyB,CAAA;IAC/B,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,UAAU,mCAAmC;IAC3C,IAAI,EAAE,mCAAmC,CAAA;IACzC,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,UAAU,oBAAoB;IAC5B,IAAI,EAAE,iBAAiB,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,iBAAiB,CAAA;IACvB,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAAA;CACtC;AAED,MAAM,MAAM,oBAAoB,GAC5B,mBAAmB,GACnB,iBAAiB,GACjB,2BAA2B,GAC3B,0BAA0B,GAC1B,mCAAmC,GACnC,oBAAoB,CAAA;AAExB,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,SAAS,MAAM,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAOtB;AAED,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,uBAAuB,GAC9B,cAAc,
|
|
1
|
+
{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../src/reinspect/core/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,eAAe,EACf,SAAS,EACT,sBAAsB,EACtB,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,WAAW,CAAA;IACxB,kBAAkB,EAAE,WAAW,CAAA;IAC/B,gBAAgB,EAAE,aAAa,CAAA;IAC/B,gBAAgB,EAAE,aAAa,CAAA;IAC/B,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,sBAAsB,EAAE,sBAAsB,CAAA;IAC9C,SAAS,EAAE,SAAS,CAAA;IACpB,eAAe,EAAE,eAAe,CAAA;IAChC,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;CACnD;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,EAAE,uBAAuB,CAAA;CAChC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,eAAe,CAAA;IACrB,KAAK,EAAE,OAAO,CAAA;CACf;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,0BAA0B,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;CACnB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,KAAK,EAAE,aAAa,CAAA;CACrB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,KAAK,EAAE,aAAa,CAAA;CACrB;AAED,UAAU,0BAA0B;IAClC,IAAI,EAAE,yBAAyB,CAAA;IAC/B,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,UAAU,+BAA+B;IACvC,IAAI,EAAE,8BAA8B,CAAA;IACpC,KAAK,EAAE,sBAAsB,CAAA;CAC9B;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,wBAAwB;IAChC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,KAAK,EAAE,eAAe,CAAA;CACvB;AAED,UAAU,mCAAmC;IAC3C,IAAI,EAAE,mCAAmC,CAAA;IACzC,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,UAAU,oBAAoB;IAC5B,IAAI,EAAE,iBAAiB,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,iBAAiB,CAAA;IACvB,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAAA;CACtC;AAED,MAAM,MAAM,oBAAoB,GAC5B,mBAAmB,GACnB,iBAAiB,GACjB,2BAA2B,GAC3B,yBAAyB,GACzB,yBAAyB,GACzB,0BAA0B,GAC1B,+BAA+B,GAC/B,kBAAkB,GAClB,wBAAwB,GACxB,mCAAmC,GACnC,oBAAoB,CAAA;AAExB,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,SAAS,MAAM,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAOtB;AAED,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,uBAAuB,GAC9B,cAAc,CAgBhB;AAgDD,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,oBAAoB,GAC3B,cAAc,CA4LhB"}
|