react-state-inspector-devtools 1.0.3 → 1.1.2

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.
Files changed (8) hide show
  1. package/README.md +57 -90
  2. package/dist/index.css +156 -0
  3. package/dist/index.css.map +1 -0
  4. package/dist/index.js +612 -264
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +598 -250
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +32 -40
package/README.md CHANGED
@@ -61,10 +61,7 @@ yarn add react-state-inspector-devtools
61
61
  ### 1️⃣ Wrap your app with the provider (dev-only)
62
62
 
63
63
  ```tsx
64
- import {
65
- StateInspectorProvider,
66
- StateInspectorUI,
67
- } from "react-state-inspector-devtools";
64
+ import { StateInspectorProvider, StateInspectorUI } from "react-state-inspector-devtools";
68
65
 
69
66
  export function AppRoot() {
70
67
  return (
@@ -85,20 +82,17 @@ export function AppRoot() {
85
82
  Replace `useState` with `useInspectableState`:
86
83
 
87
84
  ```tsx
88
- import {
89
- useInspectorComponent,
90
- useInspectableState,
91
- } from "react-state-inspector-devtools";
85
+ import { useInspectorComponent, useInspectableState } from "react-state-inspector-devtools";
92
86
 
93
87
  export function CounterCard() {
94
88
  const inspector = useInspectorComponent("CounterCard");
95
89
 
96
- const [count, setCount] = useInspectableState(
97
- inspector,
98
- "count",
99
- 0,
100
- { type: "number", min: 0, max: 999, step: 1 }
101
- );
90
+ const [count, setCount] = useInspectableState(inspector, "count", 0, {
91
+ type: "number",
92
+ min: 0,
93
+ max: 999,
94
+ step: 1,
95
+ });
102
96
 
103
97
  return (
104
98
  <div>
@@ -125,13 +119,13 @@ The component and its state will appear in the inspector UI.
125
119
 
126
120
  ### Supported Editors
127
121
 
128
- | Type | Editor |
129
- |------|--------|
130
- | `boolean` | ✅ Checkbox |
131
- | `number` | ✅ Number input (min / max / step) |
132
- | `text` | ✅ Text input (with placeholder) |
133
- | `select` | ✅ Dropdown |
134
- | `json` | ✅ JSON editor |
122
+ | Type | Editor |
123
+ | --------- | ---------------------------------- |
124
+ | `boolean` | ✅ Checkbox |
125
+ | `number` | ✅ Number input (min / max / step) |
126
+ | `text` | ✅ Text input (with placeholder) |
127
+ | `select` | ✅ Dropdown |
128
+ | `json` | ✅ JSON editor |
135
129
 
136
130
  ---
137
131
 
@@ -142,15 +136,13 @@ The component and its state will appear in the inspector UI.
142
136
  Wraps your app and controls whether the inspector is active.
143
137
 
144
138
  ```tsx
145
- <StateInspectorProvider enabled={boolean}>
146
- {children}
147
- </StateInspectorProvider>
139
+ <StateInspectorProvider enabled={boolean}>{children}</StateInspectorProvider>
148
140
  ```
149
141
 
150
- | Prop | Type | Description |
151
- |------|------|-------------|
152
- | `enabled` | `boolean` | Controls whether the inspector is active |
153
- | `children` | `ReactNode` | Your application |
142
+ | Prop | Type | Description |
143
+ | ---------- | ----------- | ---------------------------------------- |
144
+ | `enabled` | `boolean` | Controls whether the inspector is active |
145
+ | `children` | `ReactNode` | Your application |
154
146
 
155
147
  ---
156
148
 
@@ -191,12 +183,12 @@ const [value, setValue] = useInspectableState(
191
183
  );
192
184
  ```
193
185
 
194
- | Parameter | Type | Description |
195
- |-----------|------|-------------|
196
- | `inspector` | `InspectorComponentRef` | Returned from `useInspectorComponent` |
197
- | `key` | `string` | State name shown in the UI |
198
- | `initialValue` | `T` | Initial state value (same as `useState`) |
199
- | `meta` | `InspectableMeta` | Optional UI hints for the editor |
186
+ | Parameter | Type | Description |
187
+ | -------------- | ----------------------- | ---------------------------------------- |
188
+ | `inspector` | `InspectorComponentRef` | Returned from `useInspectorComponent` |
189
+ | `key` | `string` | State name shown in the UI |
190
+ | `initialValue` | `T` | Initial state value (same as `useState`) |
191
+ | `meta` | `InspectableMeta` | Optional UI hints for the editor |
200
192
 
201
193
  ---
202
194
 
@@ -207,7 +199,9 @@ The `meta` parameter controls how the state is rendered in the inspector UI:
207
199
  ### Boolean
208
200
 
209
201
  ```tsx
210
- { type: "boolean" }
202
+ {
203
+ type: "boolean";
204
+ }
211
205
  ```
212
206
 
213
207
  ### Number
@@ -244,7 +238,9 @@ The `meta` parameter controls how the state is rendered in the inspector UI:
244
238
  ### JSON
245
239
 
246
240
  ```tsx
247
- { type: "json" }
241
+ {
242
+ type: "json";
243
+ }
248
244
  ```
249
245
 
250
246
  > 💡 **Tip:** If you don't provide `meta`, the type is **automatically inferred** from the initial value.
@@ -259,36 +255,22 @@ The `meta` parameter controls how the state is rendered in the inspector UI:
259
255
  export function FlagsPanel() {
260
256
  const inspector = useInspectorComponent("FlagsPanel");
261
257
 
262
- const [isAdmin, setIsAdmin] = useInspectableState(
263
- inspector,
264
- "isAdmin",
265
- false,
266
- { type: "boolean" }
267
- );
258
+ const [isAdmin, setIsAdmin] = useInspectableState(inspector, "isAdmin", false, {
259
+ type: "boolean",
260
+ });
268
261
 
269
- const [betaUser, setBetaUser] = useInspectableState(
270
- inspector,
271
- "betaUser",
272
- true,
273
- { type: "boolean" }
274
- );
262
+ const [betaUser, setBetaUser] = useInspectableState(inspector, "betaUser", true, {
263
+ type: "boolean",
264
+ });
275
265
 
276
266
  return (
277
267
  <div>
278
268
  <label>
279
- <input
280
- type="checkbox"
281
- checked={isAdmin}
282
- onChange={(e) => setIsAdmin(e.target.checked)}
283
- />
269
+ <input type="checkbox" checked={isAdmin} onChange={(e) => setIsAdmin(e.target.checked)} />
284
270
  Is Admin
285
271
  </label>
286
272
  <label>
287
- <input
288
- type="checkbox"
289
- checked={betaUser}
290
- onChange={(e) => setBetaUser(e.target.checked)}
291
- />
273
+ <input type="checkbox" checked={betaUser} onChange={(e) => setBetaUser(e.target.checked)} />
292
274
  Beta User
293
275
  </label>
294
276
  </div>
@@ -302,20 +284,17 @@ export function FlagsPanel() {
302
284
  export function VariantPicker() {
303
285
  const inspector = useInspectorComponent("VariantPicker");
304
286
 
305
- const [variant, setVariant] = useInspectableState(
306
- inspector,
307
- "variant",
308
- "M",
309
- {
310
- type: "select",
311
- options: ["S", "M", "L", "XL"],
312
- }
313
- );
287
+ const [variant, setVariant] = useInspectableState(inspector, "variant", "M", {
288
+ type: "select",
289
+ options: ["S", "M", "L", "XL"],
290
+ });
314
291
 
315
292
  return (
316
293
  <select value={variant} onChange={(e) => setVariant(e.target.value)}>
317
294
  {["S", "M", "L", "XL"].map((v) => (
318
- <option key={v} value={v}>{v}</option>
295
+ <option key={v} value={v}>
296
+ {v}
297
+ </option>
319
298
  ))}
320
299
  </select>
321
300
  );
@@ -328,32 +307,20 @@ export function VariantPicker() {
328
307
  export function ProfileForm() {
329
308
  const inspector = useInspectorComponent("ProfileForm");
330
309
 
331
- const [name, setName] = useInspectableState(
332
- inspector,
333
- "name",
334
- "",
335
- { type: "text", placeholder: "Name" }
336
- );
310
+ const [name, setName] = useInspectableState(inspector, "name", "", {
311
+ type: "text",
312
+ placeholder: "Name",
313
+ });
337
314
 
338
- const [email, setEmail] = useInspectableState(
339
- inspector,
340
- "email",
341
- "",
342
- { type: "text", placeholder: "Email" }
343
- );
315
+ const [email, setEmail] = useInspectableState(inspector, "email", "", {
316
+ type: "text",
317
+ placeholder: "Email",
318
+ });
344
319
 
345
320
  return (
346
321
  <div>
347
- <input
348
- value={name}
349
- onChange={(e) => setName(e.target.value)}
350
- placeholder="Name"
351
- />
352
- <input
353
- value={email}
354
- onChange={(e) => setEmail(e.target.value)}
355
- placeholder="Email"
356
- />
322
+ <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" />
323
+ <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
357
324
  </div>
358
325
  );
359
326
  }
package/dist/index.css ADDED
@@ -0,0 +1,156 @@
1
+ @import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
2
+
3
+ /* src/index.css */
4
+ [data-rsi-root],
5
+ [data-rsi-root] *,
6
+ [data-rsi-root] *::before,
7
+ [data-rsi-root] *::after {
8
+ box-sizing: border-box;
9
+ margin: 0;
10
+ padding: 0;
11
+ border: 0;
12
+ font-family:
13
+ "Inter",
14
+ -apple-system,
15
+ BlinkMacSystemFont,
16
+ "Segoe UI",
17
+ Roboto,
18
+ Oxygen,
19
+ Ubuntu,
20
+ Cantarell,
21
+ "Helvetica Neue",
22
+ sans-serif;
23
+ font-size: 14px;
24
+ font-weight: 400;
25
+ font-style: normal;
26
+ font-variant: normal;
27
+ line-height: 1.5;
28
+ letter-spacing: normal;
29
+ text-align: left;
30
+ text-decoration: none;
31
+ text-indent: 0;
32
+ text-shadow: none;
33
+ text-transform: none;
34
+ word-spacing: normal;
35
+ white-space: normal;
36
+ background: transparent;
37
+ color: inherit;
38
+ outline: none;
39
+ vertical-align: baseline;
40
+ visibility: visible;
41
+ opacity: 1;
42
+ transform: none;
43
+ transform-origin: 50% 50% 0;
44
+ animation: none;
45
+ transition: none;
46
+ list-style: none;
47
+ border-collapse: collapse;
48
+ border-spacing: 0;
49
+ float: none;
50
+ clear: none;
51
+ cursor: auto;
52
+ }
53
+ [data-rsi-root] {
54
+ all: initial;
55
+ font-family:
56
+ "Inter",
57
+ -apple-system,
58
+ BlinkMacSystemFont,
59
+ "Segoe UI",
60
+ Roboto,
61
+ Oxygen,
62
+ Ubuntu,
63
+ Cantarell,
64
+ "Helvetica Neue",
65
+ sans-serif;
66
+ font-size: 14px;
67
+ line-height: 1.5;
68
+ color: #fff;
69
+ -webkit-font-smoothing: antialiased;
70
+ -moz-osx-font-smoothing: grayscale;
71
+ text-rendering: optimizeLegibility;
72
+ }
73
+ [data-rsi-floating-button] {
74
+ all: initial;
75
+ font-family:
76
+ "Inter",
77
+ -apple-system,
78
+ BlinkMacSystemFont,
79
+ "Segoe UI",
80
+ Roboto,
81
+ Oxygen,
82
+ Ubuntu,
83
+ Cantarell,
84
+ "Helvetica Neue",
85
+ sans-serif;
86
+ -webkit-font-smoothing: antialiased;
87
+ -moz-osx-font-smoothing: grayscale;
88
+ }
89
+ [data-rsi-root] button {
90
+ font-family: inherit;
91
+ font-size: inherit;
92
+ line-height: inherit;
93
+ cursor: pointer;
94
+ background: transparent;
95
+ border: none;
96
+ padding: 0;
97
+ margin: 0;
98
+ }
99
+ [data-rsi-root] input,
100
+ [data-rsi-root] textarea {
101
+ font-family: inherit;
102
+ font-size: inherit;
103
+ line-height: inherit;
104
+ background: transparent;
105
+ border: none;
106
+ outline: none;
107
+ padding: 0;
108
+ margin: 0;
109
+ resize: none;
110
+ }
111
+ [data-rsi-root] input::placeholder,
112
+ [data-rsi-root] textarea::placeholder {
113
+ color: inherit;
114
+ opacity: 0.5;
115
+ }
116
+ [data-rsi-root] a {
117
+ color: inherit;
118
+ text-decoration: none;
119
+ }
120
+ [data-rsi-root] img,
121
+ [data-rsi-root] svg {
122
+ display: block;
123
+ max-width: 100%;
124
+ }
125
+ [data-rsi-root] h1,
126
+ [data-rsi-root] h2,
127
+ [data-rsi-root] h3,
128
+ [data-rsi-root] h4,
129
+ [data-rsi-root] h5,
130
+ [data-rsi-root] h6 {
131
+ font-size: inherit;
132
+ font-weight: inherit;
133
+ }
134
+ [data-rsi-root] ::-webkit-scrollbar {
135
+ width: 6px;
136
+ height: 6px;
137
+ }
138
+ [data-rsi-root] ::-webkit-scrollbar-track {
139
+ background: transparent;
140
+ }
141
+ [data-rsi-root] ::-webkit-scrollbar-thumb {
142
+ background: rgba(255, 255, 255, 0.2);
143
+ border-radius: 3px;
144
+ }
145
+ [data-rsi-root] ::-webkit-scrollbar-thumb:hover {
146
+ background: rgba(255, 255, 255, 0.3);
147
+ }
148
+ [data-rsi-root] ::selection {
149
+ background: rgba(99, 102, 241, 0.4);
150
+ color: #fff;
151
+ }
152
+ [data-rsi-root] :focus-visible {
153
+ outline: 2px solid rgba(99, 102, 241, 0.6);
154
+ outline-offset: 2px;
155
+ }
156
+ /*# sourceMappingURL=index.css.map */
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.css"],"sourcesContent":["/* Inter Font Import */\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\");\n\n/* CSS Isolation - Reset all inherited styles */\n[data-rsi-root],\n[data-rsi-root] *,\n[data-rsi-root] *::before,\n[data-rsi-root] *::after {\n /* Reset box model */\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0;\n\n /* Reset typography */\n font-family:\n \"Inter\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n \"Helvetica Neue\",\n sans-serif;\n font-size: 14px;\n font-weight: 400;\n font-style: normal;\n font-variant: normal;\n line-height: 1.5;\n letter-spacing: normal;\n text-align: left;\n text-decoration: none;\n text-indent: 0;\n text-shadow: none;\n text-transform: none;\n word-spacing: normal;\n white-space: normal;\n\n /* Reset visual */\n background: transparent;\n color: inherit;\n outline: none;\n vertical-align: baseline;\n visibility: visible;\n opacity: 1;\n\n /* Reset transforms */\n transform: none;\n transform-origin: 50% 50% 0;\n\n /* Reset animations */\n animation: none;\n transition: none;\n\n /* Reset list styles */\n list-style: none;\n\n /* Reset table styles */\n border-collapse: collapse;\n border-spacing: 0;\n\n /* Reset flex/grid */\n float: none;\n clear: none;\n\n /* Reset cursor */\n cursor: auto;\n}\n\n/* Root container base styles */\n[data-rsi-root] {\n all: initial;\n font-family:\n \"Inter\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n \"Helvetica Neue\",\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n/* Floating button reset */\n[data-rsi-floating-button] {\n all: initial;\n font-family:\n \"Inter\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Reset specific elements */\n[data-rsi-root] button {\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n margin: 0;\n}\n\n[data-rsi-root] input,\n[data-rsi-root] textarea {\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n resize: none;\n}\n\n[data-rsi-root] input::placeholder,\n[data-rsi-root] textarea::placeholder {\n color: inherit;\n opacity: 0.5;\n}\n\n[data-rsi-root] a {\n color: inherit;\n text-decoration: none;\n}\n\n[data-rsi-root] img,\n[data-rsi-root] svg {\n display: block;\n max-width: 100%;\n}\n\n[data-rsi-root] h1,\n[data-rsi-root] h2,\n[data-rsi-root] h3,\n[data-rsi-root] h4,\n[data-rsi-root] h5,\n[data-rsi-root] h6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/* Scrollbar styling */\n[data-rsi-root] ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n[data-rsi-root] ::-webkit-scrollbar-track {\n background: transparent;\n}\n\n[data-rsi-root] ::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n}\n\n[data-rsi-root] ::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.3);\n}\n\n/* Selection styling */\n[data-rsi-root] ::selection {\n background: rgba(99, 102, 241, 0.4);\n color: #fff;\n}\n\n/* Focus visible for accessibility */\n[data-rsi-root] :focus-visible {\n outline: 2px solid rgba(99, 102, 241, 0.6);\n outline-offset: 2px;\n}\n"],"mappings":";;;AAIA,CAAC;AACD,CAAC,eAAe;AAChB,CAAC,eAAe,CAAC;AACjB,CAAC,eAAe,CAAC;AAEf,cAAY;AACZ,UAAQ;AACR,WAAS;AACT,UAAQ;AAGR;AAAA,IACE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB;AACF,aAAW;AACX,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,eAAa;AACb,kBAAgB;AAChB,cAAY;AACZ,mBAAiB;AACjB,eAAa;AACb,eAAa;AACb,kBAAgB;AAChB,gBAAc;AACd,eAAa;AAGb,cAAY;AACZ,SAAO;AACP,WAAS;AACT,kBAAgB;AAChB,cAAY;AACZ,WAAS;AAGT,aAAW;AACX,oBAAkB,IAAI,IAAI;AAG1B,aAAW;AACX,cAAY;AAGZ,cAAY;AAGZ,mBAAiB;AACjB,kBAAgB;AAGhB,SAAO;AACP,SAAO;AAGP,UAAQ;AACV;AAGA,CAAC;AACC,OAAK;AACL;AAAA,IACE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB;AACF,aAAW;AACX,eAAa;AACb,SAAO;AACP,0BAAwB;AACxB,2BAAyB;AACzB,kBAAgB;AAClB;AAGA,CAAC;AACC,OAAK;AACL;AAAA,IACE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB;AACF,0BAAwB;AACxB,2BAAyB;AAC3B;AAGA,CAAC,eAAe;AACd,eAAa;AACb,aAAW;AACX,eAAa;AACb,UAAQ;AACR,cAAY;AACZ,UAAQ;AACR,WAAS;AACT,UAAQ;AACV;AAEA,CAAC,eAAe;AAChB,CAAC,eAAe;AACd,eAAa;AACb,aAAW;AACX,eAAa;AACb,cAAY;AACZ,UAAQ;AACR,WAAS;AACT,WAAS;AACT,UAAQ;AACR,UAAQ;AACV;AAEA,CAAC,eAAe,KAAK;AACrB,CAAC,eAAe,QAAQ;AACtB,SAAO;AACP,WAAS;AACX;AAEA,CAAC,eAAe;AACd,SAAO;AACP,mBAAiB;AACnB;AAEA,CAAC,eAAe;AAChB,CAAC,eAAe;AACd,WAAS;AACT,aAAW;AACb;AAEA,CAAC,eAAe;AAChB,CAAC,eAAe;AAChB,CAAC,eAAe;AAChB,CAAC,eAAe;AAChB,CAAC,eAAe;AAChB,CAAC,eAAe;AACd,aAAW;AACX,eAAa;AACf;AAGA,CAAC,eAAe;AACd,SAAO;AACP,UAAQ;AACV;AAEA,CAAC,eAAe;AACd,cAAY;AACd;AAEA,CAAC,eAAe;AACd,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAChC,iBAAe;AACjB;AAEA,CAAC,eAAe,yBAAyB;AACvC,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClC;AAGA,CAAC,eAAe;AACd,cAAY,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AAC/B,SAAO;AACT;AAGA,CAAC,eAAe;AACd,WAAS,IAAI,MAAM,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,kBAAgB;AAClB;","names":[]}