miqro 7.2.7 → 7.2.8

package/editor/components/api-preview.tsx

@@ -0,0 +1,118 @@
+import { HighlightTextArea } from "./highlight-text-area.js";
+import * as jsx from "@miqro/jsx";
+import JSX from "@miqro/jsx";
+
+const DEFAULT_HEADERS = `{"content-type": "application/json"}`;
+const DEFAULT_BODY = `{}`;
+
+export function APIPReview(props: {
+  apiPreview?: {
+    path: string;
+    method: string;
+  }[];
+  isPanelVisible: (panel: string) => boolean;
+}) {
+  const pathRef = jsx.useRef();
+  const methodRef = jsx.useRef();
+  const headersRef = jsx.useRef();
+  const bodyRef = jsx.useRef();
+  const [headers, setHeaders] = jsx.useState<string>(DEFAULT_HEADERS);
+  const [body, setBody] = jsx.useState<string>(DEFAULT_BODY);
+
+  const [responseStatus, setresponseStatus] = jsx.useState<null | number>(null);
+  const [responseHeaders, setresponseHeaders] = jsx.useState<null | string>(null);
+  const [responseBody, setresponseBody] = jsx.useState<null | string>(null);
+
+  const { path, method } = props.apiPreview ? props.apiPreview[0] : { path: "", method: "" };
+
+  jsx.useEffect(() => {
+    setresponseStatus(null);
+    setresponseHeaders(null);
+    setresponseBody(null);
+    /*setHeaders(DEFAULT_HEADERS);
+    setBody(DEFAULT_BODY);*/
+  }, [path]);
+
+  const useBody = String(method).toLocaleLowerCase() !== "get";
+
+  function submit() {
+    try {
+      if (methodRef.current && pathRef.current && headersRef.current) {
+        setHeaders(headersRef.current.value);
+        if (bodyRef.current) {
+          setBody(bodyRef.current.value);
+        }
+        fetch(pathRef.current.value, useBody && bodyRef.current ? {
+          method: methodRef.current.value,
+          headers: JSON.parse(headersRef.current.value),
+          body: bodyRef.current.value
+        } : {
+          method: methodRef.current.value,
+          headers: JSON.parse(headersRef.current.value),
+        }).then(async (r) => {
+          setresponseStatus(r.status);
+          const headers = {};
+          r.headers.forEach((value, key) => {
+            headers[key] = value;
+          });
+          setresponseHeaders(JSON.stringify(headers, undefined, 2));
+          const text = await r.text();
+          setresponseBody(text);
+          try {
+            setresponseBody(JSON.stringify(JSON.parse(text), undefined, 2));
+          } catch (e) {
+            // ignore
+          }
+        }).catch(e => {
+          console.error(e);
+        });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  return <div
+    style={`${!props.isPanelVisible("right") ? "display: none;" : ""}${props.apiPreview ? "" : " display: none; "}margin:0; padding: 0; overflow: auto; max-height: 100%; width:100%;`}>
+    <form
+      onsubmit={ev => {
+        ev.preventDefault();
+        submit();
+      }}>
+      <p>path</p>
+      <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={path} ref={pathRef} />
+      <p>method</p>
+      <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={method} ref={methodRef} />
+      <p>headers</p>
+      <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={headers} ref={headersRef} />
+      {useBody ?
+        <>
+          <p>body</p>
+          <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={body} ref={bodyRef} />
+        </> :
+        <></>}
+      <button style="margin-top: var(--file-browser-separation); width: 100%;" class="btn"
+        onclick={ev => {
+          ev.preventDefault();
+          submit();
+        }}>submit</button>
+      <div>
+        <p>response status</p>
+        <p>{responseStatus}</p>
+        <p>response headers</p>
+        <HighlightTextArea
+          content={responseHeaders ? responseHeaders : "null"}
+          language={"json"}
+          disabled="true" />
+        <p>response body</p>
+        <HighlightTextArea
+          content={responseBody ? responseBody : "null"}
+          language={"json"}
+          disabled="true" />
+      </div>
+    </form>
+  </div>;
+}
+
+APIPReview.asFragment = true;
+APIPReview.shadowInit = false;

package/editor/components/editor.tsx

@@ -0,0 +1,496 @@
+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: {
+  filePath: string;
+  error: string;
+}[]) {
+  const errorMap: {
+    [filePath: string]: {
+      error: string
+    };
+  } = {};
+  for (const e of errors) {
+    const filePath = e.filePath;
+    const error = e.error;
+    errorMap[filePath] = {
+      error
+    };
+  }
+  return errorMap;
+}
+
+export function Editor(props: { disablelog?: boolean; disablepreview?: boolean; disablereload?: boolean; migrations: string; services: string; reloadstring: string; files: string; initialcurrent: string; classname?: string; errors: string }) {
+  //console.dir(props);
+  const logSocket = useLogSocket({
+    disableLog: (props as any).disablelog === "true" || props.disablelog === true ? true : false
+  });
+
+  const [services, setservices] = jsx.useState<string[]>(JSON.parse(props.services));
+  const [collapsed, setCollapsed] = jsx.useState<{
+    [dir: string]: boolean
+  }>((() => {
+    const ret: { [dir: string]: boolean } = {};
+    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<string[]>(JSON.parse(props.migrations));
+  const [files, setfiles] = jsx.useState(JSON.parse(props.files) as {
+    filePath: string;
+    language: string;
+    previewPath?: string;
+    dirs: string[];
+    apiPreview?: {
+      path: string;
+      method: string;
+    }[];
+    content?: string;
+    fileName: string;
+  }[]);
+  const [reloadString, setreloadString] = jsx.useState<string>(props.reloadstring);
+  const [changed, setchanged] = jsx.useState<{
+    [filePath: string]: string | null;
+  }>({});
+  const [errors, seterrors] = jsx.useState<{
+    [filePath: string]: {
+      error: string
+    };
+  }>(InflateError2Map(JSON.parse(props.errors)));
+  const [newFileDialogShow, setnewFileDialogShow] = jsx.useState<boolean>(false);
+  const [filter, setfilter] = useFilterQuery();
+
+  const refresh = jsx.useRefresh();
+  const [opened, setopened] = jsx.useState<{
+    [filePath: string]: {
+      filePath: string;
+      fileName: string;
+      language: string;
+      previewPath?: string;
+      apiPreview?: {
+        path: string;
+        method: string;
+      }[];
+      content: string | null;
+      error?: {
+        message: string;
+      }
+    }
+  }>({});
+  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: string) {
+    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: string) {
+    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: string) {
+    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: string) {
+    console.log("toggleCollapseDir [%s]", dir);
+    collapsed[dir] = isDirCollapsed(dir) ? false : true;
+    setCollapsed(collapsed);
+    refresh();
+  }
+
+  async function deleteFile(file: string) {
+    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: string, newName: string) {
+    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: string) {
+    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: string, newLanguage: string) {
+    if (opened[file]) {
+      opened[file].language = newLanguage;
+      setopened(opened);
+      refresh();
+    }
+  }
+
+  function hasFileContentChanged(filePath: string) {
+    if (!opened[filePath]) {
+      return false;
+    }
+    return changed[filePath] !== opened[filePath].content
+  }
+
+  function isPanelVisible(panel: string) {
+    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: string) {
+    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 <div class="editor">
+    <div class={`editor-firstrow${!isPanelVisible("bottom") ? " bottom-panel-hidden" : ""}`}>
+      <NewFile
+        migrations={migrations}
+        services={services}
+        open={newFileDialogShow}
+        ondone={async (path) => {
+          setnewFileDialogShow(false);
+          if (path) {
+            await scanFiles();
+            //await reloadServer();
+          }
+        }} />
+      <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);
+        }}
+      />
+      <div class={`file-editor-list${!isPanelVisible("left") ? " left-panel-hidden" : ""}${!isPanelVisible("bottom") ? " bottom-panel-hidden" : ""}`}>
+        {!openedFile ?
+          <StartPage
+            disableLog={props.disablelog}
+            disablePreview={props.disablepreview}
+            disableReload={props.disablereload}
+            isPanelVisible={isPanelVisible}
+            togglePanel={togglePanel}
+          /> :
+          <div class="file-editor-container">
+            <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: string) => 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} />
+          </div>}
+      </div>
+    </div>
+    <div class="editor-bottom-panel" style={`${!isPanelVisible("bottom") ? "display: none;" : ""}`}>
+      <LogViewer socket={logSocket} />
+    </div>
+  </div>
+}
+
+Editor.asFragment = true;
+Editor.shadowInit = false;