runlab 0.1.0 → 1.0.0

package/dist/app/app.js

@@ -0,0 +1,256 @@
+import { createEditor } from "./core/editor.js";
+import { createNavbar } from "./core/navbar.js";
+import { FileExplorer } from "./fileExplorer/FileExplorer.js";
+import { createTerminal } from "./terminal/terminal.js";
+
+export function generateContainer(parentId,w,h) {
+  const container = document.createElement("div");
+  container.id = "runlab-container";
+  Object.assign(container.style, {
+    width: w + "px",
+    height: h + "px",
+    border: "1px solid #000",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden"
+  });
+  document.getElementById(parentId).appendChild(container);
+  gridTemplate("runlab-container", w, h);
+  createEditor("runlab-editor","");
+
+  // View and Editor toggle
+  const editor = document.getElementById("runlab-editor");
+  const overlay = document.createElement("div");
+  overlay.id = "runlab-view";
+  Object.assign(overlay.style, {
+    position: "absolute",
+    inset: "0",
+    backgroundColor: "#303030"
+  });
+  editor.style.position = "relative";
+  editor.appendChild(overlay);
+
+  const viewContent = document.createElement("iframe");
+  viewContent.id = "runlab-view-content";
+  Object.assign(viewContent.style, {
+    width: "100%",
+    height: "100%",
+    border: "none",
+    backgroundColor: "rgba(255, 255, 255, 0.8)"
+  });
+  document.getElementById("runlab-view").appendChild(viewContent);
+
+  const fe = new FileExplorer("runlab-file-explorer");
+  const root = fe.getRoot();
+  setFileExplorerNode(fe);
+  createNavbar("runlab-navbar");
+
+  setEditorActive(false); // Start with editor off
+
+  // ===============================
+
+  createTerminal("runlab-terminal",root);
+
+}
+
+export function appendViewContent(codeReturned) {
+  const viewContent = document.getElementById("runlab-view-content");
+  viewContent.srcdoc = codeReturned;
+
+}
+
+function gridTemplate(parent) {
+  const grid = document.createElement('div');
+  grid.id = "runlab-grid";
+  Object.assign(grid.style, {
+    display: 'grid',
+    width: "100%",
+    height: "100%",
+    gridTemplateColumns: "1fr 4fr",  // coluna esquerda menor
+    gridTemplateRows: "0.15fr 2.5fr 1fr",     // top maior, bottom menor
+    gap: "2px",
+    padding: "2px",
+    boxSizing: "border-box",
+    backgroundColor: "#303030"
+  });
+
+  const navbar = document.createElement("div");
+  navbar.id = "runlab-navbar";
+  Object.assign(navbar.style, {
+    gridColumn: "1 / 3",   // ocupa as duas colunas
+    gridRow: "1 / 2",      // fica na linha 1
+    border: "1px solid #09090b"
+  });
+
+  //Left
+  const fileExplorer = document.createElement("div");
+  fileExplorer.id = "runlab-file-explorer";
+  Object.assign(fileExplorer.style, {
+    gridColumn: "1 / 2",
+    gridRow: "2 / 4",   // ocupa a linha 2 e 3
+    border: "1px solid #09090b"
+  });
+
+  //Right Top
+  const editor = document.createElement("div");
+  editor.id = "runlab-editor";
+  Object.assign(editor.style, {
+    gridColumn: "2 / 3",
+    gridRow: "2 / 3",  // linha logo após a navbar
+    border: "1px solid #09090b",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  });
+
+  // Right Bottom
+  const terminal = document.createElement("div");
+  terminal.id = "runlab-terminal";
+  Object.assign(terminal.style, {
+    gridColumn: "2 / 3",
+    gridRow: "3 / 4",  // última linha
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    border: "1px solid #09090b"
+  });
+
+  grid.appendChild(navbar);
+  grid.appendChild(fileExplorer);
+  grid.appendChild(editor);
+  grid.appendChild(terminal);
+  document.getElementById(parent).appendChild(grid);
+}
+
+export function setViewActive(status = false){
+
+  const editorBtn = document.getElementById("runlab-editor-btn");
+  const viewBtn = document.getElementById("runlab-view-btn");
+
+  editorBtn.classList.remove("active");
+  viewBtn.classList.remove("active");
+  if(status){
+    viewBtn.classList.add("active");
+  }
+  if(!status){
+    editorBtn.classList.add("active");
+  }
+
+  [editorBtn, viewBtn].forEach(b => {
+      b.style.background = "transparent";
+      b.style.color = "#000";
+  });
+
+  if(status){
+    document.getElementById("runlab-view").style.display = "block";
+    viewBtn.style.background = "#303030";
+    viewBtn.style.color = "#fff";
+  }
+
+  if (!status){
+    document.getElementById("runlab-view").style.display = "none";
+    editorBtn.style.background = "#303030";
+    editorBtn.style.color = "#fff";
+  }
+}
+
+export function setEditorActive(status = true){
+  const editorWarning = document.createElement("div");
+  editorWarning.id = "runlab-editor-warning";
+  Object.assign(editorWarning.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    textAlign: "center",
+  });
+  
+  //================================ SVG Warning Icon ================================
+  const warningImage = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+
+  warningImage.setAttribute("viewBox", "0 0 128 128");
+  warningImage.setAttribute("width", "128");
+  warningImage.setAttribute("height", "128");
+  warningImage.setAttribute("fill", "none");
+
+  warningImage.innerHTML = `
+    <path
+      d="M24 8 H80 L104 32 V112 H24 Z M80 8 V32 H104"
+      stroke="currentColor"
+      stroke-width="4"
+      stroke-linejoin="round"
+    />
+
+    <rect x="40" y="44" rx="6" ry="6" width="20" height="4"
+      fill="currentColor" transform="rotate(-25 36 44)" />
+    <rect x="68" y="44" rx="6" ry="6" width="20" height="4"
+      fill="currentColor" transform="rotate(25 64 44)" />
+
+    <circle cx="50" cy="64" r="5" fill="currentColor" />
+    <circle cx="78" cy="64" r="5" fill="currentColor" />
+
+    <rect x="44" y="80" rx="6" ry="6" width="40" height="5"
+      fill="currentColor" />
+  `;
+
+  warningImage.style.color = "#aaa";
+  
+  //================================ SVG Warning Text ================================
+
+  const warningText = document.createElement("p");
+  warningText.textContent = "No file selected.";
+  warningText.style.color = "#aaa";
+  warningText.style.fontSize = "0.9em";
+  warningText.style.margin = "0";
+
+  const warningText2 = document.createElement("p");
+  warningText2.textContent =
+    "Please create a file using right click on the file explorer at the left container and select it.";
+  warningText2.style.color = "#aaa";
+  warningText2.style.fontSize = "0.75em";
+  warningText2.style.margin = "0";
+
+  //====================================================================================
+  
+  editorWarning.appendChild(warningImage);
+  editorWarning.appendChild(warningText);
+  editorWarning.appendChild(warningText2);
+
+  const editorCodeMirror = document.getElementsByClassName("cm-editor ͼ1 ͼ3 ͼ16")[0];
+
+  if(!status){
+    document.getElementById("runlab-editor").appendChild(editorWarning);
+    if(editorCodeMirror){
+      editorCodeMirror.display = "none";
+    }
+  }
+
+  if(status){
+    const existingWarning = document.getElementById("runlab-editor-warning");
+    if(existingWarning){
+      existingWarning.remove();
+    }
+    if(editorCodeMirror){
+      editorCodeMirror.display = "block";
+    }
+  }
+
+}  
+
+let feNode = null;
+
+function setFileExplorerNode(node) {
+  feNode = node;
+}
+
+export function getFeExecutables() {
+  return feNode.getExecutables()
+}
+
+export function getFileNode(file) {
+  return feNode.getFileNode(file);
+}

