runlab 0.1.0 → 0.1.1

package/dist/app/app.js

@@ -0,0 +1,80 @@
+import { createEditor } from "./core/editor.js";
+import { createNavbar } from "./core/navbar.js";
+import { FileExplorer } from "./fileExplorer/FileExplorer.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);
+  createNavbar("runlab-navbar");
+  createEditor("runlab-editor","");
+
+  new FileExplorer("runlab-file-explorer");
+}
+
+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"
+  });
+
+  // Right Bottom
+  const terminal = document.createElement("div");
+  terminal.id = "runlab-terminal";
+  Object.assign(terminal.style, {
+    gridColumn: "2 / 3",
+    gridRow: "3 / 4",  // última linha
+    border: "1px solid #09090b"
+  });
+
+  grid.appendChild(navbar);
+  grid.appendChild(fileExplorer);
+  grid.appendChild(editor);
+  grid.appendChild(terminal);
+  document.getElementById(parent).appendChild(grid);
+}

package/dist/app/core/editor.js

@@ -0,0 +1,108 @@
+// 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";
+import { go } from "@codemirror/lang-go";
+
+// 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;
+}
+
+function getActiveFile() {
+  return activeFile;
+}
+
+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 "go":return go();
+    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,35 @@
+
+
+export function createNavbar(parentId) {
+    const navbar = document.createElement("nav");
+    navbar.id = "runlab-navbar-div";
+    Object.assign(navbar.style, {
+      width: "100%",
+      height: "100%"
+    });
+
+    const ul = document.createElement("ul");
+    Object.assign(ul.style, {
+        listStyleType: "none",
+        margin: "0",
+        padding: "0",
+        display: "flex"
+    });
+    navbar.appendChild(ul);
+
+    const menuItems = ["File", "Edit", "View", "Help"];
+    menuItems.forEach(item => {
+      const li = document.createElement("li"); 
+        li.textContent = item;
+        ul.appendChild(li);
+        Object.assign(li.style, {
+            marginRight: "20px",
+            padding: "10px 14px",
+            cursor: "pointer",
+            color: "#fff",
+            textDecoration: "none"
+        });
+    });
+
+    document.getElementById(parentId).appendChild(navbar);
+}

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 };

package/dist/app/fileExplorer/FileExplorer.js

