@pyscript/core 0.1.18 → 0.1.20

package/dist/error-87e0706c.js

@@ -0,0 +1,2 @@
+import{hooks as e}from"./core.js";function o(e){const o=document.createElement("div");o.className="py-error",o.textContent=e,o.style.cssText="\n    border: 1px solid red;\n    background: #ffdddd;\n    color: black;\n    font-family: courier, monospace;\n    white-space: pre;\n    overflow-x: auto;\n    padding: 8px;\n    margin-top: 8px;\n  ",document.body.append(o)}e.onBeforeRun.add((function n(r){e.onBeforeRun.delete(n);const{stderr:t}=r.io;r.io.stderr=(e,...n)=>(o(e.message||e),t(e,...n)),addEventListener("error",(({message:e})=>{e.startsWith("Uncaught PythonError")&&o(e)}))}));export{o as notify};
+//# sourceMappingURL=error-87e0706c.js.map

package/dist/error-87e0706c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-87e0706c.js","sources":["../src/plugins/error.js"],"sourcesContent":["// PyScript Error Plugin\nimport { hooks } from \"../core.js\";\n\nhooks.onBeforeRun.add(function override(pyScript) {\n    // be sure this override happens only once\n    hooks.onBeforeRun.delete(override);\n\n    // trap generic `stderr` to propagate to it regardless\n    const { stderr } = pyScript.io;\n\n    // override it with our own logic\n    pyScript.io.stderr = (error, ...rest) => {\n        notify(error.message || error);\n        // let other plugins or stderr hook, if any, do the rest\n        return stderr(error, ...rest);\n    };\n\n    // be sure uncaught Python errors are also visible\n    addEventListener(\"error\", ({ message }) => {\n        if (message.startsWith(\"Uncaught PythonError\")) notify(message);\n    });\n});\n\n// Error hook utilities\n\n// Custom function to show notifications\nexport function notify(message) {\n    const div = document.createElement(\"div\");\n    div.className = \"py-error\";\n    div.textContent = message;\n    div.style.cssText = `\n    border: 1px solid red;\n    background: #ffdddd;\n    color: black;\n    font-family: courier, monospace;\n    white-space: pre;\n    overflow-x: auto;\n    padding: 8px;\n    margin-top: 8px;\n  `;\n    document.body.append(div);\n}\n"],"names":["notify","message","div","document","createElement","className","textContent","style","cssText","body","append","hooks","onBeforeRun","add","override","pyScript","delete","stderr","io","error","rest","addEventListener","startsWith"],"mappings":"kCA0BO,SAASA,EAAOC,GACnB,MAAMC,EAAMC,SAASC,cAAc,OACnCF,EAAIG,UAAY,WAChBH,EAAII,YAAcL,EAClBC,EAAIK,MAAMC,QAAU,6MAUpBL,SAASM,KAAKC,OAAOR,EACzB,CAtCAS,EAAMC,YAAYC,KAAI,SAASC,EAASC,GAEpCJ,EAAMC,YAAYI,OAAOF,GAGzB,MAAMG,OAAEA,GAAWF,EAASG,GAG5BH,EAASG,GAAGD,OAAS,CAACE,KAAUC,KAC5BpB,EAAOmB,EAAMlB,SAAWkB,GAEjBF,EAAOE,KAAUC,IAI5BC,iBAAiB,SAAS,EAAGpB,cACrBA,EAAQqB,WAAW,yBAAyBtB,EAAOC,EAAQ,GAEvE"}

package/docs/README.md

@@ -111,7 +111,7 @@ import { hooks } from "https://cdn.jsdelivr.net/npm/@pyscript/core";
 
 // example
 hooks.onInterpreterReady.add((utils, element) => {
-  console.lot(element, 'found', 'pyscript is ready');
+  console.log(element, 'found', 'pyscript is ready');
 });
 
 // the hooks namespace
@@ -148,9 +148,9 @@ Please note that a *worker* is a completely different environment and it's not p
 
 However, each worker string can use `from pyscript import x, y, z` as that will be available out of the box.
 
