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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import init, { make_interp } from './pkg/automathon.js';
function wordlistElts(wordlist) {
return wordlist.map((bc, i) => {
const bcElt = document.createElement('x-bytecode');
bcElt.setAttribute('x-index', i);
for (let i = 0; i < bc.len(); i++) {
const opElt = document.createElement('x-op');
opElt.setAttribute('x-index', i);
opElt.textContent = bc.at(i);
bcElt.appendChild(opElt);
}
return bcElt;
})
}
function selectorForIP(word, offset) {
const sel = `#wordlist x-bytecode[x-index='${word}'] x-op[x-index='${offset}']`;
console.debug('using sel', sel);
return sel;
}
function initWordlist() {
const sel = selectorForIP(0, 0);
document.querySelectorAll(sel).forEach(e => {
e.classList.add('ip')
});
}
function renderStack(interp) {
document.querySelectorAll('#stack').forEach(e => {
while (e.lastChild) {
e.removeChild(e.lastChild);
}
interp.stack().reverse()
.forEach(datum => {
console.debug('creating elt for', datum);
const elt = document.createElement('li');
elt.textContent = datum;
console.debug('elt', elt);
e.appendChild(elt);
return elt;
});
});
}
function renderCallStack(interp) {
document.querySelectorAll('#callstack').forEach(e => {
while (e.lastChild) {
e.removeChild(e.lastChild);
}
interp.callstack().reverse()
.forEach(datum => {
console.debug('creating elt for', datum);
const elt = document.createElement('li');
elt.textContent = `${datum.word}@${datum.offset}`;
console.debug('elt', elt);
e.appendChild(elt);
return elt;
});
});
}
async function loaded() {
console.debug('running init');
const mod = await init();
console.debug('init done', mod);
const interp = make_interp();
document.querySelector('#compile').onclick = e => {
console.debug('compile clicked', e);
let wordlistContainer = document.querySelector('#wordlist');
while (wordlistContainer.lastChild) {
console.debug('removing child', wordlistContainer.lastChild)
wordlistContainer.removeChild(wordlistContainer.lastChild);
}
console.debug('container has firstchild', wordlistContainer.firstChild)
// always add a newline until i decide what to do with the parser.
const text = document.querySelector('textarea').value + '\n';
const start = performance.now();
const res = interp.compile(text);
const end = performance.now();
console.info(`compile took ${end-start} ms`);
if (res) {
const wordlist = wordlistElts(interp.wordlist());
wordlist.forEach(elt => wordlistContainer.appendChild(elt));
initWordlist();
}
};
document.querySelector('#tick').onclick = e => {
console.debug('tick clicked', e);
if (!interp.tick()) {
interp.reset_ip();
}
console.info('callstack', interp.callstack());
console.info('stack', interp.stack());
const { word, offset } = interp.ip();
console.info('ip', word, offset);
document.querySelectorAll('#wordlist .ip').forEach(e => e.classList.remove('ip'));
const sel = selectorForIP(word, offset);
document.querySelectorAll(sel).forEach(e => {
e.classList.add('ip');
});
renderStack(interp);
renderCallStack(interp);
};
document.querySelector('#bench').onclick = e => {
console.debug('bench clicked', e);
const start = performance.now();
let tickCount = 0;
for (let i = 0; i < 1_000_000; i++) {
tickCount += interp.run();
}
const end = performance.now();
console.info(`run took ${end-start} ms for ${tickCount} ticks (${(end-start)/tickCount * 1000000} µs/tick).`);
console.info('result', interp.stack());
};
window.interp = interp;
}
document.addEventListener('DOMContentLoaded', loaded);
|
