Feat: Modify RUN button for demo.

Author: dylan-sutton-chavez

demo/index.html

@@ -24,11 +24,12 @@
         <div class="bg-[#1c1c1c] border-t border-[#2d2d2d] px-3 py-2 flex justify-between items-center">
             <div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
                 <p>editor</p>
-                <button id="run" disabled class="ml-auto flex items-center gap-1 px-2 py-0.5 bg-[#d97757] text-white rounded hover:bg-[#c16644] disabled:opacity-40 disabled:cursor-not-allowed transition">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3">
-                        <polygon points="6 4 20 12 6 20"/>
+                <button id="run" disabled class="ml-auto flex items-center gap-2 px-2.5 py-0.5 bg-[#d97757] text-[#ffffff] rounded-md hover:bg-[#c16644] disabled:opacity-40 disabled:cursor-not-allowed transition">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-2.5">
+                        <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
                     </svg>
-                    <span>run</span>
+                    
+                    <span>Run</span>
                 </button>
             </div>
         </div>

demo/main.js

@@ -1,81 +1,71 @@
 const SZ = 1 << 20;
-const WASM_SOURCES = ['./compiler_lib.wasm', 'https://demo.edgepython.com/compiler_lib.wasm'];
-const OK = 'ml-auto text-[#7daf7a]';
-const ERR = 'ml-auto text-[#d67f6d]';
-const MAX_LINES = 99;
+const DEV = !['demo.edgepython.com'].includes(location.hostname);
+const WASM_SOURCES = DEV
+    ? ['https://demo.edgepython.com/compiler_lib.wasm']
+    : ['./compiler_lib.wasm'];
+const FETCH_OPTS = DEV ? { cache: 'no-store' } : undefined;
 
+const CLS = { ok: 'ml-auto text-[#7daf7a]', err: 'ml-auto text-[#d67f6d]' };
+const MAX_LINES = 99;
 const $ = (id) => document.getElementById(id);
-const ed = $('ed'), ln = $('ln'), btn = $('run'), term = $('term'), status = $('status');
+const [ed, ln, btn, term, statusEl] = ['ed', 'ln', 'run', 'term', 'status'].map($);
 
-let wasm = null;
+let wasm;
 
 const fmt = (ms) => ms < 1000 ? `${ms.toFixed(0)}ms` : `${(ms / 1000).toFixed(2)}s`;
+const setStatus = (text, cls = CLS.ok) => (statusEl.textContent = text, statusEl.className = cls);
+const time = async (fn) => { const t0 = performance.now(); const r = await fn(); return [r, fmt(performance.now() - t0)]; };
 
 const instantiate = async (url) => {
-    const res = await fetch(url);
+    const res = await fetch(url, FETCH_OPTS);
     if (!res.ok) throw new Error(`${url}: HTTP ${res.status}`);
     try {
         return await WebAssembly.instantiateStreaming(res, {});
     } catch {
-        const bytes = await (await fetch(url)).arrayBuffer();
-        return WebAssembly.instantiate(bytes, {});
+        return WebAssembly.instantiate(await (await fetch(url, FETCH_OPTS)).arrayBuffer(), {});
     }
 };
 
 const loadWasm = async () => {
-    status.textContent = 'loading wasm…';
-    const t0 = performance.now();
+    setStatus('loading wasm…', CLS.ok);
     try {
-        const { instance } = await Promise.any(WASM_SOURCES.map(instantiate));
+        const [{ instance }, t] = await time(() => Promise.any(WASM_SOURCES.map(instantiate)));
         wasm = instance.exports;
         btn.disabled = false;
-        status.textContent = `ready (${fmt(performance.now() - t0)})`;
-        status.className = OK;
+        setStatus(`ready (${t}${DEV ? ' · dev' : ''})`);
     } catch (err) {
-        status.textContent = 'load failed';
-        status.className = ERR;
-        term.textContent = `Could not load wasm.\n\n${err.errors.map(e => e.message).join(' | ')}\n\nFor local development:\n  cd demo/ && make dev`;
+        setStatus('load failed', CLS.err);
+        term.textContent = `Could not load wasm.\n\n${err.errors.map(e => e.message).join(' | ')}`;
     }
 };
 
-const runCode = () => {
+const runCode = async () => {
     if (!wasm) return;
     const srcBytes = new TextEncoder().encode(ed.value);
-    if (srcBytes.length > SZ) {
-        term.textContent = `error: source exceeds ${SZ} bytes`;
-        return;
-    }
-    const t0 = performance.now();
-    new Uint8Array(wasm.memory.buffer).set(srcBytes, wasm.src_ptr());
-    const outLen = wasm.run(srcBytes.length);
-    const out = new TextDecoder().decode(new Uint8Array(wasm.memory.buffer, wasm.out_ptr(), outLen));
-    const elapsed = fmt(performance.now() - t0);
+    if (srcBytes.length > SZ) return void (term.textContent = `error: source exceeds ${SZ} bytes`);
+    const [out, t] = await time(() => {
+        new Uint8Array(wasm.memory.buffer).set(srcBytes, wasm.src_ptr());
+        const len = wasm.run(srcBytes.length);
+        return new TextDecoder().decode(new Uint8Array(wasm.memory.buffer, wasm.out_ptr(), len));
+    });
     term.textContent = out;
-    status.textContent = `ready (${elapsed})`;
-    status.className = OK;
+    setStatus(`ready (${t})`);
 };
 
 const sync = () => {
     const lines = ed.value.split('\n');
-    if (lines.length > MAX_LINES) {
-        ed.value = lines.slice(0, MAX_LINES).join('\n');
-    }
+    if (lines.length > MAX_LINES) ed.value = lines.slice(0, MAX_LINES).join('\n');
     const n = Math.min(ed.value.split('\n').length, MAX_LINES);
     ln.textContent = Array.from({ length: n }, (_, i) => String(i + 1).padStart(2, '0')).join('\n');
     ln.scrollTop = ed.scrollTop;
 };
 
 btn.addEventListener('click', runCode);
 ed.addEventListener('keydown', (e) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-        e.preventDefault();
-        runCode();
-    } else if (e.key === 'Enter' && ed.value.split('\n').length >= MAX_LINES) {
-        e.preventDefault();
-    }
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); runCode(); }
+    else if (e.key === 'Enter' && ed.value.split('\n').length >= MAX_LINES) e.preventDefault();
 });
-ed.oninput = sync;
-ed.onscroll = sync;
+ed.oninput = ed.onscroll = sync;
 
 sync();
 loadWasm();