@@ -0,0 +1,322 @@
+import { Folder } from "./Folder.js";
+import { File } from "./File.js";
+import { updateEditorContentById, setActiveFile } from "../core/editor.js";
+import Swal from "sweetalert2";
+
+export class FileExplorer {
+    constructor(parentId) {
+        this.container = document.getElementById(parentId);
+        this.root = new Folder("root", null);
+
+        this.render();
+    }
+
+    /* =========================
+       RENDER
+    ========================== */
+
+    render() {
+        this.container.innerHTML = "";
+
+        const rootDiv = document.createElement("div");
+        rootDiv.style.width = "100%";
+        rootDiv.style.height = "100%";
+        rootDiv.style.display = "block";
+        rootDiv.style.pointerEvents = "auto";
+        rootDiv.style.position = "relative";
+
+        rootDiv.oncontextmenu = e => {
+            e.preventDefault();
+            this.showRootMenu(e);
+        };
+
+
+        this.renderFolder(this.root, rootDiv);
+
+        this.container.append(rootDiv);
+    }
+
+    renderFolder(folder, parentUl) {
+        folder.children.forEach(node => {
+            if (node instanceof Folder) {
+                const btn = document.createElement("button");
+                btn.textContent = `📁 ${node.name}`;
+                btn.style.width = "100%";
+                btn.style.textAlign = "left";
+                btn.style.border = "none";
+                btn.style.background = "none";
+                btn.style.color = "white";
+                btn.style.paddingTop = "8px";
+                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";
+
+                btn.onclick = () => this.toggle(ul);
+                btn.oncontextmenu = e => {
+                    e.preventDefault(); 
+                    e.stopPropagation();
+                    this.showFolderMenu(e, node);
+                };
+
+                parentUl.append(btn, ul);
+                this.renderFolder(node, ul);
+            }
+
+            if (node instanceof File) {
+                const li = document.createElement("li");
+                li.textContent = `📄 ${node.name}.${node.ext}`;
+                li.style.width = "100%";
+                li.style.textAlign = "left";
+                li.style.border = "none";
+                li.style.background = "none";
+                li.style.color = "white";
+                li.style.paddingTop = "8px";
+                li.style.paddingBottom = "8px";
+                li.style.cursor = "pointer";
+
+                li.onclick = () => {
+                    setActiveFile(node);
+                    updateEditorContentById("runlab-editor", node.content);
+                };
+
+                li.oncontextmenu = e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.showFileMenu(e, node);
+                };
+
+                parentUl.appendChild(li);
+            }
+        });
+    }
+
+    toggle(el) {
+        el.style.display = el.style.display === "none" ? "block" : "none";
+    }
+
+    /* =========================
+       AÇÕES (MODEL)
+    ========================== */
+
+    addFolder(parent, name) {
+        parent.children.push(new Folder(name, parent));
+        this.render();
+    }
+
+    addFile(parent, name, ext=".txt") {
+        parent.children.push(new File(name, parent, ext));
+        this.render();
+    }
+
+    rename(node, newName) {
+        node.name = newName;
+        this.render();
+    }
+
+    delete(node) {
+        const parent = node.parent;
+        parent.children = parent.children.filter(c => c !== node);
+        this.render();
+    }
+
+    /* =========================
+       MENUS
+    ========================== */
+
+    showRootMenu(e) {
+        const menu = this.createMenu([
+            {
+                label: "New Folder",
+                action: () => Swal.fire({
+                    title: 'Folder name',
+                    input: 'text',
+                    showCancelButton: true,
+                    confirmButtonText: 'Create',
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.addFolder(this.root, name);
+                        }
+                    }
+                })
+            },
+            {
+                label: "New File",
+                action: () => Swal.fire({
+                    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>' +
+                        '</select>' +
+                        '<input id="swal-input" class="swal2-input" placeholder="filename">',
+                    focusConfirm: false,
+                    preConfirm: () => {
+                        return [
+                        document.getElementById('swal-select').value,
+                        document.getElementById('swal-input').value
+                        ];
+                    }
+                }).then((result) => {
+                    if (result.value) {
+                        const [selection, text] = result.value;
+                        this.addFile(this.root, text, selection);
+                    }
+                })
+            }
+        ]);
+
+        this.openMenu(e, menu);
+    }
+
+    showFolderMenu(e, folder) {
+        const menu = this.createMenu([
+            { label: "New Folder", action: () => Swal.fire({
+                    title: 'Folder name',
+                    input: 'text',
+                    showCancelButton: true,
+                    confirmButtonText: 'Create',
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.addFolder(folder, name);
+                        }
+                    }
+            })},
+            { label: "New File", action: () => Swal.fire({
+                    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>' +
+                        '</select>' +
+                        '<input id="swal-input" class="swal2-input" placeholder="filename">',
+                    focusConfirm: false,
+                    preConfirm: () => {
+                        return [
+                        document.getElementById('swal-select').value,
+                        document.getElementById('swal-input').value
+                        ];
+                    }
+                }).then((result) => {
+                    if (result.value) {
+                        const [selection, text] = result.value;
+                        this.addFile(this.root, text, selection);
+                    }
+                })
+            },
+            { label: "Rename", action: () => Swal.fire({
+                    title: 'New name',
+                    input: 'text',
+                    showCancelButton: true,
+                    confirmButtonText: 'Rename',
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.rename(folder, name);
+                        }
+                    }
+            }) },
+            { label: "Delete", action: () => this.delete(folder) }
+        ]);
+
+        this.openMenu(e, menu);
+    }
+
+    showFileMenu(e, file) {
+        const menu = this.createMenu([
+            { label: "Rename", action: () => Swal.fire({
+                    title: 'New name',
+                    input: 'text',  
+                    showCancelButton: true,
+                    confirmButtonText: 'Rename',
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.rename(file, name);
+                        }
+                    }
+            }) },
+            { label: "Delete", action: () => Swal.fire({
+                    title: '',
+                    showCancelButton: true,
+                    confirmButtonText: 'Delete',
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.delete(file);
+                        }
+                    }
+            }) }
+        ]);
+
+        this.openMenu(e, menu);
+    }
+
+    /* =========================
+       HELPERS
+    ========================== */
+
+    prompt(label, callback) {
+        const value = prompt(label);
+        if (value) callback(value);
+    }
+
+    createMenu(items) {
+        const div = document.createElement("div");
+        div.className = "context-menu";
+        div.style.position = "absolute";
+        div.style.backgroundColor = "#333";
+        div.style.border = "1px solid #222";
+        div.style.padding = "8px";
+        div.style.zIndex = "3000";
+        div.style.color = "white";
+        div.style.minWidth = "100px";
+
+        items.forEach(i => {
+            const item = document.createElement("div");
+            item.textContent = i.label;
+            item.style.padding = "4px 8px";
+            item.style.cursor = "pointer";
+            item.onmouseover = () => item.style.backgroundColor = "#555";
+            item.onmouseout = () => item.style.backgroundColor = "transparent";
+            item.style.border = "1px solid #444";
+            item.onclick = () => {
+                i.action();
+                div.remove();
+            };
+            div.appendChild(item);
+        });
+
+        return div;
+    }
+
+    openMenu(e, menu) {
+        document.querySelectorAll(".context-menu").forEach(m => m.remove());
+
+        menu.style.position = "absolute";
+        menu.style.top = `${e.clientY}px`;
+        menu.style.left = `${e.clientX}px`;
+
+        document.body.appendChild(menu);
+    }
+}

