blob: b6aa634e282dc13e257336257ddda704323eacd2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
const PROG_DEFAULT = `
DISCOVER HOW TO factorial WITH n
WE SAID
WHAT IF n IS ACTUALLY 0
WE SAID
SHOCKING DEVELOPMENT 1
END OF STORY
LIES! WE SAID
SHOCKING DEVELOPMENT n MULTIPLY factorial OF n SUBTRACT 1
END OF STORY
END OF STORY
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 {
Component,
} = window.Torus;
class Editor extends Component {
init() {
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>`;
}
}
const app = new App();
document.body.appendChild(app.node);
|
