@tanstack/react-query-devtools 4.39.0 → 4.39.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.
- package/build/lib/Explorer.esm.js +264 -0
- package/build/lib/Explorer.esm.js.map +1 -0
- package/build/lib/Explorer.js +302 -0
- package/build/lib/Explorer.js.map +1 -0
- package/build/lib/Explorer.mjs +264 -0
- package/build/lib/Explorer.mjs.map +1 -0
- package/build/lib/Logo.esm.js +32 -0
- package/build/lib/Logo.esm.js.map +1 -0
- package/build/lib/Logo.js +56 -0
- package/build/lib/Logo.js.map +1 -0
- package/build/lib/Logo.mjs +32 -0
- package/build/lib/Logo.mjs.map +1 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +19 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +1 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +23 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +19 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +1 -0
- package/build/lib/devtools.esm.js +925 -0
- package/build/lib/devtools.esm.js.map +1 -0
- package/build/lib/devtools.js +949 -0
- package/build/lib/devtools.js.map +1 -0
- package/build/lib/devtools.mjs +925 -0
- package/build/lib/devtools.mjs.map +1 -0
- package/build/lib/index.esm.js +12 -0
- package/build/lib/index.esm.js.map +1 -0
- package/build/lib/index.js +17 -0
- package/build/lib/index.js.map +1 -0
- package/build/lib/index.mjs +12 -0
- package/build/lib/index.mjs.map +1 -0
- package/build/lib/index.prod.d.ts +4 -0
- package/build/lib/index.prod.esm.js +1604 -0
- package/build/lib/index.prod.esm.js.map +1 -0
- package/build/lib/index.prod.js +1631 -0
- package/build/lib/index.prod.js.map +1 -0
- package/build/lib/index.prod.mjs +1604 -0
- package/build/lib/index.prod.mjs.map +1 -0
- package/build/lib/screenreader.esm.js +17 -0
- package/build/lib/screenreader.esm.js.map +1 -0
- package/build/lib/screenreader.js +41 -0
- package/build/lib/screenreader.js.map +1 -0
- package/build/lib/screenreader.mjs +17 -0
- package/build/lib/screenreader.mjs.map +1 -0
- package/build/lib/styledComponents.esm.js +94 -0
- package/build/lib/styledComponents.esm.js.map +1 -0
- package/build/lib/styledComponents.js +105 -0
- package/build/lib/styledComponents.js.map +1 -0
- package/build/lib/styledComponents.mjs +94 -0
- package/build/lib/styledComponents.mjs.map +1 -0
- package/build/lib/theme.esm.js +33 -0
- package/build/lib/theme.esm.js.map +1 -0
- package/build/lib/theme.js +59 -0
- package/build/lib/theme.js.map +1 -0
- package/build/lib/theme.mjs +33 -0
- package/build/lib/theme.mjs.map +1 -0
- package/build/lib/useLocalStorage.esm.js +47 -0
- package/build/lib/useLocalStorage.esm.js.map +1 -0
- package/build/lib/useLocalStorage.js +71 -0
- package/build/lib/useLocalStorage.js.map +1 -0
- package/build/lib/useLocalStorage.mjs +47 -0
- package/build/lib/useLocalStorage.mjs.map +1 -0
- package/build/lib/useMediaQuery.esm.js +36 -0
- package/build/lib/useMediaQuery.esm.js.map +1 -0
- package/build/lib/useMediaQuery.js +60 -0
- package/build/lib/useMediaQuery.js.map +1 -0
- package/build/lib/useMediaQuery.mjs +36 -0
- package/build/lib/useMediaQuery.mjs.map +1 -0
- package/build/lib/utils.esm.js +186 -0
- package/build/lib/utils.esm.js.map +1 -0
- package/build/lib/utils.js +226 -0
- package/build/lib/utils.js.map +1 -0
- package/build/lib/utils.mjs +186 -0
- package/build/lib/utils.mjs.map +1 -0
- package/build/umd/index.development.js +3531 -0
- package/build/umd/index.development.js.map +1 -0
- package/build/umd/index.production.js +2 -0
- package/build/umd/index.production.js.map +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.esm.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import SuperJSON from 'superjson';
|
|
5
|
+
import { displayValue, styled } from './utils.esm.js';
|
|
6
|
+
|
|
7
|
+
const Entry = styled('div', {
|
|
8
|
+
fontFamily: 'Menlo, monospace',
|
|
9
|
+
fontSize: '1em',
|
|
10
|
+
lineHeight: '1.7',
|
|
11
|
+
outline: 'none',
|
|
12
|
+
wordBreak: 'break-word'
|
|
13
|
+
});
|
|
14
|
+
const Label = styled('span', {
|
|
15
|
+
color: 'white'
|
|
16
|
+
});
|
|
17
|
+
const LabelButton = styled('button', {
|
|
18
|
+
cursor: 'pointer',
|
|
19
|
+
color: 'white'
|
|
20
|
+
});
|
|
21
|
+
const ExpandButton = styled('button', {
|
|
22
|
+
cursor: 'pointer',
|
|
23
|
+
color: 'inherit',
|
|
24
|
+
font: 'inherit',
|
|
25
|
+
outline: 'inherit',
|
|
26
|
+
background: 'transparent',
|
|
27
|
+
border: 'none',
|
|
28
|
+
padding: 0
|
|
29
|
+
});
|
|
30
|
+
const CopyButton = ({
|
|
31
|
+
value
|
|
32
|
+
}) => {
|
|
33
|
+
const [copyState, setCopyState] = React.useState('NoCopy');
|
|
34
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
35
|
+
onClick: copyState === 'NoCopy' ? () => {
|
|
36
|
+
navigator.clipboard.writeText(SuperJSON.stringify(value)).then(() => {
|
|
37
|
+
setCopyState('SuccessCopy');
|
|
38
|
+
setTimeout(() => {
|
|
39
|
+
setCopyState('NoCopy');
|
|
40
|
+
}, 1500);
|
|
41
|
+
}, err => {
|
|
42
|
+
console.error('Failed to copy: ', err);
|
|
43
|
+
setCopyState('ErrorCopy');
|
|
44
|
+
setTimeout(() => {
|
|
45
|
+
setCopyState('NoCopy');
|
|
46
|
+
}, 1500);
|
|
47
|
+
});
|
|
48
|
+
} : undefined,
|
|
49
|
+
style: {
|
|
50
|
+
cursor: 'pointer',
|
|
51
|
+
color: 'inherit',
|
|
52
|
+
font: 'inherit',
|
|
53
|
+
outline: 'inherit',
|
|
54
|
+
background: 'transparent',
|
|
55
|
+
border: 'none',
|
|
56
|
+
padding: 0
|
|
57
|
+
}
|
|
58
|
+
}, copyState === 'NoCopy' ? /*#__PURE__*/React.createElement(Copier, null) : copyState === 'SuccessCopy' ? /*#__PURE__*/React.createElement(CopiedCopier, null) : /*#__PURE__*/React.createElement(ErrorCopier, null));
|
|
59
|
+
};
|
|
60
|
+
const Value = styled('span', (_props, theme) => ({
|
|
61
|
+
color: theme.danger
|
|
62
|
+
}));
|
|
63
|
+
const SubEntries = styled('div', {
|
|
64
|
+
marginLeft: '.1em',
|
|
65
|
+
paddingLeft: '1em',
|
|
66
|
+
borderLeft: '2px solid rgba(0,0,0,.15)'
|
|
67
|
+
});
|
|
68
|
+
const Info = styled('span', {
|
|
69
|
+
color: 'grey',
|
|
70
|
+
fontSize: '.7em'
|
|
71
|
+
});
|
|
72
|
+
const Expander = ({
|
|
73
|
+
expanded,
|
|
74
|
+
style = {}
|
|
75
|
+
}) => /*#__PURE__*/React.createElement("span", {
|
|
76
|
+
style: {
|
|
77
|
+
display: 'inline-block',
|
|
78
|
+
transition: 'all .1s ease',
|
|
79
|
+
transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
|
|
80
|
+
...style
|
|
81
|
+
}
|
|
82
|
+
}, "\u25B6");
|
|
83
|
+
|
|
84
|
+
const Copier = () => /*#__PURE__*/React.createElement("span", {
|
|
85
|
+
"aria-label": "Copy object to clipboard",
|
|
86
|
+
title: "Copy object to clipboard",
|
|
87
|
+
style: {
|
|
88
|
+
paddingLeft: '1em'
|
|
89
|
+
}
|
|
90
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
91
|
+
height: "12",
|
|
92
|
+
viewBox: "0 0 16 12",
|
|
93
|
+
width: "10"
|
|
94
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
95
|
+
fill: "currentColor",
|
|
96
|
+
d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
|
|
97
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
98
|
+
fill: "currentColor",
|
|
99
|
+
d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
|
|
100
|
+
})));
|
|
101
|
+
|
|
102
|
+
const ErrorCopier = () => /*#__PURE__*/React.createElement("span", {
|
|
103
|
+
"aria-label": "Failed copying to clipboard",
|
|
104
|
+
title: "Failed copying to clipboard",
|
|
105
|
+
style: {
|
|
106
|
+
paddingLeft: '1em',
|
|
107
|
+
display: 'flex',
|
|
108
|
+
alignItems: 'center'
|
|
109
|
+
}
|
|
110
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
111
|
+
height: "12",
|
|
112
|
+
viewBox: "0 0 16 12",
|
|
113
|
+
width: "10",
|
|
114
|
+
display: "block"
|
|
115
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
116
|
+
fill: "red",
|
|
117
|
+
d: "M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
|
|
118
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
119
|
+
style: {
|
|
120
|
+
color: 'red',
|
|
121
|
+
fontSize: '12px',
|
|
122
|
+
paddingLeft: '4px',
|
|
123
|
+
position: 'relative',
|
|
124
|
+
top: '2px'
|
|
125
|
+
}
|
|
126
|
+
}, "See console"));
|
|
127
|
+
|
|
128
|
+
const CopiedCopier = () => /*#__PURE__*/React.createElement("span", {
|
|
129
|
+
"aria-label": "Object copied to clipboard",
|
|
130
|
+
title: "Object copied to clipboard",
|
|
131
|
+
style: {
|
|
132
|
+
paddingLeft: '1em',
|
|
133
|
+
display: 'inline-block',
|
|
134
|
+
verticalAlign: 'middle'
|
|
135
|
+
}
|
|
136
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
137
|
+
height: "16",
|
|
138
|
+
viewBox: "0 0 16 16",
|
|
139
|
+
width: "16",
|
|
140
|
+
display: "block"
|
|
141
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
142
|
+
fill: "green",
|
|
143
|
+
d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
|
144
|
+
})));
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Chunk elements in the array by size
|
|
148
|
+
*
|
|
149
|
+
* when the array cannot be chunked evenly by size, the last chunk will be
|
|
150
|
+
* filled with the remaining elements
|
|
151
|
+
*
|
|
152
|
+
* @example
|
|
153
|
+
* chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
|
|
154
|
+
*/
|
|
155
|
+
function chunkArray(array, size) {
|
|
156
|
+
if (size < 1) return [];
|
|
157
|
+
let i = 0;
|
|
158
|
+
const result = [];
|
|
159
|
+
|
|
160
|
+
while (i < array.length) {
|
|
161
|
+
result.push(array.slice(i, i + size));
|
|
162
|
+
i = i + size;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
return result;
|
|
166
|
+
}
|
|
167
|
+
const DefaultRenderer = ({
|
|
168
|
+
handleEntry,
|
|
169
|
+
label,
|
|
170
|
+
value,
|
|
171
|
+
subEntries = [],
|
|
172
|
+
subEntryPages = [],
|
|
173
|
+
type,
|
|
174
|
+
expanded = false,
|
|
175
|
+
copyable = false,
|
|
176
|
+
toggleExpanded,
|
|
177
|
+
pageSize
|
|
178
|
+
}) => {
|
|
179
|
+
const [expandedPages, setExpandedPages] = React.useState([]);
|
|
180
|
+
return /*#__PURE__*/React.createElement(Entry, {
|
|
181
|
+
key: label
|
|
182
|
+
}, subEntryPages.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandButton, {
|
|
183
|
+
onClick: () => toggleExpanded()
|
|
184
|
+
}, /*#__PURE__*/React.createElement(Expander, {
|
|
185
|
+
expanded: expanded
|
|
186
|
+
}), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React.createElement(CopyButton, {
|
|
187
|
+
value: value
|
|
188
|
+
}) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
|
|
189
|
+
key: index
|
|
190
|
+
}, /*#__PURE__*/React.createElement(Entry, null, /*#__PURE__*/React.createElement(LabelButton, {
|
|
191
|
+
onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
|
|
192
|
+
}, /*#__PURE__*/React.createElement(Expander, {
|
|
193
|
+
expanded: expanded
|
|
194
|
+
}), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React.createElement(SubEntries, null, entries.map(handleEntry)) : null)))) : null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React.createElement(Value, null, displayValue(value))));
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
function isIterable(x) {
|
|
198
|
+
return Symbol.iterator in x;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
function Explorer({
|
|
202
|
+
value,
|
|
203
|
+
defaultExpanded,
|
|
204
|
+
renderer = DefaultRenderer,
|
|
205
|
+
pageSize = 100,
|
|
206
|
+
copyable = false,
|
|
207
|
+
...rest
|
|
208
|
+
}) {
|
|
209
|
+
const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
|
|
210
|
+
const toggleExpanded = React.useCallback(() => setExpanded(old => !old), []);
|
|
211
|
+
let type = typeof value;
|
|
212
|
+
let subEntries = [];
|
|
213
|
+
|
|
214
|
+
const makeProperty = sub => {
|
|
215
|
+
const subDefaultExpanded = defaultExpanded === true ? {
|
|
216
|
+
[sub.label]: true
|
|
217
|
+
} : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
|
|
218
|
+
return { ...sub,
|
|
219
|
+
defaultExpanded: subDefaultExpanded
|
|
220
|
+
};
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
if (Array.isArray(value)) {
|
|
224
|
+
type = 'array';
|
|
225
|
+
subEntries = value.map((d, i) => makeProperty({
|
|
226
|
+
label: i.toString(),
|
|
227
|
+
value: d
|
|
228
|
+
}));
|
|
229
|
+
} else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
|
|
230
|
+
type = 'Iterable';
|
|
231
|
+
subEntries = Array.from(value, (val, i) => makeProperty({
|
|
232
|
+
label: i.toString(),
|
|
233
|
+
value: val
|
|
234
|
+
}));
|
|
235
|
+
} else if (typeof value === 'object' && value !== null) {
|
|
236
|
+
type = 'object';
|
|
237
|
+
subEntries = Object.entries(value).map(([key, val]) => makeProperty({
|
|
238
|
+
label: key,
|
|
239
|
+
value: val
|
|
240
|
+
}));
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
const subEntryPages = chunkArray(subEntries, pageSize);
|
|
244
|
+
return renderer({
|
|
245
|
+
handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
|
|
246
|
+
key: entry.label,
|
|
247
|
+
value: value,
|
|
248
|
+
renderer: renderer,
|
|
249
|
+
copyable: copyable
|
|
250
|
+
}, rest, entry)),
|
|
251
|
+
type,
|
|
252
|
+
subEntries,
|
|
253
|
+
subEntryPages,
|
|
254
|
+
value,
|
|
255
|
+
expanded,
|
|
256
|
+
copyable,
|
|
257
|
+
toggleExpanded,
|
|
258
|
+
pageSize,
|
|
259
|
+
...rest
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
export { CopyButton, DefaultRenderer, Entry, ExpandButton, Expander, Info, Label, LabelButton, SubEntries, Value, chunkArray, Explorer as default };
|
|
264
|
+
//# sourceMappingURL=Explorer.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Explorer.esm.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport superjson from 'superjson'\nimport { displayValue, styled } from './utils'\n\nexport const Entry = styled('div', {\n fontFamily: 'Menlo, monospace',\n fontSize: '1em',\n lineHeight: '1.7',\n outline: 'none',\n wordBreak: 'break-word',\n})\n\nexport const Label = styled('span', {\n color: 'white',\n})\n\nexport const LabelButton = styled('button', {\n cursor: 'pointer',\n color: 'white',\n})\n\nexport const ExpandButton = styled('button', {\n cursor: 'pointer',\n color: 'inherit',\n font: 'inherit',\n outline: 'inherit',\n background: 'transparent',\n border: 'none',\n padding: 0,\n})\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nexport const CopyButton = ({ value }: { value: unknown }) => {\n const [copyState, setCopyState] = React.useState<CopyState>('NoCopy')\n\n return (\n <button\n onClick={\n copyState === 'NoCopy'\n ? () => {\n navigator.clipboard.writeText(superjson.stringify(value)).then(\n () => {\n setCopyState('SuccessCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n (err) => {\n console.error('Failed to copy: ', err)\n setCopyState('ErrorCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n )\n }\n : undefined\n }\n style={{\n cursor: 'pointer',\n color: 'inherit',\n font: 'inherit',\n outline: 'inherit',\n background: 'transparent',\n border: 'none',\n padding: 0,\n }}\n >\n {copyState === 'NoCopy' ? (\n <Copier />\n ) : copyState === 'SuccessCopy' ? (\n <CopiedCopier />\n ) : (\n <ErrorCopier />\n )}\n </button>\n )\n}\n\nexport const Value = styled('span', (_props, theme) => ({\n color: theme.danger,\n}))\n\nexport const SubEntries = styled('div', {\n marginLeft: '.1em',\n paddingLeft: '1em',\n borderLeft: '2px solid rgba(0,0,0,.15)',\n})\n\nexport const Info = styled('span', {\n color: 'grey',\n fontSize: '.7em',\n})\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n <span\n style={{\n display: 'inline-block',\n transition: 'all .1s ease',\n transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,\n ...style,\n }}\n >\n ▶\n </span>\n)\n\nconst Copier = () => (\n <span\n aria-label=\"Copy object to clipboard\"\n title=\"Copy object to clipboard\"\n style={{\n paddingLeft: '1em',\n }}\n >\n <svg height=\"12\" viewBox=\"0 0 16 12\" width=\"10\">\n <path\n fill=\"currentColor\"\n d=\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z\"\n ></path>\n <path\n fill=\"currentColor\"\n d=\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z\"\n ></path>\n </svg>\n </span>\n)\n\nconst ErrorCopier = () => (\n <span\n aria-label=\"Failed copying to clipboard\"\n title=\"Failed copying to clipboard\"\n style={{\n paddingLeft: '1em',\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <svg height=\"12\" viewBox=\"0 0 16 12\" width=\"10\" display=\"block\">\n <path\n fill=\"red\"\n d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\"\n ></path>\n </svg>\n <span\n style={{\n color: 'red',\n fontSize: '12px',\n paddingLeft: '4px',\n position: 'relative',\n top: '2px',\n }}\n >\n See console\n </span>\n </span>\n)\n\nconst CopiedCopier = () => (\n <span\n aria-label=\"Object copied to clipboard\"\n title=\"Object copied to clipboard\"\n style={{\n paddingLeft: '1em',\n display: 'inline-block',\n verticalAlign: 'middle',\n }}\n >\n <svg height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" display=\"block\">\n <path\n fill=\"green\"\n d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\"\n ></path>\n </svg>\n </span>\n)\n\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: (entry: Entry) => JSX.Element\n label?: string\n value: unknown\n subEntries: Entry[]\n subEntryPages: Entry[][]\n type: string\n expanded: boolean\n copyable: boolean\n toggleExpanded: () => void\n pageSize: number\n}\n\n/**\n * Chunk elements in the array by size\n *\n * when the array cannot be chunked evenly by size, the last chunk will be\n * filled with the remaining elements\n *\n * @example\n * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]\n */\nexport function chunkArray<T>(array: T[], size: number): T[][] {\n if (size < 1) return []\n let i = 0\n const result: T[][] = []\n while (i < array.length) {\n result.push(array.slice(i, i + size))\n i = i + size\n }\n return result\n}\n\ntype Renderer = (props: RendererProps) => JSX.Element\n\nexport const DefaultRenderer: Renderer = ({\n handleEntry,\n label,\n value,\n subEntries = [],\n subEntryPages = [],\n type,\n expanded = false,\n copyable = false,\n toggleExpanded,\n pageSize,\n}) => {\n const [expandedPages, setExpandedPages] = React.useState<number[]>([])\n\n return (\n <Entry key={label}>\n {subEntryPages.length ? (\n <>\n <ExpandButton onClick={() => toggleExpanded()}>\n <Expander expanded={expanded} /> {label}{' '}\n <Info>\n {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n </Info>\n </ExpandButton>\n {copyable ? <CopyButton value={value} /> : null}\n {expanded ? (\n subEntryPages.length === 1 ? (\n <SubEntries>{subEntries.map(handleEntry)}</SubEntries>\n ) : (\n <SubEntries>\n {subEntryPages.map((entries, index) => (\n <div key={index}>\n <Entry>\n <LabelButton\n onClick={() =>\n setExpandedPages((old) =>\n old.includes(index)\n ? old.filter((d) => d !== index)\n : [...old, index],\n )\n }\n >\n <Expander expanded={expanded} /> [{index * pageSize} ...{' '}\n {index * pageSize + pageSize - 1}]\n </LabelButton>\n {expandedPages.includes(index) ? (\n <SubEntries>{entries.map(handleEntry)}</SubEntries>\n ) : null}\n </Entry>\n </div>\n ))}\n </SubEntries>\n )\n ) : null}\n </>\n ) : (\n <>\n <Label>{label}:</Label> <Value>{displayValue(value)}</Value>\n </>\n )}\n </Entry>\n )\n}\n\ntype ExplorerProps = Partial<RendererProps> & {\n renderer?: Renderer\n defaultExpanded?: true | Record<string, boolean>\n copyable?: boolean\n}\n\ntype Property = {\n defaultExpanded?: boolean | Record<string, boolean>\n label: string\n value: unknown\n}\n\nfunction isIterable(x: any): x is Iterable<unknown> {\n return Symbol.iterator in x\n}\n\nexport default function Explorer({\n value,\n defaultExpanded,\n renderer = DefaultRenderer,\n pageSize = 100,\n copyable = false,\n ...rest\n}: ExplorerProps) {\n const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))\n const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])\n\n let type: string = typeof value\n let subEntries: Property[] = []\n\n const makeProperty = (sub: { label: string; value: unknown }): Property => {\n const subDefaultExpanded =\n defaultExpanded === true\n ? { [sub.label]: true }\n : defaultExpanded?.[sub.label]\n return {\n ...sub,\n defaultExpanded: subDefaultExpanded,\n }\n }\n\n if (Array.isArray(value)) {\n type = 'array'\n subEntries = value.map((d, i) =>\n makeProperty({\n label: i.toString(),\n value: d,\n }),\n )\n } else if (\n value !== null &&\n typeof value === 'object' &&\n isIterable(value) &&\n typeof value[Symbol.iterator] === 'function'\n ) {\n type = 'Iterable'\n subEntries = Array.from(value, (val, i) =>\n makeProperty({\n label: i.toString(),\n value: val,\n }),\n )\n } else if (typeof value === 'object' && value !== null) {\n type = 'object'\n subEntries = Object.entries(value).map(([key, val]) =>\n makeProperty({\n label: key,\n value: val,\n }),\n )\n }\n\n const subEntryPages = chunkArray(subEntries, pageSize)\n\n return renderer({\n handleEntry: (entry) => (\n <Explorer\n key={entry.label}\n value={value}\n renderer={renderer}\n copyable={copyable}\n {...rest}\n {...entry}\n />\n ),\n type,\n subEntries,\n subEntryPages,\n value,\n expanded,\n copyable,\n toggleExpanded,\n pageSize,\n ...rest,\n })\n}\n"],"names":["fontFamily","fontSize","lineHeight","outline","wordBreak","color","cursor","font","background","border","padding","value","navigator","setTimeout","console","marginLeft","paddingLeft","borderLeft","style","display","transition","transform","alignItems","position","top","verticalAlign","result","subEntries","subEntryPages","expanded","copyable","pageSize","renderer","defaultExpanded","type","label","handleEntry"],"mappings":";;;;;;;AAOEA;AACAC;AACAC;AACAC;AACAC;AALiC;;AASjCC;AADkC;;AAKlCC;AACAD;AAF0C;;AAM1CC;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AAP2C;AAYtC;AAAsBC;AAAF;;;AAKrB;AAGQC;;AAGIC;;;;AAKAC;;AAEAD;;;;AAKL;AAGP;AACEP;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AAPK;AAtBT;AAyCH;AAEM;;AAAiD;;AAKtDK;AACAC;AACAC;AAHsC;;AAOtCZ;AACAJ;AAFiC;AAU5B;;AAA8BiB;AAAZ;AAErB;AACEC;AACAC;AACAC;;AAHK;AADT;;AAYF;AAEI;AACA;AACA;AACEL;AADK;AAHT;AAOO;AAAY;AAAoB;AAArC;AAEI;AACA;AAFF;AAKE;AACA;AAFF;;AAQN;AAEI;AACA;AACA;AACEA;AACAG;AACAG;AAHK;AAHT;AASO;AAAY;AAAoB;AAAW;AAAhD;AAEI;AACA;AAFF;AAMA;AACEjB;AACAJ;AACAe;AACAO;AACAC;AALK;AADT;;AAcJ;AAEI;AACA;AACA;AACER;AACAG;AACAM;AAHK;AAHT;AASO;AAAY;AAAoB;AAAW;AAAhD;AAEI;AACA;AAFF;;AAyBN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACL;;;;AAGA;AACEC;;AAED;;AACD;AACD;AAIM;;;;AAILC;AACAC;;AAEAC;AACAC;;AAEAC;AAVwC;;AAcxC;AACS;AAAP;;AAGM;AACY;AAAV;AAMsB;AAAZ;AAOC;AAAL;AAGM;AADF;AASY;;AAoBjC;;AAcD;AACE;AACD;;AAEc;;;AAGbC;AACAD;AACAD;;AAL+B;AAQ/B;AACA;;;;;AAME;;;;AAMEG;;;;AAIJ;AACEC;;AAGIC;AACAxB;AAFW;;AAWfuB;AACAP;AAEIQ;AACAxB;AAFW;;AAMfuB;AACAP;AAEIQ;AACAxB;AAFW;AAKhB;;AAED;AAEA;AACEyB;;AAGI;AACA;AACA;;;;;;;;;;;AANU;AAqBjB;;"}
|
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
|
+
|
|
6
|
+
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var SuperJSON = require('superjson');
|
|
9
|
+
var utils = require('./utils.js');
|
|
10
|
+
|
|
11
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
|
+
|
|
13
|
+
function _interopNamespace(e) {
|
|
14
|
+
if (e && e.__esModule) return e;
|
|
15
|
+
var n = Object.create(null);
|
|
16
|
+
if (e) {
|
|
17
|
+
Object.keys(e).forEach(function (k) {
|
|
18
|
+
if (k !== 'default') {
|
|
19
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
20
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function () { return e[k]; }
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
n["default"] = e;
|
|
28
|
+
return Object.freeze(n);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
32
|
+
var SuperJSON__default = /*#__PURE__*/_interopDefaultLegacy(SuperJSON);
|
|
33
|
+
|
|
34
|
+
const Entry = utils.styled('div', {
|
|
35
|
+
fontFamily: 'Menlo, monospace',
|
|
36
|
+
fontSize: '1em',
|
|
37
|
+
lineHeight: '1.7',
|
|
38
|
+
outline: 'none',
|
|
39
|
+
wordBreak: 'break-word'
|
|
40
|
+
});
|
|
41
|
+
const Label = utils.styled('span', {
|
|
42
|
+
color: 'white'
|
|
43
|
+
});
|
|
44
|
+
const LabelButton = utils.styled('button', {
|
|
45
|
+
cursor: 'pointer',
|
|
46
|
+
color: 'white'
|
|
47
|
+
});
|
|
48
|
+
const ExpandButton = utils.styled('button', {
|
|
49
|
+
cursor: 'pointer',
|
|
50
|
+
color: 'inherit',
|
|
51
|
+
font: 'inherit',
|
|
52
|
+
outline: 'inherit',
|
|
53
|
+
background: 'transparent',
|
|
54
|
+
border: 'none',
|
|
55
|
+
padding: 0
|
|
56
|
+
});
|
|
57
|
+
const CopyButton = ({
|
|
58
|
+
value
|
|
59
|
+
}) => {
|
|
60
|
+
const [copyState, setCopyState] = React__namespace.useState('NoCopy');
|
|
61
|
+
return /*#__PURE__*/React__namespace.createElement("button", {
|
|
62
|
+
onClick: copyState === 'NoCopy' ? () => {
|
|
63
|
+
navigator.clipboard.writeText(SuperJSON__default["default"].stringify(value)).then(() => {
|
|
64
|
+
setCopyState('SuccessCopy');
|
|
65
|
+
setTimeout(() => {
|
|
66
|
+
setCopyState('NoCopy');
|
|
67
|
+
}, 1500);
|
|
68
|
+
}, err => {
|
|
69
|
+
console.error('Failed to copy: ', err);
|
|
70
|
+
setCopyState('ErrorCopy');
|
|
71
|
+
setTimeout(() => {
|
|
72
|
+
setCopyState('NoCopy');
|
|
73
|
+
}, 1500);
|
|
74
|
+
});
|
|
75
|
+
} : undefined,
|
|
76
|
+
style: {
|
|
77
|
+
cursor: 'pointer',
|
|
78
|
+
color: 'inherit',
|
|
79
|
+
font: 'inherit',
|
|
80
|
+
outline: 'inherit',
|
|
81
|
+
background: 'transparent',
|
|
82
|
+
border: 'none',
|
|
83
|
+
padding: 0
|
|
84
|
+
}
|
|
85
|
+
}, copyState === 'NoCopy' ? /*#__PURE__*/React__namespace.createElement(Copier, null) : copyState === 'SuccessCopy' ? /*#__PURE__*/React__namespace.createElement(CopiedCopier, null) : /*#__PURE__*/React__namespace.createElement(ErrorCopier, null));
|
|
86
|
+
};
|
|
87
|
+
const Value = utils.styled('span', (_props, theme) => ({
|
|
88
|
+
color: theme.danger
|
|
89
|
+
}));
|
|
90
|
+
const SubEntries = utils.styled('div', {
|
|
91
|
+
marginLeft: '.1em',
|
|
92
|
+
paddingLeft: '1em',
|
|
93
|
+
borderLeft: '2px solid rgba(0,0,0,.15)'
|
|
94
|
+
});
|
|
95
|
+
const Info = utils.styled('span', {
|
|
96
|
+
color: 'grey',
|
|
97
|
+
fontSize: '.7em'
|
|
98
|
+
});
|
|
99
|
+
const Expander = ({
|
|
100
|
+
expanded,
|
|
101
|
+
style = {}
|
|
102
|
+
}) => /*#__PURE__*/React__namespace.createElement("span", {
|
|
103
|
+
style: {
|
|
104
|
+
display: 'inline-block',
|
|
105
|
+
transition: 'all .1s ease',
|
|
106
|
+
transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
|
|
107
|
+
...style
|
|
108
|
+
}
|
|
109
|
+
}, "\u25B6");
|
|
110
|
+
|
|
111
|
+
const Copier = () => /*#__PURE__*/React__namespace.createElement("span", {
|
|
112
|
+
"aria-label": "Copy object to clipboard",
|
|
113
|
+
title: "Copy object to clipboard",
|
|
114
|
+
style: {
|
|
115
|
+
paddingLeft: '1em'
|
|
116
|
+
}
|
|
117
|
+
}, /*#__PURE__*/React__namespace.createElement("svg", {
|
|
118
|
+
height: "12",
|
|
119
|
+
viewBox: "0 0 16 12",
|
|
120
|
+
width: "10"
|
|
121
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
122
|
+
fill: "currentColor",
|
|
123
|
+
d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
|
|
124
|
+
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
125
|
+
fill: "currentColor",
|
|
126
|
+
d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
|
|
127
|
+
})));
|
|
128
|
+
|
|
129
|
+
const ErrorCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
|
|
130
|
+
"aria-label": "Failed copying to clipboard",
|
|
131
|
+
title: "Failed copying to clipboard",
|
|
132
|
+
style: {
|
|
133
|
+
paddingLeft: '1em',
|
|
134
|
+
display: 'flex',
|
|
135
|
+
alignItems: 'center'
|
|
136
|
+
}
|
|
137
|
+
}, /*#__PURE__*/React__namespace.createElement("svg", {
|
|
138
|
+
height: "12",
|
|
139
|
+
viewBox: "0 0 16 12",
|
|
140
|
+
width: "10",
|
|
141
|
+
display: "block"
|
|
142
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
143
|
+
fill: "red",
|
|
144
|
+
d: "M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
|
|
145
|
+
})), /*#__PURE__*/React__namespace.createElement("span", {
|
|
146
|
+
style: {
|
|
147
|
+
color: 'red',
|
|
148
|
+
fontSize: '12px',
|
|
149
|
+
paddingLeft: '4px',
|
|
150
|
+
position: 'relative',
|
|
151
|
+
top: '2px'
|
|
152
|
+
}
|
|
153
|
+
}, "See console"));
|
|
154
|
+
|
|
155
|
+
const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
|
|
156
|
+
"aria-label": "Object copied to clipboard",
|
|
157
|
+
title: "Object copied to clipboard",
|
|
158
|
+
style: {
|
|
159
|
+
paddingLeft: '1em',
|
|
160
|
+
display: 'inline-block',
|
|
161
|
+
verticalAlign: 'middle'
|
|
162
|
+
}
|
|
163
|
+
}, /*#__PURE__*/React__namespace.createElement("svg", {
|
|
164
|
+
height: "16",
|
|
165
|
+
viewBox: "0 0 16 16",
|
|
166
|
+
width: "16",
|
|
167
|
+
display: "block"
|
|
168
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
169
|
+
fill: "green",
|
|
170
|
+
d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
|
171
|
+
})));
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* Chunk elements in the array by size
|
|
175
|
+
*
|
|
176
|
+
* when the array cannot be chunked evenly by size, the last chunk will be
|
|
177
|
+
* filled with the remaining elements
|
|
178
|
+
*
|
|
179
|
+
* @example
|
|
180
|
+
* chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
|
|
181
|
+
*/
|
|
182
|
+
function chunkArray(array, size) {
|
|
183
|
+
if (size < 1) return [];
|
|
184
|
+
let i = 0;
|
|
185
|
+
const result = [];
|
|
186
|
+
|
|
187
|
+
while (i < array.length) {
|
|
188
|
+
result.push(array.slice(i, i + size));
|
|
189
|
+
i = i + size;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
return result;
|
|
193
|
+
}
|
|
194
|
+
const DefaultRenderer = ({
|
|
195
|
+
handleEntry,
|
|
196
|
+
label,
|
|
197
|
+
value,
|
|
198
|
+
subEntries = [],
|
|
199
|
+
subEntryPages = [],
|
|
200
|
+
type,
|
|
201
|
+
expanded = false,
|
|
202
|
+
copyable = false,
|
|
203
|
+
toggleExpanded,
|
|
204
|
+
pageSize
|
|
205
|
+
}) => {
|
|
206
|
+
const [expandedPages, setExpandedPages] = React__namespace.useState([]);
|
|
207
|
+
return /*#__PURE__*/React__namespace.createElement(Entry, {
|
|
208
|
+
key: label
|
|
209
|
+
}, subEntryPages.length ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ExpandButton, {
|
|
210
|
+
onClick: () => toggleExpanded()
|
|
211
|
+
}, /*#__PURE__*/React__namespace.createElement(Expander, {
|
|
212
|
+
expanded: expanded
|
|
213
|
+
}), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
|
|
214
|
+
value: value
|
|
215
|
+
}) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
|
|
216
|
+
key: index
|
|
217
|
+
}, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
|
|
218
|
+
onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
|
|
219
|
+
}, /*#__PURE__*/React__namespace.createElement(Expander, {
|
|
220
|
+
expanded: expanded
|
|
221
|
+
}), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, entries.map(handleEntry)) : null)))) : null) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React__namespace.createElement(Value, null, utils.displayValue(value))));
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
function isIterable(x) {
|
|
225
|
+
return Symbol.iterator in x;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
function Explorer({
|
|
229
|
+
value,
|
|
230
|
+
defaultExpanded,
|
|
231
|
+
renderer = DefaultRenderer,
|
|
232
|
+
pageSize = 100,
|
|
233
|
+
copyable = false,
|
|
234
|
+
...rest
|
|
235
|
+
}) {
|
|
236
|
+
const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
|
|
237
|
+
const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
|
|
238
|
+
let type = typeof value;
|
|
239
|
+
let subEntries = [];
|
|
240
|
+
|
|
241
|
+
const makeProperty = sub => {
|
|
242
|
+
const subDefaultExpanded = defaultExpanded === true ? {
|
|
243
|
+
[sub.label]: true
|
|
244
|
+
} : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
|
|
245
|
+
return { ...sub,
|
|
246
|
+
defaultExpanded: subDefaultExpanded
|
|
247
|
+
};
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
if (Array.isArray(value)) {
|
|
251
|
+
type = 'array';
|
|
252
|
+
subEntries = value.map((d, i) => makeProperty({
|
|
253
|
+
label: i.toString(),
|
|
254
|
+
value: d
|
|
255
|
+
}));
|
|
256
|
+
} else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
|
|
257
|
+
type = 'Iterable';
|
|
258
|
+
subEntries = Array.from(value, (val, i) => makeProperty({
|
|
259
|
+
label: i.toString(),
|
|
260
|
+
value: val
|
|
261
|
+
}));
|
|
262
|
+
} else if (typeof value === 'object' && value !== null) {
|
|
263
|
+
type = 'object';
|
|
264
|
+
subEntries = Object.entries(value).map(([key, val]) => makeProperty({
|
|
265
|
+
label: key,
|
|
266
|
+
value: val
|
|
267
|
+
}));
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
const subEntryPages = chunkArray(subEntries, pageSize);
|
|
271
|
+
return renderer({
|
|
272
|
+
handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers["extends"]({
|
|
273
|
+
key: entry.label,
|
|
274
|
+
value: value,
|
|
275
|
+
renderer: renderer,
|
|
276
|
+
copyable: copyable
|
|
277
|
+
}, rest, entry)),
|
|
278
|
+
type,
|
|
279
|
+
subEntries,
|
|
280
|
+
subEntryPages,
|
|
281
|
+
value,
|
|
282
|
+
expanded,
|
|
283
|
+
copyable,
|
|
284
|
+
toggleExpanded,
|
|
285
|
+
pageSize,
|
|
286
|
+
...rest
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
exports.CopyButton = CopyButton;
|
|
291
|
+
exports.DefaultRenderer = DefaultRenderer;
|
|
292
|
+
exports.Entry = Entry;
|
|
293
|
+
exports.ExpandButton = ExpandButton;
|
|
294
|
+
exports.Expander = Expander;
|
|
295
|
+
exports.Info = Info;
|
|
296
|
+
exports.Label = Label;
|
|
297
|
+
exports.LabelButton = LabelButton;
|
|
298
|
+
exports.SubEntries = SubEntries;
|
|
299
|
+
exports.Value = Value;
|
|
300
|
+
exports.chunkArray = chunkArray;
|
|
301
|
+
exports["default"] = Explorer;
|
|
302
|
+
//# sourceMappingURL=Explorer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport superjson from 'superjson'\nimport { displayValue, styled } from './utils'\n\nexport const Entry = styled('div', {\n fontFamily: 'Menlo, monospace',\n fontSize: '1em',\n lineHeight: '1.7',\n outline: 'none',\n wordBreak: 'break-word',\n})\n\nexport const Label = styled('span', {\n color: 'white',\n})\n\nexport const LabelButton = styled('button', {\n cursor: 'pointer',\n color: 'white',\n})\n\nexport const ExpandButton = styled('button', {\n cursor: 'pointer',\n color: 'inherit',\n font: 'inherit',\n outline: 'inherit',\n background: 'transparent',\n border: 'none',\n padding: 0,\n})\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nexport const CopyButton = ({ value }: { value: unknown }) => {\n const [copyState, setCopyState] = React.useState<CopyState>('NoCopy')\n\n return (\n <button\n onClick={\n copyState === 'NoCopy'\n ? () => {\n navigator.clipboard.writeText(superjson.stringify(value)).then(\n () => {\n setCopyState('SuccessCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n (err) => {\n console.error('Failed to copy: ', err)\n setCopyState('ErrorCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n )\n }\n : undefined\n }\n style={{\n cursor: 'pointer',\n color: 'inherit',\n font: 'inherit',\n outline: 'inherit',\n background: 'transparent',\n border: 'none',\n padding: 0,\n }}\n >\n {copyState === 'NoCopy' ? (\n <Copier />\n ) : copyState === 'SuccessCopy' ? (\n <CopiedCopier />\n ) : (\n <ErrorCopier />\n )}\n </button>\n )\n}\n\nexport const Value = styled('span', (_props, theme) => ({\n color: theme.danger,\n}))\n\nexport const SubEntries = styled('div', {\n marginLeft: '.1em',\n paddingLeft: '1em',\n borderLeft: '2px solid rgba(0,0,0,.15)',\n})\n\nexport const Info = styled('span', {\n color: 'grey',\n fontSize: '.7em',\n})\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n <span\n style={{\n display: 'inline-block',\n transition: 'all .1s ease',\n transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,\n ...style,\n }}\n >\n ▶\n </span>\n)\n\nconst Copier = () => (\n <span\n aria-label=\"Copy object to clipboard\"\n title=\"Copy object to clipboard\"\n style={{\n paddingLeft: '1em',\n }}\n >\n <svg height=\"12\" viewBox=\"0 0 16 12\" width=\"10\">\n <path\n fill=\"currentColor\"\n d=\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z\"\n ></path>\n <path\n fill=\"currentColor\"\n d=\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z\"\n ></path>\n </svg>\n </span>\n)\n\nconst ErrorCopier = () => (\n <span\n aria-label=\"Failed copying to clipboard\"\n title=\"Failed copying to clipboard\"\n style={{\n paddingLeft: '1em',\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <svg height=\"12\" viewBox=\"0 0 16 12\" width=\"10\" display=\"block\">\n <path\n fill=\"red\"\n d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\"\n ></path>\n </svg>\n <span\n style={{\n color: 'red',\n fontSize: '12px',\n paddingLeft: '4px',\n position: 'relative',\n top: '2px',\n }}\n >\n See console\n </span>\n </span>\n)\n\nconst CopiedCopier = () => (\n <span\n aria-label=\"Object copied to clipboard\"\n title=\"Object copied to clipboard\"\n style={{\n paddingLeft: '1em',\n display: 'inline-block',\n verticalAlign: 'middle',\n }}\n >\n <svg height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" display=\"block\">\n <path\n fill=\"green\"\n d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\"\n ></path>\n </svg>\n </span>\n)\n\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: (entry: Entry) => JSX.Element\n label?: string\n value: unknown\n subEntries: Entry[]\n subEntryPages: Entry[][]\n type: string\n expanded: boolean\n copyable: boolean\n toggleExpanded: () => void\n pageSize: number\n}\n\n/**\n * Chunk elements in the array by size\n *\n * when the array cannot be chunked evenly by size, the last chunk will be\n * filled with the remaining elements\n *\n * @example\n * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]\n */\nexport function chunkArray<T>(array: T[], size: number): T[][] {\n if (size < 1) return []\n let i = 0\n const result: T[][] = []\n while (i < array.length) {\n result.push(array.slice(i, i + size))\n i = i + size\n }\n return result\n}\n\ntype Renderer = (props: RendererProps) => JSX.Element\n\nexport const DefaultRenderer: Renderer = ({\n handleEntry,\n label,\n value,\n subEntries = [],\n subEntryPages = [],\n type,\n expanded = false,\n copyable = false,\n toggleExpanded,\n pageSize,\n}) => {\n const [expandedPages, setExpandedPages] = React.useState<number[]>([])\n\n return (\n <Entry key={label}>\n {subEntryPages.length ? (\n <>\n <ExpandButton onClick={() => toggleExpanded()}>\n <Expander expanded={expanded} /> {label}{' '}\n <Info>\n {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n </Info>\n </ExpandButton>\n {copyable ? <CopyButton value={value} /> : null}\n {expanded ? (\n subEntryPages.length === 1 ? (\n <SubEntries>{subEntries.map(handleEntry)}</SubEntries>\n ) : (\n <SubEntries>\n {subEntryPages.map((entries, index) => (\n <div key={index}>\n <Entry>\n <LabelButton\n onClick={() =>\n setExpandedPages((old) =>\n old.includes(index)\n ? old.filter((d) => d !== index)\n : [...old, index],\n )\n }\n >\n <Expander expanded={expanded} /> [{index * pageSize} ...{' '}\n {index * pageSize + pageSize - 1}]\n </LabelButton>\n {expandedPages.includes(index) ? (\n <SubEntries>{entries.map(handleEntry)}</SubEntries>\n ) : null}\n </Entry>\n </div>\n ))}\n </SubEntries>\n )\n ) : null}\n </>\n ) : (\n <>\n <Label>{label}:</Label> <Value>{displayValue(value)}</Value>\n </>\n )}\n </Entry>\n )\n}\n\ntype ExplorerProps = Partial<RendererProps> & {\n renderer?: Renderer\n defaultExpanded?: true | Record<string, boolean>\n copyable?: boolean\n}\n\ntype Property = {\n defaultExpanded?: boolean | Record<string, boolean>\n label: string\n value: unknown\n}\n\nfunction isIterable(x: any): x is Iterable<unknown> {\n return Symbol.iterator in x\n}\n\nexport default function Explorer({\n value,\n defaultExpanded,\n renderer = DefaultRenderer,\n pageSize = 100,\n copyable = false,\n ...rest\n}: ExplorerProps) {\n const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))\n const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])\n\n let type: string = typeof value\n let subEntries: Property[] = []\n\n const makeProperty = (sub: { label: string; value: unknown }): Property => {\n const subDefaultExpanded =\n defaultExpanded === true\n ? { [sub.label]: true }\n : defaultExpanded?.[sub.label]\n return {\n ...sub,\n defaultExpanded: subDefaultExpanded,\n }\n }\n\n if (Array.isArray(value)) {\n type = 'array'\n subEntries = value.map((d, i) =>\n makeProperty({\n label: i.toString(),\n value: d,\n }),\n )\n } else if (\n value !== null &&\n typeof value === 'object' &&\n isIterable(value) &&\n typeof value[Symbol.iterator] === 'function'\n ) {\n type = 'Iterable'\n subEntries = Array.from(value, (val, i) =>\n makeProperty({\n label: i.toString(),\n value: val,\n }),\n )\n } else if (typeof value === 'object' && value !== null) {\n type = 'object'\n subEntries = Object.entries(value).map(([key, val]) =>\n makeProperty({\n label: key,\n value: val,\n }),\n )\n }\n\n const subEntryPages = chunkArray(subEntries, pageSize)\n\n return renderer({\n handleEntry: (entry) => (\n <Explorer\n key={entry.label}\n value={value}\n renderer={renderer}\n copyable={copyable}\n {...rest}\n {...entry}\n />\n ),\n type,\n subEntries,\n subEntryPages,\n value,\n expanded,\n copyable,\n toggleExpanded,\n pageSize,\n ...rest,\n })\n}\n"],"names":["fontFamily","fontSize","lineHeight","outline","wordBreak","color","cursor","font","background","border","padding","value","navigator","setTimeout","console","marginLeft","paddingLeft","borderLeft","style","display","transition","transform","alignItems","position","top","verticalAlign","result","subEntries","subEntryPages","expanded","copyable","pageSize","renderer","defaultExpanded","type","label","handleEntry"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOEA;AACAC;AACAC;AACAC;AACAC;AALiC;;AASjCC;AADkC;;AAKlCC;AACAD;AAF0C;;AAM1CC;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AAP2C;AAYtC;AAAsBC;AAAF;;;AAKrB;AAGQC;;AAGIC;;;;AAKAC;;AAEAD;;;;AAKL;AAGP;AACEP;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AAPK;AAtBT;AAyCH;AAEM;;AAAiD;;AAKtDK;AACAC;AACAC;AAHsC;;AAOtCZ;AACAJ;AAFiC;AAU5B;;AAA8BiB;AAAZ;AAErB;AACEC;AACAC;AACAC;;AAHK;AADT;;AAYF;AAEI;AACA;AACA;AACEL;AADK;AAHT;AAOO;AAAY;AAAoB;AAArC;AAEI;AACA;AAFF;AAKE;AACA;AAFF;;AAQN;AAEI;AACA;AACA;AACEA;AACAG;AACAG;AAHK;AAHT;AASO;AAAY;AAAoB;AAAW;AAAhD;AAEI;AACA;AAFF;AAMA;AACEjB;AACAJ;AACAe;AACAO;AACAC;AALK;AADT;;AAcJ;AAEI;AACA;AACA;AACER;AACAG;AACAM;AAHK;AAHT;AASO;AAAY;AAAoB;AAAW;AAAhD;AAEI;AACA;AAFF;;AAyBN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACL;;;;AAGA;AACEC;;AAED;;AACD;AACD;AAIM;;;;AAILC;AACAC;;AAEAC;AACAC;;AAEAC;AAVwC;;AAcxC;AACS;AAAP;;AAGM;AACY;AAAV;AAMsB;AAAZ;AAOC;AAAL;AAGM;AADF;AASY;;AAoBjC;;AAcD;AACE;AACD;;AAEc;;;AAGbC;AACAD;AACAD;;AAL+B;AAQ/B;AACA;;;;;AAME;;;;AAMEG;;;;AAIJ;AACEC;;AAGIC;AACAxB;AAFW;;AAWfuB;AACAP;AAEIQ;AACAxB;AAFW;;AAMfuB;AACAP;AAEIQ;AACAxB;AAFW;AAKhB;;AAED;AAEA;AACEyB;;AAGI;AACA;AACA;;;;;;;;;;;AANU;AAqBjB;;;;;;;;;;;;;"}
|