index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MicroPython REPL Demo</title>
  <link rel="stylesheet" href="./css/index.css">
  <script type="module">
    import dedent from 'https://cdn.jsdelivr.net/npm/codedent/es.js';
    import init from './micro-repl.js';

    const show = textContent => {
      output.append(
        Object.assign(
          document.createElement('code'),
          { textContent }
        )
      );
    };

    connect.onclick = () => {
      connect.disabled = true;
      output.replaceChildren();
      init({
        onceClosed(error) {
          connect.disabled = false;
          if (error) console.warn(error);
        }
      }).then(async board => {
        globalThis.board = board;

        // there is an active state
        console.info('Board active', board.active);

        // once initialized, the REPL welcome message can be
        // fully ignored or showed
        show(await board.output);

        // this works for any Python code
        await board.write(dedent(`
            import sys

            print(sys.version)
            print(sys.implementation._machine)
        `));

        const lines = (await board.output).split(/[\r\n]+/);
        show(lines.slice(-3).join('\n'));

        // each `write` wait for a result
        await board.write('help()');
        // where the output can be read
        show(await board.output);

        await board.write('print("bye bye")');

        // we can close it without errors
        await board.close();

        // once closed it throws on write and read
        // but the result would be still there
        console.info('Board active', board.active);

        // the final line/result remains though
        const result = await board.result;
        if (/^\S+?Error: /.test(result))
          console.warn(result);
        else
          console.info('last result', result);
      });
    };
  </script>
</head>
<body>
  <button id="connect">connect</button>
  <pre id="output"></pre>
</body>
</html>