@tanstack/react-query-devtools 4.36.1 → 4.39.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/package.json +4 -11
- package/build/lib/Explorer.d.ts.map +0 -1
- package/build/lib/Explorer.esm.js +0 -264
- package/build/lib/Explorer.esm.js.map +0 -1
- package/build/lib/Explorer.js +0 -302
- package/build/lib/Explorer.js.map +0 -1
- package/build/lib/Explorer.mjs +0 -264
- package/build/lib/Explorer.mjs.map +0 -1
- package/build/lib/Logo.d.ts.map +0 -1
- package/build/lib/Logo.esm.js +0 -32
- package/build/lib/Logo.esm.js.map +0 -1
- package/build/lib/Logo.js +0 -56
- package/build/lib/Logo.js.map +0 -1
- package/build/lib/Logo.mjs +0 -32
- package/build/lib/Logo.mjs.map +0 -1
- package/build/lib/__tests__/Explorer.test.d.ts.map +0 -1
- package/build/lib/__tests__/devtools.test.d.ts.map +0 -1
- package/build/lib/__tests__/utils.d.ts.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -19
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -23
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -19
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
- package/build/lib/devtools.d.ts.map +0 -1
- package/build/lib/devtools.esm.js +0 -925
- package/build/lib/devtools.esm.js.map +0 -1
- package/build/lib/devtools.js +0 -949
- package/build/lib/devtools.js.map +0 -1
- package/build/lib/devtools.mjs +0 -925
- package/build/lib/devtools.mjs.map +0 -1
- package/build/lib/index.d.ts.map +0 -1
- package/build/lib/index.esm.js +0 -12
- package/build/lib/index.esm.js.map +0 -1
- package/build/lib/index.js +0 -17
- package/build/lib/index.js.map +0 -1
- package/build/lib/index.mjs +0 -12
- package/build/lib/index.mjs.map +0 -1
- package/build/lib/index.prod.d.ts +0 -4
- package/build/lib/index.prod.esm.js +0 -1604
- package/build/lib/index.prod.esm.js.map +0 -1
- package/build/lib/index.prod.js +0 -1631
- package/build/lib/index.prod.js.map +0 -1
- package/build/lib/index.prod.mjs +0 -1604
- package/build/lib/index.prod.mjs.map +0 -1
- package/build/lib/noop.d.ts.map +0 -1
- package/build/lib/screenreader.d.ts.map +0 -1
- package/build/lib/screenreader.esm.js +0 -17
- package/build/lib/screenreader.esm.js.map +0 -1
- package/build/lib/screenreader.js +0 -41
- package/build/lib/screenreader.js.map +0 -1
- package/build/lib/screenreader.mjs +0 -17
- package/build/lib/screenreader.mjs.map +0 -1
- package/build/lib/styledComponents.d.ts.map +0 -1
- package/build/lib/styledComponents.esm.js +0 -94
- package/build/lib/styledComponents.esm.js.map +0 -1
- package/build/lib/styledComponents.js +0 -105
- package/build/lib/styledComponents.js.map +0 -1
- package/build/lib/styledComponents.mjs +0 -94
- package/build/lib/styledComponents.mjs.map +0 -1
- package/build/lib/theme.d.ts.map +0 -1
- package/build/lib/theme.esm.js +0 -33
- package/build/lib/theme.esm.js.map +0 -1
- package/build/lib/theme.js +0 -59
- package/build/lib/theme.js.map +0 -1
- package/build/lib/theme.mjs +0 -33
- package/build/lib/theme.mjs.map +0 -1
- package/build/lib/useLocalStorage.d.ts.map +0 -1
- package/build/lib/useLocalStorage.esm.js +0 -47
- package/build/lib/useLocalStorage.esm.js.map +0 -1
- package/build/lib/useLocalStorage.js +0 -71
- package/build/lib/useLocalStorage.js.map +0 -1
- package/build/lib/useLocalStorage.mjs +0 -47
- package/build/lib/useLocalStorage.mjs.map +0 -1
- package/build/lib/useMediaQuery.d.ts.map +0 -1
- package/build/lib/useMediaQuery.esm.js +0 -36
- package/build/lib/useMediaQuery.esm.js.map +0 -1
- package/build/lib/useMediaQuery.js +0 -60
- package/build/lib/useMediaQuery.js.map +0 -1
- package/build/lib/useMediaQuery.mjs +0 -36
- package/build/lib/useMediaQuery.mjs.map +0 -1
- package/build/lib/useSyncExternalStore.d.ts.map +0 -1
- package/build/lib/useSyncExternalStore.native.d.ts.map +0 -1
- package/build/lib/utils.d.ts.map +0 -1
- package/build/lib/utils.esm.js +0 -186
- package/build/lib/utils.esm.js.map +0 -1
- package/build/lib/utils.js +0 -226
- package/build/lib/utils.js.map +0 -1
- package/build/lib/utils.mjs +0 -186
- package/build/lib/utils.mjs.map +0 -1
- package/build/umd/index.development.js +0 -3531
- package/build/umd/index.development.js.map +0 -1
- package/build/umd/index.production.js +0 -2
- package/build/umd/index.production.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-query-devtools",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.39.0",
|
|
4
4
|
"description": "Developer tools to interact with and visualize the TanStack/react-query cache",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"react-dom": "^18.2.0",
|
|
51
51
|
"react-dom-17": "npm:react-dom@^17.0.2",
|
|
52
52
|
"react-error-boundary": "^3.1.4",
|
|
53
|
-
"@tanstack/react-query": "4.
|
|
53
|
+
"@tanstack/react-query": "4.39.0"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@tanstack/match-sorter-utils": "^8.7.0",
|
|
@@ -60,14 +60,7 @@
|
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
62
62
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
63
|
-
"@tanstack/react-query": "^4.
|
|
63
|
+
"@tanstack/react-query": "^4.39.0"
|
|
64
64
|
},
|
|
65
|
-
"scripts": {
|
|
66
|
-
"clean": "rimraf ./build",
|
|
67
|
-
"test:eslint": "eslint --ext .ts,.tsx ./src",
|
|
68
|
-
"test:types": "tsc",
|
|
69
|
-
"test:lib": "jest --config ./jest.config.ts",
|
|
70
|
-
"test:lib:dev": "pnpm run test:lib --watch",
|
|
71
|
-
"build:types": "tsc --build && cp build/lib/index.d.ts build/lib/index.prod.d.ts"
|
|
72
|
-
}
|
|
65
|
+
"scripts": {}
|
|
73
66
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Explorer.d.ts","sourceRoot":"","sources":["../../src/Explorer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,eAAO,MAAM,KAAK,6GAMhB,CAAA;AAEF,eAAO,MAAM,KAAK,+GAEhB,CAAA;AAEF,eAAO,MAAM,WAAW,wOAGtB,CAAA;AAEF,eAAO,MAAM,YAAY,wOAQvB,CAAA;AAIF,eAAO,MAAM,UAAU;WAAwB,OAAO;iBA6CrD,CAAA;AAED,eAAO,MAAM,KAAK,+GAEf,CAAA;AAEH,eAAO,MAAM,UAAU,6GAIrB,CAAA;AAEF,eAAO,MAAM,IAAI,+GAGf,CAAA;AAEF,aAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,wBAA8B,aAAa,gBAW/D,CAAA;AAwED,aAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,aAAK,aAAa,GAAG;IACnB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,OAAO,CAAA;IACd,UAAU,EAAE,KAAK,EAAE,CAAA;IACnB,aAAa,EAAE,KAAK,EAAE,EAAE,CAAA;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,EAAE,EAAE,CAS7D;AAED,aAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAA;AAErD,eAAO,MAAM,eAAe,EAAE,QA+D7B,CAAA;AAED,aAAK,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG;IAC5C,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAYD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,eAAe,EACf,QAA0B,EAC1B,QAAc,EACd,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,aAAa,eAwEf"}
|
|
@@ -1,264 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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;;"}
|
package/build/lib/Explorer.js
DELETED
|
@@ -1,302 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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;;;;;;;;;;;;;"}
|