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

Modern and scalable routing for React applications

{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport React, { useEffect, useRef, useState } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: any\n  /**\n   * The standard React class property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen?: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: any) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\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 const TanStackRouterDevtoolsPanel: React.FC<\n  TanStackRouterDevtoolsPanelOptions\n> = (props): React.ReactElement | null => {\n  const { router: propsRouter, ...rest } = props\n  const hookRouter = useRouter({ warn: false })\n  const activeRouter = propsRouter ?? hookRouter\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [devtools] = useState(\n    () =>\n      new TanStackRouterDevtoolsPanelCore({\n        ...rest,\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      className: props.className,\n      style: props.style,\n      shadowDOMTarget: props.shadowDOMTarget,\n    })\n  }, [devtools, props.className, props.style, props.shadowDOMTarget])\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    <>\n      <div ref={devToolRef} />\n    </>\n  )\n}\n"],"names":["useRouter","useRouterState","useRef","useState","TanStackRouterDevtoolsPanelCore","useEffect","jsx","Fragment"],"mappings":";;;;;;AAoCO,MAAM,8BAET,CAAC,UAAqC;AACxC,QAAM,EAAE,QAAQ,aAAa,GAAG,SAAS;AACzC,QAAM,aAAaA,YAAAA,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AACpC,QAAM,oBAAoBC,YAAAA,eAAe,EAAE,QAAQ,cAAc;AAEjE,QAAM,aAAaC,MAAAA,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,IAAIC,MAAAA;AAAAA,IACjB,MACE,IAAIC,mBAAAA,gCAAgC;AAAA,MAClC,GAAG;AAAA,MACH,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,WAAW,MAAM;AAAA,MACjB,OAAO,MAAM;AAAA,MACb,iBAAiB,MAAM;AAAA,IAAA,CACxB;AAAA,EACH,GAAG,CAAC,UAAU,MAAM,WAAW,MAAM,OAAO,MAAM,eAAe,CAAC;AAElEA,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,SACEC,2BAAAA,IAAAC,qBAAA,EACE,UAAAD,2BAAAA,IAAC,OAAA,EAAI,KAAK,YAAY,GACxB;AAEJ;;"}