@tanstack/react-query-devtools 5.0.0-alpha.9 → 5.0.0-alpha.90

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 (145) hide show
  1. package/build/legacy/devtools-d8b99e07.d.ts +42 -0
  2. package/build/legacy/devtools.cjs +91 -0
  3. package/build/legacy/devtools.cjs.map +1 -0
  4. package/build/legacy/devtools.d.cts +4 -0
  5. package/build/legacy/devtools.d.ts +4 -0
  6. package/build/legacy/devtools.js +57 -0
  7. package/build/legacy/devtools.js.map +1 -0
  8. package/build/legacy/index.cjs +45 -0
  9. package/build/legacy/index.cjs.map +1 -0
  10. package/build/legacy/index.d.cts +8 -0
  11. package/build/legacy/index.d.ts +8 -0
  12. package/build/legacy/index.js +11 -0
  13. package/build/legacy/index.js.map +1 -0
  14. package/build/legacy/production.cjs +43 -0
  15. package/build/legacy/production.cjs.map +1 -0
  16. package/build/legacy/production.d.cts +8 -0
  17. package/build/legacy/production.d.ts +8 -0
  18. package/build/legacy/production.js +9 -0
  19. package/build/legacy/production.js.map +1 -0
  20. package/build/modern/devtools-d8b99e07.d.ts +42 -0
  21. package/build/modern/devtools.cjs +91 -0
  22. package/build/modern/devtools.cjs.map +1 -0
  23. package/build/modern/devtools.d.cts +4 -0
  24. package/build/modern/devtools.d.ts +4 -0
  25. package/build/modern/devtools.js +57 -0
  26. package/build/modern/devtools.js.map +1 -0
  27. package/build/modern/index.cjs +45 -0
  28. package/build/modern/index.cjs.map +1 -0
  29. package/build/modern/index.d.cts +8 -0
  30. package/build/modern/index.d.ts +8 -0
  31. package/build/modern/index.js +11 -0
  32. package/build/modern/index.js.map +1 -0
  33. package/build/modern/production.cjs +43 -0
  34. package/build/modern/production.cjs.map +1 -0
  35. package/build/modern/production.d.cts +8 -0
  36. package/build/modern/production.d.ts +8 -0
  37. package/build/modern/production.js +9 -0
  38. package/build/modern/production.js.map +1 -0
  39. package/package.json +32 -27
  40. package/src/__tests__/devtools.test.tsx +1 -1009
  41. package/src/__tests__/utils.tsx +4 -4
  42. package/src/devtools.tsx +59 -1309
  43. package/src/index.ts +0 -7
  44. package/src/production.ts +5 -0
  45. package/build/lib/Explorer.d.ts +0 -50
  46. package/build/lib/Explorer.esm.js +0 -254
  47. package/build/lib/Explorer.esm.js.map +0 -1
  48. package/build/lib/Explorer.js +0 -288
  49. package/build/lib/Explorer.js.map +0 -1
  50. package/build/lib/Explorer.mjs +0 -254
  51. package/build/lib/Explorer.mjs.map +0 -1
  52. package/build/lib/Logo.d.ts +0 -1
  53. package/build/lib/Logo.esm.js +0 -32
  54. package/build/lib/Logo.esm.js.map +0 -1
  55. package/build/lib/Logo.js +0 -55
  56. package/build/lib/Logo.js.map +0 -1
  57. package/build/lib/Logo.mjs +0 -32
  58. package/build/lib/Logo.mjs.map +0 -1
  59. package/build/lib/__tests__/Explorer.test.d.ts +0 -1
  60. package/build/lib/__tests__/devtools.test.d.ts +0 -1
  61. package/build/lib/__tests__/utils.d.ts +0 -22
  62. package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -17
  63. package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
  64. package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -19
  65. package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
  66. package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -17
  67. package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
  68. package/build/lib/devtools.d.ts +0 -113
  69. package/build/lib/devtools.esm.js +0 -900
  70. package/build/lib/devtools.esm.js.map +0 -1
  71. package/build/lib/devtools.js +0 -921
  72. package/build/lib/devtools.js.map +0 -1
  73. package/build/lib/devtools.mjs +0 -869
  74. package/build/lib/devtools.mjs.map +0 -1
  75. package/build/lib/index.d.ts +0 -3
  76. package/build/lib/index.esm.js +0 -12
  77. package/build/lib/index.esm.js.map +0 -1
  78. package/build/lib/index.js +0 -15
  79. package/build/lib/index.js.map +0 -1
  80. package/build/lib/index.mjs +0 -12
  81. package/build/lib/index.mjs.map +0 -1
  82. package/build/lib/index.prod.d.ts +0 -3
  83. package/build/lib/index.prod.esm.js +0 -1559
  84. package/build/lib/index.prod.esm.js.map +0 -1
  85. package/build/lib/index.prod.js +0 -1580
  86. package/build/lib/index.prod.js.map +0 -1
  87. package/build/lib/index.prod.mjs +0 -1528
  88. package/build/lib/index.prod.mjs.map +0 -1
  89. package/build/lib/noop.d.ts +0 -2
  90. package/build/lib/screenreader.d.ts +0 -3
  91. package/build/lib/screenreader.esm.js +0 -17
  92. package/build/lib/screenreader.esm.js.map +0 -1
  93. package/build/lib/screenreader.js +0 -40
  94. package/build/lib/screenreader.js.map +0 -1
  95. package/build/lib/screenreader.mjs +0 -17
  96. package/build/lib/screenreader.mjs.map +0 -1
  97. package/build/lib/styledComponents.d.ts +0 -8
  98. package/build/lib/styledComponents.esm.js +0 -95
  99. package/build/lib/styledComponents.esm.js.map +0 -1
  100. package/build/lib/styledComponents.js +0 -104
  101. package/build/lib/styledComponents.js.map +0 -1
  102. package/build/lib/styledComponents.mjs +0 -95
  103. package/build/lib/styledComponents.mjs.map +0 -1
  104. package/build/lib/theme.d.ts +0 -36
  105. package/build/lib/theme.esm.js +0 -33
  106. package/build/lib/theme.esm.js.map +0 -1
  107. package/build/lib/theme.js +0 -56
  108. package/build/lib/theme.js.map +0 -1
  109. package/build/lib/theme.mjs +0 -33
  110. package/build/lib/theme.mjs.map +0 -1
  111. package/build/lib/useLocalStorage.d.ts +0 -1
  112. package/build/lib/useLocalStorage.esm.js +0 -40
  113. package/build/lib/useLocalStorage.esm.js.map +0 -1
  114. package/build/lib/useLocalStorage.js +0 -63
  115. package/build/lib/useLocalStorage.js.map +0 -1
  116. package/build/lib/useLocalStorage.mjs +0 -40
  117. package/build/lib/useLocalStorage.mjs.map +0 -1
  118. package/build/lib/useMediaQuery.d.ts +0 -1
  119. package/build/lib/useMediaQuery.esm.js +0 -36
  120. package/build/lib/useMediaQuery.esm.js.map +0 -1
  121. package/build/lib/useMediaQuery.js +0 -59
  122. package/build/lib/useMediaQuery.js.map +0 -1
  123. package/build/lib/useMediaQuery.mjs +0 -36
  124. package/build/lib/useMediaQuery.mjs.map +0 -1
  125. package/build/lib/utils.d.ts +0 -79
  126. package/build/lib/utils.esm.js +0 -184
  127. package/build/lib/utils.esm.js.map +0 -1
  128. package/build/lib/utils.js +0 -218
  129. package/build/lib/utils.js.map +0 -1
  130. package/build/lib/utils.mjs +0 -184
  131. package/build/lib/utils.mjs.map +0 -1
  132. package/build/umd/index.development.js +0 -3195
  133. package/build/umd/index.development.js.map +0 -1
  134. package/build/umd/index.production.js +0 -2
  135. package/build/umd/index.production.js.map +0 -1
  136. package/src/Explorer.tsx +0 -385
  137. package/src/Logo.tsx +0 -32
  138. package/src/__tests__/Explorer.test.tsx +0 -150
  139. package/src/noop.ts +0 -7
  140. package/src/screenreader.tsx +0 -16
  141. package/src/styledComponents.ts +0 -110
  142. package/src/theme.tsx +0 -33
  143. package/src/useLocalStorage.ts +0 -52
  144. package/src/useMediaQuery.ts +0 -34
  145. package/src/utils.ts +0 -319
