Add support for python function runtime

This commit is contained in:
Peter Stockings
2025-09-28 13:32:42 +10:00
parent 38adbd22d2
commit 99723b4b6b
4 changed files with 58 additions and 40 deletions

View File

@@ -83,7 +83,9 @@ const Editor = {
this.editorJS = ace.edit("js-editor");
this.editorJS.setOptions({ maxLines: 100 });
this.editorJS.setTheme("ace/theme/github_dark");
this.editorJS.session.setMode("ace/mode/javascript");
this.editorJS.session.setMode(
this.runtime === "python" ? "ace/mode/python" : "ace/mode/javascript"
);
this.editorJS.setValue(this.jsValue, -1);
this.editorJS.session.on("change", () => {
@@ -397,61 +399,51 @@ const Editor = {
// Right side: Runtime toggle and Execute button
m("div", { class: "flex items-center space-x-4" }, [
// Runtime Toggle Switch
// Runtime Dropdown
m(
"label",
"select",
{
for: "runtime-toggle",
class: "inline-flex items-center cursor-pointer",
key: "runtime-selector",
class:
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
onchange: (e) => {
this.runtime = e.target.value;
this.editorJS.session.setMode(
this.runtime === "python"
? "ace/mode/python"
: "ace/mode/javascript"
);
},
},
[
m(
"span",
{
class:
"mr-3 text-sm font-medium " +
(this.runtime === "node"
? "text-green-500"
: "text-gray-400 dark:text-gray-500"),
},
"option",
{ value: "node", selected: this.runtime === "node" },
"Node"
),
m("div", { class: "relative" }, [
m("input[type=checkbox]", {
id: "runtime-toggle",
class: "sr-only peer",
checked: this.runtime === "deno",
onchange: (e) => {
this.runtime = e.target.checked ? "deno" : "node";
},
}),
m("div", {
class:
"w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600",
}),
]),
m(
"span",
{
class:
"ml-3 text-sm font-medium " +
(this.runtime === "deno"
? "text-blue-500"
: "text-gray-400 dark:text-gray-500"),
},
"option",
{ value: "deno", selected: this.runtime === "deno" },
"Deno"
),
m(
"option",
{ value: "python", selected: this.runtime === "python" },
"Python"
),
]
),
this.executeLoading
? m("div", {
key: "spinner",
class:
"animate-spin h-6 w-6 border-4 border-green-300 border-t-transparent rounded-full",
})
: m(
"button",
{
key: "execute-button",
class: "p-2 rounded-full hover:bg-gray-200 text-green-700",
onclick: () => this.execute(),
title: "Execute",