@tanstack/vue-router-devtools - npm Package Compare versions

Comparing version 1.167.0 to 1.167.1-pre.0

dist/esm/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","names":["defineComponent","TanStackRouterDevtools","DevToolsComponent","TanStackRouterDevtoolsPanel","DevToolsPanelComponent","NullComponent","name","setup","process","env","NODE_ENV","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanelInProd"],"sources":["../../src/index.tsx"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { TanStackRouterDevtools as DevToolsComponent } from './TanStackRouterDevtools'\nimport { TanStackRouterDevtoolsPanel as DevToolsPanelComponent } from './TanStackRouterDevtoolsPanel'\n\n// Re-export types\nexport type { TanStackRouterDevtoolsOptions } from './TanStackRouterDevtools'\nexport type { TanStackRouterDevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel'\n\n// Create a null component for production\nconst NullComponent = /* #__PURE__ */ defineComponent({\n  name: 'NullTanStackRouterDevtools',\n  setup() {\n    return () => null\n  },\n})\n\nexport const TanStackRouterDevtools =\n  process.env.NODE_ENV !== 'development' ? NullComponent : DevToolsComponent\n\nexport const TanStackRouterDevtoolsInProd = DevToolsComponent\n\nexport const TanStackRouterDevtoolsPanel =\n  process.env.NODE_ENV !== 'development'\n    ? NullComponent\n    : DevToolsPanelComponent\n\nexport const TanStackRouterDevtoolsPanelInProd = DevToolsPanelComponent\n"],"mappings":";;;;AASA,IAAMK,gBAAgCL,gCAAgB;CACpDM,MAAM;CACNC,QAAQ;AACN,eAAa;;CAEhB,CAAC;AAEF,IAAaN,yBAAAA,QAAAA,IAAAA,aACc,gBAAgBI,gBAAgBH;AAE3D,IAAaS,+BAA+BT;AAE5C,IAAaC,8BAAAA,QAAAA,IAAAA,aACc,gBACrBE,gBACAD;AAEN,IAAaQ,oCAAoCR"}
+{"version":3,"file":"index.js","names":["defineComponent","TanStackRouterDevtools","DevToolsComponent","TanStackRouterDevtoolsPanel","DevToolsPanelComponent","NullComponent","name","setup","process","env","NODE_ENV","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanelInProd"],"sources":["../../src/index.tsx"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { TanStackRouterDevtools as DevToolsComponent } from './TanStackRouterDevtools'\nimport { TanStackRouterDevtoolsPanel as DevToolsPanelComponent } from './TanStackRouterDevtoolsPanel'\n\n// Re-export types\nexport type { TanStackRouterDevtoolsOptions } from './TanStackRouterDevtools'\nexport type { TanStackRouterDevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel'\n\n// Create a null component for production\nconst NullComponent = /* #__PURE__ */ defineComponent({\n  name: 'NullTanStackRouterDevtools',\n  setup() {\n    return () => null\n  },\n})\n\nexport const TanStackRouterDevtools =\n  process.env.NODE_ENV !== 'development' ? NullComponent : DevToolsComponent\n\nexport const TanStackRouterDevtoolsInProd = DevToolsComponent\n\nexport const TanStackRouterDevtoolsPanel =\n  process.env.NODE_ENV !== 'development'\n    ? NullComponent\n    : DevToolsPanelComponent\n\nexport const TanStackRouterDevtoolsPanelInProd = DevToolsPanelComponent\n"],"mappings":";;;;AASA,IAAMK,gBAAgCL,gCAAgB;CACpDM,MAAM;CACNC,QAAQ;EACN,aAAa;CACf;AACF,CAAC;AAED,IAAaN,yBAAAA,QAAAA,IAAAA,aACc,gBAAgBI,gBAAgBH;AAE3D,IAAaS,+BAA+BT;AAE5C,IAAaC,8BAAAA,QAAAA,IAAAA,aACc,gBACrBE,gBACAD;AAEN,IAAaQ,oCAAoCR"}

dist/esm/TanStackRouterDevtools.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"TanStackRouterDevtools.js","names":["TanStackRouterDevtoolsCore","defineComponent","h","onMounted","onUnmounted","ref","watch","useRouter","useRouterState","TanStackRouterDevtools","name","props","setup","devToolRef","isMounted","hookRouter","warn","activeRouter","router","activeRouterState","devtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","routerState","value","setRouter","setRouterState","setOptions","mount","unmount"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsOptions {\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?: Record<string, any>\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?: Record<string, any>\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?: Record<string, any>\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 const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtools',\n  props: [\n    'initialIsOpen',\n    'panelProps',\n    'closeButtonProps',\n    'toggleButtonProps',\n    'position',\n    'containerElement',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n    let isMounted = false\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsCore({\n      initialIsOpen: props.initialIsOpen,\n      panelProps: props.panelProps,\n      closeButtonProps: props.closeButtonProps,\n      toggleButtonProps: props.toggleButtonProps,\n      position: props.position,\n      containerElement: props.containerElement,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [\n        props.initialIsOpen,\n        props.panelProps,\n        props.closeButtonProps,\n        props.toggleButtonProps,\n        props.position,\n        props.containerElement,\n        props.shadowDOMTarget,\n      ],\n      () => {\n        devtools.setOptions({\n          initialIsOpen: props.initialIsOpen,\n          panelProps: props.panelProps,\n          closeButtonProps: props.closeButtonProps,\n          toggleButtonProps: props.toggleButtonProps,\n          position: props.position,\n          containerElement: props.containerElement,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"mappings":";;;;AA2CA,IAAaS,yBAAyCR,gCAAgB;CACpES,MAAM;CACNC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACuB;CACzBC,MAAMD,OAAsC;EAC1C,MAAME,aAAaR,IAA2B,KAAK;EACnD,IAAIS,YAAY;EAEhB,MAAMC,aAAaR,UAAU,EAAES,MAAM,OAAO,CAAC;EAC7C,MAAMC,eAAeN,MAAMO,UAAUH;EAErC,MAAMI,oBAAoBX,eAAe,EAAEU,QAAQD,cAAc,CAAC;EAElE,MAAMG,WAAW,IAAIpB,2BAA2B;GAC9CqB,eAAeV,MAAMU;GACrBC,YAAYX,MAAMW;GAClBC,kBAAkBZ,MAAMY;GACxBC,mBAAmBb,MAAMa;GACzBC,UAAUd,MAAMc;GAChBC,kBAAkBf,MAAMe;GACxBC,iBAAiBhB,MAAMgB;GACvBT,QAAQD;GACRW,aAAaT,kBAAkBU;GAChC,CAAC;AAGFvB,cACQW,eACLC,WAAW;AACVE,YAASU,UAAUZ,OAAO;IAE7B;AAGDZ,QAAMa,oBAAoBS,gBAAgB;AACxCR,YAASW,eAAeH,YAAY;IACpC;AAGFtB,cACQ;GACJK,MAAMU;GACNV,MAAMW;GACNX,MAAMY;GACNZ,MAAMa;GACNb,MAAMc;GACNd,MAAMe;GACNf,MAAMgB;GACP,QACK;AACJP,YAASY,WAAW;IAClBX,eAAeV,MAAMU;IACrBC,YAAYX,MAAMW;IAClBC,kBAAkBZ,MAAMY;IACxBC,mBAAmBb,MAAMa;IACzBC,UAAUd,MAAMc;IAChBC,kBAAkBf,MAAMe;IACxBC,iBAAiBhB,MAAMgB;IACxB,CAAC;IAEL;AAEDxB,kBAAgB;AACd,OAAIU,WAAWgB,OAAO;AACpBT,aAASa,MAAMpB,WAAWgB,MAAM;AAChCf,gBAAY;;IAEd;AAEFV,oBAAkB;AAChB,OAAIU,UACFM,UAASc,SAAS;IAEpB;AAEF,eAAahC,EAAE,OAAO,EAAEG,KAAKQ,YAAY,CAAC;;CAE7C,CAAC"}
+{"version":3,"file":"TanStackRouterDevtools.js","names":["TanStackRouterDevtoolsCore","defineComponent","h","onMounted","onUnmounted","ref","watch","useRouter","useRouterState","TanStackRouterDevtools","name","props","setup","devToolRef","isMounted","hookRouter","warn","activeRouter","router","activeRouterState","devtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","routerState","value","setRouter","setRouterState","setOptions","mount","unmount"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsOptions {\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?: Record<string, any>\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?: Record<string, any>\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?: Record<string, any>\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 const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtools',\n  props: [\n    'initialIsOpen',\n    'panelProps',\n    'closeButtonProps',\n    'toggleButtonProps',\n    'position',\n    'containerElement',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n    let isMounted = false\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsCore({\n      initialIsOpen: props.initialIsOpen,\n      panelProps: props.panelProps,\n      closeButtonProps: props.closeButtonProps,\n      toggleButtonProps: props.toggleButtonProps,\n      position: props.position,\n      containerElement: props.containerElement,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [\n        props.initialIsOpen,\n        props.panelProps,\n        props.closeButtonProps,\n        props.toggleButtonProps,\n        props.position,\n        props.containerElement,\n        props.shadowDOMTarget,\n      ],\n      () => {\n        devtools.setOptions({\n          initialIsOpen: props.initialIsOpen,\n          panelProps: props.panelProps,\n          closeButtonProps: props.closeButtonProps,\n          toggleButtonProps: props.toggleButtonProps,\n          position: props.position,\n          containerElement: props.containerElement,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"mappings":";;;;AA2CA,IAAaS,yBAAyCR,gCAAgB;CACpES,MAAM;CACNC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB;CAEnBC,MAAMD,OAAsC;EAC1C,MAAME,aAAaR,IAA2B,IAAI;EAClD,IAAIS,YAAY;EAEhB,MAAMC,aAAaR,UAAU,EAAES,MAAM,MAAM,CAAC;EAC5C,MAAMC,eAAeN,MAAMO,UAAUH;EAErC,MAAMI,oBAAoBX,eAAe,EAAEU,QAAQD,aAAa,CAAC;EAEjE,MAAMG,WAAW,IAAIpB,2BAA2B;GAC9CqB,eAAeV,MAAMU;GACrBC,YAAYX,MAAMW;GAClBC,kBAAkBZ,MAAMY;GACxBC,mBAAmBb,MAAMa;GACzBC,UAAUd,MAAMc;GAChBC,kBAAkBf,MAAMe;GACxBC,iBAAiBhB,MAAMgB;GACvBT,QAAQD;GACRW,aAAaT,kBAAkBU;EACjC,CAAC;EAGDvB,YACQW,eACLC,WAAW;GACVE,SAASU,UAAUZ,MAAM;EAC3B,CACF;EAGAZ,MAAMa,oBAAoBS,gBAAgB;GACxCR,SAASW,eAAeH,WAAW;EACrC,CAAC;EAGDtB,YACQ;GACJK,MAAMU;GACNV,MAAMW;GACNX,MAAMY;GACNZ,MAAMa;GACNb,MAAMc;GACNd,MAAMe;GACNf,MAAMgB;EAAe,SAEjB;GACJP,SAASY,WAAW;IAClBX,eAAeV,MAAMU;IACrBC,YAAYX,MAAMW;IAClBC,kBAAkBZ,MAAMY;IACxBC,mBAAmBb,MAAMa;IACzBC,UAAUd,MAAMc;IAChBC,kBAAkBf,MAAMe;IACxBC,iBAAiBhB,MAAMgB;GACzB,CAAC;EACH,CACF;EAEAxB,gBAAgB;GACd,IAAIU,WAAWgB,OAAO;IACpBT,SAASa,MAAMpB,WAAWgB,KAAK;IAC/Bf,YAAY;GACd;EACF,CAAC;EAEDV,kBAAkB;GAChB,IAAIU,WACFM,SAASc,QAAQ;EAErB,CAAC;EAED,aAAahC,EAAE,OAAO,EAAEG,KAAKQ,WAAW,CAAC;CAC3C;AACF,CAAC"}

dist/esm/TanStackRouterDevtoolsPanel.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":["TanStackRouterDevtoolsPanelCore","defineComponent","h","onMounted","onUnmounted","ref","watch","useRouter","useRouterState","TanStackRouterDevtoolsPanel","name","props","setup","devToolRef","isMounted","hookRouter","warn","activeRouter","router","activeRouterState","devtools","style","className","isOpen","setIsOpen","handleDragStart","shadowDOMTarget","routerState","value","setRouter","setRouterState","setOptions","mount","unmount"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard style object used to style a component with inline styles\n   */\n  style?: any\n  /**\n   * The standard 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   * 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 const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtoolsPanel',\n  props: [\n    'style',\n    'className',\n    'isOpen',\n    'setIsOpen',\n    'handleDragStart',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsPanelOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n    let isMounted = false\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsPanelCore({\n      style: props.style,\n      className: props.className,\n      isOpen: props.isOpen,\n      setIsOpen: props.setIsOpen,\n      handleDragStart: props.handleDragStart,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [props.className, props.style, props.shadowDOMTarget],\n      () => {\n        devtools.setOptions({\n          className: props.className,\n          style: props.style,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"mappings":";;;;AAoCA,IAAaS,8BAA8CR,gCAAgB;CACzES,MAAM;CACNC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACuB;CACzBC,MAAMD,OAA2C;EAC/C,MAAME,aAAaR,IAA2B,KAAK;EACnD,IAAIS,YAAY;EAEhB,MAAMC,aAAaR,UAAU,EAAES,MAAM,OAAO,CAAC;EAC7C,MAAMC,eAAeN,MAAMO,UAAUH;EAErC,MAAMI,oBAAoBX,eAAe,EAAEU,QAAQD,cAAc,CAAC;EAElE,MAAMG,WAAW,IAAIpB,gCAAgC;GACnDqB,OAAOV,MAAMU;GACbC,WAAWX,MAAMW;GACjBC,QAAQZ,MAAMY;GACdC,WAAWb,MAAMa;GACjBC,iBAAiBd,MAAMc;GACvBC,iBAAiBf,MAAMe;GACvBR,QAAQD;GACRU,aAAaR,kBAAkBS;GAChC,CAAC;AAGFtB,cACQW,eACLC,WAAW;AACVE,YAASS,UAAUX,OAAO;IAE7B;AAGDZ,QAAMa,oBAAoBQ,gBAAgB;AACxCP,YAASU,eAAeH,YAAY;IACpC;AAGFrB,cACQ;GAACK,MAAMW;GAAWX,MAAMU;GAAOV,MAAMe;GAAgB,QACrD;AACJN,YAASW,WAAW;IAClBT,WAAWX,MAAMW;IACjBD,OAAOV,MAAMU;IACbK,iBAAiBf,MAAMe;IACxB,CAAC;IAEL;AAEDvB,kBAAgB;AACd,OAAIU,WAAWe,OAAO;AACpBR,aAASY,MAAMnB,WAAWe,MAAM;AAChCd,gBAAY;;IAEd;AAEFV,oBAAkB;AAChB,OAAIU,UACFM,UAASa,SAAS;IAEpB;AAEF,eAAa/B,EAAE,OAAO,EAAEG,KAAKQ,YAAY,CAAC;;CAE7C,CAAC"}
+{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":["TanStackRouterDevtoolsPanelCore","defineComponent","h","onMounted","onUnmounted","ref","watch","useRouter","useRouterState","TanStackRouterDevtoolsPanel","name","props","setup","devToolRef","isMounted","hookRouter","warn","activeRouter","router","activeRouterState","devtools","style","className","isOpen","setIsOpen","handleDragStart","shadowDOMTarget","routerState","value","setRouter","setRouterState","setOptions","mount","unmount"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard style object used to style a component with inline styles\n   */\n  style?: any\n  /**\n   * The standard 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   * 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 const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtoolsPanel',\n  props: [\n    'style',\n    'className',\n    'isOpen',\n    'setIsOpen',\n    'handleDragStart',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsPanelOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n    let isMounted = false\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsPanelCore({\n      style: props.style,\n      className: props.className,\n      isOpen: props.isOpen,\n      setIsOpen: props.setIsOpen,\n      handleDragStart: props.handleDragStart,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [props.className, props.style, props.shadowDOMTarget],\n      () => {\n        devtools.setOptions({\n          className: props.className,\n          style: props.style,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"mappings":";;;;AAoCA,IAAaS,8BAA8CR,gCAAgB;CACzES,MAAM;CACNC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB;CAEnBC,MAAMD,OAA2C;EAC/C,MAAME,aAAaR,IAA2B,IAAI;EAClD,IAAIS,YAAY;EAEhB,MAAMC,aAAaR,UAAU,EAAES,MAAM,MAAM,CAAC;EAC5C,MAAMC,eAAeN,MAAMO,UAAUH;EAErC,MAAMI,oBAAoBX,eAAe,EAAEU,QAAQD,aAAa,CAAC;EAEjE,MAAMG,WAAW,IAAIpB,gCAAgC;GACnDqB,OAAOV,MAAMU;GACbC,WAAWX,MAAMW;GACjBC,QAAQZ,MAAMY;GACdC,WAAWb,MAAMa;GACjBC,iBAAiBd,MAAMc;GACvBC,iBAAiBf,MAAMe;GACvBR,QAAQD;GACRU,aAAaR,kBAAkBS;EACjC,CAAC;EAGDtB,YACQW,eACLC,WAAW;GACVE,SAASS,UAAUX,MAAM;EAC3B,CACF;EAGAZ,MAAMa,oBAAoBQ,gBAAgB;GACxCP,SAASU,eAAeH,WAAW;EACrC,CAAC;EAGDrB,YACQ;GAACK,MAAMW;GAAWX,MAAMU;GAAOV,MAAMe;EAAe,SACpD;GACJN,SAASW,WAAW;IAClBT,WAAWX,MAAMW;IACjBD,OAAOV,MAAMU;IACbK,iBAAiBf,MAAMe;GACzB,CAAC;EACH,CACF;EAEAvB,gBAAgB;GACd,IAAIU,WAAWe,OAAO;IACpBR,SAASY,MAAMnB,WAAWe,KAAK;IAC/Bd,YAAY;GACd;EACF,CAAC;EAEDV,kBAAkB;GAChB,IAAIU,WACFM,SAASa,QAAQ;EAErB,CAAC;EAED,aAAa/B,EAAE,OAAO,EAAEG,KAAKQ,WAAW,CAAC;CAC3C;AACF,CAAC"}

package.json

 {
   "name": "@tanstack/vue-router-devtools",
-  "version": "1.167.0",
+  "version": "1.167.1-pre.0",
   "description": "Modern and scalable routing for Vue applications",
@@ -48,3 +48,3 @@ "author": "Tanner Linsley",
     "vite": "*",
-    "@tanstack/router-devtools-core": "1.168.0"
+    "@tanstack/router-devtools-core": "1.168.1-pre.0"
   },
@@ -58,4 +58,4 @@ "devDependencies": {
     "vue": "^3.5.13",
-    "@tanstack/vue-router": "^1.170.0",
-    "@tanstack/router-core": "^1.170.0"
+    "@tanstack/vue-router": "^1.170.18-pre.0",
+    "@tanstack/router-core": "^1.171.16-pre.0"
   },
@@ -71,3 +71,2 @@ "peerDependenciesMeta": {
     "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
-    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
@@ -77,3 +76,4 @@ "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
     "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js",
-    "test:types:ts60": "tsc",
+    "test:types:ts60": "tsc6",
+    "test:types:ts70": "tsc",
     "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
@@ -80,0 +80,0 @@ "build": "vite build"

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Improved metrics

Total package byte prevSize

40943

0.12%

Worsened metrics

Number of low quality alerts

2

100%

Dependency changes

• + Added

  @tanstack/router-devtools-core@1.168.1-pre.0
  (transitive)

• - Removed

  @tanstack/router-devtools-core@1.168.0
  (transitive)

• Updated

  @tanstack/router-devtools-core@1.168.1-pre.0