[dingus] Start to render errors

[dingus] Color syntax nodes red when they are errors
[dingus] Reset the grammar globals every time
2024-10-08 06:42:54 -07:00 · 2024-10-06 08:06:54 -07:00 · 2024-10-06 07:44:11 -07:00
4 changed files with 129 additions and 42 deletions
--- a/dingus/dingus.html
+++ b/dingus/dingus.html
@ -15,19 +15,37 @@
  </head>
  <body>
    <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>
      </div>
-      <div class="status">
+
+      <div class="panel status">
        <span id="status-line">Loading python...</span>
      </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>
      </div>

-      <div class="results-container">
-        <div id="output-root" />
+      <div class="panel-top result-selector">
+        <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>

--- a/dingus/dingus.js
+++ b/dingus/dingus.js
@ -1,4 +1,16 @@
 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 = {};
 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) {
      on_success(message);
    }
+
+    if (message.status === "error") {
+      render_errors(message.errors);
+    }
  }
  DOC_CHAINS[kind] = on_result;

@ -71,9 +87,11 @@ worker.onmessage = (e) => {
 let grammar_editor = null;
 let input_editor = null;

-function render_parse_results(message) {
-  console.log("WHAT?");
+function render_errors(errors) {
+  ERRORS.innerText = errors.join("\n")
+}

+function render_parse_results(message) {
  function render_tree_node(parent, node) {
    const tree_div = document.createElement("div");
    tree_div.classList.add("parsed-node");
@ -89,8 +107,12 @@ function render_parse_results(message) {
        {scroll: true},
      );
    };
+    if (node.start == node.end) {
+      node_label.classList.add("parsed-error-node");
+    }
    tree_div.appendChild(node_label);

+
    if (node.kind === "tree") {
      tree_div.classList.add("parsed-tree");
      for (const child of node.children) {
@ -102,9 +124,10 @@ function render_parse_results(message) {
    parent.appendChild(tree_div);
  }

-  const root = document.getElementById("output-root");
+  const root = document.getElementById("tree-root");
  root.innerHTML = "";
  render_tree_node(root, message.tree);
+  render_errors(message.errors);
 }

 function setup_editors() {
--- a/dingus/style.css
+++ b/dingus/style.css
@ -8,60 +8,92 @@ body {
 .page-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 4rem 1fr 2em;
+  grid-template-rows: 4rem 2rem 1fr 2rem;
  width: 100%;
  height: 100%;
 }

-.grammar-container {
-  grid-column: 1;
-  grid-row: 2;
+.panel {
  padding: 0.25rem;

  /* Establishing minimum sizes here causes the codemirror CSS to work */
  min-height: 0;
  min-width: 0;
+  overflow-y: scroll;
+  border-left: 1px solid;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
 }

-.status {
-  grid-column: 1 / 3;
+.panel-top {
+  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;
-  padding: 0.25rem;
+}
+
+.input-title {
+  grid-column: 2;
+  grid-row: 2;
 }

 .input-container {
  grid-column: 2;
-  grid-row: 2;
-  padding: 0.25rem;
-
-  /* Establishing minimum sizes here causes the codemirror CSS to work */
-  min-height: 0;
-  min-width: 0;
+  grid-row: 3;
 }

-.input-status {
-  grid-column: 2;
-  grid-row: 3;
-  padding: 0.25rem;
+.result-selector {
+  position: relative;
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.result-selector-buttons {
+  position: absolute;
+  top: 0.25rem;
+  right: 1rem;
 }

 .results-container {
  grid-column: 3;
-  grid-row: 2;
-  padding: 0.25rem;
+  grid-row: 3;
+}

-  overflow-y: scroll;
+.status {
+  grid-column: 1 / 4;
+  grid-row: 4;
+  padding: 0.25rem;
+  border: 1px solid;
 }

 .parsed-node {
  margin-left: 1rem;
 }

+.parsed-error-node {
+  color: red;
+}
+
 .main-textarea {
  height: 100%;
  width: 100%;
 }

+.hidden {
+  display: none;
+}
+
 .CodeMirror {
  height: 100%;
 }
--- a/dingus/worker.js
+++ b/dingus/worker.js
@ -31,9 +31,15 @@ const dingus_module = {
    postMessage({kind: "grammar", status: "ok", message: msg});
  },

-  post_grammar_error: function(error) {
-    console.log("Grammar Error:", error);
-    postMessage({kind:"grammar", status: "error", message: error});
+  post_grammar_error: function(errors) {
+    errors = data_to_js(errors);
+    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) {
@ -50,9 +56,15 @@ const dingus_module = {
    });
  },

-  post_doc_error: function(error) {
-    console.log("Doc Error:", error);
-    postMessage({kind:"input", status: "error", message: error});
+  post_doc_error: function(errors) {
+    errors = data_to_js(errors);
+    console.log("Doc Error:", errors);
+    postMessage({
+      kind:"input",
+      status: "error",
+      message: "An error occurred parsing the document",
+      errors: errors,
+    });
  },
 };

@ -80,23 +92,23 @@ import parser.runtime as runtime
 import pyodide.code
 import pyodide.ffi as ffi

-GRAMMAR_GLOBALS = {}
 GRAMMAR = None
 PARSE_TABLE = None
 LEXER = None

 def eval_grammar(code):
-  global GRAMMAR_GLOBALS
  global GRAMMAR
  global PARSE_TABLE
  global LEXER

  try:
    dingus.post_grammar_status("Evaluating grammar...")
-    pyodide.code.eval_code(code, globals=GRAMMAR_GLOBALS)
+    print("Hey?")
+    grammar_globals={}
+    pyodide.code.eval_code(code, globals=grammar_globals)

    grammar = None
-    for key, value in GRAMMAR_GLOBALS.items():
+    for key, value in grammar_globals.items():
      if isinstance(value, type) and issubclass(value, parser.Grammar) and value is not parser.Grammar:
        value = value()

@ -120,8 +132,9 @@ def eval_grammar(code):
    dingus.post_grammar_loaded(grammar.name)

  except Exception as e:
-    traceback.print_exc()
-    dingus.post_grammar_error(f"{e}")
+    ohno = traceback.format_exc()
+    print(f"grammar: {ohno}")
+    dingus.post_grammar_error(ohno.splitlines())

 def tree_to_js(tree):
  if tree is None:
@ -152,8 +165,9 @@ def eval_document(code):
    tree, errors = runtime.parse(PARSE_TABLE, LEXER, code)
    dingus.post_doc_parse(tree_to_js(tree), errors)
  except Exception as e:
-    traceback.print_exc()
-    dingus.post_doc_error(f"{e}")
+    ohno = traceback.format_exc()
+    print(f"doc: {ohno}")
+    dingus.post_doc_error(ohno.splitlines())
 `);

  dingus_module.post_grammar_status("Ready.");
Author	SHA1	Message	Date
John Doty	ba65c1929c	[dingus] Start to render errors	2024-10-08 06:42:54 -07:00
John Doty	15a7feac07	[dingus] Color syntax nodes red when they are errors	2024-10-06 08:06:54 -07:00
John Doty	1a8c768772	[dingus] Reset the grammar globals every time Now I can rewrite the grammar	2024-10-06 07:44:11 -07:00