Moved back pyscript.core where it belongs (#1622)

pyscript.core/src/core.css

@@ -0,0 +1,4 @@
+py-script,
+py-config {
+    display: none;
+}

pyscript.core/src/core.js

@@ -0,0 +1,234 @@
+import "@ungap/with-resolvers";
+import { $ } from "basic-devtools";
+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";
+
+const { defineProperty } = Object;
+
+const getText = (body) => body.text();
+
+// allows lazy element features on code evaluation
+let currentElement;
+
+// create a unique identifier when/if needed
+let id = 0;
+const getID = (prefix = "py") => `${prefix}-${id++}`;
+
+// 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");
+}
+
+if (/^https?:\/\//.test(config)) config = await fetch(config).then(getText);
+
+// generic helper to disambiguate between custom element and script
+const isScript = (element) => element.tagName === "SCRIPT";
+
+// helper for all script[type="py"] out there
+const before = (script) => {
+    defineProperty(document, "currentScript", {
+        configurable: true,
+        get: () => script,
+    });
+};
+
+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;
+};
+
+// 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 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;
+
+            // 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;
+            };
+        },
+    });
+};
+
+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);
+        }
+    },
+});
+
+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);
+
+/**
+ * A `Worker` facade able to bootstrap on the worker thread only a PyScript module.
+ * @param {string} file the python file to run ina worker.
+ * @param {{config?: string | object, async?: boolean}} [options] optional configuration for the worker.
+ * @returns {Worker & {sync: ProxyHandler<object>}}
+ */
+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>} */
+    onBeforeRun: new Set(),
+    /** @type {Set<function>} */
+    onBeforeRunAync: new Set(),
+    /** @type {Set<function>} */
+    onAfterRun: new Set(),
+    /** @type {Set<function>} */
+    onAfterRunAsync: new Set(),
+    /** @type {Set<function>} */
+    onInterpreterReady: new Set(),
+
+    /** @type {Set<string>} */
+    codeBeforeRunWorker: new Set(),
+    /** @type {Set<string>} */
+    codeBeforeRunWorkerAsync: new Set(),
+    /** @type {Set<string>} */
+    codeAfterRunWorker: new Set(),
+    /** @type {Set<string>} */
+    codeAfterRunWorkerAsync: new Set(),
+};

pyscript.core/src/exceptions.js

@@ -0,0 +1,81 @@
+const CLOSEBUTTON =
+    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor' width='12px'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>";
+
+/**
+ * These error codes are used to identify the type of error that occurred.
+ * @see https://docs.pyscript.net/latest/reference/exceptions.html?highlight=errors
+ */
+export const ErrorCode = {
+    GENERIC: "PY0000", // Use this only for development then change to a more specific error code
+    FETCH_ERROR: "PY0001",
+    FETCH_NAME_ERROR: "PY0002",
+    // Currently these are created depending on error code received from fetching
+    FETCH_UNAUTHORIZED_ERROR: "PY0401",
+    FETCH_FORBIDDEN_ERROR: "PY0403",
+    FETCH_NOT_FOUND_ERROR: "PY0404",
+    FETCH_SERVER_ERROR: "PY0500",
+    FETCH_UNAVAILABLE_ERROR: "PY0503",
+    BAD_CONFIG: "PY1000",
+    MICROPIP_INSTALL_ERROR: "PY1001",
+    BAD_PLUGIN_FILE_EXTENSION: "PY2000",
+    NO_DEFAULT_EXPORT: "PY2001",
+    TOP_LEVEL_AWAIT: "PY9000",
+};
+
+export class UserError extends Error {
+    constructor(errorCode, message = "", messageType = "text") {
+        super(`(${errorCode}): ${message}`);
+        this.errorCode = errorCode;
+        this.messageType = messageType;
+        this.name = "UserError";
+    }
+}
+
+export class FetchError extends UserError {
+    constructor(errorCode, message) {
+        super(errorCode, message);
+        this.name = "FetchError";
+    }
+}
+
+export class InstallError extends UserError {
+    constructor(errorCode, message) {
+        super(errorCode, message);
+        this.name = "InstallError";
+    }
+}
+
+export function _createAlertBanner(
+    message,
+    level,
+    messageType = "text",
+    logMessage = true,
+) {
+    switch (`log-${level}-${logMessage}`) {
+        case "log-error-true":
+            console.error(message);
+            break;
+        case "log-warning-true":
+            console.warn(message);
+            break;
+    }
+
+    const content = messageType === "html" ? "innerHTML" : "textContent";
+    const banner = Object.assign(document.createElement("div"), {
+        className: `alert-banner py-${level}`,
+        [content]: message,
+    });
+
+    if (level === "warning") {
+        const closeButton = Object.assign(document.createElement("button"), {
+            id: "alert-close-button",
+            innerHTML: CLOSEBUTTON,
+        });
+
+        banner.appendChild(closeButton).addEventListener("click", () => {
+            banner.remove();
+        });
+    }
+
+    document.body.prepend(banner);
+}

pyscript.core/src/fetch.js

@@ -0,0 +1,63 @@
+import { FetchError, ErrorCode } from "./exceptions.js";
+
+/**
+ * This is a fetch wrapper that handles any non 200 responses and throws a
+ * FetchError with the right ErrorCode. This is useful because our FetchError
+ * will automatically create an alert banner.
+ *
+ * @param {string} url - URL to fetch
+ * @param {Request} [options] - options to pass to fetch
+ * @returns {Promise<Response>}
+ */
+export async function robustFetch(url, options) {
+    let response;
+
+    // Note: We need to wrap fetch into a try/catch block because fetch
+    // throws a TypeError if the URL is invalid such as http://blah.blah
+    try {
+        response = await fetch(url, options);
+    } catch (err) {
+        const error = err;
+        let errMsg;
+        if (url.startsWith("http")) {
+            errMsg =
+                `Fetching from URL ${url} failed with error ` +
+                `'${error.message}'. Are your filename and path correct?`;
+        } else {
+            errMsg = `Polyscript: Access to local files
+        (using [[fetch]] configurations in &lt;py-config&gt;)
+        is not available when directly opening a HTML file;
+        you must use a webserver to serve the additional files.
+        See <a style="text-decoration: underline;" href="https://github.com/pyscript/pyscript/issues/257#issuecomment-1119595062">this reference</a>
+        on starting a simple webserver with Python.
+            `;
+        }
+        throw new FetchError(ErrorCode.FETCH_ERROR, errMsg);
+    }
+
+    // Note that response.ok is true for 200-299 responses
+    if (!response.ok) {
+        const errorMsg = `Fetching from URL ${url} failed with error ${response.status} (${response.statusText}). Are your filename and path correct?`;
+        switch (response.status) {
+            case 404:
+                throw new FetchError(ErrorCode.FETCH_NOT_FOUND_ERROR, errorMsg);
+            case 401:
+                throw new FetchError(
+                    ErrorCode.FETCH_UNAUTHORIZED_ERROR,
+                    errorMsg,
+                );
+            case 403:
+                throw new FetchError(ErrorCode.FETCH_FORBIDDEN_ERROR, errorMsg);
+            case 500:
+                throw new FetchError(ErrorCode.FETCH_SERVER_ERROR, errorMsg);
+            case 503:
+                throw new FetchError(
+                    ErrorCode.FETCH_UNAVAILABLE_ERROR,
+                    errorMsg,
+                );
+            default:
+                throw new FetchError(ErrorCode.FETCH_ERROR, errorMsg);
+        }
+    }
+    return response;
+}