@marimo-team/frontend 0.15.1-dev35 → 0.15.1-dev36

package/src/components/editor/navigation/navigation.ts

@@ -33,7 +33,7 @@ import {
   useCellSelectionActions,
   useIsCellSelected,
 } from "./selection";
-import { temporarilyShownCodeAtom } from "./state";
+import { useTemporarilyShownCodeActions } from "./state";
 import { handleVimKeybinding } from "./vim-bindings";
 
 interface HotkeyHandler {
@@ -85,7 +85,7 @@ function addSingleHandler(handler: HotkeyHandler["bulkHandle"]): HotkeyHandler {
 function useCellFocusProps(cellId: CellId) {
   const focusActions = useCellFocusActions();
   const actions = useCellActions();
-  const setTemporarilyShownCode = useSetAtom(temporarilyShownCodeAtom);
+  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
 
   // This occurs at the cell level and descedants.
   const { focusWithinProps } = useFocusWithin({
@@ -95,7 +95,7 @@ function useCellFocusProps(cellId: CellId) {
     },
     onBlurWithin: () => {
       // On blur, hide the code if it was temporarily shown.
-      setTemporarilyShownCode(false);
+      temporarilyShownCodeActions.remove(cellId);
       actions.markTouched({ cellId });
       focusActions.blurCell();
     },
@@ -132,7 +132,7 @@ export function useCellNavigationProps(
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const actions = useCellActions();
   const store = useStore();
-  const setTemporarilyShownCode = useSetAtom(temporarilyShownCodeAtom);
+  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const runCells = useRunCells();
   const keymapPreset = useAtomValue(keymapPresetAtom);
   const { copyCells, pasteAtCell } = useCellClipboard();
@@ -275,7 +275,7 @@ export function useCellNavigationProps(
         },
         // Enter will focus the cell editor.
         Enter: () => {
-          setTemporarilyShownCode(true);
+          temporarilyShownCodeActions.add(cellId);
           focusCellEditor(store, cellId);
           selectionActions.clear();
           return true;
@@ -608,7 +608,7 @@ export function useCellEditorNavigationProps(
   cellId: CellId,
   editorView: React.RefObject<EditorView | null>,
 ) {
-  const setTemporarilyShownCode = useSetAtom(temporarilyShownCodeAtom);
+  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const keymapPreset = useAtomValue(keymapPresetAtom);
   const hotkeys = useAtomValue(hotkeysAtom);
 
@@ -618,7 +618,7 @@ export function useCellEditorNavigationProps(
   }, [hotkeys]);
 
   const exitToCommandMode = () => {
-    setTemporarilyShownCode(false);
+    temporarilyShownCodeActions.remove(cellId);
     focusCell(cellId);
   };
 

package/src/components/editor/navigation/state.ts

@@ -1,5 +1,37 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { atom } from "jotai";
+import { atom, useAtomValue } from "jotai";
+import { useMemo } from "react";
+import type { CellId } from "@/core/cells/ids";
+import { createReducerAndAtoms } from "@/utils/createReducer";
 
-export const temporarilyShownCodeAtom = atom<boolean>(false);
+type TemporarilyShownCodeState = Set<CellId>;
+
+// This previously used jotai-scope, but unfortunately this bug creates unnecessary work:
+// https://github.com/jotaijs/jotai-scope/issues/25
+
+const {
+  valueAtom: temporarilyShownCodeAtom,
+  useActions: useTemporarilyShownCodeActions,
+} = createReducerAndAtoms(() => new Set<CellId>(), {
+  add: (state: TemporarilyShownCodeState, cellId: CellId) => {
+    const newState = new Set(state);
+    newState.add(cellId);
+    return newState;
+  },
+  remove: (state: TemporarilyShownCodeState, cellId: CellId) => {
+    const newState = new Set(state);
+    newState.delete(cellId);
+    return newState;
+  },
+});
+
+const createTemporarilyShownCodeAtom = (cellId: CellId) =>
+  atom((get) => get(temporarilyShownCodeAtom).has(cellId));
+
+export function useTemporarilyShownCode(cellId: CellId) {
+  const atom = useMemo(() => createTemporarilyShownCodeAtom(cellId), [cellId]);
+  return useAtomValue(atom);
+}
+
+export { temporarilyShownCodeAtom, useTemporarilyShownCodeActions };

package/dist/assets/_baseMap-CIc0IDdl.js

@@ -1 +0,0 @@
-import{b as m}from"./_baseEach-CnK_W3-W.js";import{x as s}from"./index-DMvScaq6.js";function e(r,o){var a=-1,t=s(r)?Array(r.length):[];return m(r,function(n,f,i){t[++a]=o(n,f,i)}),t}export{e as b};

package/dist/assets/channel-D2aPrBH4.js

@@ -1 +0,0 @@
-import{U as s,C as o}from"./mermaid-CEpdDmik.js";const n=(a,r)=>s.lang.round(o.parse(a)[r]);export{n as c};

package/dist/assets/classDiagram-3BZAVTQC-DAUNRz1h.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-JBRWN2VN-DF6c2w7p.js";import{_ as e}from"./mermaid-CEpdDmik.js";import"./transform-B8bpuzxV.js";import"./chunk-GLLZNHP4-C852Uilf.js";import"./chunk-WVR4S24B-Ds_Fnulu.js";import"./chunk-NRVI72HA-BYzJjL14.js";import"./index-DMvScaq6.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/classDiagram-v2-QTMF73CY-DAUNRz1h.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-JBRWN2VN-DF6c2w7p.js";import{_ as e}from"./mermaid-CEpdDmik.js";import"./transform-B8bpuzxV.js";import"./chunk-GLLZNHP4-C852Uilf.js";import"./chunk-WVR4S24B-Ds_Fnulu.js";import"./chunk-NRVI72HA-BYzJjL14.js";import"./index-DMvScaq6.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/clone-CYXehyk_.js

@@ -1 +0,0 @@
-import{b as n}from"./_baseUniq-DsEUejTO.js";function o(r){return n(r,4)}export{o as c};

package/dist/assets/infoDiagram-6WOFNB3A-B1zwcYam.js

@@ -1,2 +0,0 @@
-import{_ as a,l as i,I as s,d as p,K as n}from"./mermaid-CEpdDmik.js";import{p as m}from"./treemap-75Q7IDZK-C6t8vi8s.js";import"./index-DMvScaq6.js";import"./transform-B8bpuzxV.js";import"./timer-BwIYMJWC.js";import"./step-BwsUM5iJ.js";import"./_baseEach-CnK_W3-W.js";import"./_baseUniq-DsEUejTO.js";import"./min-CH9RTxJs.js";import"./_baseMap-CIc0IDdl.js";import"./clone-CYXehyk_.js";import"./_createAggregator-xSD3e6yX.js";var d={parse:a(async r=>{const t=await m("info",r);i.debug(t)},"parse")},g={version:n.version+""},v={parser:d,db:{getVersion:a(()=>g.version,"getVersion")},renderer:{draw:a((r,t,o)=>{i.debug(`rendering info diagram
-`+r);const e=s(t);p(e,100,400,!0),e.append("g").append("text").attr("x",100).attr("y",40).attr("class","version").attr("font-size",32).style("text-anchor","middle").text(`v${o}`)},"draw")}};export{v as diagram};

package/dist/assets/stateDiagram-v2-EYPG3UTE-DtL7XYtB.js

@@ -1 +0,0 @@
-import{s as t,b as a,a as e,S as o}from"./chunk-LXBSTHXV-DJc1jClD.js";import{_ as s}from"./mermaid-CEpdDmik.js";import"./transform-B8bpuzxV.js";import"./chunk-WVR4S24B-Ds_Fnulu.js";import"./chunk-NRVI72HA-BYzJjL14.js";import"./index-DMvScaq6.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:e,get db(){return new o(2)},renderer:a,styles:t,init:s(r=>{r.state||(r.state={}),r.state.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};