@tanstack/router-devtools 1.64.2 → 1.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/Explorer.cjs.map +1 -1
  2. package/dist/esm/Explorer.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/Explorer.tsx +1 -1
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 { clsx as cx } from 'clsx'\nimport * as goober from 'goober'\nimport { tokens } from './tokens'\nimport { displayValue, styled } from './utils'\nimport { ShadowDomTargetContext } from './context'\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => {\n const styles = useStyles()\n return (\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}\n\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: HandleEntryFn\n label?: React.ReactNode\n value: unknown\n subEntries: Array<Entry>\n subEntryPages: Array<Array<Entry>>\n type: string\n expanded: boolean\n toggleExpanded: () => void\n pageSize: number\n renderer?: Renderer\n filterSubEntries?: (subEntries: Array<Property>) => Array<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: Array<T>, size: number): Array<Array<T>> {\n if (size < 1) return []\n let i = 0\n const result: Array<Array<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) => React.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<Array<number>>([])\n const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n const styles = useStyles()\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) => React.ReactNode\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: Array<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 = (shadowDOMTarget?: ShadowRoot) => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n const css = shadowDOMTarget\n ? goober.css.bind({ target: shadowDOMTarget })\n : goober.css\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 useStyles() {\n const shadowDomTarget = React.useContext(ShadowDomTargetContext)\n if (_styles) return _styles\n _styles = stylesFactory(shadowDomTarget)\n\n return _styles\n}\n"],"names":["jsx","cx","React","jsxs","Fragment","displayValue","tokens","goober","ShadowDomTargetContext"],"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 * as goober from 'goober'\nimport { tokens } from './tokens'\nimport { displayValue } from './utils'\nimport { ShadowDomTargetContext } from './context'\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => {\n const styles = useStyles()\n return (\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}\n\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: HandleEntryFn\n label?: React.ReactNode\n value: unknown\n subEntries: Array<Entry>\n subEntryPages: Array<Array<Entry>>\n type: string\n expanded: boolean\n toggleExpanded: () => void\n pageSize: number\n renderer?: Renderer\n filterSubEntries?: (subEntries: Array<Property>) => Array<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: Array<T>, size: number): Array<Array<T>> {\n if (size < 1) return []\n let i = 0\n const result: Array<Array<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) => React.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<Array<number>>([])\n const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n const styles = useStyles()\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) => React.ReactNode\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: Array<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 = (shadowDOMTarget?: ShadowRoot) => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n const css = shadowDOMTarget\n ? goober.css.bind({ target: shadowDOMTarget })\n : goober.css\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 useStyles() {\n const shadowDomTarget = React.useContext(ShadowDomTargetContext)\n if (_styles) return _styles\n _styles = stylesFactory(shadowDomTarget)\n\n return _styles\n}\n"],"names":["jsx","cx","React","jsxs","Fragment","displayValue","tokens","goober","ShadowDomTargetContext"],"mappings":"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"}
package/dist/esm/Explorer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { clsx as cx } from 'clsx'\nimport * as goober from 'goober'\nimport { tokens } from './tokens'\nimport { displayValue, styled } from './utils'\nimport { ShadowDomTargetContext } from './context'\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => {\n const styles = useStyles()\n return (\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}\n\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: HandleEntryFn\n label?: React.ReactNode\n value: unknown\n subEntries: Array<Entry>\n subEntryPages: Array<Array<Entry>>\n type: string\n expanded: boolean\n toggleExpanded: () => void\n pageSize: number\n renderer?: Renderer\n filterSubEntries?: (subEntries: Array<Property>) => Array<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: Array<T>, size: number): Array<Array<T>> {\n if (size < 1) return []\n let i = 0\n const result: Array<Array<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) => React.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<Array<number>>([])\n const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n const styles = useStyles()\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) => React.ReactNode\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: Array<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 = (shadowDOMTarget?: ShadowRoot) => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n const css = shadowDOMTarget\n ? goober.css.bind({ target: shadowDOMTarget })\n : goober.css\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 useStyles() {\n const shadowDomTarget = React.useContext(ShadowDomTargetContext)\n if (_styles) return _styles\n _styles = stylesFactory(shadowDomTarget)\n\n return _styles\n}\n"],"names":["cx"],"mappings":"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"}
1
+ {"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { clsx as cx } from 'clsx'\nimport * as goober from 'goober'\nimport { tokens } from './tokens'\nimport { displayValue } from './utils'\nimport { ShadowDomTargetContext } from './context'\n\ntype ExpanderProps = {\n expanded: boolean\n style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => {\n const styles = useStyles()\n return (\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}\n\ntype Entry = {\n label: string\n}\n\ntype RendererProps = {\n handleEntry: HandleEntryFn\n label?: React.ReactNode\n value: unknown\n subEntries: Array<Entry>\n subEntryPages: Array<Array<Entry>>\n type: string\n expanded: boolean\n toggleExpanded: () => void\n pageSize: number\n renderer?: Renderer\n filterSubEntries?: (subEntries: Array<Property>) => Array<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: Array<T>, size: number): Array<Array<T>> {\n if (size < 1) return []\n let i = 0\n const result: Array<Array<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) => React.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<Array<number>>([])\n const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n const styles = useStyles()\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) => React.ReactNode\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: Array<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 = (shadowDOMTarget?: ShadowRoot) => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n const css = shadowDOMTarget\n ? goober.css.bind({ target: shadowDOMTarget })\n : goober.css\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 useStyles() {\n const shadowDomTarget = React.useContext(ShadowDomTargetContext)\n if (_styles) return _styles\n _styles = stylesFactory(shadowDomTarget)\n\n return _styles\n}\n"],"names":["cx"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/router-devtools",
3
- "version": "1.64.2",
3
+ "version": "1.65.0",
4
4
  "description": "Modern and scalable routing for React applications",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -60,7 +60,7 @@
60
60
  "peerDependencies": {
61
61
  "react": ">=18",
62
62
  "react-dom": ">=18",
63
- "@tanstack/react-router": "^1.64.2"
63
+ "@tanstack/react-router": "^1.65.0"
64
64
  },
65
65
  "scripts": {}
66
66
  }
package/src/Explorer.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react'
2
2
  import { clsx as cx } from 'clsx'
3
3
  import * as goober from 'goober'
4
4
  import { tokens } from './tokens'
5
- import { displayValue, styled } from './utils'
5
+ import { displayValue } from './utils'
6
6
  import { ShadowDomTargetContext } from './context'
7
7
 
8
8
  type ExpanderProps = {