runlab 0.1.1 → 1.1.0

package/dist/app/fileExplorer/FileExplorer.js

@@ -2,15 +2,46 @@ import { Folder } from "./Folder.js";
 import { File } from "./File.js";
 import { updateEditorContentById, setActiveFile } from "../core/editor.js";
 import Swal from "sweetalert2";
+import { setEditorActive, setViewActive } from "../app.js";
 
 export class FileExplorer {
     constructor(parentId) {
         this.container = document.getElementById(parentId);
         this.root = new Folder("root", null);
-
+        this.execFiles = [];
+        this.filesPath = [];
+        this.path = [];
         this.render();
     }
 
+    getRoot() {
+        return this.root;
+    }
+
+    getFileNode(file) {
+        const name = file.name.split(".")[0];
+        const ext = file.name.split(".")[1];
+        const path = file.path;
+        let currentNode = this.root;
+
+        for (let i = 1; i < path.length; i++) {
+            const part = path[i];
+            const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+            if (!nextNode) return null;
+            currentNode = nextNode;
+        }
+
+        return currentNode.children.find(c => c.name === name && c.ext === ext);
+    }
+
+    getExecutables() {
+        return this.execFiles;
+    }
+
+    setExecutables(files) {
+        this.execFiles = files;
+    }
+
     /* =========================
        RENDER
     ========================== */
@@ -50,12 +81,17 @@ export class FileExplorer {
                 btn.style.paddingBottom = "8px";
                 btn.style.cursor = "pointer";
                 
+                
 
                 btn.onmouseover = () => btn.style.backgroundColor = "#555";
                 btn.onmouseout = () => btn.style.backgroundColor = "transparent";
 
                 const ul = document.createElement("ul"); 
                 ul.style.display = "none";
+                ul.style.listStyle = "none";
+                ul.style.margin = "0";
+                ul.style.padding = "0 0 0 24px";
+
 
                 btn.onclick = () => this.toggle(ul);
                 btn.oncontextmenu = e => {
@@ -79,9 +115,12 @@ export class FileExplorer {
                 li.style.paddingTop = "8px";
                 li.style.paddingBottom = "8px";
                 li.style.cursor = "pointer";
+                
 
                 li.onclick = () => {
                     setActiveFile(node);
+                    setViewActive(false);
+                    setEditorActive(true);
                     updateEditorContentById("runlab-editor", node.content);
                 };
 
@@ -92,8 +131,12 @@ export class FileExplorer {
                 };
 
                 parentUl.appendChild(li);
+                this.filesPath.push({ name: `${node.name}.${node.ext}`, path: node.parent.path });
+
             }
         });
+
+        this.setExecutables(this.filesPath);
     }
 
     toggle(el) {
@@ -138,6 +181,7 @@ export class FileExplorer {
                     input: 'text',
                     showCancelButton: true,
                     confirmButtonText: 'Create',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.addFolder(this.root, name);
@@ -151,20 +195,21 @@ export class FileExplorer {
                     title: 'Choose extension and filename',
                     html:
                         '<select id="swal-select" class="swal2-input">' +
-                            '<option value="txt">.txt - Text</option>' +
-                            '<option value="md">.md - Text</option>' +
-                            '<option value="json">.json - Data</option>' +
-                            '<option value="yaml">.yaml - Data</option>' +
-                            '<option value="toml">.toml - Data</option>' +
-                            '<option value="html">.html - Markup</option>' +
-                            '<option value="xml">.xml - Markup</option>' +
-                            '<option value="css">.css - Style</option>' +
-                            '<option value="js">.js - JavaScript</option>' +
-                            '<option value="ts">.ts - TypeScript</option>' +
-                            '<option value="go">.go - GO</option>' +
+                            '<option value="txt">📄 .txt - Text</option>' +
+                            '<option value="md">📝 .md - Text</option>' +
+                            '<option value="json">🧩 .json - Data</option>' +
+                            '<option value="yaml">🧩 .yaml - Data</option>' +
+                            '<option value="toml">🧩 .toml - Data</option>' +
+                            '<option value="html">🌐 .html - Markup</option>' +
+                            '<option value="xml">🌐 .xml - Markup</option>' +
+                            '<option value="css">🎨 .css - Style</option>' +
+                            '<option value="js">🟨 .js - JavaScript</option>' +
+                            '<option value="ts">🟦 .ts - TypeScript</option>' +
+                            '<option value="py">🐍 .py - Python</option>' +
                         '</select>' +
                         '<input id="swal-input" class="swal2-input" placeholder="filename">',
                     focusConfirm: false,
+                    draggable: true,
                     preConfirm: () => {
                         return [
                         document.getElementById('swal-select').value,
@@ -177,10 +222,21 @@ export class FileExplorer {
                         this.addFile(this.root, text, selection);
                     }
                 })
-            }
+            }   
         ]);
 
         this.openMenu(e, menu);
