@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.
Files changed (94) hide show
  1. package/package.json +4 -11
  2. package/build/lib/Explorer.d.ts.map +0 -1
  3. package/build/lib/Explorer.esm.js +0 -264
  4. package/build/lib/Explorer.esm.js.map +0 -1
  5. package/build/lib/Explorer.js +0 -302
  6. package/build/lib/Explorer.js.map +0 -1
  7. package/build/lib/Explorer.mjs +0 -264
  8. package/build/lib/Explorer.mjs.map +0 -1
  9. package/build/lib/Logo.d.ts.map +0 -1
  10. package/build/lib/Logo.esm.js +0 -32
  11. package/build/lib/Logo.esm.js.map +0 -1
  12. package/build/lib/Logo.js +0 -56
  13. package/build/lib/Logo.js.map +0 -1
  14. package/build/lib/Logo.mjs +0 -32
  15. package/build/lib/Logo.mjs.map +0 -1
  16. package/build/lib/__tests__/Explorer.test.d.ts.map +0 -1
  17. package/build/lib/__tests__/devtools.test.d.ts.map +0 -1
  18. package/build/lib/__tests__/utils.d.ts.map +0 -1
  19. package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -19
  20. package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
  21. package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -23
  22. package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
  23. package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -19
  24. package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
  25. package/build/lib/devtools.d.ts.map +0 -1
  26. package/build/lib/devtools.esm.js +0 -925
  27. package/build/lib/devtools.esm.js.map +0 -1
  28. package/build/lib/devtools.js +0 -949
  29. package/build/lib/devtools.js.map +0 -1
  30. package/build/lib/devtools.mjs +0 -925
  31. package/build/lib/devtools.mjs.map +0 -1
  32. package/build/lib/index.d.ts.map +0 -1
  33. package/build/lib/index.esm.js +0 -12
  34. package/build/lib/index.esm.js.map +0 -1
  35. package/build/lib/index.js +0 -17
  36. package/build/lib/index.js.map +0 -1
  37. package/build/lib/index.mjs +0 -12
  38. package/build/lib/index.mjs.map +0 -1
  39. package/build/lib/index.prod.d.ts +0 -4
  40. package/build/lib/index.prod.esm.js +0 -1604
  41. package/build/lib/index.prod.esm.js.map +0 -1
  42. package/build/lib/index.prod.js +0 -1631
  43. package/build/lib/index.prod.js.map +0 -1
  44. package/build/lib/index.prod.mjs +0 -1604
  45. package/build/lib/index.prod.mjs.map +0 -1
  46. package/build/lib/noop.d.ts.map +0 -1
  47. package/build/lib/screenreader.d.ts.map +0 -1
  48. package/build/lib/screenreader.esm.js +0 -17
  49. package/build/lib/screenreader.esm.js.map +0 -1
  50. package/build/lib/screenreader.js +0 -41
  51. package/build/lib/screenreader.js.map +0 -1
  52. package/build/lib/screenreader.mjs +0 -17
  53. package/build/lib/screenreader.mjs.map +0 -1
  54. package/build/lib/styledComponents.d.ts.map +0 -1
  55. package/build/lib/styledComponents.esm.js +0 -94
  56. package/build/lib/styledComponents.esm.js.map +0 -1
  57. package/build/lib/styledComponents.js +0 -105
  58. package/build/lib/styledComponents.js.map +0 -1
  59. package/build/lib/styledComponents.mjs +0 -94
  60. package/build/lib/styledComponents.mjs.map +0 -1
  61. package/build/lib/theme.d.ts.map +0 -1
  62. package/build/lib/theme.esm.js +0 -33
  63. package/build/lib/theme.esm.js.map +0 -1
  64. package/build/lib/theme.js +0 -59
  65. package/build/lib/theme.js.map +0 -1
  66. package/build/lib/theme.mjs +0 -33
  67. package/build/lib/theme.mjs.map +0 -1
  68. package/build/lib/useLocalStorage.d.ts.map +0 -1
  69. package/build/lib/useLocalStorage.esm.js +0 -47
  70. package/build/lib/useLocalStorage.esm.js.map +0 -1
  71. package/build/lib/useLocalStorage.js +0 -71
  72. package/build/lib/useLocalStorage.js.map +0 -1
  73. package/build/lib/useLocalStorage.mjs +0 -47
  74. package/build/lib/useLocalStorage.mjs.map +0 -1
  75. package/build/lib/useMediaQuery.d.ts.map +0 -1
  76. package/build/lib/useMediaQuery.esm.js +0 -36
  77. package/build/lib/useMediaQuery.esm.js.map +0 -1
  78. package/build/lib/useMediaQuery.js +0 -60
  79. package/build/lib/useMediaQuery.js.map +0 -1
  80. package/build/lib/useMediaQuery.mjs +0 -36
  81. package/build/lib/useMediaQuery.mjs.map +0 -1
  82. package/build/lib/useSyncExternalStore.d.ts.map +0 -1
  83. package/build/lib/useSyncExternalStore.native.d.ts.map +0 -1
  84. package/build/lib/utils.d.ts.map +0 -1
  85. package/build/lib/utils.esm.js +0 -186
  86. package/build/lib/utils.esm.js.map +0 -1
  87. package/build/lib/utils.js +0 -226
  88. package/build/lib/utils.js.map +0 -1
  89. package/build/lib/utils.mjs +0 -186
  90. package/build/lib/utils.mjs.map +0 -1
  91. package/build/umd/index.development.js +0 -3531
  92. package/build/umd/index.development.js.map +0 -1
  93. package/build/umd/index.production.js +0 -2
  94. 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.36.1",
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.36.1"
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.36.1"
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;;"}
@@ -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;;;;;;;;;;;;;"}