miqro 7.2.7 → 7.2.8

package/build/esm/editor/components/editor.js

@@ -0,0 +1,367 @@
+import * as jsx from "@miqro/jsx";
+import JSX from "@miqro/jsx";
+import { FileEditor } from "./file-editor.js";
+import { NewFile } from "./new-file.js";
+import { useScroll } from "./scroll-query.js";
+import { useFilterQuery } from "./filter-query.js";
+import { FileBrowser } from "./file-browser.js";
+import { StartPage } from "./start-page.js";
+import { BASEEDITOR_PATH } from "../common/constants.js";
+import { LogViewer } from "./log-viewer.js";
+import { useLogSocket } from "../common/log-socket.js";
+function InflateError2Map(errors) {
+    const errorMap = {};
+    for (const e of errors) {
+        const filePath = e.filePath;
+        const error = e.error;
+        errorMap[filePath] = {
+            error
+        };
+    }
+    return errorMap;
+}
+export function Editor(props) {
+    //console.dir(props);
+    const logSocket = useLogSocket({
+        disableLog: props.disablelog === "true" || props.disablelog === true ? true : false
+    });
+    const [services, setservices] = jsx.useState(JSON.parse(props.services));
+    const [collapsed, setCollapsed] = jsx.useState((() => {
+        const ret = {};
+        services.forEach(service => {
+            ret[`${service}/`] = false;
+        });
+        return ret;
+    })());
+    /*const [panelVisible, setpanelVisible] = jsx.useState<{
+      [panel: string]: boolean | undefined;
+    }>({ right: false, bottom: false });*/
+    const [rightPanelVisible, setRightPanelVisible] = jsx.useQuery("right-panel", "0");
+    const [leftPanelVisible, setLeftPanelVisible] = jsx.useQuery("left-panel", "1");
+    const [bottomPanelVisible, setBottomPanelVisible] = jsx.useQuery("bottom-panel", "0");
+    const [migrations, setmigrations] = jsx.useState(JSON.parse(props.migrations));
+    const [files, setfiles] = jsx.useState(JSON.parse(props.files));
+    const [reloadString, setreloadString] = jsx.useState(props.reloadstring);
+    const [changed, setchanged] = jsx.useState({});
+    const [errors, seterrors] = jsx.useState(InflateError2Map(JSON.parse(props.errors)));
+    const [newFileDialogShow, setnewFileDialogShow] = jsx.useState(false);
+    const [filter, setfilter] = useFilterQuery();
+    const refresh = jsx.useRefresh();
+    const [opened, setopened] = jsx.useState({});
+    const [current, setcurrent] = jsx.useQuery("current", props.initialcurrent ? props.initialcurrent : "");
+    const [_, setScroll] = useScroll();
+    if (current instanceof Array) {
+        setcurrent(current[0]);
+    }
+    else if (current) {
+        if (!opened[current]) {
+            const file = files.filter(file => file.filePath === current)[0];
+            if (!file) {
+                setcurrent("");
+            }
+            else {
+                openFile(file.filePath);
+            }
+        }
+    }
+    /*useEffect(() => {
+      for (const service of services) {
+        if (collapsed[`${service}/`] === undefined) {
+          collapsed[`${service}/`] = true;
+          refresh();
+        }
+      }
+    }, services);*/
+    function openFile(filePath) {
+        console.log("open [%s]", filePath);
+        const isOpen = opened[filePath];
+        setScroll({
+            scrollLeft: 0,
+            scrollTop: 0
+        });
+        if (!isOpen) {
+            const file = files.filter(file => file.filePath === filePath)[0];
+            if (!file) {
+                throw new Error("cannot find reference to file [" + filePath + "]");
+            }
+            opened[file.filePath] = {
+                content: null,
+                ...file
+            };
+            changed[file.filePath] = null;
+            setopened(opened);
+            if (opened[file.filePath].content === null && (globalThis.window) !== undefined) {
+                if (opened[file.filePath].language !== "binary") {
+                    fetch(BASEEDITOR_PATH + "/api/fs/read", {
+                        method: "POST",
+                        headers: {
+                            ["content-type"]: "application/json"
+                        },
+                        body: JSON.stringify({
+                            path: file.filePath
+                        })
+                    }).then(response => {
+                        if (response.ok) {
+                            response.json().then(json => {
+                                const contents = json.contents;
+                                if (opened[file.filePath]) {
+                                    opened[file.filePath].content = contents;
+                                    changed[file.filePath] = contents;
+                                    setopened(opened);
+                                    setchanged(changed);
+                                    refresh();
+                                }
+                            });
+                        }
+                    });
+                }
+                else {
+                    opened[file.filePath].content = "";
+                    changed[file.filePath] = "";
+                    setopened(opened);
+                    refresh();
+                }
+            }
+        }
+        setcurrent(filePath);
+    }
+    function closeFile(filePath) {
+        setScroll({
+            scrollTop: 0,
+            scrollLeft: 0
+        });
+        console.log("closing [%s]", filePath);
+        //console.log("current [%s]", current);
+        if (filePath === current) {
+            setcurrent("");
+        }
+        delete opened[filePath];
+        delete changed[filePath];
+        setchanged(changed);
+        setopened(opened);
+        refresh();
+    }
+    async function scanFiles() {
+        const r = await fetch(BASEEDITOR_PATH + "/api/fs/scan", {
+            method: "GET"
+        });
+        if (r.ok) {
+            const { files, services } = await r.json();
+            setfiles(files);
+            setservices(services);
+            for (const file of files) {
+                if (opened[file.filePath]) {
+                    opened[file.filePath] = {
+                        content: opened[file.filePath].content,
+                        ...file
+                    };
+                }
+            }
+        }
+    }
+    function isDirCollapsed(dir) {
+        console.log("isDirCollapsed [%s]", dir);
+        if (dir === "" || filter !== "") {
+            return false;
+        }
+        return collapsed[dir] || collapsed[dir] === undefined ? true : false;
+        //return collapsed[dir] ? false : true;
+    }
+    function toggleCollapseDir(dir) {
+        console.log("toggleCollapseDir [%s]", dir);
+        collapsed[dir] = isDirCollapsed(dir) ? false : true;
+        setCollapsed(collapsed);
+        refresh();
+    }
+    async function deleteFile(file) {
+        console.log("deleteFile [%s]", file);
+        const r = await fetch(BASEEDITOR_PATH + "/api/fs/delete", {
+            method: "POST",
+            headers: {
+                ["content-type"]: "application/json"
+            },
+            body: JSON.stringify({
+                path: file
+            })
+        });
+        if (r.ok) {
+            await scanFiles();
+            if (opened[file]) {
+                closeFile(file);
+            }
+        }
+    }
+    async function renameFile(file, newName) {
+        console.log("renameFile [%s] to [%s]", file, newName);
+        if (opened[file]) {
+            const r = await fetch(BASEEDITOR_PATH + "/api/fs/rename", {
+                method: "POST",
+                headers: {
+                    ["content-type"]: "application/json"
+                },
+                body: JSON.stringify({
+                    path: file,
+                    newName
+                })
+            });
+            if (r.ok) {
+                const fileO = opened[file];
+                const changeO = changed[file];
+                fileO.filePath = newName;
+                delete changed[file];
+                delete opened[file];
+                opened[newName] = fileO;
+                changed[newName] = changeO;
+                await scanFiles();
+                setopened(opened);
+                setchanged(changed);
+                if (current === file) {
+                    setcurrent(newName);
+                }
+                refresh();
+            }
+        }
+    }
+    async function saveFile(file) {
+        console.log("saveFile [%s]", file);
+        const contents = changed[file];
+        if (opened[file] && contents !== undefined && contents !== null) {
+            const r = await fetch(BASEEDITOR_PATH + "/api/fs/write", {
+                method: "POST",
+                headers: {
+                    ["content-type"]: "application/json"
+                },
+                body: JSON.stringify({
+                    path: file,
+                    contents,
+                    override: true
+                })
+            });
+            if (r.ok) {
+                opened[file].content = contents;
+                setopened(opened);
+                setchanged(changed);
+                refresh();
+            }
+        }
+    }
+    async function reloadServer() {
+        const r = await fetch(BASEEDITOR_PATH + "/api/server/reload", {
+            method: "POST"
+        });
+        if (r.ok) {
+            const reloadResponse = await r.json();
+            if (reloadResponse.errors && reloadResponse.errors.length > 0) {
+                seterrors(InflateError2Map(reloadResponse.errors));
+                setreloadString(reloadResponse.reloadString);
+                refresh();
+            }
+            else {
+                setreloadString(reloadResponse.reloadString);
+                seterrors({});
+                refresh();
+            }
+            setmigrations(reloadResponse.migrations);
+            await scanFiles();
+        }
+    }
+    function setLanguage(file, newLanguage) {
+        if (opened[file]) {
+            opened[file].language = newLanguage;
+            setopened(opened);
+            refresh();
+        }
+    }
+    function hasFileContentChanged(filePath) {
+        if (!opened[filePath]) {
+            return false;
+        }
+        return changed[filePath] !== opened[filePath].content;
+    }
+    function isPanelVisible(panel) {
+        switch (panel) {
+            case "left":
+                return leftPanelVisible === "1";
+            case "bottom":
+                return bottomPanelVisible === "1";
+            case "right":
+                return rightPanelVisible === "1";
+            default:
+                return true;
+        }
+        //return panelVisible[panel] || panelVisible[panel] === undefined ? true : false;
+    }
+    function togglePanel(panel) {
+        console.log("togglePanel [%s]", panel);
+        /*panelVisible[panel] = !isPanelVisible(panel);
+        setpanelVisible(panelVisible);
+        refresh();*/
+        switch (panel) {
+            case "left":
+                return setLeftPanelVisible(isPanelVisible(panel) ? "0" : "1");
+            case "bottom":
+                return setBottomPanelVisible(isPanelVisible(panel) ? "0" : "1");
+            case "right":
+                return setRightPanelVisible(isPanelVisible(panel) ? "0" : "1");
+            default:
+                return;
+        }
+    }
+    const openedFile = opened[String(current)];
+    //console.log("Editor [%s]", openedFile?.filePath);
+    return JSX.createElement("div", { class: "editor" },
+        JSX.createElement("div", { class: `editor-firstrow${!isPanelVisible("bottom") ? " bottom-panel-hidden" : ""}` },
+            JSX.createElement(NewFile, { migrations: migrations, services: services, open: newFileDialogShow, ondone: async (path) => {
+                    setnewFileDialogShow(false);
+                    if (path) {
+                        await scanFiles();
+                        //await reloadServer();
+                    }
+                } }),
+            JSX.createElement(FileBrowser, { disableLog: props.disablelog, disablePreview: props.disablepreview, disableReload: props.disablereload, togglePanel: togglePanel, isPanelVisible: isPanelVisible, opened: Object.keys(opened).sort().map(o => opened[o]), isDirCollapsed: isDirCollapsed, toggleCollapseDir: toggleCollapseDir, migrations: migrations, hasErrors: (file) => errors[file] ? true : false, reloadServer: reloadServer, closeAll: () => {
+                    const openedList = Object.keys(opened);
+                    for (const o of openedList) {
+                        closeFile(o);
+                    }
+                }, closeFile: closeFile, current: current ? String(current) : "", files: files, filter: filter, hasFileContentChanged: hasFileContentChanged, isOpen: (file) => opened[file] !== undefined, openFile: openFile, saveAll: async () => {
+                    const openedList = Object.keys(opened);
+                    for (const o of openedList) {
+                        if (hasFileContentChanged(o)) {
+                            await saveFile(o);
+                        }
+                    }
+                    //await reloadServer();
+                }, scanFiles: scanFiles, setfilter: setfilter, showNewFile: () => {
+                    setnewFileDialogShow(true);
+                } }),
+            JSX.createElement("div", { class: `file-editor-list${!isPanelVisible("left") ? " left-panel-hidden" : ""}${!isPanelVisible("bottom") ? " bottom-panel-hidden" : ""}` }, !openedFile ?
+                JSX.createElement(StartPage, { disableLog: props.disablelog, disablePreview: props.disablepreview, disableReload: props.disablereload, isPanelVisible: isPanelVisible, togglePanel: togglePanel }) :
+                JSX.createElement("div", { class: "file-editor-container" },
+                    JSX.createElement(FileEditor, { disableLog: props.disablelog, disablePreview: props.disablepreview, disableReload: props.disablereload, isPanelVisible: isPanelVisible, togglePanel: togglePanel, reloadString: reloadString, error: errors[openedFile.filePath]?.error, changed: hasFileContentChanged(openedFile.filePath), setlanguage: (newLanguage) => setLanguage(openedFile.filePath, newLanguage), deleteFile: async () => {
+                            await deleteFile(openedFile.filePath);
+                            //await reloadServer();
+                        }, renameFile: async (newName) => {
+                            await renameFile(openedFile.filePath, newName);
+                            //await reloadServer();
+                        }, saveFile: async (reload = false) => {
+                            await saveFile(openedFile.filePath);
+                            if (reload) {
+                                await reloadServer();
+                            }
+                            //
+                        }, content: changed[openedFile.filePath] !== null ? changed[openedFile.filePath] : opened[openedFile.filePath].content, current: current === openedFile.filePath, revertFile: () => {
+                            changed[openedFile.filePath] = openedFile.content;
+                            setchanged(changed);
+                            refresh();
+                        }, contentchange: (content) => {
+                            changed[openedFile.filePath] = content;
+                            setopened(opened);
+                            refresh();
+                        }, closeFile: () => {
+                            closeFile(openedFile.filePath);
+                        }, path: openedFile.filePath, previewPath: openedFile.previewPath, apiPreview: openedFile.apiPreview, language: opened[openedFile.filePath].language })))),
+        JSX.createElement("div", { class: "editor-bottom-panel", style: `${!isPanelVisible("bottom") ? "display: none;" : ""}` },
+            JSX.createElement(LogViewer, { socket: logSocket })));
+}
+Editor.asFragment = true;
+Editor.shadowInit = false;

