persist code in local storage (#34)

Just a little frustrating to have code disapear on you, will probably need to be made less naive at some point

src/useStore.ts

@@ -1,4 +1,5 @@
 import create from 'zustand'
+import { persist } from 'zustand/middleware'
 import { addLineHighlight, EditorView } from './editor/highlightextension'
 import {
   Program,
@@ -107,87 +108,100 @@ interface StoreState {
   setIsShiftDown: (isShiftDown: boolean) => void
 }
 
-export const useStore = create<StoreState>()((set, get) => ({
-  editorView: null,
-  setEditorView: (editorView) => {
-    set({ editorView })
-  },
-  highlightRange: [0, 0],
-  setHighlightRange: (highlightRange) => {
-    set({ highlightRange })
-    const editorView = get().editorView
-    if (editorView) {
-      editorView.dispatch({ effects: addLineHighlight.of(highlightRange) })
-    }
-  },
-  setCursor: (ranges: Ranges) => {
-    const { editorView } = get()
-    if (!editorView) return
-    editorView.dispatch({
-      selection: EditorSelection.create(
-        [...ranges.map(([start, end]) => EditorSelection.cursor(end))],
-        ranges.length - 1
-      ),
-    })
-  },
-  selectionRanges: [[0, 0]],
-  setSelectionRanges: (selectionRanges) => {
-    set({ selectionRanges })
-  },
-  guiMode: { mode: 'default' },
-  lastGuiMode: { mode: 'default' },
-  setGuiMode: (guiMode) => {
-    set({ guiMode })
-  },
-  logs: [],
-  addLog: (log) => {
-    if (Array.isArray(log)) {
-      const cleanLog: any = log.map(({ __geoMeta, ...rest }) => rest)
-      set((state) => ({ logs: [...state.logs, cleanLog] }))
-    } else {
-      set((state) => ({ logs: [...state.logs, log] }))
-    }
-  },
-  resetLogs: () => {
-    set({ logs: [] })
-  },
-  ast: null,
-  setAst: (ast) => {
-    set({ ast })
-  },
-  updateAst: async (ast, focusPath) => {
-    const newCode = recast(ast)
-    const astWithUpdatedSource = abstractSyntaxTree(await asyncLexer(newCode))
+export const useStore = create<StoreState>()(
+  persist(
+    (set, get) => ({
+      editorView: null,
+      setEditorView: (editorView) => {
+        set({ editorView })
+      },
+      highlightRange: [0, 0],
+      setHighlightRange: (highlightRange) => {
+        set({ highlightRange })
+        const editorView = get().editorView
+        if (editorView) {
+          editorView.dispatch({ effects: addLineHighlight.of(highlightRange) })
+        }
+      },
+      setCursor: (ranges: Ranges) => {
+        const { editorView } = get()
+        if (!editorView) return
+        editorView.dispatch({
+          selection: EditorSelection.create(
+            [...ranges.map(([start, end]) => EditorSelection.cursor(end))],
+            ranges.length - 1
+          ),
+        })
+      },
+      selectionRanges: [[0, 0]],
+      setSelectionRanges: (selectionRanges) => {
+        set({ selectionRanges })
+      },
+      guiMode: { mode: 'default' },
+      lastGuiMode: { mode: 'default' },
+      setGuiMode: (guiMode) => {
+        set({ guiMode })
+      },
+      logs: [],
+      addLog: (log) => {
+        if (Array.isArray(log)) {
+          const cleanLog: any = log.map(({ __geoMeta, ...rest }) => rest)
+          set((state) => ({ logs: [...state.logs, cleanLog] }))
+        } else {
+          set((state) => ({ logs: [...state.logs, log] }))
+        }
+      },
+      resetLogs: () => {
+        set({ logs: [] })
+      },
+      ast: null,
+      setAst: (ast) => {
+        set({ ast })
+      },
+      updateAst: async (ast, focusPath) => {
+        const newCode = recast(ast)
+        const astWithUpdatedSource = abstractSyntaxTree(
+          await asyncLexer(newCode)
+        )
 
-    set({ ast: astWithUpdatedSource, code: newCode })
-    if (focusPath) {
-      const { node } = getNodeFromPath<any>(astWithUpdatedSource, focusPath)
-      const { start, end } = node
-      if (!start || !end) return
-      setTimeout(() => {
-        get().setCursor([[start, end]])
-      })
+        set({ ast: astWithUpdatedSource, code: newCode })
+        if (focusPath) {
+          const { node } = getNodeFromPath<any>(astWithUpdatedSource, focusPath)
+          const { start, end } = node
+          if (!start || !end) return
+          setTimeout(() => {
+            get().setCursor([[start, end]])
+          })
+        }
+      },
+      code: '',
+      setCode: (code) => {
+        set({ code })
+      },
+      formatCode: async () => {
+        const code = get().code
+        const ast = abstractSyntaxTree(await asyncLexer(code))
+        const newCode = recast(ast)
+        set({ code: newCode, ast })
+      },
+      errorState: {
+        isError: false,
+        error: '',
+      },
+      setError: (error = '') => {
+        set({ errorState: { isError: !!error, error } })
+      },
+      programMemory: { root: {}, _sketch: [] },
+      setProgramMemory: (programMemory) => set({ programMemory }),
+      isShiftDown: false,
+      setIsShiftDown: (isShiftDown) => set({ isShiftDown }),
+    }),
+    {
+      name: 'store',
+      partialize: (state) =>
+        Object.fromEntries(
+          Object.entries(state).filter(([key]) => ['code'].includes(key))
+        ),
     }
-  },
-  code: '',
-  setCode: (code) => {
-    set({ code })
-  },
-  formatCode: async () => {
-    const code = get().code
-    const ast = abstractSyntaxTree(await asyncLexer(code))
-    const newCode = recast(ast)
-    set({ code: newCode, ast })
-  },
-  errorState: {
-    isError: false,
-    error: '',
-  },
-  setError: (error = '') => {
-    set({ errorState: { isError: !!error, error } })
-  },
-  programMemory: { root: {}, _sketch: [] },
-  setProgramMemory: (programMemory) => set({ programMemory }),
-  isShiftDown: false,
-  setIsShiftDown: (isShiftDown) => set({ isShiftDown }),
-}))
+  )
+)