mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-19 18:27:29 -05:00
Add pyscript module in both Main and Workers (#1619)
This commit is contained in:
Andrea Giammarchi
committed by
GitHub
GitHub
parent
2774e49ab9
commit
8a01a56e51
@@ -20,7 +20,7 @@ repos:
|
||||
- id: check-yaml
|
||||
- id: detect-private-key
|
||||
- id: end-of-file-fixer
|
||||
exclude: \.min\.js$
|
||||
exclude: pyscript\.next/core.*|\.min\.js$
|
||||
- id: trailing-whitespace
|
||||
|
||||
- repo: https://github.com/charliermarsh/ruff-pre-commit
|
||||
|
||||
@@ -1 +1 @@
|
||||
py-config,py-script{display:none}
|
||||
py-config,py-script{display:none}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,10 +1,11 @@
|
||||
import "@ungap/with-resolvers";
|
||||
import { $ } from "basic-devtools";
|
||||
import { define } from "polyscript";
|
||||
import { define, XWorker } from "polyscript";
|
||||
|
||||
// TODO: this is not strictly polyscript related but handy ... not sure
|
||||
// we should factor this utility out a part but this works anyway.
|
||||
import { queryTarget } from "../node_modules/polyscript/esm/script-handler.js";
|
||||
import { Hook } from "../node_modules/polyscript/esm/worker/hooks.js";
|
||||
|
||||
import { robustFetch as fetch } from "./fetch.js";
|
||||
|
||||
@@ -12,160 +13,197 @@ const { defineProperty } = Object;
|
||||
|
||||
const getText = (body) => body.text();
|
||||
|
||||
(async () => {
|
||||
// create a unique identifier when/if needed
|
||||
let id = 0;
|
||||
const getID = (prefix = "py") => `${prefix}-${id++}`;
|
||||
// allows lazy element features on code evaluation
|
||||
let currentElement;
|
||||
|
||||
// find the shared config for all py-script elements
|
||||
let config;
|
||||
let pyConfig = $("py-config");
|
||||
if (pyConfig) config = pyConfig.getAttribute("src") || pyConfig.textContent;
|
||||
else {
|
||||
pyConfig = $('script[type="py"]');
|
||||
config = pyConfig?.getAttribute("config");
|
||||
}
|
||||
// create a unique identifier when/if needed
|
||||
let id = 0;
|
||||
const getID = (prefix = "py") => `${prefix}-${id++}`;
|
||||
|
||||
if (/^https?:\/\//.test(config)) config = await fetch(config).then(getText);
|
||||
// find the shared config for all py-script elements
|
||||
let config;
|
||||
let pyConfig = $("py-config");
|
||||
if (pyConfig) config = pyConfig.getAttribute("src") || pyConfig.textContent;
|
||||
else {
|
||||
pyConfig = $('script[type="py"]');
|
||||
config = pyConfig?.getAttribute("config");
|
||||
}
|
||||
|
||||
// generic helper to disambiguate between custom element and script
|
||||
const isScript = (element) => element.tagName === "SCRIPT";
|
||||
if (/^https?:\/\//.test(config)) config = await fetch(config).then(getText);
|
||||
|
||||
// helper for all script[type="py"] out there
|
||||
const before = (script) => {
|
||||
defineProperty(document, "currentScript", {
|
||||
configurable: true,
|
||||
get: () => script,
|
||||
});
|
||||
};
|
||||
// generic helper to disambiguate between custom element and script
|
||||
const isScript = (element) => element.tagName === "SCRIPT";
|
||||
|
||||
const after = () => {
|
||||
delete document.currentScript;
|
||||
};
|
||||
// helper for all script[type="py"] out there
|
||||
const before = (script) => {
|
||||
defineProperty(document, "currentScript", {
|
||||
configurable: true,
|
||||
get: () => script,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Given a generic DOM Element, tries to fetch the 'src' attribute, if present.
|
||||
* It either throws an error if the 'src' can't be fetched or it returns a fallback
|
||||
* content as source.
|
||||
*/
|
||||
const fetchSource = async (tag) => {
|
||||
if (tag.hasAttribute("src")) {
|
||||
try {
|
||||
const response = await fetch(tag.getAttribute("src"));
|
||||
return response.then(getText);
|
||||
} catch (error) {
|
||||
// TODO _createAlertBanner(err) instead ?
|
||||
alert(error.message);
|
||||
throw error;
|
||||
}
|
||||
const after = () => {
|
||||
delete document.currentScript;
|
||||
};
|
||||
|
||||
/**
|
||||
* Given a generic DOM Element, tries to fetch the 'src' attribute, if present.
|
||||
* It either throws an error if the 'src' can't be fetched or it returns a fallback
|
||||
* content as source.
|
||||
*/
|
||||
const fetchSource = async (tag) => {
|
||||
if (tag.hasAttribute("src")) {
|
||||
try {
|
||||
const response = await fetch(tag.getAttribute("src"));
|
||||
return response.then(getText);
|
||||
} catch (error) {
|
||||
// TODO _createAlertBanner(err) instead ?
|
||||
alert(error.message);
|
||||
throw error;
|
||||
}
|
||||
return tag.textContent;
|
||||
};
|
||||
}
|
||||
return tag.textContent;
|
||||
};
|
||||
|
||||
// common life-cycle handlers for any node
|
||||
const bootstrapNodeAndPlugins = (pyodide, element, callback, hook) => {
|
||||
if (isScript(element)) callback(element);
|
||||
for (const fn of hooks[hook]) fn(pyodide, element);
|
||||
};
|
||||
// common life-cycle handlers for any node
|
||||
const bootstrapNodeAndPlugins = (pyodide, element, callback, hook) => {
|
||||
if (isScript(element)) callback(element);
|
||||
for (const fn of hooks[hook]) fn(pyodide, element);
|
||||
};
|
||||
|
||||
const addDisplay = (element) => {
|
||||
const id = isScript(element) ? element.target.id : element.id;
|
||||
return `
|
||||
# this code is just for demo purpose but the basics work
|
||||
def _display(what, target="${id}", append=True):
|
||||
from js import document
|
||||
element = document.getElementById(target)
|
||||
if append:
|
||||
element.append(what)
|
||||
else:
|
||||
element.textContent = what
|
||||
display = _display
|
||||
`;
|
||||
};
|
||||
const registerModule = ({ XWorker: $XWorker, interpreter, io }) => {
|
||||
// automatically use the pyscript stderr (when/if defined)
|
||||
// this defaults to console.error
|
||||
function PyWorker(...args) {
|
||||
const worker = $XWorker(...args);
|
||||
worker.onerror = ({ error }) => io.stderr(error);
|
||||
return worker;
|
||||
}
|
||||
interpreter.registerJsModule("pyscript", {
|
||||
PyWorker,
|
||||
document,
|
||||
window,
|
||||
// a getter to ensure if multiple scripts with same
|
||||
// env (py) runs, their execution code will have the correct
|
||||
// display reference with automatic target
|
||||
get display() {
|
||||
const id = isScript(currentElement)
|
||||
? currentElement.target.id
|
||||
: currentElement.id;
|
||||
|
||||
// define the module as both `<script type="py">` and `<py-script>`
|
||||
define("py", {
|
||||
config,
|
||||
env: "py-script",
|
||||
interpreter: "pyodide",
|
||||
codeBeforeRunWorker() {
|
||||
return [...hooks.codeBeforeRunWorker].join("\n");
|
||||
},
|
||||
codeAfterRunWorker() {
|
||||
return [...hooks.codeAfterRunWorker].join("\n");
|
||||
},
|
||||
onBeforeRun(pyodide, element) {
|
||||
bootstrapNodeAndPlugins(pyodide, element, before, "onBeforeRun");
|
||||
pyodide.interpreter.runPython(addDisplay(element));
|
||||
},
|
||||
onBeforeRunAync(pyodide, element) {
|
||||
pyodide.interpreter.runPython(addDisplay(element));
|
||||
bootstrapNodeAndPlugins(
|
||||
pyodide,
|
||||
element,
|
||||
before,
|
||||
"onBeforeRunAync",
|
||||
);
|
||||
},
|
||||
onAfterRun(pyodide, element) {
|
||||
bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRun");
|
||||
},
|
||||
onAfterRunAsync(pyodide, element) {
|
||||
bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRunAsync");
|
||||
},
|
||||
async onInterpreterReady(pyodide, element) {
|
||||
// allows plugins to do whatever they want with the element
|
||||
// before regular stuff happens in here
|
||||
for (const callback of hooks.onInterpreterReady)
|
||||
callback(pyodide, element);
|
||||
if (isScript(element)) {
|
||||
const {
|
||||
attributes: { async: isAsync, target },
|
||||
} = element;
|
||||
const hasTarget = !!target?.value;
|
||||
const show = hasTarget
|
||||
? queryTarget(target.value)
|
||||
: document.createElement("script-py");
|
||||
|
||||
if (!hasTarget) element.after(show);
|
||||
if (!show.id) show.id = getID();
|
||||
|
||||
// allows the code to retrieve the target element via
|
||||
// document.currentScript.target if needed
|
||||
defineProperty(element, "target", { value: show });
|
||||
|
||||
pyodide[`run${isAsync ? "Async" : ""}`](
|
||||
await fetchSource(element),
|
||||
);
|
||||
} else {
|
||||
// resolve PyScriptElement to allow connectedCallback
|
||||
element._pyodide.resolve(pyodide);
|
||||
}
|
||||
// TODO: decide which feature of display we want to keep
|
||||
return (what, target = id, append = true) => {
|
||||
const element = document.getElementById(target);
|
||||
if (append) element.append(what);
|
||||
else element.textContent = what;
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
class PyScriptElement extends HTMLElement {
|
||||
constructor() {
|
||||
if (!super().id) this.id = getID();
|
||||
this._pyodide = Promise.withResolvers();
|
||||
this.srcCode = "";
|
||||
this.executed = false;
|
||||
const workerPyScriptModule = [
|
||||
"from pyodide_js import FS",
|
||||
`FS.writeFile('./pyscript.py', '${[
|
||||
"import polyscript",
|
||||
"document=polyscript.xworker.window.document",
|
||||
"window=polyscript.xworker.window",
|
||||
"sync=polyscript.xworker.sync",
|
||||
].join(";")}')`,
|
||||
].join(";");
|
||||
|
||||
const workerHooks = {
|
||||
codeBeforeRunWorker: () =>
|
||||
[workerPyScriptModule, ...hooks.codeBeforeRunWorker].join("\n"),
|
||||
codeBeforeRunWorkerAsync: () =>
|
||||
[workerPyScriptModule, ...hooks.codeBeforeRunWorkerAsync].join("\n"),
|
||||
codeAfterRunWorker: () => [...hooks.codeAfterRunWorker].join("\n"),
|
||||
codeAfterRunWorkerAsync: () =>
|
||||
[...hooks.codeAfterRunWorkerAsync].join("\n"),
|
||||
};
|
||||
|
||||
// define the module as both `<script type="py">` and `<py-script>`
|
||||
define("py", {
|
||||
config,
|
||||
env: "py-script",
|
||||
interpreter: "pyodide",
|
||||
...workerHooks,
|
||||
onBeforeRun(pyodide, element) {
|
||||
currentElement = element;
|
||||
bootstrapNodeAndPlugins(pyodide, element, before, "onBeforeRun");
|
||||
},
|
||||
onBeforeRunAync(pyodide, element) {
|
||||
currentElement = element;
|
||||
bootstrapNodeAndPlugins(pyodide, element, before, "onBeforeRunAync");
|
||||
},
|
||||
onAfterRun(pyodide, element) {
|
||||
bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRun");
|
||||
},
|
||||
onAfterRunAsync(pyodide, element) {
|
||||
bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRunAsync");
|
||||
},
|
||||
async onInterpreterReady(pyodide, element) {
|
||||
registerModule(pyodide, element);
|
||||
// allows plugins to do whatever they want with the element
|
||||
// before regular stuff happens in here
|
||||
for (const callback of hooks.onInterpreterReady)
|
||||
callback(pyodide, element);
|
||||
if (isScript(element)) {
|
||||
const {
|
||||
attributes: { async: isAsync, target },
|
||||
} = element;
|
||||
const hasTarget = !!target?.value;
|
||||
const show = hasTarget
|
||||
? queryTarget(target.value)
|
||||
: document.createElement("script-py");
|
||||
|
||||
if (!hasTarget) element.after(show);
|
||||
if (!show.id) show.id = getID();
|
||||
|
||||
// allows the code to retrieve the target element via
|
||||
// document.currentScript.target if needed
|
||||
defineProperty(element, "target", { value: show });
|
||||
|
||||
pyodide[`run${isAsync ? "Async" : ""}`](await fetchSource(element));
|
||||
} else {
|
||||
// resolve PyScriptElement to allow connectedCallback
|
||||
element._pyodide.resolve(pyodide);
|
||||
}
|
||||
async connectedCallback() {
|
||||
if (!this.executed) {
|
||||
this.executed = true;
|
||||
const { run } = await this._pyodide.promise;
|
||||
this.srcCode = await fetchSource(this);
|
||||
this.textContent = "";
|
||||
const result = run(this.srcCode);
|
||||
if (!this.textContent && result) this.textContent = result;
|
||||
this.style.display = "block";
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
class PyScriptElement extends HTMLElement {
|
||||
constructor() {
|
||||
if (!super().id) this.id = getID();
|
||||
this._pyodide = Promise.withResolvers();
|
||||
this.srcCode = "";
|
||||
this.executed = false;
|
||||
}
|
||||
async connectedCallback() {
|
||||
if (!this.executed) {
|
||||
this.executed = true;
|
||||
const { run } = await this._pyodide.promise;
|
||||
this.srcCode = await fetchSource(this);
|
||||
this.textContent = "";
|
||||
const result = run(this.srcCode);
|
||||
if (!this.textContent && result) this.textContent = result;
|
||||
this.style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("py-script", PyScriptElement);
|
||||
})();
|
||||
customElements.define("py-script", PyScriptElement);
|
||||
|
||||
export function PyWorker(file, options) {
|
||||
// this propagates pyscript worker hooks without needing a pyscript
|
||||
// bootstrap + it passes arguments and enforces `pyodide`
|
||||
// as the interpreter to use in the worker, as all hooks assume that
|
||||
// and as `pyodide` is the only default interpreter that can deal with
|
||||
// all the features we need to deliver pyscript out there.
|
||||
return XWorker.call(new Hook(null, workerHooks), file, {
|
||||
...options,
|
||||
type: "pyodide",
|
||||
});
|
||||
}
|
||||
|
||||
export const hooks = {
|
||||
/** @type {Set<function>} */
|
||||
|
||||
28
pyscript.next/test/worker.html
Normal file
28
pyscript.next/test/worker.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>PyScript Next</title>
|
||||
<link rel="stylesheet" href="../core.css" />
|
||||
<script type="module">
|
||||
import { PyWorker } from '../core.js';
|
||||
PyWorker('./worker.py'/*, options allowed except `type` */);
|
||||
// the type is overwritten as "pyodide" in PyScript as the module
|
||||
// lives in that env too
|
||||
</script>
|
||||
<script>
|
||||
// this is only to test non-blocking nature/bootstrap
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
const div = document.body.appendChild(
|
||||
document.createElement('div')
|
||||
);
|
||||
(function monitor() {
|
||||
const date = new Date;
|
||||
div.textContent = `${date.getSeconds()}.${date.getMilliseconds()}`;
|
||||
requestAnimationFrame(monitor);
|
||||
}());
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
3
pyscript.next/test/worker.py
Normal file
3
pyscript.next/test/worker.py
Normal file
@@ -0,0 +1,3 @@
|
||||
from pyscript import document
|
||||
|
||||
document.body.append("Hello World")
|
||||
Reference in New Issue
Block a user