@tanstack/react-router-devtools 0.0.1-beta.83 → 1.114.1

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 (59) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +3 -1
  3. package/dist/cjs/TanStackRouterDevtools.cjs +72 -0
  4. package/dist/cjs/TanStackRouterDevtools.cjs.map +1 -0
  5. package/dist/cjs/TanStackRouterDevtools.d.cts +41 -0
  6. package/dist/cjs/TanStackRouterDevtoolsPanel.cjs +44 -0
  7. package/dist/cjs/TanStackRouterDevtoolsPanel.cjs.map +1 -0
  8. package/dist/cjs/TanStackRouterDevtoolsPanel.d.cts +33 -0
  9. package/dist/cjs/index.cjs +17 -0
  10. package/dist/cjs/index.cjs.map +1 -0
  11. package/dist/cjs/index.d.cts +6 -0
  12. package/dist/esm/TanStackRouterDevtools.d.ts +41 -0
  13. package/dist/esm/TanStackRouterDevtools.js +72 -0
  14. package/dist/esm/TanStackRouterDevtools.js.map +1 -0
  15. package/dist/esm/TanStackRouterDevtoolsPanel.d.ts +33 -0
  16. package/dist/esm/TanStackRouterDevtoolsPanel.js +44 -0
  17. package/dist/esm/TanStackRouterDevtoolsPanel.js.map +1 -0
  18. package/dist/esm/index.d.ts +6 -0
  19. package/dist/esm/index.js +17 -0
  20. package/dist/esm/index.js.map +1 -0
  21. package/package.json +42 -26
  22. package/src/TanStackRouterDevtools.tsx +134 -0
  23. package/src/TanStackRouterDevtoolsPanel.tsx +87 -0
  24. package/src/index.ts +22 -0
  25. package/build/cjs/Explorer.js +0 -216
  26. package/build/cjs/Explorer.js.map +0 -1
  27. package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -31
  28. package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
  29. package/build/cjs/devtools.js +0 -583
  30. package/build/cjs/devtools.js.map +0 -1
  31. package/build/cjs/index.js +0 -21
  32. package/build/cjs/index.js.map +0 -1
  33. package/build/cjs/styledComponents.js +0 -79
  34. package/build/cjs/styledComponents.js.map +0 -1
  35. package/build/cjs/theme.js +0 -51
  36. package/build/cjs/theme.js.map +0 -1
  37. package/build/cjs/useLocalStorage.js +0 -58
  38. package/build/cjs/useLocalStorage.js.map +0 -1
  39. package/build/cjs/useMediaQuery.js +0 -58
  40. package/build/cjs/useMediaQuery.js.map +0 -1
  41. package/build/cjs/utils.js +0 -107
  42. package/build/cjs/utils.js.map +0 -1
  43. package/build/esm/index.js +0 -984
  44. package/build/esm/index.js.map +0 -1
  45. package/build/stats-html.html +0 -4044
  46. package/build/stats-react.json +0 -504
  47. package/build/types/index.d.ts +0 -77
  48. package/build/umd/index.development.js +0 -1119
  49. package/build/umd/index.development.js.map +0 -1
  50. package/build/umd/index.production.js +0 -54
  51. package/build/umd/index.production.js.map +0 -1
  52. package/src/Explorer.tsx +0 -290
  53. package/src/devtools.tsx +0 -984
  54. package/src/index.tsx +0 -1
  55. package/src/styledComponents.ts +0 -106
  56. package/src/theme.tsx +0 -31
  57. package/src/useLocalStorage.ts +0 -52
  58. package/src/useMediaQuery.ts +0 -39
  59. package/src/utils.ts +0 -169
