Merge branch 'arnost/jotai-upgrade' of https://github.com/excalidraw/…

…excalidraw
dwelle · Jan 16, 2025 · 56f9d18 · 56f9d18
2 parents e309037 + afaf86e
commit 56f9d18
Show file tree

Hide file tree

Showing 32 changed files with 93 additions and 101 deletions.
diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
@@ -1230,7 +1230,7 @@ const ExcalidrawApp = () => {
 
   return (
     <TopErrorBoundary>
-      <Provider unstable_createStore={() => appJotaiStore}>
+      <Provider store={appJotaiStore}>
         <ExcalidrawWrapper />
       </Provider>
     </TopErrorBoundary>

diff --git a/excalidraw-app/app-jotai.ts b/excalidraw-app/app-jotai.ts
@@ -1,3 +1,3 @@
-import { unstable_createStore } from "jotai";
+import { createStore } from "jotai";
 
-export const appJotaiStore = unstable_createStore();
+export const appJotaiStore = createStore();
diff --git a/excalidraw-app/package.json b/excalidraw-app/package.json
@@ -32,7 +32,7 @@
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
-    "jotai": "1.13.1",
+    "jotai": "2.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "socket.io-client": "4.7.2",

diff --git a/packages/excalidraw/components/ActiveConfirmDialog.tsx b/packages/excalidraw/components/ActiveConfirmDialog.tsx
@@ -1,7 +1,7 @@
-import { atom, useAtom } from "jotai";
+import { atom } from "jotai";
 import { actionClearCanvas } from "../actions";
 import { t } from "../i18n";
-import { jotaiScope } from "../jotai";
+import { useAtom } from "../jotai";
 import { useExcalidrawActionManager } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 
@@ -10,7 +10,6 @@ export const activeConfirmDialogAtom = atom<"clearCanvas" | null>(null);
 export const ActiveConfirmDialog = () => {
   const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(
     activeConfirmDialogAtom,
-    jotaiScope,
   );
   const actionManager = useExcalidrawActionManager();
 

diff --git a/packages/excalidraw/components/ColorPicker/ColorInput.tsx b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getColor } from "./ColorPicker";
-import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { eyeDropperIcon } from "../icons";
-import { jotaiScope } from "../../jotai";
+import { useAtom } from "../../jotai";
 import { KEYS } from "../../keys";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import clsx from "clsx";
@@ -57,10 +56,7 @@ export const ColorInput = ({
     }
   }, [activeSection]);
 
-  const [eyeDropperState, setEyeDropperState] = useAtom(
-    activeEyeDropperAtom,
-    jotaiScope,
-  );
+  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
 
   useEffect(() => {
     return () => {

diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -5,7 +5,6 @@ import { TopPicks } from "./TopPicks";
 import { ButtonSeparator } from "../ButtonSeparator";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
-import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { useExcalidrawContainer } from "../App";
@@ -15,7 +14,7 @@ import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
 import { useRef } from "react";
-import { jotaiScope } from "../../jotai";
+import { useAtom } from "../../jotai";
 import { ColorInput } from "./ColorInput";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
@@ -76,10 +75,7 @@ const ColorPickerPopupContent = ({
   const { container } = useExcalidrawContainer();
   const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
 
-  const [eyeDropperState, setEyeDropperState] = useAtom(
-    activeEyeDropperAtom,
-    jotaiScope,
-  );
+  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
 
   const colorInputJSX = (
     <div>

diff --git a/packages/excalidraw/components/ColorPicker/CustomColorList.tsx b/packages/excalidraw/components/ColorPicker/CustomColorList.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "jotai";
+import { useAtom } from "../../jotai";
 import { useEffect, useRef } from "react";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import HotkeyLabel from "./HotkeyLabel";

diff --git a/packages/excalidraw/components/ColorPicker/Picker.tsx b/packages/excalidraw/components/ColorPicker/Picker.tsx
@@ -5,7 +5,7 @@ import type { ExcalidrawElement } from "../../element/types";
 import { ShadeList } from "./ShadeList";
 
 import PickerColorList from "./PickerColorList";
-import { useAtom } from "jotai";
+import { useAtom } from "../../jotai";
 import { CustomColorList } from "./CustomColorList";
 import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
 import PickerHeading from "./PickerHeading";

diff --git a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "jotai";
+import { useAtom } from "../../jotai";
 import { useEffect, useRef } from "react";
 import {
   activeColorPickerSectionAtom,

diff --git a/packages/excalidraw/components/ColorPicker/ShadeList.tsx b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "jotai";
+import { useAtom } from "../../jotai";
 import { useEffect, useRef } from "react";
 import {
   activeColorPickerSectionAtom,

diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
@@ -36,7 +36,8 @@ import {
   getShortcutKey,
   isWritableElement,
 } from "../../utils";
-import { atom, useAtom } from "jotai";
+import { atom } from "jotai";
+import { useAtom } from "../../jotai";
 import { deburr } from "../../deburr";
 import type { MarkRequired } from "../../utility-types";
 import { InlineIcon } from "../InlineIcon";

diff --git a/packages/excalidraw/components/ConfirmDialog.tsx b/packages/excalidraw/components/ConfirmDialog.tsx
@@ -5,10 +5,9 @@ import { Dialog } from "./Dialog";
 
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
-import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
 import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
-import { jotaiScope } from "../jotai";
+import { useSetAtom } from "../jotai";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
@@ -27,7 +26,7 @@ const ConfirmDialog = (props: Props) => {
     ...rest
   } = props;
   const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
   const { container } = useExcalidrawContainer();
 
   return (

diff --git a/packages/excalidraw/components/Dialog.tsx b/packages/excalidraw/components/Dialog.tsx
@@ -11,9 +11,8 @@ import "./Dialog.scss";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { queryFocusableElements } from "../utils";
-import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
-import { jotaiScope } from "../jotai";
+import { useSetAtom } from "../jotai";
 import { t } from "../i18n";
 import { CloseIcon } from "./icons";
 
@@ -92,7 +91,7 @@ export const Dialog = (props: DialogProps) => {
   }, [islandNode, props.autofocus]);
 
   const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
 
   const onClose = () => {
     setAppState({ openMenu: null });

diff --git a/packages/excalidraw/components/IconPicker.tsx b/packages/excalidraw/components/IconPicker.tsx
@@ -6,8 +6,8 @@ import { isArrowKey, KEYS } from "../keys";
 import { getLanguage, t } from "../i18n";
 import clsx from "clsx";
 import Collapsible from "./Stats/Collapsible";
-import { atom, useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
+import { atom } from "jotai";
+import { useAtom } from "../jotai";
 import { useDevice } from "..";
 
 const moreOptionsAtom = atom(false);
@@ -94,10 +94,7 @@ function Picker<T>({
     event.stopPropagation();
   };
 
-  const [showMoreOptions, setShowMoreOptions] = useAtom(
-    moreOptionsAtom,
-    jotaiScope,
-  );
+  const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
 
   const alwaysVisibleOptions = React.useMemo(
     () => options.slice(0, numberOfOptionsToAlwaysShow),

diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
@@ -41,8 +41,7 @@ import { trackEvent } from "../analytics";
 import { useDevice } from "./App";
 import Footer from "./footer/Footer";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
-import { jotaiScope } from "../jotai";
-import { Provider, useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "../jotai";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
 import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
@@ -152,10 +151,9 @@ const LayerUI = ({
   const device = useDevice();
   const tunnels = useInitializeTunnels();
 
-  const [eyeDropperState, setEyeDropperState] = useAtom(
-    activeEyeDropperAtom,
-    jotaiScope,
-  );
+  const TunnelsProvider = tunnels.jotai.Provider;
+
+  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -386,7 +384,7 @@ const LayerUI = ({
     );
   };
 
-  const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
+  const isSidebarDocked = useAtomValue(isSidebarDockedAtom);
 
   if (uiDisabled) {
     return null;
@@ -575,11 +573,11 @@ const LayerUI = ({
 
   return (
     <UIAppStateContext.Provider value={appState}>
-      <Provider scope={tunnels.jotaiScope}>
+      <TunnelsProvider>
         <TunnelsContext.Provider value={tunnels}>
           {layerUIJSX}
         </TunnelsContext.Provider>
-      </Provider>
+      </TunnelsProvider>
     </UIAppStateContext.Provider>
   );
 };

diff --git a/packages/excalidraw/components/LibraryMenu.tsx b/packages/excalidraw/components/LibraryMenu.tsx
@@ -14,8 +14,8 @@ import type {
 } from "../types";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { trackEvent } from "../analytics";
-import { atom, useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
+import { atom } from "jotai";
+import { useAtom } from "../jotai";
 import Spinner from "./Spinner";
 import {
   useApp,
@@ -61,7 +61,7 @@ export const LibraryMenuContent = ({
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+  const [libraryItemsData] = useAtom(libraryItemsAtom);
 
   const _onAddToLibrary = useCallback(
     (elements: LibraryItem["elements"]) => {

diff --git a/packages/excalidraw/components/LibraryMenuHeaderContent.tsx b/packages/excalidraw/components/LibraryMenuHeaderContent.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { t } from "../i18n";
 import Trans from "./Trans";
-import { jotaiScope } from "../jotai";
+import { useAtom } from "../jotai";
 import type { LibraryItem, LibraryItems, UIAppState } from "../types";
 import { useApp, useExcalidrawSetAppState } from "./App";
 import { saveLibraryAsJSON } from "../data/json";
@@ -17,7 +17,6 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { useAtom } from "jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
@@ -51,10 +50,9 @@ export const LibraryDropdownMenuButton: React.FC<{
   appState,
   className,
 }) => {
-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+  const [libraryItemsData] = useAtom(libraryItemsAtom);
   const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
     isLibraryMenuOpenAtom,
-    jotaiScope,
   );
 
   const renderRemoveLibAlert = () => {
@@ -286,7 +284,7 @@ export const LibraryDropdownMenu = ({
   const appState = useUIAppState();
   const setAppState = useExcalidrawSetAppState();
 
-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+  const [libraryItemsData] = useAtom(libraryItemsAtom);
 
   const removeFromLibrary = async (libraryItems: LibraryItems) => {
     const nextItems = libraryItems.filter(

diff --git a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { useAtom } from "jotai";
 
 import { useTunnels } from "../../context/tunnels";
-import { jotaiScope } from "../../jotai";
+import { useAtom } from "../../jotai";
 import { Dialog } from "../Dialog";
 import { withInternalFallback } from "../hoc/withInternalFallback";
 import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
@@ -23,7 +22,6 @@ const OverwriteConfirmDialog = Object.assign(
       const { OverwriteConfirmDialogTunnel } = useTunnels();
       const [overwriteConfirmState, setState] = useAtom(
         overwriteConfirmStateAtom,
-        jotaiScope,
       );
 
       if (!overwriteConfirmState.active) {

diff --git a/packages/excalidraw/components/SearchMenu.tsx b/packages/excalidraw/components/SearchMenu.tsx
@@ -11,8 +11,8 @@ import { measureText } from "../element/textElement";
 import { addEventListener, getFontString } from "../utils";
 import { KEYS } from "../keys";
 import clsx from "clsx";
-import { atom, useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
+import { atom } from "jotai";
+import { useAtom } from "../jotai";
 import { t } from "../i18n";
 import { isElementCompletelyInViewport } from "../element/sizeHelpers";
 import { randomInteger } from "../random";
@@ -58,7 +58,7 @@ export const SearchMenu = () => {
 
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const [inputValue, setInputValue] = useAtom(searchQueryAtom, jotaiScope);
+  const [inputValue, setInputValue] = useAtom(searchQueryAtom);
   const searchQuery = inputValue.trim() as SearchQuery;
 
   const [isSearching, setIsSearching] = useState(false);
@@ -70,10 +70,7 @@ export const SearchMenu = () => {
   const searchedQueryRef = useRef<SearchQuery | null>(null);
   const lastSceneNonceRef = useRef<number | undefined>(undefined);
 
-  const [focusIndex, setFocusIndex] = useAtom(
-    searchItemInFocusAtom,
-    jotaiScope,
-  );
+  const [focusIndex, setFocusIndex] = useAtom(searchItemInFocusAtom);
   const elementsMap = app.scene.getNonDeletedElementsMap();
 
   useEffect(() => {

diff --git a/packages/excalidraw/components/Sidebar/Sidebar.tsx b/packages/excalidraw/components/Sidebar/Sidebar.tsx
@@ -8,8 +8,8 @@ import React, {
   useCallback,
 } from "react";
 import { Island } from "../Island";
-import { atom, useSetAtom } from "jotai";
-import { jotaiScope } from "../../jotai";
+import { atom } from "jotai";
+import { useSetAtom } from "../../jotai";
 import type { SidebarProps, SidebarPropsContextValue } from "./common";
 import { SidebarPropsContext } from "./common";
 import { SidebarHeader } from "./SidebarHeader";
@@ -58,7 +58,7 @@ export const SidebarInner = forwardRef(
 
     const setAppState = useExcalidrawSetAppState();
 
-    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
+    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom);
 
     useLayoutEffect(() => {
       setIsSidebarDockedAtom(!!docked);

diff --git a/packages/excalidraw/components/TTDDialog/TTDDialog.tsx b/packages/excalidraw/components/TTDDialog/TTDDialog.tsx
@@ -25,7 +25,8 @@ import type { BinaryFiles } from "../../types";
 import { ArrowRightIcon } from "../icons";
 
 import "./TTDDialog.scss";
-import { atom, useAtom } from "jotai";
+import { atom } from "jotai";
+import { useAtom } from "../../jotai";
 import { trackEvent } from "../../analytics";
 import { InlineIcon } from "../InlineIcon";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";