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

Comparing version 2.0.0-rc.0 to 2.0.0-rc.1

dist/cjs/index.cjs.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/index.tsx"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n  Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"mappings":";;;;AAGA,IAAa,yBAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;;AAIf,IAAa,+BAAA,+BAAA;AAGb,IAAa,8BAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;;AAIf,IAAa,oCAAA,oCAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/index.tsx"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n  Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"mappings":";;;;AAGA,IAAa,yBAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,+BAAA;AAGN,IAAa,+BAAA,+BAAA;AAGb,IAAa,8BAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,oCAAA;AAGN,IAAa,oCAAA,oCAAA"}

dist/cjs/TanStackRouterDevtools.cjs.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"TanStackRouterDevtools.cjs","names":["ref={(el) => {\n          setDevToolRef(el)\n        }}"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\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?: JSX.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?: JSX.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?: JSX.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 const TanStackRouterDevtools: Component<\n  TanStackRouterDevtoolsOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      initialIsOpen: usedProps.initialIsOpen,\n      panelProps: usedProps.panelProps,\n      closeButtonProps: usedProps.closeButtonProps,\n      toggleButtonProps: usedProps.toggleButtonProps,\n      position: usedProps.position,\n      containerElement: usedProps.containerElement,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div\n        ref={(el) => {\n          setDevToolRef(el)\n        }}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;AA6CA,IAAa,0BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,WAAA,GAAA,uBAAA,WAAU;CACrC,MAAM,qBAAA,GAAA,uBAAA,gBAAmC,EAAE,QAAQ,aAAA,CAAc;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;;CAGf,MAAM,CAAC,YAAY,kBAAA,GAAA,SAAA,cAA8B;CACjD,MAAM,CAAC,aAAA,GAAA,SAAA,cAAyB,IAAI,+BAAA,2BAA2B,SAAA,CAAU;CAGzE,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAA;;CAGxB,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAA;;CAG7B,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,eAAe,UAAU;GACzB,YAAY,UAAU;GACtB,kBAAkB,UAAU;GAC5B,mBAAmB,UAAU;GAC7B,UAAU,UAAU;GACpB,kBAAkB,UAAU;GAC5B,iBAAiB,UAAU;GAC5B;;CAGH,CAAA,GAAA,SAAA,qBACS;EAAE,GAAG,SAAA;EAAY,IAAI,WAAA;MAC3B,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAA;GAER,CAAA,GAAA,SAAA,iBAAgB;IACd,EAAE,QAAA;;;;CAMV,cAEI;;EACE,CAAA,GAAA,aAAA,WAAA;WAAM,OAAO;IACX,cAAc,EAAA;;KADhBA,IAAAA;EADF,OAAA"}
+{"version":3,"file":"TanStackRouterDevtools.cjs","names":["ref={(el) => {\n          setDevToolRef(el)\n        }}"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\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?: JSX.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?: JSX.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?: JSX.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 const TanStackRouterDevtools: Component<\n  TanStackRouterDevtoolsOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      initialIsOpen: usedProps.initialIsOpen,\n      panelProps: usedProps.panelProps,\n      closeButtonProps: usedProps.closeButtonProps,\n      toggleButtonProps: usedProps.toggleButtonProps,\n      position: usedProps.position,\n      containerElement: usedProps.containerElement,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div\n        ref={(el) => {\n          setDevToolRef(el)\n        }}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;AA6CA,IAAa,0BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,WAAA,GAAA,uBAAA,WAAoB;CAC/C,MAAM,qBAAA,GAAA,uBAAA,gBAAmC,EAAE,QAAQ,aAAa,CAAC;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;CACf;CAEA,MAAM,CAAC,YAAY,kBAAA,GAAA,SAAA,cAA8C;CACjE,MAAM,CAAC,aAAA,GAAA,SAAA,cAAyB,IAAI,+BAAA,2BAA2B,SAAS,CAAC;CAGzE,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAM;CAC9B,CAAC;CAED,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAW;CACxC,CAAC;CAED,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,eAAe,UAAU;GACzB,YAAY,UAAU;GACtB,kBAAkB,UAAU;GAC5B,mBAAmB,UAAU;GAC7B,UAAU,UAAU;GACpB,kBAAkB,UAAU;GAC5B,iBAAiB,UAAU;EAC7B,CAAC;CACH,CAAC;CAED,CAAA,GAAA,SAAA,qBACS;EAAE,GAAG,SAAS;EAAG,IAAI,WAAW;CAAE,KACxC,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAE;GAEV,CAAA,GAAA,SAAA,iBAAgB;IACd,EAAE,QAAQ;GACZ,CAAC;EACH;CACF,CACF;CAEA,cAEI;oBAIC;EAHC,CAAA,GAAA,aAAA,WAAA;WAAM,OAAO;IACX,cAAc,EAAE;GAClB;EAAC,GAFDA,IAEC;EAHH,OAAA;CAIC,GAAA;AAGP"}

dist/cjs/TanStackRouterDevtoolsPanel.cjs.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","names":["ref={setDevToolRef}"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\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: Component<\n  TanStackRouterDevtoolsPanelOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(\n    new TanStackRouterDevtoolsPanelCore(usedProps),\n  )\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      className: usedProps.className,\n      style: usedProps.style,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div ref={setDevToolRef} />\n    </>\n  )\n}\n"],"mappings":";;;;;;AAsCA,IAAa,+BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,WAAA,GAAA,uBAAA,WAAU;CACrC,MAAM,qBAAA,GAAA,uBAAA,gBAAmC,EAAE,QAAQ,aAAA,CAAc;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;;CAGf,MAAM,CAAC,YAAY,kBAAA,GAAA,SAAA,cAA8B;CACjD,MAAM,CAAC,aAAA,GAAA,SAAA,cACL,IAAI,+BAAA,gCAAgC,SAAA,CAAU;CAIhD,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAA;;CAGxB,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAA;;CAG7B,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,WAAW,UAAU;GACrB,OAAO,UAAU;GACjB,iBAAiB,UAAU;GAC5B;;CAGH,CAAA,GAAA,SAAA,qBACS;EAAE,GAAG,SAAA;EAAY,IAAI,WAAA;MAC3B,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAA;GAER,CAAA,GAAA,SAAA,iBAAgB;IACd,EAAE,QAAA;;;;CAMV,cAEI;;EAAK,CAAA,GAAA,aAAA,WAAA;UAAK;KAALA,IAAAA;EAAL,OAAA"}
+{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","names":["ref={setDevToolRef}"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\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: Component<\n  TanStackRouterDevtoolsPanelOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(\n    new TanStackRouterDevtoolsPanelCore(usedProps),\n  )\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      className: usedProps.className,\n      style: usedProps.style,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div ref={setDevToolRef} />\n    </>\n  )\n}\n"],"mappings":";;;;;;AAsCA,IAAa,+BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,WAAA,GAAA,uBAAA,WAAoB;CAC/C,MAAM,qBAAA,GAAA,uBAAA,gBAAmC,EAAE,QAAQ,aAAa,CAAC;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;CACf;CAEA,MAAM,CAAC,YAAY,kBAAA,GAAA,SAAA,cAA8C;CACjE,MAAM,CAAC,aAAA,GAAA,SAAA,cACL,IAAI,+BAAA,gCAAgC,SAAS,CAC/C;CAGA,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAM;CAC9B,CAAC;CAED,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAW;CACxC,CAAC;CAED,CAAA,GAAA,SAAA,cAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,WAAW,UAAU;GACrB,OAAO,UAAU;GACjB,iBAAiB,UAAU;EAC7B,CAAC;CACH,CAAC;CAED,CAAA,GAAA,SAAA,qBACS;EAAE,GAAG,SAAS;EAAG,IAAI,WAAW;CAAE,KACxC,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAE;GAEV,CAAA,GAAA,SAAA,iBAAgB;IACd,EAAE,QAAQ;GACZ,CAAC;EACH;CACF,CACF;CAEA,cAEI;oBAA0B;EAArB,CAAA,GAAA,aAAA,WAAA;UAAK;EAAa,GAAlBA,IAAkB;EAAvB,OAAA;CAA0B,GAAA;AAGhC"}

