Export <DevToolsPanel />

[kachkaev]

👋 folks!

In addition to rendering a toggle button in a corner, some DevTools provide an additional export for the embedded mode. For example: https://tanstack.com/query/v4/docs/react/devtools#embedded-mode

// normal mode
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

// embedded mode
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'

It would be nice if this was the case for jotai-devtools too:

+ import { DevToolsPanel } from 'jotai-devtools';

In the meantime, here is my workaround:

import { css, Global } from '@emotion/react';
import { DevTools as JotaiDevTools } from 'jotai-devtools';

// Context: https://github.com/jotaijs/jotai-devtools/issues/58
// To be removed if JotaiDevToolsPanel is exported upstream
const jotaiDevToolsStyleHack = css`
  /* hide trigger button */
  .jotai-devtools-trigger-button {
    display: none !important;
  }

  /* position the panel relative to its container */
  .jotai-devtools-shell {
    position: relative !important;
    z-index: auto !important;
  }

  /* hide panel header to save space and to make 'minimize' unreachable */
  .jotai-devtools-shell > div:nth-child(2) {
    display: none !important;
  }
`;

export default function App() {
  return (
    <div>
      <div>my content</div>

      <div className="my-custom-jotai-devtools-container">
        <Global styles={jotaiDevToolsStyleHack} />
        <JotaiDevTools isInitialOpen={true} />
      </div>
    </div>
  );
}

---

Side note: it’d be nice to rename DevTools into JotaiDevTools in module exports. Otherwise, if a component renders several DevTool panels it is necessary to use as to avoid confusion. The old export can be left as is or marked as deprecated.

- import { DevTools as JotaiDevTools } from 'jotai-devtools';
+ import { JotaiDevTools } from 'jotai-devtools';

The same could apply to the new panel export, if it is implemented:

+ import { JotaiDevToolsPanel } from 'jotai-devtools';

Cheers! 🙌

[arjunvegda]

Thanks for reaching out! Great suggestions.

Is style overrides the only use case for having the panel to be exposed? or are there other use cases?

We provide those custom classes (that you used in jotaiDevToolsStyleHack) for that exact reason — to give the user the flexibility to override the styles of certain elements.

I like what React Query did with the "floating mode" and embedded mode. I'll look into it.

Side note: it’d be nice to rename DevTools into JotaiDevTools in module exports. Otherwise, if a component renders several DevTool panels it is necessary to use as to avoid confusion. The old export can be left as is or marked as deprecated.

Great suggestion! We're not planning to release breaking changes anytime soon, but I've made note of it. @dai-shi - any thoughts here?

[dai-shi]

I don't think as renaming is bad.
We prefer simpler/shorter export names and let users rename them with as as they like.
For example:

import { Provider as JotaiProvider } from 'jotai';
import { Provider as ReduxProvider } from 'react-redux';

[kachkaev]

Is style overrides the only use case for having the panel to be exposed? or are there other use cases?

Primarily so, yes. Persistent class names like jotai-devtools-trigger-button are handy indeed, but targeting them in global styles feels a bit like hacking rather than doing something intended.

In my imagination, JotaiDevToolsPanel is naturally composeable with other components. It accepts style and className props so users can generate const StyledJotaiDevToolsPanel = styled(JotaiDevToolsPanel)`...`. The stand-alone panel does not contain the minimize icon and can be possibly configured to not render the header too. That’s what I have done in my CSS above via div:nth-child(2).

Speaking of as, this syntax to me is a necessary evil, so I try to avoid it as much as I can. If an export is named unambiguously, folks don’t need to come up with name overrides so certain kinds of cognitive tasks become easier to perform across teams. That’s just an opinion though – I don’t have any hard data to prove that avoiding as is preferred 🙂

[arjunvegda]

Great, thanks for the info, and sorry for the delay!

Given that there is a workaround, I’d rank this as a low priority for now and consider it as a new feature request (please let me know if you think otherwise).

We’re investing time and effort in getting some of the core features out that’ll enhance the debugging experience for the users. We'll get to this once major features are out. I'll move this to a discussion thread to continue our discussion there.