<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>RustPython Demo</title>
    </head>
    <body>
        <h1>RustPython Demo</h1>
        <p>
            RustPython is a Python interpreter written in Rust. This demo is
            compiled from Rust to WebAssembly so it runs in the browser.<br>
            Input your Python code below and click <kbd>Run</kbd>
            (or <kbd>Ctrl+Enter</kbd>), or you can open up your
            browser's devtools and play with <code>rp.pyEval('1 + 1')</code>
        </p>
        <div id="code-wrapper">
            <select id="snippets">
                <% for (const name of snippets) { %>
                    <option
                        <% if (name == defaultSnippetName) { %> selected <% } %>
                    ><%= name %></option>
                <% } %>
            </select>
        </div>
        <button id="run-btn">Run &#9655;</button>
        <div id="error"></div>
        <h3>Standard Output</h3>
        <textarea id="console" readonly>Loading...</textarea>

        <h3>Interactive shell</h3>
        <div id="terminal"></div>

        <p>
            Here's some info regarding the <code>rp.pyEval()</code>,
            <code>rp.pyExec()</code>, and <code>rp.pyExecSingle()</code>
            functions
        </p>
        <ul>
            <li>
                You can return variables from python and get them returned to
                JS, with the only requirement being that they're serializable
                with <code>json.dumps</code>.
            </li>
            <li>
                You can pass an options object as the second argument to the
                function:
                <ul>
                    <li>
                        <code>stdout</code>: either a string with a css selector
                        to a textarea element or a function that receives a
                        string when the <code>print</code> function is called in
                        python. The default value is <code>console.log</code>.
                    </li>
                    <li>
                        <code>vars</code>: an object that will be available in
                        python as the variable <code>js_vars</code>. Only
                        functions and values that can be serialized with
                        <code>JSON.stringify()</code> will go through.
                    </li>
                </ul>
            </li>
            <li>
                JS functions that get passed to python will receive positional
                args as positional args and kwargs as the
                <code>this</code> argument
            </li>
        </ul>

        <p>
            Limited Interaction with browser is possible from Python by using
            the <code>browser</code> module. Browser APIs such as
            <code>alert()</code>, <code>confirm()</code>, <code>prompt()</code>
            and <code>fetch()</code> are included in the module.
        </p>

        <a href="https://github.com/RustPython/RustPython">
            <img
                style="position: absolute; top: 0; right: 0; border: 0;"
                src="https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png"
                alt="Fork me on GitHub"
            />
        </a>
    </body>
</html>
