miqro 7.3.5 → 8.0.1

package/editor/components/file-browser.tsx

@@ -1,311 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-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) => 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 function FileBrowser(props: FileBrowserProps) {
-  return <div class="file-browser" style={`${!props.isPanelVisible("left") ? "display: none;" : ""}`}>
-    <div class="file-browser-toolbar">
-      <div class="row">
-        <button
-          class="file-editor-button btn"
-          style={`width: 10%;${props.disableReload ? "width: 30%;" : ""}`}
-          onclick={ev => {
-            ev.preventDefault();
-            props.togglePanel("left");
-          }}>{"<<"}</button>
-        {props.disableLog ? <></> :
-          <button
-            id="log-btn"
-            class="file-editor-button btn"
-            style={`width: 30%;${props.disableLog ? "display: none;" : ""}`}
-            onclick={ev => {
-              ev.preventDefault();
-              props.togglePanel("bottom");
-            }}>log</button>}
-        {props.disableReload ? <></> :
-          <button
-            id="scan-btn"
-            class="file-editor-button btn active"
-            style={`width: 30%;${props.disableReload ? "display: none;" : ""}`}
-            onclick={ev => {
-              ev.preventDefault();
-              props.scanFiles();
-            }}>scan</button>}
-        {props.disableReload ? <></> :
-          <button
-            id="reload-btn"
-            class="file-editor-button btn warning"
-            style={`width: 30%;${props.disableReload ? "display: none;" : ""}`}
-            onclick={ev => {
-              ev.preventDefault();
-              props.reloadServer();
-            }}>reload</button>}
-      </div>
-      <div class="row">
-        <input
-          type="text"
-          style="width: 100%;"
-          value={props.filter}
-          oninput={ev => {
-            ev.preventDefault();
-            const text = ev.target.value;
-            props.setfilter(text);
-          }}
-          placeholder={"..filter.."} />
-      </div>
-      <div class="row">
-        {props.disablePreview ? <></> :
-          <button
-            id="preview-btn"
-            class="file-editor-button btn"
-            style={`width: 30%;${props.disablePreview ? "display: none;" : ""}`}
-            onclick={ev => {
-              ev.preventDefault();
-              props.togglePanel("right");
-            }}>preview</button>}
-        <button
-          id="new-btn"
-          class="file-editor-button btn info"
-          style="width: 20%;"
-          onclick={ev => {
-            ev.preventDefault();
-            props.showNewFile();
-          }}>new</button>
-        {props.disableReload ? <></> :
-          <button
-            id="scan-btn"
-            class="file-editor-button btn active"
-            style={`width: 30%;${!props.disableReload ? "display: none;" : ""}`}
-            onclick={ev => {
-              ev.preventDefault();
-              props.scanFiles();
-            }}>scan</button>}
-        <button
-          id="saveall-btn"
-          class="file-editor-button btn success"
-          style="width: 25%;"
-          onclick={ev => {
-            ev.preventDefault();
-            props.saveAll();
-
-          }}>save</button>
-        <button
-          id="closeall-btn"
-          class="file-editor-button btn danger"
-          style="width: 25%;"
-          onclick={ev => {
-            ev.preventDefault();
-            props.closeAll();
-          }}>close</button>
-      </div>
-    </div>
-
-    <div class="file-browser-files">
-      {props.opened.length > 0 ? <div class="file-browser-opened-files" style="padding: var(--file-browser-separation);">
-        {/*<p style="padding: 0; margin: 0;">opened</p>*/}
-        <ul style="padding: 0; margin: 0;">
-          {props.opened.map(file => <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} />)}
-        </ul></div> : <></>}
-      <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} />
-    </div>
-  </div>
-}
-
-interface FileTreeProps {
-  isDirCollapsed: (dir: string) => boolean;
-  toggleCollapseDir: (dir: string) => void;
-  current: string;
-  files: FileBrowserFile[];
-  filter: string;
-  isOpen: (file: string) => boolean;
-  openFile: (file: string) => void;
-  closeFile: (file: string) => void;
-  hasErrors: (file: string) => boolean;
-  hasFileContentChanged: (file: string) => boolean;
-}
-
-interface FileTreeDir {
-  dirs: {
-    [name: string]: FileTreeDir
-  };
-  files: FileBrowserFile[];
-  name: string;
-  fullName: string;
-}
-
-function FileTree(props: FileTreeProps) {
-  const ret: FileTreeDir = {
-    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: FileTreeDir = {
-          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 <FileTreeFolder {...props} tree={ret} level={0} />
-}
-
-interface FileTreeFolderProps {
-  isDirCollapsed: (dir: string) => boolean;
-  toggleCollapseDir: (dir: string) => void;
-  tree: FileTreeDir;
-  current: string;
-  filter: string;
-  level: number;
-  isOpen: (file: string) => boolean;
-  openFile: (file: string) => void;
-  closeFile: (file: string) => void;
-  hasErrors: (file: string) => boolean;
-  hasFileContentChanged: (file: string) => boolean;
-}
-
-function FileTreeFolder(props: FileTreeFolderProps) {
-
-  //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 <ul style={`margin-left: calc(2 * var(--file-browser-separation-file));${props.level === 0 ? " padding: var(--file-browser-separation);" : ""}`}>
-    <>
-      {props.tree.name !== "" ? <div class="file-browser-dir" style="padding: 0;">
-        <p style="margin: 0;">{props.tree.name}/</p>
-        <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) ? "+" : "-"}</button>
-      </div> : <></>}
-      {props.isDirCollapsed(props.tree.fullName) ? <></> :
-        <>
-          {dirs.map(dir => {
-            return <FileTreeFolder {...props} tree={dir} level={props.level + 1} />
-          })}
-          {files.map(file => <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} />)
-          }
-        </>}
-    </>
-  </ul>
-}
-
-interface FileProps {
-  fileName: string;
-  filePath: string;
-  current: string;
-  isOpen: (file: string) => boolean;
-  openFile: (file: string) => void;
-  closeFile: (file: string) => void;
-  hasErrors: (file: string) => boolean;
-  hasFileContentChanged: (file: string) => boolean;
-}
-
-function File(props: FileProps) {
-  const isOpen = props.isOpen(props.filePath);
-
-  return <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);
-    }}>
-    <p style="margin: 0; padding: 0;">{props.fileName}{props.hasFileContentChanged(props.filePath) ? "(*)" : ""}</p>
-    <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</button>
-  </li>
-}

