atomic-devtools

1.1.59 • Public • Published

Developer tool for Jotai applications

gitHub license npm version contributions welcome

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

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

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

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

Core Team

Atomic was developed under tech accelerator OSLabs.

Package Sidebar

Install

npm i atomic-devtools

Weekly Downloads

7

Version

1.1.59

License

MIT

Unpacked Size

16.3 kB

Total Files

3

Last publish

Collaborators

  • kaizen-atomic
  • giovannixdev