From aafa74e7bce6e47052c58a663ac3f2013649711e Mon Sep 17 00:00:00 2001
From: Linus Lee <linus@thesephist.com>
Date: Thu, 24 Sep 2020 05:56:09 -0400
Subject: [PATCH] Get basic REPL loop working

---
 static/js/lang.js |  4 +--
 static/js/main.js | 74 +++++++++++++++++++++++++++++++++--------------
 2 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/static/js/lang.js b/static/js/lang.js
index d5ed749..4d17b48 100644
--- a/static/js/lang.js
+++ b/static/js/lang.js
@@ -47,7 +47,7 @@ class Reader {
  */
 class Wordifier {
     constructor(str) {
-        this.reader = new Reader(prog);
+        this.reader = new Reader(str);
         this.tokens = [];
     }
     wordify() {
@@ -623,7 +623,7 @@ class Environment {
             }
             case N.PrintExpr: {
                 const val = this.eval(node.val);
-                Runtime.print(val);
+                this.runtime.print(val);
                 return val;
             }
             default:
diff --git a/static/js/main.js b/static/js/main.js
index a3583ad..b6aa634 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,4 +1,4 @@
-const prog = `
+const PROG_DEFAULT = `
 DISCOVER HOW TO factorial WITH n
 WE SAID
     WHAT IF n IS ACTUALLY 0
@@ -14,24 +14,7 @@ EXPERTS CLAIM result TO BE factorial OF 10
 YOU WON'T WANT TO MISS 'RESULT IS'
 YOU WON'T WANT TO MISS result
 
-PLEASE LIKE AND SUBSCRIBE
-`;
-
-const Runtime = {
-    print(s) {
-        console.log(s.toString());
-    }
-}
-
-// main
-try {
-    const tokens = tokenize(prog);
-    const nodes = new Parser(tokens).parse();
-    const env = new Environment(Runtime);
-    env.run(nodes);
-} catch (e) {
-    console.error(e);
-}
+PLEASE LIKE AND SUBSCRIBE`;
 
 const {
     Component,
@@ -39,18 +22,67 @@ const {
 
 class Editor extends Component {
     init() {
-        this.val = '';
+        this.prog = PROG_DEFAULT;
+        // script appends to it
+        this.output = '';
+        this.errors = '';
+
+        this.handleRun = () => this.eval();
+        this.handleInput = evt => {
+            this.prog = evt.target.value;
+            this.render();
+        }
+    }
+    eval() {
+        this.output = '';
+        try {
+            const tokens = tokenize(this.prog);
+            const nodes = new Parser(tokens).parse();
+            const env = new Environment({
+                print: s => {
+                    this.output += s.toString();
+                    this.render();
+                },
+            });
+            env.run(nodes);
+        } catch (e) {
+            this.errors = e.toString();
+        }
+        this.render();
     }
     compose() {
-
+        return jdom`<div class="editor fixed block">
+            <div class="controls">
+                <button class="accent block"
+                    onclick=${this.handleRun}>Run!</button>
+            </div>
+            <div class="code">
+                <textarea cols="30" rows="10"
+                    value=${this.prog}
+                    oninput=${this.handleInput}>
+                </textarea>
+            </div>
+            <div class="result">
+                <div class="output">
+                    ${this.output.split('\n').map(line => jdom`<code>${line}</code>`)}
+                </div>
+                <div class="errors">
+                    ${this.errors.split('\n').map(line => jdom`<code>${line}</code>`)}
+                </div>
+            </div>
+        </div>`;
     }
 }
 
 class App extends Component {
+    init() {
+        this.editor = new Editor();
+    }
     compose() {
         return jdom`<main>
             <h1>Tabloid</h1>
             <p class="subtitle">The Clickbait Headline Programming Language</p>
+            ${this.editor.node}
         </main>`;
     }
 }