atom.io 0.33.6 → 0.33.8
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/introspection/index.d.ts +2 -2
- package/dist/introspection/index.d.ts.map +1 -1
- package/dist/introspection/index.js +2 -1
- package/dist/introspection/index.js.map +1 -1
- package/dist/react-devtools/index.css +58 -20
- package/dist/react-devtools/index.css.map +1 -1
- package/dist/react-devtools/index.js +10 -4
- package/dist/react-devtools/index.js.map +1 -1
- package/package.json +5 -5
- package/src/introspection/attach-introspection-states.ts +2 -1
- package/src/introspection/attach-type-selectors.ts +10 -4
- package/src/react-devtools/AtomIODevtools.tsx +1 -0
- package/src/react-devtools/StateIndex.tsx +22 -17
- package/src/react-devtools/devtools.css +58 -20
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type {
|
|
2
|
+
Loadable,
|
|
2
3
|
ReadableToken,
|
|
3
4
|
ReadonlyPureSelectorToken,
|
|
4
5
|
RegularAtomToken,
|
|
@@ -19,13 +20,15 @@ import { DevtoolsContext } from "./store"
|
|
|
19
20
|
export const StateIndexLeafNode: FC<{
|
|
20
21
|
node: ReadableToken<unknown>
|
|
21
22
|
isOpenState: RegularAtomToken<boolean>
|
|
22
|
-
typeState: ReadonlyPureSelectorToken<string
|
|
23
|
+
typeState: ReadonlyPureSelectorToken<Loadable<string>>
|
|
23
24
|
}> = ({ node, isOpenState, typeState }) => {
|
|
24
25
|
const setIsOpen = useI(isOpenState)
|
|
25
26
|
const isOpen = useO(isOpenState)
|
|
26
27
|
|
|
27
28
|
const state = useO(node)
|
|
28
|
-
const
|
|
29
|
+
const stateTypeLoadable = useO(typeState)
|
|
30
|
+
const stateType =
|
|
31
|
+
stateTypeLoadable instanceof Promise ? `Promise` : stateTypeLoadable
|
|
29
32
|
|
|
30
33
|
const isPrimitive = Boolean(primitiveRefinery.refine(state))
|
|
31
34
|
|
|
@@ -49,7 +52,11 @@ export const StateIndexLeafNode: FC<{
|
|
|
49
52
|
<h2>{node.family?.subKey ?? node.key}</h2>
|
|
50
53
|
<span className="type detail">({stateType})</span>
|
|
51
54
|
</main>
|
|
52
|
-
|
|
55
|
+
{isPrimitive ? (
|
|
56
|
+
<StoreEditor token={node} />
|
|
57
|
+
) : (
|
|
58
|
+
<div className="json_viewer">{JSON.stringify(state)}</div>
|
|
59
|
+
)}
|
|
53
60
|
</header>
|
|
54
61
|
{isOpen && !isPrimitive ? (
|
|
55
62
|
<main>
|
|
@@ -102,7 +109,7 @@ export const StateIndexTreeNode: FC<{
|
|
|
102
109
|
export const StateIndexNode: FC<{
|
|
103
110
|
node: FamilyNode<ReadableToken<unknown>> | ReadableToken<unknown>
|
|
104
111
|
isOpenState: RegularAtomToken<boolean>
|
|
105
|
-
typeState: ReadonlyPureSelectorToken<string
|
|
112
|
+
typeState: ReadonlyPureSelectorToken<Loadable<string>>
|
|
106
113
|
}> = ({ node, isOpenState, typeState }) => {
|
|
107
114
|
return (
|
|
108
115
|
<section className="node state" data-testid={`state-${node.key}`}>
|
|
@@ -128,21 +135,19 @@ export const StateIndex: FC<{
|
|
|
128
135
|
|
|
129
136
|
const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext)
|
|
130
137
|
|
|
138
|
+
console.log(tokenIds)
|
|
131
139
|
return (
|
|
132
140
|
<article className="index state_index" data-testid="state-index">
|
|
133
|
-
{[...tokenIds.entries()]
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
/>
|
|
144
|
-
)
|
|
145
|
-
})}
|
|
141
|
+
{[...tokenIds.entries()].map(([key, node]) => {
|
|
142
|
+
return (
|
|
143
|
+
<StateIndexNode
|
|
144
|
+
key={key}
|
|
145
|
+
node={node}
|
|
146
|
+
isOpenState={findInStore(store, viewIsOpenAtoms, node.key)}
|
|
147
|
+
typeState={findInStore(store, typeSelectors, node.key)}
|
|
148
|
+
/>
|
|
149
|
+
)
|
|
150
|
+
})}
|
|
146
151
|
</article>
|
|
147
152
|
)
|
|
148
153
|
}
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
main[data-css="atom_io_devtools"] {
|
|
2
|
-
--fg-color: #
|
|
2
|
+
--fg-color: #ccc;
|
|
3
|
+
--fg-light: #aaa;
|
|
4
|
+
--fg-faint: #555;
|
|
3
5
|
--bg-color: #111;
|
|
6
|
+
--bg-accent: #00f;
|
|
4
7
|
--bg-tint1: #222;
|
|
5
8
|
--fg-border: 1px solid var(--fg-color);
|
|
6
9
|
@media (prefers-color-scheme: light) {
|
|
7
10
|
--fg-color: #444;
|
|
11
|
+
--fg-light: #777;
|
|
12
|
+
--fg-faint: #999;
|
|
8
13
|
--bg-color: #ddd;
|
|
14
|
+
--bg-accent: #0ff;
|
|
9
15
|
--bg-tint1: #e3e3e3;
|
|
10
16
|
}
|
|
11
17
|
& {
|
|
18
|
+
pointer-events: all;
|
|
12
19
|
box-sizing: border-box;
|
|
13
20
|
color: var(--fg-color);
|
|
14
21
|
background-color: var(--bg-color);
|
|
@@ -28,10 +35,9 @@ main[data-css="atom_io_devtools"] {
|
|
|
28
35
|
font-size: 16px;
|
|
29
36
|
font-family: theia, monospace;
|
|
30
37
|
line-height: 1em;
|
|
38
|
+
color: var(--fg-color);
|
|
31
39
|
}
|
|
32
40
|
> header {
|
|
33
|
-
padding: 5px;
|
|
34
|
-
padding-left: 10px;
|
|
35
41
|
padding-bottom: 0;
|
|
36
42
|
display: flex;
|
|
37
43
|
justify-content: space-between;
|
|
@@ -73,17 +79,21 @@ main[data-css="atom_io_devtools"] {
|
|
|
73
79
|
.node .node {
|
|
74
80
|
border-right: var(--fg-border);
|
|
75
81
|
padding-right: 0;
|
|
76
|
-
background: #
|
|
82
|
+
background: #ffffff08;
|
|
83
|
+
@media (prefers-color-scheme: light) {
|
|
84
|
+
background: #00000004;
|
|
85
|
+
}
|
|
77
86
|
}
|
|
78
87
|
.node > .node {
|
|
79
|
-
margin:
|
|
80
|
-
margin-left: 12px;
|
|
88
|
+
margin: 0px 2px 2px 18px;
|
|
81
89
|
border-left: var(--fg-border);
|
|
90
|
+
&:last-of-type {
|
|
91
|
+
margin-bottom: 6px;
|
|
92
|
+
}
|
|
82
93
|
}
|
|
83
94
|
.node {
|
|
84
95
|
border-top: var(--fg-border);
|
|
85
|
-
overflow
|
|
86
|
-
padding: 5px;
|
|
96
|
+
overflow: visible;
|
|
87
97
|
&:last-of-type {
|
|
88
98
|
border-bottom: var(--fg-border);
|
|
89
99
|
}
|
|
@@ -93,44 +103,74 @@ main[data-css="atom_io_devtools"] {
|
|
|
93
103
|
header {
|
|
94
104
|
display: flex;
|
|
95
105
|
flex-flow: row;
|
|
96
|
-
gap: 5px;
|
|
97
106
|
position: sticky;
|
|
98
107
|
z-index: 999;
|
|
99
108
|
top: 0;
|
|
109
|
+
height: 22px;
|
|
100
110
|
button.carat {
|
|
101
111
|
cursor: pointer;
|
|
102
112
|
background: none;
|
|
103
113
|
border: none;
|
|
104
114
|
width: 20px;
|
|
115
|
+
color: var(--fg-light);
|
|
105
116
|
&.open {
|
|
106
117
|
transform: rotate(90deg);
|
|
107
118
|
}
|
|
108
119
|
&:disabled {
|
|
109
120
|
cursor: default;
|
|
121
|
+
color: var(--fg-faint);
|
|
110
122
|
}
|
|
111
123
|
}
|
|
112
124
|
> main {
|
|
113
125
|
display: flex;
|
|
114
126
|
flex-flow: row;
|
|
115
|
-
gap: 5px;
|
|
116
127
|
cursor: help;
|
|
117
|
-
align-items:
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
display:
|
|
128
|
+
align-items: center;
|
|
129
|
+
* {
|
|
130
|
+
height: 100%;
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
align-content: center;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
}
|
|
136
|
+
h2 {
|
|
121
137
|
margin: 0;
|
|
122
|
-
}
|
|
138
|
+
}
|
|
123
139
|
.detail {
|
|
140
|
+
margin-left: 5px;
|
|
124
141
|
color: #777;
|
|
125
142
|
@media (prefers-color-scheme: light) {
|
|
126
143
|
color: #999;
|
|
127
144
|
}
|
|
128
145
|
}
|
|
129
146
|
}
|
|
147
|
+
> .json_viewer {
|
|
148
|
+
color: var(--fg-light);
|
|
149
|
+
}
|
|
150
|
+
> .json_editor,
|
|
151
|
+
> .json_viewer {
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
border-left: 1px solid var(--fg-light);
|
|
155
|
+
background-color: var(--bg-tint1);
|
|
156
|
+
* {
|
|
157
|
+
display: flex;
|
|
158
|
+
height: 100%;
|
|
159
|
+
}
|
|
160
|
+
> span {
|
|
161
|
+
padding: 0px 5px;
|
|
162
|
+
border-left: var(--fg-color);
|
|
163
|
+
z-index: 0;
|
|
164
|
+
&:focus-within {
|
|
165
|
+
outline: 4px solid var(--fg-color);
|
|
166
|
+
background: var(--bg-accent);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
input {
|
|
170
|
+
outline: none;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
130
173
|
}
|
|
131
|
-
/* main {
|
|
132
|
-
margin-left: 15px;
|
|
133
|
-
} */
|
|
134
174
|
}
|
|
135
175
|
section.transaction_log {
|
|
136
176
|
margin-top: 0;
|
|
@@ -243,8 +283,6 @@ main[data-css="atom_io_devtools"] {
|
|
|
243
283
|
.json_editor {
|
|
244
284
|
input {
|
|
245
285
|
font-family: theia, monospace;
|
|
246
|
-
border: none;
|
|
247
|
-
border-bottom: 1px solid;
|
|
248
286
|
background: none;
|
|
249
287
|
&:disabled {
|
|
250
288
|
border: none;
|