Fix #2109 - Allow inline JSON config attribute in PyEditor (#2110)

Fix #2109 - Allow inline JSON config attribute in PyEditor

pyscript.core/src/config.js

@@ -45,6 +45,8 @@ const configDetails = async (config, type) => {
 
 const conflictError = (reason) => new Error(`(${CONFLICTING_CODE}): ${reason}`);
 
+const relative_url = (url, base = location.href) => new URL(url, base).href;
+
 const syntaxError = (type, url, { message }) => {
     let str = `(${BAD_CONFIG}): Invalid ${type}`;
     if (url) str += ` @ ${url}`;
@@ -108,7 +110,7 @@ for (const [TYPE] of TYPES) {
     if (!error && config) {
         try {
             const { json, toml, text, url } = await configDetails(config, type);
-            if (url) configURL = new URL(url, location.href).href;
+            if (url) configURL = relative_url(url);
             config = text;
             if (json || type === "json") {
                 try {
@@ -153,4 +155,4 @@ for (const [TYPE] of TYPES) {
     configs.set(TYPE, { config: parsed, configURL, plugins, error });
 }
 
-export default configs;
+export { configs, relative_url };

pyscript.core/src/core.js

@@ -19,7 +19,7 @@ import {
 
 import "./all-done.js";
 import TYPES from "./types.js";
-import configs from "./config.js";
+import { configs, relative_url } from "./config.js";
 import sync from "./sync.js";
 import bootstrapNodeAndPlugins from "./plugins-helper.js";
 import { ErrorCode } from "./exceptions.js";
@@ -84,6 +84,7 @@ const [
 
 export {
     TYPES,
+    relative_url,
     exportedPyWorker as PyWorker,
     exportedMPWorker as MPWorker,
     exportedHooks as hooks,
@@ -92,7 +93,7 @@ export {
 };
 
 export const offline_interpreter = (config) =>
-    config?.interpreter && new URL(config.interpreter, location.href).href;
+    config?.interpreter && relative_url(config.interpreter);
 
 const hooked = new Map();
 

pyscript.core/src/plugins/py-editor.js

@@ -1,6 +1,6 @@
 // PyScript py-editor plugin
 import { Hook, XWorker, dedent, defineProperties } from "polyscript/exports";
-import { TYPES, offline_interpreter, stdlib } from "../core.js";
+import { TYPES, offline_interpreter, relative_url, stdlib } from "../core.js";
 
 const RUN_BUTTON = `<svg style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>`;
 
@@ -37,11 +37,19 @@ async function execute({ currentTarget }) {
         const details = { type: this.interpreter };
         const { config } = this;
         if (config) {
-            details.configURL = config;
-            const { parse } = config.endsWith(".toml")
-                ? await import(/* webpackIgnore: true */ "../3rd-party/toml.js")
-                : JSON;
-            details.config = parse(await fetch(config).then((r) => r.text()));
+            details.configURL = relative_url(config);
+            if (config.endsWith(".toml")) {
+                const [{ parse }, toml] = await Promise.all([
+                    import(/* webpackIgnore: true */ "../3rd-party/toml.js"),
+                    fetch(config).then((r) => r.text()),
+                ]);
+                details.config = parse(toml);
+            } else if (config.endsWith(".json")) {
+                details.config = await fetch(config).then((r) => r.json());
+            } else {
+                details.configURL = relative_url("./config.txt");
+                details.config = JSON.parse(config);
+            }
             details.version = offline_interpreter(details.config);
         } else {
             details.config = {};
@@ -175,9 +183,7 @@ const init = async (script, type, interpreter) => {
         handleEvent: execute,
         interpreter,
         env,
-        config:
-            hasConfig &&
-            new URL(script.getAttribute("config"), location.href).href,
+        config: hasConfig && script.getAttribute("config"),
         get pySrc() {
             return isSetup ? source : editor.state.doc.toString();
         },

pyscript.core/src/plugins/py-terminal.js

@@ -1,5 +1,5 @@
 // PyScript py-terminal plugin
-import { TYPES } from "../core.js";
+import { TYPES, relative_url } from "../core.js";
 import { notify } from "./error.js";
 import { customObserver } from "polyscript/exports";
 
@@ -35,7 +35,7 @@ for (const type of TYPES.keys()) {
             document.head.append(
                 Object.assign(document.createElement("link"), {
                     rel: "stylesheet",
-                    href: new URL("./xterm.css", import.meta.url),
+                    href: relative_url("./xterm.css", import.meta.url),
                 }),
             );
         }