dist/esm/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.tsx"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n  Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"mappings":";;;AAGA,IAAa,yBAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;IAET;AAEN,IAAa,+BACX;AAEF,IAAa,8BAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;IAET;AAEN,IAAa,oCACX"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.tsx"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n  Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n  DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"mappings":";;;AAGA,IAAa,yBAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;AACT,IACA;AAEN,IAAa,+BACX;AAEF,IAAa,8BAAA,QAAA,IAAA,aACc,gBACrB,WAAY;CACV,OAAO;AACT,IACA;AAEN,IAAa,oCACX"}

dist/esm/TanStackRouterDevtools.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"TanStackRouterDevtools.js","names":["ref={(el) => {\n          setDevToolRef(el)\n        }}"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\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?: JSX.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?: JSX.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?: JSX.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 const TanStackRouterDevtools: Component<\n  TanStackRouterDevtoolsOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      initialIsOpen: usedProps.initialIsOpen,\n      panelProps: usedProps.panelProps,\n      closeButtonProps: usedProps.closeButtonProps,\n      toggleButtonProps: usedProps.toggleButtonProps,\n      position: usedProps.position,\n      containerElement: usedProps.containerElement,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div\n        ref={(el) => {\n          setDevToolRef(el)\n        }}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;AA6CA,IAAa,0BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,UAAU,UAAA;CACrC,MAAM,oBAAoB,eAAe,EAAE,QAAQ,aAAA,CAAc;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;;CAGf,MAAM,CAAC,YAAY,iBAAiB,aAAa;CACjD,MAAM,CAAC,YAAY,aAAa,IAAI,2BAA2B,SAAA,CAAU;CAGzE,aAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAA;;CAGxB,aAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAA;;CAG7B,aAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,eAAe,UAAU;GACzB,YAAY,UAAU;GACtB,kBAAkB,UAAU;GAC5B,mBAAmB,UAAU;GAC7B,UAAU,UAAU;GACpB,kBAAkB,UAAU;GAC5B,iBAAiB,UAAU;GAC5B;;CAGH,oBACS;EAAE,GAAG,SAAA;EAAY,IAAI,WAAA;MAC3B,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAA;GAER,gBAAgB;IACd,EAAE,QAAA;;;;CAMV,cAEI;;EACE,UAAA;WAAM,OAAO;IACX,cAAc,EAAA;;KADhBA,IAAAA;EADF,OAAA"}
+{"version":3,"file":"TanStackRouterDevtools.js","names":["ref={(el) => {\n          setDevToolRef(el)\n        }}"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\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?: JSX.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?: JSX.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?: JSX.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 const TanStackRouterDevtools: Component<\n  TanStackRouterDevtoolsOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      initialIsOpen: usedProps.initialIsOpen,\n      panelProps: usedProps.panelProps,\n      closeButtonProps: usedProps.closeButtonProps,\n      toggleButtonProps: usedProps.toggleButtonProps,\n      position: usedProps.position,\n      containerElement: usedProps.containerElement,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div\n        ref={(el) => {\n          setDevToolRef(el)\n        }}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;AA6CA,IAAa,0BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,UAAU,UAAU;CAC/C,MAAM,oBAAoB,eAAe,EAAE,QAAQ,aAAa,CAAC;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;CACf;CAEA,MAAM,CAAC,YAAY,iBAAiB,aAA6B;CACjE,MAAM,CAAC,YAAY,aAAa,IAAI,2BAA2B,SAAS,CAAC;CAGzE,aAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAM;CAC9B,CAAC;CAED,aAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAW;CACxC,CAAC;CAED,aAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,eAAe,UAAU;GACzB,YAAY,UAAU;GACtB,kBAAkB,UAAU;GAC5B,mBAAmB,UAAU;GAC7B,UAAU,UAAU;GACpB,kBAAkB,UAAU;GAC5B,iBAAiB,UAAU;EAC7B,CAAC;CACH,CAAC;CAED,oBACS;EAAE,GAAG,SAAS;EAAG,IAAI,WAAW;CAAE,KACxC,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAE;GAEV,gBAAgB;IACd,EAAE,QAAQ;GACZ,CAAC;EACH;CACF,CACF;CAEA,cAEI;oBAIC;EAHC,UAAA;WAAM,OAAO;IACX,cAAc,EAAE;GAClB;EAAC,GAFDA,IAEC;EAHH,OAAA;CAIC,GAAA;AAGP"}

dist/esm/TanStackRouterDevtoolsPanel.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":["ref={setDevToolRef}"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\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: Component<\n  TanStackRouterDevtoolsPanelOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(\n    new TanStackRouterDevtoolsPanelCore(usedProps),\n  )\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      className: usedProps.className,\n      style: usedProps.style,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div ref={setDevToolRef} />\n    </>\n  )\n}\n"],"mappings":";;;;;;AAsCA,IAAa,+BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,UAAU,UAAA;CACrC,MAAM,oBAAoB,eAAe,EAAE,QAAQ,aAAA,CAAc;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;;CAGf,MAAM,CAAC,YAAY,iBAAiB,aAAa;CACjD,MAAM,CAAC,YAAY,aACjB,IAAI,gCAAgC,SAAA,CAAU;CAIhD,aAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAA;;CAGxB,aAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAA;;CAG7B,aAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,WAAW,UAAU;GACrB,OAAO,UAAU;GACjB,iBAAiB,UAAU;GAC5B;;CAGH,oBACS;EAAE,GAAG,SAAA;EAAY,IAAI,WAAA;MAC3B,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAA;GAER,gBAAgB;IACd,EAAE,QAAA;;;;CAMV,cAEI;;EAAK,UAAA;UAAK;KAALA,IAAAA;EAAL,OAAA"}
+{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":["ref={setDevToolRef}"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component } from 'solid-js'\nimport type { JSX } from '@solidjs/web'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\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: Component<\n  TanStackRouterDevtoolsPanelOptions\n> = (props): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n  const [devtools] = createSignal(\n    new TanStackRouterDevtoolsPanelCore(usedProps),\n  )\n\n  // Update devtools when props change\n  createEffect(devtools, (d) => {\n    d.setRouter(usedProps.router)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setRouterState(usedProps.routerState)\n  })\n\n  createEffect(devtools, (d) => {\n    d.setOptions({\n      className: usedProps.className,\n      style: usedProps.style,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  createEffect(\n    () => ({ d: devtools(), el: devToolRef() }),\n    ({ d, el }) => {\n      if (el) {\n        d.mount(el)\n\n        onCleanup(() => {\n          d.unmount()\n        })\n      }\n    },\n  )\n\n  return (\n    <>\n      <div ref={setDevToolRef} />\n    </>\n  )\n}\n"],"mappings":";;;;;;AAsCA,IAAa,+BAER,UAA8B;CACjC,MAAM,eAAe,MAAM,UAAU,UAAU;CAC/C,MAAM,oBAAoB,eAAe,EAAE,QAAQ,aAAa,CAAC;CAEjE,MAAM,YAAY;EAChB,GAAG;EACH,QAAQ;EACR,aAAa;CACf;CAEA,MAAM,CAAC,YAAY,iBAAiB,aAA6B;CACjE,MAAM,CAAC,YAAY,aACjB,IAAI,gCAAgC,SAAS,CAC/C;CAGA,aAAa,WAAW,MAAM;EAC5B,EAAE,UAAU,UAAU,MAAM;CAC9B,CAAC;CAED,aAAa,WAAW,MAAM;EAC5B,EAAE,eAAe,UAAU,WAAW;CACxC,CAAC;CAED,aAAa,WAAW,MAAM;EAC5B,EAAE,WAAW;GACX,WAAW,UAAU;GACrB,OAAO,UAAU;GACjB,iBAAiB,UAAU;EAC7B,CAAC;CACH,CAAC;CAED,oBACS;EAAE,GAAG,SAAS;EAAG,IAAI,WAAW;CAAE,KACxC,EAAE,GAAG,SAAS;EACb,IAAI,IAAI;GACN,EAAE,MAAM,EAAE;GAEV,gBAAgB;IACd,EAAE,QAAQ;GACZ,CAAC;EACH;CACF,CACF;CAEA,cAEI;oBAA0B;EAArB,UAAA;UAAK;EAAa,GAAlBA,IAAkB;EAAvB,OAAA;CAA0B,GAAA;AAGhC"}

