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