holey-bytes/depell/src/index.js

552 lines
16 KiB
JavaScript
Raw Normal View History

2024-10-10 01:35:17 -05:00
/// @ts-check
2024-10-08 17:17:13 -05:00
2024-10-10 01:35:17 -05:00
/** @return {never} */
function never() { throw new Error() }
2024-10-12 06:07:49 -05:00
/**@type{WebAssembly.Instance}*/ let hbcInstance;
/**@type{Promise<WebAssembly.WebAssemblyInstantiatedSource>}*/ let hbcInstaceFuture;
2024-10-12 14:25:37 -05:00
async function getHbcInstance() {
hbcInstaceFuture ??= WebAssembly.instantiateStreaming(fetch("/hbc.wasm"), {});
return hbcInstance ??= (await hbcInstaceFuture).instance;
2024-10-12 06:07:49 -05:00
}
2024-10-12 14:25:37 -05:00
const stack_pointer_offset = 1 << 20;
2024-10-13 15:24:57 -05:00
/** @param {WebAssembly.Instance} instance @param {Post[]} packages @param {number} fuel
2024-10-12 14:25:37 -05:00
* @returns {string} */
function compileCode(instance, packages, fuel = 100) {
2024-10-12 06:07:49 -05:00
let {
INPUT, INPUT_LEN,
LOG_MESSAGES, LOG_MESSAGES_LEN,
2024-10-12 14:25:37 -05:00
memory, compile_and_run,
2024-10-12 06:07:49 -05:00
} = instance.exports;
if (!(true
&& memory instanceof WebAssembly.Memory
2024-10-12 06:07:49 -05:00
&& INPUT instanceof WebAssembly.Global
&& INPUT_LEN instanceof WebAssembly.Global
&& LOG_MESSAGES instanceof WebAssembly.Global
&& LOG_MESSAGES_LEN instanceof WebAssembly.Global
&& typeof compile_and_run === "function"
)) never();
2024-10-12 06:07:49 -05:00
2024-10-13 15:24:57 -05:00
const codeLength = packPosts(packages, new DataView(memory.buffer, INPUT.value));
new DataView(memory.buffer).setUint32(INPUT_LEN.value, codeLength, true);
2024-10-12 06:07:49 -05:00
runWasmFunction(instance, compile_and_run, fuel);
return bufToString(memory, LOG_MESSAGES, LOG_MESSAGES_LEN).trim();
2024-10-12 06:07:49 -05:00
}
/**@type{WebAssembly.Instance}*/ let fmtInstance;
/**@type{Promise<WebAssembly.WebAssemblyInstantiatedSource>}*/ let fmtInstaceFuture;
2024-10-13 13:01:18 -05:00
async function getFmtInstance() {
2024-10-12 14:25:37 -05:00
fmtInstaceFuture ??= WebAssembly.instantiateStreaming(fetch("/hbfmt.wasm"), {});
2024-10-13 13:01:18 -05:00
return fmtInstance ??= (await fmtInstaceFuture).instance;
}
2024-10-08 17:17:13 -05:00
/** @param {WebAssembly.Instance} instance @param {string} code @param {"tok" | "fmt" | "minify"} action
* @returns {string | Uint8Array | undefined} */
2024-10-13 13:01:18 -05:00
function modifyCode(instance, code, action) {
2024-10-10 01:35:17 -05:00
let {
INPUT, INPUT_LEN,
OUTPUT, OUTPUT_LEN,
2024-11-16 13:48:31 -06:00
memory, fmt, tok, minify
2024-10-13 13:01:18 -05:00
} = instance.exports;
2024-10-08 17:17:13 -05:00
2024-11-16 13:48:31 -06:00
let funs = { fmt, tok, minify };
let fun = funs[action];
2024-10-10 01:35:17 -05:00
if (!(true
&& memory instanceof WebAssembly.Memory
2024-10-10 01:35:17 -05:00
&& INPUT instanceof WebAssembly.Global
&& INPUT_LEN instanceof WebAssembly.Global
&& OUTPUT instanceof WebAssembly.Global
&& OUTPUT_LEN instanceof WebAssembly.Global
2024-11-16 13:48:31 -06:00
&& funs.hasOwnProperty(action)
&& typeof fun === "function"
2024-10-10 01:35:17 -05:00
)) never();
if (action !== "fmt") {
INPUT = OUTPUT;
INPUT_LEN = OUTPUT_LEN;
}
let dw = new DataView(memory.buffer);
dw.setUint32(INPUT_LEN.value, code.length, true);
new Uint8Array(memory.buffer, INPUT.value).set(new TextEncoder().encode(code));
2024-10-10 01:35:17 -05:00
2024-11-16 13:48:31 -06:00
if (!runWasmFunction(instance, fun)) {
return undefined;
}
if (action === "tok") {
return bufSlice(memory, OUTPUT, OUTPUT_LEN);
} else {
return bufToString(memory, OUTPUT, OUTPUT_LEN);
}
}
/** @param {WebAssembly.Instance} instance @param {CallableFunction} func @param {any[]} args
* @returns {boolean} */
function runWasmFunction(instance, func, ...args) {
const { PANIC_MESSAGE, PANIC_MESSAGE_LEN, memory, stack_pointer } = instance.exports;
if (!(true
&& memory instanceof WebAssembly.Memory
&& stack_pointer instanceof WebAssembly.Global
)) never();
const ptr = stack_pointer.value;
2024-10-10 01:35:17 -05:00
try {
func(...args);
return true;
} catch (error) {
2024-10-14 06:25:38 -05:00
if (error instanceof WebAssembly.RuntimeError
&& error.message == "unreachable"
&& PANIC_MESSAGE instanceof WebAssembly.Global
&& PANIC_MESSAGE_LEN instanceof WebAssembly.Global) {
console.error(bufToString(memory, PANIC_MESSAGE, PANIC_MESSAGE_LEN), error);
2024-10-10 01:35:17 -05:00
} else {
console.error(error);
2024-10-10 01:35:17 -05:00
}
stack_pointer.value = ptr;
return false;
}
}
/** @typedef {Object} Post
* @property {string} path
* @property {string} code */
2024-10-13 15:24:57 -05:00
/** @param {Post[]} posts @param {DataView} view @returns {number} */
function packPosts(posts, view) {
const enc = new TextEncoder(), buf = new Uint8Array(view.buffer, view.byteOffset);
let len = 0; for (const post of posts) {
view.setUint16(len, post.path.length, true); len += 2;
buf.set(enc.encode(post.path), len); len += post.path.length;
view.setUint16(len, post.code.length, true); len += 2;
buf.set(enc.encode(post.code), len); len += post.code.length;
2024-10-10 01:35:17 -05:00
}
2024-10-13 15:24:57 -05:00
return len;
}
2024-11-16 13:48:31 -06:00
/** @param {WebAssembly.Memory} mem
* @param {WebAssembly.Global} ptr
* @param {WebAssembly.Global} len
* @return {Uint8Array} */
function bufSlice(mem, ptr, len) {
return new Uint8Array(mem.buffer, ptr.value,
new DataView(mem.buffer).getUint32(len.value, true));
2024-11-16 13:48:31 -06:00
}
/** @param {WebAssembly.Memory} mem
* @param {WebAssembly.Global} ptr
* @param {WebAssembly.Global} len
* @return {string} */
function bufToString(mem, ptr, len) {
const res = new TextDecoder()
.decode(new Uint8Array(mem.buffer, ptr.value,
new DataView(mem.buffer).getUint32(len.value, true)));
new DataView(mem.buffer).setUint32(len.value, 0, true);
return res;
2024-10-10 01:35:17 -05:00
}
2024-10-08 17:17:13 -05:00
/** @param {HTMLElement} target */
function wireUp(target) {
execApply(target);
cacheInputs(target);
2024-10-12 14:25:37 -05:00
bindCodeEdit(target);
2024-10-14 15:04:18 -05:00
bindTextareaAutoResize(target);
2024-10-08 17:17:13 -05:00
}
2024-10-13 15:24:57 -05:00
const importRe = /@use\s*\(\s*"(([^"]|\\")+)"\s*\)/g;
2024-10-14 15:04:18 -05:00
2024-11-23 03:31:38 -06:00
/** @param {WebAssembly.Instance} fmt
* @param {string} code
2024-10-14 15:04:18 -05:00
* @param {string[]} roots
* @param {Post[]} buf
* @param {Set<string>} prevRoots
* @returns {void} */
2024-11-23 03:31:38 -06:00
function loadCachedPackages(fmt, code, roots, buf, prevRoots) {
2024-10-14 06:25:38 -05:00
buf[0].code = code;
roots.length = 0;
let changed = false;
2024-10-13 15:24:57 -05:00
for (const match of code.matchAll(importRe)) {
2024-10-14 06:25:38 -05:00
changed ||= !prevRoots.has(match[1]);
roots.push(match[1]);
2024-10-13 15:24:57 -05:00
}
2024-10-14 06:25:38 -05:00
if (!changed) return;
buf.length = 1;
prevRoots.clear();
2024-10-13 15:24:57 -05:00
2024-10-14 06:25:38 -05:00
for (let imp = roots.pop(); imp !== undefined; imp = roots.pop()) {
if (prevRoots.has(imp)) continue; prevRoots.add(imp);
2024-11-23 03:31:38 -06:00
const fmtd = modifyCode(fmt, localStorage.getItem("package-" + imp) ?? never(), "fmt");
if (typeof fmtd != "string") never();
buf.push({ path: imp, code: fmtd });
2024-10-14 06:25:38 -05:00
for (const match of buf[buf.length - 1].code.matchAll(importRe)) {
roots.push(match[1]);
2024-10-13 15:24:57 -05:00
}
}
}
2024-10-14 15:04:18 -05:00
/**@type{Set<string>}*/ const prevRoots = new Set();
/**@typedef {Object} PackageCtx
* @property {AbortController} [cancelation]
* @property {string[]} keyBuf
* @property {Set<string>} prevParams
* @property {HTMLTextAreaElement} [edit] */
/** @param {string} source @param {Set<string>} importDiff @param {HTMLPreElement} errors @param {PackageCtx} ctx */
async function fetchPackages(source, importDiff, errors, ctx) {
importDiff.clear();
for (const match of source.matchAll(importRe)) {
if (localStorage["package-" + match[1]]) continue;
importDiff.add(match[1]);
}
if (importDiff.size !== 0 && (ctx.prevParams.size != importDiff.size
|| [...ctx.prevParams.keys()].every(e => importDiff.has(e)))) {
if (ctx.cancelation) ctx.cancelation.abort();
ctx.prevParams.clear();
ctx.prevParams = new Set([...importDiff]);
ctx.cancelation = new AbortController();
ctx.keyBuf.length = 0;
ctx.keyBuf.push(...importDiff.keys());
errors.textContent = "fetching: " + ctx.keyBuf.join(", ");
await fetch(`/code`, {
method: "POST",
signal: ctx.cancelation.signal,
headers: { "Content-Type": "application/json" },
body: JSON.stringify(ctx.keyBuf),
}).then(async e => {
try {
const json = await e.json();
if (e.status == 200) {
for (const [key, value] of Object.entries(json)) {
localStorage["package-" + key] = value;
}
const missing = ctx.keyBuf.filter(i => json[i] === undefined);
if (missing.length !== 0) {
errors.textContent = "deps not found: " + missing.join(", ");
} else {
ctx.cancelation = undefined;
ctx.edit?.dispatchEvent(new InputEvent("input"));
}
}
} catch (er) {
errors.textContent = "completely failed to fetch ("
+ e.status + "): " + ctx.keyBuf.join(", ");
console.error(e, er);
}
});
}
}
2024-10-14 15:04:18 -05:00
2024-10-12 14:25:37 -05:00
/** @param {HTMLElement} target */
async function bindCodeEdit(target) {
const edit = target.querySelector("#code-edit");
if (!(edit instanceof HTMLTextAreaElement)) return;
2024-10-13 15:24:57 -05:00
2024-10-13 13:01:18 -05:00
const codeSize = target.querySelector("#code-size");
2024-10-12 14:25:37 -05:00
const errors = target.querySelector("#compiler-output");
2024-10-13 15:24:57 -05:00
if (!(true
&& codeSize instanceof HTMLSpanElement
&& errors instanceof HTMLPreElement
)) never();
2024-10-12 14:25:37 -05:00
2024-10-13 15:24:57 -05:00
const MAX_CODE_SIZE = parseInt(codeSize.innerHTML);
if (Number.isNaN(MAX_CODE_SIZE)) never();
2024-10-12 14:25:37 -05:00
2024-10-13 15:24:57 -05:00
const hbc = await getHbcInstance(), fmt = await getFmtInstance();
2024-10-14 06:25:38 -05:00
let importDiff = new Set();
2024-10-13 15:24:57 -05:00
/**@type{Post[]}*/
const packages = [{ path: "local.hb", code: "" }];
const debounce = 100;
2024-10-12 14:25:37 -05:00
let timeout = 0;
const ctx = { keyBuf: [], prevParams: new Set(), edit };
2024-10-13 15:24:57 -05:00
2024-10-14 15:04:18 -05:00
prevRoots.clear();
2024-10-14 06:25:38 -05:00
const onInput = () => {
fetchPackages(edit.value, importDiff, errors, ctx);
2024-10-13 15:24:57 -05:00
if (ctx.cancelation && importDiff.size !== 0) {
2024-10-14 06:25:38 -05:00
return;
}
2024-10-13 15:24:57 -05:00
2024-11-23 03:31:38 -06:00
loadCachedPackages(fmt, edit.value, ctx.keyBuf, packages, prevRoots);
2024-10-13 15:24:57 -05:00
errors.textContent = compileCode(hbc, packages);
2024-10-14 06:25:38 -05:00
const minified_size = modifyCode(fmt, edit.value, "minify")?.length;
if (minified_size) {
codeSize.textContent = (MAX_CODE_SIZE - minified_size) + "";
const perc = Math.min(100, Math.floor(100 * (minified_size / MAX_CODE_SIZE)));
2024-11-23 07:19:47 -06:00
codeSize.style.color = `color-mix(in srgb, light-dark(black, white), var(--error) ${perc}%)`;
2024-10-14 06:25:38 -05:00
}
timeout = 0;
};
edit.addEventListener("input", () => {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(onInput, debounce)
2024-10-12 14:25:37 -05:00
});
edit.dispatchEvent(new InputEvent("input"));
2024-10-12 14:25:37 -05:00
}
2024-11-16 13:48:31 -06:00
/**
* @type {Array<string>}
2024-11-16 13:48:31 -06:00
* to be synched with `enum TokenGroup` in bytecode/src/fmt.rs */
const TOK_CLASSES = [
'Blank',
'Comment',
'Keyword',
'Identifier',
'Directive',
'Number',
'String',
'Op',
'Assign',
'Paren',
'Bracket',
'Colon',
'Comma',
'Dot',
'Ctor',
2024-11-16 13:48:31 -06:00
];
/** @type {{ [key: string]: (el: HTMLElement) => void | Promise<void> }} */
2024-10-13 15:24:57 -05:00
const applyFns = {
2024-11-16 13:48:31 -06:00
timestamp: (el) => {
const timestamp = el.innerText;
const date = new Date(parseInt(timestamp) * 1000);
el.innerText = date.toLocaleString();
},
fmt,
2024-10-13 15:24:57 -05:00
};
2024-11-16 13:48:31 -06:00
/**
* @param {HTMLElement} target */
2024-11-16 13:48:31 -06:00
async function fmt(target) {
const code = target.innerText;
const instance = await getFmtInstance();
const decoder = new TextDecoder('utf-8');
const fmt = modifyCode(instance, code, 'fmt');
if (typeof fmt !== "string") never()
const codeBytes = new TextEncoder().encode(fmt);
2024-11-16 13:48:31 -06:00
const tok = modifyCode(instance, fmt, 'tok');
if (!(tok instanceof Uint8Array)) never();
2024-11-16 13:48:31 -06:00
target.innerHTML = '';
let start = 0;
let kind = tok[0];
for (let ii = 1; ii <= tok.length; ii += 1) {
// split over same tokens and buffer end
if (tok[ii] === kind && ii < tok.length) {
continue;
}
const text = decoder.decode(codeBytes.subarray(start, ii));
const textNode = document.createTextNode(text);;
if (kind === 0) {
target.appendChild(textNode);
} else {
const el = document.createElement('span');
el.classList.add('syn');
el.classList.add(TOK_CLASSES[kind]);
el.appendChild(textNode);
target.appendChild(el);
}
if (ii == tok.length) {
break;
}
start = ii;
kind = tok[ii];
}
}
2024-10-08 17:17:13 -05:00
/** @param {HTMLElement} target */
function execApply(target) {
const proises = [];
2024-10-10 01:35:17 -05:00
for (const elem of target.querySelectorAll('[apply]')) {
if (!(elem instanceof HTMLElement)) continue;
const funcname = elem.getAttribute('apply') ?? never();
const vl = applyFns[funcname](elem);
if (vl instanceof Promise) proises.push(vl);
}
if (target === document.body) {
Promise.all(proises).then(() => document.body.hidden = false);
2024-10-08 17:17:13 -05:00
}
}
/** @param {HTMLElement} target */
function bindTextareaAutoResize(target) {
2024-10-10 01:35:17 -05:00
for (const textarea of target.querySelectorAll("textarea")) {
if (!(textarea instanceof HTMLTextAreaElement)) never();
2024-10-12 06:07:49 -05:00
const taCssMap = window.getComputedStyle(textarea);
const padding = parseInt(taCssMap.getPropertyValue('padding-top') ?? "0")
+ parseInt(taCssMap.getPropertyValue('padding-top') ?? "0");
textarea.style.height = "auto";
textarea.style.height = (textarea.scrollHeight - padding) + "px";
2024-10-08 17:17:13 -05:00
textarea.style.overflowY = "hidden";
textarea.addEventListener("input", function() {
let top = window.scrollY;
2024-10-08 17:17:13 -05:00
textarea.style.height = "auto";
2024-10-12 06:07:49 -05:00
textarea.style.height = (textarea.scrollHeight - padding) + "px";
window.scrollTo({ top });
2024-10-08 17:17:13 -05:00
});
textarea.onkeydown = (ev) => {
if (ev.key === "Tab") {
ev.preventDefault();
2024-10-12 14:25:37 -05:00
document.execCommand('insertText', false, "\t");
2024-10-08 17:17:13 -05:00
}
}
}
}
/** @param {HTMLElement} target */
function cacheInputs(target) {
/**@type {HTMLFormElement}*/ let form;
for (form of target.querySelectorAll('form')) {
const path = form.getAttribute('hx-post') || form.getAttribute('hx-delete');
if (!path) {
console.warn('form does not have a hx-post or hx-delete attribute', form);
continue;
}
2024-10-10 01:35:17 -05:00
for (const input of form.elements) {
if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
if ('password submit button'.includes(input.type)) continue;
const key = path + input.name;
input.value = localStorage.getItem(key) ?? '';
input.addEventListener("input", () => localStorage.setItem(key, input.value));
} else {
console.warn("unhandled form element: ", input);
}
2024-10-08 17:17:13 -05:00
}
}
}
2024-10-10 01:35:17 -05:00
2024-10-17 08:48:22 -05:00
/** @param {string} [path] */
function updateTab(path) {
for (const elem of document.querySelectorAll("button[hx-push-url]")) {
if (elem instanceof HTMLButtonElement)
2024-10-17 08:48:22 -05:00
elem.disabled = elem.getAttribute("hx-push-url") === (path ?? window.location.pathname);
}
}
2024-10-10 01:35:17 -05:00
if (window.location.hostname === 'localhost') {
let id; setInterval(async () => {
let new_id = await fetch('/hot-reload').then(reps => reps.text());
id ??= new_id;
if (id !== new_id) window.location.reload();
}, 300);
2024-10-12 06:07:49 -05:00
(async function test() {
{
const code = "main:=fn():void{return}";
2024-10-13 13:01:18 -05:00
const inst = await getFmtInstance()
const fmtd = modifyCode(inst, code, "fmt") ?? never();
if (typeof fmtd !== "string") never();
2024-10-13 13:01:18 -05:00
const prev = modifyCode(inst, fmtd, "minify") ?? never();
2024-10-12 06:07:49 -05:00
if (code != prev) console.error(code, prev);
}
{
2024-10-12 14:25:37 -05:00
const posts = [{
path: "foo.hb",
code: "main:=fn():int{return 42}",
}];
2024-10-13 15:24:57 -05:00
const res = compileCode(await getHbcInstance(), posts, 1) ?? never();
const expected = "exit code: 42";
2024-10-12 06:07:49 -05:00
if (expected != res) console.error(expected, res);
}
2024-10-10 01:35:17 -05:00
})()
}
2024-10-14 15:04:18 -05:00
document.body.addEventListener('htmx:afterSwap', (ev) => {
2024-10-10 01:35:17 -05:00
if (!(ev.target instanceof HTMLElement)) never();
wireUp(ev.target);
2024-10-17 08:48:22 -05:00
if (ev.target.tagName == "MAIN" || ev.target.tagName == "BODY")
updateTab(ev['detail'].pathInfo.finalRequestPath);
2024-10-10 01:35:17 -05:00
});
2024-10-14 06:25:38 -05:00
getFmtInstance().then(inst => {
document.body.addEventListener('htmx:configRequest', (ev) => {
const details = ev['detail'];
if (details.path === "/post" && details.verb === "post") {
details.parameters['code'] = modifyCode(inst, details.parameters['code'], "minify");
}
});
2024-10-14 15:04:18 -05:00
/** @param {string} query @param {string} target @returns {number} */
function fuzzyCost(query, target) {
let qi = 0, bi = 0, cost = 0, matched = false;
while (qi < query.length) {
if (query.charAt(qi) === target.charAt(bi++)) {
matched = true;
qi++;
} else {
cost++;
}
if (bi === target.length) (bi = 0, qi++);
}
return cost + (matched ? 0 : 100 * target.length);
}
let deps = undefined;
/** @param {HTMLInputElement} input @returns {void} */
function filterCodeDeps(input) {
deps ??= document.getElementById("deps");
if (!(deps instanceof HTMLElement)) never();
if (input.value === "") {
deps.textContent = "results show here...";
return;
}
deps.innerHTML = "";
for (const root of [...prevRoots.keys()]
.sort((a, b) => fuzzyCost(input.value, a) - fuzzyCost(input.value, b))) {
const pane = document.createElement("div");
const code = modifyCode(inst, localStorage["package-" + root], "fmt");
pane.innerHTML = `<div>${root}</div><pre>${code}</pre>`;
deps.appendChild(pane);
}
if (deps.innerHTML === "") {
deps.textContent = "no results";
}
}
Object.assign(window, { filterCodeDeps });
2024-10-14 06:25:38 -05:00
});
/** @param {HTMLElement} target */
function runPost(target) {
while (!target.matches("div[class=preview]")) target = target.parentElement ?? never();
const code = target.querySelector("pre[apply=fmt]");
if (!(code instanceof HTMLPreElement)) never();
const output = target.querySelector("pre[id=compiler-output]");
if (!(output instanceof HTMLPreElement)) never();
2024-11-23 03:31:38 -06:00
Promise.all([getHbcInstance(), getFmtInstance()]).then(async ([hbc, fmt]) => {
const ctx = { keyBuf: [], prevParams: new Set() };
2024-11-23 03:31:38 -06:00
await fetchPackages(code.innerText ?? never(), new Set(), output, ctx);
const posts = [{ path: "this", code: "" }];
2024-11-23 03:31:38 -06:00
loadCachedPackages(fmt, code.innerText ?? never(), ctx.keyBuf, posts, new Set());
output.textContent = compileCode(hbc, posts);
output.hidden = false;
});
let author = encodeURIComponent(target.dataset.author ?? never());
let name = encodeURIComponent(target.dataset.name ?? never());
fetch(`/post/run?author=${author}&name=${name}`, { method: "POST" })
}
Object.assign(window, { runPost });
updateTab();
2024-10-10 01:35:17 -05:00
wireUp(document.body);
2024-10-14 15:04:18 -05:00