feat(devtools): read-only atom support in useAtomDevtools (#817)

* feat: readOnly atom support

* refactor: additional line for warning

* refactor: minor

* Update src/devtools/useAtomDevtools.ts

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

* refactor

* support async writable atom

* refactor: remove function overload

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>
Co-authored-by: daishi <daishi@axlight.com>

src/devtools/useAtomDevtools.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useAtom } from 'jotai'
-import type { WritableAtom } from 'jotai'
-import type { Scope } from '../core/atom'
+import type { Atom, WritableAtom } from 'jotai'
+import type { Scope, SetAtom } from '../core/atom'
 
 type Config = {
   instanceID?: number
@@ -31,11 +31,11 @@ type Extension = {
   connect: (options?: Config) => ConnectionResult
 }
 
-export function useAtomDevtools<Value>(
-  anAtom: WritableAtom<Value, Value>,
+export function useAtomDevtools<Value, Result extends void | Promise<void>>(
+  anAtom: WritableAtom<Value, Value, Result> | Atom<Value>,
   name?: string,
   scope?: Scope
-) {
+): void {
   let extension: Extension | undefined
   try {
     extension = (window as any).__REDUX_DEVTOOLS_EXTENSION__ as Extension
@@ -51,6 +51,7 @@ export function useAtomDevtools<Value>(
   }
 
   const [value, setValue] = useAtom(anAtom, scope)
+
   const lastValue = useRef(value)
   const isTimeTraveling = useRef(false)
   const devtools = useRef<ConnectionResult & { shouldInit?: boolean }>()
@@ -59,16 +60,36 @@ export function useAtomDevtools<Value>(
 
   useEffect(() => {
     if (extension) {
+      const setValueIfWritable = (value: Value) => {
+        if (typeof setValue === 'function') {
+          ;(setValue as SetAtom<Value, void>)(value)
+          return
+        }
+        console.warn(
+          '[Warn] you cannot do write operations (Time-travelling, etc) in read-only atoms\n',
+          anAtom
+        )
+      }
       devtools.current = extension.connect({ name: atomName })
       const unsubscribe = devtools.current.subscribe((message: Message) => {
-        if (message.type === 'DISPATCH' && message.state) {
+        if (message.type === 'ACTION' && message.payload) {
+          try {
+            setValueIfWritable(JSON.parse(message.payload))
+          } catch (e) {
+            console.error(
+              'please dispatch a serializable value that JSON.parse() support\n',
+              e
+            )
+          }
+        } else if (message.type === 'DISPATCH' && message.state) {
           if (
             message.payload?.type === 'JUMP_TO_ACTION' ||
             message.payload?.type === 'JUMP_TO_STATE'
           ) {
             isTimeTraveling.current = true
+
+            setValueIfWritable(JSON.parse(message.state))
           }
-          setValue(JSON.parse(message.state))
         } else if (
           message.type === 'DISPATCH' &&
           message.payload?.type === 'COMMIT'
@@ -86,7 +107,7 @@ export function useAtomDevtools<Value>(
               if (index === 0) {
                 devtools.current?.init(state)
               } else {
-                setValue(state)
+                setValueIfWritable(state)
               }
             }
           )