[dingus] Start to render errors
This commit is contained in:
parent
15a7feac07
commit
ba65c1929c
4 changed files with 118 additions and 36 deletions
|
|
@ -15,19 +15,37 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="grammar-container">
|
<div class="panel-top grammar-title">
|
||||||
|
Write Your Grammar Here
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel grammar-container">
|
||||||
<textarea id="grammar" name="grammar" class="main-textarea"></textarea>
|
<textarea id="grammar" name="grammar" class="main-textarea"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
|
||||||
|
<div class="panel status">
|
||||||
<span id="status-line">Loading python...</span>
|
<span id="status-line">Loading python...</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="panel-top input-title">
|
||||||
|
Write In Your Language Here
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel input-container">
|
||||||
<textarea id="input" name="input" class="main-textarea"></textarea>
|
<textarea id="input" name="input" class="main-textarea"></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="results-container">
|
<div class="panel-top result-selector">
|
||||||
<div id="output-root" />
|
<span>Results</span>
|
||||||
|
<span class="result-selector-buttons">
|
||||||
|
<button id="tree-button">Tree</button>
|
||||||
|
<button id="errors-button">Errors</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel results-container">
|
||||||
|
<pre id="error-root"></pre>
|
||||||
|
<div id="tree-root"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,16 @@
|
||||||
const STATUS = document.getElementById("status-line");
|
const STATUS = document.getElementById("status-line");
|
||||||
|
const ERRORS = document.getElementById("error-root");
|
||||||
|
const TREE = document.getElementById("tree-root");
|
||||||
|
|
||||||
|
function show_tree() {
|
||||||
|
ERRORS.classList.add("hidden");
|
||||||
|
TREE.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_errors() {
|
||||||
|
ERRORS.classList.remove("hidden");
|
||||||
|
TREE.classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
const DOC_CHAINS = {};
|
const DOC_CHAINS = {};
|
||||||
function chain_document_submit(kind, editor, on_success) {
|
function chain_document_submit(kind, editor, on_success) {
|
||||||
|
|
@ -34,6 +46,10 @@ function chain_document_submit(kind, editor, on_success) {
|
||||||
if (message.status === "ok" && on_success) {
|
if (message.status === "ok" && on_success) {
|
||||||
on_success(message);
|
on_success(message);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (message.status === "error") {
|
||||||
|
render_errors(message.errors);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
DOC_CHAINS[kind] = on_result;
|
DOC_CHAINS[kind] = on_result;
|
||||||
|
|
||||||
|
|
@ -71,6 +87,10 @@ worker.onmessage = (e) => {
|
||||||
let grammar_editor = null;
|
let grammar_editor = null;
|
||||||
let input_editor = null;
|
let input_editor = null;
|
||||||
|
|
||||||
|
function render_errors(errors) {
|
||||||
|
ERRORS.innerText = errors.join("\n")
|
||||||
|
}
|
||||||
|
|
||||||
function render_parse_results(message) {
|
function render_parse_results(message) {
|
||||||
function render_tree_node(parent, node) {
|
function render_tree_node(parent, node) {
|
||||||
const tree_div = document.createElement("div");
|
const tree_div = document.createElement("div");
|
||||||
|
|
@ -104,9 +124,10 @@ function render_parse_results(message) {
|
||||||
parent.appendChild(tree_div);
|
parent.appendChild(tree_div);
|
||||||
}
|
}
|
||||||
|
|
||||||
const root = document.getElementById("output-root");
|
const root = document.getElementById("tree-root");
|
||||||
root.innerHTML = "";
|
root.innerHTML = "";
|
||||||
render_tree_node(root, message.tree);
|
render_tree_node(root, message.tree);
|
||||||
|
render_errors(message.errors);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setup_editors() {
|
function setup_editors() {
|
||||||
|
|
|
||||||
|
|
@ -8,49 +8,73 @@ body {
|
||||||
.page-container {
|
.page-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
grid-template-rows: 4rem 1fr 2em;
|
grid-template-rows: 4rem 2rem 1fr 2rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grammar-container {
|
.panel {
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 2;
|
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
|
|
||||||
/* Establishing minimum sizes here causes the codemirror CSS to work */
|
/* Establishing minimum sizes here causes the codemirror CSS to work */
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
border-left: 1px solid;
|
||||||
|
border-right: 1px solid;
|
||||||
|
border-bottom: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.panel-top {
|
||||||
grid-column: 1 / 3;
|
padding: 0.5rem;
|
||||||
|
border-bottom: 1px dashed;
|
||||||
|
border-right: 1px solid;
|
||||||
|
border-left: 1px solid;
|
||||||
|
border-top: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grammar-title {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grammar-container {
|
||||||
|
grid-column: 1;
|
||||||
grid-row: 3;
|
grid-row: 3;
|
||||||
padding: 0.25rem;
|
}
|
||||||
|
|
||||||
|
.input-title {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
grid-row: 2;
|
grid-row: 3;
|
||||||
padding: 0.25rem;
|
|
||||||
|
|
||||||
/* Establishing minimum sizes here causes the codemirror CSS to work */
|
|
||||||
min-height: 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-status {
|
.result-selector {
|
||||||
grid-column: 2;
|
position: relative;
|
||||||
grid-row: 3;
|
grid-column: 3;
|
||||||
padding: 0.25rem;
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-selector-buttons {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.25rem;
|
||||||
|
right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-container {
|
.results-container {
|
||||||
grid-column: 3;
|
grid-column: 3;
|
||||||
grid-row: 2;
|
grid-row: 3;
|
||||||
padding: 0.25rem;
|
}
|
||||||
|
|
||||||
overflow-y: scroll;
|
.status {
|
||||||
|
grid-column: 1 / 4;
|
||||||
|
grid-row: 4;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parsed-node {
|
.parsed-node {
|
||||||
|
|
@ -66,6 +90,10 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,9 +31,15 @@ const dingus_module = {
|
||||||
postMessage({kind: "grammar", status: "ok", message: msg});
|
postMessage({kind: "grammar", status: "ok", message: msg});
|
||||||
},
|
},
|
||||||
|
|
||||||
post_grammar_error: function(error) {
|
post_grammar_error: function(errors) {
|
||||||
console.log("Grammar Error:", error);
|
errors = data_to_js(errors);
|
||||||
postMessage({kind:"grammar", status: "error", message: error});
|
console.log("Grammar Error:", errors);
|
||||||
|
postMessage({
|
||||||
|
kind:"grammar",
|
||||||
|
status: "error",
|
||||||
|
message: "An error occurred loading the grammar",
|
||||||
|
errors: errors,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
post_doc_parse: function(tree, errors) {
|
post_doc_parse: function(tree, errors) {
|
||||||
|
|
@ -50,9 +56,15 @@ const dingus_module = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
post_doc_error: function(error) {
|
post_doc_error: function(errors) {
|
||||||
console.log("Doc Error:", error);
|
errors = data_to_js(errors);
|
||||||
postMessage({kind:"input", status: "error", message: error});
|
console.log("Doc Error:", errors);
|
||||||
|
postMessage({
|
||||||
|
kind:"input",
|
||||||
|
status: "error",
|
||||||
|
message: "An error occurred parsing the document",
|
||||||
|
errors: errors,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -91,6 +103,7 @@ def eval_grammar(code):
|
||||||
|
|
||||||
try:
|
try:
|
||||||
dingus.post_grammar_status("Evaluating grammar...")
|
dingus.post_grammar_status("Evaluating grammar...")
|
||||||
|
print("Hey?")
|
||||||
grammar_globals={}
|
grammar_globals={}
|
||||||
pyodide.code.eval_code(code, globals=grammar_globals)
|
pyodide.code.eval_code(code, globals=grammar_globals)
|
||||||
|
|
||||||
|
|
@ -119,8 +132,9 @@ def eval_grammar(code):
|
||||||
dingus.post_grammar_loaded(grammar.name)
|
dingus.post_grammar_loaded(grammar.name)
|
||||||
|
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
traceback.print_exc()
|
ohno = traceback.format_exc()
|
||||||
dingus.post_grammar_error(f"{e}")
|
print(f"grammar: {ohno}")
|
||||||
|
dingus.post_grammar_error(ohno.splitlines())
|
||||||
|
|
||||||
def tree_to_js(tree):
|
def tree_to_js(tree):
|
||||||
if tree is None:
|
if tree is None:
|
||||||
|
|
@ -151,8 +165,9 @@ def eval_document(code):
|
||||||
tree, errors = runtime.parse(PARSE_TABLE, LEXER, code)
|
tree, errors = runtime.parse(PARSE_TABLE, LEXER, code)
|
||||||
dingus.post_doc_parse(tree_to_js(tree), errors)
|
dingus.post_doc_parse(tree_to_js(tree), errors)
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
traceback.print_exc()
|
ohno = traceback.format_exc()
|
||||||
dingus.post_doc_error(f"{e}")
|
print(f"doc: {ohno}")
|
||||||
|
dingus.post_doc_error(ohno.splitlines())
|
||||||
`);
|
`);
|
||||||
|
|
||||||
dingus_module.post_grammar_status("Ready.");
|
dingus_module.post_grammar_status("Ready.");
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue