README
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 requiredPlacement 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
Core Team
- Logan Thies - Github | Linkedin
- Giovanni Lituma - Github | Linkedin
- Stanley Huang - Github | Linkedin
- Chandni Patel - Github | Linkedin
License
- This project is licensed under the MIT License.