Skip to content

Commit 4e3ac77

Browse files
HeinrichApfelmusHeinrichApfelmus
committed
Add interpreter history to user interface
1 parent bbd15c2 commit 4e3ac77

3 files changed

Lines changed: 73 additions & 12 deletions

File tree

‎src/Main.hs‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,24 @@ import Eval (RefRepl, eval, initDisco)
1111
foreign import javascript unsafe "document.getElementById($1)"
1212
js_document_getElementById :: JSString -> IO JSVal
1313

14+
foreign import javascript unsafe "document.createElement($1)"
15+
js_document_createElement :: JSString -> IO JSVal
16+
1417
foreign import javascript unsafe "$1.addEventListener($2, $3)"
1518
js_addEventListener :: JSVal -> JSString -> JSVal -> IO ()
1619

20+
foreign import javascript unsafe "$1.appendChild($2)"
21+
js_element_appendChild :: JSVal -> JSVal -> IO ()
22+
1723
foreign import javascript "wrapper"
1824
asEventListener :: (JSVal -> IO ()) -> IO JSVal
1925

20-
foreign import javascript unsafe "$1.target.value"
21-
js_event_target_value :: JSVal -> IO Double
22-
2326
foreign import javascript unsafe "$1.value"
2427
js_input_value :: JSVal -> IO JSString
2528

29+
foreign import javascript unsafe "$1.textContent = $2"
30+
js_element_setTextContent :: JSVal -> JSString -> IO ()
31+
2632
foreign import javascript unsafe "view.state.doc.toString()"
2733
js_view_state_doc_toString :: IO JSString
2834

@@ -41,7 +47,7 @@ foreign export javascript "setup" setup :: IO ()
4147
setup :: IO ()
4248
setup = do
4349
ref <- initDisco
44-
50+
4551
-- Register callback for button click.
4652
evalButton <- js_document_getElementById (toJSString "eval")
4753
onEvalButtonCallback <- asEventListener (onEvalButtonClick ref)
@@ -55,5 +61,16 @@ onEvalButtonClick ref event = do
5561
expr <- fromJSString <$> js_input_value exprIn
5662

5763
result <- eval ref expr
64+
logHistory $ "disco> " <> expr
65+
logHistory result
66+
{-
5867
outDiv <- js_document_getElementById (toJSString "out")
5968
js_element_setInnerHtml outDiv (toJSString result)
69+
-}
70+
71+
logHistory :: String -> IO ()
72+
logHistory s = do
73+
div <- js_document_getElementById (toJSString "out")
74+
pre <- js_document_createElement (toJSString "pre")
75+
js_element_appendChild div pre
76+
js_element_setInnerHtml pre (toJSString s)

‎www/disco-live.html‎

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,64 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<style>
7+
body {
8+
margin: 0;
9+
height: 100vh;
10+
display: flex;
11+
}
12+
#left {
13+
flex: 1;
14+
padding: 8px;
15+
display: flex;
16+
flex-direction: column;
17+
}
18+
#right {
19+
flex: 1;
20+
padding: 8px;
21+
display: flex;
22+
flex-direction: column;
23+
gap: 8px;
24+
}
25+
#editor {
26+
flex: 1;
27+
width: 100%;
28+
resize: none;
29+
}
30+
#out {
31+
flex: 1;
32+
border: 1px solid #ccc;
33+
padding: 6px;
34+
overflow: scroll;
35+
}
36+
#out pre {
37+
margin: 1px;
38+
}
39+
#expr {
40+
width: 100%;
41+
box-sizing: border-box;
42+
padding: 6px;
43+
}
44+
.cm-editor {
45+
height: auto;
46+
}
47+
</style>
648
</head>
749

850
<body>
951
<script defer src="vendor/codemirror-6.js"></script>
1052
<script defer src="js/editor.js"></script>
11-
<div>
12-
<div id="editor">
13-
</div>
14-
15-
<label for="expr">REPL command to execute</label>
53+
<div id="left">
54+
<label for="editor">File <code>disco-live.disco</code>:</label>
55+
<div id="editor"></div>
56+
</div>
57+
<div id="right">
58+
<label for="out">Interpreter history:</label>
59+
<div id="out"></div>
60+
<label for="expr">Command:</label>
1661
<input type="text" id="expr" value="1 + 2"/>
1762
<input type="button" id="eval" value="Evaluate"/>
18-
<pre id="out">(Result here)
19-
</pre>
63+
</div>
2064
</div>
2165
<script type="module">
2266
import { runWASM } from "./runtime.js";

‎www/js/editor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
'use strict'
33
const {basicSetup, EditorView} = CM["codemirror"]
44
window.view = new EditorView({
5-
doc: "1 + 2",
5+
doc: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",
66
parent: document.querySelector("#editor"),
77
extensions: [basicSetup]
88
})

0 commit comments

Comments
 (0)