miqro 7.3.5 → 8.0.1

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

@@ -1,148 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-//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);
-          }
-          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

@@ -1,113 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-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

@@ -1,172 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-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

@@ -1,25 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-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

@@ -1,52 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-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

@@ -1,32 +0,0 @@
-import { defineRoute, JSONParser } from "@miqro/core";
-import { unlinkSync } from "node:fs";
-import { getPath } from "./read.api.js";
-
-export default defineRoute({
-  description: "admin editor file deletion endpoint",
-  method: "POST",
-  path: "/delete",
-  middleware: [JSONParser()],
-  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"
-    });
-  }
-});
-
-function deleteFile(path: string) {
-  unlinkSync(getPath(path));
-}

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

@@ -1,55 +0,0 @@
-import { APIRoute, defineRoute, JSONParser } from "@miqro/core";
-import { readFileSync, realpathSync } 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 defineRoute({
-  method: "POST",
-  path: "/read",
-  description: "admin editor file read endpoint",
-  middleware: [JSONParser()],
-  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
-    });
-  }
-});
-
-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 = realpathSync(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

@@ -1,41 +0,0 @@
-import { APIRoute, defineRoute, JSONParser } from "@miqro/core";
-import { existsSync, mkdirSync, renameSync } from "node:fs";
-import { getPath } from "./read.api.js";
-import { dirname } from "node:path";
-
-export default defineRoute({
-  middleware: [JSONParser()],
-  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"
-    });
-  }
-});
-
-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");
-  }
-}