+
+        const closeMenu = () => {
+            menu.remove();
+            document.removeEventListener("click", closeMenu);
+            document.removeEventListener("contextmenu", closeMenu);
+        };
+
+        setTimeout(() => {
+            document.addEventListener("click", closeMenu);
+            document.addEventListener("contextmenu", closeMenu);
+        });
     }
 
     showFolderMenu(e, folder) {
@@ -190,6 +246,7 @@ export class FileExplorer {
                     input: 'text',
                     showCancelButton: true,
                     confirmButtonText: 'Create',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.addFolder(folder, name);
@@ -200,20 +257,21 @@ export class FileExplorer {
                     title: 'Choose extension and filename',
                     html:
                         '<select id="swal-select" class="swal2-input">' +
-                            '<option value="txt">.txt - Text</option>' +
-                            '<option value="md">.md - Text</option>' +
-                            '<option value="json">.json - Data</option>' +
-                            '<option value="yaml">.yaml - Data</option>' +
-                            '<option value="toml">.toml - Data</option>' +
-                            '<option value="html">.html - Markup</option>' +
-                            '<option value="xml">.xml - Markup</option>' +
-                            '<option value="css">.css - Style</option>' +
-                            '<option value="js">.js - JavaScript</option>' +
-                            '<option value="ts">.ts - TypeScript</option>' +
-                            '<option value="go">.go - GO</option>' +
+                            '<option value="txt">📄 .txt - Text</option>' +
+                            '<option value="md">📝 .md - Text</option>' +
+                            '<option value="json">🧩 .json - Data</option>' +
+                            '<option value="yaml">🧩 .yaml - Data</option>' +
+                            '<option value="toml">🧩 .toml - Data</option>' +
+                            '<option value="html">🌐 .html - Markup</option>' +
+                            '<option value="xml">🌐 .xml - Markup</option>' +
+                            '<option value="css">🎨 .css - Style</option>' +
+                            '<option value="js">🟨 .js - JavaScript</option>' +
+                            '<option value="ts">🟦 .ts - TypeScript</option>' +
+                            '<option value="py">🐍 .py - Python</option>' +
                         '</select>' +
                         '<input id="swal-input" class="swal2-input" placeholder="filename">',
                     focusConfirm: false,
+                    draggable: true,
                     preConfirm: () => {
                         return [
                         document.getElementById('swal-select').value,
@@ -223,7 +281,7 @@ export class FileExplorer {
                 }).then((result) => {
                     if (result.value) {
                         const [selection, text] = result.value;
-                        this.addFile(this.root, text, selection);
+                        this.addFile(folder, text, selection);
                     }
                 })
             },
@@ -232,6 +290,7 @@ export class FileExplorer {
                     input: 'text',
                     showCancelButton: true,
                     confirmButtonText: 'Rename',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.rename(folder, name);
@@ -242,6 +301,17 @@ export class FileExplorer {
         ]);
 
         this.openMenu(e, menu);
+
+        const closeMenu = () => {
+            menu.remove();
+            document.removeEventListener("click", closeMenu);
+            document.removeEventListener("contextmenu", closeMenu);
+        };
+
+        setTimeout(() => {
+            document.addEventListener("click", closeMenu);
+            document.addEventListener("contextmenu", closeMenu);
+        });
     }
 
     showFileMenu(e, file) {
@@ -251,6 +321,7 @@ export class FileExplorer {
                     input: 'text',  
                     showCancelButton: true,
                     confirmButtonText: 'Rename',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.rename(file, name);
@@ -261,6 +332,7 @@ export class FileExplorer {
                     title: '',
                     showCancelButton: true,
                     confirmButtonText: 'Delete',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.delete(file);
@@ -270,6 +342,17 @@ export class FileExplorer {
         ]);
 
         this.openMenu(e, menu);
+
+        const closeMenu = () => {
+            menu.remove();
+            document.removeEventListener("click", closeMenu);
+            document.removeEventListener("contextmenu", closeMenu);
+        };
+
+        setTimeout(() => {
+            document.addEventListener("click", closeMenu);
+            document.addEventListener("contextmenu", closeMenu);
+        });
     }
 
     /* =========================

package/dist/app/fileExplorer/Folder.js

@@ -5,6 +5,7 @@ class Folder extends FSNode {
         super(name);
         this.parent = parent;
         this.children = [];
+        this.path = parent ? [...parent.path, name] : [name];
     }
 }
 

package/dist/app/terminal/commands.js

@@ -0,0 +1,117 @@
+import { getCurrentDir, getCurrentPath, setCurrentDir, setCurrentPath } from "./terminal.js"
+import { sendCode } from "../../index.js";
+import { setViewActive, getFeExecutables, getFileNode } from "../app.js";
+
+export function print(text = "") {
+    const div = document.createElement("div")
+    div.textContent = text
+    const output = document.getElementById("runlab-terminal-output")
+    output.appendChild(div)
+
+}
+
+export function handleLS() {
+
+    const currentDirNode = getCurrentDir()
+  
+    if (!currentDirNode.children || currentDirNode.children.length === 0) {
+        print("")
+        return
+    }
+
+    const names = currentDirNode.children.map(
+        child => `${child.ext ? `${child.name}.${child.ext}` : `/${child.name}`}`
+    )
+    print(names.join("  "))
+}
+
+export function handleClear() {
+    const output = document.getElementById("runlab-terminal-output")
+    output.innerHTML = ""
+}
+
+export function handleChangeDirectory(cmd) {
+    const dirName = cmd.split(" ")[1]
+    const currentDirNode = getCurrentDir()
+    const childrenNames = currentDirNode.children.map(child => child.name)
+
+    if (dirName === "..") {
+        const path = getCurrentPath()
+
+        if (path.length <= 1) {
+            print("Already at root directory.")
+            return
+        } // já está na raiz
+        
+        path.pop()
+        setCurrentPath(path)
+        setCurrentDir(getCurrentDir().parent)
+
+        document.getElementById("runlab-terminal-prompt").textContent = `${path.join("/")}> `
+
+        return
+    }
+    if (dirName && childrenNames.includes(dirName)) {
+        const child = currentDirNode.children.find(c => c.name === dirName)
+        if (child && !child.ext) {
+            setCurrentDir(child)
+            setCurrentPath([...getCurrentPath(), dirName])
+
+            document.getElementById("runlab-terminal-prompt").textContent = `${getCurrentPath().join("/")}> `
+
+            return
+        }
+    }
+
+    print("Directory not found or inaccessible.")
+}`
+`
+function parseRunCommand(cmd) {
+    const arg = cmd.split(" ")[1]
+    if (!arg) return null
+
+    const clean = arg.replace(/^\/+/, "")
+    const parts = clean.split("/")
+
+    const fileName = parts.pop()
+    const path = parts
+
+    return { fileName, path }
+}
+
+function resolvePathRelative(parsed, currentPath) {
+    return [...currentPath, ...parsed.path]
+}
+
+function samePath(a, b) {
+    if (a.length !== b.length) return false
+    return a.every((dir, i) => dir === b[i])
+}
+
+export function handleRun(cmd) {
+    const parsed = parseRunCommand(cmd)
+    if (!parsed) {
+        print("Executable file command not valid!")
+        return
+    }
+
+    const executables = getFeExecutables()
+    const currentPath = getCurrentPath()
+
+    const resolvedPath = resolvePathRelative(parsed, currentPath)
+
+    
+    const file = executables.find(e =>
+        e.name === parsed.fileName &&
+        samePath(e.path, resolvedPath)
+    )
+
+    if (!file) {
+        print("Executable file not found!")
+        return
+    }
+
+    const fileNode = getFileNode(file)
+    sendCode(fileNode.content, fileNode.ext)
+    setViewActive(true)
+}

package/dist/app/terminal/terminal.js

@@ -0,0 +1,126 @@
+import {print, handleLS, handleClear, handleChangeDirectory, handleRun} from "./commands.js"
+
+export let currentDirNode = null
+export let currentPath = []
+
+export function setCurrentDir(node) {
+    currentDirNode = node
+}
+
+export function getCurrentDir() {
+    return currentDirNode
+}
+
+export function setCurrentPath(path) {
+    currentPath = path
+}
+
+export function getCurrentPath() {
+    return currentPath
+}
+
+export function createTerminal(parentId,root) {
+    const parent = document.getElementById(parentId)
+
+    const terminal = document.createElement("div")
+    terminal.id = "runlab-inside-terminal"
+
+    Object.assign(terminal.style, {
+    backgroundColor: "#1E1E1E",
+    color: "#c7cbd9",
+    fontFamily: "monospace",
+    padding: "12px",
+    height: "100%",
+    overflowY: "auto",
+    boxSizing: "border-box"
+    })
+
+    terminal.tabIndex = 0
+
+    // ===== estrutura =====
+    const output = document.createElement("div")
+    output.id = "runlab-terminal-output"
+
+    const line = document.createElement("div")
+
+    const prompt = document.createElement("span")
+    prompt.id = "runlab-terminal-prompt"
+    prompt.textContent = "root> "
+
+    const input = document.createElement("span")
+
+    const cursor = document.createElement("span")
+    cursor.textContent = "█"
+    cursor.style.marginLeft = "2px"
+
+    line.append(prompt, input, cursor)
+    terminal.append(output, line)
+    parent.appendChild(terminal)
+
+    // ===== estado =====
+    const state = {
+    buffer: ""
+    }
+
+    currentDirNode = root
+    currentPath.push("root")
+
+    // ===== teclado =====
+    terminal.addEventListener("keydown", (e) => {
+    e.preventDefault()
+
+    if (e.key === "Backspace") {
+        state.buffer = state.buffer.slice(0, -1)
+    }
+    else if (e.key === "Enter") {
+        print(`${currentPath.join("/")}> ${state.buffer}`)
+        handleCommand(state.buffer,currentDirNode)
+        state.buffer = ""
+    }
+    else if (e.key.length === 1) {
+        state.buffer += e.key
+    }
+
+    input.textContent = state.buffer
+    terminal.scrollTop = terminal.scrollHeight
+    })
+
+    terminal.addEventListener("mousedown", () => {
+    terminal.focus()
+    })
+
+    terminal.focus()
+}
+
+function handleCommand(cmd) {
+    const trimmed = cmd.trim()
+    const split = trimmed.split(" ")
+
+
+    if (trimmed === "ls") {
+        handleLS()
+
+    } else if (trimmed === "clear") {
+        handleClear()
+
+    } else if (split[0] === "cd") {
+        handleChangeDirectory(trimmed)
+    
+    }else if (split[0] === "run") {
+        handleRun(trimmed)
+    
+    } else if (trimmed === "pwd") {
+        print(currentPath.join("/"))
+        
+    } else if (trimmed === "help" || trimmed === "h") {
+        print("Available commands:")
+        print("- ls: List directory contents")
+        print("- cd: Change directory")
+        print("- clear: Clear the terminal")
+        print("- pwd: Print current directory")
+        print("- run: Run a file (e.g., run script.js)")
+        print("- help | h: Show this help message")
+    } else if (trimmed !== "") {
+        print(`command not found: ${trimmed}`)
+    }
+}

package/dist/index.js

@@ -1,27 +1,52 @@
-import "./wasm/wasm_exec.js";
-import wasmUrl from "./wasm/runlab.wasm?url";
 import { generateContainer } from "./app/app.js";
+import { appendViewContent } from "./app/app.js";
+import { ReactRunlabButton } from "./reactButton.jsx";
 
-const go = new Go();
-
-export async function run(parentId, width = 1200, height = 800) {
-  console.log("WASM URL resolvido:", wasmUrl);
-  const response = await fetch(wasmUrl);
-  const bytes = await response.arrayBuffer();
-
-  const result = await WebAssembly.instantiate(bytes, go.importObject);
-  generateContainer(parentId, width, height);
-  go.run(result.instance);
+let runtimeUrl = "";
+function setRuntimeUrl(url) {
+  runtimeUrl = url;
 }
-
-async function updateFileExplorer() {
- 
+function getRuntimeUrl() {
+  return runtimeUrl;
 }
 
-async function loadTerminal() {
+export async function run({
+  parentId,
+  runtimeUrl = ""
+}) {
+  generateContainer(parentId);
+  setRuntimeUrl(runtimeUrl);
+}
 
+export async function sendCode(code, ext = "txt") {
+
+  const runnableExtensions = ["js", "ts", "py"];
+  if (!runnableExtensions.includes(ext)) {
+    appendViewContent(code);
+    return;
+  }
+
+  try {
+    const response = await fetch(getRuntimeUrl(), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ code, ext })
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to send code");
+    }
+
+    const data = await response.json();
+
+    appendViewContent(data.stdout || data.stderr);
+  } catch (err) {
+    console.error(err);
+  }
 }
 
-async function loadEditor() {
+//=============================== Buttons ===============================
 
-}
+export { ReactRunlabButton };

package/dist/reactButton.jsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { run } from "./index.js";
+
+export function ReactRunlabButton(props = { runConfig: {} }) {
+  const { runConfig } = props;
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.__runlab_started) return;
+
+    if (typeof window !== 'undefined') {
+      window.__runlab_started = true;
+    }
+
+    run(runConfig);
+  }, []);
+
+  const showApp = () => {
+    const app = document.getElementById("runlab-custom-div");
+    const btn = document.getElementById("runlab-custom-btn");
+
+    const displayStyle = window.getComputedStyle(app).display;
+
+    if (displayStyle === "none") {
+      app.style.display = "block";
+      btn.textContent = "Hide App";
+    }
+    if (displayStyle === "block") {
+      app.style.display = "none";
+      btn.textContent = "Show App";
+    }
+  };
+
+  return (
+    <>
+      <button
+        id="runlab-custom-btn"
+        onClick={showApp}
+        className="show-app-button"
+      >
+        Show App
+      </button>
+
+      <div id="runlab-custom-div" style={{ display: "none" }}></div>
+    </>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runlab",
-  "version": "0.1.1",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -26,7 +26,6 @@
     "@codemirror/lang-markdown": "^6",
     "@codemirror/lang-xml": "^6",
     "@codemirror/lang-yaml": "^6",
-    "@codemirror/lang-go": "^6",
 
     "@uiw/codemirror-theme-vscode": "^4.21.0",
     "@replit/codemirror-vscode-keymap": "^6.0.0"