Integrated dev tools

[derekperkins]

When doing dev on mosaic, it would be really handy to have a query log, when things get materialized or not, current state of selectors, etc. TanStack has some great framework agnostic devtools for their various projects, which are now being opened up to make it easier for other tools to build. Would you be interested in having something like this contributed upstream here?

https://tanstack.com/devtools/

cc @tannerlinsley @SeanCassiere @ChristianCasazza

[derekperkins]

To give a better feel for things, here are a few examples of what I'd have in mind:

TanStack Query

Show all the queries, and you can click into them to see the data. We could potentially do this per mosaic query, limiting retention to a handful of rows maybe.

TanStack Router

Shows the current state of routing params. Maybe this could be a minimal built in data viewer?

OSS Data Tool (https://github.com/theVedanta/meridian)

This is what originally triggered my thoughts around this, just being able to see what queries were being made, and annotate them with details about how/why a materialized view was made, or maybe couldn't be made. Show when there's a materialized view hit, etc. You could filter by client name, so you could see if you have a component that's overly trigger happy.

[domoritz]

I'm a huge fan of having good debug tooling. Right now, we have the browser console/terminal logs as the main means of debugging. I'd be interested in upstreamed tooling if it doesn't add a lot of dependencies and is lightweight.

[derekperkins]

Agreed. The idea would be to have a separate package to opt into the dev tools, and only set it up as a dev dependency

• e.g. https://www.npmjs.com/package/@tanstack/query-devtools
• https://tanstack.com/devtools/latest/docs/production

[derekperkins]

@domoritz could we get some feedback on #946?