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

1. Install Atomic Chrome extension.

   Add Atomic Chrome extension to your chrome browser.

2. Install atomic-devtools Module.

   npm install atomic-devtools

3. Import useAtomicDevtool & AtomicDebugger from the Atomic module.

   import { useAtomicDevtool, AtomicDebugger } from 'atomic-devtools';

4. Integrate AtomicDebugger as a React component within the application wrapping all application components intended to debug.

   • AtomicDebugger currently extracts Jotai State from it's Provider Component. Implementation is required

   • Placement of AtomicDebugger component relative to App component or Provider component is not important, so long as all stateful components are children of AtomicDebugger

   • 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'));
   

5. While developing your application, utilize useAtomicDevtool hook in place of Jotai's useAtom 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 and name. 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');
   
        ...
   }

6. 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').

• 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.

• Time Travel

  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.

• Logan Thies - Github | Linkedin

• Giovanni Lituma - Github | Linkedin

• Stanley Huang - Github | Linkedin

• Chandni Patel - Github | Linkedin

• This project is licensed under the MIT License.

Atomic was developed under tech accelerator OSLabs.