PyEditor - process(code) ability (#2053)

* Even better PyEditor offline use case (#2050)

* Even better PyEditor offline use case

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

* PyEditor - process(code) ability

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

pyscript.core/src/plugins/py-editor.js

@@ -1,5 +1,5 @@
 // PyScript py-editor plugin
-import { Hook, XWorker, dedent } from "polyscript/exports";
+import { Hook, XWorker, dedent, defineProperties } from "polyscript/exports";
 import { TYPES, offline_interpreter, stdlib } from "../core.js";
 
 const RUN_BUTTON = `<svg style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>`;
@@ -58,7 +58,7 @@ async function execute({ currentTarget }) {
 
     // wait for the env then set the target div
     // before executing the current code
-    envs.get(env).then((xworker) => {
+    return envs.get(env).then((xworker) => {
         xworker.onerror = ({ error }) => {
             if (hasRunButton) {
                 outDiv.innerHTML += `<span style='color:red'>${
@@ -148,7 +148,7 @@ const init = async (script, type, interpreter) => {
         import(/* webpackIgnore: true */ "../3rd-party/codemirror_commands.js"),
     ]);
 
-    const isSetup = script.hasAttribute("setup");
+    let isSetup = script.hasAttribute("setup");
     const hasConfig = script.hasAttribute("config");
     const env = `${interpreter}-${script.getAttribute("env") || getID(type)}`;
 
@@ -162,7 +162,7 @@ const init = async (script, type, interpreter) => {
 
     configs.set(env, hasConfig);
 
-    const source = script.src
+    let source = script.src
         ? await fetch(script.src).then((b) => b.text())
         : script.textContent;
     const context = {
@@ -179,14 +179,44 @@ const init = async (script, type, interpreter) => {
         },
     };
 
+    let target;
+    defineProperties(script, {
+        target: { get: () => target },
+        process: {
+            /**
+             * Simulate a setup node overriding the source to evaluate.
+             * @param {string} code the Python code to evaluate.
+             * @returns {Promise<...>} fulfill once code has been evaluated.
+             */
+            value(code) {
+                const wasSetup = isSetup;
+                const wasSource = source;
+                isSetup = true;
+                source = code;
+                const restore = () => {
+                    isSetup = wasSetup;
+                    source = wasSource;
+                };
+                return execute
+                    .call(context, { currentTarget: null })
+                    .then(restore, restore);
+            },
+        },
+    });
+
+    const notify = () => {
+        const event = new Event(`${type}-editor`, { bubbles: true });
+        script.dispatchEvent(event);
+    };
+
     if (isSetup) {
-        execute.call(context, { currentTarget: null });
+        await execute.call(context, { currentTarget: null });
+        notify();
         return;
     }
 
     const selector = script.getAttribute("target");
 
-    let target;
     if (selector) {
         target =
             document.getElementById(selector) ||
@@ -236,6 +266,7 @@ const init = async (script, type, interpreter) => {
     });
 
     editor.focus();
+    notify();
 };
 
 // avoid too greedy MutationObserver operations at distance

pyscript.core/test/py-editor/index.html

@@ -4,7 +4,21 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../../dist/core.css">
-  <script type="module" src="../../dist/core.js"></script>
+  <script type="module">
+    import '../../dist/core.js';
+
+    addEventListener('mpy-editor', async ({ target }) => {
+      if (target.hasAttribute('setup')) {
+        await target.process([
+          'from pyscript import document',
+          // adds class="a-1" to the <html> element
+          'document.documentElement.classList.add(f"a-{a}")',
+          'from js import console',
+          'console.log("Hello JS")',
+        ].join('\n'));
+      }
+    });
+  </script>
 </head>
 <body>
   <!-- a setup node with a config for an env -->