| b69ab31 | | | 1 | import { useAtom } from 'jotai/react'; |
| b69ab31 | | | 2 | import type { Atom, WritableAtom } from 'jotai/vanilla'; |
| b69ab31 | | | 3 | import { useEffect, useRef } from 'react'; |
| b69ab31 | | | 4 | import { |
| b69ab31 | | | 5 | Connection, |
| b69ab31 | | | 6 | createReduxConnection, |
| b69ab31 | | | 7 | } from './redux-extension/createReduxConnection'; |
| b69ab31 | | | 8 | import { getReduxExtension } from './redux-extension/getReduxExtension'; |
| b69ab31 | | | 9 | |
| b69ab31 | | | 10 | type DevtoolOptions = Parameters<typeof useAtom>[1] & { |
| b69ab31 | | | 11 | name?: string; |
| b69ab31 | | | 12 | enabled?: boolean; |
| b69ab31 | | | 13 | }; |
| b69ab31 | | | 14 | |
| b69ab31 | | | 15 | export function useAtomDevtools<Value, Result>( |
| b69ab31 | | | 16 | anAtom: WritableAtom<Value, [Value], Result> | Atom<Value>, |
| b69ab31 | | | 17 | options?: DevtoolOptions, |
| b69ab31 | | | 18 | ): void { |
| b69ab31 | | | 19 | const { enabled, name } = options || {}; |
| b69ab31 | | | 20 | |
| b69ab31 | | | 21 | const extension = getReduxExtension(enabled); |
| b69ab31 | | | 22 | |
| b69ab31 | | | 23 | const [value, setValue] = useAtom(anAtom, options); |
| b69ab31 | | | 24 | |
| b69ab31 | | | 25 | const lastValue = useRef(value); |
| b69ab31 | | | 26 | const isTimeTraveling = useRef(false); |
| b69ab31 | | | 27 | const devtools = useRef<Connection>(); |
| b69ab31 | | | 28 | |
| b69ab31 | | | 29 | const atomName = name || anAtom.debugLabel || anAtom.toString(); |
| b69ab31 | | | 30 | |
| b69ab31 | | | 31 | useEffect(() => { |
| b69ab31 | | | 32 | if (!extension) { |
| b69ab31 | | | 33 | return; |
| b69ab31 | | | 34 | } |
| b69ab31 | | | 35 | const setValueIfWritable = (value: Value) => { |
| b69ab31 | | | 36 | if (typeof setValue === 'function') { |
| b69ab31 | | | 37 | (setValue as (value: Value) => void)(value); |
| b69ab31 | | | 38 | return; |
| b69ab31 | | | 39 | } |
| b69ab31 | | | 40 | console.warn( |
| b69ab31 | | | 41 | '[Warn] you cannot do write operations (Time-travelling, etc) in read-only atoms\n', |
| b69ab31 | | | 42 | anAtom, |
| b69ab31 | | | 43 | ); |
| b69ab31 | | | 44 | }; |
| b69ab31 | | | 45 | |
| b69ab31 | | | 46 | devtools.current = createReduxConnection(extension, atomName); |
| b69ab31 | | | 47 | |
| b69ab31 | | | 48 | const unsubscribe = devtools.current?.subscribe((message) => { |
| b69ab31 | | | 49 | if (message.type === 'ACTION' && message.payload) { |
| b69ab31 | | | 50 | try { |
| b69ab31 | | | 51 | setValueIfWritable(JSON.parse(message.payload)); |
| b69ab31 | | | 52 | } catch (e) { |
| b69ab31 | | | 53 | console.error( |
| b69ab31 | | | 54 | 'please dispatch a serializable value that JSON.parse() support\n', |
| b69ab31 | | | 55 | e, |
| b69ab31 | | | 56 | ); |
| b69ab31 | | | 57 | } |
| b69ab31 | | | 58 | } else if (message.type === 'DISPATCH' && message.state) { |
| b69ab31 | | | 59 | if ( |
| b69ab31 | | | 60 | message.payload?.type === 'JUMP_TO_ACTION' || |
| b69ab31 | | | 61 | message.payload?.type === 'JUMP_TO_STATE' |
| b69ab31 | | | 62 | ) { |
| b69ab31 | | | 63 | isTimeTraveling.current = true; |
| b69ab31 | | | 64 | |
| b69ab31 | | | 65 | setValueIfWritable(JSON.parse(message.state)); |
| b69ab31 | | | 66 | } |
| b69ab31 | | | 67 | } else if ( |
| b69ab31 | | | 68 | message.type === 'DISPATCH' && |
| b69ab31 | | | 69 | message.payload?.type === 'COMMIT' |
| b69ab31 | | | 70 | ) { |
| b69ab31 | | | 71 | devtools.current?.init(lastValue.current); |
| b69ab31 | | | 72 | } else if ( |
| b69ab31 | | | 73 | message.type === 'DISPATCH' && |
| b69ab31 | | | 74 | message.payload?.type === 'IMPORT_STATE' |
| b69ab31 | | | 75 | ) { |
| b69ab31 | | | 76 | const computedStates = |
| b69ab31 | | | 77 | message.payload.nextLiftedState?.computedStates || []; |
| b69ab31 | | | 78 | |
| b69ab31 | | | 79 | computedStates.forEach(({ state }: { state: Value }, index: number) => { |
| b69ab31 | | | 80 | if (index === 0) { |
| b69ab31 | | | 81 | devtools.current?.init(state); |
| b69ab31 | | | 82 | } else { |
| b69ab31 | | | 83 | setValueIfWritable(state); |
| b69ab31 | | | 84 | } |
| b69ab31 | | | 85 | }); |
| b69ab31 | | | 86 | } |
| b69ab31 | | | 87 | }); |
| b69ab31 | | | 88 | |
| b69ab31 | | | 89 | return unsubscribe; |
| b69ab31 | | | 90 | }, [anAtom, extension, atomName, setValue]); |
| b69ab31 | | | 91 | |
| b69ab31 | | | 92 | useEffect(() => { |
| b69ab31 | | | 93 | if (!devtools.current) { |
| b69ab31 | | | 94 | return; |
| b69ab31 | | | 95 | } |
| b69ab31 | | | 96 | lastValue.current = value; |
| b69ab31 | | | 97 | if (devtools.current.shouldInit) { |
| b69ab31 | | | 98 | devtools.current.init(value); |
| b69ab31 | | | 99 | devtools.current.shouldInit = false; |
| b69ab31 | | | 100 | } else if (isTimeTraveling.current) { |
| b69ab31 | | | 101 | isTimeTraveling.current = false; |
| b69ab31 | | | 102 | } else { |
| b69ab31 | | | 103 | devtools.current.send( |
| b69ab31 | | | 104 | `${atomName} - ${new Date().toLocaleString()}` as any, |
| b69ab31 | | | 105 | value, |
| b69ab31 | | | 106 | ); |
| b69ab31 | | | 107 | } |
| b69ab31 | | | 108 | }, [anAtom, extension, atomName, value]); |
| b69ab31 | | | 109 | } |