amayo/README/ENVMANAGER_Y_MEJORAS.md

📋 Resumen de Mejoras - EnvManager y Sistema de Archivos

🎯 Problemas Resueltos

1. ❌ Problema de Eliminación de Archivos

Problema: No se podían eliminar archivos, no estaba claro si era por permisos.

Solución Implementada:

• ✅ Mejorado el manejo de errores en delete_file y delete_folder (Rust)
• ✅ Ahora muestra mensajes específicos según el tipo de error:
  • Permiso denegado: "Ejecuta el editor como administrador"
  • Archivo no encontrado: "El archivo no existe"
  • No es un archivo: "La ruta no es un archivo válido"

Ubicación: AEditor/src-tauri/src/lib.rs líneas 468-525

Cómo usar:

# Si ves "Permiso denegado", ejecuta como administrador:
# Windows: Click derecho → Ejecutar como administrador
# O usa PowerShell con privilegios elevados

---

2. 🔐 Problema del EnvManager

Problema:

• No leía correctamente el .env
• No guardaba bien los cambios
• No mostraba las ubicaciones exactas donde se usan las variables

Soluciones Implementadas:

a) Lectura Mejorada

// Ahora con logs detallados para debugging
console.log('📂 Cargando .env desde:', props.projectRoot);
console.log('✅ .env cargado, contenido:', content);

b) Parseo Mejorado

• ✅ Acepta valores vacíos: KEY=
• ✅ Maneja comillas: KEY="value with spaces"
• ✅ Ignora comentarios: # This is a comment
• ✅ Valida nombres de variables: Solo A-Z, 0-9, _

c) Guardado Mejorado

// Ahora sincroniza antes de guardar para evitar pérdida de datos
isUpdatingRaw.value = true;
parseEnvContent(rawEnvContent.value);
await nextTick();
isUpdatingRaw.value = false;

d) NUEVO: Ubicaciones Exactas

Backend Rust - Nueva función:

#[tauri::command]
fn scan_env_variables_with_locations(project_root: String) -> Result<Vec<VarLocation>, String>

Devuelve:

[
  {
    "variable": "DATABASE_URL",
    "file": "src/prisma.ts",
    "line": 5,
    "snippet": "const url = process.env.DATABASE_URL"
  },
  {
    "variable": "API_KEY",
    "file": "src/server/api.ts",
    "line": 12,
    "snippet": "headers: { 'X-API-Key': process.env.API_KEY }"
  }
]

Vista en el UI:

📍 Usada en 2 ubicación(es)
  ├─ src/prisma.ts:5 → const url = process.env.DATABASE_URL
  └─ src/server/api.ts:12 → headers: { 'X-API-Key': process.env.API_KEY }

---

📚 Documentación de Funciones

🔍 loadEnvFile()

¿Qué hace?

1. Lee el archivo .env del proyecto
2. Muestra el contenido en el editor raw
3. Parsea las variables al formato de objetos
4. Si no existe, inicia vacío

Errores comunes:

• No such file: Normal en proyectos nuevos
• Permission denied: Necesitas permisos de admin

---

🔍 parseEnvContent(content, markAsChanged)

¿Qué hace? Convierte texto plano a objeto JavaScript.

Ejemplo:

# Input (texto)
DATABASE_URL=postgres://localhost:5432
API_KEY="abc123"
DEBUG=true

# Output (objeto)
{
  "DATABASE_URL": "postgres://localhost:5432",
  "API_KEY": "abc123",
  "DEBUG": "true"
}

Reglas:

• Ignora líneas que empiezan con #
• Ignora líneas vacías
• Remueve comillas del valor
• Solo acepta claves válidas: [A-Z_][A-Z0-9_]*

---

🔍 scanProjectVars()

¿Qué hace? Busca en todo el código fuente las variables de entorno.

Proceso:

1. Escanea archivos .ts, .js, .prisma
2. Busca patrones: process.env.VARIABLE_NAME
3. Devuelve ubicaciones exactas (archivo, línea, código)
4. Auto-agrega variables faltantes

Ejemplo de uso:

// En tu código:
const dbUrl = process.env.DATABASE_URL;
const apiKey = process.env.API_KEY;

// EnvManager detecta:
// ✅ DATABASE_URL (src/prisma.ts:5)
// ✅ API_KEY (src/server/api.ts:12)