package.json

 {
   "name": "@tanstack/solid-router-devtools",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "description": "Modern and scalable routing for Solid applications",
@@ -56,17 +56,17 @@ "author": "Tanner Linsley",
   "dependencies": {
-    "@solidjs/web": "^2.0.0-rc.0",
+    "@solidjs/web": "^2.0.0-rc.1",
     "@tanstack/router-devtools-core": "1.168.1"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "^3.0.0-next.28",
-    "@solidjs/web": "^2.0.0-rc.0",
+    "@solidjs/vite-plugin": "^3.0.0-next.30",
+    "@solidjs/web": "^2.0.0-rc.1",
     "@types/node": ">=20",
-    "solid-js": "^2.0.0-rc.0",
+    "solid-js": "^2.0.0-rc.1",
     "vite": "*"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-rc.0",
-    "solid-js": "^2.0.0-rc.0",
-    "@tanstack/router-core": "^1.171.16",
-    "@tanstack/solid-router": "^2.0.0-rc.0"
+    "@solidjs/web": "^2.0.0-rc.1",
+    "solid-js": "^2.0.0-rc.1",
+    "@tanstack/router-core": "^1.171.22",
+    "@tanstack/solid-router": "^2.0.0-rc.1"
   },
@@ -73,0 +73,0 @@ "peerDependenciesMeta": {

No alert changes

Improved metrics

Total package byte prevSize

55144

0.76%

Dependency changes

• Updated

  @solidjs/web@^2.0.0-rc.1