package/dist/app/core/editor.js

@@ -0,0 +1,120 @@
+// Core CM6
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { Compartment } from "@codemirror/state";
+
+// Language
+import { javascript } from "@codemirror/lang-javascript";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
+import { xml } from "@codemirror/lang-xml";
+import { yaml } from "@codemirror/lang-yaml";
+
+// VS Code look & feel
+import { vscodeDark } from "@uiw/codemirror-theme-vscode";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+
+// IDE features
+import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
+import { foldGutter, codeFolding } from "@codemirror/language";
+
+const editors = new Map();
+
+let activeFile = null;
+
+export const languageCompartment = new Compartment();
+
+export function setActiveFile(file) {
+  activeFile = file;
+  let navbarFileName = document.getElementById("runlab-navbar-active-file-name")
+  if (navbarFileName) {
+    navbarFileName.textContent = file ? `${file.name}.${file.ext}` : "";
+  }
+}
+
+function getActiveFile() {
+  return activeFile;
+}
+
+export function getCurrentCode() {
+  const activeFile = getActiveFile();
+  return activeFile ? activeFile.content : "";
+}
+
+export function getCurrentExtension() {
+  const activeFile = getActiveFile();
+  return activeFile ? activeFile.ext : "";
+}
+
+export function languageFromExtension(ext) {
+  switch (ext) {
+    case "txt": return [];
+    case "md": return markdown();
+    case "json": return json();
+    case "yaml": return yaml();
+    case "yml": return yaml();
+    case "toml":return [];
+    case "html":return html();
+    case "xml":return xml();
+    case "css":return css();
+    case "js":return javascript({ typescript: false });
+    case "ts":return javascript({ typescript: true });
+    case "lua":return [];
+    default:return [];
+  }
+}
+
+export function createEditor(parentId, initialCode = "") {
+  const parent = document.getElementById(parentId);
+  if (!parent) throw new Error(`Elemento #${parentId} não encontrado`);
+
+  const state = EditorState.create({
+    doc: initialCode,
+    extensions: [
+      keymap.of(vscodeKeymap),
+      vscodeDark,
+      languageCompartment.of(languageFromExtension(getActiveFile() ? getActiveFile().ext : "")),
+      autocompletion(),
+      closeBrackets(),
+      codeFolding(),
+      foldGutter(),
+      EditorView.updateListener.of(update => {
+        if (update.docChanged) {
+          const file = getActiveFile();
+          if (file) {
+            file.content = update.state.doc.toString();
+          }
+        }
+      })
+    ]
+  });
+
+  const view = new EditorView({
+    state,
+    parent
+  });
+
+  editors.set(parentId, view);
+  return view;
+}
+
+export function updateEditorContentById(parentId, content) {
+  const view = editors.get(parentId);
+  if (!view) {
+    console.warn(`Editor ${parentId} não inicializado`);
+    return;
+  }
+
+  const langFactory = languageFromExtension(getActiveFile() ? getActiveFile().ext : "");
+
+  view.dispatch({
+    effects: languageCompartment.reconfigure(langFactory),
+    changes: {
+      from: 0,
+      to: view.state.doc.length,
+      insert: content
+    }
+  });
+}