package/build/esm/editor/components/file-browser.d.ts

@@ -0,0 +1,37 @@
+interface FileBrowserFile {
+    filePath: string;
+    fileName: string;
+    language: string;
+    content?: string;
+    dirs: string[];
+}
+interface FileBrowserProps {
+    filter: string;
+    migrations: string[];
+    current: string;
+    isDirCollapsed: (dir: string) => boolean;
+    toggleCollapseDir: (dir: string) => void;
+    saveAll: () => void;
+    isOpen: (file: string) => boolean;
+    openFile: (file: string) => void;
+    setfilter: (newFilter: any) => void;
+    showNewFile: () => void;
+    scanFiles: () => void;
+    closeAll: () => void;
+    closeFile: (file: string) => void;
+    reloadServer: () => void;
+    hasFileContentChanged: (file: string) => boolean;
+    hasErrors: (file: string) => boolean;
+    files: FileBrowserFile[];
+    opened: {
+        fileName: string;
+        filePath: string;
+    }[];
+    isPanelVisible: (panel: string) => boolean;
+    togglePanel: (panel: string) => void;
+    disableLog?: boolean;
+    disablePreview?: boolean;
+    disableReload?: boolean;
+}
+export declare function FileBrowser(props: FileBrowserProps): JSX.Element;
+export {};

