@pyscript/core 0.0.0 → 0.0.2

package/esm/custom/pyscript/exceptions.js

@@ -0,0 +1,80 @@
+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);
+}

package/esm/custom/pyscript/fetch.js

@@ -0,0 +1,63 @@
+import { FetchError, ErrorCode } from "./exceptions";
+
+/**
+ * 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 = `PyScript: 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;
+}

package/esm/custom/pyscript.js

@@ -0,0 +1,195 @@
+import "@ungap/with-resolvers";
+import { $ } from "basic-devtools";
+
+import { define } from "../index.js";
+import { queryTarget } from "../script-handler.js";
+import { defineProperty } from "../utils.js";
+import { getText } from "../fetch-utils.js";
+
+// TODO: should this utility be in core instead?
+import { robustFetch as fetch } from "./pyscript/fetch.js";
+
+// append ASAP CSS to avoid showing content
+document.head.appendChild(document.createElement("style")).textContent = `
+  py-script, py-config {
+    display: none;
+  }
+`;
+
+(async () => {
+    // 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 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)
+                element.textContent = what
+            display = _display
+        `;
+    };
+
+    // define the module as both `<script type="py">` and `<py-script>`
+    define("py", {
+        config,
+        env: "py-script",
+        interpreter: "pyodide",
+        codeBeforeRunWorker() {
+            const { codeBeforeRunWorker: set } = hooks;
+            const prefix = 'print("codeBeforeRunWorker")';
+            return [prefix].concat(...set).join("\n");
+        },
+        codeAfterRunWorker() {
+            const { codeAfterRunWorker: set } = hooks;
+            const prefix = 'print("codeAfterRunWorker")';
+            return [prefix].concat(...set).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 onRuntimeReady(pyodide, element) {
+            // allows plugins to do whatever they want with the element
+            // before regular stuff happens in here
+            for (const callback of hooks.onRuntimeReady)
+                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);
+})();
+
+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>} */
+    onRuntimeReady: 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(),
+};

package/esm/{custom-types.js → custom.js}

@@ -12,8 +12,6 @@ import { getRuntimeID } from "./loader.js";
 import { io } from "./interpreter/_utils.js";
 import { addAllListeners } from "./listeners.js";
 
-import workerHooks from "./worker/hooks.js";
-
 export const CUSTOM_SELECTORS = [];
 
 /**
@@ -26,7 +24,6 @@ export const CUSTOM_SELECTORS = [];
  * @prop {(path:string, data:ArrayBuffer) => void} writeFile an utility to write a file in the virtual FS, if available
  */
 
-const patched = new Map();
 const types = new Map();
 const waitList = new Map();
 
@@ -52,7 +49,7 @@ export const handleCustomType = (node) => {
                 } = options;
                 const name = getRuntimeID(runtime, version);
                 const id = env || `${name}${config ? `|${config}` : ""}`;
