@tanstack/react-router-devtools/dist/cjs/TanStackRouterDevtools.cjs.map

Modern and scalable routing for React applications

{"version":3,"file":"TanStackRouterDevtools.cjs","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { useRouter, useRouterState } from '@tanstack/react-router'\nimport type { ButtonHTMLAttributes, HTMLAttributes } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\nimport type React from 'react'\n\ninterface DevtoolsOptions {\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 className, style (merge and override default style), etc.\n   */\n  panelProps?: HTMLAttributes<HTMLDivElement>\n  /**\n   * 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.\n   */\n  closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n  /**\n   * 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.\n   */\n  toggleButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\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   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function TanStackRouterDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const {\n    initialIsOpen,\n    panelProps,\n    closeButtonProps,\n    toggleButtonProps,\n    position,\n    containerElement,\n    shadowDOMTarget,\n    router: propsRouter,\n  } = props\n\n  const hookRouter = useRouter({ warn: false })\n  const activeRouter = propsRouter ?? hookRouter\n\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [devtools] = useState(\n    () =>\n      new TanStackRouterDevtoolsCore({\n        initialIsOpen,\n        panelProps,\n        closeButtonProps,\n        toggleButtonProps,\n        position,\n        containerElement,\n        shadowDOMTarget,\n        router: activeRouter,\n        routerState: activeRouterState,\n      }),\n  )\n\n  // Update devtools when props change\n  useEffect(() => {\n    devtools.setRouter(activeRouter)\n  }, [devtools, activeRouter])\n\n  useEffect(() => {\n    devtools.setRouterState(activeRouterState)\n  }, [devtools, activeRouterState])\n\n  useEffect(() => {\n    devtools.setOptions({\n      initialIsOpen: initialIsOpen,\n      panelProps: panelProps,\n      closeButtonProps: closeButtonProps,\n      toggleButtonProps: toggleButtonProps,\n      position: position,\n      containerElement: containerElement,\n      shadowDOMTarget: shadowDOMTarget,\n    })\n  }, [\n    devtools,\n    initialIsOpen,\n    panelProps,\n    closeButtonProps,\n    toggleButtonProps,\n    position,\n    containerElement,\n    shadowDOMTarget,\n  ])\n\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return (\n    <Fragment>\n      <div ref={devToolRef} />\n    </Fragment>\n  )\n}\n"],"names":["useRouter","useRouterState","useRef","useState","TanStackRouterDevtoolsCore","useEffect","Fragment","jsx"],"mappings":";;;;;;AA6CO,SAAS,uBACd,OAC2B;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EAAA,IACN;AAEJ,QAAM,aAAaA,YAAAA,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AAEpC,QAAM,oBAAoBC,YAAAA,eAAe,EAAE,QAAQ,cAAc;AAEjE,QAAM,aAAaC,MAAAA,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,IAAIC,MAAAA;AAAAA,IACjB,MACE,IAAIC,mBAAAA,2BAA2B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,aAAa;AAAA,IAAA,CACd;AAAA,EAAA;AAILC,QAAAA,UAAU,MAAM;AACd,aAAS,UAAU,YAAY;AAAA,EACjC,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3BA,QAAAA,UAAU,MAAM;AACd,aAAS,eAAe,iBAAiB;AAAA,EAC3C,GAAG,CAAC,UAAU,iBAAiB,CAAC;AAEhCA,QAAAA,UAAU,MAAM;AACd,aAAS,WAAW;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEDA,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,MAAM,WAAW,OAAO;AAAA,IACnC;AAEA,WAAO,MAAM;AACX,eAAS,QAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,wCACGC,gBAAA,EACC,UAAAC,2BAAAA,IAAC,OAAA,EAAI,KAAK,YAAY,GACxB;AAEJ;;"}