Recoil -> Jotai Conversion

packages/app/package.json

@@ -88,6 +88,7 @@
     "fuse.js": "^6.6.2",
     "immer": "^10.0.3",
     "jest-diff": "^29.7.0",
+    "jotai": "^2.11.0",
     "jsonpath-plus": "^7.2.0",
     "lodash-es": "^4.17.21",
     "lru-cache": "^11.0.0",
@@ -118,8 +119,6 @@
     "react-toastify": "^9.1.3",
     "react-transition-group": "^4.4.5",
     "react-window": "^1.8.9",
-    "recoil": "^0.7.7",
-    "recoil-persist": "^5.1.0",
     "retry": "^0.13.1",
     "rollup": "^4.1.4",
     "safe-stable-stringify": "^2.4.3",

packages/app/src/App.tsx

@@ -1,5 +1,4 @@
 import 'core-js/actual';
-import { RecoilRoot } from 'recoil';
 import '@atlaskit/css-reset';
 import { RivetApp } from './components/RivetApp.js';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -8,11 +7,9 @@ const queryClient = new QueryClient();
 
 function App() {
   return (
-    <RecoilRoot>
-      <QueryClientProvider client={queryClient}>
-        <RivetApp />
-      </QueryClientProvider>
-    </RecoilRoot>
+    <QueryClientProvider client={queryClient}>
+      <RivetApp />
+    </QueryClientProvider>
   );
 }
 

packages/app/src/components/ActionBar.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import clsx from 'clsx';
 import { type FC } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai';
 import { useLoadRecording } from '../hooks/useLoadRecording';
 import { useSaveRecording } from '../hooks/useSaveRecording';
 import { graphRunningState, graphPausedState } from '../state/dataFlow';
