@tanstack/router-devtools-core 1.114.0

package/dist/esm/Explorer.js

@@ -0,0 +1,290 @@
+import { template, insert, memo, createComponent, effect, className, setAttribute, mergeProps, delegateEvents } from "solid-js/web";
+import { clsx } from "clsx";
+import * as goober from "goober";
+import { createSignal, createMemo, useContext } from "solid-js";
+import { tokens } from "./tokens.js";
+import { displayValue } from "./utils.js";
+import { ShadowDomTargetContext } from "./context.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span><svg xmlns=http://www.w3.org/2000/svg width=12 height=12 fill=none viewBox="0 0 24 24"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 18l6-6-6-6">`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<button><span> `), _tmpl$4 = /* @__PURE__ */ template(`<div><div><button> [<!> ... <!>]`), _tmpl$5 = /* @__PURE__ */ template(`<button><span></span> 🔄 `), _tmpl$6 = /* @__PURE__ */ template(`<span>:`), _tmpl$7 = /* @__PURE__ */ template(`<span>`);
+const Expander = ({
+  expanded,
+  style = {}
+}) => {
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    effect((_p$) => {
+      var _v$ = styles().expander, _v$2 = clsx(styles().expanderIcon(expanded));
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$2, "class", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+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;
+}
+function isIterable(x) {
+  return Symbol.iterator in x;
+}
+function Explorer({
+  value,
+  defaultExpanded,
+  pageSize = 100,
+  filterSubEntries,
+  ...rest
+}) {
+  const [expanded, setExpanded] = createSignal(Boolean(defaultExpanded));
+  const toggleExpanded = () => setExpanded((old) => !old);
+  const type = createMemo(() => typeof value());
+  const subEntries = createMemo(() => {
+    let entries = [];
+    const makeProperty = (sub) => {
+      const subDefaultExpanded = defaultExpanded === true ? {
+        [sub.label]: true
+      } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
+      return {
+        ...sub,
+        value: () => sub.value,
+        defaultExpanded: subDefaultExpanded
+      };
+    };
+    if (Array.isArray(value())) {
+      entries = value().map((d, i) => makeProperty({
+        label: i.toString(),
+        value: d
+      }));
+    } else if (value() !== null && typeof value() === "object" && isIterable(value()) && typeof value()[Symbol.iterator] === "function") {
+      entries = Array.from(value(), (val, i) => makeProperty({
+        label: i.toString(),
+        value: val
+      }));
+    } else if (typeof value() === "object" && value() !== null) {
+      entries = Object.entries(value()).map(([key, val]) => makeProperty({
+        label: key,
+        value: val
+      }));
+    }
+    return filterSubEntries ? filterSubEntries(entries) : entries;
+  });
+  const subEntryPages = createMemo(() => chunkArray(subEntries(), pageSize));
+  const [expandedPages, setExpandedPages] = createSignal([]);
+  const [valueSnapshot, setValueSnapshot] = createSignal(void 0);
+  const styles = useStyles();
+  const refreshValueSnapshot = () => {
+    setValueSnapshot(value()());
+  };
+  const handleEntry = (entry) => createComponent(Explorer, mergeProps({
+    value,
+    filterSubEntries
+  }, rest, entry));
+  return (() => {
+    var _el$3 = _tmpl$2();
+    insert(_el$3, (() => {
+      var _c$ = memo(() => !!subEntryPages().length);
+      return () => _c$() ? [(() => {
+        var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
+        _el$4.$$click = () => toggleExpanded();
+        insert(_el$4, createComponent(Expander, {
+          get expanded() {
+            return expanded() ?? false;
+          }
+        }), _el$5);
+        insert(_el$4, () => rest.label, _el$5);
+        insert(_el$5, () => String(type).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$6);
+        insert(_el$5, () => subEntries().length, _el$6);
+        insert(_el$5, () => subEntries().length > 1 ? `items` : `item`, null);
+        effect((_p$) => {
+          var _v$3 = styles().expandButton, _v$4 = styles().info;
+          _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+          _v$4 !== _p$.t && className(_el$5, _p$.t = _v$4);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$4;
+      })(), memo(() => memo(() => !!(expanded() ?? false))() ? memo(() => subEntryPages().length === 1)() ? (() => {
+        var _el$7 = _tmpl$2();
+        insert(_el$7, () => subEntries().map((entry, index) => handleEntry(entry)));
+        effect(() => className(_el$7, styles().subEntries));
+        return _el$7;
+      })() : (() => {
+        var _el$8 = _tmpl$2();
+        insert(_el$8, () => subEntryPages().map((entries, index) => {
+          return (() => {
+            var _el$9 = _tmpl$4(), _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$17 = _el$12.nextSibling, _el$14 = _el$17.nextSibling, _el$18 = _el$14.nextSibling;
+            _el$18.nextSibling;
+            _el$11.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
+            insert(_el$11, createComponent(Expander, {
+              get expanded() {
+                return expandedPages().includes(index);
+              }
+            }), _el$12);
+            insert(_el$11, index * pageSize, _el$17);
+            insert(_el$11, index * pageSize + pageSize - 1, _el$18);
+            insert(_el$10, (() => {
+              var _c$3 = memo(() => !!expandedPages().includes(index));
+              return () => _c$3() ? (() => {
+                var _el$19 = _tmpl$2();
+                insert(_el$19, () => entries.map((entry) => handleEntry(entry)));
+                effect(() => className(_el$19, styles().subEntries));
+                return _el$19;
+              })() : null;
+            })(), null);
+            effect((_p$) => {
+              var _v$5 = styles().entry, _v$6 = clsx(styles().labelButton, "labelButton");
+              _v$5 !== _p$.e && className(_el$10, _p$.e = _v$5);
+              _v$6 !== _p$.t && className(_el$11, _p$.t = _v$6);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$9;
+          })();
+        }));
+        effect(() => className(_el$8, styles().subEntries));
+        return _el$8;
+      })() : null)] : (() => {
+        var _c$2 = memo(() => type() === "function");
+        return () => _c$2() ? createComponent(Explorer, {
+          get label() {
+            return (() => {
+              var _el$20 = _tmpl$5(), _el$21 = _el$20.firstChild;
+              _el$20.$$click = refreshValueSnapshot;
+              insert(_el$21, () => rest.label);
+              effect(() => className(_el$20, styles().refreshValueBtn));
+              return _el$20;
+            })();
+          },
+          value: valueSnapshot,
+          defaultExpanded: {}
+        }) : [(() => {
+          var _el$22 = _tmpl$6(), _el$23 = _el$22.firstChild;
+          insert(_el$22, () => rest.label, _el$23);
+          return _el$22;
+        })(), " ", (() => {
+          var _el$24 = _tmpl$7();
+          insert(_el$24, () => displayValue(value()));
+          effect(() => className(_el$24, styles().value));
+          return _el$24;
+        })()];
+      })();
+    })());
+    effect(() => className(_el$3, styles().entry));
+    return _el$3;
+  })();
+}
+const stylesFactory = (shadowDOMTarget) => {
+  const {
+    colors,
+    font,
+    size
+  } = tokens;
+  const {
+    fontFamily,
+    lineHeight,
+    size: fontSize
+  } = font;
+  const css = shadowDOMTarget ? goober.css.bind({
+    target: shadowDOMTarget
+  }) : goober.css;
+  return {
+    entry: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight.sm};
+      outline: none;
+      word-break: break-word;
+    `,
+    labelButton: css`
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      outline: inherit;
+      background: transparent;
+      border: none;
+      padding: 0;
+    `,
+    expander: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: ${size[3]};
+      height: ${size[3]};
+      padding-left: 3px;
+      box-sizing: content-box;
+    `,
+    expanderIcon: (expanded) => {
+      if (expanded) {
+        return css`
+          transform: rotate(90deg);
+          transition: transform 0.1s ease;
+        `;
+      }
+      return css`
+        transform: rotate(0deg);
+        transition: transform 0.1s ease;
+      `;
+    },
+    expandButton: css`
+      display: flex;
+      gap: ${size[1]};
+      align-items: center;
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      outline: inherit;
+      background: transparent;
+      border: none;
+      padding: 0;
+    `,
+    value: css`
+      color: ${colors.purple[400]};
+    `,
+    subEntries: css`
+      margin-left: ${size[2]};
+      padding-left: ${size[2]};
+      border-left: 2px solid ${colors.darkGray[400]};
+    `,
+    info: css`
+      color: ${colors.gray[500]};
+      font-size: ${fontSize["2xs"]};
+      padding-left: ${size[1]};
+    `,
+    refreshValueBtn: css`
+      appearance: none;
+      border: 0;
+      cursor: pointer;
+      background: transparent;
+      color: inherit;
+      padding: 0;
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+    `
+  };
+};
+function useStyles() {
+  const shadowDomTarget = useContext(ShadowDomTargetContext);
+  const [_styles] = createSignal(stylesFactory(shadowDomTarget));
+  return _styles;
+}
+delegateEvents(["click"]);
+export {
+  Expander,
+  Explorer,
+  chunkArray
+};
+//# sourceMappingURL=Explorer.js.map

package/dist/esm/Explorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-condition */\nimport { clsx as cx } from 'clsx'\nimport * as goober from 'goober'\nimport { createMemo, createSignal, useContext } from 'solid-js'\nimport { tokens } from './tokens'\nimport { displayValue } from './utils'\nimport { ShadowDomTargetContext } from './context'\nimport type { Accessor, JSX } from 'solid-js'\n\ntype ExpanderProps = {\n  expanded: boolean\n  style?: JSX.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => {\n  const styles = useStyles()\n  return (\n    <span class={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        class={cx(styles().expanderIcon(expanded))}\n      >\n        <path\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"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?: JSX.Element\n  value: Accessor<unknown>\n  subEntries: Array<Entry>\n  subEntryPages: Array<Array<Entry>>\n  type: string\n  expanded: Accessor<boolean>\n  toggleExpanded: () => void\n  pageSize: number\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 HandleEntryFn = (entry: Entry) => JSX.Element\n\ntype ExplorerProps = Partial<RendererProps> & {\n  defaultExpanded?: true | Record<string, boolean>\n  value: Accessor<unknown>\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 function Explorer({\n  value,\n  defaultExpanded,\n  pageSize = 100,\n  filterSubEntries,\n  ...rest\n}: ExplorerProps) {\n  const [expanded, setExpanded] = createSignal(Boolean(defaultExpanded))\n  const toggleExpanded = () => setExpanded((old) => !old)\n\n  const type = createMemo(() => typeof value())\n  const subEntries = createMemo(() => {\n    let entries: 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        value: () => sub.value,\n        defaultExpanded: subDefaultExpanded,\n      }\n    }\n\n    if (Array.isArray(value())) {\n      // any[]\n      entries = (value() as Array<any>).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() as Iterable<unknown>)[Symbol.iterator] === 'function'\n    ) {\n      // Iterable<unknown>\n      entries = Array.from(value() as Iterable<unknown>, (val, i) =>\n        makeProperty({\n          label: i.toString(),\n          value: val,\n        }),\n      )\n    } else if (typeof value() === 'object' && value() !== null) {\n      // object\n      entries = Object.entries(value() as object).map(([key, val]) =>\n        makeProperty({\n          label: key,\n          value: val,\n        }),\n      )\n    }\n\n    return filterSubEntries ? filterSubEntries(entries) : entries\n  })\n\n  const subEntryPages = createMemo(() => chunkArray(subEntries(), pageSize))\n\n  const [expandedPages, setExpandedPages] = createSignal<Array<number>>([])\n  const [valueSnapshot, setValueSnapshot] = createSignal(undefined)\n  const styles = useStyles()\n\n  const refreshValueSnapshot = () => {\n    setValueSnapshot((value() as () => any)())\n  }\n\n  const handleEntry = (entry: Entry) => (\n    <Explorer\n      value={value}\n      filterSubEntries={filterSubEntries}\n      {...rest}\n      {...entry}\n    />\n  )\n\n  return (\n    <div class={styles().entry}>\n      {subEntryPages().length ? (\n        <>\n          <button\n            class={styles().expandButton}\n            onClick={() => toggleExpanded()}\n          >\n            <Expander expanded={expanded() ?? false} />\n            {rest.label}\n            <span class={styles().info}>\n              {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n              {subEntries().length} {subEntries().length > 1 ? `items` : `item`}\n            </span>\n          </button>\n          {(expanded() ?? false) ? (\n            subEntryPages().length === 1 ? (\n              <div class={styles().subEntries}>\n                {subEntries().map((entry, index) => handleEntry(entry))}\n              </div>\n            ) : (\n              <div class={styles().subEntries}>\n                {subEntryPages().map((entries, index) => {\n                  return (\n                    <div>\n                      <div class={styles().entry}>\n                        <button\n                          class={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\n                            expanded={expandedPages().includes(index)}\n                          />{' '}\n                          [{index * pageSize} ...{' '}\n                          {index * pageSize + pageSize - 1}]\n                        </button>\n                        {expandedPages().includes(index) ? (\n                          <div class={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            label={\n              <button\n                onClick={refreshValueSnapshot}\n                class={styles().refreshValueBtn}\n              >\n                <span>{rest.label}</span> 🔄{' '}\n              </button>\n            }\n            value={valueSnapshot}\n            defaultExpanded={{}}\n          />\n        </>\n      ) : (\n        <>\n          <span>{rest.label}:</span>{' '}\n          <span class={styles().value}>{displayValue(value())}</span>\n        </>\n      )}\n    </div>\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\nfunction useStyles() {\n  const shadowDomTarget = useContext(ShadowDomTargetContext)\n  const [_styles] = createSignal(stylesFactory(shadowDomTarget))\n  return _styles\n}\n"],"names":["Expander","expanded","style","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_$effect","_p$","_v$","expander","_v$2","cx","expanderIcon","e","_$className","t","_$setAttribute","undefined","chunkArray","array","size","i","result","length","push","slice","isIterable","x","Symbol","iterator","Explorer","value","defaultExpanded","pageSize","filterSubEntries","rest","setExpanded","createSignal","Boolean","toggleExpanded","old","type","createMemo","subEntries","entries","makeProperty","sub","subDefaultExpanded","label","Array","isArray","map","d","toString","from","val","Object","key","subEntryPages","expandedPages","setExpandedPages","valueSnapshot","setValueSnapshot","refreshValueSnapshot","handleEntry","entry","_$createComponent","_$mergeProps","_el$3","_tmpl$2","_$insert","_c$","_$memo","_el$4","_tmpl$3","_el$5","_el$6","$$click","String","toLowerCase","_v$3","expandButton","_v$4","info","_el$7","index","_el$8","_el$9","_tmpl$4","_el$10","_el$11","_el$12","_el$17","nextSibling","_el$14","_el$18","includes","filter","_c$3","_el$19","_v$5","_v$6","labelButton","_c$2","_el$20","_tmpl$5","_el$21","refreshValueBtn","_el$22","_tmpl$6","_el$23","_el$24","_tmpl$7","displayValue","stylesFactory","shadowDOMTarget","colors","font","tokens","fontFamily","lineHeight","fontSize","css","goober","bind","target","mono","xs","sm","purple","darkGray","gray","shadowDomTarget","useContext","ShadowDomTargetContext","_styles","_$delegateEvents"],"mappings":"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"}

package/dist/esm/FloatingTanStackRouterDevtools.d.ts

@@ -0,0 +1,48 @@
+import { Accessor, JSX } from 'solid-js';
+import { AnyRouter } from '@tanstack/router-core';
+export interface FloatingDevtoolsOptions {
+    /**
+     * 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 class, style (merge and override default style), etc.
+     */
+    panelProps?: any & {
+        ref?: any;
+    };
+    /**
+     * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: any & {
+        ref?: any;
+    };
+    /**
+     * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: any & {
+        ref?: any;
+    };
+    /**
+     * 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: Accessor<AnyRouter>;
+    routerState: Accessor<any>;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare function FloatingTanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, routerState, shadowDOMTarget, }: FloatingDevtoolsOptions): JSX.Element | null;
+export default FloatingTanStackRouterDevtools;

package/dist/esm/FloatingTanStackRouterDevtools.js

@@ -0,0 +1,195 @@
+import { createComponent, Dynamic, mergeProps, template, spread, insert, effect, className } from "solid-js/web";
+import { clsx } from "clsx";
+import { createSignal, createEffect, createMemo } from "solid-js";
+import { DevtoolsOnCloseContext } from "./context.js";
+import { useIsMounted } from "./utils.js";
+import { BaseTanStackRouterDevtoolsPanel } from "./BaseTanStackRouterDevtoolsPanel.js";
+import useLocalStorage from "./useLocalStorage.js";
+import { TanStackLogo } from "./logo.js";
+import { useStyles } from "./useStyles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button><div><div></div><div></div></div><div>-</div><div>TanStack Router`);
+function FloatingTanStackRouterDevtools({
+  initialIsOpen,
+  panelProps = {},
+  closeButtonProps = {},
+  toggleButtonProps = {},
+  position = "bottom-left",
+  containerElement: Container = "footer",
+  router,
+  routerState,
+  shadowDOMTarget
+}) {
+  const [rootEl, setRootEl] = createSignal();
+  let panelRef = void 0;
+  const [isOpen, setIsOpen] = useLocalStorage("tanstackRouterDevtoolsOpen", initialIsOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage("tanstackRouterDevtoolsHeight", null);
+  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false);
+  const [isResizing, setIsResizing] = createSignal(false);
+  const isMounted = useIsMounted();
+  const styles = useStyles();
+  const handleDragStart = (panelElement, startEvent) => {
+    if (startEvent.button !== 0) return;
+    setIsResizing(true);
+    const dragInfo = {
+      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
+      pageY: startEvent.pageY
+    };
+    const run = (moveEvent) => {
+      const delta = dragInfo.pageY - moveEvent.pageY;
+      const newHeight = dragInfo.originalHeight + delta;
+      setDevtoolsHeight(newHeight);
+      if (newHeight < 70) {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    };
+    const unsub = () => {
+      setIsResizing(false);
+      document.removeEventListener("mousemove", run);
+      document.removeEventListener("mouseUp", unsub);
+    };
+    document.addEventListener("mousemove", run);
+    document.addEventListener("mouseup", unsub);
+  };
+  isOpen() ?? false;
+  createEffect(() => {
+    setIsResolvedOpen(isOpen() ?? false);
+  });
+  createEffect(() => {
+    var _a, _b;
+    if (isResolvedOpen()) {
+      const previousValue = (_b = (_a = rootEl()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
+      const run = () => {
+        var _a2;
+        const containerHeight = panelRef.getBoundingClientRect().height;
+        if ((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) {
+          setRootEl((prev) => {
+            if (prev == null ? void 0 : prev.parentElement) {
+              prev.parentElement.style.paddingBottom = `${containerHeight}px`;
+            }
+            return prev;
+          });
+        }
+      };
+      run();
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", run);
+        return () => {
+          var _a2;
+          window.removeEventListener("resize", run);
+          if (((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) && typeof previousValue === "string") {
+            setRootEl((prev) => {
+              prev.parentElement.style.paddingBottom = previousValue;
+              return prev;
+            });
+          }
+        };
+      }
+    }
+    return;
+  });
+  createEffect(() => {
+    if (rootEl()) {
+      const el = rootEl();
+      const fontSize = getComputedStyle(el).fontSize;
+      el == null ? void 0 : el.style.setProperty("--tsrd-font-size", fontSize);
+    }
+  });
+  const {
+    style: panelStyle = {},
+    ...otherPanelProps
+  } = panelProps;
+  const {
+    style: closeButtonStyle = {},
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
+  const {
+    onClick: onToggleClick,
+    class: toggleButtonClassName,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
+  if (!isMounted()) return null;
+  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500);
+  const basePanelClass = createMemo(() => {
+    return clsx(styles().devtoolsPanelContainer, styles().devtoolsPanelContainerVisibility(!!isOpen()), styles().devtoolsPanelContainerResizing(isResizing), styles().devtoolsPanelContainerAnimation(isResolvedOpen(), resolvedHeight() + 16));
+  });
+  const basePanelStyle = createMemo(() => {
+    return {
+      height: `${resolvedHeight()}px`,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      ...panelStyle || {}
+    };
+  });
+  const buttonStyle = createMemo(() => {
+    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(position), styles().mainCloseBtnAnimation(!!isOpen()), toggleButtonClassName);
+  });
+  return createComponent(Dynamic, {
+    component: Container,
+    ref: setRootEl,
+    "class": "TanStackRouterDevtools",
+    get children() {
+      return [createComponent(DevtoolsOnCloseContext.Provider, {
+        value: {
+          onCloseClick: onCloseClick ?? (() => {
+          })
+        },
+        get children() {
+          return createComponent(BaseTanStackRouterDevtoolsPanel, mergeProps({
+            ref(r$) {
+              var _ref$ = panelRef;
+              typeof _ref$ === "function" ? _ref$(r$) : panelRef = r$;
+            }
+          }, otherPanelProps, {
+            router,
+            routerState,
+            className: basePanelClass,
+            style: basePanelStyle,
+            get isOpen() {
+              return isResolvedOpen();
+            },
+            setIsOpen,
+            handleDragStart: (e) => handleDragStart(panelRef, e),
+            shadowDOMTarget
+          }));
+        }
+      }), (() => {
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.nextSibling;
+        spread(_el$, mergeProps(otherToggleButtonProps, {
+          "aria-label": "Open TanStack Router Devtools",
+          "onClick": (e) => {
+            setIsOpen(true);
+            onToggleClick && onToggleClick(e);
+          },
+          get ["class"]() {
+            return buttonStyle();
+          }
+        }), false, true);
+        insert(_el$3, createComponent(TanStackLogo, {}));
+        insert(_el$4, createComponent(TanStackLogo, {}));
+        effect((_p$) => {
+          var _v$ = styles().mainCloseBtnIconContainer, _v$2 = styles().mainCloseBtnIconOuter, _v$3 = styles().mainCloseBtnIconInner, _v$4 = styles().mainCloseBtnDivider, _v$5 = styles().routerLogoCloseButton;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+          _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
+          _v$5 !== _p$.i && className(_el$6, _p$.i = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
+        });
+        return _el$;
+      })()];
+    }
+  });
+}
+export {
+  FloatingTanStackRouterDevtools,
+  FloatingTanStackRouterDevtools as default
+};
+//# sourceMappingURL=FloatingTanStackRouterDevtools.js.map

package/dist/esm/FloatingTanStackRouterDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTanStackRouterDevtools.js","sources":["../../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: Accessor<AnyRouter>\n  routerState: Accessor<any>\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  routerState,\n  shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n  // eslint-disable-next-line prefer-const\n  let panelRef: HTMLDivElement | undefined = undefined\n\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n  const [isResizing, setIsResizing] = createSignal(false)\n  const isMounted = useIsMounted()\n  const styles = useStyles()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: any,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  const isButtonClosed = isOpen() ?? false\n\n  createEffect(() => {\n    setIsResolvedOpen(isOpen() ?? false)\n  })\n\n  createEffect(() => {\n    if (isResolvedOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef!.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n    style?: Record<string, any>\n  }\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    class: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n  const basePanelClass = createMemo(() => {\n    return cx(\n      styles().devtoolsPanelContainer,\n      styles().devtoolsPanelContainerVisibility(!!isOpen()),\n      styles().devtoolsPanelContainerResizing(isResizing),\n      styles().devtoolsPanelContainerAnimation(\n        isResolvedOpen(),\n        resolvedHeight() + 16,\n      ),\n    )\n  })\n\n  const basePanelStyle = createMemo(() => {\n    return {\n      height: `${resolvedHeight()}px`,\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      ...(panelStyle || {}),\n    }\n  })\n\n  const buttonStyle = createMemo(() => {\n    return cx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(position),\n      styles().mainCloseBtnAnimation(!!isOpen()),\n      toggleButtonClassName,\n    )\n  })\n\n  return (\n    <Dynamic\n      component={Container}\n      ref={setRootEl}\n      class=\"TanStackRouterDevtools\"\n    >\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        {/* {router() ? ( */}\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          routerState={routerState}\n          className={basePanelClass}\n          style={basePanelStyle}\n          isOpen={isResolvedOpen()}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n        {/* ) : (\n          <p>No router</p>\n        )} */}\n      </DevtoolsOnCloseContext.Provider>\n\n      <button\n        type=\"button\"\n        {...otherToggleButtonProps}\n        aria-label=\"Open TanStack Router Devtools\"\n        onClick={(e) => {\n          setIsOpen(true)\n          onToggleClick && onToggleClick(e)\n        }}\n        class={buttonStyle()}\n      >\n        <div class={styles().mainCloseBtnIconContainer}>\n          <div class={styles().mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div class={styles().mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div class={styles().mainCloseBtnDivider}>-</div>\n        <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Dynamic>\n  )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"names":["FloatingTanStackRouterDevtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","Container","router","routerState","shadowDOMTarget","rootEl","setRootEl","createSignal","panelRef","undefined","isOpen","setIsOpen","useLocalStorage","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","useIsMounted","styles","useStyles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","createMemo","basePanelClass","cx","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","Dynamic","component","ref","children","DevtoolsOnCloseContext","Provider","value","BaseTanStackRouterDevtoolsPanel","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","TanStackLogo","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"mappings":"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"}

package/dist/esm/TanStackRouterDevtoolsCore.d.ts

@@ -0,0 +1,55 @@
+import { AnyRouter } from '@tanstack/router-core';
+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 class, style (merge and override default style), etc.
+     */
+    panelProps?: any & {
+        ref?: any;
+    };
+    /**
+     * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: any & {
+        ref?: any;
+    };
+    /**
+     * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: any & {
+        ref?: any;
+    };
+    /**
+     * 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;
+    routerState: any;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+declare class TanStackRouterDevtoolsCore {
+    #private;
+    constructor(config: DevtoolsOptions);
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+    setRouter(router: AnyRouter): void;
+    setRouterState(routerState: any): void;
+    setOptions(options: Partial<DevtoolsOptions>): void;
+}
+export { TanStackRouterDevtoolsCore };