miqro 6.1.2 → 6.1.4

package/editor/components/highlight-text-area.tsx

@@ -0,0 +1,144 @@
+//import hljs from "../lib/highlight/core.min.js"
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from "highlight.js/lib/languages/xml";
+import css from "highlight.js/lib/languages/css";
+import scss from "highlight.js/lib/languages/scss";
+import markdown from "highlight.js/lib/languages/markdown";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import yaml from "highlight.js/lib/languages/yaml";
+import typescript from "highlight.js/lib/languages/typescript";
+import c from "highlight.js/lib/languages/c";
+import cpp from "highlight.js/lib/languages/cpp";
+import bash from "highlight.js/lib/languages/bash";
+import python from "highlight.js/lib/languages/python";
+import text from "highlight.js/lib/languages/plaintext";
+import json from "highlight.js/lib/languages/json";
+
+// Then register the languages you need
+hljs.registerLanguage('text', text);
+hljs.registerLanguage('dockerfile', dockerfile);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('scss', scss);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('c', c);
+hljs.registerLanguage('cpp', cpp);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('json', json);
+
+/*!
+Theme: GitHub Dark
+Description: Dark theme as seen on github.com
+Author: github.com
+Maintainer: @Hirse
+Updated: 2021-05-15
+
+Outdated base version: https://github.com/primer/github-syntax-dark
+Current colors taken from GitHub's CSS
+*/
+const STYLE = `pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}code{outline: 0px solid rgba(0, 0, 0, 0.263);caret-color: red;}.hljs-name{color: #e8910d;}.hljs-tag .hljs-attr, .hljs-tag .hljs-name{color: #e8910d;}`;
+const POSTTYLE = "pre{padding:0; margin:0;} code { background-color: #000000; color: #ffffff; }";
+const TAG_NAME = "HIGHLIGHT-TEXT-AREA";
+
+function runHighlight(content: string | null, language: string) {
+  const now = Date.now();
+  console.log("runHighlight [%s]", language);
+  const value = hljs.highlight(String(content), {
+    language,
+    ignoreIllegals: true
+  }).value;
+  console.log("runHighlight [%s] took [%s]ms", language, Date.now() - now);
+  return value;
+}
+
+function emitEvents(elementRef: any, topMost: any, content: string, oncontentchange?: (ev: CustomEvent) => void) {
+  if (elementRef.current && topMost.current) {
+    const currentContent = elementRef.current.textContent as any;
+    const webComponentElement = (topMost.current as HTMLElement).parentNode as HTMLElement;
+    const event = new CustomEvent("contentchange", { detail: currentContent });
+    if (webComponentElement && webComponentElement instanceof HTMLElement && webComponentElement.tagName === TAG_NAME) {
+      try {
+        webComponentElement.dispatchEvent(event);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    if (typeof oncontentchange === "function") {
+      try {
+        oncontentchange(event);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+}
+
+export function HighlightTextArea({ content, language, oncontentchange, tabChar, disabled }:
+  { language: string; content: string; disabled?: string; tabChar?: string; oncontentchange?: (ev: CustomEvent) => void }
+) {
+  const elementRef = jsx.useRef();
+  const topMost = jsx.useRef();
+  const [lastLanguage, setlastLanguage] = jsx.useState(language);
+
+  // effect to watch changes to language
+  jsx.useEffect(() => {
+    if (elementRef.current && (lastLanguage !== language || elementRef.current.textContent !== content)) {
+      setlastLanguage(language);
+      elementRef.current.innerHTML = runHighlight(content, language);
+    }
+  }, [lastLanguage, language, elementRef.current, content])
+
+  return <pre ref={topMost}>
+    <style innerHTML={STYLE + POSTTYLE} />
+    <code
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      contenteditable={disabled ? "false" : "true"}
+      ref={elementRef}
+      tabindex="0"
+      innerHTML={!elementRef.current ? runHighlight(content, language) : null}
+      onfocusout={async (ev) => {
+        ev.preventDefault();
+        if (elementRef.current) {
+          if (content !== elementRef.current.textContent) {
+            //setlastContent(String(elementRef.current.textContent));
+            elementRef.current.innerHTML = runHighlight(elementRef.current.textContent, language);
+          }
+        }
+      }}
+      onkeydown={ev => {
+        if (ev.keyCode === 9) {
+          ev.preventDefault();
+          // now insert four non-breaking spaces for the tab key
+          const sel = document.getSelection();
+          if (sel && topMost.current) {
+            if ((topMost.current as any).contains(sel.anchorNode)) {
+              const range = sel.getRangeAt(0);
+              const tabNode = document.createTextNode(tabChar ? tabChar : "\t");
+              range.insertNode(tabNode);
+              range.setStartAfter(tabNode);
+              range.setEndAfter(tabNode);
+              sel.removeAllRanges();
+              sel.addRange(range);
+            }
+          }
+          emitEvents(elementRef, topMost, content, oncontentchange);
+        }
+      }}
+      oninput={ev => {
+        ev.preventDefault();
+        emitEvents(elementRef, topMost, content, oncontentchange);
+      }} />
+  </pre>
+}
+
+HighlightTextArea.asFragment = true;
+HighlightTextArea.shadowInit = false;

package/editor/components/log-viewer.tsx

@@ -0,0 +1,110 @@
+import { LogSocket } from "../common/log-socket.js";
+
+function getUniqueIdentifiers(lines: {
+  out: string;
+  identifier: string;
+}[]) {
+  const identifiersCache = {};
+  return lines.map(l => l.identifier).filter(identifier => {
+    const filter = !identifiersCache[identifier];
+    identifiersCache[identifier] = true;
+    return filter;
+  });
+}
+
+const LOG_LEVEL_MAP =
+{
+  "none": 0,
+  "error": 1,
+  "warn": 2,
+  "info": 3,
+  "debug": 4,
+  "trace": 5,
+};
+
+interface LogViewerProps {
+  socket: LogSocket;
+}
+
+export function LogViewer(props: LogViewerProps) {
+  const { lines, clearLog, getMaxlogsize, setMaxLogSize } = props.socket;
+
+  const maxLogSize = getMaxlogsize();
+
+  const refresh = jsx.useRefresh();
+
+  jsx.useEffect(() => {
+    refresh();
+  }, [maxLogSize]);
+
+  const [identifier, setidentifier] = jsx.useState<string>("");
+  const [level, setlevel] = jsx.useState<string>("debug");
+  const [filter, setfilter] = jsx.useState<string>("");
+  const identifiers = getUniqueIdentifiers(lines).sort();
+  //console.log(identifiers);
+
+  return <div class="log-viewer">
+    <div class="log-viewer-toolbar">
+      <button
+        class="btn"
+        onclick={e => {
+          e.preventDefault();
+          clearLog();
+        }}>clear log</button>
+      <select
+        value={maxLogSize}
+        oninput={ev => {
+          ev.preventDefault();
+          if (ev.target.value === "unlimited") {
+            setMaxLogSize("unlimited");
+          } else {
+            setMaxLogSize(parseInt(ev.target.value, 10));
+          }
+        }}
+        style="margin: 0; padding: 0; margin-left:auto; margin-right: 0;">
+        {["10", "1000", "5000", "10000", "15000", "20000", "25000", "50000", "100000", "500000", "1000000", "1500000", "5000000"].map(l => <option value={l}>{l}</option>)}
+        <option value="unlimited">unlimited</option>
+      </select>
+      <select
+        value={level}
+        oninput={ev => {
+          ev.preventDefault();
+          setlevel(ev.target.value);
+        }}
+        style="margin: 0; padding: 0; margin-left:var(--file-browser-separation); margin-right: 0;">
+        {["error", "warn", "info", "debug", "trace"].map(l => <option value={l}>{l}</option>)}
+        <option value="">all</option>
+      </select>
+      <select
+        value={identifier}
+        oninput={ev => {
+          ev.preventDefault();
+          setidentifier(ev.target.value);
+        }}
+        style="margin: 0; padding: 0; margin-left:var(--file-browser-separation); margin-right: 0;">
+        {identifiers.map(identifier => <option value={identifier}>{identifier}</option>)}
+        <option value=""></option>
+      </select>
+      <input
+        style="margin: 0; padding: 0; margin-left:var(--file-browser-separation); margin-right: 0;"
+        value={filter}
+        oninput={ev => {
+          ev.preventDefault();
+          setfilter(ev.target.value);
+        }}
+        type="text"
+        placeholder="..filter.." />
+    </div>
+    <div class="log-viewer-log">
+      {lines
+        .filter(line => identifier === "" || line.identifier === identifier)
+        .filter(line => filter === "" || line.out.indexOf(filter) !== -1)
+        .filter(line => {
+          return (level === "" || LOG_LEVEL_MAP[level] >= LOG_LEVEL_MAP[line.level]);
+        })
+        .map(line =>
+          <p style="margin: 0; padding: 0; border-radius: 0; font-size: 12px;" class={line.level === "error" ? "info-danger" : line.level === "warn" ? "info-warn" : line.level === "trace" ? "info-success" : line.level === "debug" ? "info-info" : ""}>{line.out}</p>
+        ).reverse()}
+    </div>
+  </div>
+}

package/editor/components/new-file.tsx

@@ -0,0 +1,169 @@
+import { BASEEDITOR_PATH } from "../common/constants.js";
+import { TEMPLATES } from "../common/templates.js";
+import { HighlightTextArea } from "./highlight-text-area.js";
+
+export function NewFile(props: { migrations: string[]; services: string[]; open: boolean; ondone: (file?: string) => void; }) {
+
+  const [template, settemplate] = jsx.useState("EMPTY");
+
+  const refresh = jsx.useRefresh();
+
+  const [service, setservice] = jsx.useState(props.services[0]);
+
+  const nameInput = jsx.useRef();
+  //const open = dialog ? dialog.open : false;
+
+  /*jsx.useEffect(() => {
+    if (dialog) {
+      //console.log((dialogRef.current as any).open);
+      if (open !== props.open) {
+        if (nameInput.current) {
+          nameInput.current.value = "";
+          nameInput.current.focus();
+        }
+        if (props.open) {
+          console.log("showModal");
+          dialog.showModal();
+          //(dialogRef.current as any).show();
+        } else {
+          console.log("closeModal");
+          //dialog.close();
+        }
+      }
+    }
+  }, [dialog, open, props.open]);*/
+  jsx.useEffect(() => {
+
+    if (nameInput.current) {
+      nameInput.current.value = "";
+      nameInput.current.focus();
+    }
+  }, [nameInput.current]);
+
+  function close(file?: string) {
+    //console.log("closeModal");
+    if (props.ondone) {
+      props.ondone(file);
+    }
+  }
+
+
+  let nextMigrationNumber = 1;
+  if (props.migrations.length > 0) {
+    const lastMigration = props.migrations[props.migrations.length - 1];
+    const indexOfDash = lastMigration.indexOf("-");
+    if (indexOfDash !== -1) {
+      nextMigrationNumber = parseInt(lastMigration.substring(0, indexOfDash), 10) + 1;
+    }
+  }
+
+  const httpPath = (TEMPLATES[template].filename ? TEMPLATES[template].filename : nameInput.current?.value) + (TEMPLATES[template].httpSufix ? TEMPLATES[template].httpSufix : "");
+
+  const filename = (service ? service + "/" : "") + (service && TEMPLATES[template].prefix ? TEMPLATES[template].prefix + "/" : "") + (template === "MIGRATION" ? nextMigrationNumber + "-" : "") + (TEMPLATES[template].filename ? TEMPLATES[template].filename : nameInput.current?.value) + (TEMPLATES[template].sufix ? TEMPLATES[template].sufix : "");
+
+  async function createNewFile() {
+    if ((nameInput.current && nameInput.current.value) || TEMPLATES[template].filename) {
+      const t = TEMPLATES[template];
+      await fetch(BASEEDITOR_PATH + "/api/fs/write", {
+        method: "POST",
+        headers: {
+          ["content-type"]: "application/json"
+        },
+        body: JSON.stringify({
+          path: filename,
+          contents: t.template ? t.template(filename, httpPath) : ""
+        })
+      });
+      return filename;
+    }
+  }
+
+  return <>
+    {props.open ? <dialog
+      class="new-dialog"
+      open="">
+      <div class="dialog-header">
+        <h1>Create new File</h1>
+      </div>
+      <div class="dialog-body">
+        <select
+          value={service}
+          oninput={ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            console.log(ev.target.value);
+            setservice(ev.target.value);
+          }}
+          style="margin: 0; padding: 0; margin-left:auto; margin-right: var(--file-browser-separation); width: 100%; margin-top: var(--file-browser-separation); margin-bottom: var(--file-browser-separation);">
+          <option value={""}></option>
+          {props.services.map(service => <option value={service}>{service}</option>)}
+        </select>
+        <p
+          style="margin: 0; margin-bottom: var(--file-browser-separation);"
+        >{filename}</p>
+        {!TEMPLATES[template].filename ? <form
+          style="width: 100%;"
+          onsubmit={async (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            const path = await createNewFile();
+            close(path);
+          }}>
+          <input
+            style="width: 100%;"
+            onkeydown={ev => {
+              if (ev.keyCode === 27) {
+                // catch esc
+                ev.stopPropagation();
+                ev.preventDefault();
+                close();
+              }
+              refresh();
+            }}
+            ref={nameInput}
+            type="text"
+            placeholder="...filename..." />
+        </form> : <></>}
+        <select
+          value={template}
+          oninput={ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            console.log(ev.target.value);
+            settemplate(ev.target.value);
+          }}
+          style="margin: 0; padding: 0; margin-left:auto; margin-right: var(--file-browser-separation); width: 100%; margin-top: var(--file-browser-separation);">
+          {Object.keys(TEMPLATES).map(templateName => <option value={templateName}>{TEMPLATES[templateName].displayName}</option>)}
+        </select>
+        {TEMPLATES[template].template ? <div
+          class="new-dialog-preview">
+          <HighlightTextArea
+            content={TEMPLATES[template].template(filename, httpPath)}
+            language={TEMPLATES[template].language}
+            disabled="true" />
+        </div> : <></>}
+      </div>
+      <div class="dialog-footer">
+        <button
+          class="btn danger"
+          onclick={ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            close();
+          }}>cancel</button>
+        <button
+          style="margin-left: auto;"
+          class="btn active"
+          onclick={async (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            const path = await createNewFile();
+            close(path);
+          }}>create</button>
+      </div>
+    </dialog> : <></>}
+  </>
+}
+
+NewFile.asFragment = true;
+NewFile.shadowInit = false;

package/editor/components/scroll-query.tsx

@@ -0,0 +1,22 @@
+let scrollTimeout2: any = null;
+
+export function useScroll(): [{ scrollTop: string; scrollLeft: string }, (newScroll: { scrollTop: number; scrollLeft: number; }, inmediate?: boolean) => void] {
+    const [scrollTop, setscrollTop] = jsx.useQuery("scrollTop", "0");
+    const [scrollLeft, setscrollLeft] = jsx.useQuery("scrollLeft", "0");
+
+    return [{
+        scrollTop: scrollTop as string,
+        scrollLeft: scrollLeft as string
+    }, (newScroll: { scrollTop: number; scrollLeft: number; }, inmediate?: boolean) => {
+        clearTimeout(scrollTimeout2);
+        if (inmediate) {
+            setscrollTop(String(newScroll.scrollTop));
+            setscrollLeft(String(newScroll.scrollLeft));
+        } else {
+            scrollTimeout2 = setTimeout(() => {
+                setscrollTop(String(newScroll.scrollTop));
+                setscrollLeft(String(newScroll.scrollLeft));
+            }, 1000);
+        }
+    }]
+}

package/editor/components/start-page.tsx

@@ -0,0 +1,49 @@
+interface StartPageProps {
+  togglePanel: (panel: string) => void;
+  isPanelVisible: (panel: string) => boolean;
+  disableLog?: boolean; disablePreview?: boolean; disableReload?: boolean;
+}
+
+export function StartPage(props: StartPageProps) {
+
+  jsx.useEffect(() => {
+    if (!props.isPanelVisible("left")) {
+      props.togglePanel("left");
+    }
+  }, []);
+
+  return <div class={`start-page`}>
+    <div class="row center">
+      <h1>Start Page</h1>
+    </div>
+    <br />
+    <div class="row center">
+      <div class="row">
+        <div class={`toggle-panel-button left-side-panel-button ${props.isPanelVisible("left") ? "active" : ""}`}
+          onclick={ev => {
+            ev.preventDefault();
+            props.togglePanel("left");
+          }}
+        ></div>
+        <br />
+        {props.disableLog ? <></> : <div class={`toggle-panel-button bottom-side-panel-button ${props.isPanelVisible("bottom") ? "active" : ""}`}
+          onclick={ev => {
+            ev.preventDefault();
+            props.togglePanel("bottom");
+          }}
+        ></div>}
+        <br />
+        {props.disablePreview ? <></> : <div class={`toggle-panel-button right-side-panel-button ${props.isPanelVisible("right") ? "active" : ""}`}
+          onclick={ev => {
+            ev.preventDefault();
+            props.togglePanel("right");
+          }}
+        ></div>}
+      </div>
+    </div>
+    <br />
+  </div>;
+}
+
+StartPage.asFragment = true;
+StartPage.shadowInit = false;

package/editor/http/admin/editor/api/fs/delete.api.tsx

@@ -0,0 +1,32 @@
+import { APIRoute } from "@miqro/core";
+import { unlinkSync } from "node:fs";
+import { getPath } from "./read.api.js";
+
+export default {
+  description: "admin editor file deletion endpoint",
+  method: "POST",
+  path: "/delete",
+  middleware: [server.middleware.json()],
+  request: {
+    body: {
+      path: "string"
+    }
+  },
+  response: {
+    status: [200, 400],
+    body: {
+      message: "string"
+    }
+  },
+  handler: async (req, res) => {
+    const { path } = req.body;
+    await deleteFile(path);
+    return res?.json({
+      message: "OK"
+    });
+  }
+} as APIRoute;
+
+function deleteFile(path: string) {
+  unlinkSync(getPath(path));
+}

package/editor/http/admin/editor/api/fs/read.api.tsx

@@ -0,0 +1,55 @@
+import { APIRoute } from "@miqro/core";
+import { readFileSync } from "node:fs";
+import { SUPPORTED_LANGUAGES } from "../../../../../common/constants.js";
+import { relative, resolve } from "node:path";
+import { getLanguage } from "./scan.api.js";
+import { BASE_PATH } from "../../../../../common/constants.server.js";
+
+export default {
+  method: "POST",
+  path: "/read",
+  description: "admin editor file read endpoint",
+  middleware: [server.middleware.json()],
+  request: {
+    body: {
+      path: "string"
+    }
+  },
+  response: {
+    status: [200, 400],
+    body: {
+      contents: "string",
+      path: "string"
+    }
+  },
+  handler: async (req, res) => {
+    const { path } = req.body;
+    const contents = readFile(path);
+    return res?.json({
+      contents,
+      path
+    });
+  }
+} as APIRoute;
+
+export function readFile(path: string) {
+  const filePath = getPath(path);
+  const language = getLanguage(filePath);
+  if (SUPPORTED_LANGUAGES.includes(language)) {
+    const contents = readFileSync(filePath).toString();
+    return contents;
+  } else {
+    throw new Error("unsupported file format");
+  }
+
+}
+
+export function getPath(path: string) {
+  const realPath = resolve(BASE_PATH, path);
+
+  if (relative(BASE_PATH, realPath).startsWith("..")) {
+    throw new Error("invalid path! [" + path + "]");
+  }
+
+  return realPath;
+}

package/editor/http/admin/editor/api/fs/rename.api.tsx

@@ -0,0 +1,41 @@
+import { APIRoute } from "@miqro/core";
+import { existsSync, mkdirSync, renameSync } from "node:fs";
+import { getPath } from "./read.api.js";
+import { dirname } from "node:path";
+
+export default {
+  middleware: [server.middleware.json()],
+  method: "POST",
+  description: "admin editor file rename endpoint",
+  path: "/rename",
+  request: {
+    body: {
+      path: "string",
+      newName: "string"
+    }
+  },
+  response: {
+    status: [200, 400],
+    body: {
+      message: "string"
+    }
+  },
+  handler: async (req, res) => {
+    const { path, newName } = req.body;
+    await rename(path, newName);
+    return res?.json({
+      message: "OK"
+    });
+  }
+} as APIRoute;
+
+export async function rename(path: string, newName: string) {
+  if (existsSync(path) && !existsSync(newName)) {
+    mkdirSync(dirname(getPath(newName)), {
+      recursive: true
+    });
+    renameSync(getPath(path), getPath(newName));
+  } else {
+    throw new Error("invalid paths");
+  }
+}