-                const { interpreter: engine, XWorker } = getDetails(
+                const { interpreter: engine, XWorker: Worker } = getDetails(
                     runtime,
                     id,
                     name,
@@ -60,87 +57,79 @@ export const handleCustomType = (node) => {
                     config,
                 );
                 engine.then((interpreter) => {
-                    if (!patched.has(id)) {
-                        const module = create(defaultRegistry.get(runtime));
-                        const {
-                            onBeforeRun,
-                            onBeforeRunAsync,
-                            onAfterRun,
-                            onAfterRunAsync,
-                            codeBeforeRunWorker,
-                            codeBeforeRunWorkerAsync,
-                            codeAfterRunWorker,
-                            codeAfterRunWorkerAsync,
-                        } = options;
-
-                        // These two loops mimic a `new Map(arrayContent)` without needing
-                        // the new Map overhead so that [name, [before, after]] can be easily destructured
-                        // and new sync or async patches become easy to add (when the logic is the same).
-
-                        // patch sync
-                        for (const [name, [before, after]] of [
-                            ["run", [onBeforeRun, onAfterRun]],
-                        ]) {
-                            const method = module[name];
-                            module[name] = function (interpreter, code) {
-                                if (before) before.call(this, resolved, node);
-                                const result = method.call(
-                                    this,
-                                    interpreter,
-                                    code,
-                                );
-                                if (after) after.call(this, resolved, node);
-                                return result;
-                            };
-                        }
-
-                        // patch async
-                        for (const [name, [before, after]] of [
-                            ["runAsync", [onBeforeRunAsync, onAfterRunAsync]],
-                        ]) {
-                            const method = module[name];
-                            module[name] = async function (interpreter, code) {
-                                if (before)
-                                    await before.call(this, resolved, node);
-                                const result = await method.call(
-                                    this,
-                                    interpreter,
-                                    code,
-                                );
-                                if (after)
-                                    await after.call(this, resolved, node);
-                                return result;
-                            };
-                        }
-
-                        // setup XWorker hooks, allowing strings to be forwarded to the worker
-                        // whenever it's created, as functions can't possibly be serialized
-                        // unless these are pure with no outer scope access (or globals vars)
-                        // so that making it strings disambiguate about their running context.
-                        workerHooks.set(XWorker, {
-                            beforeRun: codeBeforeRunWorker,
-                            beforeRunAsync: codeBeforeRunWorkerAsync,
-                            afterRun: codeAfterRunWorker,
-                            afterRunAsync: codeAfterRunWorkerAsync,
-                        });
-
-                        module.setGlobal(interpreter, "XWorker", XWorker);
-
-                        const resolved = {
-                            type,
-                            interpreter,
-                            XWorker,
-                            io: io.get(interpreter),
-                            config: structuredClone(configs.get(name)),
-                            run: module.run.bind(module, interpreter),
-                            runAsync: module.runAsync.bind(module, interpreter),
+                    const module = create(defaultRegistry.get(runtime));
+
+                    const {
+                        onBeforeRun,
+                        onBeforeRunAsync,
+                        onAfterRun,
+                        onAfterRunAsync,
+                        codeBeforeRunWorker,
+                        codeBeforeRunWorkerAsync,
+                        codeAfterRunWorker,
+                        codeAfterRunWorkerAsync,
+                    } = options;
+
+                    const hooks = {
+                        beforeRun: codeBeforeRunWorker?.(),
+                        beforeRunAsync: codeBeforeRunWorkerAsync?.(),
+                        afterRun: codeAfterRunWorker?.(),
+                        afterRunAsync: codeAfterRunWorkerAsync?.(),
+                    };
+
+                    const XWorker = function XWorker(...args) {
+                        return Worker.apply(hooks, args);
+                    };
+
+                    // These two loops mimic a `new Map(arrayContent)` without needing
+                    // the new Map overhead so that [name, [before, after]] can be easily destructured
+                    // and new sync or async patches become easy to add (when the logic is the same).
+
+                    // patch sync
+                    for (const [name, [before, after]] of [
+                        ["run", [onBeforeRun, onAfterRun]],
+                    ]) {
+                        const method = module[name];
+                        module[name] = function (interpreter, code) {
+                            if (before) before.call(this, resolved, node);
+                            const result = method.call(this, interpreter, code);
+                            if (after) after.call(this, resolved, node);
+                            return result;
                         };
+                    }
 
-                        patched.set(id, resolved);
-                        resolve(resolved);
+                    // patch async
+                    for (const [name, [before, after]] of [
+                        ["runAsync", [onBeforeRunAsync, onAfterRunAsync]],
+                    ]) {
+                        const method = module[name];
+                        module[name] = async function (interpreter, code) {
+                            if (before) await before.call(this, resolved, node);
+                            const result = await method.call(
+                                this,
+                                interpreter,
+                                code,
+                            );
+                            if (after) await after.call(this, resolved, node);
+                            return result;
+                        };
                     }
 
-                    onRuntimeReady?.(patched.get(id), node);
+                    module.setGlobal(interpreter, "XWorker", XWorker);
+
+                    const resolved = {
+                        type,
+                        interpreter,
+                        XWorker,
+                        io: io.get(interpreter),
+                        config: structuredClone(configs.get(name)),
+                        run: module.run.bind(module, interpreter),
+                        runAsync: module.runAsync.bind(module, interpreter),
+                    };
+
+                    resolve(resolved);
+
+                    onRuntimeReady?.(resolved, node);
                 });
             }
         }

package/esm/index.js

@@ -4,10 +4,10 @@ import xworker from "./worker/class.js";
 import { handle } from "./script-handler.js";
 import { assign } from "./utils.js";
 import { selectors, prefixes } from "./interpreters.js";
-import { CUSTOM_SELECTORS, handleCustomType } from "./custom-types.js";
+import { CUSTOM_SELECTORS, handleCustomType } from "./custom.js";
 import { listener, addAllListeners } from "./listeners.js";
 
-export { define, whenDefined } from "./custom-types.js";
+export { define, whenDefined } from "./custom.js";
 export const XWorker = xworker();
 
 const INTERPRETER_SELECTORS = selectors.join(",");

package/esm/interpreter/_python.js

@@ -7,6 +7,12 @@ export const run = (interpreter, code) => interpreter.runPython(clean(code));
 export const runAsync = (interpreter, code) =>
     interpreter.runPythonAsync(clean(code));
 
+export const setGlobal = (interpreter, name, value) =>
+    interpreter.globals.set(name, value);
+
+export const deleteGlobal = (interpreter, name) =>
+    interpreter.globals.delete(name);
+
 export const writeFile = ({ FS }, path, buffer) =>
     writeFileUtil(FS, path, buffer);
 /* c8 ignore stop */

package/esm/interpreter/micropython.js

@@ -1,5 +1,11 @@
 import { fetchPaths, stdio } from "./_utils.js";
-import { run, runAsync, writeFile } from "./_python.js";
+import {
+    run,
+    runAsync,
+    setGlobal,
+    deleteGlobal,
+    writeFile,
+} from "./_python.js";
 
 const type = "micropython";
 
@@ -7,7 +13,7 @@ const type = "micropython";
 /* c8 ignore start */
 export default {
     type,
-    module: (version = "1.20.0-239") =>
+    module: (version = "1.20.0-253") =>
         `https://cdn.jsdelivr.net/npm/@micropython/micropython-webassembly-pyscript@${version}/micropython.mjs`,
     async engine({ loadMicroPython }, config, url) {
         const { stderr, stdout, get } = stdio();
@@ -16,16 +22,8 @@ export default {
         if (config.fetch) await fetchPaths(this, runtime, config.fetch);
         return runtime;
     },
-    setGlobal(interpreter, name, value) {
-        const id = `__pyscript_${this.type}_${name}`;
-        globalThis[id] = value;
-        this.run(interpreter, `from js import ${id};${name}=${id};`);
-    },
-    deleteGlobal(interpreter, name) {
-        const id = `__pyscript_${this.type}_${name}`;
-        this.run(interpreter, `del ${id};del ${name}`);
-        delete globalThis[id];
-    },
+    setGlobal,
+    deleteGlobal,
     run,
     runAsync,
     writeFile,

package/esm/interpreter/pyodide.js

@@ -1,5 +1,11 @@
 import { fetchPaths, stdio } from "./_utils.js";
-import { run, runAsync, writeFile } from "./_python.js";
+import {
+    run,
+    runAsync,
+    setGlobal,
+    deleteGlobal,
+    writeFile,
+} from "./_python.js";
 
 const type = "pyodide";
 
@@ -24,12 +30,8 @@ export default {
         }
         return interpreter;
     },
-    setGlobal(interpreter, name, value) {
-        interpreter.globals.set(name, value);
-    },
-    deleteGlobal(interpreter, name) {
-        interpreter.globals.delete(name);
-    },
+    setGlobal,
+    deleteGlobal,
     run,
     runAsync,
     writeFile,

package/esm/script-handler.js

@@ -12,7 +12,7 @@ const getRoot = (script) => {
     return parent;
 };
 
-const queryTarget = (script, idOrSelector) => {
+export const queryTarget = (script, idOrSelector) => {
     const root = getRoot(script);
     return root.getElementById(idOrSelector) || $(idOrSelector, root);
 };

package/esm/worker/class.js

@@ -1,8 +1,8 @@
-import coincident from "coincident/structured";
+import * as JSON from "@ungap/structured-clone/json";
+import coincident from "coincident/window";
 import xworker from "./xworker.js";
 import { assign, defineProperties, absoluteURL } from "../utils.js";
 import { getText } from "../fetch-utils.js";
-import workerHooks from "./hooks.js";
 
 /**
  * @typedef {Object} WorkerOptions custom configuration
@@ -19,9 +19,9 @@ export default (...args) =>
      * @returns {Worker}
      */
     function XWorker(url, options) {
-        const hooks = workerHooks.get(XWorker);
         const worker = xworker();
         const { postMessage } = worker;
+        const hooks = this instanceof XWorker ? void 0 : this;
         if (args.length) {
             const [type, version] = args;
             options = assign({}, options || { type, version });
@@ -39,7 +39,7 @@ export default (...args) =>
                     ),
             },
             sync: {
-                value: coincident(worker),
+                value: coincident(worker, JSON).proxy,
             },
         });
     };