Add codemirror repl and arithmetic functions

Author: danvim

.gitignore

@@ -54,3 +54,5 @@ jspm_packages/
 
 # Output of 'npm pack'
 *.tgz
+
+/dist

.idea/codeStyles/Project.xml

@@ -0,0 +1,186 @@
+import {
+  Compartment,
+  EditorSelection,
+  EditorState,
+  Prec,
+} from '@codemirror/state'
+import { EditorView } from 'codemirror'
+import { lisp } from './lispLanguage.js'
+import { basicSetup } from '@uiw/codemirror-extensions-basic-setup'
+import { atomoneInit } from '@uiw/codemirror-theme-atomone'
+import { gutter, GutterMarker, keymap } from '@codemirror/view'
+import { evalQuote, NIL } from '../lib/lisp.js'
+import { parse } from '../lib/parser.js'
+import { print } from '../lib/print.js'
+
+const createNewPromptHistory = () => ({
+  in: '',
+  out: null,
+  inView: null,
+  outView: null,
+})
+
+let historyPointer = 0
+let latestPrompt = createNewPromptHistory()
+let loadedHistory = latestPrompt
+const promptHistory = [latestPrompt]
+
+const createEditor = (parent, { isEditable, doc, isUser }) => {
+  const userMarker = new (class extends GutterMarker {
+    toDOM(_view) {
+      const arrowElem = document.createElement('sl-icon')
+      arrowElem.setAttribute('name', isUser ? 'chevron-right' : 'chevron-left')
+      arrowElem.classList.add(
+        'repl-marker',
+        isUser ? 'user-marker' : 'out-marker',
+      )
+      return arrowElem
+    }
+  })()
+
+  const loadHistory = (view) => {
+    if (promptHistory[historyPointer] === loadedHistory) {
+      return
+    }
+    loadedHistory = promptHistory[historyPointer]
+    const doc = promptHistory[historyPointer].in
+    console.log('loading history', historyPointer, {
+      from: 0,
+      to: view.state.doc.length,
+      insert: doc,
+    })
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: doc,
+      },
+      selection: EditorSelection.cursor(doc.length),
+    })
+  }
+
+  const editable = new Compartment()
+  const getEditableExtensions = (isEditable) => [
+    basicSetup({
+      foldGutter: false,
+      lineNumbers: false,
+      highlightActiveLine: isEditable,
+      highlightSelectionMatches: isEditable,
+      drawSelection: isEditable,
+      dropCursor: isEditable,
+      bracketMatching: isEditable,
+      highlightActiveLineGutter: isEditable,
+    }),
+    EditorView.editable.of(isEditable),
+    gutter({
+      class: 'cm-mygutter',
+      lineMarker: (view, line) => {
+        return line.top === 0 ? userMarker : null
+      },
+    }),
+    EditorView.editorAttributes.of({ class: isEditable ? 'editable' : '' }),
+    Prec.highest(
+      keymap.of(
+        isEditable
+          ? [
+              {
+                key: 'Enter',
+                run: (view) => {
+                  const program = view.state.doc.toString()
+                  latestPrompt.in = program
+                  latestPrompt.inView = createEditor(historyElem, {
+                    isEditable: false,
+                    doc: latestPrompt.in,
+                    isUser: true,
+                  })
+                  try {
+                    const results = evalQuote(parse(program), NIL)
+                    latestPrompt.out = print(results).toString()
+                  } catch (e) {
+                    latestPrompt.out = e.stack
+                  }
+                  latestPrompt.outView = createEditor(historyElem, {
+                    isEditable: false,
+                    doc: latestPrompt.out,
+                    isUser: false,
+                  })
+                  view.dispatch({
+                    changes: {
+                      from: 0,
+                      to: view.state.doc.length,
+                      insert: '',
+                    },
+                  })
+                  latestPrompt = createNewPromptHistory()
+                  promptHistory.push(latestPrompt)
+                  historyPointer = promptHistory.length - 1
+                  loadedHistory = latestPrompt
+                  return true
+                },
+              },
+              {
+                any: (view, event) => {
+                  const currentLine = view.state.doc.lineAt(
+                    view.state.selection.main.head,
+                  ).number
+                  const maxLineI = view.state.doc.lines
+                  if (event.key === 'ArrowUp') {
+                    if (currentLine === 1) {
+                      historyPointer = Math.max(0, historyPointer - 1)
+                      loadHistory(view)
+                      return true
+                    }
+                  } else if (event.key === 'ArrowDown') {
+                    if (currentLine === maxLineI) {
+                      historyPointer = Math.min(
+                        promptHistory.length - 1,
+                        historyPointer + 1,
+                      )
+                      loadHistory(view)
+                      return true
+                    }
+                  }
+                },
+              },
+            ]
+          : [],
+      ),
+    ),
+  ]
+  const setEditable = (view, isEditable) => {
+    view.dispatch({
+      effects: editable.reconfigure(getEditableExtensions(isEditable)),
+    })
+  }
+
+  const state = EditorState.create({
+    doc,
+    extensions: [
+      atomoneInit({
+        settings: {
+          fontFamily: 'Jetbrains Mono, monospace',
+          fontSize: '0.85rem',
+        },
+      }),
+      lisp(),
+      editable.of(getEditableExtensions(isEditable)),
+      EditorState.tabSize.of(2),
+    ],
+  })
+
+  const view = new EditorView({
+    state,
+    parent,
+  })
+
+  return [view, setEditable]
+}
+
+const historyElem = document.getElementById('history')
+const userPromptElem = document.getElementById('user-prompt')
+const [view, setEditable] = createEditor(userPromptElem, {
+  isEditable: true,
+  doc: latestPrompt.in,
+  isUser: true,
+})
+window.s = (isEditable) => setEditable(view, isEditable)

