A class I am in for university uses strudel a lot and we noticed that some of the error messaging was tough to read for beginner users. For my final project for the class I hope to fix this issue and contribute to the software. I was thinking of adding some more clearly defined error messages. For example, a missing paratheses currently reads in the error bar as "unexpected token at x:y". Changing it indiciate what character is missing for some syntax issue or possibly highlighting the location of the error for easier debugging for novice users. Would love and appreciate any feedback regarding on the feasibility of this as well as how best to go about this?? I have already taken a look around the repo and think I know where it would be best to work (Krill and/or code mirror packages).
I think highlighting of the location would be huge. I expect you’ll mostly be working in the krill file, as you say. I wish you luck, I recently did some diving into there and it was not trivial! Happy to give help where I can
Would love some help! I am planning on starting to dive deeper into this in about a week. I would really appreciate some guidance!
So here is my plan so far
Background/overview:
- the mini notation for the parser in is “krill-parser.js”
- this produced an error object called peg$SyntaxError with the fields, expected, found, and location
- this is then sent to the mini.mjs and reformatted
- in the JS transpilation
- uses a Acorn parser
- produces your basic stantard javascript SyntaxError
- in runtime eval
- errors is going thru repl.mjs via the evalError
- UI
- stored in UserFacingMessage.jsx
- just renders error.message
What is needed to be done
-
modify mini.mjs to improve the mini notation error messages
-
add some visual element to indicate where error is
-
change the error display component (maybe too much)
-
select the rule set
- notation (maybe best to just start here)
- missing brackets “bd [sd”
- missing paren “bd(3,8”
- invalid char “bd $ sd”
- unclosed angle bracket “<bd sd”
- notation (maybe best to just start here)
-
build out the tests
First run thru
- errorHighlight.mjs
- codemirror extension adds the red highlight
- exports to the highlight error
- catches and just adds the region [from,to]
- bubbles up to strudlelmirror
restrictions, only shows first error.
Nice work so far!
Update!
-
Added findUnmatched bracket (mini.njs lines 193-225)
-
Scans through the mini notation code and when finding a closing bracket, check if matches most recent opener
-
Before it would highlight the parser’s position (end of string typically)
-
Now it checks for bracket issues
-
Missing closer would highlight the unclosed opening bracket
-
Extra closer would the extra closing bracket
-
Mismatching pair would highlight everything in between
-
-
-
Transpiler.mjs
-
Wrapped parse in a try catch
- Catches the acorn syntax error object and creates a new region field
-
This handles the case with a loose stray string
-
-
Runtime errors in evalute.mjs
-
Updates evaluate function to find region
-
Use case is where there might be something missed spelt like .rom(1)
AI Generated test cases below
//runtime errors
// === Mini Notation Bracket Errors ===
s("bd [sd hh") // Missing "]" — the "[" would be highlighted
s("bd {sd hh") // Missing "}" — the "{" would be highlighted
s("bd <sd hh") // Missing ">" — the "<" would be highlighted
s("bd sd]") // Extra "]" — the "]" would be highlighted
s("bd sd}") // Extra "}" — the "}" would be highlighted
s("bd sd>") // Extra ">" — the ">" would be highlighted
s("bd [sd}") // Mismatched "[" and "}" — range from "[" to "}" highlighted
s("[bd [sd hh]") // Nested, outer missing "]" — the first "[" highlighted
s("bd(3,8") // Missing ")" in euclidean — the "(" highlighted
// === JavaScript Syntax Errors ===
c
$: s("bd sd") // Stray "c" — the "c" would be highlighted
$: s("bd sd" // Missing ")" — the "(" would be highlighted
$: s(("bd sd") // Missing ")" — the first "(" would be highlighted
$: {s("bd sd") // Missing "}" — the "{" would be highlighted
$: s("bd sd") + // Incomplete expression — end of line highlighted
// === Runtime Errors (method/variable not found) ===
s("bd sd").rom(1) // rom is not a function — "rom" would be highlighted
s("bd sd").fsat(2) // fsat is not a function — "fsat" would be highlighted
s("bd sd").spede(2) // spede is not a function — "spede" would be highlighted
s("bd sd").nonExistent() // nonExistent is not a function — "nonExistent" highlighted
xyz // xyz is not defined — "xyz" would be highlighted
myFunc() // myFunc is not defined — "myFunc" would be highlighted
-