---

🔍 updateRawContent()

¿Qué hace? Convierte el objeto de variables a texto plano.

Reglas de formato:

• Si el valor tiene espacios → agrega comillas: KEY="value with spaces"
• Si no tiene espacios → sin comillas: KEY=value
• Si tiene # o = → agrega comillas: KEY="value#123"

---

🔍 syncFromRaw()

¿Qué hace? Sincroniza del editor raw al formulario.

¿Por qué el flag isUpdatingRaw?

Sin flag (loop infinito):

1. Cambias raw → se parsea → actualiza envVariables
2. Watch de envVariables → actualiza raw
3. raw cambia → se parsea → actualiza envVariables
4. Watch de envVariables → actualiza raw
5. Loop infinito 💥

Con flag (correcto):

1. Flag ON
2. Cambias raw → se parsea → actualiza envVariables
3. Watch ve flag ON → NO actualiza raw
4. Flag OFF
5. Siguiente cambio funciona normal ✅

---

💾 saveEnvFile()

¿Qué hace? Escribe los cambios al disco.

Proceso:

1. Sincroniza del raw (por si editaste ahí)
2. Llama a Rust write_env_file
3. Escribe archivo en {projectRoot}/.env
4. Marca sin cambios

Ubicación del archivo:

Windows: C:/Users/Shnimlz/Documents/GitHub/amayo/.env
Linux/Mac: /home/user/projects/amayo/.env

---

🧩 Pregunta: ¿Sistema de Extensiones?

TL;DR: Sí, es posible pero avanzado. Aquí está el plan:

Opción 1: Sistema Simple de Plugins (Más Fácil)

Concepto:

plugins/
├── theme-dracula/
│   ├── plugin.json
│   └── theme.css
├── snippets-react/
│   ├── plugin.json
│   └── snippets.json
└── formatter-prettier/
    ├── plugin.json
    └── format.js

Estructura de plugin:

{
  "name": "theme-dracula",
  "version": "1.0.0",
  "type": "theme",
  "main": "theme.css",
  "author": "You",
  "description": "Dracula theme for Monaco"
}

Implementación:

1. Manager de Plugins (Vue component)

   class PluginManager {
     plugins: Plugin[] = [];
   
     async loadPlugin(path: string) {
       const config = await readPluginConfig(path);
       if (config.type === 'theme') {
         await loadTheme(config.main);
       } else if (config.type === 'snippets') {
         await loadSnippets(config.main);
       }
     }
   }
   

2. UI de Extensiones

   <div class="extensions-panel">
     <h2>🧩 Extensiones Instaladas</h2>
     <div v-for="plugin in plugins">
       <h3>{{ plugin.name }}</h3>
       <button @click="togglePlugin(plugin)">
         {{ plugin.enabled ? 'Desactivar' : 'Activar' }}
       </button>
     </div>
     <button @click="installFromFile">
       📦 Instalar desde ZIP
     </button>
   </div>
   

3. Backend Rust

   #[tauri::command]
   fn list_plugins(app_data_dir: String) -> Vec<PluginInfo> {
       // Escanear carpeta plugins/
   }
   
   #[tauri::command]
   fn install_plugin(zip_path: String) -> Result<(), String> {
       // Extraer ZIP a plugins/
   }
   

Tipos de Extensiones:

• 🎨 Temas: CSS para Monaco
• 📝 Snippets: JSON con snippets personalizados
• 🔧 Formatters: JS que formatea código
• 🌐 Language Support: Definiciones de TypeScript
• 🎯 Commands: Nuevos comandos personalizados

---

Opción 2: Sistema Avanzado tipo VS Code (Más Complejo)

API de Extensiones:

// extension-api.d.ts
export interface Extension {
  activate(context: ExtensionContext): void;
  deactivate(): void;
}

export interface ExtensionContext {
  subscriptions: Disposable[];
  workspaceState: Memento;
  globalState: Memento;
}

export namespace commands {
  export function registerCommand(
    command: string,
    callback: (...args: any[]) => any
  ): Disposable;
}

export namespace languages {
  export function registerCompletionItemProvider(
    selector: DocumentSelector,
    provider: CompletionItemProvider
  ): Disposable;
}