package/src/index.ts CHANGED
@@ -8,10 +8,3 @@ export const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =
8
8
  return null
9
9
  }
10
10
  : devtools.ReactQueryDevtools
11
-
12
- export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
13
- process.env.NODE_ENV !== 'development'
14
- ? (function () {
15
- return null
16
- } as any)
17
- : devtools.ReactQueryDevtoolsPanel
@@ -0,0 +1,5 @@
1
+ 'use client'
2
+
3
+ import * as devtools from './devtools'
4
+
5
+ export const ReactQueryDevtools = devtools.ReactQueryDevtools
@@ -1,50 +0,0 @@
1
- import * as React from 'react';
2
- export declare const Entry: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
3
- export declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
4
- export declare const LabelButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
5
- export declare const ExpandButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
6
- export declare const CopyButton: ({ value }: {
7
- value: unknown;
8
- }) => JSX.Element;
9
- export declare const Value: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
10
- export declare const SubEntries: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
11
- export declare const Info: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
12
- declare type ExpanderProps = {
13
- expanded: boolean;
14
- style?: React.CSSProperties;
15
- };
16
- export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element;
17
- declare type EntryType = {
18
- label: string;
19
- };
20
- declare type RendererProps = {
21
- handleEntry: (entry: EntryType) => JSX.Element;
22
- label?: string;
23
- value: unknown;
24
- subEntries: EntryType[];
25
- subEntryPages: EntryType[][];
26
- type: string;
27
- expanded: boolean;
28
- copyable: boolean;
29
- toggleExpanded: () => void;
30
- pageSize: number;
31
- };
32
- /**
33
- * Chunk elements in the array by size
34
- *
35
- * when the array cannot be chunked evenly by size, the last chunk will be
36
- * filled with the remaining elements
37
- *
38
- * @example
39
- * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
40
- */
41
- export declare function chunkArray<T>(array: T[], size: number): T[][];
42
- declare type Renderer = (props: RendererProps) => JSX.Element;
43
- export declare const DefaultRenderer: Renderer;
44
- declare type ExplorerProps = Partial<RendererProps> & {
45
- renderer?: Renderer;
46
- defaultExpanded?: true | Record<string, boolean>;
47
- copyable?: boolean;
48
- };
49
- export default function Explorer({ value, defaultExpanded, renderer, pageSize, copyable, ...rest }: ExplorerProps): JSX.Element;
50
- export {};
@@ -1,254 +0,0 @@
1
- 'use client';
2
- import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.esm.js';
3
- import * as React from 'react';
4
- import { displayValue, styled } from './utils.esm.js';
5
- import SuperJSON from 'superjson';
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
- const Copier = () => /*#__PURE__*/React.createElement("span", {
84
- "aria-label": "Copy object to clipboard",
85
- title: "Copy object to clipboard",
86
- style: {
87
- paddingLeft: '1em'
88
- }
89
- }, /*#__PURE__*/React.createElement("svg", {
90
- height: "12",
91
- viewBox: "0 0 16 12",
92
- width: "10"
93
- }, /*#__PURE__*/React.createElement("path", {
94
- fill: "currentColor",
95
- 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"
96
- }), /*#__PURE__*/React.createElement("path", {
97
- fill: "currentColor",
98
- 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"
99
- })));
100
- const ErrorCopier = () => /*#__PURE__*/React.createElement("span", {
101
- "aria-label": "Failed copying to clipboard",
102
- title: "Failed copying to clipboard",
103
- style: {
104
- paddingLeft: '1em',
105
- display: 'flex',
106
- alignItems: 'center'
107
- }
108
- }, /*#__PURE__*/React.createElement("svg", {
109
- height: "12",
110
- viewBox: "0 0 16 12",
111
- width: "10",
112
- display: "block"
113
- }, /*#__PURE__*/React.createElement("path", {
114
- fill: "red",
115
- 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"
116
- })), /*#__PURE__*/React.createElement("span", {
117
- style: {
118
- color: 'red',
119
- fontSize: '12px',
120
- paddingLeft: '4px',
121
- position: 'relative',
122
- top: '2px'
123
- }
124
- }, "See console"));
125
- const CopiedCopier = () => /*#__PURE__*/React.createElement("span", {
126
- "aria-label": "Object copied to clipboard",
127
- title: "Object copied to clipboard",
128
- style: {
129
- paddingLeft: '1em',
130
- display: 'inline-block',
131
- verticalAlign: 'middle'
132
- }
133
- }, /*#__PURE__*/React.createElement("svg", {
134
- height: "16",
135
- viewBox: "0 0 16 16",
136
- width: "16",
137
- display: "block"
138
- }, /*#__PURE__*/React.createElement("path", {
139
- fill: "green",
140
- 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"
141
- })));
142
- /**
143
- * Chunk elements in the array by size
144
- *
145
- * when the array cannot be chunked evenly by size, the last chunk will be
146
- * filled with the remaining elements
147
- *
148
- * @example
149
- * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
150
- */
151
- function chunkArray(array, size) {
152
- if (size < 1) return [];
153
- let i = 0;
154
- const result = [];
155
- while (i < array.length) {
156
- result.push(array.slice(i, i + size));
157
- i = i + size;
158
- }
159
- return result;
160
- }
161
- const DefaultRenderer = ({
162
- handleEntry,
163
- label,
164
- value,
165
- subEntries = [],
166
- subEntryPages = [],
167
- type,
168
- expanded = false,
169
- copyable = false,
170
- toggleExpanded,
171
- pageSize
172
- }) => {
173
- const [expandedPages, setExpandedPages] = React.useState([]);
174
- return /*#__PURE__*/React.createElement(Entry, {
175
- key: label
176
- }, subEntryPages.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandButton, {
177
- onClick: () => toggleExpanded()
178
- }, /*#__PURE__*/React.createElement(Expander, {
179
- expanded: expanded
180
- }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), copyable ? /*#__PURE__*/React.createElement(CopyButton, {
181
- value: value
182
- }) : 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", {
183
- key: index
184
- }, /*#__PURE__*/React.createElement(Entry, null, /*#__PURE__*/React.createElement(LabelButton, {
185
- onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
186
- }, /*#__PURE__*/React.createElement(Expander, {
187
- expanded: expanded
188
- }), " [", 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))));
189
- };
190
- function isIterable(x) {
191
- return Symbol.iterator in x;
192
- }
193
- function Explorer({
194
- value,
195
- defaultExpanded,
196
- renderer = DefaultRenderer,
197
- pageSize = 100,
198
- copyable = false,
199
- ...rest
200
- }) {
201
- const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
202
- const toggleExpanded = React.useCallback(() => setExpanded(old => !old), []);
203
- let type = typeof value;
204
- let subEntries = [];
205
- const makeProperty = sub => {
206
- const subDefaultExpanded = defaultExpanded === true ? {
207
- [sub.label]: true
208
- } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
209
- return {
210
- ...sub,
211
- defaultExpanded: subDefaultExpanded
212
- };
213
- };
214
- if (Array.isArray(value)) {
215
- type = 'array';
216
- subEntries = value.map((d, i) => makeProperty({
217
- label: i.toString(),
218
- value: d
219
- }));
220
- } else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
221
- type = 'Iterable';
222
- subEntries = Array.from(value, (val, i) => makeProperty({
223
- label: i.toString(),
224
- value: val
225
- }));
226
- } else if (typeof value === 'object' && value !== null) {
227
- type = 'object';
228
- subEntries = Object.entries(value).map(([key, val]) => makeProperty({
229
- label: key,
230
- value: val
231
- }));
232
- }
233
- const subEntryPages = chunkArray(subEntries, pageSize);
234
- return renderer({
235
- handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
236
- key: entry.label,
237
- value: value,
238
- renderer: renderer,
239
- copyable: copyable
240
- }, rest, entry)),
241
- type,
242
- subEntries,
243
- subEntryPages,
244
- value,
245
- expanded,
246
- copyable,
247
- toggleExpanded,
248
- pageSize,
249
- ...rest
250
- });
251
- }
252
-
253
- export { CopyButton, DefaultRenderer, Entry, ExpandButton, Expander, Info, Label, LabelButton, SubEntries, Value, chunkArray, Explorer as default };
254
- //# 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 { displayValue, styled } from './utils'\nimport superjson from 'superjson'\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 EntryType = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: (entry: EntryType) => JSX.Element\n label?: string\n value: unknown\n subEntries: EntryType[]\n subEntryPages: EntryType[][]\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;AACF;;AAGEC;AACF;;AAGEC;AACAD;AACF;;AAGEC;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AACF;AAIO;AAAsBC;AAA0B;;;AAKjD;AAGQC;;AAGIC;;;;AAKAC;;AAEAD;;;AAGF;AAEJ;AAGN;AACEP;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AACF;AAAE;AAWR;AAEO;;AAEP;;AAGEK;AACAC;AACAC;AACF;;AAGEZ;AACAJ;AACF;AAOO;;AAA8BiB;AAA0B;AAE3D;AACEC;AACAC;AACAC;;AAEF;AAAE;AAMN;AAEI;AACA;AACA;AACEL;AACF;AAAE;AAEG;AAAY;AAAoB;AAAU;AAE3C;AACA;AAA6M;AAG7M;AACA;AAAmO;AAM3O;AAEI;AACA;AACA;AACEA;AACAG;AACAG;AACF;AAAE;AAEG;AAAY;AAAoB;AAAW;AAAe;AAE3D;AACA;AAAyL;AAI3L;AACEjB;AACAJ;AACAe;AACAO;AACAC;AACF;AAAE;AAOR;AAEI;AACA;AACA;AACER;AACAG;AACAM;AACF;AAAE;AAEG;AAAY;AAAoB;AAAW;AAAe;AAE3D;AACA;AAAmI;AAuB3I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACL;;;AAGA;AACEC;;AAEF;AACA;AACF;AAIO;;;;AAILC;AACAC;;AAEAC;AACAC;;AAEAC;AACF;;AAGE;AACS;AAAW;;AAGkC;AAClC;;AAMY;AAAa;AAOxB;AAAW;AAGV;AAMC;AAES;AAAmB;AAoBrD;AAcA;AACE;AACF;AAEe;;;AAGbC;AACAD;AACAD;;AAEa;AACb;AACA;;;;AAME;;;;AAKE;AACAG;;;AAIJ;AACEC;;AAGIC;AACAxB;AACF;;AAQFuB;AACAP;AAEIQ;AACAxB;AACF;;AAGFuB;AACAP;AAEIQ;AACAxB;AACF;AAEJ;AAEA;AAEA;AACEyB;;AAGI;AACA;AACA;;;;;;;;;;;AAcN;AACF;;"}
@@ -1,288 +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 utils = require('./utils.js');
9
- var SuperJSON = require('superjson');
10
-
11
- function _interopNamespaceDefault(e) {
12
- var n = Object.create(null);
13
- if (e) {
14
- Object.keys(e).forEach(function (k) {
15
- if (k !== 'default') {
16
- var d = Object.getOwnPropertyDescriptor(e, k);
17
- Object.defineProperty(n, k, d.get ? d : {
18
- enumerable: true,
19
- get: function () { return e[k]; }
20
- });
21
- }
22
- });
23
- }
24
- n.default = e;
25
- return Object.freeze(n);
26
- }
27
-
28
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
29
-
30
- const Entry = utils.styled('div', {
31
- fontFamily: 'Menlo, monospace',
32
- fontSize: '1em',
33
- lineHeight: '1.7',
34
- outline: 'none',
35
- wordBreak: 'break-word'
36
- });
37
- const Label = utils.styled('span', {
38
- color: 'white'
39
- });
40
- const LabelButton = utils.styled('button', {
41
- cursor: 'pointer',
42
- color: 'white'
43
- });
44
- const ExpandButton = utils.styled('button', {
45
- cursor: 'pointer',
46
- color: 'inherit',
47
- font: 'inherit',
48
- outline: 'inherit',
49
- background: 'transparent',
50
- border: 'none',
51
- padding: 0
52
- });
53
- const CopyButton = ({
54
- value
55
- }) => {
56
- const [copyState, setCopyState] = React__namespace.useState('NoCopy');
57
- return /*#__PURE__*/React__namespace.createElement("button", {
58
- onClick: copyState === 'NoCopy' ? () => {
59
- navigator.clipboard.writeText(SuperJSON.stringify(value)).then(() => {
60
- setCopyState('SuccessCopy');
61
- setTimeout(() => {
62
- setCopyState('NoCopy');
63
- }, 1500);
64
- }, err => {
65
- console.error('Failed to copy: ', err);
66
- setCopyState('ErrorCopy');
67
- setTimeout(() => {
68
- setCopyState('NoCopy');
69
- }, 1500);
70
- });
71
- } : undefined,
72
- style: {
73
- cursor: 'pointer',
74
- color: 'inherit',
75
- font: 'inherit',
76
- outline: 'inherit',
77
- background: 'transparent',
78
- border: 'none',
79
- padding: 0
80
- }
81
- }, copyState === 'NoCopy' ? /*#__PURE__*/React__namespace.createElement(Copier, null) : copyState === 'SuccessCopy' ? /*#__PURE__*/React__namespace.createElement(CopiedCopier, null) : /*#__PURE__*/React__namespace.createElement(ErrorCopier, null));
82
- };
83
- const Value = utils.styled('span', (_props, theme) => ({
84
- color: theme.danger
85
- }));
86
- const SubEntries = utils.styled('div', {
87
- marginLeft: '.1em',
88
- paddingLeft: '1em',
89
- borderLeft: '2px solid rgba(0,0,0,.15)'
90
- });
91
- const Info = utils.styled('span', {
92
- color: 'grey',
93
- fontSize: '.7em'
94
- });
95
- const Expander = ({
96
- expanded,
97
- style = {}
98
- }) => /*#__PURE__*/React__namespace.createElement("span", {
99
- style: {
100
- display: 'inline-block',
101
- transition: 'all .1s ease',
102
- transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
103
- ...style
104
- }
105
- }, "\u25B6");
106
- const Copier = () => /*#__PURE__*/React__namespace.createElement("span", {
107
- "aria-label": "Copy object to clipboard",
108
- title: "Copy object to clipboard",
109
- style: {
110
- paddingLeft: '1em'
111
- }
112
- }, /*#__PURE__*/React__namespace.createElement("svg", {
113
- height: "12",
114
- viewBox: "0 0 16 12",
115
- width: "10"
116
- }, /*#__PURE__*/React__namespace.createElement("path", {
117
- fill: "currentColor",
118
- 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"
119
- }), /*#__PURE__*/React__namespace.createElement("path", {
120
- fill: "currentColor",
121
- 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"
122
- })));
123
- const ErrorCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
124
- "aria-label": "Failed copying to clipboard",
125
- title: "Failed copying to clipboard",
126
- style: {
127
- paddingLeft: '1em',
128
- display: 'flex',
129
- alignItems: 'center'
130
- }
131
- }, /*#__PURE__*/React__namespace.createElement("svg", {
132
- height: "12",
133
- viewBox: "0 0 16 12",
134
- width: "10",
135
- display: "block"
136
- }, /*#__PURE__*/React__namespace.createElement("path", {
137
- fill: "red",
138
- 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"
139
- })), /*#__PURE__*/React__namespace.createElement("span", {
140
- style: {
141
- color: 'red',
142
- fontSize: '12px',
143
- paddingLeft: '4px',
144
- position: 'relative',
145
- top: '2px'
146
- }
147
- }, "See console"));
148
- const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
149
- "aria-label": "Object copied to clipboard",
150
- title: "Object copied to clipboard",
151
- style: {
152
- paddingLeft: '1em',
153
- display: 'inline-block',
154
- verticalAlign: 'middle'
155
- }
156
- }, /*#__PURE__*/React__namespace.createElement("svg", {
157
- height: "16",
158
- viewBox: "0 0 16 16",
159
- width: "16",
160
- display: "block"
161
- }, /*#__PURE__*/React__namespace.createElement("path", {
162
- fill: "green",
163
- 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"
164
- })));
165
- /**
166
- * Chunk elements in the array by size
167
- *
168
- * when the array cannot be chunked evenly by size, the last chunk will be
169
- * filled with the remaining elements
170
- *
171
- * @example
172
- * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
173
- */
174
- function chunkArray(array, size) {
175
- if (size < 1) return [];
176
- let i = 0;
177
- const result = [];
178
- while (i < array.length) {
179
- result.push(array.slice(i, i + size));
180
- i = i + size;
181
- }
182
- return result;
183
- }
184
- const DefaultRenderer = ({
185
- handleEntry,
186
- label,
187
- value,
188
- subEntries = [],
189
- subEntryPages = [],
190
- type,
191
- expanded = false,
192
- copyable = false,
193
- toggleExpanded,
194
- pageSize
195
- }) => {
196
- const [expandedPages, setExpandedPages] = React__namespace.useState([]);
197
- return /*#__PURE__*/React__namespace.createElement(Entry, {
198
- key: label
199
- }, subEntryPages.length ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ExpandButton, {
200
- onClick: () => toggleExpanded()
201
- }, /*#__PURE__*/React__namespace.createElement(Expander, {
202
- expanded: expanded
203
- }), " ", 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, {
204
- value: value
205
- }) : 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", {
206
- key: index
207
- }, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
208
- onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
209
- }, /*#__PURE__*/React__namespace.createElement(Expander, {
210
- expanded: expanded
211
- }), " [", 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))));
212
- };
213
- function isIterable(x) {
214
- return Symbol.iterator in x;
215
- }
216
- function Explorer({
217
- value,
218
- defaultExpanded,
219
- renderer = DefaultRenderer,
220
- pageSize = 100,
221
- copyable = false,
222
- ...rest
223
- }) {
224
- const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
225
- const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
226
- let type = typeof value;
227
- let subEntries = [];
228
- const makeProperty = sub => {
229
- const subDefaultExpanded = defaultExpanded === true ? {
230
- [sub.label]: true
231
- } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
232
- return {
233
- ...sub,
234
- defaultExpanded: subDefaultExpanded
235
- };
236
- };
237
- if (Array.isArray(value)) {
238
- type = 'array';
239
- subEntries = value.map((d, i) => makeProperty({
240
- label: i.toString(),
241
- value: d
242
- }));
243
- } else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
244
- type = 'Iterable';
245
- subEntries = Array.from(value, (val, i) => makeProperty({
246
- label: i.toString(),
247
- value: val
248
- }));
249
- } else if (typeof value === 'object' && value !== null) {
250
- type = 'object';
251
- subEntries = Object.entries(value).map(([key, val]) => makeProperty({
252
- label: key,
253
- value: val
254
- }));
255
- }
256
- const subEntryPages = chunkArray(subEntries, pageSize);
257
- return renderer({
258
- handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers.extends({
259
- key: entry.label,
260
- value: value,
261
- renderer: renderer,
262
- copyable: copyable
263
- }, rest, entry)),
264
- type,
265
- subEntries,
266
- subEntryPages,
267
- value,
268
- expanded,
269
- copyable,
270
- toggleExpanded,
271
- pageSize,
272
- ...rest
273
- });
274
- }
275
-
276
- exports.CopyButton = CopyButton;
277
- exports.DefaultRenderer = DefaultRenderer;
278
- exports.Entry = Entry;
279
- exports.ExpandButton = ExpandButton;
280
- exports.Expander = Expander;
281
- exports.Info = Info;
282
- exports.Label = Label;
283
- exports.LabelButton = LabelButton;
284
- exports.SubEntries = SubEntries;
285
- exports.Value = Value;
286
- exports.chunkArray = chunkArray;
287
- exports.default = Explorer;
288
- //# 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 { displayValue, styled } from './utils'\nimport superjson from 'superjson'\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 EntryType = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: (entry: EntryType) => JSX.Element\n label?: string\n value: unknown\n subEntries: EntryType[]\n subEntryPages: EntryType[][]\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;AACF;;AAGEC;AACF;;AAGEC;AACAD;AACF;;AAGEC;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AACF;AAIO;AAAsBC;AAA0B;;;AAKjD;AAGQC;;AAGIC;;;;AAKAC;;AAEAD;;;AAGF;AAEJ;AAGN;AACEP;AACAD;AACAE;AACAJ;AACAK;AACAC;AACAC;AACF;AAAE;AAWR;AAEO;;AAEP;;AAGEK;AACAC;AACAC;AACF;;AAGEZ;AACAJ;AACF;AAOO;;AAA8BiB;AAA0B;AAE3D;AACEC;AACAC;AACAC;;AAEF;AAAE;AAMN;AAEI;AACA;AACA;AACEL;AACF;AAAE;AAEG;AAAY;AAAoB;AAAU;AAE3C;AACA;AAA6M;AAG7M;AACA;AAAmO;AAM3O;AAEI;AACA;AACA;AACEA;AACAG;AACAG;AACF;AAAE;AAEG;AAAY;AAAoB;AAAW;AAAe;AAE3D;AACA;AAAyL;AAI3L;AACEjB;AACAJ;AACAe;AACAO;AACAC;AACF;AAAE;AAOR;AAEI;AACA;AACA;AACER;AACAG;AACAM;AACF;AAAE;AAEG;AAAY;AAAoB;AAAW;AAAe;AAE3D;AACA;AAAmI;AAuB3I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACL;;;AAGA;AACEC;;AAEF;AACA;AACF;AAIO;;;;AAILC;AACAC;;AAEAC;AACAC;;AAEAC;AACF;;AAGE;AACS;AAAW;;AAGkC;AAClC;;AAMY;AAAa;AAOxB;AAAW;AAGV;AAMC;AAES;AAAmB;AAoBrD;AAcA;AACE;AACF;AAEe;;;AAGbC;AACAD;AACAD;;AAEa;AACb;AACA;;;;AAME;;;;AAKE;AACAG;;;AAIJ;AACEC;;AAGIC;AACAxB;AACF;;AAQFuB;AACAP;AAEIQ;AACAxB;AACF;;AAGFuB;AACAP;AAEIQ;AACAxB;AACF;AAEJ;AAEA;AAEA;AACEyB;;AAGI;AACA;AACA;;;;;;;;;;;AAcN;AACF;;;;;;;;;;;;;"}