@tanstack/react-router-devtools 0.0.1-beta.41 → 0.0.1-beta.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/build/cjs/Explorer.js +35 -43
- package/build/cjs/Explorer.js.map +1 -1
- package/build/cjs/devtools.js +46 -51
- package/build/cjs/devtools.js.map +1 -1
- package/build/cjs/styledComponents.js +0 -32
- package/build/cjs/styledComponents.js.map +1 -1
- package/build/cjs/theme.js +4 -5
- package/build/cjs/theme.js.map +1 -1
- package/build/cjs/useMediaQuery.js +3 -6
- package/build/cjs/useMediaQuery.js.map +1 -1
- package/build/cjs/utils.js +10 -23
- package/build/cjs/utils.js.map +1 -1
- package/build/esm/index.js +98 -160
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +5057 -4480
- package/build/umd/index.development.js +3663 -762
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +3 -3
- package/build/umd/index.production.js.map +1 -1
- package/package.json +3 -3
- package/src/devtools.tsx +44 -38
- package/src/utils.ts +3 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Tanner Linsley
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/build/cjs/Explorer.js
CHANGED
|
@@ -71,20 +71,17 @@ const Info = utils.styled('span', {
|
|
|
71
71
|
color: 'grey',
|
|
72
72
|
fontSize: '.7em'
|
|
73
73
|
});
|
|
74
|
-
const Expander =
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
}, "\u25B6");
|
|
87
|
-
};
|
|
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");
|
|
88
85
|
/**
|
|
89
86
|
* Chunk elements in the array by size
|
|
90
87
|
*
|
|
@@ -104,19 +101,18 @@ function chunkArray(array, size) {
|
|
|
104
101
|
}
|
|
105
102
|
return result;
|
|
106
103
|
}
|
|
107
|
-
const DefaultRenderer =
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
} = _ref2;
|
|
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
|
+
}) => {
|
|
120
116
|
const [expandedPages, setExpandedPages] = React__namespace.useState([]);
|
|
121
117
|
const [valueSnapshot, setValueSnapshot] = React__namespace.useState(undefined);
|
|
122
118
|
const refreshValueSnapshot = () => {
|
|
@@ -149,14 +145,13 @@ const DefaultRenderer = _ref2 => {
|
|
|
149
145
|
function isIterable(x) {
|
|
150
146
|
return Symbol.iterator in x;
|
|
151
147
|
}
|
|
152
|
-
function Explorer(
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
} = _ref3;
|
|
148
|
+
function Explorer({
|
|
149
|
+
value,
|
|
150
|
+
defaultExpanded,
|
|
151
|
+
renderer = DefaultRenderer,
|
|
152
|
+
pageSize = 100,
|
|
153
|
+
...rest
|
|
154
|
+
}) {
|
|
160
155
|
const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
|
|
161
156
|
const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
|
|
162
157
|
let type = typeof value;
|
|
@@ -164,7 +159,7 @@ function Explorer(_ref3) {
|
|
|
164
159
|
const makeProperty = sub => {
|
|
165
160
|
const subDefaultExpanded = defaultExpanded === true ? {
|
|
166
161
|
[sub.label]: true
|
|
167
|
-
} : defaultExpanded
|
|
162
|
+
} : defaultExpanded?.[sub.label];
|
|
168
163
|
return {
|
|
169
164
|
...sub,
|
|
170
165
|
defaultExpanded: subDefaultExpanded
|
|
@@ -184,13 +179,10 @@ function Explorer(_ref3) {
|
|
|
184
179
|
}));
|
|
185
180
|
} else if (typeof value === 'object' && value !== null) {
|
|
186
181
|
type = 'object';
|
|
187
|
-
subEntries = Object.entries(value).map(
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
value: val
|
|
192
|
-
});
|
|
193
|
-
});
|
|
182
|
+
subEntries = Object.entries(value).map(([key, val]) => makeProperty({
|
|
183
|
+
label: key,
|
|
184
|
+
value: val
|
|
185
|
+
}));
|
|
194
186
|
}
|
|
195
187
|
const subEntryPages = chunkArray(subEntries, pageSize);
|
|
196
188
|
return renderer({
|
|
@@ -1 +1 @@
|
|
|
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":"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"}
|
|
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":"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"}
|
package/build/cjs/devtools.js
CHANGED
|
@@ -56,16 +56,15 @@ function Logo(props) {
|
|
|
56
56
|
}
|
|
57
57
|
}, "ROUTER"));
|
|
58
58
|
}
|
|
59
|
-
function TanStackRouterDevtools(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
} = _ref;
|
|
59
|
+
function TanStackRouterDevtools({
|
|
60
|
+
initialIsOpen,
|
|
61
|
+
panelProps = {},
|
|
62
|
+
closeButtonProps = {},
|
|
63
|
+
toggleButtonProps = {},
|
|
64
|
+
position = 'bottom-left',
|
|
65
|
+
containerElement: Container = 'footer',
|
|
66
|
+
router
|
|
67
|
+
}) {
|
|
69
68
|
const rootRef = React__default["default"].useRef(null);
|
|
70
69
|
const panelRef = React__default["default"].useRef(null);
|
|
71
70
|
const [isOpen, setIsOpen] = useLocalStorage["default"]('tanstackRouterDevtoolsOpen', initialIsOpen);
|
|
@@ -78,12 +77,12 @@ function TanStackRouterDevtools(_ref) {
|
|
|
78
77
|
|
|
79
78
|
setIsResizing(true);
|
|
80
79
|
const dragInfo = {
|
|
81
|
-
originalHeight:
|
|
80
|
+
originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
|
|
82
81
|
pageY: startEvent.pageY
|
|
83
82
|
};
|
|
84
83
|
const run = moveEvent => {
|
|
85
84
|
const delta = dragInfo.pageY - moveEvent.pageY;
|
|
86
|
-
const newHeight =
|
|
85
|
+
const newHeight = dragInfo?.originalHeight + delta;
|
|
87
86
|
setDevtoolsHeight(newHeight);
|
|
88
87
|
if (newHeight < 70) {
|
|
89
88
|
setIsOpen(false);
|
|
@@ -129,12 +128,10 @@ function TanStackRouterDevtools(_ref) {
|
|
|
129
128
|
}, [isResolvedOpen]);
|
|
130
129
|
React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
|
|
131
130
|
if (isResolvedOpen) {
|
|
132
|
-
|
|
133
|
-
const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
|
|
131
|
+
const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
|
|
134
132
|
const run = () => {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
|
|
133
|
+
const containerHeight = panelRef.current?.getBoundingClientRect().height;
|
|
134
|
+
if (rootRef.current?.parentElement) {
|
|
138
135
|
rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
|
|
139
136
|
}
|
|
140
137
|
};
|
|
@@ -142,9 +139,8 @@ function TanStackRouterDevtools(_ref) {
|
|
|
142
139
|
if (typeof window !== 'undefined') {
|
|
143
140
|
window.addEventListener('resize', run);
|
|
144
141
|
return () => {
|
|
145
|
-
var _rootRef$current3;
|
|
146
142
|
window.removeEventListener('resize', run);
|
|
147
|
-
if (
|
|
143
|
+
if (rootRef.current?.parentElement && typeof previousValue === 'string') {
|
|
148
144
|
rootRef.current.parentElement.style.paddingBottom = previousValue;
|
|
149
145
|
}
|
|
150
146
|
};
|
|
@@ -274,7 +270,6 @@ function TanStackRouterDevtools(_ref) {
|
|
|
274
270
|
})) : null);
|
|
275
271
|
}
|
|
276
272
|
const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
|
|
277
|
-
var _Object$values, _Object$values$find, _router$store$current, _router$store$pending, _router$store$pending2, _last, _last2, _last3, _last4, _last5, _last6;
|
|
278
273
|
const {
|
|
279
274
|
isOpen = true,
|
|
280
275
|
setIsOpen,
|
|
@@ -283,7 +278,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
283
278
|
...panelProps
|
|
284
279
|
} = props;
|
|
285
280
|
const routerContextValue = React__default["default"].useContext(reactRouter.routerContext);
|
|
286
|
-
const router = userRouter ??
|
|
281
|
+
const router = userRouter ?? routerContextValue?.router;
|
|
287
282
|
reactRouter.invariant(router, 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.');
|
|
288
283
|
reactRouter.useRouterStore();
|
|
289
284
|
const [activeRouteId, setActiveRouteId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveRouteId', '');
|
|
@@ -291,11 +286,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
291
286
|
React__default["default"].useEffect(() => {
|
|
292
287
|
setActiveMatchId('');
|
|
293
288
|
}, [activeRouteId]);
|
|
294
|
-
const activeMatch =
|
|
295
|
-
const matchCacheValues = utils.multiSortBy(Object.keys(router.store.matchCache).filter(key => {
|
|
296
|
-
const cacheEntry = router.store.matchCache[key];
|
|
289
|
+
const activeMatch = Object.values(router.store.state.matchCache)?.find(d => d.match.id === activeMatchId)?.match ?? router.store.state.currentMatches?.find(d => d.route.id === activeRouteId);
|
|
290
|
+
const matchCacheValues = utils.multiSortBy(Object.keys(router.store.state.matchCache).filter(key => {
|
|
291
|
+
const cacheEntry = router.store.state.matchCache[key];
|
|
297
292
|
return cacheEntry.gc > Date.now();
|
|
298
|
-
}).map(key => router.store.matchCache[key]), [d => d.match.store.isFetching ? -1 : 1, d => -d.match.store.updatedAt]);
|
|
293
|
+
}).map(key => router.store.state.matchCache[key]), [d => d.match.store.state.isFetching ? -1 : 1, d => -d.match.store.state.updatedAt]);
|
|
299
294
|
return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
|
|
300
295
|
theme: theme.defaultTheme
|
|
301
296
|
}, /*#__PURE__*/React__default["default"].createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
|
|
@@ -420,12 +415,12 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
420
415
|
top: 0,
|
|
421
416
|
zIndex: 1
|
|
422
417
|
}
|
|
423
|
-
}, "Active Matches"), router.store.currentMatches.map((match, i) => {
|
|
418
|
+
}, "Active Matches"), router.store.state.currentMatches.map((match, i) => {
|
|
424
419
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
425
|
-
key: match.
|
|
420
|
+
key: match.route.id || i,
|
|
426
421
|
role: "button",
|
|
427
|
-
"aria-label": `Open match details for ${match.
|
|
428
|
-
onClick: () => setActiveRouteId(activeRouteId === match.
|
|
422
|
+
"aria-label": `Open match details for ${match.route.id}`,
|
|
423
|
+
onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
|
|
429
424
|
style: {
|
|
430
425
|
display: 'flex',
|
|
431
426
|
borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
|
|
@@ -450,8 +445,8 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
450
445
|
style: {
|
|
451
446
|
padding: '.5em'
|
|
452
447
|
}
|
|
453
|
-
}, `${match.
|
|
454
|
-
}),
|
|
448
|
+
}, `${match.id}`));
|
|
449
|
+
}), router.store.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
455
450
|
style: {
|
|
456
451
|
marginTop: '2rem',
|
|
457
452
|
padding: '.5em',
|
|
@@ -460,12 +455,12 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
460
455
|
top: 0,
|
|
461
456
|
zIndex: 1
|
|
462
457
|
}
|
|
463
|
-
}, "Pending Matches"),
|
|
458
|
+
}, "Pending Matches"), router.store.state.pendingMatches?.map((match, i) => {
|
|
464
459
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
465
|
-
key: match.
|
|
460
|
+
key: match.route.id || i,
|
|
466
461
|
role: "button",
|
|
467
|
-
"aria-label": `Open match details for ${match.
|
|
468
|
-
onClick: () => setActiveRouteId(activeRouteId === match.
|
|
462
|
+
"aria-label": `Open match details for ${match.route.id}`,
|
|
463
|
+
onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
|
|
469
464
|
style: {
|
|
470
465
|
display: 'flex',
|
|
471
466
|
borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
|
|
@@ -489,7 +484,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
489
484
|
style: {
|
|
490
485
|
padding: '.5em'
|
|
491
486
|
}
|
|
492
|
-
}, `${match.
|
|
487
|
+
}, `${match.id}`));
|
|
493
488
|
})) : null, matchCacheValues.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
494
489
|
style: {
|
|
495
490
|
marginTop: '2rem',
|
|
@@ -505,7 +500,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
505
500
|
}
|
|
506
501
|
}, /*#__PURE__*/React__default["default"].createElement("div", null, "Match Cache"), /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
|
|
507
502
|
onClick: () => {
|
|
508
|
-
router.
|
|
503
|
+
router.store.setState(s => s.matchCache = {});
|
|
509
504
|
}
|
|
510
505
|
}, "Clear")), matchCacheValues.map((d, i) => {
|
|
511
506
|
const {
|
|
@@ -513,10 +508,10 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
513
508
|
gc
|
|
514
509
|
} = d;
|
|
515
510
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
516
|
-
key: match.
|
|
511
|
+
key: match.id || i,
|
|
517
512
|
role: "button",
|
|
518
|
-
"aria-label": `Open match details for ${match.
|
|
519
|
-
onClick: () => setActiveMatchId(activeMatchId === match.
|
|
513
|
+
"aria-label": `Open match details for ${match.id}`,
|
|
514
|
+
onClick: () => setActiveMatchId(activeMatchId === match.id ? '' : match.id),
|
|
520
515
|
style: {
|
|
521
516
|
display: 'flex',
|
|
522
517
|
borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
|
|
@@ -548,7 +543,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
548
543
|
borderRadius: '.25rem',
|
|
549
544
|
transition: 'all .2s ease-out'
|
|
550
545
|
}
|
|
551
|
-
}), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, null, `${match.
|
|
546
|
+
}), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, null, `${match.id}`)), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
552
547
|
style: {
|
|
553
548
|
fontSize: '.7rem',
|
|
554
549
|
opacity: '.5',
|
|
@@ -574,19 +569,19 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
574
569
|
style: {
|
|
575
570
|
lineHeight: '1.8em'
|
|
576
571
|
}
|
|
577
|
-
}, JSON.stringify(activeMatch.
|
|
572
|
+
}, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
578
573
|
style: {
|
|
579
574
|
opacity: '.5'
|
|
580
575
|
}
|
|
581
|
-
}, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
576
|
+
}, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
582
577
|
style: {
|
|
583
578
|
opacity: '.5'
|
|
584
579
|
}
|
|
585
|
-
}, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.
|
|
580
|
+
}, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.getIsInvalid().toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
586
581
|
style: {
|
|
587
582
|
opacity: '.5'
|
|
588
583
|
}
|
|
589
|
-
}, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.updatedAt ? new Date(activeMatch.store.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
584
|
+
}, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.state.updatedAt ? new Date(activeMatch.store.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
590
585
|
style: {
|
|
591
586
|
background: theme.defaultTheme.backgroundAlt,
|
|
592
587
|
padding: '.5em',
|
|
@@ -654,9 +649,9 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
654
649
|
style: {
|
|
655
650
|
padding: '.5em'
|
|
656
651
|
}
|
|
657
|
-
}, Object.keys(
|
|
658
|
-
value:
|
|
659
|
-
defaultExpanded: Object.keys(
|
|
652
|
+
}, Object.keys(reactRouter.last(router.store.state.currentMatches)?.store.state.loaderData || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
|
|
653
|
+
value: reactRouter.last(router.store.state.currentMatches)?.store.state.loaderData || {},
|
|
654
|
+
defaultExpanded: Object.keys(reactRouter.last(router.store.state.currentMatches)?.store.state.loaderData || {}).reduce((obj, next) => {
|
|
660
655
|
obj[next] = {};
|
|
661
656
|
return obj;
|
|
662
657
|
}, {})
|
|
@@ -677,9 +672,9 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
|
|
|
677
672
|
style: {
|
|
678
673
|
padding: '.5em'
|
|
679
674
|
}
|
|
680
|
-
}, Object.keys(
|
|
681
|
-
value:
|
|
682
|
-
defaultExpanded: Object.keys(
|
|
675
|
+
}, Object.keys(reactRouter.last(router.store.state.currentMatches)?.store.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
|
|
676
|
+
value: reactRouter.last(router.store.state.currentMatches)?.store.state.search || {},
|
|
677
|
+
defaultExpanded: Object.keys(reactRouter.last(router.store.state.currentMatches)?.store.state.search || {}).reduce((obj, next) => {
|
|
683
678
|
obj[next] = {};
|
|
684
679
|
return obj;
|
|
685
680
|
}, {})
|