| b69ab31 | | | 1 | import { useEffect, useRef } from 'react'; |
| b69ab31 | | | 2 | import { AnyAtom, AnyAtomValue, AtomsSnapshot } from '../types'; |
| b69ab31 | | | 3 | import { |
| b69ab31 | | | 4 | Connection, |
| b69ab31 | | | 5 | createReduxConnection, |
| b69ab31 | | | 6 | } from './redux-extension/createReduxConnection'; |
| b69ab31 | | | 7 | import { getReduxExtension } from './redux-extension/getReduxExtension'; |
| b69ab31 | | | 8 | import { SnapshotOptions, useAtomsSnapshot } from './useAtomsSnapshot'; |
| b69ab31 | | | 9 | import { useGotoAtomsSnapshot } from './useGotoAtomsSnapshot'; |
| b69ab31 | | | 10 | |
| b69ab31 | | | 11 | const atomToPrintable = (atom: AnyAtom) => |
| b69ab31 | | | 12 | atom.debugLabel ? `${atom}:${atom.debugLabel}` : `${atom}`; |
| b69ab31 | | | 13 | |
| b69ab31 | | | 14 | const getDevtoolsState = (atomsSnapshot: AtomsSnapshot) => { |
| b69ab31 | | | 15 | const values: Record<string, AnyAtomValue> = {}; |
| b69ab31 | | | 16 | atomsSnapshot.values.forEach((v, atom) => { |
| b69ab31 | | | 17 | values[atomToPrintable(atom)] = v; |
| b69ab31 | | | 18 | }); |
| b69ab31 | | | 19 | const dependents: Record<string, string[]> = {}; |
| b69ab31 | | | 20 | atomsSnapshot.dependents.forEach((d, atom) => { |
| b69ab31 | | | 21 | dependents[atomToPrintable(atom)] = Array.from(d).map(atomToPrintable); |
| b69ab31 | | | 22 | }); |
| b69ab31 | | | 23 | return { |
| b69ab31 | | | 24 | values, |
| b69ab31 | | | 25 | dependents, |
| b69ab31 | | | 26 | }; |
| b69ab31 | | | 27 | }; |
| b69ab31 | | | 28 | |
| b69ab31 | | | 29 | type DevtoolsOptions = SnapshotOptions & { |
| b69ab31 | | | 30 | enabled?: boolean; |
| b69ab31 | | | 31 | }; |
| b69ab31 | | | 32 | |
| b69ab31 | | | 33 | export function useAtomsDevtools( |
| b69ab31 | | | 34 | name: string, |
| b69ab31 | | | 35 | options?: DevtoolsOptions, |
| b69ab31 | | | 36 | ): void { |
| b69ab31 | | | 37 | const { enabled } = options || {}; |
| b69ab31 | | | 38 | |
| b69ab31 | | | 39 | const extension = getReduxExtension(enabled); |
| b69ab31 | | | 40 | |
| b69ab31 | | | 41 | // This an exception, we don't usually use utils in themselves! |
| b69ab31 | | | 42 | const atomsSnapshot = useAtomsSnapshot(options); |
| b69ab31 | | | 43 | const goToSnapshot = useGotoAtomsSnapshot(options); |
| b69ab31 | | | 44 | |
| b69ab31 | | | 45 | const isTimeTraveling = useRef(false); |
| b69ab31 | | | 46 | const isRecording = useRef(true); |
| b69ab31 | | | 47 | const devtools = useRef<Connection>(); |
| b69ab31 | | | 48 | |
| b69ab31 | | | 49 | const snapshots = useRef<AtomsSnapshot[]>([]); |
| b69ab31 | | | 50 | |
| b69ab31 | | | 51 | useEffect(() => { |
| b69ab31 | | | 52 | if (!extension) { |
| b69ab31 | | | 53 | return; |
| b69ab31 | | | 54 | } |
| b69ab31 | | | 55 | const getSnapshotAt = (index = snapshots.current.length - 1) => { |
| b69ab31 | | | 56 | // index 0 is @@INIT, so we need to return the next action (0) |
| b69ab31 | | | 57 | const snapshot = snapshots.current[index >= 0 ? index : 0]; |
| b69ab31 | | | 58 | if (!snapshot) { |
| b69ab31 | | | 59 | throw new Error('snapshot index out of bounds'); |
| b69ab31 | | | 60 | } |
| b69ab31 | | | 61 | return snapshot; |
| b69ab31 | | | 62 | }; |
| b69ab31 | | | 63 | |
| b69ab31 | | | 64 | devtools.current = createReduxConnection(extension, name); |
| b69ab31 | | | 65 | |
| b69ab31 | | | 66 | const devtoolsUnsubscribe = devtools.current?.subscribe((message) => { |
| b69ab31 | | | 67 | switch (message.type) { |
| b69ab31 | | | 68 | case 'DISPATCH': |
| b69ab31 | | | 69 | switch (message.payload?.type) { |
| b69ab31 | | | 70 | case 'RESET': |
| b69ab31 | | | 71 | // TODO |
| b69ab31 | | | 72 | break; |
| b69ab31 | | | 73 | |
| b69ab31 | | | 74 | case 'COMMIT': |
| b69ab31 | | | 75 | devtools.current?.init(getDevtoolsState(getSnapshotAt())); |
| b69ab31 | | | 76 | snapshots.current = []; |
| b69ab31 | | | 77 | break; |
| b69ab31 | | | 78 | |
| b69ab31 | | | 79 | case 'JUMP_TO_ACTION': |
| b69ab31 | | | 80 | case 'JUMP_TO_STATE': |
| b69ab31 | | | 81 | isTimeTraveling.current = true; |
| b69ab31 | | | 82 | goToSnapshot(getSnapshotAt(message.payload.actionId - 1)); |
| b69ab31 | | | 83 | break; |
| b69ab31 | | | 84 | |
| b69ab31 | | | 85 | case 'PAUSE_RECORDING': |
| b69ab31 | | | 86 | isRecording.current = !isRecording.current; |
| b69ab31 | | | 87 | break; |
| b69ab31 | | | 88 | } |
| b69ab31 | | | 89 | } |
| b69ab31 | | | 90 | }); |
| b69ab31 | | | 91 | |
| b69ab31 | | | 92 | return () => { |
| b69ab31 | | | 93 | extension?.disconnect?.(); |
| b69ab31 | | | 94 | devtoolsUnsubscribe?.(); |
| b69ab31 | | | 95 | }; |
| b69ab31 | | | 96 | }, [extension, goToSnapshot, name]); |
| b69ab31 | | | 97 | |
| b69ab31 | | | 98 | useEffect(() => { |
| b69ab31 | | | 99 | if (!devtools.current) { |
| b69ab31 | | | 100 | return; |
| b69ab31 | | | 101 | } |
| b69ab31 | | | 102 | if (devtools.current.shouldInit) { |
| b69ab31 | | | 103 | devtools.current.init(undefined); |
| b69ab31 | | | 104 | devtools.current.shouldInit = false; |
| b69ab31 | | | 105 | return; |
| b69ab31 | | | 106 | } |
| b69ab31 | | | 107 | if (isTimeTraveling.current) { |
| b69ab31 | | | 108 | isTimeTraveling.current = false; |
| b69ab31 | | | 109 | } else if (isRecording.current) { |
| b69ab31 | | | 110 | snapshots.current.push(atomsSnapshot); |
| b69ab31 | | | 111 | devtools.current.send( |
| b69ab31 | | | 112 | { |
| b69ab31 | | | 113 | type: `${snapshots.current.length}`, |
| b69ab31 | | | 114 | updatedAt: new Date().toLocaleString(), |
| b69ab31 | | | 115 | } as any, |
| b69ab31 | | | 116 | getDevtoolsState(atomsSnapshot), |
| b69ab31 | | | 117 | ); |
| b69ab31 | | | 118 | } |
| b69ab31 | | | 119 | }, [atomsSnapshot]); |
| b69ab31 | | | 120 | } |