wire up comments to ui (#11)

src/App.tsx

@@ -42,6 +42,7 @@ function App() {
     setError,
     errorState,
     setProgramMemory,
+    tokens,
   } = useStore((s) => ({
     editorView: s.editorView,
     setEditorView: s.setEditorView,
@@ -60,6 +61,7 @@ function App() {
     setError: s.setError,
     errorState: s.errorState,
     setProgramMemory: s.setProgramMemory,
+    tokens: s.tokens,
   }))
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
@@ -89,7 +91,7 @@ function App() {
       }
       const tokens = lexer(code)
       const _ast = abstractSyntaxTree(tokens)
-      setAst(_ast)
+      setAst(_ast, tokens)
       const programMemory = executor(_ast, {
         root: {
           log: {
@@ -142,7 +144,7 @@ function App() {
   }, [code])
   const shouldFormat = useMemo(() => {
     if (!ast) return false
-    const recastedCode = recast(ast)
+    const recastedCode = recast(ast, tokens)
     return recastedCode !== code
   }, [code, ast])
   return (

src/lang/recast.test.ts

@@ -259,6 +259,23 @@ const fn = (a) => {
 
 }`
 
+    const { ast, tokens } = code2ast(withExtraEmptylLineBetween)
+    const processedTokens = processTokens(tokens)
+    const recasted = recast(ast, processedTokens)
+    expect(recasted).toBe(withExtraEmptylLineBetween.trim())
+  })
+  it('Comment with sketch', () => {
+    const withExtraEmptylLineBetween = `sketch part001 {
+  lineTo(5.98, -0.04)
+  // yo
+
+  lineTo(0.18, 0.03)
+}
+  |> rx(90, %)
+  |> extrude(9.6, %)
+
+show(part001)`
+
     const { ast, tokens } = code2ast(withExtraEmptylLineBetween)
     const processedTokens = processTokens(tokens)
     const recasted = recast(ast, processedTokens)

src/lang/recast.ts

@@ -197,7 +197,7 @@ function recastSketchExpression(
   tokens: Token[] = []
 ): string {
   return `{
-${recast(expression.body, tokens, '', indentation + '  ')}
+${recast(expression.body, tokens, '', indentation + '  ').trimEnd()}
 }`
 }
 
@@ -240,7 +240,7 @@ function recastValue(
   } else if (node.type === 'Identifier') {
     return node.name
   } else if (node.type === 'SketchExpression') {
-    return recastSketchExpression(node, indentation)
+    return recastSketchExpression(node, indentation, tokens)
   } else if (node.type === 'PipeExpression') {
     return node.body
       .map((statement): string => recastValue(statement, indentation, tokens))

src/useStore.ts

@@ -7,7 +7,8 @@ import {
 } from './lang/abstractSyntaxTree'
 import { ProgramMemory, Position, PathToNode, Rotation } from './lang/executor'
 import { recast } from './lang/recast'
-import { lexer } from './lang/tokeniser'
+import { lexer, Token } from './lang/tokeniser'
+import { processTokens } from './lang/recast'
 
 export type Range = [number, number]
 
@@ -63,7 +64,7 @@ interface StoreState {
   addLog: (log: string) => void
   resetLogs: () => void
   ast: Program | null
-  setAst: (ast: Program | null) => void
+  setAst: (ast: Program | null, tokens?: Token[]) => void
   updateAst: (ast: Program, focusPath?: PathToNode) => void
   code: string
   setCode: (code: string) => void
@@ -75,6 +76,7 @@ interface StoreState {
   setError: (error?: string) => void
   programMemory: ProgramMemory
   setProgramMemory: (programMemory: ProgramMemory) => void
+  tokens: Token[]
 }
 
 export const useStore = create<StoreState>()((set, get) => ({
@@ -119,11 +121,16 @@ export const useStore = create<StoreState>()((set, get) => ({
     set({ logs: [] })
   },
   ast: null,
-  setAst: (ast) => {
-    set({ ast })
+  setAst: (ast, tokens) => {
+    if (tokens) {
+      set({ tokens: processTokens(tokens), ast })
+    } else {
+      set({ ast, tokens: [] })
+    }
   },
   updateAst: (ast, focusPath) => {
-    const newCode = recast(ast)
+    const tokens = get().tokens
+    const newCode = recast(ast, tokens)
     const astWithUpdatedSource = abstractSyntaxTree(lexer(newCode))
 
     set({ ast: astWithUpdatedSource, code: newCode })
@@ -142,8 +149,9 @@ export const useStore = create<StoreState>()((set, get) => ({
   },
   formatCode: () => {
     const code = get().code
-    const ast = abstractSyntaxTree(lexer(code))
-    const newCode = recast(ast)
+    const tokens = lexer(code)
+    const ast = abstractSyntaxTree(tokens)
+    const newCode = recast(ast, processTokens(tokens))
     set({ code: newCode, ast })
   },
   errorState: {
@@ -155,4 +163,5 @@ export const useStore = create<StoreState>()((set, get) => ({
   },
   programMemory: { root: {}, _sketch: [] },
   setProgramMemory: (programMemory) => set({ programMemory }),
+  tokens: [],
 }))