Suggestions for configuring TanStackDevtools

[tomasohCHOM]

Hello! First of all, thank you so much for the amazing product that is TanStack as well as its suite of tools like router, query, store, etc! I've recently been using these technologies to build various side projects and it really simplifies the way I think of React applications and the tools' ecosystem is just top tier overall.

For this discussion, I wanted to bring up some small issues/annoyances that I ran into when using <TanStackDevtools /> (mainly from the configuration side of things), and some suggestions that I have thought to make the configuration experience a bit nicer:

• I was trying to remap the default hot key for opening the devtools from Shift+A to Control+A. There's the openHotKey property where it's default value is an array like ["Shift", "A"], but the documentation indicates it as shift+a, which was a bit confusing because it wasn't super clear whether it was accepting a string with these letter combinations, or whether it was an array containing the sequence of characters. Eventually, I was able to figure it out by inspecting the localStorage elements and seeing the provided default value in the tanstack_devtools_settings object, but took me a bit of time to realize how it was done. It is also related to the second item that I wanted to talk about below.
• When changes are made to the config, the application that holds the devtools won't automatically reflect those changes because the previous values are stored in localStorage. I initially didn't realize that that's how the entries were stored, and thought it was a bit confusing to not see the live changes, even after restarting the dev server a couple times. Only after digging into my application's localStorage was I able to realize how it was all stored. I believe an improvement to this is to "refresh" the new config values if changes are made before mounting the component, or making some notes in the official documentation if there is a specific reason for the current approach.

If you, the maintainers of TanStack Router, think this might be a feature worth looking into (whether it can be done all at once or with different pull requests), I would be very happy to give this a try and implement these Devtool configuration changes. Thank you so much again!

[schiller-manuel]

this fits better in the devtools repo

[tomasohCHOM]

Ok, after looking at #199, I realized they recently merged a feature to swap the hotkey and I still have the older version of tanstack/react-devtools installed on my project. As far as I am aware though, properties for the devtools are still stored in localStorage and do not live reload as changes are made to the config. Is that correct?

[schiller-manuel]

@AlemTuzlak

[AlemTuzlak]

Correct, this is the intended behavior, if you're working on a team everyone gets the default settings from the passed in config and then is able to change the settings to their preferences in the settings tab.

[tomasohCHOM]

@AlemTuzlak I see! But, if the default settings themselves are changed in the component, would we not want to live reload those as well? Or at least propagate whatever has changed with the necessary values (for instance, if I changed the openHotKey value) to an existing config stored in localStorage?

export const Route = createRootRouteWithContext<AppRouterContext>()({
  component: () => (
    <>
      <Navbar />
      <Outlet />
      <TanStackDevtools
        config={{ // if changes are made to this config object, live update whatever HAS changed
          position: "bottom-right",
          openHotkey: ["Control", "A"],
        }}
        plugins={[
          {
            name: "Tanstack Router",
            render: <TanStackRouterDevtoolsPanel />,
          },
          {
            name: "Tanstack Query",
            render: <ReactQueryDevtoolsPanel />,
          }
        ]}
      />
    </>
  ),
});

Maybe I'm overreaching here and looking into this too deeply, but would love to hear your thoughts on this!