-## PyScript Module API
+## PyScript Python API
 
-The python module offers various utilities in either the main thread or the worker.
+The `pyscript` python package offers various utilities in either the main thread or the worker.
 
 The commonly shared utilities are:
 
@@ -257,15 +257,6 @@ We might decide to allow TOML too in the future, but the direct config as attrib
   </div>
 </details>
 
-<details>
-  <summary><strong>why worker attribute needs an external file?</strong></summary>
-  <div markdown=1>
-
-It would create confusion to have worker code embedded directly in the page and let *PyScript* forward the content to be executed as worker, but the separation of concerns felt more aligned with the meaning of bootstrapping a worker: it inevitably happens elsewhere and with little caveats or features here and there, so it's OK for now to keep that separation explicit.
-
-  </div>
-</details>
-
 <details>
   <summary><strong>what are the worker's caveats?</strong></summary>
   <div markdown=1>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pyscript/core",
-    "version": "0.1.18",
+    "version": "0.1.20",
     "type": "module",
     "description": "PyScript",
     "module": "./index.js",
@@ -21,6 +21,7 @@
     "scripts": {
         "server": "npx static-handler --cors --coep --coop --corp .",
         "build": "node rollup/stdlib.cjs && node rollup/plugins.cjs && rm -rf dist && rollup --config rollup/core.config.js && npm run ts",
+        "size": "echo -e \"\\033[1mdist/*.js file size\\033[0m\"; for js in $(ls dist/*.js); do echo -e \"\\033[2m$js:\\033[0m $(cat $js | brotli | wc -c) bytes\"; done",
         "ts": "tsc -p ."
     },
     "keywords": [
@@ -32,12 +33,12 @@
     "dependencies": {
         "@ungap/with-resolvers": "^0.1.0",
         "basic-devtools": "^0.1.6",
-        "polyscript": "^0.3.6"
+        "polyscript": "^0.3.7"
     },
     "devDependencies": {
         "@rollup/plugin-node-resolve": "^15.2.1",
         "@rollup/plugin-terser": "^0.4.3",
-        "rollup": "^3.29.1",
+        "rollup": "^3.29.2",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-string": "^3.0.0",
         "static-handler": "^0.4.2",

package/src/config.js

@@ -0,0 +1,110 @@
+/**
+ * This file parses a generic <py-config> or config attribute
+ * to use as base config for all py-script elements, importing
+ * also a queue of plugins *before* the interpreter (if any) resolves.
+ */
+import { $ } from "basic-devtools";
+
+import allPlugins from "./plugins.js";
+import { robustFetch as fetch, getText } from "./fetch.js";
+import { ErrorCode } from "./exceptions.js";
+
+const badURL = (url, expected = "") => {
+    let message = `(${ErrorCode.BAD_CONFIG}): Invalid URL: ${url}`;
+    if (expected) message += `\nexpected ${expected} content`;
+    throw new Error(message);
+};
+
+/**
+ * Given a string, returns its trimmed content as text,
+ * fetching it from a file if the content is a URL.
+ * @param {string} config either JSON, TOML, or a file to fetch
+ * @returns {{json: boolean, toml: boolean, text: string}}
+ */
+const configDetails = async (config) => {
+    let text = config?.trim();
+    // we only support an object as root config
+    let url = "",
+        toml = false,
+        json = /^{/.test(text) && /}$/.test(text);
+    // handle files by extension (relaxing urls parts after)
+    if (!json && /\.(\w+)(?:\?\S*)?$/.test(text)) {
+        const ext = RegExp.$1;
+        if (ext === "json" && type !== "toml") json = true;
+        else if (ext === "toml" && type !== "json") toml = true;
+        else badURL(text, type);
+        url = text;
+        text = (await fetch(url).then(getText)).trim();
+    }
+    return { json, toml: toml || (!json && !!text), text, url };
+};
+
+const syntaxError = (type, url, { message }) => {
+    let str = `(${ErrorCode.BAD_CONFIG}): Invalid ${type}`;
+    if (url) str += ` @ ${url}`;
+    return new SyntaxError(`${str}\n${message}`);
+};
+
+// find the shared config for all py-script elements
+let config, plugins, parsed, error, type;
+let pyConfig = $("py-config");
+if (pyConfig) {
+    config = pyConfig.getAttribute("src") || pyConfig.textContent;
+    type = pyConfig.getAttribute("type");
+} else {
+    pyConfig = $(
+        [
+            'script[type="py"][config]:not([worker])',
+            "py-script[config]:not([worker])",
+        ].join(","),
+    );
+    if (pyConfig) config = pyConfig.getAttribute("config");
+}
+
+// catch possible fetch errors
+if (config) {
+    try {
+        const { json, toml, text, url } = await configDetails(config);
+        config = text;
+        if (json || type === "json") {
+            try {
+                parsed = JSON.parse(text);
+            } catch (e) {
+                error = syntaxError("JSON", url, e);
+            }
+        } else if (toml || type === "toml") {
+            try {
+                const { parse } = await import(
+                    /* webpackIgnore: true */
+                    "https://cdn.jsdelivr.net/npm/@webreflection/toml-j0.4/toml.js"
+                );
+                parsed = parse(text);
+            } catch (e) {
+                error = syntaxError("TOML", url, e);
+            }
+        }
+    } catch (e) {
+        error = e;
+    }
+}
+
+// parse all plugins and optionally ignore only
+// those flagged as "undesired" via `!` prefix
+const toBeAwaited = [];
+for (const [key, value] of Object.entries(allPlugins)) {
+    if (error) {
+        if (key === "error") {
+            // show on page the config is broken, meaning that
+            // it was not possible to disable error plugin neither
+            // as that part wasn't correctly parsed anyway
+            value().then(({ notify }) => notify(error.message));
+        }
+    } else if (!parsed?.plugins?.includes(`!${key}`)) {
+        toBeAwaited.push(value());
+    }
+}
+
+// assign plugins as Promise.all only if needed
+if (toBeAwaited.length) plugins = Promise.all(toBeAwaited);
+
+export { config, plugins, error };

package/src/core.js

@@ -1,12 +1,7 @@
 /*! (c) PyScript Development Team */
 
 import "@ungap/with-resolvers";
-import { $ } from "basic-devtools";
 import { define, XWorker } from "polyscript";
-import sync from "./sync.js";
-
-import stdlib from "./stdlib.js";
-import plugins from "./plugins.js";
 
 // TODO: this is not strictly polyscript related but handy ... not sure
 //       we should factor this utility out a part but this works anyway.
@@ -14,29 +9,21 @@ import { queryTarget } from "../node_modules/polyscript/esm/script-handler.js";
 import { dedent, dispatch } from "../node_modules/polyscript/esm/utils.js";
 import { Hook } from "../node_modules/polyscript/esm/worker/hooks.js";
 
-import { robustFetch as fetch } from "./fetch.js";
+import sync from "./sync.js";
+import stdlib from "./stdlib.js";
+import { config, plugins, error } from "./config.js";
+import { robustFetch as fetch, getText } from "./fetch.js";
 
 const { assign, defineProperty, entries } = Object;
 
-const getText = (body) => body.text();
+const TYPE = "py";
 
 // 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);
+const getID = (prefix = TYPE) => `${prefix}-${id++}`;
 
 // generic helper to disambiguate between custom element and script
 const isScript = ({ tagName }) => tagName === "SCRIPT";
@@ -70,7 +57,7 @@ const fetchSource = async (tag, io, asText) => {
     if (asText) return dedent(tag.textContent);
 
     console.warn(
-        'Deprecated: use <script type="py"> for an always safe content parsing:\n',
+        `Deprecated: use <script type="${TYPE}"> for an always safe content parsing:\n`,
         tag.innerHTML,
     );
 
@@ -95,7 +82,7 @@ const registerModule = ({ XWorker: $XWorker, interpreter, io }) => {
     }
 
     // enrich the Python env with some JS utility for main
-    interpreter.registerJsModule("_pyscript_js", {
+    interpreter.registerJsModule("_pyscript", {
         PyWorker,
         get target() {
             return isScript(currentElement)
@@ -140,92 +127,82 @@ const workerHooks = {
         [...hooks.codeAfterRunWorkerAsync].map(dedent).join("\n"),
 };
 
-// avoid running further script if the previous one had
-// some import that would inevitably delay its execution
-let queuePlugins;
-
 // define the module as both `<script type="py">` and `<py-script>`
-define("py", {
-    config,
-    env: "py-script",
-    interpreter: "pyodide",
-    ...workerHooks,
-    onWorkerReady(_, xworker) {
-        assign(xworker.sync, sync);
-    },
-    onBeforeRun(pyodide, element) {
-        currentElement = element;
-        bootstrapNodeAndPlugins(pyodide, element, before, "onBeforeRun");
-    },
-    onBeforeRunAsync(pyodide, element) {
-        currentElement = element;
-        bootstrapNodeAndPlugins(pyodide, element, before, "onBeforeRunAsync");
-    },
-    onAfterRun(pyodide, element) {
-        bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRun");
-    },
-    onAfterRunAsync(pyodide, element) {
-        bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRunAsync");
-    },
-    async onInterpreterReady(pyodide, element) {
-        if (shouldRegister) {
-            shouldRegister = false;
-            registerModule(pyodide);
-        }
-
-        // load plugins unless specified otherwise
-        const toBeAwaited = [];
-        for (const [key, value] of entries(plugins)) {
-            if (!pyodide.config?.plugins?.includes(`!${key}`))
-                toBeAwaited.push(value());
-        }
-
-        // this grants queued results when first script/tag has plugins
-        // and the second one *might* rely on first tag execution
-        if (toBeAwaited.length) {
-            const all = Promise.all(toBeAwaited);
-            queuePlugins = queuePlugins ? queuePlugins.then(() => all) : all;
-        }
-
-        if (queuePlugins) await queuePlugins;
-
-        // 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) {
-                const { head, body } = document;
-                if (head.contains(element)) body.append(show);
-                else element.after(show);
+// but only if the config didn't throw an error
+error ||
+    define(TYPE, {
+        config,
+        env: `${TYPE}-script`,
+        interpreter: "pyodide",
+        ...workerHooks,
+        onWorkerReady(_, xworker) {
+            assign(xworker.sync, sync);
+        },
+        onBeforeRun(pyodide, element) {
+            currentElement = element;
+            bootstrapNodeAndPlugins(pyodide, element, before, "onBeforeRun");
+        },
+        onBeforeRunAsync(pyodide, element) {
+            currentElement = element;
+            bootstrapNodeAndPlugins(
+                pyodide,
+                element,
+                before,
+                "onBeforeRunAsync",
+            );
+        },
+        onAfterRun(pyodide, element) {
+            bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRun");
+        },
+        onAfterRunAsync(pyodide, element) {
+            bootstrapNodeAndPlugins(pyodide, element, after, "onAfterRunAsync");
+        },
+        async onInterpreterReady(pyodide, element) {
+            if (shouldRegister) {
+                shouldRegister = false;
+                registerModule(pyodide);
             }
-            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 });
-
-            // notify before the code runs
-            dispatch(element, "py");
-            pyodide[`run${isAsync ? "Async" : ""}`](
-                await fetchSource(element, pyodide.io, true),
-            );
-        } else {
-            // resolve PyScriptElement to allow connectedCallback
-            element._pyodide.resolve(pyodide);
-        }
-        console.debug("[pyscript/main] PyScript Ready");
-    },
-});
+            // ensure plugins are bootstrapped already
+            if (plugins) await plugins;
+
+            // 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) {
+                    const { head, body } = document;
+                    if (head.contains(element)) body.append(show);
+                    else 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 });
+
+                // notify before the code runs
+                dispatch(element, TYPE);
+                pyodide[`run${isAsync ? "Async" : ""}`](
+                    await fetchSource(element, pyodide.io, true),
+                );
+            } else {
+                // resolve PyScriptElement to allow connectedCallback
+                element._pyodide.resolve(pyodide);
+            }
+            console.debug("[pyscript/main] PyScript Ready");
+        },
+    });
 
 class PyScriptElement extends HTMLElement {
     constructor() {
@@ -249,14 +226,15 @@ class PyScriptElement extends HTMLElement {
             this.srcCode = await fetchSource(this, io, !this.childElementCount);
             this.replaceChildren();
             // notify before the code runs
-            dispatch(this, "py");
+            dispatch(this, TYPE);
             runner(this.srcCode);
             this.style.display = "block";
         }
     }
 }
 
-customElements.define("py-script", PyScriptElement);
+// define py-script only if the config didn't throw an error
+error || customElements.define("py-script", PyScriptElement);
 
 /**
  * A `Worker` facade able to bootstrap on the worker thread only a PyScript module.

package/src/fetch.js

@@ -1,4 +1,7 @@
 import { FetchError, ErrorCode } from "./exceptions.js";
+import { getText } from "../node_modules/polyscript/esm/fetch-utils.js";
+
+export { getText };
 
 /**
  * This is a fetch wrapper that handles any non 200 responses and throws a

package/src/plugins/error.js

@@ -24,7 +24,7 @@ hooks.onBeforeRun.add(function override(pyScript) {
 // Error hook utilities
 
 // Custom function to show notifications
-function notify(message) {
+export function notify(message) {
     const div = document.createElement("div");
     div.className = "py-error";
     div.textContent = message;

package/src/plugins.js

@@ -1,4 +1,4 @@
 // ⚠️ This file is an artifact: DO NOT MODIFY
 export default {
-    error: () => import("./plugins/error.js"),
+    error: () => import(/* webpackIgnore: true */ "./plugins/error.js"),
 };