@@ -0,0 +1,134 @@
1
+ import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'
2
+ import { Fragment, useEffect, useRef, useState } from 'react'
3
+ import { useRouter, useRouterState } from '@tanstack/react-router'
4
+ import type { AnyRouter } from '@tanstack/react-router'
5
+ import type React from 'react'
6
+
7
+ interface DevtoolsOptions {
8
+ /**
9
+ * Set this true if you want the dev tools to default to being open
10
+ */
11
+ initialIsOpen?: boolean
12
+ /**
13
+ * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
14
+ */
15
+ panelProps?: React.DetailedHTMLProps<
16
+ React.HTMLAttributes<HTMLDivElement>,
17
+ HTMLDivElement
18
+ >
19
+ /**
20
+ * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
21
+ */
22
+ closeButtonProps?: React.DetailedHTMLProps<
23
+ React.ButtonHTMLAttributes<HTMLButtonElement>,
24
+ HTMLButtonElement
25
+ >
26
+ /**
27
+ * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
28
+ */
29
+ toggleButtonProps?: React.DetailedHTMLProps<
30
+ React.ButtonHTMLAttributes<HTMLButtonElement>,
31
+ HTMLButtonElement
32
+ >
33
+ /**
34
+ * The position of the TanStack Router logo to open and close the devtools panel.
35
+ * Defaults to 'bottom-left'.
36
+ */
37
+ position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
38
+ /**
39
+ * Use this to render the devtools inside a different type of container element for a11y purposes.
40
+ * Any string which corresponds to a valid intrinsic JSX element is allowed.
41
+ * Defaults to 'footer'.
42
+ */
43
+ containerElement?: string | any
44
+ /**
45
+ * The router instance to use for the devtools.
46
+ */
47
+ router?: AnyRouter
48
+ /**
49
+ * Use this to attach the devtool's styles to specific element in the DOM.
50
+ */
51
+ shadowDOMTarget?: ShadowRoot
52
+ }
53
+
54
+ export function TanStackRouterDevtools(
55
+ props: DevtoolsOptions,
56
+ ): React.ReactElement | null {
57
+ const {
58
+ initialIsOpen,
59
+ panelProps,
60
+ closeButtonProps,
61
+ toggleButtonProps,
62
+ position,
63
+ containerElement,
64
+ shadowDOMTarget,
65
+ router: propsRouter,
66
+ } = props
67
+
68
+ const hookRouter = useRouter({ warn: propsRouter !== undefined })
69
+ const activeRouter = propsRouter ?? hookRouter
70
+
71
+ const activeRouterState = useRouterState({ router: activeRouter })
72
+
73
+ const devToolRef = useRef<HTMLDivElement>(null)
74
+ const [devtools] = useState(
75
+ () =>
76
+ new TanStackRouterDevtoolsCore({
77
+ initialIsOpen,
78
+ panelProps,
79
+ closeButtonProps,
80
+ toggleButtonProps,
81
+ position,
82
+ containerElement,
83
+ shadowDOMTarget,
84
+ router: activeRouter,
85
+ routerState: activeRouterState,
86
+ }),
87
+ )
88
+
89
+ // Update devtools when props change
90
+ useEffect(() => {
91
+ devtools.setRouter(activeRouter)
92
+ }, [devtools, activeRouter])
93
+
94
+ useEffect(() => {
95
+ devtools.setRouterState(activeRouterState)
96
+ }, [devtools, activeRouterState])
97
+
98
+ useEffect(() => {
99
+ devtools.setOptions({
100
+ initialIsOpen: initialIsOpen,
101
+ panelProps: panelProps,
102
+ closeButtonProps: closeButtonProps,
103
+ toggleButtonProps: toggleButtonProps,
104
+ position: position,
105
+ containerElement: containerElement,
106
+ shadowDOMTarget: shadowDOMTarget,
107
+ })
108
+ }, [
109
+ devtools,
110
+ initialIsOpen,
111
+ panelProps,
112
+ closeButtonProps,
113
+ toggleButtonProps,
114
+ position,
115
+ containerElement,
116
+ shadowDOMTarget,
117
+ ])
118
+
119
+ useEffect(() => {
120
+ if (devToolRef.current) {
121
+ devtools.mount(devToolRef.current)
122
+ }
123
+
124
+ return () => {
125
+ devtools.unmount()
126
+ }
127
+ }, [devtools])
128
+
129
+ return (
130
+ <Fragment>
131
+ <div ref={devToolRef} />
132
+ </Fragment>
133
+ )
134
+ }
@@ -0,0 +1,87 @@
1
+ import { useRouter, useRouterState } from '@tanstack/react-router'
2
+ import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'
3
+ import React, { useEffect, useRef, useState } from 'react'
4
+ import type { AnyRouter } from '@tanstack/react-router'
5
+
6
+ export interface DevtoolsPanelOptions {
7
+ /**
8
+ * The standard React style object used to style a component with inline styles
9
+ */
10
+ style?: any
11
+ /**
12
+ * The standard React class property used to style a component with classes
13
+ */
14
+ className?: string
15
+ /**
16
+ * A boolean variable indicating whether the panel is open or closed
17
+ */
18
+ isOpen?: boolean
19
+ /**
20
+ * A function that toggles the open and close state of the panel
21
+ */
22
+ setIsOpen?: (isOpen: boolean) => void
23
+ /**
24
+ * Handles the opening and closing the devtools panel
25
+ */
26
+ handleDragStart?: (e: any) => void
27
+ /**
28
+ * A boolean variable indicating if the "lite" version of the library is being used
29
+ */
30
+ router?: AnyRouter
31
+ /**
32
+ * Use this to attach the devtool's styles to specific element in the DOM.
33
+ */
34
+ shadowDOMTarget?: ShadowRoot
35
+ }
36
+
37
+ export const TanStackRouterDevtoolsPanel: React.FC<DevtoolsPanelOptions> = (
38
+ props,
39
+ ): React.ReactElement | null => {
40
+ const { router: propsRouter, ...rest } = props
41
+ const hookRouter = useRouter({ warn: propsRouter !== undefined })
42
+ const activeRouter = propsRouter ?? hookRouter
43
+ const activeRouterState = useRouterState({ router: activeRouter })
44
+
45
+ const devToolRef = useRef<HTMLDivElement>(null)
46
+ const [devtools] = useState(
47
+ () =>
48
+ new TanStackRouterDevtoolsPanelCore({
49
+ ...rest,
50
+ router: activeRouter,
51
+ routerState: activeRouterState,
52
+ }),
53
+ )
54
+
55
+ // Update devtools when props change
56
+ useEffect(() => {
57
+ devtools.setRouter(activeRouter)
58
+ }, [devtools, activeRouter])
59
+
60
+ useEffect(() => {
61
+ devtools.setRouterState(activeRouterState)
62
+ }, [devtools, activeRouterState])
63
+
64
+ useEffect(() => {
65
+ devtools.setOptions({
66
+ className: props.className,
67
+ style: props.style,
68
+ shadowDOMTarget: props.shadowDOMTarget,
69
+ })
70
+ }, [devtools, props.className, props.style, props.shadowDOMTarget])
71
+
72
+ useEffect(() => {
73
+ if (devToolRef.current) {
74
+ devtools.mount(devToolRef.current)
75
+ }
76
+
77
+ return () => {
78
+ devtools.unmount()
79
+ }
80
+ }, [devtools])
81
+
82
+ return (
83
+ <>
84
+ <div ref={devToolRef} />
85
+ </>
86
+ )
87
+ }
package/src/index.ts ADDED
@@ -0,0 +1,22 @@
1
+ import * as Devtools from './TanStackRouterDevtools'
2
+ import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'
3
+
4
+ export const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =
5
+ process.env.NODE_ENV !== 'development'
6
+ ? function () {
7
+ return null
8
+ }
9
+ : Devtools.TanStackRouterDevtools
10
+
11
+ export const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =
12
+ Devtools.TanStackRouterDevtools
13
+
14
+ export const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =
15
+ process.env.NODE_ENV !== 'development'
16
+ ? function () {
17
+ return null
18
+ }
19
+ : DevtoolsPanel.TanStackRouterDevtoolsPanel
20
+
21
+ export const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =
22
+ DevtoolsPanel.TanStackRouterDevtoolsPanel
@@ -1,216 +0,0 @@
1
- /**
2
- * react-router-devtools
3
- *
4
- * Copyright (c) TanStack
5
- *
6
- * This source code is licensed under the MIT license found in the
7
- * LICENSE.md file in the root directory of this source tree.
8
- *
9
- * @license MIT
10
- */
11
- 'use strict';
12
-
13
- Object.defineProperty(exports, '__esModule', { value: true });
14
-
15
- var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
16
- var React = require('react');
17
- var utils = require('./utils.js');
18
-
19
- function _interopNamespace(e) {
20
- if (e && e.__esModule) return e;
21
- var n = Object.create(null);
22
- if (e) {
23
- Object.keys(e).forEach(function (k) {
24
- if (k !== 'default') {
25
- var d = Object.getOwnPropertyDescriptor(e, k);
26
- Object.defineProperty(n, k, d.get ? d : {
27
- enumerable: true,
28
- get: function () { return e[k]; }
29
- });
30
- }
31
- });
32
- }
33
- n["default"] = e;
34
- return Object.freeze(n);
35
- }
36
-
37
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
38
-
39
- const Entry = utils.styled('div', {
40
- fontFamily: 'Menlo, monospace',
41
- fontSize: '.7rem',
42
- lineHeight: '1.7',
43
- outline: 'none',
44
- wordBreak: 'break-word'
45
- });
46
- const Label = utils.styled('span', {
47
- color: 'white'
48
- });
49
- const LabelButton = utils.styled('button', {
50
- cursor: 'pointer',
51
- color: 'white'
52
- });
53
- const ExpandButton = utils.styled('button', {
54
- cursor: 'pointer',
55
- color: 'inherit',
56
- font: 'inherit',
57
- outline: 'inherit',
58
- background: 'transparent',
59
- border: 'none',
60
- padding: 0
61
- });
62
- const Value = utils.styled('span', (_props, theme) => ({
63
- color: theme.danger
64
- }));
65
- const SubEntries = utils.styled('div', {
66
- marginLeft: '.1em',
67
- paddingLeft: '1em',
68
- borderLeft: '2px solid rgba(0,0,0,.15)'
69
- });
70
- const Info = utils.styled('span', {
71
- color: 'grey',
72
- fontSize: '.7em'
73
- });
74
- const Expander = ({
75
- expanded,
76
- style = {}
77
- }) => /*#__PURE__*/React__namespace.createElement("span", {
78
- style: {
79
- display: 'inline-block',
80
- transition: 'all .1s ease',
81
- transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
82
- ...style
83
- }
84
- }, "\u25B6");
85
- /**
86
- * Chunk elements in the array by size
87
- *
88
- * when the array cannot be chunked evenly by size, the last chunk will be
89
- * filled with the remaining elements
90
- *
91
- * @example
92
- * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
93
- */
94
- function chunkArray(array, size) {
95
- if (size < 1) return [];
96
- let i = 0;
97
- const result = [];
98
- while (i < array.length) {
99
- result.push(array.slice(i, i + size));
100
- i = i + size;
101
- }
102
- return result;
103
- }
104
- const DefaultRenderer = ({
105
- handleEntry,
106
- label,
107
- value,
108
- subEntries = [],
109
- subEntryPages = [],
110
- type,
111
- expanded = false,
112
- toggleExpanded,
113
- pageSize,
114
- renderer
115
- }) => {
116
- const [expandedPages, setExpandedPages] = React__namespace.useState([]);
117
- const [valueSnapshot, setValueSnapshot] = React__namespace.useState(undefined);
118
- const refreshValueSnapshot = () => {
119
- setValueSnapshot(value());
120
- };
121
- return /*#__PURE__*/React__namespace.createElement(Entry, null, subEntryPages.length ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ExpandButton, {
122
- onClick: () => toggleExpanded()
123
- }, /*#__PURE__*/React__namespace.createElement(Expander, {
124
- expanded: expanded
125
- }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
126
- key: index
127
- }, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
128
- onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
129
- }, /*#__PURE__*/React__namespace.createElement(Expander, {
130
- expanded: expanded
131
- }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, entries.map(entry => handleEntry(entry))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Explorer, {
132
- renderer: renderer,
133
- label: /*#__PURE__*/React__namespace.createElement("button", {
134
- onClick: refreshValueSnapshot,
135
- style: {
136
- appearance: 'none',
137
- border: '0',
138
- background: 'transparent'
139
- }
140
- }, /*#__PURE__*/React__namespace.createElement(Label, null, label), " \uD83D\uDD04", ' '),
141
- value: valueSnapshot,
142
- defaultExpanded: {}
143
- })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React__namespace.createElement(Value, null, utils.displayValue(value))));
144
- };
145
- function isIterable(x) {
146
- return Symbol.iterator in x;
147
- }
148
- function Explorer({
149
- value,
150
- defaultExpanded,
151
- renderer = DefaultRenderer,
152
- pageSize = 100,
153
- ...rest
154
- }) {
155
- const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
156
- const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
157
- let type = typeof value;
158
- let subEntries = [];
159
- const makeProperty = sub => {
160
- const subDefaultExpanded = defaultExpanded === true ? {
161
- [sub.label]: true
162
- } : defaultExpanded?.[sub.label];
163
- return {
164
- ...sub,
165
- defaultExpanded: subDefaultExpanded
166
- };
167
- };
168
- if (Array.isArray(value)) {
169
- type = 'array';
170
- subEntries = value.map((d, i) => makeProperty({
171
- label: i.toString(),
172
- value: d
173
- }));
174
- } else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
175
- type = 'Iterable';
176
- subEntries = Array.from(value, (val, i) => makeProperty({
177
- label: i.toString(),
178
- value: val
179
- }));
180
- } else if (typeof value === 'object' && value !== null) {
181
- type = 'object';
182
- subEntries = Object.entries(value).map(([key, val]) => makeProperty({
183
- label: key,
184
- value: val
185
- }));
186
- }
187
- const subEntryPages = chunkArray(subEntries, pageSize);
188
- return renderer({
189
- handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers["extends"]({
190
- key: entry.label,
191
- value: value,
192
- renderer: renderer
193
- }, rest, entry)),
194
- type,
195
- subEntries,
196
- subEntryPages,
197
- value,
198
- expanded,
199
- toggleExpanded,
200
- pageSize,
201
- ...rest
202
- });
203
- }
204
-
205
- exports.DefaultRenderer = DefaultRenderer;
206
- exports.Entry = Entry;
207
- exports.ExpandButton = ExpandButton;
208
- exports.Expander = Expander;
209
- exports.Info = Info;
210
- exports.Label = Label;
211
- exports.LabelButton = LabelButton;
212
- exports.SubEntries = SubEntries;
213
- exports.Value = Value;
214
- exports.chunkArray = chunkArray;
215
- exports["default"] = Explorer;
216
- //# sourceMappingURL=Explorer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { displayValue, styled } from './utils'\n\nexport const Entry = styled('div', {\n fontFamily: 'Menlo, monospace',\n fontSize: '.7rem',\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\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\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: HandleEntryFn\n label?: React.ReactNode\n value: unknown\n subEntries: Entry[]\n subEntryPages: Entry[][]\n type: string\n expanded: boolean\n toggleExpanded: () => void\n pageSize: number\n renderer?: Renderer\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 toggleExpanded,\n pageSize,\n renderer,\n}) => {\n const [expandedPages, setExpandedPages] = React.useState<number[]>([])\n const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n\n const refreshValueSnapshot = () => {\n setValueSnapshot((value as () => any)())\n }\n\n return (\n <Entry>\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 {expanded ? (\n subEntryPages.length === 1 ? (\n <SubEntries>\n {subEntries.map((entry, index) => handleEntry(entry))}\n </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>\n {entries.map((entry) => handleEntry(entry))}\n </SubEntries>\n ) : null}\n </Entry>\n </div>\n ))}\n </SubEntries>\n )\n ) : null}\n </>\n ) : type === 'function' ? (\n <>\n <Explorer\n renderer={renderer}\n label={\n <button\n onClick={refreshValueSnapshot}\n style={{\n appearance: 'none',\n border: '0',\n background: 'transparent',\n }}\n >\n <Label>{label}</Label> 🔄{' '}\n </button>\n }\n value={valueSnapshot}\n defaultExpanded={{}}\n />\n </>\n ) : (\n <>\n <Label>{label}:</Label> <Value>{displayValue(value)}</Value>\n </>\n )}\n </Entry>\n )\n}\n\ntype HandleEntryFn = (entry: Entry) => JSX.Element\n\ntype ExplorerProps = Partial<RendererProps> & {\n renderer?: Renderer\n defaultExpanded?: true | Record<string, 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 ...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 {...rest}\n {...entry}\n />\n ),\n type,\n subEntries,\n subEntryPages,\n value,\n expanded,\n toggleExpanded,\n pageSize,\n ...rest,\n })\n}\n"],"names":["Entry","styled","fontFamily","fontSize","lineHeight","outline","wordBreak","Label","color","LabelButton","cursor","ExpandButton","font","background","border","padding","Value","_props","theme","danger","SubEntries","marginLeft","paddingLeft","borderLeft","Info","Expander","expanded","style","React","display","transition","transform","chunkArray","array","size","i","result","length","push","slice","DefaultRenderer","handleEntry","label","value","subEntries","subEntryPages","type","toggleExpanded","pageSize","renderer","expandedPages","setExpandedPages","useState","valueSnapshot","setValueSnapshot","undefined","refreshValueSnapshot","String","toLowerCase","map","entry","index","entries","old","includes","filter","d","appearance","displayValue","isIterable","x","Symbol","iterator","Explorer","defaultExpanded","rest","setExpanded","Boolean","useCallback","makeProperty","sub","subDefaultExpanded","Array","isArray","toString","from","val","Object","key","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAIaA,KAAK,GAAGC,YAAM,CAAC,KAAK,EAAE;AACjCC,EAAAA,UAAU,EAAE,kBAAkB;AAC9BC,EAAAA,QAAQ,EAAE,OAAO;AACjBC,EAAAA,UAAU,EAAE,KAAK;AACjBC,EAAAA,OAAO,EAAE,MAAM;AACfC,EAAAA,SAAS,EAAE,YAAA;AACb,CAAC,EAAC;MAEWC,KAAK,GAAGN,YAAM,CAAC,MAAM,EAAE;AAClCO,EAAAA,KAAK,EAAE,OAAA;AACT,CAAC,EAAC;MAEWC,WAAW,GAAGR,YAAM,CAAC,QAAQ,EAAE;AAC1CS,EAAAA,MAAM,EAAE,SAAS;AACjBF,EAAAA,KAAK,EAAE,OAAA;AACT,CAAC,EAAC;MAEWG,YAAY,GAAGV,YAAM,CAAC,QAAQ,EAAE;AAC3CS,EAAAA,MAAM,EAAE,SAAS;AACjBF,EAAAA,KAAK,EAAE,SAAS;AAChBI,EAAAA,IAAI,EAAE,SAAS;AACfP,EAAAA,OAAO,EAAE,SAAS;AAClBQ,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,MAAM,EAAE,MAAM;AACdC,EAAAA,OAAO,EAAE,CAAA;AACX,CAAC,EAAC;AAEK,MAAMC,KAAK,GAAGf,YAAM,CAAC,MAAM,EAAE,CAACgB,MAAM,EAAEC,KAAK,MAAM;EACtDV,KAAK,EAAEU,KAAK,CAACC,MAAAA;AACf,CAAC,CAAC,EAAC;MAEUC,UAAU,GAAGnB,YAAM,CAAC,KAAK,EAAE;AACtCoB,EAAAA,UAAU,EAAE,MAAM;AAClBC,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,UAAU,EAAE,2BAAA;AACd,CAAC,EAAC;MAEWC,IAAI,GAAGvB,YAAM,CAAC,MAAM,EAAE;AACjCO,EAAAA,KAAK,EAAE,MAAM;AACbL,EAAAA,QAAQ,EAAE,MAAA;AACZ,CAAC,EAAC;AAOK,MAAMsB,QAAQ,GAAG,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,KAAK,GAAG,EAAC;AAAiB,CAAC,kBAC9DC,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,EAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,cAAc;AACvBC,IAAAA,UAAU,EAAE,cAAc;AAC1BC,IAAAA,SAAS,EAAG,CAAA,OAAA,EAASL,QAAQ,GAAG,EAAE,GAAG,CAAE,CAAA,KAAA,EAAOC,KAAK,CAACI,SAAS,IAAI,EAAG,CAAC,CAAA;IACrE,GAAGJ,KAAAA;AACL,GAAA;AAAE,CAIL,EAAA,QAAA,EAAA;AAmBD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,UAAU,CAAIC,KAAU,EAAEC,IAAY,EAAS;AAC7D,EAAA,IAAIA,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,CAAA;EACvB,IAAIC,CAAC,GAAG,CAAC,CAAA;EACT,MAAMC,MAAa,GAAG,EAAE,CAAA;AACxB,EAAA,OAAOD,CAAC,GAAGF,KAAK,CAACI,MAAM,EAAE;AACvBD,IAAAA,MAAM,CAACE,IAAI,CAACL,KAAK,CAACM,KAAK,CAACJ,CAAC,EAAEA,CAAC,GAAGD,IAAI,CAAC,CAAC,CAAA;IACrCC,CAAC,GAAGA,CAAC,GAAGD,IAAI,CAAA;AACd,GAAA;AACA,EAAA,OAAOE,MAAM,CAAA;AACf,CAAA;AAIO,MAAMI,eAAyB,GAAG,CAAC;EACxCC,WAAW;EACXC,KAAK;EACLC,KAAK;AACLC,EAAAA,UAAU,GAAG,EAAE;AACfC,EAAAA,aAAa,GAAG,EAAE;EAClBC,IAAI;AACJpB,EAAAA,QAAQ,GAAG,KAAK;EAChBqB,cAAc;EACdC,QAAQ;AACRC,EAAAA,QAAAA;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGvB,gBAAK,CAACwB,QAAQ,CAAW,EAAE,CAAC,CAAA;EACtE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG1B,gBAAK,CAACwB,QAAQ,CAACG,SAAS,CAAC,CAAA;EAEnE,MAAMC,oBAAoB,GAAG,MAAM;IACjCF,gBAAgB,CAAEX,KAAK,EAAgB,CAAC,CAAA;GACzC,CAAA;EAED,oBACEf,gBAAA,CAAA,aAAA,CAAC,KAAK,EACHiB,IAAAA,EAAAA,aAAa,CAACR,MAAM,gBACnBT,gBACE,CAAA,aAAA,CAAAA,gBAAA,CAAA,QAAA,EAAA,IAAA,eAAAA,gBAAA,CAAA,aAAA,CAAC,YAAY,EAAA;IAAC,OAAO,EAAE,MAAMmB,cAAc,EAAA;AAAG,GAAA,eAC5CnB,+BAAC,QAAQ,EAAA;AAAC,IAAA,QAAQ,EAAEF,QAAAA;AAAS,GAAA,CAAG,OAAEgB,KAAK,EAAE,GAAG,eAC5Cd,+BAAC,IAAI,EAAA,IAAA,EACF6B,MAAM,CAACX,IAAI,CAAC,CAACY,WAAW,EAAE,KAAK,UAAU,GAAG,aAAa,GAAG,EAAE,EAC9Dd,UAAU,CAACP,MAAM,OAAGO,UAAU,CAACP,MAAM,GAAG,CAAC,GAAI,CAAA,KAAA,CAAM,GAAI,CAAA,IAAA,CAAK,CACxD,CACM,EACdX,QAAQ,GACPmB,aAAa,CAACR,MAAM,KAAK,CAAC,gBACxBT,gBAAC,CAAA,aAAA,CAAA,UAAU,EACRgB,IAAAA,EAAAA,UAAU,CAACe,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKpB,WAAW,CAACmB,KAAK,CAAC,CAAC,CAC1C,gBAEbhC,+BAAC,UAAU,EAAA,IAAA,EACRiB,aAAa,CAACc,GAAG,CAAC,CAACG,OAAO,EAAED,KAAK,kBAChCjC,gBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAEiC,KAAAA;AAAM,GAAA,eACdjC,gBAAC,CAAA,aAAA,CAAA,KAAK,EACJ,IAAA,eAAAA,gBAAA,CAAA,aAAA,CAAC,WAAW,EAAA;AACV,IAAA,OAAO,EAAE,MACPuB,gBAAgB,CAAEY,GAAG,IACnBA,GAAG,CAACC,QAAQ,CAACH,KAAK,CAAC,GACfE,GAAG,CAACE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKL,KAAK,CAAC,GAC9B,CAAC,GAAGE,GAAG,EAAEF,KAAK,CAAC,CAAA;AAEtB,GAAA,eAEDjC,+BAAC,QAAQ,EAAA;AAAC,IAAA,QAAQ,EAAEF,QAAAA;GAAY,CAAA,EAAA,IAAA,EAAGmC,KAAK,GAAGb,QAAQ,EAAA,MAAA,EAAM,GAAG,EAC3Da,KAAK,GAAGb,QAAQ,GAAGA,QAAQ,GAAG,CAAC,EAAA,GAAA,CACpB,EACbE,aAAa,CAACc,QAAQ,CAACH,KAAK,CAAC,gBAC5BjC,gBAAC,CAAA,aAAA,CAAA,UAAU,EACRkC,IAAAA,EAAAA,OAAO,CAACH,GAAG,CAAEC,KAAK,IAAKnB,WAAW,CAACmB,KAAK,CAAC,CAAC,CAChC,GACX,IAAI,CACF,CAEX,CAAC,CAEL,GACC,IAAI,CACP,GACDd,IAAI,KAAK,UAAU,gBACrBlB,gBACE,CAAA,aAAA,CAAAA,gBAAA,CAAA,QAAA,EAAA,IAAA,eAAAA,gBAAA,CAAA,aAAA,CAAC,QAAQ,EAAA;AACP,IAAA,QAAQ,EAAEqB,QAAS;AACnB,IAAA,KAAK,eACHrB,gBAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AACE,MAAA,OAAO,EAAE4B,oBAAqB;AAC9B,MAAA,KAAK,EAAE;AACLW,QAAAA,UAAU,EAAE,MAAM;AAClBrD,QAAAA,MAAM,EAAE,GAAG;AACXD,QAAAA,UAAU,EAAE,aAAA;AACd,OAAA;AAAE,KAAA,eAEFe,+BAAC,KAAK,EAAA,IAAA,EAAEc,KAAK,CAAS,EAAA,eAAA,EAAI,GAAG,CAEhC;AACD,IAAA,KAAK,EAAEW,aAAc;AACrB,IAAA,eAAe,EAAE,EAAC;AAAE,GAAA,CACpB,CACD,gBAEHzB,gBAAA,CAAA,aAAA,CAAAA,gBAAA,CAAA,QAAA,EAAA,IAAA,eACEA,+BAAC,KAAK,EAAA,IAAA,EAAEc,KAAK,EAAU,GAAA,CAAA,EAAA,GAAA,eAACd,gBAAC,CAAA,aAAA,CAAA,KAAK,QAAEwC,kBAAY,CAACzB,KAAK,CAAC,CAAS,CAE/D,CACK,CAAA;AAEZ,EAAC;AAeD,SAAS0B,UAAU,CAACC,CAAM,EAA0B;AAClD,EAAA,OAAOC,MAAM,CAACC,QAAQ,IAAIF,CAAC,CAAA;AAC7B,CAAA;AAEe,SAASG,QAAQ,CAAC;EAC/B9B,KAAK;EACL+B,eAAe;AACfzB,EAAAA,QAAQ,GAAGT,eAAe;AAC1BQ,EAAAA,QAAQ,GAAG,GAAG;EACd,GAAG2B,IAAAA;AACU,CAAC,EAAE;AAChB,EAAA,MAAM,CAACjD,QAAQ,EAAEkD,WAAW,CAAC,GAAGhD,gBAAK,CAACwB,QAAQ,CAACyB,OAAO,CAACH,eAAe,CAAC,CAAC,CAAA;AACxE,EAAA,MAAM3B,cAAc,GAAGnB,gBAAK,CAACkD,WAAW,CAAC,MAAMF,WAAW,CAAEb,GAAG,IAAK,CAACA,GAAG,CAAC,EAAE,EAAE,CAAC,CAAA;EAE9E,IAAIjB,IAAY,GAAG,OAAOH,KAAK,CAAA;EAC/B,IAAIC,UAAsB,GAAG,EAAE,CAAA;EAE/B,MAAMmC,YAAY,GAAIC,GAAsC,IAAe;AACzE,IAAA,MAAMC,kBAAkB,GACtBP,eAAe,KAAK,IAAI,GACpB;MAAE,CAACM,GAAG,CAACtC,KAAK,GAAG,IAAA;AAAK,KAAC,GACrBgC,eAAe,GAAGM,GAAG,CAACtC,KAAK,CAAC,CAAA;IAClC,OAAO;AACL,MAAA,GAAGsC,GAAG;AACNN,MAAAA,eAAe,EAAEO,kBAAAA;KAClB,CAAA;GACF,CAAA;AAED,EAAA,IAAIC,KAAK,CAACC,OAAO,CAACxC,KAAK,CAAC,EAAE;AACxBG,IAAAA,IAAI,GAAG,OAAO,CAAA;IACdF,UAAU,GAAGD,KAAK,CAACgB,GAAG,CAAC,CAACO,CAAC,EAAE/B,CAAC,KAC1B4C,YAAY,CAAC;AACXrC,MAAAA,KAAK,EAAEP,CAAC,CAACiD,QAAQ,EAAE;AACnBzC,MAAAA,KAAK,EAAEuB,CAAAA;AACT,KAAC,CAAC,CACH,CAAA;GACF,MAAM,IACLvB,KAAK,KAAK,IAAI,IACd,OAAOA,KAAK,KAAK,QAAQ,IACzB0B,UAAU,CAAC1B,KAAK,CAAC,IACjB,OAAOA,KAAK,CAAC4B,MAAM,CAACC,QAAQ,CAAC,KAAK,UAAU,EAC5C;AACA1B,IAAAA,IAAI,GAAG,UAAU,CAAA;AACjBF,IAAAA,UAAU,GAAGsC,KAAK,CAACG,IAAI,CAAC1C,KAAK,EAAE,CAAC2C,GAAG,EAAEnD,CAAC,KACpC4C,YAAY,CAAC;AACXrC,MAAAA,KAAK,EAAEP,CAAC,CAACiD,QAAQ,EAAE;AACnBzC,MAAAA,KAAK,EAAE2C,GAAAA;AACT,KAAC,CAAC,CACH,CAAA;GACF,MAAM,IAAI,OAAO3C,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,IAAI,EAAE;AACtDG,IAAAA,IAAI,GAAG,QAAQ,CAAA;AACfF,IAAAA,UAAU,GAAG2C,MAAM,CAACzB,OAAO,CAACnB,KAAK,CAAC,CAACgB,GAAG,CAAC,CAAC,CAAC6B,GAAG,EAAEF,GAAG,CAAC,KAChDP,YAAY,CAAC;AACXrC,MAAAA,KAAK,EAAE8C,GAAG;AACV7C,MAAAA,KAAK,EAAE2C,GAAAA;AACT,KAAC,CAAC,CACH,CAAA;AACH,GAAA;AAEA,EAAA,MAAMzC,aAAa,GAAGb,UAAU,CAACY,UAAU,EAAEI,QAAQ,CAAC,CAAA;AAEtD,EAAA,OAAOC,QAAQ,CAAC;AACdR,IAAAA,WAAW,EAAGmB,KAAK,iBACjBhC,gBAAA,CAAA,aAAA,CAAC,QAAQ,EAAA6D,oCAAA,CAAA;MACP,GAAG,EAAE7B,KAAK,CAAClB,KAAM;AACjB,MAAA,KAAK,EAAEC,KAAM;AACb,MAAA,QAAQ,EAAEM,QAAAA;KACN0B,EAAAA,IAAI,EACJf,KAAK,CAEZ,CAAA;IACDd,IAAI;IACJF,UAAU;IACVC,aAAa;IACbF,KAAK;IACLjB,QAAQ;IACRqB,cAAc;IACdC,QAAQ;IACR,GAAG2B,IAAAA;AACL,GAAC,CAAC,CAAA;AACJ;;;;;;;;;;;;;;"}
@@ -1,31 +0,0 @@
1
- /**
2
- * react-router-devtools
3
- *
4
- * Copyright (c) TanStack
5
- *
6
- * This source code is licensed under the MIT license found in the
7
- * LICENSE.md file in the root directory of this source tree.
8
- *
9
- * @license MIT
10
- */
11
- 'use strict';
12
-
13
- Object.defineProperty(exports, '__esModule', { value: true });
14
-
15
- function _extends() {
16
- _extends = Object.assign ? Object.assign.bind() : function (target) {
17
- for (var i = 1; i < arguments.length; i++) {
18
- var source = arguments[i];
19
- for (var key in source) {
20
- if (Object.prototype.hasOwnProperty.call(source, key)) {
21
- target[key] = source[key];
22
- }
23
- }
24
- }
25
- return target;
26
- };
27
- return _extends.apply(this, arguments);
28
- }
29
-
30
- exports["extends"] = _extends;
31
- //# sourceMappingURL=_rollupPluginBabelHelpers.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}