jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-02-27 11:04:05 -05:00
Code Issues Projects Releases Wiki Activity

Implement PyScript custom <script type> (#1548)

Browse Source 
* updated MicroPython to latest in order to have `globals` API available
  * reduced code around helpers for both MicroPython and Pyodide as now these are more aligned
  * updated all dependencies and brought in latest [coincident/window](https://github.com/WebReflection/coincident#coincidentwindow) goodness to any `xworker`, preserving the `sync` previous behavior
  * using [@ungap/structured-clone/json](https://github.com/ungap/structured-clone#tojson) as *coincident* default `parse` and `stringify` utility to allow recursive and more complex data to travel back from the *Worker* (forward data is still fully [structured clone algorithm compatible](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm))
  * renamed all *plugin/s* references to *custom/s* as plugin as a word was too misleading
  * changed *custom types* helpers logic to allow any single node to have its own version of the interpreter wrapper, and all the extra fields it carries with it, including a way to augment every interpreter execution, among as every worker code execution
  * created a `custom` folder where I've landed the very first `pyscript.js` custom type
  * created an exhaustive test page to demonstrate the current abilities of *PyScript Next* among its ability to expose utilities that can be used to create *PyScript* plugins
This commit is contained in:
Andrea Giammarchi
2023-06-22 17:29:07 +02:00
committed by GitHub
parent 0a7e1ce0d7
commit f6dfc5361e
49 changed files with 634 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pyscript.core/test/plugins/index.html
View File

@@ -10,7 +10,7 @@
}
</style>
<script type="importmap">
{ "imports": { "@pyscript/core": "../../min.js" } }
{ "imports": { "@pyscript/core": "../../core.js" } }
</script>
<script type="module">
import { define, whenDefined } from "@pyscript/core";

2
pyscript.core/test/plugins/lua.html
View File

@@ -10,7 +10,7 @@
}
</style>
<script type="importmap">
{ "imports": { "@pyscript/core": "../../min.js" } }
{ "imports": { "@pyscript/core": "../../core.js" } }
</script>
<script type="module">
import { define } from "@pyscript/core";

40
pyscript.core/test/plugins/py-script.html
View File

@@ -3,24 +3,30 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>PyScript</title>
<style>
py-script {
display: none;
}
</style>
<script type="importmap">
{ "imports": { "@pyscript/core": "../../min.js" } }
<title>PyScript Next</title>
<script type="importmap">{ "imports": { "@pyscript/element": "../../pyscript.js" } }</script>
<script type="module">
// how would PyScript plugins add their own behavior?
import { hooks } from "@pyscript/element";
let counter = 0;
hooks.onBeforeRun.add((pyodide, { localName }) => {
// console.log(++counter, 'elements so far', localName, pyodide);
});
</script>
<script type="module" src="py-script.js"></script>
</head>
<body>
<fieldset>
<legend id="dary"></legend>
Something something about something ...
</fieldset>
<py-config>
[[fetch]]
from = "../"
to_folder = "./"
files = ["a.py", "b.py"]
</py-config>
<!-- <py-script next> -->
<py-script>
import js
import a, b
@@ -29,8 +35,24 @@
'Hello Web!'
</py-script>
<py-script>
# note the target is this element itself
display('second &lt;py-script&gt;')
</py-script>
<py-script>
# note this is late to the party simply because
# pyodide needs to be bootstrapped in the Worker too
XWorker('../a.py')
'OK'
</py-script>
<!-- <script type="py"> -->
<script type="py">
# not the target is inferred as companion element
display('first <script type="py">')
</script>
<script type="py">
# note the target here is different
display('second <script type="py">', target="dary")
</script>
</body>
</html>

72
pyscript.core/test/plugins/py-script.js
View File

@@ -1,72 +0,0 @@
import { define } from "@pyscript/core";
// append ASAP CSS to avoid showing content
document.head.appendChild(document.createElement("style")).textContent = `
py-script, py-config {
display: none;
}
`;
// create a unique identifier when/if needed
let id = 0;
const getID = (prefix = "py-script") => `${prefix}-${id++}`;
let bootstrap = true,
XWorker,
sharedRuntime;
const sharedPyodide = new Promise((resolve) => {
const pyConfig = document.querySelector("py-config");
const config = pyConfig?.getAttribute("src") || pyConfig?.textContent;
define("py", {
config,
interpreter: "pyodide",
codeBeforeRunWorker: `print('codeBeforeRunWorker')`,
codeAfterRunWorker: `print('codeAfterRunWorker')`,
onBeforeRun(pyodide, node) {
pyodide.interpreter.globals.set("XWorker", XWorker);
console.log("onBeforeRun", sharedRuntime === pyodide, node);
},
onAfterRun(pyodide, node) {
console.log("onAfterRun", sharedRuntime === pyodide, node);
},
async onRuntimeReady(pyodide) {
// bootstrap the shared runtime once
// as each node as plugin gets onRuntimeReady called once
// because no custom-element is strictly needed
if (bootstrap) {
bootstrap = false;
sharedRuntime = pyodide;
XWorker = pyodide.XWorker;
pyodide.io.stdout = (message) => {
console.log("🐍", pyodide.type, message);
};
// do any module / JS injection in here such as
// Element, display, and friends ... then:
resolve(pyodide);
}
},
});
});
/** @type {WeakSet<PyScriptElement>} */
const known = new WeakSet();
class PyScriptElement extends HTMLElement {
constructor() {
if (!super().id) this.id = getID();
}
async connectedCallback() {
if (!known.has(this)) {
known.add(this);
// sharedPyodide contains various helpers including run and runAsync
const { run } = await sharedPyodide;
// do any stuff needed to finalize this element bootstrap
// (i.e. check src attribute and so on)
this.replaceChildren(run(this.textContent) || "");
// reveal the node on the page
this.style.display = "block";
}
}
}
customElements.define("py-script", PyScriptElement);