package/build/esm/editor/components/file-browser.js

@@ -0,0 +1,127 @@
+import JSX from "@miqro/jsx";
+export function FileBrowser(props) {
+    return JSX.createElement("div", { class: "file-browser", style: `${!props.isPanelVisible("left") ? "display: none;" : ""}` },
+        JSX.createElement("div", { class: "file-browser-toolbar" },
+            JSX.createElement("div", { class: "row" },
+                JSX.createElement("button", { class: "file-editor-button btn", style: `width: 10%;${props.disableReload ? "width: 30%;" : ""}`, onclick: ev => {
+                        ev.preventDefault();
+                        props.togglePanel("left");
+                    } }, "<<"),
+                props.disableLog ? JSX.createElement(JSX.Fragment, null) :
+                    JSX.createElement("button", { id: "log-btn", class: "file-editor-button btn", style: `width: 30%;${props.disableLog ? "display: none;" : ""}`, onclick: ev => {
+                            ev.preventDefault();
+                            props.togglePanel("bottom");
+                        } }, "log"),
+                props.disableReload ? JSX.createElement(JSX.Fragment, null) :
+                    JSX.createElement("button", { id: "scan-btn", class: "file-editor-button btn active", style: `width: 30%;${props.disableReload ? "display: none;" : ""}`, onclick: ev => {
+                            ev.preventDefault();
+                            props.scanFiles();
+                        } }, "scan"),
+                props.disableReload ? JSX.createElement(JSX.Fragment, null) :
+                    JSX.createElement("button", { id: "reload-btn", class: "file-editor-button btn warning", style: `width: 30%;${props.disableReload ? "display: none;" : ""}`, onclick: ev => {
+                            ev.preventDefault();
+                            props.reloadServer();
+                        } }, "reload")),
+            JSX.createElement("div", { class: "row" },
+                JSX.createElement("input", { type: "text", style: "width: 100%;", value: props.filter, oninput: ev => {
+                        ev.preventDefault();
+                        const text = ev.target.value;
+                        props.setfilter(text);
+                    }, placeholder: "..filter.." })),
+            JSX.createElement("div", { class: "row" },
+                props.disablePreview ? JSX.createElement(JSX.Fragment, null) :
+                    JSX.createElement("button", { id: "preview-btn", class: "file-editor-button btn", style: `width: 30%;${props.disablePreview ? "display: none;" : ""}`, onclick: ev => {
+                            ev.preventDefault();
+                            props.togglePanel("right");
+                        } }, "preview"),
+                JSX.createElement("button", { id: "new-btn", class: "file-editor-button btn info", style: "width: 20%;", onclick: ev => {
+                        ev.preventDefault();
+                        props.showNewFile();
+                    } }, "new"),
+                props.disableReload ? JSX.createElement(JSX.Fragment, null) :
+                    JSX.createElement("button", { id: "scan-btn", class: "file-editor-button btn active", style: `width: 30%;${!props.disableReload ? "display: none;" : ""}`, onclick: ev => {
+                            ev.preventDefault();
+                            props.scanFiles();
+                        } }, "scan"),
+                JSX.createElement("button", { id: "saveall-btn", class: "file-editor-button btn success", style: "width: 25%;", onclick: ev => {
+                        ev.preventDefault();
+                        props.saveAll();
+                    } }, "save"),
+                JSX.createElement("button", { id: "closeall-btn", class: "file-editor-button btn danger", style: "width: 25%;", onclick: ev => {
+                        ev.preventDefault();
+                        props.closeAll();
+                    } }, "close"))),
+        JSX.createElement("div", { class: "file-browser-files" },
+            props.opened.length > 0 ? JSX.createElement("div", { class: "file-browser-opened-files", style: "padding: var(--file-browser-separation);" },
+                JSX.createElement("ul", { style: "padding: 0; margin: 0;" }, props.opened.map(file => JSX.createElement(File, { closeFile: props.closeFile, current: props.current, fileName: file.fileName, filePath: file.filePath, hasErrors: props.hasErrors, hasFileContentChanged: props.hasFileContentChanged, isOpen: props.isOpen, openFile: props.openFile })))) : JSX.createElement(JSX.Fragment, null),
+            JSX.createElement(FileTree, { isDirCollapsed: props.isDirCollapsed, toggleCollapseDir: props.toggleCollapseDir, closeFile: props.closeFile, current: props.current, files: props.files, filter: props.filter, hasErrors: props.hasErrors, hasFileContentChanged: props.hasFileContentChanged, isOpen: props.isOpen, openFile: props.openFile })));
+}
+function FileTree(props) {
+    const ret = {
+        dirs: {},
+        files: [],
+        name: "",
+        fullName: ""
+    };
+    props.files.forEach((file) => {
+        let cDir = ret;
+        let fullName = "";
+        for (const dir of file.dirs) {
+            fullName += dir + "/";
+            if (cDir.dirs[dir] === undefined) {
+                const newDir = {
+                    dirs: {},
+                    files: [],
+                    name: dir,
+                    fullName: `${fullName}`
+                };
+                cDir.dirs[dir] = newDir;
+                cDir = newDir;
+            }
+            else {
+                cDir = cDir.dirs[dir];
+            }
+        }
+        cDir.files.push(file);
+    });
+    //console.dir(ret);
+    return JSX.createElement(FileTreeFolder, { ...props, tree: ret, level: 0 });
+}
+function FileTreeFolder(props) {
+    //console.dir(props.tree);
+    const dirs = Object.keys(props.tree.dirs).map(k => props.tree.dirs[k]);
+    const files = props.tree.files.filter(file => props.filter ? file.filePath.includes(props.filter) : true);
+    return JSX.createElement("ul", { style: `margin-left: calc(2 * var(--file-browser-separation-file));${props.level === 0 ? " padding: var(--file-browser-separation);" : ""}` },
+        JSX.createElement(JSX.Fragment, null,
+            props.tree.name !== "" ? JSX.createElement("div", { class: "file-browser-dir", style: "padding: 0;" },
+                JSX.createElement("p", { style: "margin: 0;" },
+                    props.tree.name,
+                    "/"),
+                JSX.createElement("button", { onclick: ev => {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        props.toggleCollapseDir(props.tree.fullName);
+                    }, class: "btn-small", style: "margin: 0; margin-left: calc(2 * var(--file-browser-separation));" }, props.isDirCollapsed(props.tree.fullName) ? "+" : "-")) : JSX.createElement(JSX.Fragment, null),
+            props.isDirCollapsed(props.tree.fullName) ? JSX.createElement(JSX.Fragment, null) :
+                JSX.createElement(JSX.Fragment, null,
+                    dirs.map(dir => {
+                        return JSX.createElement(FileTreeFolder, { ...props, tree: dir, level: props.level + 1 });
+                    }),
+                    files.map(file => JSX.createElement(File, { closeFile: props.closeFile, current: props.current, fileName: file.fileName, filePath: file.filePath, hasErrors: props.hasErrors, hasFileContentChanged: props.hasFileContentChanged, isOpen: props.isOpen, openFile: props.openFile })))));
+}
+function File(props) {
+    const isOpen = props.isOpen(props.filePath);
+    return JSX.createElement("li", { class: `file-browser-file${props.hasErrors(props.filePath) ? " error" : ""}${props.hasFileContentChanged(props.filePath) ? " changed" : ""}${props.current === props.filePath ? " active" : ""}${isOpen ? " open" : ""}`, style: "display: flex; justify-content: flex-start; align-items: center; margin-left: calc(2 * var(--file-browser-separation-file));", onclick: ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            props.openFile(props.filePath);
+        } },
+        JSX.createElement("p", { style: "margin: 0; padding: 0;" },
+            props.fileName,
+            props.hasFileContentChanged(props.filePath) ? "(*)" : ""),
+        JSX.createElement("button", { onclick: ev => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                props.closeFile(props.filePath);
+            }, class: "btn-small", style: props.isOpen(props.filePath) ? "margin-left: calc(2 * var(--file-browser-separation-file));" : "display: none;", disabled: !props.isOpen(props.filePath) }, "X"));
+}