Ejemplo de extensión:

// my-extension/src/extension.ts
import * as vscode from '@editor/api';

export function activate(context: vscode.ExtensionContext) {
  // Registrar comando
  let disposable = vscode.commands.registerCommand(
    'myExtension.helloWorld',
    () => {
      vscode.window.showInformationMessage('Hello from Extension!');
    }
  );
  
  context.subscriptions.push(disposable);
  
  // Registrar autocompletado
  context.subscriptions.push(
    vscode.languages.registerCompletionItemProvider('typescript', {
      provideCompletionItems() {
        return [
          {
            label: 'myFunction',
            kind: vscode.CompletionItemKind.Function,
            insertText: 'myFunction($1)',
          }
        ];
      }
    })
  );
}

Arquitectura:

Extension Host (Worker)
├── Sandbox aislado para cada extensión
├── Comunicación vía postMessage
└── API restringida por seguridad

Main Thread (Editor)
├── Recibe comandos del Extension Host
├── Ejecuta cambios en Monaco
└── Maneja UI

---

🚀 Plan de Implementación Recomendado

Fase 1: Sistema Simple (1-2 semanas)

1. ✅ Crear carpeta plugins/ en appData
2. ✅ Componente ExtensionManager.vue
3. ✅ Backend Rust para leer/instalar
4. ✅ Soporte para temas CSS
5. ✅ Soporte para snippets JSON

Fase 2: Marketplace Básico (2-3 semanas)

1. ✅ UI de búsqueda de extensiones
2. ✅ Servidor simple con lista de extensiones
3. ✅ Instalación desde URL
4. ✅ Auto-actualización

Fase 3: API Avanzada (1-2 meses)

1. ✅ Extension Host con Workers
2. ✅ API tipo VS Code
3. ✅ Sandboxing de seguridad
4. ✅ Debugging de extensiones

---

📦 Ejemplo Completo: Extensión de Tema

Estructura:

theme-dracula.zip
├── manifest.json
├── theme.json
└── README.md

manifest.json:

{
  "name": "Dracula Theme",
  "id": "dracula-theme",
  "version": "1.0.0",
  "publisher": "dracula",
  "description": "Dark theme for vampires",
  "type": "theme",
  "main": "theme.json",
  "engines": {
    "aeditor": "^1.0.0"
  }
}

theme.json:

{
  "name": "Dracula",
  "type": "dark",
  "colors": {
    "editor.background": "#282a36",
    "editor.foreground": "#f8f8f2",
    "editorCursor.foreground": "#f8f8f0",
    "editor.lineHighlightBackground": "#44475a"
  },
  "tokenColors": [
    {
      "scope": ["comment"],
      "settings": {
        "foreground": "#6272a4",
        "fontStyle": "italic"
      }
    },
    {
      "scope": ["string"],
      "settings": {
        "foreground": "#f1fa8c"
      }
    }
  ]
}

Instalación:

1. Usuario descarga theme-dracula.zip
2. Click en "Instalar Extensión"
3. Selecciona el ZIP
4. Backend extrae a plugins/dracula-theme/
5. Frontend carga el tema
6. Usuario lo activa desde la UI

---

🎓 Resumen

Mejoras Completadas ✅

1. Sistema de eliminación con errores detallados
2. EnvManager mejorado:
   • Lectura robusta del .env
   • Parseo mejorado con logs
   • Guardado con sincronización
   • Ubicaciones exactas de cada variable (archivo, línea, código)
   • Documentación completa de cada función

Sistema de Extensiones 🚀

• Factible: Sí, totalmente posible
• Complejidad: Media-Alta
• Recomendación: Empezar con sistema simple
• Beneficios:
  • Comunidad puede crear extensiones
  • Personalización infinita
  • Marketplace propio
  • Competencia con VS Code en features

Siguiente Paso Sugerido

1. Crear prototipo del ExtensionManager
2. Implementar soporte básico de temas
3. Si funciona bien, expandir a otros tipos

---

📞 Necesitas Ayuda?

Si quieres implementar el sistema de extensiones, puedo ayudarte con:

1. Arquitectura detallada
2. Código del ExtensionManager
3. API de extensiones
4. Ejemplos de extensiones
5. Sistema de marketplace

¡Solo pregunta! 🚀