package/editor/components/file-editor-toolbar.tsx

@@ -1,194 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-import { SUPPORTED_LANGUAGES } from "../common/constants.js";
-
-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 function FileEditorToolbar(props: FileEditorToolbar) {
-
-  const renamingRef = jsx.useRef();
-  const refresh = jsx.useRefresh();
-  const [renaming, setrenaming] = jsx.useState<boolean>(false);
-
-  jsx.useEffect(() => {
-    if (renamingRef.current) {
-      renamingRef.current.value = props.path;
-      renamingRef.current.focus();
-      refresh();
-    }
-  }, [renamingRef.current]);
-
-  jsx.useEffect(() => {
-    setrenaming(false);
-  }, [props.path]);
-
-  return <div class="file-editor-toolbar">
-    <div class="file-editor-toolbar-row">
-      <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");
-        }}>{">>"}</button>
-      <button
-        id="save-btn"
-        disabled={!props.changed}
-        class={`btn success`}
-        onclick={ev => {
-          ev.preventDefault();
-          props.saveFile();
-        }}>save</button>
-      {props.disableReload ? <></> : <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</button>}
-      <button
-        id="revert-btn"
-        disabled={!props.changed}
-        style="margin-left: var(--file-browser-separation);"
-        class={`btn warning`}
-        onclick={ev => {
-          ev.preventDefault();
-          props.revertFile();
-        }}>revert</button>
-      <button
-        id="close-btn"
-        class={`btn danger`}
-        style="margin-left: var(--file-browser-separation);"
-        onclick={ev => {
-          ev.preventDefault();
-          props.closeFile();
-
-        }}>close</button>
-      {SUPPORTED_LANGUAGES.includes(props.language) ?
-        <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 => <option value={language}>{language}</option>)}
-        </select> : <></>}
-      {/*<div
-        style="margin-left: calc(2*var(--file-browser-separation));"
-        class={`toggle-panel-button left-side-panel-button ${props.isPanelVisible("left") ? "active" : ""}`}
-        onclick={ev => {
-          ev.preventDefault();
-          props.togglePanel("left");
-        }}
-      ></div>
-      <br />
-      <div
-        style="margin-left: calc(2*var(--file-browser-separation-file));"
-        class={`toggle-panel-button bottom-side-panel-button ${props.isPanelVisible("bottom") ? "active" : ""}`}
-        onclick={ev => {
-          ev.preventDefault();
-          props.togglePanel("bottom");
-        }}
-      ></div>
-      <br />
-      <div class={`toggle-panel-button right-side-panel-button ${props.isPanelVisible("right") ? "active" : ""}`}
-        onclick={ev => {
-          ev.preventDefault();
-          props.togglePanel("right");
-        }}
-      ></div>*/}
-
-
-    </div>
-    <div class="file-editor-toolbar-row">
-      {!renaming ?
-        <><p
-          style="margin-left:20px;"
-          onclick={ev => {
-            ev.preventDefault();
-            setrenaming(true);
-          }}>{props.path}</p>
-        </> :
-        <>
-          <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);
-              }
-            }}>
-            <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" />
-          </form>
-          {renamingRef.current && renamingRef.current.value !== props.path && renamingRef.current.value !== "" ?
-            <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</button>
-            : <></>}
-          <button
-            style="margin-left: var(--file-browser-separation);"
-            class="btn danger"
-            onclick={ev => {
-              ev.preventDefault();
-              if (renamingRef.current) {
-                setrenaming(false);
-                props.deleteFile();
-              }
-            }}>delete file</button>
-          <button
-            style="margin-left: var(--file-browser-separation);"
-            class="btn"
-            onclick={ev => {
-              ev.preventDefault();
-              setrenaming(false);
-            }}>cancel</button>
-        </>
-      }
-    </div>
-  </div>
-}
-
-FileEditorToolbar.asFragment = true;
-FileEditorToolbar.shadowInit = false;

