pyscript · WebReflection · Feb 5, 2025 · Dec 12, 2024 · Dec 12, 2024 · Feb 4, 2025
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@pyscript/core",
-    "version": "0.6.22",
+    "version": "0.6.23",
     "type": "module",
     "description": "PyScript",
     "module": "./index.js",
@@ -63,37 +63,37 @@
         "add-promise-listener": "^0.1.3",
         "basic-devtools": "^0.1.6",
         "polyscript": "^0.16.10",
-        "sabayon": "^0.6.1",
+        "sabayon": "^0.6.6",
         "sticky-module": "^0.1.1",
         "to-json-callback": "^0.1.1",
         "type-checked-collections": "^0.1.7"
     },
     "devDependencies": {
-        "@codemirror/commands": "^6.7.1",
-        "@codemirror/lang-python": "^6.1.6",
-        "@codemirror/language": "^6.10.6",
-        "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.35.0",
+        "@codemirror/commands": "^6.8.0",
+        "@codemirror/lang-python": "^6.1.7",
+        "@codemirror/language": "^6.10.8",
+        "@codemirror/state": "^6.5.2",
+        "@codemirror/view": "^6.36.2",
         "@playwright/test": "1.45.3",
-        "@rollup/plugin-commonjs": "^28.0.1",
-        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-commonjs": "^28.0.2",
+        "@rollup/plugin-node-resolve": "^16.0.0",
         "@rollup/plugin-terser": "^0.4.4",
         "@webreflection/toml-j0.4": "^1.1.3",
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/addon-web-links": "^0.11.0",
         "@xterm/xterm": "^5.5.0",
-        "bun": "^1.1.38",
-        "chokidar": "^4.0.1",
+        "bun": "^1.2.2",
+        "chokidar": "^4.0.3",
         "codedent": "^0.1.2",
         "codemirror": "^6.0.1",
-        "eslint": "^9.16.0",
+        "eslint": "^9.19.0",
         "flatted": "^3.3.2",
-        "rollup": "^4.28.1",
+        "rollup": "^4.34.2",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-string": "^3.0.0",
         "static-handler": "^0.5.3",
         "string-width": "^7.2.0",
-        "typescript": "^5.7.2",
+        "typescript": "^5.7.3",
         "xterm-readline": "^1.1.2"
     },
     "repository": {

diff --git a/core/src/config.js b/core/src/config.js
@@ -25,7 +25,7 @@ const badURL = (url, expected = "") => {
  * @param {string?} type the optional type to enforce
  * @returns {{json: boolean, toml: boolean, text: string}}
  */
-const configDetails = async (config, type) => {
+export const configDetails = async (config, type) => {
     let text = config?.trim();
     // we only support an object as root config
     let url = "",

diff --git a/core/src/plugins.js b/core/src/plugins.js
@@ -25,6 +25,11 @@ export default {
             /* webpackIgnore: true */
             "./plugins/py-editor.js"
         ),
+    ["py-game"]: () =>
+        import(
+            /* webpackIgnore: true */
+            "./plugins/py-game.js"
+        ),
     ["py-terminal"]: () =>
         import(
             /* webpackIgnore: true */

diff --git a/core/src/plugins/py-game.js b/core/src/plugins/py-game.js
@@ -0,0 +1,68 @@
+import { dedent, define } from "polyscript/exports";
+
+import { stdlib } from "../core.js";
+import { configDetails } from "../config.js";
+import { getText } from "../fetch.js";
+
+let toBeWarned = true;
+
+const hooks = {
+    main: {
+        onReady: async (wrap, script) => {
+            if (toBeWarned) {
+                toBeWarned = false;
+                console.warn("⚠️ EXPERIMENTAL `py-game` FEATURE");
+            }
+            if (script.hasAttribute("config")) {
+                const value = script.getAttribute("config");
+                const { json, toml, text } = configDetails(value);
+                let config = {};
+                if (json) config = JSON.parse(text);
+                else if (toml) {
+                    const { parse } = await import(
+                        /* webpackIgnore: true */ "../3rd-party/toml.js"
+                    );
+                    config = parse(text);
+                }
+                if (config.packages) {
+                    const micropip = wrap.interpreter.pyimport("micropip");
+                    await micropip.install(config.packages, {
+                        keep_going: true,
+                    });
+                    micropip.destroy();
+                }
+            }
+
+            wrap.interpreter.registerJsModule("_pyscript", {
+                PyWorker() {
+                    throw new Error(
+                        "Unable to use PyWorker in py-game scripts",
+                    );
+                },
+                js_import: (...urls) =>
+                    Promise.all(urls.map((url) => import(url))),
+                get target() {
+                    return script.id;
+                },
+            });
+
+            await wrap.interpreter.runPythonAsync(stdlib);
+
+            let code = dedent(script.textContent);
+            if (script.src) code = await fetch(script.src).then(getText);
+
+            const target = script.getAttribute("target") || "canvas";
+            const canvas = document.getElementById(target);
+            wrap.interpreter.canvas.setCanvas2D(canvas);
+            await wrap.interpreter.runPythonAsync(code);
+        },
+    },
+};
+
+define("py-game", {
+    config: { packages: ["pygame-ce"] },
+    configURL: new URL("./config.txt", location.href).href,
+    interpreter: "pyodide",
+    env: "py-game",
+    hooks,
+});
diff --git a/core/tests/index.html b/core/tests/index.html
@@ -14,5 +14,5 @@
             a:hover { opacity: 1; }
         </style>
     </head>
-    <body><ul><li><strong><span>javascript</span></strong><ul><li><a href="./javascript/async-listener.html">async-listener<small>.html</small></a></li><li><a href="./javascript/config-url.html">config-url<small>.html</small></a></li><li><a href="./javascript/config_type.html">config_type<small>.html</small></a></li><li><strong><a href="./javascript/fetch/index.html">fetch</a></strong></li><li><a href="./javascript/ffi.html">ffi<small>.html</small></a></li><li><a href="./javascript/hooks.html">hooks<small>.html</small></a></li><li><strong><a href="./javascript/issue-2093/index.html">issue-2093</a></strong></li><li><a href="./javascript/js-storage.html">js-storage<small>.html</small></a></li><li><a href="./javascript/js_modules.html">js_modules<small>.html</small></a></li><li><strong><a href="./javascript/loader/index.html">loader</a></strong></li><li><a href="./javascript/mpy-error.html">mpy-error<small>.html</small></a></li><li><a href="./javascript/mpy-no-error.html">mpy-no-error<small>.html</small></a></li><li><a href="./javascript/mpy.html">mpy<small>.html</small></a></li><li><a href="./javascript/py-terminal-main.html">py-terminal-main<small>.html</small></a></li><li><a href="./javascript/py-terminal-worker.html">py-terminal-worker<small>.html</small></a></li><li><a href="./javascript/py-terminal.html">py-terminal<small>.html</small></a></li><li><a href="./javascript/py-terminals.html">py-terminals<small>.html</small></a></li><li><strong><a href="./javascript/pyodide-cache/index.html">pyodide-cache</a></strong></li><li><strong><a href="./javascript/pyodide-lockfile/index.html">pyodide-lockfile</a></strong></li><li><a href="./javascript/storage.html">storage<small>.html</small></a></li><li><strong><span>workers</span></strong><ul><li><strong><a href="./javascript/workers/create_named/index.html">create_named</a></strong></li><li><strong><a href="./javascript/workers/mpy/index.html">mpy</a></strong></li><li><strong><a href="./javascript/workers/py/index.html">py</a></strong></li></ul></li></ul></li><li><strong><a href="./manual/index.html">manual</a></strong><ul><li><a href="./manual/all-done.html">all-done<small>.html</small></a></li><li><a href="./manual/async.html">async<small>.html</small></a></li><li><a href="./manual/camera.html">camera<small>.html</small></a></li><li><a href="./manual/click.html">click<small>.html</small></a></li><li><a href="./manual/code-a-part.html">code-a-part<small>.html</small></a></li><li><a href="./manual/combo.html">combo<small>.html</small></a></li><li><a href="./manual/config.html">config<small>.html</small></a></li><li><a href="./manual/create-element.html">create-element<small>.html</small></a></li><li><a href="./manual/dialog.html">dialog<small>.html</small></a></li><li><a href="./manual/display.html">display<small>.html</small></a></li><li><strong><a href="./manual/donkey/index.html">donkey</a></strong></li><li><a href="./manual/emoji.html">emoji<small>.html</small></a></li><li><a href="./manual/error.html">error<small>.html</small></a></li><li><a href="./manual/html-decode.html">html-decode<small>.html</small></a></li><li><a href="./manual/input.html">input<small>.html</small></a></li><li><a href="./manual/interpreter.html">interpreter<small>.html</small></a></li><li><strong><a href="./manual/issue-2228/index.html">issue-2228</a></strong></li><li><strong><a href="./manual/issue-2246/index.html">issue-2246</a></strong></li><li><strong><a href="./manual/issue-7015/index.html">issue-7015</a></strong></li><li><a href="./manual/multi.html">multi<small>.html</small></a></li><li><a href="./manual/multiple-editors.html">multiple-editors<small>.html</small></a></li><li><a href="./manual/no-error.html">no-error<small>.html</small></a></li><li><strong><a href="./manual/no_sab/index.html">no_sab</a></strong></li><li><strong><a href="./manual/piratical/index.html">piratical</a></strong></li><li><a href="./manual/py-editor.html">py-editor<small>.html</small></a></li><li><a href="./manual/py-editor-failure.html">py-editor-failure<small>.html</small></a></li><li><strong><a href="./manual/py-terminals/index.html">py-terminals</a></strong><ul><li><a href="./manual/py-terminals/no-repl.html">no-repl<small>.html</small></a></li><li><a href="./manual/py-terminals/repl.html">repl<small>.html</small></a></li></ul></li><li><a href="./manual/py_modules.html">py_modules<small>.html</small></a></li><li><strong><a href="./manual/service-worker/index.html">service-worker</a></strong></li><li><a href="./manual/split-config.html">split-config<small>.html</small></a></li><li><a href="./manual/submit.html">submit<small>.html</small></a></li><li><a href="./manual/target.html">target<small>.html</small></a></li><li><a href="./manual/test_display_HTML.html">test_display_HTML<small>.html</small></a></li><li><a href="./manual/test_when.html">test_when<small>.html</small></a></li><li><a href="./manual/worker.html">worker<small>.html</small></a></li></ul></li><li><strong><a href="./python/index.html">python</a></strong></li></ul></body>
+    <body><ul><li><strong><span>javascript</span></strong><ul><li><a href="./javascript/async-listener.html">async-listener<small>.html</small></a></li><li><a href="./javascript/config-url.html">config-url<small>.html</small></a></li><li><a href="./javascript/config_type.html">config_type<small>.html</small></a></li><li><strong><a href="./javascript/fetch/index.html">fetch</a></strong></li><li><a href="./javascript/ffi.html">ffi<small>.html</small></a></li><li><a href="./javascript/hooks.html">hooks<small>.html</small></a></li><li><strong><a href="./javascript/issue-2093/index.html">issue-2093</a></strong></li><li><a href="./javascript/js-storage.html">js-storage<small>.html</small></a><
A3D4
;/li><li><a href="./javascript/js_modules.html">js_modules<small>.html</small></a></li><li><strong><a href="./javascript/loader/index.html">loader</a></strong></li><li><a href="./javascript/mpy-error.html">mpy-error<small>.html</small></a></li><li><a href="./javascript/mpy-no-error.html">mpy-no-error<small>.html</small></a></li><li><a href="./javascript/mpy.html">mpy<small>.html</small></a></li><li><a href="./javascript/py-terminal-main.html">py-terminal-main<small>.html</small></a></li><li><a href="./javascript/py-terminal-worker.html">py-terminal-worker<small>.html</small></a></li><li><a href="./javascript/py-terminal.html">py-terminal<small>.html</small></a></li><li><a href="./javascript/py-terminals.html">py-terminals<small>.html</small></a></li><li><strong><a href="./javascript/pyodide-cache/index.html">pyodide-cache</a></strong></li><li><strong><a href="./javascript/pyodide-lockfile/index.html">pyodide-lockfile</a></strong></li><li><a href="./javascript/storage.html">storage<small>.html</small></a></li><li><strong><span>workers</span></strong><ul><li><strong><a href="./javascript/workers/create_named/index.html">create_named</a></strong></li><li><strong><a href="./javascript/workers/mpy/index.html">mpy</a></strong></li><li><strong><a href="./javascript/workers/py/index.html">py</a></strong></li></ul></li></ul></li><li><strong><a href="./manual/index.html">manual</a></strong><ul><li><a href="./manual/all-done.html">all-done<small>.html</small></a></li><li><a href="./manual/async.html">async<small>.html</small></a></li><li><a href="./manual/camera.html">camera<small>.html</small></a></li><li><a href="./manual/click.html">click<small>.html</small></a></li><li><a href="./manual/code-a-part.html">code-a-part<small>.html</small></a></li><li><a href="./manual/combo.html">combo<small>.html</small></a></li><li><a href="./manual/config.html">config<small>.html</small></a></li><li><a href="./manual/create-element.html">create-element<small>.html</small></a></li><li><a href="./manual/dialog.html">dialog<small>.html</small></a></li><li><a href="./manual/display.html">display<small>.html</small></a></li><li><strong><a href="./manual/donkey/index.html">donkey</a></strong></li><li><a href="./manual/emoji.html">emoji<small>.html</small></a></li><li><a href="./manual/error.html">error<small>.html</small></a></li><li><strong><a href="./manual/game/index.html">game</a></strong></li><li><a href="./manual/html-decode.html">html-decode<small>.html</small></a></li><li><a href="./manual/input.html">input<small>.html</small></a></li><li><a href="./manual/interpreter.html">interpreter<small>.html</small></a></li><li><strong><a href="./manual/issue-2228/index.html">issue-2228</a></strong></li><li><strong><a href="./manual/issue-2246/index.html">issue-2246</a></strong></li><li><strong><a href="./manual/issue-7015/index.html">issue-7015</a></strong></li><li><a href="./manual/multi.html">multi<small>.html</small></a></li><li><a href="./manual/multiple-editors.html">multiple-editors<small>.html</small></a></li><li><a href="./manual/no-error.html">no-error<small>.html</small></a></li><li><strong><a href="./manual/no_sab/index.html">no_sab</a></strong></li><li><strong><a href="./manual/piratical/index.html">piratical</a></strong></li><li><a href="./manual/py-editor.html">py-editor<small>.html</small></a></li><li><a href="./manual/py-editor-failure.html">py-editor-failure<small>.html</small></a></li><li><strong><a href="./manual/py-terminals/index.html">py-terminals</a></strong><ul><li><a href="./manual/py-terminals/no-repl.html">no-repl<small>.html</small></a></li><li><a href="./manual/py-terminals/repl.html">repl<small>.html</small></a></li></ul></li><li><a href="./manual/py_modules.html">py_modules<small>.html</small></a></li><li><strong><a href="./manual/service-worker/index.html">service-worker</a></strong></li><li><a href="./manual/split-config.html">split-config<small>.html</small></a></li><li><a href="./manual/submit.html">submit<small>.html</small></a></li><li><a href="./manual/target.html">target<small>.html</small></a></li><li><a href="./manual/test_display_HTML.html">test_display_HTML<small>.html</small></a></li><li><a href="./manual/test_when.html">test_when<small>.html</small></a></li><li><a href="./manual/worker.html">worker<small>.html</small></a></li></ul></li><li><strong><a href="./python/index.html">python</a></strong></li></ul></body>
 </html>
diff --git a/core/tests/manual/game/aliens.css b/core/tests/manual/game/aliens.css
@@ -0,0 +1,30 @@
+/* (c) https://github.com/ryanking13/pyodide-pygame-demo/blob/main/examples/aliens.html */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f4f4f4;
+    color: #333;
+}
+.demo {
+    background-color: #fff;
+    margin: 20px auto;
+    max-width: 1000px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+.demo-header {
+    background-color: #007bff;
+    color: #fff;
+    padding: 15px 20px;
+    font-size: 20px;
+}
+.demo-content {
+    padding: 20px;
+}
+
+#canvas {
+    margin: 0 auto;
+    display: block;
+}