miqro 7.3.6 → 8.0.2

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

@@ -1,367 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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;