feat: add a histrical wit-bindgen
This commit is contained in:
@@ -0,0 +1,182 @@
|
||||
import { Demo, Config } from './demo.js';
|
||||
import * as browser from './browser.js';
|
||||
|
||||
class Editor {
|
||||
input: HTMLTextAreaElement;
|
||||
language: HTMLSelectElement;
|
||||
mode: HTMLSelectElement;
|
||||
files: HTMLSelectElement
|
||||
rustUnchecked: HTMLInputElement;
|
||||
wasmtimeTracing: HTMLInputElement;
|
||||
wasmtimeAsync: HTMLInputElement;
|
||||
wasmtimeCustomError: HTMLInputElement;
|
||||
generatedFiles: Record<string, string>;
|
||||
demo: Demo;
|
||||
config: Config | null;
|
||||
rerender: number | null;
|
||||
inputEditor: AceAjax.Editor;
|
||||
outputEditor: AceAjax.Editor;
|
||||
outputHtml: HTMLDivElement;
|
||||
|
||||
constructor() {
|
||||
this.input = document.getElementById('input-raw') as HTMLTextAreaElement;
|
||||
this.language = document.getElementById('language-select') as HTMLSelectElement;
|
||||
this.mode = document.getElementById('mode-select') as HTMLSelectElement;
|
||||
this.files = document.getElementById('file-select') as HTMLSelectElement;
|
||||
this.rustUnchecked = document.getElementById('rust-unchecked') as HTMLInputElement;
|
||||
this.wasmtimeTracing = document.getElementById('wasmtime-tracing') as HTMLInputElement;
|
||||
this.wasmtimeAsync = document.getElementById('wasmtime-async') as HTMLInputElement;
|
||||
this.wasmtimeCustomError = document.getElementById('wasmtime-custom-error') as HTMLInputElement;
|
||||
this.outputHtml = document.getElementById('html-output') as HTMLDivElement;
|
||||
|
||||
this.inputEditor = ace.edit("input");
|
||||
this.outputEditor = ace.edit("output");
|
||||
this.inputEditor.setValue(this.input.value);
|
||||
this.inputEditor.clearSelection();
|
||||
this.outputEditor.setReadOnly(true);
|
||||
this.inputEditor.setOption("useWorker", false);
|
||||
this.outputEditor.setOption("useWorker", false);
|
||||
|
||||
this.generatedFiles = {};
|
||||
this.demo = new Demo();
|
||||
this.config = null;
|
||||
this.rerender = null;
|
||||
}
|
||||
|
||||
async instantiate() {
|
||||
const imports = {};
|
||||
const obj = {
|
||||
log: console.log,
|
||||
error: console.error,
|
||||
};
|
||||
browser.addBrowserToImports(imports, obj, name => this.demo.instance.exports[name]);
|
||||
await this.demo.instantiate(fetch('./demo.wasm'), imports);
|
||||
this.config = Config.new(this.demo);
|
||||
this.installListeners();
|
||||
this.render();
|
||||
}
|
||||
|
||||
installListeners() {
|
||||
this.inputEditor.on('change', () => {
|
||||
this.input.value = this.inputEditor.getValue();
|
||||
if (this.rerender !== null)
|
||||
clearTimeout(this.rerender);
|
||||
this.rerender = setTimeout(() => this.render(), 500);
|
||||
});
|
||||
|
||||
this.language.addEventListener('change', () => this.render());
|
||||
this.mode.addEventListener('change', () => this.render());
|
||||
|
||||
this.rustUnchecked.addEventListener('change', () => {
|
||||
this.config.setRustUnchecked(this.rustUnchecked.checked);
|
||||
this.render();
|
||||
});
|
||||
|
||||
this.wasmtimeTracing.addEventListener('change', () => {
|
||||
this.config.setWasmtimeTracing(this.wasmtimeTracing.checked);
|
||||
this.render();
|
||||
});
|
||||
this.wasmtimeAsync.addEventListener('change', () => {
|
||||
let async_;
|
||||
if (this.wasmtimeAsync.checked)
|
||||
async_ = { tag: 'all' };
|
||||
else
|
||||
async_ = { tag: 'none' };
|
||||
this.config.setWasmtimeAsync(async_);
|
||||
this.render();
|
||||
});
|
||||
this.wasmtimeCustomError.addEventListener('change', () => {
|
||||
this.config.setWasmtimeCustomError(this.wasmtimeCustomError.checked);
|
||||
this.render();
|
||||
});
|
||||
this.files.addEventListener('change', () => this.updateSelectedFile());
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
for (let div of document.querySelectorAll('.lang-configure')) {
|
||||
(div as HTMLDivElement).style.display = 'none';
|
||||
}
|
||||
|
||||
const config = document.getElementById(`configure-${this.language.value}`);
|
||||
config.style.display = 'inline-block';
|
||||
|
||||
const wit = this.inputEditor.getValue();
|
||||
const is_import = this.mode.value === 'import';
|
||||
let lang;
|
||||
switch (this.language.value) {
|
||||
case "js":
|
||||
case "rust":
|
||||
case "wasmtime":
|
||||
case "wasmtime-py":
|
||||
case "c":
|
||||
case "markdown":
|
||||
case "spidermonkey":
|
||||
lang = this.language.value;
|
||||
break;
|
||||
default: return;
|
||||
}
|
||||
const result = this.config.render(lang, wit, is_import);
|
||||
if (result.tag === 'err') {
|
||||
this.outputEditor.setValue(result.val);
|
||||
this.outputEditor.clearSelection();
|
||||
this.showOutputEditor();
|
||||
return;
|
||||
}
|
||||
this.generatedFiles = {};
|
||||
const selectedFile = this.files.value;
|
||||
this.files.options.length = 0;
|
||||
for (let i = 0; i < result.val.length; i++) {
|
||||
const name = result.val[i][0];
|
||||
const contents = result.val[i][1];
|
||||
this.files.options[i] = new Option(name, name);
|
||||
this.generatedFiles[name] = contents;
|
||||
}
|
||||
if (selectedFile in this.generatedFiles)
|
||||
this.files.value = selectedFile;
|
||||
|
||||
this.updateSelectedFile();
|
||||
}
|
||||
|
||||
showOutputEditor() {
|
||||
this.outputHtml.style.display = 'none';
|
||||
document.getElementById('output').style.display = 'block';
|
||||
}
|
||||
|
||||
showOutputHtml() {
|
||||
this.outputHtml.style.display = 'block';
|
||||
document.getElementById('output').style.display = 'none';
|
||||
}
|
||||
|
||||
updateSelectedFile() {
|
||||
if (this.files.value.endsWith('.html')) {
|
||||
const html = this.generatedFiles[this.files.value];
|
||||
this.outputHtml.innerHTML = html;
|
||||
this.showOutputHtml();
|
||||
return;
|
||||
}
|
||||
|
||||
this.showOutputEditor();
|
||||
this.outputEditor.setValue(this.generatedFiles[this.files.value]);
|
||||
this.outputEditor.clearSelection();
|
||||
if (this.files.value.endsWith('.d.ts'))
|
||||
this.outputEditor.session.setMode("ace/mode/typescript");
|
||||
else if (this.files.value.endsWith('.js'))
|
||||
this.outputEditor.session.setMode("ace/mode/javascript");
|
||||
else if (this.files.value.endsWith('.rs'))
|
||||
this.outputEditor.session.setMode("ace/mode/rust");
|
||||
else if (this.files.value.endsWith('.c'))
|
||||
this.outputEditor.session.setMode("ace/mode/c_cpp");
|
||||
else if (this.files.value.endsWith('.h'))
|
||||
this.outputEditor.session.setMode("ace/mode/c_cpp");
|
||||
else if (this.files.value.endsWith('.md'))
|
||||
this.outputEditor.session.setMode("ace/mode/markdown");
|
||||
else if (this.files.value.endsWith('.py'))
|
||||
this.outputEditor.session.setMode("ace/mode/python");
|
||||
else
|
||||
this.outputEditor.session.setMode(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
(new Editor()).instantiate()
|
||||
Reference in New Issue
Block a user