run python in worker

Author: deadlyjack

README.md

@@ -4,7 +4,7 @@ Plugin to run python code in [Acode](https://acode.foxdebug.com) editor for andr
 
 ## Plugin is underdevelopment
 
-Using this plugin you can run python codes but doesn't output error yet, so, it might be difficult to debug your python code.
+Using this plugin you can run python codes but you cannot import other python files yet, so, this feature will be supportted in future updates.
 
 ## WARNING
 

dist/lib/index.html

@@ -0,0 +1,8 @@
+/*!*******************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss ***!
+  \*******************************************************************************************************************************************************************************/
+#acode-plugin-python textarea {
+  background-color: transparent;
+  color: inherit;
+  width: 100%; }
+

dist/main.css

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

dist/main.js

@@ -7,7 +7,9 @@
   "author": "Ajit <me@ajitkumar.dev>",
   "license": "MIT",
   "dependencies": {
-    "html-tag-js": "^1.0.4"
+    "autoprefixer": "^10.4.7",
+    "html-tag-js": "^1.0.4",
+    "sass-loader": "^13.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
@@ -26,4 +28,4 @@
   "scripts": {
     "build": "webpack"
   }
-}
+}

dist/worker.js

@@ -2,11 +2,12 @@
   "id": "acode.plugin.python",
   "name": "Python",
   "main": "dist/main.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "readme": "README.md",
   "icon": "icon.png",
   "type": "pro",
   "files": [
+    "worker.js",
     "lib/distutils.tar",
     "lib/micropip-0.1-py3-none-any.whl",
     "lib/packages.json",

dist/worker.js.LICENSE.txt

@@ -1,15 +1,32 @@
 import tag from 'html-tag-js';
 
 class Python {
+  #worker;
+  #onInitError;
+  #onInitSuccess;
+  #onRunSuccess;
+  #onRunError;
+  #cacheFile;
   name = 'Python';
   baseUrl = '';
   pyodide = null;
   $input = null;
   $page = null;
   $runBtn = null;
-  async init($page) {
+
+  async init($page, cacheFile, cacheFileUrl) {
+    if (window.toast) {
+      window.toast('Python is loading...');
+    }
+    $page.id = 'acode-plugin-python';
     this.$page = $page;
     this.$page.settitle('Python');
+    this.#cacheFile = cacheFile;
+    const onhide = $page.onhide;
+    $page.onhide = () => {
+      this.#cacheFile.writeFile('\0');
+      onhide();
+    }
 
     let main = this.$page.get('.main');
 
@@ -21,18 +38,18 @@ class Python {
     main.style.padding = '10px';
     main.style.overflow = 'auto';
     main.style.boxSizing = 'border-box';
-
-    const $script = tag('script', {
-      src: this.baseUrl + 'lib/pyodide.js',
+    this.#worker = new Worker(this.baseUrl + 'worker.js');
+    console.log('worker line', this.#worker.line);
+    this.#worker.postMessage({
+      action: 'init',
+      baseUrl: this.baseUrl,
+      cacheFileUrl,
     });
+    this.#worker.onmessage = this.#workerOnMessage.bind(this);
 
-
-    document.head.appendChild($script);
-    await new Promise(resolve => $script.onload = resolve);
-    this.pyodide = await loadPyodide({
-      stdout: (msg) => this.print(msg),
-      stderr: (err) => this.print(err, 'error'),
-      stdin: () => this.read(),
+    await new Promise((resolve, error) => {
+      this.#onInitSuccess = resolve;
+      this.#onInitError = error;
     });
 
     this.$runBtn = tag('span', {
@@ -43,25 +60,53 @@ class Python {
       onclick: this.run.bind(this),
     });
 
+    this.$input = tag('textarea', {
+      onkeydown: this.#onkeydown.bind(this),
+      style: {
+        backgroundColor: 'transparent',
+        color: 'inherit',
+        width: '100%',
+        border: 'none',
+      },
+    });
     this.checkRunnable();
     editorManager.on('switch-file', this.checkRunnable.bind(this));
     editorManager.on('rename-file', this.checkRunnable.bind(this));
+    if (window.toast) {
+      window.toast('Python is loaded.');
+    }
   }
-  run() {
+
+  async run() {
+    await this.#cacheFile.writeFile('');
     this.$page.get('.main').innerHTML = '';
+    this.#append(this.$input);
     this.$page.classList.remove('hide');
     this.$page.show();
     setTimeout(async () => {
       const code = editorManager.editor.getValue();
-      const output = await this.pyodide.runPythonAsync(code);
-      this.print(output);
+      this.#worker.postMessage({
+        action: 'run',
+        code,
+      });
+      try {
+        const res = await new Promise((resolve, error) => {
+          this.#onRunSuccess = resolve;
+          this.#onRunError = error;
+        });
+        this.print(res, 'output');
+      } catch (error) {
+        this.print(error, 'error');
+      }
     }, 600);
   }
+
   destroy() {
     if (this.$runBtn) {
       this.$runBtn.onclick = null;
       this.$runBtn.remove();
     }
+    this.#worker.terminate();
     editorManager.off('switch-file', this.checkRunnable.bind(this));
     editorManager.off('rename-file', this.checkRunnable.bind(this));
   }
@@ -75,8 +120,8 @@ class Python {
 
     if (file.name.endsWith('.py')) {
       const $header = tag.get('header');
-      const $editIcon = $header.get('.icon.edit');
-      $header.insertBefore(this.$runBtn, $editIcon);
+      $header.get('.icon.play_arrow')?.remove();
+      $header.insertBefore(this.$runBtn, $header.lastChild);
     }
   }
 
@@ -87,26 +132,73 @@ class Python {
     });
     $output.appendChild(tag('pre', {
       textContent: res,
-      className: type
+      style: {
+        color: type === 'error' ? 'orangered' : 'inherit',
+      }
     }));
+    this.#append($output, this.$input);
+  }
+
+  #append(...$el) {
     const $main = this.$page.get('.main');
     if (!$main) this.$page.append(tag('div', { className: 'main' }));
-    this.$page.get('.main').append($output);
+    this.$page.get('.main').append(...$el);
   }
 
-  read() {
-    return prompt('(Python Input)>>>') || '';
+  async #workerOnMessage(e) {
+    const {
+      action,
+      success,
+      error,
+      text,
+    } = e.data;
+    if (action === 'init') {
+      if (success) {
+        this.#onInitSuccess();
+      } else {
+        this.#onInitError(error);
+      }
+    }
+    if (action === 'run') {
+      if (success) {
+        this.#onRunSuccess();
+      } else {
+        this.#onRunError(error);
+      }
+    }
+    if (action === 'input') {
+      if (text) this.print(text);
+      await this.#cacheFile.writeFile('');
+      this.$input.focus();
+    }
+    if (action === 'stdout') {
+      this.print(text);
+    }
+    if (action === 'stderr') {
+      this.print(text, 'error');
+    }
+  }
+
+  #onkeydown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const value = this.$input.value;
+      this.print(value);
+      this.#cacheFile.writeFile(value);
+      e.target.value = '';
+    }
   }
 }
 
+
 console.log('Python plugin');
 
 if (window.acode) {
   const python = new Python();
-  acode.setPluginInit('acode.plugin.python', (baseUrl, $page) => {
+  acode.setPluginInit('acode.plugin.python', (baseUrl, $page, { cacheFileUrl, cacheFile }) => {
     if (!baseUrl.endsWith('/')) baseUrl += '/';
     python.baseUrl = baseUrl;
-    python.init($page);
+    python.init($page, cacheFile, cacheFileUrl);
     console.log('Python plugin initialized');
   });
   acode.setPluginUnmount('acode.plugin.python', () => {

package.json

@@ -0,0 +1,113 @@
+async function loadPyodideAndPackages(baseUrl = '', packages) {
+  importScripts(`${baseUrl}/lib/pyodide.js`);
+  self.pyodide = await loadPyodide({
+    stdout: (msg) => { stdout(msg) },
+    stderr: (msg) => { stdout(msg) },
+    stdin: () => { return stdin() },
+  });
+  if (Array.isArray(packages)) {
+    await self.pyodide.installPackages(packages);
+  }
+}
+
+const actions = {
+  async init(data) {
+    const { packages, baseUrl, cacheFileUrl } = data;
+    self.cacheFileUrl = cacheFileUrl;
+    try {
+      await loadPyodideAndPackages(baseUrl, packages);
+
+      // override python input
+      await self.pyodide.runPython(`import sys
+def input(prompt=''):
+    print(prompt)
+    return sys.stdin.readline()
+
+__builtins__.input = input
+`);
+
+      self.postMessage({
+        action: 'init',
+        success: true,
+      });
+    } catch (error) {
+      self.postMessage({
+        action: 'init',
+        success: false,
+        error,
+      });
+    }
+  },
+  async run(data) {
+    const { code } = data;
+    try {
+      await self.pyodide.loadPackagesFromImports(code);
+      const output = await self.pyodide.runPythonAsync(code);
+      self.postMessage({
+        action: 'run',
+        success: true,
+        output,
+      });
+    } catch (error) {
+      self.postMessage({
+        action: 'run',
+        success: false,
+        error,
+      });
+    }
+  },
+  input(data) {
+    const { line } = data;
+    self.line = line;
+  },
+}
+
+self.onmessage = async function (e) {
+  const {
+    action
+  } = e.data;
+
+  if (actions[action]) {
+    await actions[action](e.data);
+  }
+};
+
+self.line = '';
+
+function stdout(msg) {
+  self.postMessage({
+    action: 'stdout',
+    text: msg,
+  });
+}
+
+function stderr(msg) {
+  self.postMessage({
+    action: 'stderr',
+    text: msg,
+  });
+}
+
+function stdin(str = '') {
+  self.postMessage({
+    action: 'input',
+    text: str,
+  });
+  let line = '';
+  while (!line) {
+    line = read();
+  }
+  return line.replace('\0', '');
+}
+
+function read() {
+  const xhr = new XMLHttpRequest();
+  xhr.timeout = 1000;
+  xhr.open('GET', self.cacheFileUrl, false);
+  try {
+    xhr.send();
+    return xhr.responseText;
+  } catch (err) {
+    throw err instanceof Error ? err : new Error(err);
+  }
+}