@@ -134,18 +134,18 @@ export type ActionBarProps = {
 };
 
 export const ActionBar: FC<ActionBarProps> = ({ onRunGraph, onAbortGraph, onPauseGraph, onResumeGraph }) => {
-  const graphMetadata = useRecoilValue(graphMetadataState);
-  const projectMetadata = useRecoilValue(projectMetadataState);
-  const lastRecording = useRecoilValue(lastRecordingState);
+  const graphMetadata = useAtomValue(graphMetadataState);
+  const projectMetadata = useAtomValue(projectMetadataState);
+  const lastRecording = useAtomValue(lastRecordingState);
   const saveRecording = useSaveRecording();
 
-  const graphRunning = useRecoilValue(graphRunningState);
-  const graphPaused = useRecoilValue(graphPausedState);
+  const graphRunning = useAtomValue(graphRunningState);
+  const graphPaused = useAtomValue(graphPausedState);
 
-  const loadedRecording = useRecoilValue(loadedRecordingState);
+  const loadedRecording = useAtomValue(loadedRecordingState);
   const { unloadRecording } = useLoadRecording();
   const [menuIsOpen, toggleMenuIsOpen] = useToggle();
-  const selectedExecutor = useRecoilValue(selectedExecutorState);
+  const selectedExecutor = useAtomValue(selectedExecutorState);
 
   const { remoteDebuggerState: remoteDebugger, disconnect } = useRemoteDebugger();
   const isActuallyRemoteDebugging = remoteDebugger.started && !remoteDebugger.isInternalExecutor;

packages/app/src/components/ActionBarMoreMenu.tsx

@@ -2,7 +2,6 @@ import Portal from '@atlaskit/portal';
 import Select from '@atlaskit/select';
 import { css } from '@emotion/react';
 import { type FC, useRef } from 'react';
-import { useSetRecoilState, useRecoilState } from 'recoil';
 import { useLoadRecording } from '../hooks/useLoadRecording';
 import { useRemoteDebugger } from '../hooks/useRemoteDebugger';
 import { selectedExecutorState } from '../state/execution';
@@ -18,6 +17,7 @@ import { CopyAsTestCaseModal } from './CopyAsTestCaseModal';
 import { useToggle } from 'ahooks';
 import { executorOptions } from '../state/settings';
 import QuestionIcon from 'majesticons/line/question-circle-line.svg?react';
+import { useSetAtom, useAtom } from 'jotai';
 
 const moreMenuStyles = css`
   background-color: var(--grey-darkish);
@@ -77,12 +77,12 @@ export const ActionBarMoreMenu: FC<{
   onCopyAsTestCase: () => void;
 }> = ({ onClose, onCopyAsTestCase }) => {
   const dropdownTarget = useRef<HTMLDivElement>(null);
-  const setSettingsOpen = useSetRecoilState(settingsModalOpenState);
-  const setDebuggerPanelOpen = useSetRecoilState(debuggerPanelOpenState);
-  const [selectedExecutor, setSelectedExecutor] = useRecoilState(selectedExecutorState);
+  const setSettingsOpen = useSetAtom(settingsModalOpenState);
+  const setDebuggerPanelOpen = useSetAtom(debuggerPanelOpenState);
+  const [selectedExecutor, setSelectedExecutor] = useAtom(selectedExecutorState);
   const selectedExecutorOption = executorOptions.find((option) => option.value === selectedExecutor);
   const { loadRecording } = useLoadRecording();
-  const setHelpModalOpen = useSetRecoilState(helpModalOpenState);
+  const setHelpModalOpen = useSetAtom(helpModalOpenState);
 
   const openDebuggerPanel = () => {
     setDebuggerPanelOpen(true);

packages/app/src/components/ChatViewer.tsx

@@ -1,5 +1,5 @@
 import { type FC, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useAtomValue, useAtom } from 'jotai';
 import { orderBy } from 'lodash-es';
 import { overlayOpenState } from '../state/ui';
 import { css } from '@emotion/react';
@@ -33,7 +33,7 @@ import { FixedSizeList } from 'react-window';
 import { useCurrentExecution } from '../hooks/useCurrentExecution';
 
 export const ChatViewerRenderer: FC = () => {
-  const [openOverlay, setOpenOverlay] = useRecoilState(overlayOpenState);
+  const [openOverlay, setOpenOverlay] = useAtom(overlayOpenState);
 
   if (openOverlay !== 'chatViewer') return null;
 
@@ -200,11 +200,11 @@ const styles = css`
 export const ChatViewer: FC<{
   onClose: () => void;
 }> = ({ onClose }) => {
-  const project = useRecoilValue(projectState);
-  const allLastRunData = useRecoilValue(lastRunDataByNodeState);
+  const project = useAtomValue(projectState);
+  const allLastRunData = useAtomValue(lastRunDataByNodeState);
   const [graphFilter, setGraphFilter] = useState('');
   const goToNode = useGoToNode();
-  const graphRunning = useRecoilValue(graphRunningState);
+  const graphRunning = useAtomValue(graphRunningState);
 
   const nodesToGraphNameMap = useMemo(() => {
     const map: Record<NodeId, string> = {};

packages/app/src/components/CodeEditor.tsx

@@ -1,7 +1,7 @@
 import { useLatest } from 'ahooks';
 import { type FC, type MutableRefObject, useEffect, useRef } from 'react';
 import { monaco } from '../utils/monaco.js';
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai';
 import { themeState } from '../state/settings';
 
 export const CodeEditor: FC<{
@@ -32,7 +32,7 @@ export const CodeEditor: FC<{
 
   const onChangeLatest = useLatest(onChange);
 
-  const appTheme = useRecoilValue(themeState);
+  const appTheme = useAtomValue(themeState);
   const actualTheme = theme === 'prompt-interpolation' ? `prompt-interpolation-${appTheme}` : theme;
 
   useEffect(() => {

packages/app/src/components/ColorizedPreformattedText.tsx

@@ -1,6 +1,6 @@
 import { type FC, useLayoutEffect, useRef } from 'react';
 import { monaco } from '../utils/monaco';
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai';
 import { themeState } from '../state/settings';
 
 export const ColorizedPreformattedText: FC<{ text: string; language: string; theme?: string }> = ({
@@ -9,7 +9,7 @@ export const ColorizedPreformattedText: FC<{ text: string; language: string; the
   theme,
 }) => {
   const bodyRef = useRef<HTMLPreElement>(null);
-  const appTheme = useRecoilValue(themeState);
+  const appTheme = useAtomValue(themeState);
   const actualTheme = theme === 'prompt-interpolation' ? `prompt-interpolation-${appTheme}` : theme;
 
   useLayoutEffect(() => {

packages/app/src/components/CopyAsTestCaseModal.tsx

@@ -3,8 +3,8 @@ import { type FC, useState } from 'react';
 import Select from '@atlaskit/select';
 import TextField from '@atlaskit/textfield';
 import { LazyCodeEditor } from './LazyComponents';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { lastRunData, lastRunDataByNodeState } from '../state/dataFlow';
+import { useAtomValue, useAtom, useSetAtom } from 'jotai';
+import { lastRunDataByNodeState } from '../state/dataFlow';
 import { graphState } from '../state/graph';
 import { BuiltInNodeType, type BuiltInNodes, type GraphInputNode, type PortId } from '@ironclad/rivet-core';
 import { max, maxBy, range } from 'lodash-es';
@@ -42,13 +42,13 @@ export const CopyAsTestCaseModal: FC<{
   open: boolean;
   onClose: () => void;
 }> = ({ open, onClose }) => {
-  const lastRunData = useRecoilValue(lastRunDataByNodeState);
-  const graph = useRecoilValue(graphState);
+  const lastRunData = useAtomValue(lastRunDataByNodeState);
+  const graph = useAtomValue(graphState);
   const [selectedExecutionNum, setSelectedExecutionNum] = useState(1);
   const [selectedTestSuiteId, setSelectedTestSuiteId] = useState<string | undefined>(undefined);
-  const [{ testSuites }, setTrivetState] = useRecoilState(trivetState);
+  const [{ testSuites }, setTrivetState] = useAtom(trivetState);
   const { addTestCase } = useTestSuite(selectedTestSuiteId);
-  const setOverlay = useSetRecoilState(overlayOpenState);
+  const setOverlay = useSetAtom(overlayOpenState);
 
   const inputNodes = graph.nodes.filter((n) => (n as BuiltInNodes).type === 'graphInput') as GraphInputNode[];
   const lastRunDataForInputNodes = inputNodes.map((n) => lastRunData[n.id]);

packages/app/src/components/DebuggerConnectPanel.tsx

@@ -4,12 +4,12 @@ import { css } from '@emotion/react';
 import { type ChangeEvent, type FC, useEffect, useRef, useState } from 'react';
 import { Field } from '@atlaskit/form';
 import { useRemoteDebugger } from '../hooks/useRemoteDebugger';
-import { useRecoilState, useSetRecoilState } from 'recoil';
 import { debuggerPanelOpenState } from '../state/ui';
 import { debuggerDefaultUrlState } from '../state/settings';
+import { useSetAtom, useAtom } from 'jotai';
 
 export function useToggleRemoteDebugger() {
-  const setDebuggerPanelOpen = useSetRecoilState(debuggerPanelOpenState);
+  const setDebuggerPanelOpen = useSetAtom(debuggerPanelOpenState);
   const { remoteDebuggerState: remoteDebugger, connect, disconnect } = useRemoteDebugger();
   const isActuallyRemoteDebugging = remoteDebugger.started && !remoteDebugger.isInternalExecutor;
 
@@ -23,7 +23,7 @@ export function useToggleRemoteDebugger() {
 }
 
 export const DebuggerPanelRenderer: FC = () => {
-  const [debuggerPanelOpen, setDebuggerPanelOpen] = useRecoilState(debuggerPanelOpenState);
+  const [debuggerPanelOpen, setDebuggerPanelOpen] = useAtom(debuggerPanelOpenState);
 
   const { connect } = useRemoteDebugger();
 
@@ -74,7 +74,7 @@ export type DebuggerConnectPanelProps = {
 };
 
 export const DebuggerConnectPanel: FC<DebuggerConnectPanelProps> = ({ onConnect, onCancel }) => {
-  const [defaultConnectUrl, setDefaultConnectUrl] = useRecoilState(debuggerDefaultUrlState);
+  const [defaultConnectUrl, setDefaultConnectUrl] = useAtom(debuggerDefaultUrlState);
   const [connectUrl, setConnectUrl] = useState(defaultConnectUrl);
 
   const textField = useRef<HTMLInputElement>(null);