PyAr · NicolasSandoval · Jul 11, 2024 · Jun 23, 2024 · Jun 24, 2024 · Jun 24, 2024
diff --git a/myenv/lib64 b/myenv/lib64
@@ -0,0 +1 @@
+lib
diff --git a/myenv/pyvenv.cfg b/myenv/pyvenv.cfg
@@ -0,0 +1,3 @@
+home = /usr/bin
+include-system-site-packages = false
+version = 3.10.12
diff --git a/package-lock.json b/package-lock.json
diff --git a/runestone/activecode/activecode.py b/runestone/activecode/activecode.py
@@ -163,6 +163,7 @@ class ActiveCode(RunestoneIdDirective):
        :dburl: url to load database for sql mode
        :showlastsql: -- Only show the last sql result in output
        :python3_interpreter: brython (uses brython as interpreter of python3)
+       :python3_interpreter: pyscript (uses pyscript as interpreter of python3)
        :output_height: 200px
 
         If this is a homework problem instead of an example in the text

diff --git a/runestone/activecode/js/acfactory.js b/runestone/activecode/js/acfactory.js
@@ -3,6 +3,7 @@ import JSActiveCode from "./activecode_js.js";
 import HTMLActiveCode from "./activecode_html.js";
 import SQLActiveCode from "./activecode_sql.js";
 import BrythonActiveCode from "./activecode_brython.js";
