frontend: Highlight lines with error

Highlight lines with evy errors in editor. This is done by finding the
correct token by its line and columns and adding the "err" CSS class to
it. It is becoming increasingly obvious that a more fully fledged web
code editor will be needed. Evy files with more than 700ish lines are
starting to get janky when editing. I could work around this by only
updating the relevant lines, but it all seems to get a bit to hacky.

After this error highlight addition we will leave editor hacking for
now.

Author: juliaogris

frontend/img/err-line.svg

@@ -11,12 +11,14 @@
   --output-border-dark: hsl(0deg 0% 80%);
   --output-border-mid: hsl(0deg 0% 85%);
   --output-border-light: hsl(0deg 0% 92%);
+  --line-num-color: hsl(212deg 8% 47%);
   --syntax-num: hsl(204deg 100% 75%);
   --syntax-string: hsl(203deg 100% 86%);
   --syntax-func: hsl(266deg 100% 86%);
   --syntax-builtin: hsl(27deg 100% 74%);
   --syntax-keyword: hsl(359deg 100% 75%);
   --syntax-comment: hsl(210deg 13% 72%);
+  --syntax-error-line-bg: hsl(210deg 7% 20%);
   --syntax-error-bg: hsl(209deg 100% 33%);
   --btn-color: hsl(0deg 0% 33%);
   --btn-color-active: hsl(0deg 0% 100%);