package/src/stdlib/pyscript/__init__.py

@@ -0,0 +1,34 @@
+# Some notes about the naming conventions and the relationship between various
+# similar-but-different names.
+#
+# import pyscript
+#     this package contains the main user-facing API offered by pyscript. All
+#     the names which are supposed be used by end users should be made
+#     available in pyscript/__init__.py (i.e., this file)
+#
+# import _pyscript
+#     this is an internal module implemented in JS. It is used internally by
+#     the pyscript package, end users should not use it directly. For its
+#     implementation, grep for `interpreter.registerJsModule("_pyscript",
+#     ...)` in core.js
+#
+# import js
+#     this is the JS globalThis, as exported by pyodide and/or micropython's
+#     FFIs. As such, it contains different things in the main thread or in a
+#     worker.
+#
+# import pyscript.magic_js
+#     this submodule abstracts away some of the differences between the main
+#     thread and the worker. In particular, it defines `window` and `document`
+#     in such a way that these names work in both cases: in the main thread,
+#     they are the "real" objects, in the worker they are proxies which work
+#     thanks to coincident.
+#
+# from pyscript import window, document
+#     these are just the window and document objects as defined by
+#     pyscript.magic_js. This is the blessed way to access them from pyscript,
+#     as it works transparently in both the main thread and worker cases.
+
+from pyscript.magic_js import RUNNING_IN_WORKER, window, document, sync
+from pyscript.display import HTML, display
+from pyscript.event_handling import when