+import PyScriptActiveCode from "./activecode_pyscript.js";
 import LiveCode from "./livecode.js";
 import {
     TimedActiveCode,
@@ -11,6 +12,7 @@ import {
     TimedHTMLActiveCode,
     TimedSQLActiveCode,
     TimedBrythonActiveCode,
+    TimedPyScriptActiveCode,
 } from "./timed_activecode";
 import "../../common/js/jquery.highlight.js";
 
@@ -39,6 +41,9 @@ export default class ACFactory {
             if(python3_interpreter==="brython"){
                 return new TimedBrythonActiveCode(opts);   
             }
+            if(python3_interpreter==="pyscript"){
+                return new TimedPyScriptActiveCode(opts);
+            }
             if (lang === "python") {
                 return new TimedActiveCode(opts);
             } else if (
@@ -58,7 +63,10 @@ export default class ACFactory {
                 return new TimedActiveCode(opts);
             }
         } else {
-            if ((lang ==="python3") && (python3_interpreter === "brython")){
+            if((lang ==="python3") && (python3_interpreter === "pyscript")){
+                return new PyScriptActiveCode(opts);
+            }
+            else if ((lang ==="python3") && (python3_interpreter === "brython")){
                 return new BrythonActiveCode(opts);   
             }
             else if (lang === "javascript") {

diff --git a/runestone/activecode/js/activecode_pyscript.js b/runestone/activecode/js/activecode_pyscript.js
@@ -0,0 +1,115 @@
+import { ActiveCode } from "./activecode.js";
+
+export default class PyScriptActiveCode extends ActiveCode {
+    constructor(opts) {
+        super(opts);
+        opts.alignVertical = true;
+        this.python3_interpreter = $(orig).data("python3_interpreter");
+        $(this.runButton).text("Render");
+        this.editor.setValue(this.code);
+    }
+
+    async runProg() {
+        var prog = await this.buildProg(true);
+        let saveCode = "True";
+        this.saveCode = await this.manage_scrubber(saveCode);
+        $(this.output).text("");
+        if (!this.alignVertical) {
+            $(this.codeDiv).switchClass("col-md-12", "col-md-6", {
+                duration: 500,
+                queue: false,
+            });
+        }
+        $(this.outDiv).show({ duration: 700, queue: false });
+        prog = `
+        <html>
+        <head>
+            <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+            <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+            <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
+            <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
+            <style>
+                pre {
+                    position: absolute; font-size: 13px; width: 94%; padding: 9.5px; line-height: 1.42857143; border: 1px ; border-radius: 4px;
+                }
+                code{
+                    border: 1px solid #ccc; border-radius: 4px;
+                }
+            </style>
+        </head>
+        <body>
+            <py-config>
+                terminal = false
+                packages = [ "pandas", "numpy", "matplotlib"]
+            </py-config>
+            <pre id="consolePre">
+                <code id="consoleCode"></code>
+            </pre>
+            <py-script>
+import sys
+from js import document
+logger = document.getElementById('consoleCode')
+preElem = document.getElementById('consolePre')
+
+class NewOut:
+    def write(self, data):
+        logger.innerHTML += str(data)
+sys.stderr = sys.stdout = NewOut()
+
+def my_exec(code):
+    try:
+        exec(code)
+        preElem.style.visibility = "visible"
+        preElem.style.bottom = "5px"
+        logger.classList.add("plaintext")
+    except Exception as err:
+        error_class = err.__class__.__name__
+        detail = err.args[0]
+        line_number = ""  # PyScript does not currently expose line numbers
+        result = f"'{error_class}': {detail} {line_number}"
+        print(result)
+        # Styling the pre element for error
+        preElem.style.visibility = "visible"
+        preElem.style.top = "5px"
+        preElem.style.backgroundColor = "#f2dede"
+        preElem.style.border = "1px solid #ebccd1"
+        logger.classList.add("python")
+
+# usage
+my_exec("""${prog}
+""")
+            </py-script>
+            <script>
+                hljs.highlightAll();
+            </script>
+        </body>
+        </html>
+        `;
+        this.output.srcdoc = prog;
+    }
+
+    createOutput() {
+        this.alignVertical = true;
+        var outDiv = document.createElement("div");
+        $(outDiv).addClass("ac_output");
+        if (this.alignVertical) {
+            $(outDiv).addClass("col-md-12");
+        } else {
+            $(outDiv).addClass("col-md-5");
+        }
+        this.outDiv = outDiv;
+        this.output = document.createElement("iframe");
+        $(this.output).css("background-color", "white");
+        $(this.output).css("position", "relative");
+        $(this.output).css("height", "400px");
+        $(this.output).css("width", "100%");
+        outDiv.appendChild(this.output);
+        this.outerDiv.appendChild(outDiv);
+        var clearDiv = document.createElement("div");
+        $(clearDiv).css("clear", "both"); // needed to make parent div resize properly
+        this.outerDiv.appendChild(clearDiv);
+    }
+    enableSaveLoad() {
+        $(this.runButton).text($.i18n("msg_activecode_render"));
+    }
+}
diff --git a/runestone/activecode/js/timed_activecode.js b/runestone/activecode/js/timed_activecode.js
@@ -9,6 +9,7 @@ import JSActiveCode from "./activecode_js";
 import HTMLActiveCode from "./activecode_html";
 import SQLActiveCode from "./activecode_sql";
 import BrythonActiveCode from "./activecode_brython.js";
+import PyScriptActiveCode from "./activecode_pyscript.js";
 
 var TimedActiveCodeMixin = {
     timedInit: async function (opts) {
@@ -154,3 +155,11 @@ export class TimedBrythonActiveCode extends BrythonActiveCode {
     }
 }
 Object.assign(TimedBrythonActiveCode.prototype, TimedActiveCodeMixin);
+
+export class TimedPyScriptActiveCode extends PyScriptActiveCode {
+    constructor(opts) {
+        super(opts);
+        this.timedInit(opts);
+    }
+}
+Object.assign(TimedPyScriptActiveCode.prototype, TimedActiveCodeMixin);
diff --git a/runestone/activecode/test/_sources/index.rst b/runestone/activecode/test/_sources/index.rst
@@ -2831,7 +2831,7 @@ Trying Brython as Python 3 interpreter
 --------------------------------------
 .. activecode:: test_activecode_python3
    :language: python3
-   :python3_interpreter: brython 
+   :python3_interpreter: brython
 
    print("You can see this print inside the iframe console")
    from browser import document, alert, html
@@ -2842,3 +2842,12 @@ Trying Brython as Python 3 interpreter
    document <= html.BUTTON("My button", id="button_alert")
    document["button_alert"].bind("click", hello)
 
+
+Trying PyScript as Python 3 interpreter
+--------------------------------------
+.. activecode:: test_activecode_pyscript
+   :language: python3
+   :python3_interpreter: pyscript
+
+   print("You can see this print inside the iframe console")
+