@@ -223,7 +225,6 @@ main.view-output {
 /* --- Editor -------------------------------------------------------- */
 .editor-wrap {
   margin-top: var(--editor-padding);
-  padding-right: var(--editor-padding);
   padding-bottom: var(--editor-padding-bottom);
   font-size: 1rem;
   flex: 1;
@@ -239,6 +240,7 @@ main.view-output {
   position: relative;
   overflow: hidden;
   width: max-content;
+  min-width: 100%;
 }
 .editor textarea {
   line-height: inherit;
@@ -259,12 +261,11 @@ main.view-output {
   border: none;
   top: 0;
   left: 0;
-  color: transparent;
   overflow: hidden;
+  color: transparent;
 }
 .editor pre {
   line-height: inherit;
-  position: relative;
   white-space: pre-wrap;
   word-break: keep-all;
   padding: 0;
@@ -275,6 +276,9 @@ main.view-output {
   letter-spacing: inherit;
   pointer-events: none;
   font-family: inherit;
+}
+.editor pre.highlighted {
+  position: relative;
   overflow: hidden;
 }
 .editor pre.lines {
@@ -284,6 +288,11 @@ main.view-output {
   left: 0;
   pointer-events: none;
   overflow: auto;
+  min-width: 100%;
+}
+.editor pre.highlighted .err {
+  background: var(--syntax-error-bg);
+  border-radius: 6px;
 }
 .editor .num,
 .editor .bool {
@@ -316,14 +325,35 @@ main.view-output {
 }
 .editor .lines .num {
   position: absolute;
-  color: hsl(212deg 8% 47%);
+  color: var(--line-num-color);
   left: 0;
 }
 .editor .lines .txt {
-  padding-left: 1ch;
   color: transparent;
   pointer-events: none;
 }
+.editor .lines .err.num {
+  background: var(--syntax-error-bg);
+  color: var(--color);
+}
+.editor .lines .err.txt {
+  left: calc(2ch + 1.2rem);
+  right: 0;
+  padding-left: 0.3rem;
+  background: var(--syntax-error-line-bg);
+  border-radius: 6px;
+  position: absolute;
+}
+.editor .lines .err.num::after {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 H2 L10 12 L2 24 H0V0 Z' fill='%230057A8'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  content: "";
+  width: 0.8rem;
+  position: absolute;
+  right: -0.8rem;
+  top: 0;
+  bottom: 0;
+}
 
 /* --- Output -------------------------------------------------------- */
 .output {

frontend/index.css

@@ -41,6 +41,7 @@ function newEvyGo() {
     jsRead,
     jsActions,
     jsPrepareUI,
+    jsError,
     evySource,
     setEvySource,
     move,
@@ -108,6 +109,24 @@ function jsRead() {
   return stringToMemAddr(s.slice(0, idx))
 }
 
+function jsError(ptr, len) {
+  const code = editor.value
+  const lines = code.split("\n")
+  const errs = memToString(ptr, len).split("\n")
+  const re = /line (?<line>\d+) column (?<col>\d+): (?<msg>.*)/
+  let msgs = ""
+  const errorLines = {}
+  for (const err of errs) {
+    const g = err.match(re).groups
+    errorLines[g.line] = { col: g.col, text: lines[g.line - 1] }
+    msgs += `line ${g.line}: ${g.msg}\n`
+  }
+  const output = document.querySelector("#console")
+  output.textContent = msgs
+  output.scrollTo({ behavior: "smooth", left: 0, top: 0 })
+  editor.update({ errorLines })
+}
+
 // evySource writes the evy source code into wasm memory as bytes
 // and returns pointer and length encoded into a single 64 bit number
 function evySource() {
@@ -118,7 +137,7 @@ function evySource() {
 // setEvySource is exported to evy go/wasm and called after formatting
 function setEvySource(ptr, len) {
   const source = memToString(ptr, len)
-  editor.update({ value: source })
+  editor.update({ value: source, errorLines: {} })
 }
 
 function memToString(ptr, len) {
@@ -301,7 +320,7 @@ async function handleHashChange() {
       throw new Error("invalid response status", response.status)
     }
     const source = await response.text()
-    editor.update({ value: source })
+    editor.update({ value: source, errorLines: {} })
     document.querySelector(".editor-wrap").scrollTo(0, 0)
     updateBreadcrumbs(crumbs)
     clearOutput()

frontend/index.js

@@ -36,14 +36,18 @@ export default class Yace {
     this.textarea.autocapitalize = false
     this.textarea.wrap = "off"
 
-    this.pre = document.createElement("pre")
+    this.highlighted = document.createElement("pre")
+    this.highlighted.classList.add("highlighted")
+    this.lines = document.createElement("pre")
+    this.lines.classList.add("lines")
+    this.errorLines = {}
 
     this.root.appendChild(this.textarea)
-    this.root.appendChild(this.pre)
+    this.root.appendChild(this.lines)
+    this.root.appendChild(this.highlighted)
 
     this.addTextareaEvents()
     this.update({ value: this.options.value })
-    this.updateLines()
   }
 
   addTextareaEvents() {
@@ -62,7 +66,7 @@ export default class Yace {
   }
 
   update(textareaProps) {
-    const { value, selectionStart, selectionEnd } = textareaProps
+    const { value, selectionStart, selectionEnd, errorLines } = textareaProps
     // should be before updating selection otherwise selection will be lost
     if (value != null) {
       this.textarea.value = value
@@ -71,50 +75,52 @@ export default class Yace {
     this.textarea.selectionStart = selectionStart
     this.textarea.selectionEnd = selectionEnd
 
-    if (value === this.value || value == null) {
+    if (
+      (value === this.value || value == null) &&
+      (!errorLines || Object.keys(errorLines).length === 0)
+    ) {
       return
     }
+    this.value = value || this.value
+    this.errorLines = errorLines || this.errorLines
+    const lines = this.value.split("\n")
+    this.updateErrorLines(lines)
+    const highlighted = this.options.highlighter(this.value, this.errorLines)
+    this.highlighted.innerHTML = highlighted + "<br/>"
 
-    this.value = value
-
-    const highlighted = this.options.highlighter(value)
-    this.pre.innerHTML = highlighted + "<br/>"
-
-    this.updateLines()
+    this.updateLines(lines)
 
     if (this.updateCallback) {
       this.updateCallback(value)
     }
   }
 
-  updateLines() {
-    if (!this.options.lineNumbers) {
-      return
-    }
-
-    if (!this.lines) {
-      this.lines = document.createElement("pre")
-      this.root.appendChild(this.lines)
-      this.lines.classList.add("lines")
-    }
-
-    const lines = this.value.split("\n")
+  updateLines(lines) {
     const length = lines.length.toString().length
 
-    this.root.style.paddingLeft = `${length + 2}ch`
+    const paddingLeft = `calc(${length}ch + 1.5rem)`
+    this.root.style.paddingLeft = paddingLeft
+    this.lines.style.paddingLeft = paddingLeft
 
     this.lines.innerHTML = lines
       .map((line, number) => {
-        // prettier-ignore
-        const num = `${number+1}`.padStart(length)
-        const lineNumber = `<span class="num"> ${num}</span>`
-        // prettier-ignore
-        const lineText = `<span class="txt">${escape(line)}</span>`;
+        const num = `${number + 1}`.padStart(length)
+        const errClass = this.errorLines[number + 1] ? "err " : ""
+        const lineNumber = `<span class="${errClass}num"> ${num}</span>`
+        const lineText = `<span class="${errClass}txt">${escape(line)}</span>`
         return `${lineNumber}${lineText}`
       })
       .join("\n")
   }
 
+  updateErrorLines(lines) {
+    for (const [idx, { text }] of Object.entries(this.errorLines)) {
+      if (lines[idx - 1] !== text) {
+        delete this.errorLines[idx]
+      }
+    }
+  }
+
   destroy() {
     this.textarea.removeEventListener("input", this.handleInput)
     this.textarea.removeEventListener("keydown", this.handleKeydown)
@@ -427,11 +433,9 @@ const tab =
     }
   }
 // evy highlighter
-function highlightEvy(val) {
-  const { tokens, funcs } = tokenize(val)
-  const type = (t) => (t.type === "ident" && funcs.has(t.val) ? "func" : t.type)
-
-  const span = (t) => `<span class="${type(t)}">${escape(t.val)}</span>`
+function highlightEvy(val, errorLines) {
+  const tokens = tokenize(val, errorLines)
+  const span = (t) => `<span class="${t.err}${t.type}">${escape(t.val)}</span>`
   const result = tokens.map((t) => span(t)).join("")
   return result
 }
@@ -490,56 +494,83 @@ const keywords = new Set([
   "end",
 ])
 
-function tokenize(str) {
+function tokenize(str, errorLines) {
   let tokens = []
   let i = 0
   let prev = ""
   let funcs = new Set()
-  while (i < str.length) {
+  let lineIdx = 1
+  let lineOffset = 0
+  const chars = Array.from(str)
+
+  while (i < chars.length) {
     const start = i
-    const c = str[i]
+    const c = chars[i]
     let type
     i++
     if (isWS(c)) {
       type = "ws"
-      i = readWS(str, i)
+      i = readWS(chars, i)
     } else if (isOP(c)) {
       type = "op"
-      str[i] === "=" && i++
-    } else if (c === ":" && str[i] === "=") {
+      chars[i] === "=" && i++
+    } else if (c === ":" && chars[i] === "=") {
       i++
       type = "op"
-    } else if (isPunc(c) || (c === ":" && str[i] !== "=")) {
+    } else if (isPunc(c) || (c === ":" && chars[i] !== "=")) {
       type = "punc"
-    } else if (c === "/" && str[i] == "/") {
+    } else if (c === "/" && chars[i] == "/") {
       type = "comment"
-      i = readComment(str, i)
-    } else if (c === "/" && str[i] != "/") {
+      i = readComment(chars, i)
+    } else if (c === "/" && chars[i] != "/") {
       type = "op"
     } else if (c === '"') {
       type = "str"
-      i = readString(str, i)
+      i = readString(chars, i)
     } else if (isDigit(c)) {
       type = "num"
-      i = readNum(str, i)
+      i = readNum(chars, i)
     } else if (isLetter(c)) {
       type = "ident"
-      i = readIdent(str, i)
+      i = readIdent(chars, i)
     } else if (c === "\n") {
       type = "nl"
     } else {
       type = "error"
     }
-    const val = str.substring(start, i)
+    let val = chars.slice(start, i).join("")
     if (type == "ident") {
       type = identType(val, prev, funcs)
     }
-    tokens.push({ type, val })
+    const errLine = errorLines[lineIdx]
+    let err = ""
+    if (errLine) {
+      const errCol = errLine.col - 1
+      const startCol = start - lineOffset
+      const endCol = i - lineOffset
+      if (errCol >= startCol && errCol < endCol) {
+        err = "err "
+      }
+      console.log("errline errCol", errCol, "start-end:", startCol, "-", endCol, val)
+    }
     if (type !== "ws") {
       prev = val
     }
+    if (type === "nl") {
+      lineIdx++
+      lineOffset = i
+      if (err) {
+        val = " \n"
+      }
+    }
+    tokens.push({ type, val, err })
   }
-  return { tokens, funcs }
+  tokens.forEach((t) => {
+    if (t.type === "ident" && funcs.has(t.val)) {
+      t.type = "func"
+    }
+  })
+  return tokens
 }
 
 function isWS(s) {

frontend/module/yace-editor.js

@@ -114,6 +114,14 @@ func jsRead() float64
 //export jsPrint
 func jsPrint(string)
 
+// jsError is imported from JS. jsError is used for setting compile time
+// errors of format:
+//
+//	line NUM column NUM: ERROR_DETAILS
+//
+//export jsError
+func jsError(string)
+
 // afterStop is imported from JS
 //
 //export afterStop