package/src/stdlib/pyscript/display.py

@@ -0,0 +1,154 @@
+import base64
+import html
+import io
+import re
+
+from pyscript.magic_js import document, window, current_target
+
+_MIME_METHODS = {
+    "__repr__": "text/plain",
+    "_repr_html_": "text/html",
+    "_repr_markdown_": "text/markdown",
+    "_repr_svg_": "image/svg+xml",
+    "_repr_png_": "image/png",
+    "_repr_pdf_": "application/pdf",
+    "_repr_jpeg_": "image/jpeg",
+    "_repr_latex": "text/latex",
+    "_repr_json_": "application/json",
+    "_repr_javascript_": "application/javascript",
+    "savefig": "image/png",
+}
+
+
+def _render_image(mime, value, meta):
+    # If the image value is using bytes we should convert it to base64
+    # otherwise it will return raw bytes and the browser will not be able to
+    # render it.
+    if isinstance(value, bytes):
+        value = base64.b64encode(value).decode("utf-8")
+
+    # This is the pattern of base64 strings
+    base64_pattern = re.compile(
+        r"^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?$"
+    )
+    # If value doesn't match the base64 pattern we should encode it to base64
+    if len(value) > 0 and not base64_pattern.match(value):
+        value = base64.b64encode(value.encode("utf-8")).decode("utf-8")
+
+    data = f"data:{mime};charset=utf-8;base64,{value}"
+    attrs = " ".join(['{k}="{v}"' for k, v in meta.items()])
+    return f'<img src="{data}" {attrs}></img>'
+
+
+def _identity(value, meta):
+    return value
+
+
+_MIME_RENDERERS = {
+    "text/plain": html.escape,
+    "text/html": _identity,
+    "image/png": lambda value, meta: _render_image("image/png", value, meta),
+    "image/jpeg": lambda value, meta: _render_image("image/jpeg", value, meta),
+    "image/svg+xml": _identity,
+    "application/json": _identity,
+    "application/javascript": lambda value, meta: f"<script>{value}<\\/script>",
+}
+
+
+class HTML:
+    """
+    Wrap a string so that display() can render it as plain HTML
+    """
+
+    def __init__(self, html):
+        self._html = html
+
+    def _repr_html_(self):
+        return self._html
+
+
+def _eval_formatter(obj, print_method):
+    """
+    Evaluates a formatter method.
+    """
+    if print_method == "__repr__":
+        return repr(obj)
+    elif hasattr(obj, print_method):
+        if print_method == "savefig":
+            buf = io.BytesIO()
+            obj.savefig(buf, format="png")
+            buf.seek(0)
+            return base64.b64encode(buf.read()).decode("utf-8")
+        return getattr(obj, print_method)()
+    elif print_method == "_repr_mimebundle_":
+        return {}, {}
+    return None
+
+
+def _format_mime(obj):
+    """
+    Formats object using _repr_x_ methods.
+    """
+    if isinstance(obj, str):
+        return html.escape(obj), "text/plain"
+
+    mimebundle = _eval_formatter(obj, "_repr_mimebundle_")
+    if isinstance(mimebundle, tuple):
+        format_dict, _ = mimebundle
+    else:
+        format_dict = mimebundle
+
+    output, not_available = None, []
+    for method, mime_type in reversed(_MIME_METHODS.items()):
+        if mime_type in format_dict:
+            output = format_dict[mime_type]
+        else:
+            output = _eval_formatter(obj, method)
+
+        if output is None:
+            continue
+        elif mime_type not in _MIME_RENDERERS:
+            not_available.append(mime_type)
+            continue
+        break
+    if output is None:
+        if not_available:
+            window.console.warn(
+                f"Rendered object requested unavailable MIME renderers: {not_available}"
+            )
+        output = repr(output)
+        mime_type = "text/plain"
+    elif isinstance(output, tuple):
+        output, meta = output
+    else:
+        meta = {}
+    return _MIME_RENDERERS[mime_type](output, meta), mime_type
+
+
+def _write(element, value, append=False):
+    html, mime_type = _format_mime(value)
+    if html == "\\n":
+        return
+
+    if append:
+        out_element = document.createElement("div")
+        element.append(out_element)
+    else:
+        out_element = element.lastElementChild
+        if out_element is None:
+            out_element = element
+
+    if mime_type in ("application/javascript", "text/html"):
+        script_element = document.createRange().createContextualFragment(html)
+        out_element.append(script_element)
+    else:
+        out_element.innerHTML = html
+
+
+def display(*values, target=None, append=True):
+    if target is None:
+        target = current_target()
+
+    element = document.getElementById(target)
+    for v in values:
+        _write(element, v, append=append)