npm/index.html

<!doctype html><html>
<head><meta charset="utf-8"><title>Emception</title><meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    padding: 20px;
    margin: 0;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  h1 {
    color: #333;
  }

  a {
    color: #007bff;
  }

  #compile {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  #compile:hover {
    background-color: #0056b3;
  }

  textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    font-family: monospace;
  }

  #source, #stdout, #expected {
    width: 100%;
  }

  #source {
    height: 300px;
  }

  #stdout, #expected {
    background-color: #000;
    color: #0f0;
    height: 150px;
  }

  .input-group {
    display: flex;
    width: 100%;
  }

  #stdin, #expected {
    flex: 1;
    height: 150px;
  }

  .resizeNone {
    resize: none;
  }
</style>


<div class="container">

  <h1>Emception</h1>
  <p>Emception is a web-based C++ compiler and runtime environment.</p>
  <p>It uses <a href="https://emscripten.org/">Emscripten</a> to compile C++ code to WebAssembly and runs it in a sandboxed environment.</p>
  <p>It is a work in progress and not ready for production use.</p>
  <p>Try it out by entering some C++ code below and clicking the "Compile" button.</p>
  <button id="compile">Compile</button>
  <textarea id="source" >
  #include<iostream>
  #include<string>
  using namespace std;
  int main(){
    string name;
    cin >> name;
    cout << "Hello " << name << "!" << endl;
    return 0;
  }
  </textarea>
  <textarea id="stdout" class="resizeNone" disabled> </textarea>
  <div class="input-group">
    <textarea id="stdin">username</textarea>
    <textarea id="expected" disabled >Hello username!</textarea>
  </div>
</div>

<script>
    // intercept stdin
    window.prompt = function() {
      return document.getElementById("stdin").value;
    }
    
    var stdoutElement = document.getElementById("stdout");
    var stdinElement = document.getElementById("stdin");
    var expectedElement = document.getElementById("expected");
    var sourceElement = document.getElementById("source");

    // prejs
    // todo: improve and make it not search for the element every time
    const prejs = `
var Module = {
    print: (function() {
        var element = stdoutElement;
        if (element) element.value = ''; // clear browser cache
        return function(text) {
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            // todo: do replacements needed
            console.log(text);
            if (element) {
                element.value += text + "";
                element.scrollTop = element.scrollHeight; // focus on bottom
            }
        };
    })(),
    printErr: function(text) {
        if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
        if (0) { // XXX disabled for safety typeof dump == 'function') {
            dump(text + '\\n'); // fast, straight to the real console
        } else {
            console.error(text);
        }

        var element = stdoutElement;
        if (element) {
            element.value += text + "";
            element.scrollTop = element.scrollHeight; // focus on bottom
        }
    }
};
    `;

    const onprocessstart = (argv) => {
        console.log("onprocessstart", argv);
        // stdoutElement.value += '# ' + argv.join(' ') + "\n";
    };
    const onprocessend = () => {
        console.log("onprocessend");
        // document.getElementById("stdout").value += "onprocessend" + "\n";
    };
    const onstdout = (str) => {
        console.log(str);
        stdoutElement.value += str + "\n";
        stdoutElement.scrollTop = stdoutElement.scrollHeight; // focus on bottom
    };
    const onstderr = (str) =>{
        console.error(str);
        stdoutElement.value += str + "\n";
        // stdoutElement.scrollTop = stdoutElement.scrollHeight; // focus on bottom
    };

    const EmceptionState = {
        MainNotLoaded:0,
        MainLoading:1,
        MainLoaded:2,
        EmceptionLoading:3,
        EmceptionLoaded:4,
    }
    var loadingState = EmceptionState.MainNotLoaded;
    var emception;

    // todo: bug: this state machine is not running for the second time
    async function preCompile(){
        switch (loadingState) {
            case EmceptionState.MainNotLoaded:
                loadingState = EmceptionState.MainLoading;
                var script = document.createElement('script');
                script.src = 'main.js';
                script.onload = ()=>{
                    onstdout("main.js loaded");
                    loadingState = EmceptionState.MainLoaded;
                    preCompile();
                }
                document.head.appendChild(script);
                return false;
            case EmceptionState.MainLoading:
                onstdout("Main script is still loading. Please wait.");
                return false
            case EmceptionState.MainLoaded:
                onstdout("initializing Emception...");
                loadingState = EmceptionState.EmceptionLoading;
                emception = new Emception.default();
                emception.onstdout = onstdout;
                emception.onstderr = onstderr;
                emception.onprocessstart = onprocessstart;
                emception.onprocessend = onprocessend;
                await emception.init();
                loadingState = EmceptionState.EmceptionLoaded;
                onstdout("Emception initialized");
                preCompile();
                return false;
            case EmceptionState.EmceptionLoading:
                onstdout("Emception is still loading. Please wait.");
                return false;
            case EmceptionState.EmceptionLoaded:
                await compile();
                return true;
        }
    }

    window.onerror = function(event) {
        // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
        // Module.setStatus('Exception thrown, see JavaScript console');
        //Module.setStatus = function(text) {
        if (text) console.error('[post-exception status] ' + text);
        //};
    };

    async function compile(){
        stdoutElement.value = "";
        const sourceValue = sourceElement.value;

        console.log("Compiling C++ code...\n");
        try {
            await emception.fileSystem.writeFile("/working/main.cpp", sourceValue);
            await emception.fileSystem.writeFile("/working/pre.js", prejs);
            // todo: add prejs to emscripten command --pre-js pre.js
            const cmd = `em++ -O2 -fexceptions --pre-js pre.js -sEXIT_RUNTIME=1 -sSINGLE_FILE=1 -sUSE_CLOSURE_COMPILER=0 main.cpp -o main.js`;
            onprocessstart(`/emscripten/${cmd}`.split(/\s+/g));
            onstdout(`# ${cmd}`);
            // wait 100ms
            await new Promise(resolve => setTimeout(resolve, 100));
            const result = await emception.run(cmd);
            if (result.returncode == 0) {
                const content = new TextDecoder().decode(await emception.fileSystem.readFile("/working/main.js"));
                onstdout(`# node ./main.js`);
                await new Promise(resolve => setTimeout(resolve, 100));
                eval(content);
                //wait 100ms
                await new Promise(resolve => setTimeout(resolve, 100));
                // compare stdout with expected
                const stdout = stdoutElement.value;
                const expected = expectedElement.value;

                console.log(`stdout: ${stdout}`);
                console.log(`expected: ${expected}`);
                if (stdout.replace(/\s/g, '') === expected.replace(/\s/g, ''))
                    console.log(`Test Passed`);
                else
                    console.error(`Test failed`);
            } else {
                console.log(`Emception compilation failed`);
            }
        } catch (err) {
            console.error(err);
        } finally {
            // add your finally code here
        }
    }

    document.getElementById("compile").addEventListener("click", async function() {
        await preCompile();
    });
</script>
</body></html>