codemirror/editor.js

@@ -0,0 +1,14 @@
+import { styleTags, tags as t } from '@lezer/highlight'
+
+export const highlighting = styleTags({
+  'VarName/Symbol': t.function(t.variableName),
+  'Property/Symbol': t.propertyName,
+  'Operator/Symbol': t.function(t.variableName),
+  'DefLike Lambda': t.keyword,
+  Symbol: t.variableName,
+  Number: t.number,
+  String: t.string,
+  LineComment: t.lineComment,
+  'Quote Quote/Symbol': t.keyword,
+  '( )': t.punctuation,
+})

codemirror/lezer/highlight.js

@@ -0,0 +1,57 @@
+atom {
+  Symbol |
+  String |
+  Number
+}
+
+expression {
+  atom |
+  List |
+  Quote
+}
+
+listContents {
+  defList { DefLike VarName expression* } |
+  lambdaList { Lambda "(" Property* ")" expression*} |
+  anyList { Operator? expression* }
+}
+
+VarName { Symbol }
+Property { Symbol }
+
+@precedence { operator @left }
+Operator { !operator Symbol }
+
+Symbol {
+  trivialSymbol |
+  barredSymbol
+}
+
+List { "(" listContents ")" }
+
+Quote { "'" expression }
+
+@top Program { expression* }
+
+@tokens {
+  trivialSymbol { (!["| \t\n\r;:()'] | "\\" _)+ }
+  barredSymbol { '|' (![|\\] | "\\" _)* '|' }
+  String { '"' (!["\\] | "\\" _)* '"' }
+  Number {
+    ("+" | "-")? (@digit+ ("." @digit* "M"?)? | "." @digit+) (("e" | "E") ("+" | "-")? @digit+ "M"?)?
+  }
+  LineComment { ";" ![\n]* }
+  space { $[ \t\n\r]+ }
+  "(" ")"
+
+  @precedence {Number, trivialSymbol}
+}
+
+DefLike[@dynamicPrecedence=1] { @extend<trivialSymbol, "label"> }
+Lambda[@dynamicPrecedence=2] { @extend<trivialSymbol, "lambda"> }
+
+@skip { space | LineComment }
+
+@detectDelim
+
+@external propSource highlighting from "./highlight.js"

codemirror/lezer/lisp.grammar

@@ -0,0 +1,14 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  LineComment = 1,
+  Program = 2,
+  Symbol = 3,
+  String = 4,
+  Number = 5,
+  List = 8,
+  DefLike = 9,
+  VarName = 10,
+  Lambda = 11,
+  Property = 12,
+  Operator = 13,
+  Quote = 14

codemirror/lezer/parser.js

@@ -0,0 +1,44 @@
+import { parser } from './lezer/parser.js'
+import {
+  foldInside,
+  foldNodeProp,
+  indentNodeProp,
+  LanguageSupport,
+  LRLanguage,
+} from '@codemirror/language'
+import { completeFromList } from '@codemirror/autocomplete'
+import { symbolsMap } from '../lib/parser.js'
+
+const parserWithMetadata = parser.configure({
+  props: [
+    indentNodeProp.add({
+      List: (context) => context.column(context.node.from) + context.unit,
+    }),
+    foldNodeProp.add({
+      List: foldInside,
+    }),
+  ],
+})
+
+export const lispLanguage = LRLanguage.define({
+  parser: parserWithMetadata,
+  languageData: {
+    commentTokens: { line: ';;' },
+  },
+})
+
+export const lispCompletion = lispLanguage.data.of({
+  autocomplete: completeFromList(
+    Object.keys(symbolsMap).map((keyword) => ({
+      label: keyword,
+      type: 'keyword',
+    })),
+  ),
+  closeBrackets: {
+    brackets: ['(', '[', '{', '"'],
+  },
+})
+
+export function lisp() {
+  return new LanguageSupport(lispLanguage, [lispCompletion])
+}