package/dist/app/fileExplorer/Folder.js

@@ -0,0 +1,11 @@
+import { FSNode } from "./FSNode.js";
+
+class Folder extends FSNode {
+    constructor(name, parent) {
+        super(name);
+        this.parent = parent;
+        this.children = [];
+    }
+}
+
+export { Folder };

package/dist/index.js

@@ -1,17 +1,27 @@
-import "./wasm_exec.js";
+import "./wasm/wasm_exec.js";
+import wasmUrl from "./wasm/runlab.wasm?url";
+import { generateContainer } from "./app/app.js";
 
 const go = new Go();
 
-/**
- * Executa o WASM.
- * @param {string} wasmPath Caminho do arquivo .wasm
- */
-export async function run(wasmPath = "./runlab.wasm") {
-  console.log("Carregando WASM:", wasmPath);
-
-  const response = await fetch(wasmPath);
+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);
+}
+
+async function updateFileExplorer() {
+ 
+}
+
+async function loadTerminal() {
+
+}
+
+async function loadEditor() {
+
 }

package/package.json

@@ -1,15 +1,42 @@
 {
   "name": "runlab",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+
   "exports": {
-    "./dist/index.js": "./dist/index.js",
-    "./dist/runlab.wasm": "./dist/runlab.wasm",
-    "./dist/wasm_exec.js": "./dist/wasm_exec.js"
+    ".": "./dist/index.js",
+    "./wasm": "./dist/runlab.wasm",
+    "./wasm_exec": "./dist/wasm_exec.js"
   },
-  "files": [
-    "dist/**/*",
-    "LICENSE"
-  ]
-}
+
+  "files": ["dist/**/*", "LICENSE"],
+
+  "peerDependencies": {
+    "@codemirror/state": "^6",
+    "@codemirror/view": "^6",
+    "@codemirror/language": "^6",
+    "@codemirror/autocomplete": "^6",
+
+    "@codemirror/lang-javascript": "^6",
+    "@codemirror/lang-html": "^6",
+    "@codemirror/lang-css": "^6",
+    "@codemirror/lang-json": "^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"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.24.0",
+    "sweetalert2": "^11.10.0"
+  },
+  "devDependencies": {
+    "@uiw/codemirror-theme-vscode": "^4.21.0",
+    "@replit/codemirror-vscode-keymap": "^6.0.0"
+  }
+}