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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
const SRC_SELECT_SELECTOR = '.src-select';
const COMPILE_BUTTON_SELECTOR = '.compile';
const WORDLIST_SELECTOR = '.wordlist';
const STACK_SELECTOR = '.stack';
const CALLSTACK_SELECTOR = '.callstack';
const VARS_SELECTOR = '.vars';
const SRC_SELECTOR = '.src';
const IP_SELECTOR = '.wordlist .ip';
const HIGHLIGHT = new Highlight();
CSS.highlights.set('exec', HIGHLIGHT);
function selectorForIP(word, offset) {
return `.wordlist x-bytecode[x-index='${word}'] x-op[x-index='${offset}']`;
}
function wordlistElts(wordlist) {
return wordlist.map((bc, i) => {
const bcElt = document.createElement('x-bytecode');
bcElt.setAttribute('x-index', i);
bc.forEach((op, i) => {
const opElt = document.createElement('x-op');
opElt.setAttribute('x-index', i);
opElt.textContent = op;
bcElt.appendChild(opElt);
})
return bcElt;
})
}
export default class extends HTMLElement {
static name = 'x-inspector';
static compileRequest = 'compile';
static register() {
console.debug('registering custom element', this.name, this);
self.customElements.define(this.name, this);
}
#highRange = new Range();
#srcSelect;
#compileButton;
#wordlist;
#stack;
#callstack;
#vars;
#src;
constructor() {
super();
HIGHLIGHT.add(this.#highRange);
}
connectedCallback() {
self.foo = this;
console.debug('connectedCallback()', this);
[this.#srcSelect, this.#compileButton, this.#wordlist, this.#stack, this.#callstack, this.#vars, this.#src] = [
SRC_SELECT_SELECTOR,
COMPILE_BUTTON_SELECTOR,
WORDLIST_SELECTOR,
STACK_SELECTOR,
CALLSTACK_SELECTOR,
VARS_SELECTOR,
SRC_SELECTOR,
].map(this.querySelector.bind(this));
this.#compileButton.onclick = e => {
console.debug('compile clicked', e);
// always add a newline until i decide what to do with the parser.
const text = this.#src.textContent + '\n';
const compileEvent = new CustomEvent(this.constructor.compileRequest, { detail: { text } });
this.dispatchEvent(compileEvent);
}
this.#srcSelect.onchange = _ => this.#loadForth(this.#srcSelect.value);
this.#loadForth(this.#srcSelect.value);
}
attributeChangedCallback(name, old, v) {
console.debug('attributeChangedCallback', this, name, old, v);
}
render(robo, fresh=false) {
if (fresh) {
this.#renderWordlist(robo);
}
this.#renderTextHighlight(robo);
this.#renderWordlistHighlight(robo);
this.#renderVars(robo);
this.#renderStack(robo);
this.#renderCallstack(robo);
}
#loadForth(taintedPath) {
console.debug('loadForth', this, taintedPath);
// ascii only + ‘-’, ‘_’, ‘.’, and ‘/’, but no ‘../’
const path =
taintedPath
.replace(/[^-_A-Za-z./]/g, '')
.replace(/\.\.\//g, '');
fetch(`./samples/${path}`)
.then(resp => {
if (!resp.ok) {
throw `http status ${resp.status}`
}
return resp.text()
})
.then(text => {
this.#src.textContent = text;
})
.catch(e => {
console.error(`couldn't fetch ‘${path}’`, e);
});
}
#renderWordlist(vm) {
while (this.#wordlist.lastChild) {
console.debug('removing child', this.#wordlist.lastChild)
this.#wordlist.removeChild(this.#wordlist.lastChild);
}
const wordlist = wordlistElts(vm.wordlist);
wordlist.forEach(elt => this.#wordlist.appendChild(elt));
}
#renderTextHighlight(vm) {
const { word, offset } = vm.ip;
const anno = vm.annos[word][offset];
// this assumes the text node is the first child, maybe it isn't?
this.#highRange.setStart(this.#src.childNodes[0], anno.start);
this.#highRange.setEnd(this.#src.childNodes[0], anno.end);
}
#renderWordlistHighlight(vm) {
const { word, offset } = vm.ip;
this.#wordlist.querySelectorAll(IP_SELECTOR).forEach(e => e.classList.remove('ip'));
const sel = selectorForIP(word, offset);
this.querySelectorAll(sel).forEach(e => {
e.classList.add('ip');
});
}
#renderVars(vm) {
while (this.#vars.lastChild) {
this.#vars.removeChild(this.#vars.lastChild);
}
['out', 'heading', 'speed', 'doppler'].forEach(name => {
const dt = document.createElement('dt');
dt.textContent = name;
this.#vars.appendChild(dt);
const dd = document.createElement('dd');
dd.textContent = vm.vars[name] ?? '?';
this.#vars.appendChild(dd);
});
}
#renderStack(vm) {
while (this.#stack.lastChild) {
this.#stack.removeChild(this.#stack.lastChild);
}
vm.stack.reverse()
.forEach(datum => {
const elt = document.createElement('li');
elt.textContent = datum;
this.#stack.appendChild(elt);
return elt;
});
}
#renderCallstack(vm) {
while (this.#callstack.lastChild) {
this.#callstack.removeChild(this.#callstack.lastChild);
}
vm.callstack.reverse()
.forEach(datum => {
const elt = document.createElement('li');
elt.textContent = `${datum.word}@${datum.offset}`;
this.#callstack.appendChild(elt);
return elt;
});
}
}
|