package/editor/components/file-editor.tsx

@@ -1,125 +0,0 @@
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-import { APIPReview } from "./api-preview.js";
-import { FileEditorToolbar } from "./file-editor-toolbar.js";
-import { HighlightTextArea } from "./highlight-text-area.js";
-import { useScroll } from "./scroll-query.js";
-
-interface FileEditorProps {
-  current: boolean;
-  error: string;
-  path: string;
-  previewPath: string | undefined;
-  apiPreview: undefined | {
-    path: string;
-    method: string;
-  }[];
-  content: string | null;
-  contentchange: (content: string) => void;
-  closeFile: () => void;
-  saveFile: (reload?: boolean) => void;
-  revertFile: () => void;
-  deleteFile: () => void;
-  renameFile: (newName) => void;
-  setlanguage: (newLanguage) => void;
-  language: string;
-  changed: boolean;
-  reloadString: string;
-  togglePanel: (panel: string) => void;
-  isPanelVisible: (panel: string) => boolean;
-  disableLog?: boolean; disablePreview?: boolean; disableReload?: boolean;
-}
-
-export function FileEditor({ disableLog, disablePreview, disableReload, togglePanel, isPanelVisible, apiPreview, reloadString, error, revertFile, changed, setlanguage, saveFile, deleteFile, renameFile, current, path, previewPath, content, contentchange, closeFile, language }: FileEditorProps) {
-  //console.log("FileEditor [%s]", path);
-  const iFrameRef = jsx.useRef();
-  const scrollRef = jsx.useRef();
-  const [scroll, setScroll] = useScroll();
-
-  jsx.useEffect(() => {
-    if (scrollRef.current) {
-      (scrollRef.current as any).scrollLeft = scroll.scrollLeft;
-      (scrollRef.current as any).scrollTop = scroll.scrollTop;
-    }
-  }, [scrollRef.current]);
-
-  jsx.useEffect(() => {
-    if (current && scrollRef.current) {
-      setScroll({
-        scrollLeft: (scrollRef.current as any).scrollLeft,
-        scrollTop: (scrollRef.current as any).scrollTop
-      }, true);
-    }
-  }, [current]);
-
-  jsx.useEffect(() => {
-    if (iFrameRef.current) {
-      (iFrameRef.current as any).src = "";
-      (iFrameRef.current as any).src = previewPath;
-    }
-  }, [iFrameRef.current, previewPath, reloadString]);
-
-  return <div class="file-editor">
-    {content === null ? <p>loading</p> : <>
-      <FileEditorToolbar
-        disableLog={disableLog}
-        disablePreview={disablePreview}
-        disableReload={disableReload}
-        isPanelVisible={isPanelVisible}
-        togglePanel={togglePanel}
-        revertFile={revertFile}
-        closeFile={closeFile}
-        language={language}
-        path={path}
-        changed={changed}
-        saveFile={saveFile}
-        setlanguage={setlanguage}
-        deleteFile={deleteFile}
-        renameFile={renameFile} />
-      <div
-        //class={`file-editor-content${previewPath || apiPreview ? " split" : ""}`}
-        class="file-editor-content">
-        <div ref={scrollRef}
-          class={`file-editor-text-editor${previewPath || (apiPreview && apiPreview.length > 0) && isPanelVisible("right") ? " split" : ""}`}
-          //class={`file-editor-text-editor`}
-          onscroll={ev => {
-            setScroll({
-              scrollLeft: ev.target.scrollLeft,
-              scrollTop: ev.target.scrollTop
-            });
-          }}>
-          {error ?
-            <p class="file-editor-content-error">{error}</p>
-            : <></>}
-          {language !== "binary" ?
-            <HighlightTextArea
-              tabChar="  "
-              oncontentchange={(args: CustomEvent) => {
-                if (contentchange) {
-                  contentchange(args.detail);
-                }
-              }}
-              content={content}
-              language={language} /> : <p>binary data not supported</p>
-          }
-        </div>
-        {apiPreview && apiPreview.length > 0 ? <APIPReview
-          isPanelVisible={isPanelVisible}
-          apiPreview={apiPreview} /> : <></>}
-        {previewPath && isPanelVisible("right") ? <div
-          class={`file-editor-preview`}
-          style={`${!isPanelVisible("right") ? "display: none;" : ""}`}>
-          <div class="file-editor-preview-path"><a href={previewPath} target="_blank">open in new window</a></div>
-          <iframe
-            ref={iFrameRef}
-            src={previewPath} sandbox="allow-scripts allow-same-origin"></iframe>
-        </div> : <></>}
-      </div>
-    </>}
-  </div>
-}
-
-FileEditor.asFragment = true;
-FileEditor.shadowInit = false;
-

package/editor/components/filter-query.tsx

@@ -1,26 +0,0 @@
-
-import * as jsx from "@miqro/jsx";
-import JSX from "@miqro/jsx";
-
-let queryTimeout2: any = null;
-
-export function useFilterQuery(): [string, (newFilter: string, inmediate?: boolean) => void] {
-    const [filterQuery, setfilterQuery] = jsx.useQuery("filter", "");
-    const [filter, setfilter] = jsx.useState<string>(typeof filterQuery === "string" ? filterQuery : "");
-
-    return [
-        filter,
-        (newFilter: string, inmediate?: boolean) => {
-            clearTimeout(queryTimeout2);
-            if (inmediate) {
-                setfilter(newFilter);
-                setfilterQuery(newFilter);
-            } else {
-                setfilter(newFilter);
-                queryTimeout2 = setTimeout(() => {
-                    setfilter(newFilter);
-                    setfilterQuery(newFilter);
-                }, 1000);
-            }
-        }]
-}