Update docs for conditional CSS import

[kevinschaich]

I tried it like this first but it was complaining that an import has to be a top-level declaration:

if (process.env.NODE_ENV === 'development') {
    import('jotai-devtools/styles.css')
}

I also tried it with next/dynamic but no luck there.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[arjunvegda]

Thanks for the PR! I'm not sure if I'd recommend using require due to its limited support 🤔

What about lazy loading the component like this 👇? Would that for Next.Js?

const LazyDevtools = lazy(() =>
  import("./JotaiDevtools").then((module) => ({
    default: module.DevTools,
  }))
);

export const YourApp = () => {
  return (
    <Suspense fallback="">
      { process.env.NODE_ENV === "development" ?  <LazyDevtools/> : null }
    </Suspense>
  );
}

In ./JotaiDevTools.tsx

import "jotai-devtools/styles.css";
export { DevTools } from "jotai-devtools";

---

**Vite users could do something like this 👇 **

import { DevTools } from "jotai-devtools";
import css from "jotai-devtools/styles.css?inline";

export const JotaiDevTools = () =>
  process.env.NODE_ENV !== "production" ? (
    <>
      <style>{css}</style>
      <DevTools />
    </>
  ) : null;

[arjunvegda]

However, for some reason when I do this the build file turns out to be MUCH larger.

@npearson72 - Thanks for reporting. That seems strange! 🤔 Works fine on my end (see screenshot below). Could you create a small repro?

[npearson72]

@arjunvegda

Repo: https://github.com/npearson72/jotai-devtools-test

Here's what I'm seeing:

[npearson72]

@arjunvegda have you looked at jotai-devtools/dist/index.css?

It has all the mantine styles in it. I'm assuming you wanted those to live in jotai-devtools/dist/internal__devtools.css, but perhaps I've misunderstood.

In any case, it seems v0.8.0, which is using Mantine 6x which is not having this issue. But all later versions do.

[arjunvegda]

Ah! you're missing process.env.NODE_ENV !== "production" check in DevTools.tsx#L4.

See the full code in the above comment.

[npearson72]

Oh, I see. I didn't realize that process.env was available in the Vite UI, but that make sense. Thank you.

[npearson72]

@arjunvegda this is helpful, thanks for the tip. I'm using the vite version you posted.

However, for some reason when I do this the build file turns out to be MUCH larger. It appears as if it's pulling in CSS from other libraries (i.e. Mantine) in my node_modules. Having trouble understand what's actually happening other than my vendor file is twice as large now.

Any ideas?

[kevinschaich]

@arjunvegda is there a reason the devtools themselves can't import styles.css? I think it would simplify imports for all frameworks

[kevinschaich]

if that's not an option this is probably the preferred import method for Next

providers.tsx

'use client'

import { Provider as JotaiProvider, createStore } from 'jotai'
import dynamic from 'next/dynamic'
import { ReactNode } from 'react'
const JotaiDevtools = dynamic(() => import('@/components/providers/jotai-devtools'), {ssr: false})

const store = createStore()

export const Providers = ({children}: {children: ReactNode}) => {
    return (
        <JotaiProvider store={store}>
            {process.env.NODE_ENV === 'development' && <JotaiDevtools store={store} />}
            {children}
        </JotaiProvider>
    )
}

jotai-devtools.tsx

import { createStore } from 'jotai'
import { DevTools } from 'jotai-devtools'
import 'jotai-devtools/styles.css'

export default function JotaiDevtools({ store }: { store: ReturnType<typeof createStore> }) {
    return (
        <DevTools
            store={store}
            theme='dark'
            position='bottom-right'
            options={{ shouldExpandJsonTreeViewInitially: true }}
        />
    )
}

[arjunvegda]

@arjunvegda is there a reason the devtools themselves can't import styles.css? I think it would simplify imports for all frameworks

I tried that only to find that most bundlers don't support that and they error out. 😟 If our current approach becomes too difficult for users, we could look into converting these styles from css files to inline styles 🤔 .

[timtucker-dte]

We took a similar approach for Next.js, but separated out all the conditional logic into its own component:

JotaiProvider.tsx

import { Provider } from 'jotai';
import { PropsWithChildren, ReactNode } from 'react';
import DevOnlyJotaiDebugging from './DevOnlyJotaiDebugging';

export function GlobalJotaiProvider({ children }: PropsWithChildren): ReactNode {
    return (
        <Provider>
            <DevOnlyJotaiDebugging />
            {children}
        </Provider>
    );
}

DevOnlyJotaiDebugging.tsx

'use client';

import dynamic from 'next/dynamic';
import { ComponentType } from 'react';

// Only include the debugger when running locally
let DevOnlyJotaiDebugging: ComponentType = () => null;
if (process.env.NODE_ENV === 'development') {
    DevOnlyJotaiDebugging = dynamic(async () => import('./JotaiDebugging'), {
        ssr: false,
    });
}

export default DevOnlyJotaiDebugging;

JotaiDebugging.tsx

'use client';

import { DevTools } from 'jotai-devtools';
import 'jotai-devtools/styles.css';
import { useAtomsDebugValue } from 'jotai-devtools/utils';
import { useEffect } from 'react';

export default function JotaiDebugging(): React.ReactNode {
    useEffect(() => {
        console.log('Development environment, enabling Jotai debugging');
    }, []);

    // Load the Jotai Devtools
    useAtomsDebugValue();

    return (
        <>
            <DevTools />
        </>
    );
}