package/dist/app/core/navbar.js

@@ -0,0 +1,154 @@
+import { sendCode } from "../../index.js";
+import { setViewActive } from "../app.js";
+import { getCurrentCode, getCurrentExtension } from "./editor.js";
+import Swal from "sweetalert2";
+
+export function createNavbar(parentId) {
+    const navbar = document.createElement("nav");
+    navbar.id = "runlab-navbar-div";
+    Object.assign(navbar.style, {
+      width: "100%",
+      height: "100%"
+    });
+
+    // ========== Menu Items ==========
+
+    const ul = document.createElement("ul");
+    Object.assign(ul.style, {
+        listStyleType: "none",
+        margin: "0",
+        padding: "0",
+        display: "flex",
+        alignItems: "center",
+        width: "100%"
+    });
+    navbar.appendChild(ul);
+
+
+    // ========== Left Menu Items ==========
+
+    const leftGroup = document.createElement("div");
+    Object.assign(leftGroup.style, {
+        display: "flex",
+        alignItems: "center"
+    });
+    ul.appendChild(leftGroup);
+
+    const menuItems = ["Run", "Help"];
+    menuItems.forEach(item => {
+        const li = document.createElement("li");
+        li.textContent = item;
+
+        Object.assign(li.style, {
+            marginRight: "15px",
+            marginLeft: "15px",
+            padding: "10px 14px",
+            cursor: "pointer",
+            color: "#fff"
+        });
+        if (item === "Run") {
+            li.addEventListener("click", () => {
+                sendCode(getCurrentCode(),getCurrentExtension());
+                setViewActive(true);
+            });
+        }
+        if (item === "Help") {
+            li.addEventListener("click", () => {
+                Swal.fire({
+                    title: "RunLab Help",
+                    html: `
+                    <p>RunLab is a web-based code editor and runtime environment.</p>
+                    <p>Here's how to use it:</p>
+                    <ul style="text-align: left;">
+                        <li><strong>File Explorer:</strong> Use the file explorer to create, open, and manage your project files. Start it by right clicking on the left container.</li>
+                        <li><strong>Editor:</strong> Write your code in the editor pane. It supports multiple file types. To use it you should click on a file.</li>
+                        <li><strong>View:</strong> After writing your code, click the "Run" button in the navbar to execute it. The output will be displayed in the view pane.</li>
+                        <li><strong>Terminal:</strong> You can run terminal commands in the terminal pane.</li>
+                    </ul>
+                    <p>Available terminal commands:</p>
+                    <ul style="text-align: left;">
+                        <li><span style="font-weight: bold;">ls</span>: List directory contents</li>
+                        <li><span style="font-weight: bold;">cd</span>: Change directory</li>
+                        <li><span style="font-weight: bold;">clear</span>: Clear the terminal</li>
+                        <li><span style="font-weight: bold;">pwd</span>: Print current directory</li>
+                        <li><span style="font-weight: bold;">run</span>: Run a file (e.g., run script.js)</li>
+                        <li><span style="font-weight: bold;">help | h</span>: Show help message</li>
+                    </ul>
+                    `,
+                    width: 700,
+                    confirmButtonText: "Got it!"
+                            })
+            });
+        }
+
+        leftGroup.appendChild(li);
+    });
+
+    // ========== Append navbar ==========
+
+    document.getElementById(parentId).appendChild(navbar);
+
+    // ========== ActiveFile Name ==========
+    const activeFileName = document.createElement("li");
+    activeFileName.id = "runlab-navbar-active-file-name";
+
+    Object.assign(activeFileName.style, {
+        margin: "0 auto",
+        padding: "10px 14px",
+        fontWeight: "600",
+        color: "#FFDE21",
+        whiteSpace: "nowrap"
+    });
+
+    ul.appendChild(activeFileName);
+    // ========== Editor/View Toggle ==========
+        
+    const toggleLi = document.createElement("li");
+    Object.assign(toggleLi.style, {
+        
+        padding: "4px 10px"
+    });
+
+    const toggle = document.createElement("div");
+    Object.assign(toggle.style, {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        width: "180px",
+        height: "28px",
+        border: "2px solid #09090b",
+        borderRadius: "8px",
+        overflow: "hidden",
+        background: "#e5e7eb",
+        fontFamily: "sans-serif",
+        marginLeft: "20px"
+    });
+
+    const editorBtn = document.createElement("button");
+    editorBtn.id = "runlab-editor-btn";
+    editorBtn.textContent = "Editor";
+    editorBtn.classList.add("active");
+
+    const viewBtn = document.createElement("button");
+    viewBtn.id = "runlab-view-btn";
+    viewBtn.textContent = "View";
+
+    [editorBtn, viewBtn].forEach(btn => {
+        Object.assign(btn.style, {
+            border: "none",
+            cursor: "pointer",
+            fontWeight: "500",
+            transition: "0.2s",
+            color: "#000"
+        });
+    });
+
+    toggle.append(editorBtn, viewBtn);
+    toggleLi.appendChild(toggle);
+    ul.appendChild(toggleLi);
+
+    //Initialize with editor active
+    setViewActive(false);
+
+    editorBtn.onclick = () => setViewActive(false);
+    viewBtn.onclick   = () => setViewActive(true);
+}

package/dist/app/fileExplorer/FSNode.js

@@ -0,0 +1,10 @@
+class FSNode {
+    constructor(name) {
+        this.id = name;
+        this.name = name;
+        this.parent = null;
+    }
+
+}
+
+export { FSNode };

package/dist/app/fileExplorer/File.js

@@ -0,0 +1,12 @@
+import { FSNode } from "./FSNode.js";
+
+class File extends FSNode {
+    constructor(name, parent, ext) {
+        super(name);
+        this.parent = parent;
+        this.content = "";
+        this.ext = ext;
+    }
+}
+
+export { File };