@tanstack/router-devtools 1.7.0 → 1.8.0

package/dist/esm/Explorer.js

@@ -0,0 +1,229 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { styled, displayValue } from "./utils.js";
+const Entry = styled("div", {
+  fontFamily: "Menlo, monospace",
+  fontSize: ".7rem",
+  lineHeight: "1.7",
+  outline: "none",
+  wordBreak: "break-word"
+});
+const Label = styled("span", {
+  color: "white"
+});
+const LabelButton = styled("button", {
+  cursor: "pointer",
+  color: "white"
+});
+const ExpandButton = styled("button", {
+  cursor: "pointer",
+  color: "inherit",
+  font: "inherit",
+  outline: "inherit",
+  background: "transparent",
+  border: "none",
+  padding: 0
+});
+const Value = styled("span", (_props, theme) => ({
+  color: theme.danger
+}));
+const SubEntries = styled("div", {
+  marginLeft: ".1em",
+  paddingLeft: "1em",
+  borderLeft: "2px solid rgba(0,0,0,.15)"
+});
+const Info = styled("span", {
+  color: "grey",
+  fontSize: ".7em"
+});
+const Expander = ({ expanded, style = {} }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    style: {
+      display: "inline-block",
+      transition: "all .1s ease",
+      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ""}`,
+      ...style
+    },
+    children: "▶"
+  }
+);
+function chunkArray(array, size) {
+  if (size < 1)
+    return [];
+  let i = 0;
+  const result = [];
+  while (i < array.length) {
+    result.push(array.slice(i, i + size));
+    i = i + size;
+  }
+  return result;
+}
+const DefaultRenderer = ({
+  handleEntry,
+  label,
+  value,
+  subEntries = [],
+  subEntryPages = [],
+  type,
+  expanded = false,
+  toggleExpanded,
+  pageSize,
+  renderer
+}) => {
+  const [expandedPages, setExpandedPages] = React.useState([]);
+  const [valueSnapshot, setValueSnapshot] = React.useState(void 0);
+  const refreshValueSnapshot = () => {
+    setValueSnapshot(value());
+  };
+  return /* @__PURE__ */ jsx(Entry, { children: subEntryPages.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(ExpandButton, { onClick: () => toggleExpanded(), children: [
+      /* @__PURE__ */ jsx(Expander, { expanded }),
+      " ",
+      label,
+      " ",
+      /* @__PURE__ */ jsxs(Info, { children: [
+        String(type).toLowerCase() === "iterable" ? "(Iterable) " : "",
+        subEntries.length,
+        " ",
+        subEntries.length > 1 ? `items` : `item`
+      ] })
+    ] }),
+    expanded ? subEntryPages.length === 1 ? /* @__PURE__ */ jsx(SubEntries, { children: subEntries.map((entry, index) => handleEntry(entry)) }) : /* @__PURE__ */ jsx(SubEntries, { children: subEntryPages.map((entries, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Entry, { children: [
+      /* @__PURE__ */ jsxs(
+        LabelButton,
+        {
+          onClick: () => setExpandedPages(
+            (old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Expander, { expanded }),
+            " [",
+            index * pageSize,
+            " ...",
+            " ",
+            index * pageSize + pageSize - 1,
+            "]"
+          ]
+        }
+      ),
+      expandedPages.includes(index) ? /* @__PURE__ */ jsx(SubEntries, { children: entries.map((entry) => handleEntry(entry)) }) : null
+    ] }) }, index)) }) : null
+  ] }) : type === "function" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Explorer,
+    {
+      renderer,
+      label: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: refreshValueSnapshot,
+          style: {
+            appearance: "none",
+            border: "0",
+            background: "transparent"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Label, { children: label }),
+            " 🔄",
+            " "
+          ]
+        }
+      ),
+      value: valueSnapshot,
+      defaultExpanded: {}
+    }
+  ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Label, { children: [
+      label,
+      ":"
+    ] }),
+    " ",
+    /* @__PURE__ */ jsx(Value, { children: displayValue(value) })
+  ] }) });
+};
+function isIterable(x) {
+  return Symbol.iterator in x;
+}
+function Explorer({
+  value,
+  defaultExpanded,
+  renderer = DefaultRenderer,
+  pageSize = 100,
+  filterSubEntries,
+  ...rest
+}) {
+  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
+  const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), []);
+  let type = typeof value;
+  let subEntries = [];
+  const makeProperty = (sub) => {
+    const subDefaultExpanded = defaultExpanded === true ? { [sub.label]: true } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
+    return {
+      ...sub,
+      defaultExpanded: subDefaultExpanded
+    };
+  };
+  if (Array.isArray(value)) {
+    type = "array";
+    subEntries = value.map(
+      (d, i) => makeProperty({
+        label: i.toString(),
+        value: d
+      })
+    );
+  } else if (value !== null && typeof value === "object" && isIterable(value) && typeof value[Symbol.iterator] === "function") {
+    type = "Iterable";
+    subEntries = Array.from(
+      value,
+      (val, i) => makeProperty({
+        label: i.toString(),
+        value: val
+      })
+    );
+  } else if (typeof value === "object" && value !== null) {
+    type = "object";
+    subEntries = Object.entries(value).map(
+      ([key, val]) => makeProperty({
+        label: key,
+        value: val
+      })
+    );
+  }
+  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries;
+  const subEntryPages = chunkArray(subEntries, pageSize);
+  return renderer({
+    handleEntry: (entry) => /* @__PURE__ */ jsx(
+      Explorer,
+      {
+        value,
+        renderer,
+        filterSubEntries,
+        ...rest,
+        ...entry
+      },
+      entry.label
+    ),
+    type,
+    subEntries,
+    subEntryPages,
+    value,
+    expanded,
+    toggleExpanded,
+    pageSize,
+    ...rest
+  });
+}
+export {
+  DefaultRenderer,
+  Entry,
+  ExpandButton,
+  Expander,
+  Info,
+  Label,
+  LabelButton,
+  SubEntries,
+  Value,
+  chunkArray,
+  Explorer as default
+};
+//# sourceMappingURL=Explorer.js.map

package/dist/esm/Explorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { displayValue, styled } from './utils'\n\nexport const Entry = styled('div', {\n  fontFamily: 'Menlo, monospace',\n  fontSize: '.7rem',\n  lineHeight: '1.7',\n  outline: 'none',\n  wordBreak: 'break-word',\n})\n\nexport const Label = styled('span', {\n  color: 'white',\n})\n\nexport const LabelButton = styled('button', {\n  cursor: 'pointer',\n  color: 'white',\n})\n\nexport const ExpandButton = styled('button', {\n  cursor: 'pointer',\n  color: 'inherit',\n  font: 'inherit',\n  outline: 'inherit',\n  background: 'transparent',\n  border: 'none',\n  padding: 0,\n})\n\nexport const Value = styled('span', (_props, theme) => ({\n  color: theme.danger,\n}))\n\nexport const SubEntries = styled('div', {\n  marginLeft: '.1em',\n  paddingLeft: '1em',\n  borderLeft: '2px solid rgba(0,0,0,.15)',\n})\n\nexport const Info = styled('span', {\n  color: 'grey',\n  fontSize: '.7em',\n})\n\ntype ExpanderProps = {\n  expanded: boolean\n  style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n  <span\n    style={{\n      display: 'inline-block',\n      transition: 'all .1s ease',\n      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,\n      ...style,\n    }}\n  >\n    ▶\n  </span>\n)\n\ntype Entry = {\n  label: string\n}\n\ntype RendererProps = {\n  handleEntry: HandleEntryFn\n  label?: React.ReactNode\n  value: unknown\n  subEntries: Entry[]\n  subEntryPages: Entry[][]\n  type: string\n  expanded: boolean\n  toggleExpanded: () => void\n  pageSize: number\n  renderer?: Renderer\n  filterSubEntries?: (subEntries: Property[]) => Property[]\n}\n\n/**\n * Chunk elements in the array by size\n *\n * when the array cannot be chunked evenly by size, the last chunk will be\n * filled with the remaining elements\n *\n * @example\n * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]\n */\nexport function chunkArray<T>(array: T[], size: number): T[][] {\n  if (size < 1) return []\n  let i = 0\n  const result: T[][] = []\n  while (i < array.length) {\n    result.push(array.slice(i, i + size))\n    i = i + size\n  }\n  return result\n}\n\ntype Renderer = (props: RendererProps) => JSX.Element\n\nexport const DefaultRenderer: Renderer = ({\n  handleEntry,\n  label,\n  value,\n  subEntries = [],\n  subEntryPages = [],\n  type,\n  expanded = false,\n  toggleExpanded,\n  pageSize,\n  renderer,\n}) => {\n  const [expandedPages, setExpandedPages] = React.useState<number[]>([])\n  const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n\n  const refreshValueSnapshot = () => {\n    setValueSnapshot((value as () => any)())\n  }\n\n  return (\n    <Entry>\n      {subEntryPages.length ? (\n        <>\n          <ExpandButton onClick={() => toggleExpanded()}>\n            <Expander expanded={expanded} /> {label}{' '}\n            <Info>\n              {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n              {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n            </Info>\n          </ExpandButton>\n          {expanded ? (\n            subEntryPages.length === 1 ? (\n              <SubEntries>\n                {subEntries.map((entry, index) => handleEntry(entry))}\n              </SubEntries>\n            ) : (\n              <SubEntries>\n                {subEntryPages.map((entries, index) => (\n                  <div key={index}>\n                    <Entry>\n                      <LabelButton\n                        onClick={() =>\n                          setExpandedPages((old) =>\n                            old.includes(index)\n                              ? old.filter((d) => d !== index)\n                              : [...old, index],\n                          )\n                        }\n                      >\n                        <Expander expanded={expanded} /> [{index * pageSize} ...{' '}\n                        {index * pageSize + pageSize - 1}]\n                      </LabelButton>\n                      {expandedPages.includes(index) ? (\n                        <SubEntries>\n                          {entries.map((entry) => handleEntry(entry))}\n                        </SubEntries>\n                      ) : null}\n                    </Entry>\n                  </div>\n                ))}\n              </SubEntries>\n            )\n          ) : null}\n        </>\n      ) : type === 'function' ? (\n        <>\n          <Explorer\n            renderer={renderer}\n            label={\n              <button\n                onClick={refreshValueSnapshot}\n                style={{\n                  appearance: 'none',\n                  border: '0',\n                  background: 'transparent',\n                }}\n              >\n                <Label>{label}</Label> 🔄{' '}\n              </button>\n            }\n            value={valueSnapshot}\n            defaultExpanded={{}}\n          />\n        </>\n      ) : (\n        <>\n          <Label>{label}:</Label> <Value>{displayValue(value)}</Value>\n        </>\n      )}\n    </Entry>\n  )\n}\n\ntype HandleEntryFn = (entry: Entry) => JSX.Element\n\ntype ExplorerProps = Partial<RendererProps> & {\n  renderer?: Renderer\n  defaultExpanded?: true | Record<string, boolean>\n}\n\ntype Property = {\n  defaultExpanded?: boolean | Record<string, boolean>\n  label: string\n  value: unknown\n}\n\nfunction isIterable(x: any): x is Iterable<unknown> {\n  return Symbol.iterator in x\n}\n\nexport default function Explorer({\n  value,\n  defaultExpanded,\n  renderer = DefaultRenderer,\n  pageSize = 100,\n  filterSubEntries,\n  ...rest\n}: ExplorerProps) {\n  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))\n  const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])\n\n  let type: string = typeof value\n  let subEntries: Property[] = []\n\n  const makeProperty = (sub: { label: string; value: unknown }): Property => {\n    const subDefaultExpanded =\n      defaultExpanded === true\n        ? { [sub.label]: true }\n        : defaultExpanded?.[sub.label]\n    return {\n      ...sub,\n      defaultExpanded: subDefaultExpanded,\n    }\n  }\n\n  if (Array.isArray(value)) {\n    type = 'array'\n    subEntries = value.map((d, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: d,\n      }),\n    )\n  } else if (\n    value !== null &&\n    typeof value === 'object' &&\n    isIterable(value) &&\n    typeof value[Symbol.iterator] === 'function'\n  ) {\n    type = 'Iterable'\n    subEntries = Array.from(value, (val, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: val,\n      }),\n    )\n  } else if (typeof value === 'object' && value !== null) {\n    type = 'object'\n    subEntries = Object.entries(value).map(([key, val]) =>\n      makeProperty({\n        label: key,\n        value: val,\n      }),\n    )\n  }\n\n  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries\n\n  const subEntryPages = chunkArray(subEntries, pageSize)\n\n  return renderer({\n    handleEntry: (entry) => (\n      <Explorer\n        key={entry.label}\n        value={value}\n        renderer={renderer}\n        filterSubEntries={filterSubEntries}\n        {...rest}\n        {...entry}\n      />\n    ),\n    type,\n    subEntries,\n    subEntryPages,\n    value,\n    expanded,\n    toggleExpanded,\n    pageSize,\n    ...rest,\n  })\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/devtools.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { AnyRouter } from '@tanstack/react-router';
+export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+    panelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+    containerElement?: string | any;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+}
+interface DevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * The standard React className property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+}
+export declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
+export declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
+export {};