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/App.tsx

@@ -1,8 +1,8 @@
-import { useRef, useState, useEffect, useMemo } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { Canvas } from '@react-three/fiber'
 import { Allotment } from 'allotment'
 import { OrbitControls, OrthographicCamera } from '@react-three/drei'
-import { lexer } from './lang/tokeniser'
+import { asyncLexer } from './lang/tokeniser'
 import { abstractSyntaxTree } from './lang/abstractSyntaxTree'
 import { executor, ExtrudeGroup, SketchGroup } from './lang/executor'
 import { recast } from './lang/recast'
@@ -40,8 +40,6 @@ function App() {
     code,
     setCode,
     setAst,
-    // formatCode,
-    ast,
     setError,
     errorState,
     setProgramMemory,
@@ -56,10 +54,8 @@ function App() {
     addLog: s.addLog,
     code: s.code,
     setCode: s.setCode,
-    ast: s.ast,
     setAst: s.setAst,
     lastGuiMode: s.lastGuiMode,
-    // formatCode: s.formatCode,
     setError: s.setError,
     errorState: s.errorState,
     setProgramMemory: s.setProgramMemory,
@@ -89,14 +85,16 @@ function App() {
   }
   const [geoArray, setGeoArray] = useState<(ExtrudeGroup | SketchGroup)[]>([])
   useEffect(() => {
+    const asyncWrap = async () => {
       try {
         if (!code) {
           setGeoArray([])
           setAst(null)
           return
         }
-      const tokens = lexer(code)
+        const tokens = await asyncLexer(code)
         const _ast = abstractSyntaxTree(tokens)
+        console.log('setting ast')
         setAst(_ast)
         resetLogs()
         const programMemory = executor(_ast, {
@@ -138,12 +136,9 @@ function App() {
         console.log(e)
         addLog(e)
       }
+    }
+    asyncWrap()
   }, [code])
-  // const shouldFormat = useMemo(() => {
-  //   if (!ast) return false
-  //   const recastedCode = recast(ast)
-  //   return recastedCode !== code
-  // }, [code, ast])
   return (
     <div className="h-screen">
       <Allotment snap={true}>

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,7 +108,9 @@ interface StoreState {
   setIsShiftDown: (isShiftDown: boolean) => void
 }
 
-export const useStore = create<StoreState>()((set, get) => ({
+export const useStore = create<StoreState>()(
+  persist(
+    (set, get) => ({
       editorView: null,
       setEditorView: (editorView) => {
         set({ editorView })
@@ -157,7 +160,9 @@ export const useStore = create<StoreState>()((set, get) => ({
       },
       updateAst: async (ast, focusPath) => {
         const newCode = recast(ast)
-    const astWithUpdatedSource = abstractSyntaxTree(await asyncLexer(newCode))
+        const astWithUpdatedSource = abstractSyntaxTree(
+          await asyncLexer(newCode)
+        )
 
         set({ ast: astWithUpdatedSource, code: newCode })
         if (focusPath) {
@@ -190,4 +195,13 @@ export const useStore = create<StoreState>()((set, get) => ({
       setProgramMemory: (programMemory) => set({ programMemory }),
       isShiftDown: false,
       setIsShiftDown: (isShiftDown) => set({ isShiftDown }),
-}))
+    }),
+    {
+      name: 'store',
+      partialize: (state) =>
+        Object.fromEntries(
+          Object.entries(state).filter(([key]) => ['code'].includes(key))
+        ),
+    }
+  )
+)