@tanstack/router-devtools 1.17.0 → 1.17.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 (11) hide show
  1. package/dist/cjs/Explorer.cjs +19 -13
  2. package/dist/cjs/Explorer.cjs.map +1 -1
  3. package/dist/cjs/devtools.cjs +95 -83
  4. package/dist/cjs/devtools.cjs.map +1 -1
  5. package/dist/esm/Explorer.js +19 -13
  6. package/dist/esm/Explorer.js.map +1 -1
  7. package/dist/esm/devtools.js +95 -83
  8. package/dist/esm/devtools.js.map +1 -1
  9. package/package.json +3 -2
  10. package/src/Explorer.tsx +21 -14
  11. package/src/devtools.tsx +93 -84
package/dist/cjs/Explorer.cjs CHANGED
@@ -2,10 +2,10 @@
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
- const goober = require("goober");
6
5
  const clsx = require("clsx");
7
6
  const tokens = require("./tokens.cjs");
8
7
  const utils = require("./utils.cjs");
8
+ const goober = require("goober");
9
9
  function _interopNamespaceDefault(e) {
10
10
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
11
11
  if (e) {
@@ -23,7 +23,7 @@ function _interopNamespaceDefault(e) {
23
23
  return Object.freeze(n);
24
24
  }
25
25
  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
26
- const Expander = ({ expanded, style = {} }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.expander, children: /* @__PURE__ */ jsxRuntime.jsx(
26
+ const Expander = ({ expanded, style = {} }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: getStyles().expander, children: /* @__PURE__ */ jsxRuntime.jsx(
27
27
  "svg",
28
28
  {
29
29
  xmlns: "http://www.w3.org/2000/svg",
@@ -31,7 +31,7 @@ const Expander = ({ expanded, style = {} }) => /* @__PURE__ */ jsxRuntime.jsx("s
31
31
  height: "12",
32
32
  fill: "none",
33
33
  viewBox: "0 0 24 24",
34
- className: clsx.clsx(styles.expanderIcon(expanded)),
34
+ className: clsx.clsx(getStyles().expanderIcon(expanded)),
35
35
  children: /* @__PURE__ */ jsxRuntime.jsx(
36
36
  "path",
37
37
  {
@@ -72,16 +72,16 @@ const DefaultRenderer = ({
72
72
  const refreshValueSnapshot = () => {
73
73
  setValueSnapshot(value());
74
74
  };
75
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.entry, children: subEntryPages.length ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
75
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().entry, children: subEntryPages.length ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
76
76
  /* @__PURE__ */ jsxRuntime.jsxs(
77
77
  "button",
78
78
  {
79
- className: styles.expandButton,
79
+ className: getStyles().expandButton,
80
80
  onClick: () => toggleExpanded(),
81
81
  children: [
82
82
  /* @__PURE__ */ jsxRuntime.jsx(Expander, { expanded }),
83
83
  label,
84
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.info, children: [
84
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: getStyles().info, children: [
85
85
  String(type).toLowerCase() === "iterable" ? "(Iterable) " : "",
86
86
  subEntries.length,
87
87
  " ",
@@ -90,12 +90,12 @@ const DefaultRenderer = ({
90
90
  ]
91
91
  }
92
92
  ),
93
- expanded ? subEntryPages.length === 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subEntries, children: subEntries.map((entry, index) => handleEntry(entry)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subEntries, children: subEntryPages.map((entries, index) => {
94
- return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.entry, children: [
93
+ expanded ? subEntryPages.length === 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().subEntries, children: subEntries.map((entry, index) => handleEntry(entry)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().subEntries, children: subEntryPages.map((entries, index) => {
94
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().entry, children: [
95
95
  /* @__PURE__ */ jsxRuntime.jsxs(
96
96
  "button",
97
97
  {
98
- className: clsx.clsx(styles.labelButton, "labelButton"),
98
+ className: clsx.clsx(getStyles().labelButton, "labelButton"),
99
99
  onClick: () => setExpandedPages(
100
100
  (old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
101
101
  ),
@@ -111,7 +111,7 @@ const DefaultRenderer = ({
111
111
  ]
112
112
  }
113
113
  ),
114
- expandedPages.includes(index) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subEntries, children: entries.map((entry) => handleEntry(entry)) }) : null
114
+ expandedPages.includes(index) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().subEntries, children: entries.map((entry) => handleEntry(entry)) }) : null
115
115
  ] }) }, index);
116
116
  }) }) : null
117
117
  ] }) : type === "function" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -122,7 +122,7 @@ const DefaultRenderer = ({
122
122
  "button",
123
123
  {
124
124
  onClick: refreshValueSnapshot,
125
- className: styles.refreshValueBtn,
125
+ className: getStyles().refreshValueBtn,
126
126
  children: [
127
127
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
128
128
  " 🔄",
@@ -139,7 +139,7 @@ const DefaultRenderer = ({
139
139
  ":"
140
140
  ] }),
141
141
  " ",
142
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.value, children: utils.displayValue(value) })
142
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: getStyles().value, children: utils.displayValue(value) })
143
143
  ] }) });
144
144
  };
145
145
  function isIterable(x) {
@@ -292,7 +292,13 @@ const stylesFactory = () => {
292
292
  `
293
293
  };
294
294
  };
295
- const styles = stylesFactory();
295
+ let _styles = null;
296
+ function getStyles() {
297
+ if (_styles)
298
+ return _styles;
299
+ _styles = stylesFactory();
300
+ return _styles;
301
+ }
296
302
  exports.DefaultRenderer = DefaultRenderer;
297
303
  exports.Expander = Expander;
298
304
  exports.chunkArray = chunkArray;
package/dist/cjs/Explorer.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Explorer.cjs","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { css } from 'goober'\nimport { clsx as cx } from 'clsx'\nimport { tokens } from './tokens'\nimport { displayValue, styled } from './utils'\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n <span className={styles.expander}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n className={cx(styles.expanderIcon(expanded))}\n >\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M9 18l6-6-6-6\"\n ></path>\n </svg>\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 filterSubEntries?: (subEntries: Property[]) => Property[]\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 <div className={styles.entry}>\n {subEntryPages.length ? (\n <>\n <button\n className={styles.expandButton}\n onClick={() => toggleExpanded()}\n >\n <Expander expanded={expanded} />\n {label}\n <span className={styles.info}>\n {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n </span>\n </button>\n {expanded ? (\n subEntryPages.length === 1 ? (\n <div className={styles.subEntries}>\n {subEntries.map((entry, index) => handleEntry(entry))}\n </div>\n ) : (\n <div className={styles.subEntries}>\n {subEntryPages.map((entries, index) => {\n return (\n <div key={index}>\n <div className={styles.entry}>\n <button\n className={cx(styles.labelButton, '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={expandedPages.includes(index)} />{' '}\n [{index * pageSize} ...{' '}\n {index * pageSize + pageSize - 1}]\n </button>\n {expandedPages.includes(index) ? (\n <div className={styles.subEntries}>\n {entries.map((entry) => handleEntry(entry))}\n </div>\n ) : null}\n </div>\n </div>\n )\n })}\n </div>\n )\n ) : null}\n </>\n ) : type === 'function' ? (\n <>\n <Explorer\n renderer={renderer}\n label={\n <button\n onClick={refreshValueSnapshot}\n className={styles.refreshValueBtn}\n >\n <span>{label}</span> 🔄{' '}\n </button>\n }\n value={valueSnapshot}\n defaultExpanded={{}}\n />\n </>\n ) : (\n <>\n <span>{label}:</span>{' '}\n <span className={styles.value}>{displayValue(value)}</span>\n </>\n )}\n </div>\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 filterSubEntries,\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 subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries\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 filterSubEntries={filterSubEntries}\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\nconst stylesFactory = () => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n\n return {\n entry: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n line-height: ${lineHeight.sm};\n outline: none;\n word-break: break-word;\n `,\n labelButton: css`\n cursor: pointer;\n color: inherit;\n font: inherit;\n outline: inherit;\n background: transparent;\n border: none;\n padding: 0;\n `,\n expander: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${size[3]};\n height: ${size[3]};\n padding-left: 3px;\n box-sizing: content-box;\n `,\n expanderIcon: (expanded: boolean) => {\n if (expanded) {\n return css`\n transform: rotate(90deg);\n transition: transform 0.1s ease;\n `\n }\n return css`\n transform: rotate(0deg);\n transition: transform 0.1s ease;\n `\n },\n expandButton: css`\n display: flex;\n gap: ${size[1]};\n align-items: center;\n cursor: pointer;\n color: inherit;\n font: inherit;\n outline: inherit;\n background: transparent;\n border: none;\n padding: 0;\n `,\n value: css`\n color: ${colors.purple[400]};\n `,\n subEntries: css`\n margin-left: ${size[2]};\n padding-left: ${size[2]};\n border-left: 2px solid ${colors.darkGray[400]};\n `,\n info: css`\n color: ${colors.gray[500]};\n font-size: ${fontSize['2xs']};\n padding-left: ${size[1]};\n `,\n refreshValueBtn: css`\n appearance: none;\n border: 0;\n cursor: pointer;\n background: transparent;\n color: inherit;\n padding: 0;\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n `,\n }\n}\n\nconst styles = stylesFactory()\n"],"names":["jsx","cx","React","jsxs","Fragment","displayValue","tokens","css"],"mappings":"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"}
1
+ {"version":3,"file":"Explorer.cjs","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { clsx as cx } from 'clsx'\nimport { tokens } from './tokens'\nimport { displayValue, styled } from './utils'\nimport { css } from 'goober'\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n <span className={getStyles().expander}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n className={cx(getStyles().expanderIcon(expanded))}\n >\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M9 18l6-6-6-6\"\n ></path>\n </svg>\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 filterSubEntries?: (subEntries: Property[]) => Property[]\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 <div className={getStyles().entry}>\n {subEntryPages.length ? (\n <>\n <button\n className={getStyles().expandButton}\n onClick={() => toggleExpanded()}\n >\n <Expander expanded={expanded} />\n {label}\n <span className={getStyles().info}>\n {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n </span>\n </button>\n {expanded ? (\n subEntryPages.length === 1 ? (\n <div className={getStyles().subEntries}>\n {subEntries.map((entry, index) => handleEntry(entry))}\n </div>\n ) : (\n <div className={getStyles().subEntries}>\n {subEntryPages.map((entries, index) => {\n return (\n <div key={index}>\n <div className={getStyles().entry}>\n <button\n className={cx(getStyles().labelButton, '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={expandedPages.includes(index)} />{' '}\n [{index * pageSize} ...{' '}\n {index * pageSize + pageSize - 1}]\n </button>\n {expandedPages.includes(index) ? (\n <div className={getStyles().subEntries}>\n {entries.map((entry) => handleEntry(entry))}\n </div>\n ) : null}\n </div>\n </div>\n )\n })}\n </div>\n )\n ) : null}\n </>\n ) : type === 'function' ? (\n <>\n <Explorer\n renderer={renderer}\n label={\n <button\n onClick={refreshValueSnapshot}\n className={getStyles().refreshValueBtn}\n >\n <span>{label}</span> 🔄{' '}\n </button>\n }\n value={valueSnapshot}\n defaultExpanded={{}}\n />\n </>\n ) : (\n <>\n <span>{label}:</span>{' '}\n <span className={getStyles().value}>{displayValue(value)}</span>\n </>\n )}\n </div>\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 filterSubEntries,\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 subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries\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 filterSubEntries={filterSubEntries}\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\nconst stylesFactory = () => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n\n return {\n entry: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n line-height: ${lineHeight.sm};\n outline: none;\n word-break: break-word;\n `,\n labelButton: css`\n cursor: pointer;\n color: inherit;\n font: inherit;\n outline: inherit;\n background: transparent;\n border: none;\n padding: 0;\n `,\n expander: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${size[3]};\n height: ${size[3]};\n padding-left: 3px;\n box-sizing: content-box;\n `,\n expanderIcon: (expanded: boolean) => {\n if (expanded) {\n return css`\n transform: rotate(90deg);\n transition: transform 0.1s ease;\n `\n }\n return css`\n transform: rotate(0deg);\n transition: transform 0.1s ease;\n `\n },\n expandButton: css`\n display: flex;\n gap: ${size[1]};\n align-items: center;\n cursor: pointer;\n color: inherit;\n font: inherit;\n outline: inherit;\n background: transparent;\n border: none;\n padding: 0;\n `,\n value: css`\n color: ${colors.purple[400]};\n `,\n subEntries: css`\n margin-left: ${size[2]};\n padding-left: ${size[2]};\n border-left: 2px solid ${colors.darkGray[400]};\n `,\n info: css`\n color: ${colors.gray[500]};\n font-size: ${fontSize['2xs']};\n padding-left: ${size[1]};\n `,\n refreshValueBtn: css`\n appearance: none;\n border: 0;\n cursor: pointer;\n background: transparent;\n color: inherit;\n padding: 0;\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n `,\n }\n}\n\nlet _styles: ReturnType<typeof stylesFactory> | null = null\n\nfunction getStyles() {\n if (_styles) return _styles\n _styles = stylesFactory()\n\n return _styles\n}\n"],"names":["jsx","cx","React","jsxs","Fragment","displayValue","tokens","css"],"mappings":"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"}
package/dist/cjs/devtools.cjs CHANGED
@@ -10,12 +10,11 @@ const clsx = require("clsx");
10
10
  const Explorer = require("./Explorer.cjs");
11
11
  const tokens = require("./tokens.cjs");
12
12
  const logo = require("./logo.cjs");
13
- const isServer = typeof window === "undefined";
14
13
  function Logo(props) {
15
14
  const { className, ...rest } = props;
16
- return /* @__PURE__ */ jsxRuntime.jsxs("button", { ...rest, className: clsx.clsx(styles.logo, className), children: [
17
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.tanstackLogo, children: "TANSTACK" }),
18
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerLogo, children: "React Router v1" })
15
+ return /* @__PURE__ */ jsxRuntime.jsxs("button", { ...rest, className: clsx.clsx(getStyles().logo, className), children: [
16
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().tanstackLogo, children: "TANSTACK" }),
17
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerLogo, children: "React Router v1" })
19
18
  ] });
20
19
  }
21
20
  const DevtoolsOnCloseContext = React.createContext(void 0);
@@ -37,7 +36,7 @@ function TanStackRouterDevtools({
37
36
  containerElement: Container = "footer",
38
37
  router
39
38
  }) {
40
- const rootRef = React.useRef(null);
39
+ const [rootEl, setRootEl] = React.useState(null);
41
40
  const panelRef = React.useRef(null);
42
41
  const [isOpen, setIsOpen] = useLocalStorage(
43
42
  "tanstackRouterDevtoolsOpen",
@@ -80,38 +79,37 @@ function TanStackRouterDevtools({
80
79
  React.useEffect(() => {
81
80
  setIsResolvedOpen(isOpen ?? false);
82
81
  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
83
- React[isServer ? "useEffect" : "useLayoutEffect"](() => {
84
- var _a, _b;
82
+ React.useEffect(() => {
83
+ var _a;
85
84
  if (isResolvedOpen) {
86
- const previousValue = (_b = (_a = rootRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
85
+ const previousValue = (_a = rootEl == null ? void 0 : rootEl.parentElement) == null ? void 0 : _a.style.paddingBottom;
87
86
  const run = () => {
88
- var _a2, _b2;
87
+ var _a2;
89
88
  const containerHeight = (_a2 = panelRef.current) == null ? void 0 : _a2.getBoundingClientRect().height;
90
- if ((_b2 = rootRef.current) == null ? void 0 : _b2.parentElement) {
91
- rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
89
+ if (rootEl == null ? void 0 : rootEl.parentElement) {
90
+ rootEl.parentElement.style.paddingBottom = `${containerHeight}px`;
92
91
  }
93
92
  };
94
93
  run();
95
94
  if (typeof window !== "undefined") {
96
95
  window.addEventListener("resize", run);
97
96
  return () => {
98
- var _a2;
99
97
  window.removeEventListener("resize", run);
100
- if (((_a2 = rootRef.current) == null ? void 0 : _a2.parentElement) && typeof previousValue === "string") {
101
- rootRef.current.parentElement.style.paddingBottom = previousValue;
98
+ if ((rootEl == null ? void 0 : rootEl.parentElement) && typeof previousValue === "string") {
99
+ rootEl.parentElement.style.paddingBottom = previousValue;
102
100
  }
103
101
  };
104
102
  }
105
103
  }
106
104
  return;
107
105
  }, [isResolvedOpen]);
108
- React[isServer ? "useEffect" : "useLayoutEffect"](() => {
109
- if (rootRef.current) {
110
- const el = rootRef.current;
106
+ React.useEffect(() => {
107
+ if (rootEl) {
108
+ const el = rootEl;
111
109
  const fontSize = getComputedStyle(el).fontSize;
112
110
  el.style.setProperty("--tsrd-font-size", fontSize);
113
111
  }
114
- }, [rootRef.current]);
112
+ }, [rootEl]);
115
113
  const { style: panelStyle = {}, ...otherPanelProps } = panelProps;
116
114
  const {
117
115
  style: closeButtonStyle = {},
@@ -126,7 +124,7 @@ function TanStackRouterDevtools({
126
124
  if (!isMounted())
127
125
  return null;
128
126
  const resolvedHeight = devtoolsHeight ?? 500;
129
- return /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref: rootRef, className: "TanStackRouterDevtools", children: [
127
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref: setRootEl, className: "TanStackRouterDevtools", children: [
130
128
  /* @__PURE__ */ jsxRuntime.jsx(
131
129
  DevtoolsOnCloseContext.Provider,
132
130
  {
@@ -141,10 +139,10 @@ function TanStackRouterDevtools({
141
139
  ...otherPanelProps,
142
140
  router,
143
141
  className: clsx.clsx(
144
- styles.devtoolsPanelContainer,
145
- styles.devtoolsPanelContainerVisibility(!!isOpen),
146
- styles.devtoolsPanelContainerResizing(isResizing),
147
- styles.devtoolsPanelContainerAnimation(
142
+ getStyles().devtoolsPanelContainer,
143
+ getStyles().devtoolsPanelContainerVisibility(!!isOpen),
144
+ getStyles().devtoolsPanelContainerResizing(isResizing),
145
+ getStyles().devtoolsPanelContainerAnimation(
148
146
  isResolvedOpen,
149
147
  resolvedHeight + 16
150
148
  )
@@ -171,17 +169,17 @@ function TanStackRouterDevtools({
171
169
  onToggleClick && onToggleClick(e);
172
170
  },
173
171
  className: clsx.clsx(
174
- styles.mainCloseBtn,
175
- styles.mainCloseBtnPosition(position),
176
- styles.mainCloseBtnAnimation(!isButtonClosed)
172
+ getStyles().mainCloseBtn,
173
+ getStyles().mainCloseBtnPosition(position),
174
+ getStyles().mainCloseBtnAnimation(!isButtonClosed)
177
175
  ),
178
176
  children: [
179
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mainCloseBtnIconContainer, children: [
180
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnIconOuter, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) }),
181
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) })
177
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().mainCloseBtnIconContainer, children: [
178
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().mainCloseBtnIconOuter, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) }),
179
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().mainCloseBtnIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) })
182
180
  ] }),
183
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnDivider, children: "-" }),
184
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerLogoCloseButton, children: "React Router" })
181
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().mainCloseBtnDivider, children: "-" }),
182
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerLogoCloseButton, children: "React Router" })
185
183
  ]
186
184
  }
187
185
  )
@@ -226,31 +224,31 @@ function RouteComp({
226
224
  }
227
225
  },
228
226
  className: clsx.clsx(
229
- styles.routesRowContainer(route.id === activeId, !!match)
227
+ getStyles().routesRowContainer(route.id === activeId, !!match)
230
228
  ),
231
229
  children: [
232
230
  /* @__PURE__ */ jsxRuntime.jsx(
233
231
  "div",
234
232
  {
235
233
  className: clsx.clsx(
236
- styles.matchIndicator(utils.getRouteStatusColor(matches, route))
234
+ getStyles().matchIndicator(utils.getRouteStatusColor(matches, route))
237
235
  )
238
236
  }
239
237
  ),
240
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.routesRow(!!match)), children: [
238
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(getStyles().routesRow(!!match)), children: [
241
239
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
242
- /* @__PURE__ */ jsxRuntime.jsxs("code", { className: styles.code, children: [
240
+ /* @__PURE__ */ jsxRuntime.jsxs("code", { className: getStyles().code, children: [
243
241
  isRoot ? "__root__" : route.path || reactRouter.trimPath(route.id),
244
242
  " "
245
243
  ] }),
246
- /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles.routeParamInfo, children: param })
244
+ /* @__PURE__ */ jsxRuntime.jsx("code", { className: getStyles().routeParamInfo, children: param })
247
245
  ] }),
248
246
  /* @__PURE__ */ jsxRuntime.jsx(AgeTicker, { match })
249
247
  ] })
250
248
  ]
251
249
  }
252
250
  ),
253
- ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
251
+ ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
254
252
  return a.rank - b.rank;
255
253
  }).map((r) => /* @__PURE__ */ jsxRuntime.jsx(
256
254
  RouteComp,
@@ -310,17 +308,23 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
310
308
  {
311
309
  ref,
312
310
  className: clsx.clsx(
313
- styles.devtoolsPanel,
311
+ getStyles().devtoolsPanel,
314
312
  "TanStackRouterDevtoolsPanel",
315
313
  className
316
314
  ),
317
315
  ...otherPanelProps,
318
316
  children: [
319
- handleDragStart ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dragHandle, onMouseDown: handleDragStart }) : null,
317
+ handleDragStart ? /* @__PURE__ */ jsxRuntime.jsx(
318
+ "div",
319
+ {
320
+ className: getStyles().dragHandle,
321
+ onMouseDown: handleDragStart
322
+ }
323
+ ) : null,
320
324
  /* @__PURE__ */ jsxRuntime.jsx(
321
325
  "button",
322
326
  {
323
- className: styles.panelCloseBtn,
327
+ className: getStyles().panelCloseBtn,
324
328
  onClick: (e) => {
325
329
  setIsOpen(false);
326
330
  onCloseClick(e);
@@ -333,7 +337,7 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
333
337
  height: "6",
334
338
  fill: "none",
335
339
  viewBox: "0 0 10 6",
336
- className: styles.panelCloseBtnIcon,
340
+ className: getStyles().panelCloseBtnIcon,
337
341
  children: /* @__PURE__ */ jsxRuntime.jsx(
338
342
  "path",
339
343
  {
@@ -348,8 +352,8 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
348
352
  )
349
353
  }
350
354
  ),
351
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.firstContainer, children: [
352
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.row, children: /* @__PURE__ */ jsxRuntime.jsx(
355
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().firstContainer, children: [
356
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().row, children: /* @__PURE__ */ jsxRuntime.jsx(
353
357
  Logo,
354
358
  {
355
359
  "aria-hidden": true,
@@ -359,7 +363,7 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
359
363
  }
360
364
  }
361
365
  ) }),
362
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerExplorerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerExplorer, children: /* @__PURE__ */ jsxRuntime.jsx(
366
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerExplorerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerExplorer, children: /* @__PURE__ */ jsxRuntime.jsx(
363
367
  Explorer.default,
364
368
  {
365
369
  label: "Router",
@@ -400,18 +404,18 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
400
404
  }
401
405
  ) }) })
402
406
  ] }),
403
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.secondContainer, children: [
404
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchesContainer, children: [
405
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsHeader, children: [
407
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().secondContainer, children: [
408
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchesContainer, children: [
409
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsHeader, children: [
406
410
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pathname" }),
407
- routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.maskedBadgeContainer, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.maskedBadge, children: "masked" }) }) : null
411
+ routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().maskedBadgeContainer, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: getStyles().maskedBadge, children: "masked" }) }) : null
408
412
  ] }),
409
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsContent, children: [
413
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsContent, children: [
410
414
  /* @__PURE__ */ jsxRuntime.jsx("code", { children: routerState.location.pathname }),
411
- routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles.maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
415
+ routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: getStyles().maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
412
416
  ] }),
413
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsHeader, children: [
414
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.routeMatchesToggle, children: [
417
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsHeader, children: [
418
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().routeMatchesToggle, children: [
415
419
  /* @__PURE__ */ jsxRuntime.jsx(
416
420
  "button",
417
421
  {
@@ -420,7 +424,9 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
420
424
  setShowMatches(false);
421
425
  },
422
426
  disabled: !showMatches,
423
- className: clsx.clsx(styles.routeMatchesToggleBtn(!showMatches, true)),
427
+ className: clsx.clsx(
428
+ getStyles().routeMatchesToggleBtn(!showMatches, true)
429
+ ),
424
430
  children: "Routes"
425
431
  }
426
432
  ),
@@ -433,13 +439,13 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
433
439
  },
434
440
  disabled: showMatches,
435
441
  className: clsx.clsx(
436
- styles.routeMatchesToggleBtn(!!showMatches, false)
442
+ getStyles().routeMatchesToggleBtn(!!showMatches, false)
437
443
  ),
438
444
  children: "Matches"
439
445
  }
440
446
  )
441
447
  ] }),
442
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeaderInfo, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "age / staleTime / gcTime" }) })
448
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeaderInfo, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "age / staleTime / gcTime" }) })
443
449
  ] }),
444
450
  !showMatches ? /* @__PURE__ */ jsxRuntime.jsx(
445
451
  RouteComp,
@@ -456,20 +462,20 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
456
462
  role: "button",
457
463
  "aria-label": `Open match details for ${match.id}`,
458
464
  onClick: () => setActiveId(activeId === match.id ? "" : match.id),
459
- className: clsx.clsx(styles.matchRow(match === activeMatch)),
465
+ className: clsx.clsx(getStyles().matchRow(match === activeMatch)),
460
466
  children: [
461
467
  /* @__PURE__ */ jsxRuntime.jsx(
462
468
  "div",
463
469
  {
464
470
  className: clsx.clsx(
465
- styles.matchIndicator(utils.getStatusColor(match))
471
+ getStyles().matchIndicator(utils.getStatusColor(match))
466
472
  )
467
473
  }
468
474
  ),
469
475
  /* @__PURE__ */ jsxRuntime.jsx(
470
476
  "code",
471
477
  {
472
- className: styles.matchID,
478
+ className: getStyles().matchID,
473
479
  children: `${match.routeId === "__root__" ? "__root__" : match.pathname}`
474
480
  }
475
481
  ),
@@ -480,10 +486,10 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
480
486
  );
481
487
  }) })
482
488
  ] }),
483
- ((_a = routerState.cachedMatches) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.cachedMatchesContainer, children: [
484
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsHeader, children: [
489
+ ((_a = routerState.cachedMatches) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().cachedMatchesContainer, children: [
490
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsHeader, children: [
485
491
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Cached Matches" }),
486
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeaderInfo, children: "age / staleTime / gcTime" })
492
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeaderInfo, children: "age / staleTime / gcTime" })
487
493
  ] }),
488
494
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: routerState.cachedMatches.map((match) => {
489
495
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -492,17 +498,17 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
492
498
  role: "button",
493
499
  "aria-label": `Open match details for ${match.id}`,
494
500
  onClick: () => setActiveId(activeId === match.id ? "" : match.id),
495
- className: clsx.clsx(styles.matchRow(match === activeMatch)),
501
+ className: clsx.clsx(getStyles().matchRow(match === activeMatch)),
496
502
  children: [
497
503
  /* @__PURE__ */ jsxRuntime.jsx(
498
504
  "div",
499
505
  {
500
506
  className: clsx.clsx(
501
- styles.matchIndicator(utils.getStatusColor(match))
507
+ getStyles().matchIndicator(utils.getStatusColor(match))
502
508
  )
503
509
  }
504
510
  ),
505
- /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles.matchID, children: `${match.id}` }),
511
+ /* @__PURE__ */ jsxRuntime.jsx("code", { className: getStyles().matchID, children: `${match.id}` }),
506
512
  /* @__PURE__ */ jsxRuntime.jsx(AgeTicker, { match })
507
513
  ]
508
514
  },
@@ -511,39 +517,39 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
511
517
  }) })
512
518
  ] }) : null
513
519
  ] }),
514
- activeMatch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.thirdContainer, children: [
515
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Match Details" }),
516
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetails, children: [
520
+ activeMatch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().thirdContainer, children: [
521
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Match Details" }),
522
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetails, children: [
517
523
  /* @__PURE__ */ jsxRuntime.jsx(
518
524
  "div",
519
525
  {
520
- className: styles.matchStatus(
526
+ className: getStyles().matchStatus(
521
527
  activeMatch.status,
522
528
  activeMatch.isFetching
523
529
  ),
524
530
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeMatch.status === "success" && activeMatch.isFetching ? "fetching" : activeMatch.status })
525
531
  }
526
532
  ),
527
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
533
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
528
534
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "ID:" }),
529
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.matchDetailsInfo, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: activeMatch.id }) })
535
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().matchDetailsInfo, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: activeMatch.id }) })
530
536
  ] }),
531
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
537
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
532
538
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "State:" }),
533
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.matchDetailsInfo, children: ((_b = routerState.pendingMatches) == null ? void 0 : _b.find(
539
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().matchDetailsInfo, children: ((_b = routerState.pendingMatches) == null ? void 0 : _b.find(
534
540
  (d) => d.id === activeMatch.id
535
541
  )) ? "Pending" : ((_c = routerState.matches) == null ? void 0 : _c.find((d) => d.id === activeMatch.id)) ? "Active" : "Cached" })
536
542
  ] }),
537
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
543
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
538
544
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Last Updated:" }),
539
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.matchDetailsInfo, children: activeMatch.updatedAt ? new Date(
545
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().matchDetailsInfo, children: activeMatch.updatedAt ? new Date(
540
546
  activeMatch.updatedAt
541
547
  ).toLocaleTimeString() : "N/A" })
542
548
  ] })
543
549
  ] }) }),
544
550
  activeMatch.loaderData ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
545
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Loader Data" }),
546
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
551
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Loader Data" }),
552
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
547
553
  Explorer.default,
548
554
  {
549
555
  label: "loaderData",
@@ -552,12 +558,12 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
552
558
  }
553
559
  ) })
554
560
  ] }) : null,
555
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Explorer" }),
556
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(Explorer.default, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
561
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Explorer" }),
562
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(Explorer.default, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
557
563
  ] }) : null,
558
- hasSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fourthContainer, children: [
559
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Search Params" }),
560
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
564
+ hasSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().fourthContainer, children: [
565
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Search Params" }),
566
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
561
567
  Explorer.default,
562
568
  {
563
569
  value: routerState.location.search || {},
@@ -598,7 +604,7 @@ function AgeTicker({ match }) {
598
604
  const age = Date.now() - (match == null ? void 0 : match.updatedAt);
599
605
  const staleTime = route.options.staleTime ?? router.options.defaultStaleTime ?? 0;
600
606
  const gcTime = route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1e3;
601
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.ageTicker(age > staleTime)), children: [
607
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(getStyles().ageTicker(age > staleTime)), children: [
602
608
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTime(age) }),
603
609
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "/" }),
604
610
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTime(staleTime) }),
@@ -1155,7 +1161,13 @@ const stylesFactory = () => {
1155
1161
  `
1156
1162
  };
1157
1163
  };
1158
- const styles = stylesFactory();
1164
+ let _styles = null;
1165
+ function getStyles() {
1166
+ if (_styles)
1167
+ return _styles;
1168
+ _styles = stylesFactory();
1169
+ return _styles;
1170
+ }
1159
1171
  exports.TanStackRouterDevtools = TanStackRouterDevtools;
1160
1172
  exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
1161
1173
  //# sourceMappingURL=devtools.cjs.map