react-state-inspector-devtools 1.1.24 → 1.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/dist/index.d.mts +63 -18
- package/dist/index.d.ts +63 -18
- package/dist/index.js +466 -165
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +450 -150
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
|
|
5
|
-
type
|
|
5
|
+
type DataSourceId = string;
|
|
6
|
+
type SliceId = string;
|
|
6
7
|
type InspectableMeta = {
|
|
7
8
|
type: "boolean";
|
|
8
9
|
} | {
|
|
@@ -28,49 +29,93 @@ type InspectableMeta = {
|
|
|
28
29
|
interface InspectableStateEntry {
|
|
29
30
|
key: string;
|
|
30
31
|
value: unknown;
|
|
31
|
-
setValue
|
|
32
|
+
setValue?: (next: unknown) => void;
|
|
32
33
|
meta?: InspectableMeta;
|
|
33
34
|
}
|
|
34
|
-
interface
|
|
35
|
-
id:
|
|
35
|
+
interface SliceEntry {
|
|
36
|
+
id: SliceId;
|
|
36
37
|
label: string;
|
|
38
|
+
states: Map<string, InspectableStateEntry>;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Unified data source entry - can represent:
|
|
42
|
+
* - A React component (type: "component")
|
|
43
|
+
* - A context/store like Redux (type: "context") with slices
|
|
44
|
+
*/
|
|
45
|
+
interface DataSourceEntry {
|
|
46
|
+
id: DataSourceId;
|
|
47
|
+
label: string;
|
|
48
|
+
type: "component" | "context";
|
|
37
49
|
mounted: boolean;
|
|
50
|
+
/** For "component" type - direct states */
|
|
38
51
|
states: Map<string, InspectableStateEntry>;
|
|
52
|
+
/** For "context" type - slices containing states */
|
|
53
|
+
slices: Map<SliceId, SliceEntry>;
|
|
39
54
|
}
|
|
40
|
-
interface
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
55
|
+
interface DataSourceSnapshot {
|
|
56
|
+
id: DataSourceId;
|
|
57
|
+
label: string;
|
|
58
|
+
type: "component" | "context";
|
|
59
|
+
mounted: boolean;
|
|
60
|
+
stateKeys: string[];
|
|
61
|
+
slices: Array<{
|
|
62
|
+
id: SliceId;
|
|
44
63
|
label: string;
|
|
45
|
-
mounted: boolean;
|
|
46
64
|
stateKeys: string[];
|
|
47
65
|
}>;
|
|
48
66
|
}
|
|
67
|
+
interface InspectorSnapshot {
|
|
68
|
+
enabled: boolean;
|
|
69
|
+
dataSources: DataSourceSnapshot[];
|
|
70
|
+
}
|
|
49
71
|
type Listener = () => void;
|
|
50
72
|
interface InspectorComponentRef {
|
|
51
73
|
id: string;
|
|
52
74
|
}
|
|
53
75
|
interface InspectorStore {
|
|
54
76
|
enabled: boolean;
|
|
55
|
-
|
|
77
|
+
dataSources: Map<DataSourceId, DataSourceEntry>;
|
|
56
78
|
subscribe: (listener: Listener) => () => void;
|
|
57
79
|
getSnapshot: () => InspectorSnapshot;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
upsertState: (
|
|
62
|
-
updateStateValue: (
|
|
63
|
-
removeState: (
|
|
80
|
+
registerDataSource: (id: DataSourceId, type: "component" | "context", label?: string, slices?: string[]) => void;
|
|
81
|
+
setDataSourceLabel: (id: DataSourceId, label: string) => void;
|
|
82
|
+
unregisterDataSource: (id: DataSourceId) => void;
|
|
83
|
+
upsertState: (dataSourceId: DataSourceId, entry: InspectableStateEntry) => void;
|
|
84
|
+
updateStateValue: (dataSourceId: DataSourceId, key: string, value: unknown) => void;
|
|
85
|
+
removeState: (dataSourceId: DataSourceId, key: string) => void;
|
|
86
|
+
upsertSliceState: (dataSourceId: DataSourceId, sliceId: SliceId, entry: InspectableStateEntry) => void;
|
|
87
|
+
updateSliceStateValue: (dataSourceId: DataSourceId, sliceId: SliceId, key: string, value: unknown) => void;
|
|
88
|
+
removeSliceState: (dataSourceId: DataSourceId, sliceId: SliceId, key: string) => void;
|
|
89
|
+
getStateEntry: (dataSourceId: DataSourceId, key: string) => InspectableStateEntry | undefined;
|
|
90
|
+
getSliceStateEntry: (dataSourceId: DataSourceId, sliceId: SliceId, key: string) => InspectableStateEntry | undefined;
|
|
91
|
+
/** @deprecated Use registerDataSource with type "component" */
|
|
92
|
+
registerComponent: (id: DataSourceId, label?: string) => void;
|
|
93
|
+
/** @deprecated Use setDataSourceLabel */
|
|
94
|
+
setComponentLabel: (id: DataSourceId, label: string) => void;
|
|
95
|
+
/** @deprecated Use unregisterDataSource */
|
|
96
|
+
unregisterComponent: (id: DataSourceId) => void;
|
|
97
|
+
/** @deprecated Use upsertSliceState */
|
|
98
|
+
upsertDataSourceState: (dataSourceId: DataSourceId, sliceId: string, entry: InspectableStateEntry) => void;
|
|
64
99
|
}
|
|
65
100
|
declare function createInspectorStore(): InspectorStore;
|
|
66
101
|
|
|
67
|
-
|
|
102
|
+
type ReduxStoreType = {
|
|
103
|
+
getState: () => Record<string, unknown>;
|
|
104
|
+
subscribe: (listener: () => void) => () => void;
|
|
105
|
+
dispatch: (action: {
|
|
106
|
+
type: string;
|
|
107
|
+
payload?: unknown;
|
|
108
|
+
}) => void;
|
|
109
|
+
};
|
|
110
|
+
declare function StateInspectorProvider({ enabled, store, children, }: {
|
|
68
111
|
enabled?: boolean;
|
|
112
|
+
store?: ReduxStoreType;
|
|
69
113
|
children: React__default.ReactNode;
|
|
70
114
|
}): react_jsx_runtime.JSX.Element;
|
|
71
115
|
declare function useInspectorStore(): InspectorStore;
|
|
72
116
|
declare function useInspectorComponent(label?: string): InspectorComponentRef;
|
|
73
117
|
|
|
118
|
+
declare function inferMeta(value: unknown): InspectableMeta | undefined;
|
|
74
119
|
/**
|
|
75
120
|
* Registers a piece of state to the inspector registry.
|
|
76
121
|
* Opt-in by replacing useState with useInspectableState.
|
|
@@ -83,4 +128,4 @@ declare function useComponentLabel(label: string): void;
|
|
|
83
128
|
|
|
84
129
|
declare function StateInspectorUI(): React.ReactPortal | null;
|
|
85
130
|
|
|
86
|
-
export { type
|
|
131
|
+
export { type DataSourceEntry, type DataSourceId, type DataSourceSnapshot, type InspectableMeta, type InspectableStateEntry, type InspectorComponentRef, type InspectorSnapshot, type InspectorStore, type SliceEntry, type SliceId, StateInspectorProvider, StateInspectorUI, createInspectorStore, inferMeta, useComponentLabel, useInspectableState, useInspectorComponent, useInspectorStore };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
|
|
5
|
-
type
|
|
5
|
+
type DataSourceId = string;
|
|
6
|
+
type SliceId = string;
|
|
6
7
|
type InspectableMeta = {
|
|
7
8
|
type: "boolean";
|
|
8
9
|
} | {
|
|
@@ -28,49 +29,93 @@ type InspectableMeta = {
|
|
|
28
29
|
interface InspectableStateEntry {
|
|
29
30
|
key: string;
|
|
30
31
|
value: unknown;
|
|
31
|
-
setValue
|
|
32
|
+
setValue?: (next: unknown) => void;
|
|
32
33
|
meta?: InspectableMeta;
|
|
33
34
|
}
|
|
34
|
-
interface
|
|
35
|
-
id:
|
|
35
|
+
interface SliceEntry {
|
|
36
|
+
id: SliceId;
|
|
36
37
|
label: string;
|
|
38
|
+
states: Map<string, InspectableStateEntry>;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Unified data source entry - can represent:
|
|
42
|
+
* - A React component (type: "component")
|
|
43
|
+
* - A context/store like Redux (type: "context") with slices
|
|
44
|
+
*/
|
|
45
|
+
interface DataSourceEntry {
|
|
46
|
+
id: DataSourceId;
|
|
47
|
+
label: string;
|
|
48
|
+
type: "component" | "context";
|
|
37
49
|
mounted: boolean;
|
|
50
|
+
/** For "component" type - direct states */
|
|
38
51
|
states: Map<string, InspectableStateEntry>;
|
|
52
|
+
/** For "context" type - slices containing states */
|
|
53
|
+
slices: Map<SliceId, SliceEntry>;
|
|
39
54
|
}
|
|
40
|
-
interface
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
55
|
+
interface DataSourceSnapshot {
|
|
56
|
+
id: DataSourceId;
|
|
57
|
+
label: string;
|
|
58
|
+
type: "component" | "context";
|
|
59
|
+
mounted: boolean;
|
|
60
|
+
stateKeys: string[];
|
|
61
|
+
slices: Array<{
|
|
62
|
+
id: SliceId;
|
|
44
63
|
label: string;
|
|
45
|
-
mounted: boolean;
|
|
46
64
|
stateKeys: string[];
|
|
47
65
|
}>;
|
|
48
66
|
}
|
|
67
|
+
interface InspectorSnapshot {
|
|
68
|
+
enabled: boolean;
|
|
69
|
+
dataSources: DataSourceSnapshot[];
|
|
70
|
+
}
|
|
49
71
|
type Listener = () => void;
|
|
50
72
|
interface InspectorComponentRef {
|
|
51
73
|
id: string;
|
|
52
74
|
}
|
|
53
75
|
interface InspectorStore {
|
|
54
76
|
enabled: boolean;
|
|
55
|
-
|
|
77
|
+
dataSources: Map<DataSourceId, DataSourceEntry>;
|
|
56
78
|
subscribe: (listener: Listener) => () => void;
|
|
57
79
|
getSnapshot: () => InspectorSnapshot;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
upsertState: (
|
|
62
|
-
updateStateValue: (
|
|
63
|
-
removeState: (
|
|
80
|
+
registerDataSource: (id: DataSourceId, type: "component" | "context", label?: string, slices?: string[]) => void;
|
|
81
|
+
setDataSourceLabel: (id: DataSourceId, label: string) => void;
|
|
82
|
+
unregisterDataSource: (id: DataSourceId) => void;
|
|
83
|
+
upsertState: (dataSourceId: DataSourceId, entry: InspectableStateEntry) => void;
|
|
84
|
+
updateStateValue: (dataSourceId: DataSourceId, key: string, value: unknown) => void;
|
|
85
|
+
removeState: (dataSourceId: DataSourceId, key: string) => void;
|
|
86
|
+
upsertSliceState: (dataSourceId: DataSourceId, sliceId: SliceId, entry: InspectableStateEntry) => void;
|
|
87
|
+
updateSliceStateValue: (dataSourceId: DataSourceId, sliceId: SliceId, key: string, value: unknown) => void;
|
|
88
|
+
removeSliceState: (dataSourceId: DataSourceId, sliceId: SliceId, key: string) => void;
|
|
89
|
+
getStateEntry: (dataSourceId: DataSourceId, key: string) => InspectableStateEntry | undefined;
|
|
90
|
+
getSliceStateEntry: (dataSourceId: DataSourceId, sliceId: SliceId, key: string) => InspectableStateEntry | undefined;
|
|
91
|
+
/** @deprecated Use registerDataSource with type "component" */
|
|
92
|
+
registerComponent: (id: DataSourceId, label?: string) => void;
|
|
93
|
+
/** @deprecated Use setDataSourceLabel */
|
|
94
|
+
setComponentLabel: (id: DataSourceId, label: string) => void;
|
|
95
|
+
/** @deprecated Use unregisterDataSource */
|
|
96
|
+
unregisterComponent: (id: DataSourceId) => void;
|
|
97
|
+
/** @deprecated Use upsertSliceState */
|
|
98
|
+
upsertDataSourceState: (dataSourceId: DataSourceId, sliceId: string, entry: InspectableStateEntry) => void;
|
|
64
99
|
}
|
|
65
100
|
declare function createInspectorStore(): InspectorStore;
|
|
66
101
|
|
|
67
|
-
|
|
102
|
+
type ReduxStoreType = {
|
|
103
|
+
getState: () => Record<string, unknown>;
|
|
104
|
+
subscribe: (listener: () => void) => () => void;
|
|
105
|
+
dispatch: (action: {
|
|
106
|
+
type: string;
|
|
107
|
+
payload?: unknown;
|
|
108
|
+
}) => void;
|
|
109
|
+
};
|
|
110
|
+
declare function StateInspectorProvider({ enabled, store, children, }: {
|
|
68
111
|
enabled?: boolean;
|
|
112
|
+
store?: ReduxStoreType;
|
|
69
113
|
children: React__default.ReactNode;
|
|
70
114
|
}): react_jsx_runtime.JSX.Element;
|
|
71
115
|
declare function useInspectorStore(): InspectorStore;
|
|
72
116
|
declare function useInspectorComponent(label?: string): InspectorComponentRef;
|
|
73
117
|
|
|
118
|
+
declare function inferMeta(value: unknown): InspectableMeta | undefined;
|
|
74
119
|
/**
|
|
75
120
|
* Registers a piece of state to the inspector registry.
|
|
76
121
|
* Opt-in by replacing useState with useInspectableState.
|
|
@@ -83,4 +128,4 @@ declare function useComponentLabel(label: string): void;
|
|
|
83
128
|
|
|
84
129
|
declare function StateInspectorUI(): React.ReactPortal | null;
|
|
85
130
|
|
|
86
|
-
export { type
|
|
131
|
+
export { type DataSourceEntry, type DataSourceId, type DataSourceSnapshot, type InspectableMeta, type InspectableStateEntry, type InspectorComponentRef, type InspectorSnapshot, type InspectorStore, type SliceEntry, type SliceId, StateInspectorProvider, StateInspectorUI, createInspectorStore, inferMeta, useComponentLabel, useInspectableState, useInspectorComponent, useInspectorStore };
|