Developer tool for Jotai applications
About
Atomic is an open source Google Chrome developer tool designed for applications built using Jotai as a state management library. Atomic developer tool provides real-time snapshots of a Jotai application's atomic state and component structure allowing developers to visually inspect their application state and to readily determine development solutions.
Key features of Atomic devtool include:
- Display state changes between snapshots
- Display component tree structure
- Dynamically rendering graphic component visualization with state changes
- Atom network data visualization for both atom dependents and atom read dependencies
Getting Started
-
Install Atomic Chrome extension.
Add Atomic Chrome extension to your chrome browser.
-
Install atomic-devtools Module.
npm install atomic-devtools
-
ImportuseAtomicDevtool
&AtomicDebugger
from the Atomic module.import { useAtomicDevtool, AtomicDebugger } from 'atomic-devtools';
-
IntegrateAtomicDebugger
as a React component within the application wrapping all application components intended to debug.-
AtomicDebugger
currently extracts Jotai State from it'sProvider
Component. Implementation is required -
Placement of
AtomicDebugger
component relative toApp
component orProvider
component is not important, so long as all stateful components are children ofAtomicDebugger
-
ReactDOM.Render( )
Must receive a document **'root'** element from the application as it's argument. -
Currently, only intended to be used with a single
Provider
component.
import AtomicDebugger from 'atomic-devtools'; import { Provider } from 'jotai'; function App() { return ( <AtomicDebugger> <Provider> {Application Components} </Provider> </AtomicDebugger> ); } ReactDOM.render(<App />, document.getElementById('root'));
-
-
While developing your application, utilizeuseAtomicDevtool
hook in place of Jotai'suseAtom
hook to send atom's config to Atomic Devtools.function useAtomicDevtool(atom: anyAtom, name: string);
useAtomicDevtool
is an Atomic hook that manages Atomic devtool integration for a particular atom. The hook accepts two arguments,atom
andname
.atom
is the atom that will be connected to the devtools instance.name
is a string label for identifying the atom for the devtools instance.Example
import { useAtomicDevtool } from 'atomic-devtools'; const anAtom = atom('example') function SomeComponent() { const [value, updateValue] = useAtomicDevtool(anAtom, 'anAtomName'); ... }
-
Open your application on the Chrome Browser and start debugging with Atomic devtool!
Important- Only supported with React applications using Jotai as state management.
Important- Only intended for development (
NODE_ENV === 'development'
).
Features
-
State Change Display
Easily compare atom state changes between snapshots in real-time.
-
Component Graph Visualization
Atomic provides a data visualization of an applications React component tree. Have the ability to see a hierarchical view of all the React components in an application. The component graph provides the locations of each useAtom invocation per components, as well provides real-time data on an atom's value, dependents, and read dependencies for a specific snapshot.
-
Atom Network Visualization of Dependents and Read Dependencies
Visualize an atom's dependents (displays all atoms affected by an atom) and read dependencies (displays all atoms that affect the inspected atom).
-
Component Tree
Displays the applications React component structure with subscribed atom(s) for a given snapshot.
WIP
-
Currently, the ability to jump between state changes within the devtool is feasible. The snapshot list provides the state throughout the Jotai-built application runtime and each time state changes, a new snapshot is added. We intend to develop functionality that will, pressing the jump button next to each snapshot, revert application state to the desired historical snapshot. Time Travel