index.html

<html>

<head>
  <title>JSPython dev</title>
  <script src="./node_modules/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  <script src="./dist/jspython-interpreter.js"></script>
  <script src="./dist/assets/mode-jspython.js"></script>
  <style>
    .container {
      height: 100%;
      min-width: 200px;
      width: 90%;
      margin: 10px auto;
    }

    #editor,
    #resultEditor {
      height: 40%;
      display: block;
      min-height: 20%;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h4>JSPython development console</h4>
    <div id="editor">
a = 33
b = 33
if b > a:
  return print("b is greater than a")
elif a == b:
  return print("a and b are equal")
    </div>

    <button onclick="tokenize()">Tokenize</button>
    <button onclick="parse()">Parse</button>
    <button onclick="runInterpreter()">Run</button>
    <div id="resultEditor"> </div>

    <!-- <textarea id="result"></textarea> -->
  </div>
  <script>

    const editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/python");

    const resultEditor = ace.edit("resultEditor");
    resultEditor.setTheme("ace/theme/monokai");
    resultEditor.session.setMode("ace/mode/json");

    const interpreter = jspython.jsPython();
    console.log({ interpreter });

    function tokenize() {
      tokenizer = (s) => console.log(`tokens => ${s}`, interpreter().tokenize(s))

      const scripts = editor.getValue();
      try {
        const result = interpreter
          .tokenize(scripts)
          .map((t, i) => `${t[1]} : '${t[0]}'`)
          .join('\n');

        const data = typeof result === 'object' ? JSON.stringify(result, null, '\t') : result;
        resultEditor.getSession().setValue(data)
      } catch (err) {
        console.error(err);
        resultEditor.getSession().setValue(String(err.message))
      }
    }

    function parse() {

      const scripts = editor.getValue();
      try {
        const result = interpreter
          .parse(scripts);

        const data = typeof result === 'object' ? JSON.stringify(result, null, '\t') : result;
        resultEditor.getSession().setValue(data)
      } catch (err) {
        console.error(err);
        resultEditor.getSession().setValue(String(err.message))
      }
    }

    async function runInterpreter() {

      const scripts = editor.getValue();
      try {

        interpreter.registerModuleLoader((path => {
          return Promise.resolve(`
          {"x": "test22", "n": 55}
          `);
        }));

        interpreter.registerPackagesLoader(path =>
          (
            path === 'service' ? {
              add: (x, y) => x + y,
              remove: (x, y) => x - y,
              times: (x, y) => x * y,
            } 
            : null
          )
        );
        const scope = {
          Math,
          errorFunc: p => {

            if (p === 6) {
              throw new Error(`Don't like '6'`);
            }

            console.log('allGood');
          },

          sqrPromise: (fn) => new Promise((s, f) => setTimeout(() => s(fn * fn), 5)),
          print: (...args) => { console.log(...args); return args.length > 0 ? args[0] : null; },
          x: 10,
          o: {
            f1: (x, y) => { return { x, y }; },
            v1: 55,
            sub1: {
              subValue: 88
            }
          }
        };
        const result = await interpreter
          .evaluate(scripts, scope, undefined, 'index1.jspy');

        // const result = jsPython()
        //   .eval(scripts, scope);

        // const result = await jsPython()
        //   .evalAsync(scripts, scope);

        const data = typeof result === 'object' ? JSON.stringify(result, null, '\t') : String(result);

        resultEditor.getSession().setValue(data)
      } catch (err) {
        console.log('error', err);
        resultEditor.getSession().setValue(String(err.message))
      }
    }

  </script>
</body>

</html>