zapcode/examples/wasm/basic/index.html at master · TheUncharted/zapcode · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zapcode WASM Example</title>
    <style>
        body { font-family: monospace; max-width: 700px; margin: 2rem auto; }
        textarea { width: 100%; height: 120px; font-family: monospace; font-size: 14px; }
        button { margin: 0.5rem 0; padding: 0.5rem 1rem; cursor: pointer; }
        pre { background: #f4f4f4; padding: 1rem; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>Zapcode — WASM Playground</h1>
    <p>Execute TypeScript in the browser, sandboxed via Zapcode.</p>

    <textarea id="code">// Try some TypeScript!
const items = [
    { name: "Widget", price: 25.99, qty: 3 },
    { name: "Gadget", price: 49.99, qty: 1 },
    { name: "Doohickey", price: 9.99, qty: 10 },
];

const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);
const cheapest = items.reduce((min, item) =>
    item.price < min.price ? item : min
);

{ total, cheapest: cheapest.name }</textarea>

    <br>
    <button id="run">Run</button>
    <pre id="output">Click "Run" to execute.</pre>

    <script type="module">
        import init, { Zapcode } from './zapcode-wasm/zapcode_wasm.js';

        await init();

        document.getElementById('run').addEventListener('click', () => {
            const code = document.getElementById('code').value;
            const output = document.getElementById('output');

            try {
                const start = performance.now();
                const b = new Zapcode(code);
                const result = b.run();
                const elapsed = (performance.now() - start).toFixed(2);

                output.textContent = JSON.stringify(result.output, null, 2)
                    + `\n\n(executed in ${elapsed}ms)`;
            } catch (e) {
                output.textContent = `Error: ${e.message}`;
            }
        });
    </script>
</body>
</html>