change logs aswell (#21)

* kurt-19-change-logs-aswell

* fix tests

src/App.test.tsx

@@ -14,6 +14,6 @@ let listener: ((rect: any) => void) | undefined = undefined
 
 test('renders learn react link', () => {
   render(<App />)
-  const linkElement = screen.getByText(/reset/i)
+  const linkElement = screen.getByText(/Variables/i)
   expect(linkElement).toBeInTheDocument()
 })

src/App.tsx

@@ -39,11 +39,12 @@ function App() {
     code,
     setCode,
     setAst,
-    formatCode,
+    // formatCode,
     ast,
     setError,
     errorState,
     setProgramMemory,
+    resetLogs,
   } = useStore((s) => ({
     editorView: s.editorView,
     setEditorView: s.setEditorView,
@@ -58,10 +59,11 @@ function App() {
     ast: s.ast,
     setAst: s.setAst,
     lastGuiMode: s.lastGuiMode,
-    formatCode: s.formatCode,
+    // formatCode: s.formatCode,
     setError: s.setError,
     errorState: s.errorState,
     setProgramMemory: s.setProgramMemory,
+    resetLogs: s.resetLogs,
   }))
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
@@ -92,21 +94,13 @@ function App() {
       const tokens = lexer(code)
       const _ast = abstractSyntaxTree(tokens)
       setAst(_ast)
+      resetLogs()
       const programMemory = executor(_ast, {
         root: {
           log: {
             type: 'userVal',
             value: (a: any) => {
-              console.log('raw log', a)
-              let b = a
-              if (Array.isArray(a)) {
-                b = a.map(({ geo, __geoMeta, ...rest }) => rest)
-                b = JSON.stringify(b, null, 2)
-              } else if (typeof a === 'object') {
-                const { geo, __geoMeta, ...rest } = a
-                b = JSON.stringify(rest, null, 2)
-              }
-              addLog(b)
+              addLog(a)
             },
             __meta: [
               {

src/components/Logs.tsx

@@ -1,7 +1,10 @@
+import ReactJson from 'react-json-view'
 import { useEffect } from 'react'
 import { useStore } from '../useStore'
 import { PanelHeader } from './PanelHeader'
 
+const ReactJsonTypeHack = ReactJson as any
+
 export const Logs = () => {
   const { logs, resetLogs } = useStore(({ logs, resetLogs }) => ({
     logs,
@@ -18,19 +21,16 @@ export const Logs = () => {
       <PanelHeader title="Logs" />
       <div className="h-full relative">
         <div className="absolute inset-0 flex flex-col items-start">
-          <button onClick={resetLogs}>reset</button>
-          <div className=" overflow-auto h-full console-tile w-full">
-            {logs.map((msg, index) => {
-              return (
-                <pre className="text-xs pl-2 text-sky-600" key={index}>
-                  <code style={{ fontFamily: 'monospace' }} key={index}>
-                    <span className="text-gray-400">{'- '}</span>
-                    {String(msg)}
-                  </code>
-                </pre>
-              )
-            })}
-          </div>
+          <ReactJsonTypeHack
+            src={logs}
+            collapsed={1}
+            collapseStringsAfterLength={60}
+            enableClipboard={false}
+            displayArrayKey={false}
+            displayDataTypes={false}
+            displayObjectSize={true}
+            name={false}
+          />
         </div>
       </div>
     </div>

src/lang/executor.ts

@@ -326,7 +326,18 @@ export const executor = (
                 body: [],
               }
             )
-            _programMemory.root[variableName] = result as any // todo memory redo
+            if (
+              result.type === 'extrudeGroup' ||
+              result.type === 'sketchGroup'
+            ) {
+              _programMemory.root[variableName] = result
+            } else {
+              _programMemory.root[variableName] = {
+                type: 'userVal',
+                value: result,
+                __meta,
+              }
+            }
           } else {
             _programMemory.root[variableName] = {
               type: 'userVal',

src/useStore.ts

@@ -113,7 +113,12 @@ export const useStore = create<StoreState>()((set, get) => ({
   },
   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: [] })