package/build/esm/editor/components/file-editor-toolbar.d.ts

@@ -0,0 +1,22 @@
+interface FileEditorToolbar {
+    path: string;
+    language: string;
+    changed: boolean;
+    renameFile: (newName: string) => void;
+    deleteFile: () => void;
+    setlanguage: (newLang: string) => void;
+    saveFile: (reload?: boolean) => void;
+    revertFile: () => void;
+    closeFile: () => void;
+    togglePanel: (panel: string) => void;
+    isPanelVisible: (panel: string) => boolean;
+    disableLog?: boolean;
+    disablePreview?: boolean;
+    disableReload?: boolean;
+}
+export declare function FileEditorToolbar(props: FileEditorToolbar): JSX.Element;
+export declare namespace FileEditorToolbar {
+    var asFragment: boolean;
+    var shadowInit: boolean;
+}
+export {};

package/build/esm/editor/components/file-editor-toolbar.js

@@ -0,0 +1,95 @@
+import * as jsx from "@miqro/jsx";
+import JSX from "@miqro/jsx";
+import { SUPPORTED_LANGUAGES } from "../common/constants.js";
+export function FileEditorToolbar(props) {
+    const renamingRef = jsx.useRef();
+    const refresh = jsx.useRefresh();
+    const [renaming, setrenaming] = jsx.useState(false);
+    jsx.useEffect(() => {
+        if (renamingRef.current) {
+            renamingRef.current.value = props.path;
+            renamingRef.current.focus();
+            refresh();
+        }
+    }, [renamingRef.current]);
+    jsx.useEffect(() => {
+        setrenaming(false);
+    }, [props.path]);
+    return JSX.createElement("div", { class: "file-editor-toolbar" },
+        JSX.createElement("div", { class: "file-editor-toolbar-row" },
+            JSX.createElement("button", { class: "file-editor-button btn", style: `${props.isPanelVisible("left") ? "display: none;" : "margin-right: var(--file-browser-separation);"}`, onclick: ev => {
+                    ev.preventDefault();
+                    props.togglePanel("left");
+                } }, ">>"),
+            JSX.createElement("button", { id: "save-btn", disabled: !props.changed, class: `btn success`, onclick: ev => {
+                    ev.preventDefault();
+                    props.saveFile();
+                } }, "save"),
+            props.disableReload ? JSX.createElement(JSX.Fragment, null) : JSX.createElement("button", { id: "savereload-btn", disabled: !props.changed, class: `btn info`, style: "margin-left: var(--file-browser-separation);", onclick: ev => {
+                    ev.preventDefault();
+                    props.saveFile(true);
+                } }, "save/reload"),
+            JSX.createElement("button", { id: "revert-btn", disabled: !props.changed, style: "margin-left: var(--file-browser-separation);", class: `btn warning`, onclick: ev => {
+                    ev.preventDefault();
+                    props.revertFile();
+                } }, "revert"),
+            JSX.createElement("button", { id: "close-btn", class: `btn danger`, style: "margin-left: var(--file-browser-separation);", onclick: ev => {
+                    ev.preventDefault();
+                    props.closeFile();
+                } }, "close"),
+            SUPPORTED_LANGUAGES.includes(props.language) ?
+                JSX.createElement("select", { value: props.language, oninput: ev => {
+                        ev.preventDefault();
+                        props.setlanguage(ev.target.value);
+                    }, style: "margin: 0; padding: 0; margin-left: calc(2*var(--file-browser-separation-file));" }, SUPPORTED_LANGUAGES.map(language => JSX.createElement("option", { value: language }, language))) : JSX.createElement(JSX.Fragment, null)),
+        JSX.createElement("div", { class: "file-editor-toolbar-row" }, !renaming ?
+            JSX.createElement(JSX.Fragment, null,
+                JSX.createElement("p", { style: "margin-left:20px;", onclick: ev => {
+                        ev.preventDefault();
+                        setrenaming(true);
+                    } }, props.path)) :
+            JSX.createElement(JSX.Fragment, null,
+                JSX.createElement("form", { style: "width: 100%; height: 100%; margin-right: calc(2 * var(--file-browser-separation));", onsubmit: ev => {
+                        ev.preventDefault();
+                        setrenaming(false);
+                        if (renamingRef.current && renamingRef.current.value !== props.path) {
+                            setrenaming(false);
+                            props.renameFile(renamingRef.current.value);
+                        }
+                    } },
+                    JSX.createElement("input", { style: "width: 100%; height: 100%;", onfocusout: ev => {
+                            ev.preventDefault();
+                            //setrenaming(false);
+                        }, ref: renamingRef, onkeydown: (ev) => {
+                            if (ev.keyCode === 27) {
+                                // catch esc
+                                ev.preventDefault();
+                                setrenaming(false);
+                            }
+                            else {
+                                refresh();
+                            }
+                        }, type: "text" })),
+                renamingRef.current && renamingRef.current.value !== props.path && renamingRef.current.value !== "" ?
+                    JSX.createElement("button", { style: "margin-left: var(--file-browser-separation);", class: "btn info", onclick: ev => {
+                            ev.preventDefault();
+                            if (renamingRef.current) {
+                                setrenaming(false);
+                                props.renameFile(renamingRef.current.value);
+                            }
+                        } }, "rename file")
+                    : JSX.createElement(JSX.Fragment, null),
+                JSX.createElement("button", { style: "margin-left: var(--file-browser-separation);", class: "btn danger", onclick: ev => {
+                        ev.preventDefault();
+                        if (renamingRef.current) {
+                            setrenaming(false);
+                            props.deleteFile();
+                        }
+                    } }, "delete file"),
+                JSX.createElement("button", { style: "margin-left: var(--file-browser-separation);", class: "btn", onclick: ev => {
+                        ev.preventDefault();
+                        setrenaming(false);
+                    } }, "cancel"))));
+}
+FileEditorToolbar.asFragment = true;
+FileEditorToolbar.shadowInit = false;