vuelo-framework 1.0.0

package/README.md

@@ -0,0 +1,141 @@
+# 🚀 Vuelo
+
+**Vuelo** es un framework ágil y ligero que combina la magia de Vue con la
+velocidad impresionante de Bun. Diseñado para aquellos desarrolladores que
+quieren crear aplicaciones web interactivas y de alto rendimiento, Vuelo
+transforma la codificación en una experiencia placentera, ¡como un vuelo suave
+hacia el éxito!
+
+## ¿Por qué Vuelo?
+
+Porque tu código merece ser elevado a otro nivel. Aquí cada componente es un
+pasajero feliz en un vuelo directo hacia la productividad.
+
+1. **Amo Vue**: La reactividad de Vue es un superpoder que te permite crear
+   interfaces interactivas sin sudar la gota gorda. Su sistema de componentes es
+   tan intuitivo que te sentirás como un maestro de ceremonias en un espectáculo
+   de fuegos artificiales.
+
+2. **Velocidad del servidor de Bun**: Hablemos de velocidad: el servidor de Bun
+   es **fast as f*ck**. Maneja miles de solicitudes por segundo como un ninja,
+   todo mientras te mantiene en la zona de desarrollo.
+
+3. **Simplicidad**: Vuelo combina lo mejor de Vue y la velocidad de Bun,
+   permitiéndote enfocarte en lo que realmente importa: construir algo increíble
+   sin complicaciones innecesarias.
+
+4. **Estático desde 0**: Desde el principio, todas las páginas y componentes
+   (excepto las futuras islas) son completamente estáticos. Tu servidor envía
+   únicamente HTML al cliente, asegurando que tu aplicación despegue con
+   velocidad y eficiencia.
+
+5. **Autoimportación de rutas**: En Vuelo, la carpeta `pages` es tu puerta de
+   embarque. Cada archivo en `pages` se convierte en una ruta automáticamente,
+   así que solo colócalo y ¡bam!, ¡listo para volar!
+
+## Funcionalidad de Islas
+
+Vuelo admite la funcionalidad de islas, que permite que componentes individuales
+se carguen de manera interactiva. Esta funcionalidad se activa mediante los
+atributos `data-hydrate` y `data-hydrate-event`.
+
+- **data-hydrate="Counter"**: Este atributo debe coincidir con el componente que
+  se encargará de hidratarlo.
+- **data-hydrate-event="load"**: Este atributo indica el evento que se utilizará
+  para hidratar el componente.
+
+Si no se incluyen estos atributos, el componente se renderizará de forma plana y
+no aprovechará la funcionalidad de hidratación. Además, los componentes deben
+ubicarse en la carpeta `islands` para que sean servidos y detectados por el
+hidratador.
+
+Es importante mencionar que los componentes deben ser de Vue 2, ya que son
+montados por Vue en el front, en el contenedor donde estaba el componente
+anterior.
+
+Aquí tienes ejemplos de uso:
+
+```html
+<Counter></Counter>
+<Counter data-hydrate="Counter" data-hydrate-event="load"></Counter>
+<Counter data-hydrate="Counter" data-hydrate-event="click"></Counter>
+<Counter data-hydrate="Counter" data-hydrate-event="mouseover"></Counter>
+```
+
+## Instalación como Paquete NPM
+
+Para usar Vuelo Framework en tu proyecto, instálalo con tu gestor de paquetes preferido:
+
+```bash
+# Con npm
+npm install vuelo-framework
+
+# Con yarn
+yarn add vuelo-framework
+
+# Con pnpm
+pnpm add vuelo-framework
+
+# Con bun
+bun add vuelo-framework
+```
+
+## Uso Rápido
+
+Después de instalar, crea un archivo `index.ts` en la raíz de tu proyecto:
+
+```typescript
+import { vuelo } from "vuelo-framework";
+
+const vueloServer = await vuelo({
+  mode: 'SSRIslands',
+  port: 3000
+});
+
+console.log("Vuelo running on " + vueloServer.url);
+```
+
+Y crea la estructura de carpetas:
+
+```
+tu-proyecto/
+├── index.ts
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+└── src/
+    ├── pages/        # Tus páginas aquí
+    │   └── index.vue
+    └── islands/      # Componentes interactivos aquí
+        └── counter.vue
+```
+
+## Desarrollo Local
+
+Si estás desarrollando el framework mismo, instala las dependencias:
+
+```bash
+bun install
+```
+
+Y ejecuta el proyecto de ejemplo:
+
+```bash
+bun run index.ts
+```
+
+## Carpeta `pages`
+
+La carpeta `pages` es donde la magia sucede. Cada archivo que pongas aquí es
+como un pasajero que llega justo a tiempo para abordar. No te preocupes por las
+importaciones; simplemente añade tu archivo y deja que Vuelo haga el trabajo
+pesado.
+
+## Origen del Proyecto
+
+Este proyecto fue creado usando `bun init` en bun v1.1.29. [Bun](https://bun.sh)
+es un runtime de JavaScript que hace que tu código vuele más rápido que un jet
+privado.
+
+¡Gracias por elegir Vuelo! Esperamos que disfrutes del viaje tanto como nosotros
+disfrutamos construirlo. ¡Feliz codificación! ✈️

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "vuelo-framework",
+  "version": "1.0.0",
+  "description": "Framework Vue.js con SSR e Islands Architecture",
+  "type": "module",
+  "main": "./vueloFramework/server.ts",
+  "types": "./vueloFramework/server.ts",
+  "exports": {
+    ".": {
+      "import": "./vueloFramework/server.ts",
+      "types": "./vueloFramework/server.ts"
+    },
+    "./defaults/*": "./vueloFramework/defaults/*"
+  },
+  "files": [
+    "vueloFramework/**/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "vue",
+    "ssr",
+    "islands",
+    "framework",
+    "vite"
+  ],
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "prepublishOnly": "echo 'Asegúrate de haber compilado el proyecto antes de publicar'"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/compiler-sfc": "^3.5.12",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "vite": "^5.4.9",
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  }
+}

package/vueloFramework/app.ts

@@ -0,0 +1,17 @@
+import type { ViteDevServer } from "vite";
+import { createSSRApp } from "vue";
+
+export async function createApp(vite: ViteDevServer, component: any) {
+  let module;
+  try {
+    module = await vite.ssrLoadModule("src/App.vue");
+  } catch (error) {
+    console.log("App.vue no found con src using default");
+    module = await vite.ssrLoadModule("vueloFramework/defaults/App.vue");
+  }
+  const app = createSSRApp(module.default);
+  if (component) {
+    app.component("RouteView", component.default);
+  }
+  return {app};
+}

package/vueloFramework/autoImport.ts

@@ -0,0 +1,155 @@
+import { readdir } from "fs/promises";
+import path from "path";
+
+export async function getImports() {
+  // Asegurarse de resolver desde el directorio del proyecto (cwd)
+  const projectRoot = process.cwd();
+  const pagesDir = path.resolve(projectRoot, "src/pages");
+  const islandsDir = path.resolve(projectRoot, "src/islands");
+  const componentsDir = path.resolve(projectRoot, "src/components");
+
+  const pages = await getFilesIfExists(pagesDir, ".vue");
+  const islands = await getFilesIfExists(islandsDir, ".vue");
+  const components = await getFilesIfExists(componentsDir, ".vue");
+
+  const importMap = generateImportMap(pages, islands, components);
+  return importMap;
+}
+
+async function getFilesIfExists(dir: string, ext: string) {
+  try {
+    const files = await readdir(dir, { withFileTypes: true });
+    const results: string[] = [];
+
+    for (const file of files) {
+      if (file.isDirectory()) {
+        const subDirResults = await getFilesIfExists(
+          path.join(dir, file.name),
+          ext,
+        );
+        results.push(...subDirResults);
+      } else if (file.isFile() && file.name.endsWith(ext)) {
+        results.push(path.join(dir, file.name));
+      }
+    }
+
+    return results;
+  } catch (error) {
+    // Si el directorio no existe, simplemente retorna un array vacío
+    return [];
+  }
+}
+
+async function getFiles(dir: string, ext: string) {
+  const files = await readdir(dir, { withFileTypes: true });
+  const results: string[] = [];
+
+  for (const file of files) {
+    if (file.isDirectory()) {
+      const subDirResults = await getFiles(path.join(dir, file.name), ext);
+      results.push(...subDirResults);
+    } else if (file.isFile() && file.name.endsWith(ext)) {
+      results.push(path.join(dir, file.name));
+    }
+  }
+
+  return results;
+}
+
+function generateImportMap(
+  pages: string[],
+  islands: string[],
+  components: string[],
+) {
+  const pageImports = pages.map((page) => {
+    const importName = path.basename(page, path.extname(page));
+    return `import * as $${importName} from "${page}";`;
+  });
+
+  const islandImports = islands.map((island) => {
+    const importName = path.basename(island, path.extname(island));
+    return `import * as $${importName} from "${island}";`;
+  });
+
+  const componentsImports = components.map((island) => {
+    const importName = path.basename(island, path.extname(island));
+    return `import * as $${importName} from "${island}";`;
+  });
+
+  const manifest = {
+    pages: pages.map((page) => {
+      const name = path.basename(page, ".vue");
+      let route = page.replace(/^.*\/pages\//, ""); // Remover la ruta hasta 'pages/'
+      route = route.replace(/index\.vue$/, ""); // Eliminar 'index.vue'
+      route = route.replace(/\.vue$/, ""); // Eliminar '.vue' de otros archivos
+      route = route.endsWith("/") ? route.slice(0, -1) : route; // Eliminar barra final si existe
+      route = `/${route}`; // Asegurar que empiece con '/'
+
+      // Calcular la ruta relativa al directorio actual
+      const relativePath = path.relative(__dirname, page);
+
+      return {
+        name,
+        path: relativePath, // Aquí se usa la ruta relativa
+        route,
+      };
+    }),
+    islands: islands.map((island) => {
+      const name = path.basename(island, ".vue");
+      // island ya debería ser una ruta absoluta (viene de path.resolve + path.join)
+      // Pero por si acaso, asegurémonos de que sea absoluta
+      let absolutePath = island;
+      
+      if (!path.isAbsolute(island)) {
+        absolutePath = path.resolve(island);
+      }
+      // Si por alguna razón la ruta empieza con /src/ (ruta absoluta incorrecta),
+      // corregirla resolviéndola desde el directorio del proyecto
+      if (absolutePath.startsWith("/src/")) {
+        absolutePath = path.resolve(process.cwd(), absolutePath.slice(1));
+      }
+
+      return {
+        name,
+        path: absolutePath, // Usar la ruta absoluta
+      };
+    }),
+    components: components.map((component) =>
+      `${path.basename(component, ".vue")}`
+    ),
+    baseUrl: import.meta.url,
+  };
+
+  return {
+    imports: [...pageImports, ...islandImports, ...componentsImports],
+    manifest,
+  };
+}
+
+export async function pagesComponents(vite: any, pages: any[]) {
+  const routes = pages;
+  const components: { route: any; promise: Promise<any> }[] = []; // Almacena el objeto con la ruta y la promesa
+
+  // Recopilar todas las promesas de los componentes junto con su ruta
+  routes.forEach((componentRoute) => {
+    components.push({
+      route: componentRoute,
+      promise: vite.ssrLoadModule(componentRoute.path.replace("..", "")),
+    });
+  });
+
+  // Esperar a que todas las promesas se resuelvan
+  const results = await Promise.all(components.map((c) => c.promise));
+
+  // Combinar los resultados con sus rutas
+  const componentsToImport = components.map((c, index) => ({
+    route: c.route,
+    component: { default: results[index].default }, // Asocia el componente resuelto con su ruta
+  }));
+
+  return componentsToImport;
+}
+
+export async function islandsComponents(vite: any, islands: any) {
+  return islands;
+}

package/vueloFramework/client.js

@@ -0,0 +1,5 @@
+import App from "./defaults/App.vue"
+
+const app = createSSRApp(App)
+
+app.mount('#app')

package/vueloFramework/createVueloApp.ts

@@ -0,0 +1,14 @@
+import { renderToString } from "vue/server-renderer";
+import { createApp } from "./app";
+
+export async function createVueloApp(vite: any, component: any) {
+  const {app} = await createApp(vite, component);
+  // TODO retornar un compoente de error
+  try {
+    const html = await renderToString(app);
+    return html;
+  } catch (error) {
+    console.error("Error al renderizar la app:", error);
+    return "<div>Error rendering the app</div>";
+  }
+}

package/vueloFramework/defaults/App.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6">
+    <h1 class="text-4xl font-bold text-green-600 mb-4">Bienvenido a Vuelo Framework</h1>
+    <p class="text-lg text-gray-700 mb-6">{{ message }}</p>
+    <RouteView class="w-full max-w-4xl bg-white shadow-md rounded-lg p-6"></RouteView>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const messages = [
+    "¡Bienvenidos a Vuelo Framework! Donde los bugs son solo pasajeros en tránsito.",
+    "Con Vuelo, tus componentes no solo funcionan, ¡sino que también hacen acrobacias!",
+    "¿Por qué Vuelo Framework? Porque incluso tu código merece unas vacaciones.",
+    "Vuelo: Donde la única turbulencia es la de tu café.",
+    "Usar Vuelo Framework es como tener un piloto automático para tu código.",
+    "Con Vuelo, tus errores se convierten en 'nubes de oportunidad'.",
+    "¿Vuelo Framework? Más como 'vuelo en primera clase' para tu desarrollo.",
+    "En Vuelo, cada componente tiene alas. ¡Despegamos!",
+    "Vuelo: Porque a veces el código necesita una escapada rápida.",
+    "Con Vuelo, tus componentes no solo son ligeros, ¡son aerodinámicos!",
+    "¡Usa Vuelo! Porque tu código merece ser elevado a otro nivel.",
+    "En Vuelo, los problemas se desvanecen como maletas perdidas.",
+    "¿Vuelo Framework? Más como 'Vuelo y no mires atrás'.",
+    "Con Vuelo, cada despliegue es un aterrizaje suave.",
+    "En Vuelo, la única 'carga útil' son tus ideas brillantes.",
+    "¡Hola, Vuelo Framework! ¿Listo para un viaje sin escalas hacia la productividad?",
+    "Con Vuelo, tus componentes nunca se quedan en tierra.",
+    "¿Problemas de rendimiento? En Vuelo, solo llevamos equipaje de mano.",
+    "Vuelo: La única vez que 'despegar' es una buena noticia para tu código.",
+    "Con Vuelo, incluso el código más pesado se siente ligero."
+];
+
+const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+const message = ref(randomMessage);
+</script>
+
+<style scoped>
+</style>

package/vueloFramework/defaults/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vuelo App</title>
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"><!--vuelo-app-html--></div>
+  </body>
+</html>

package/vueloFramework/hydrateClientComponents.js

@@ -0,0 +1,267 @@
+import {
+  createApp,
+} from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js";
+
+export function hydrateComponents() {
+  const elements = document.querySelectorAll("[data-hydrate]");
+  
+  console.log(`[DEBUG] Found ${elements.length} elements to hydrate`);
+
+  elements.forEach(async (element) => {
+    const componentName = element.getAttribute("data-hydrate");
+    const eventType = element.getAttribute("data-hydrate-event");
+
+    console.log(`[DEBUG] Setting up hydration for ${componentName} with event ${eventType}`);
+
+    if (!componentName || !eventType) {
+      console.warn(`[WARN] Missing componentName or eventType for element:`, element);
+      return;
+    }
+
+    const hydrate = async () => {
+      console.log(`[DEBUG] Hydration triggered for ${componentName}`);
+      try {
+        // Importar dinámicamente el componente compilado como módulo ES
+        const moduleUrl = `/api/islands/${componentName.toLowerCase()}`;
+        
+        console.log(`[DEBUG] Fetching component from: ${moduleUrl}`);
+        
+        // Crear un módulo dinámico usando import() con un data URL o fetch + eval
+        // Como no podemos usar import() directamente con URLs relativas en todos los navegadores,
+        // vamos a usar una técnica alternativa: crear un script module dinámicamente
+        const response = await fetch(moduleUrl);
+        if (!response.ok) {
+          console.error(`[ERROR] Failed to fetch component: ${response.status} ${response.statusText}`);
+          throw new Error(`Network response was not ok: ${response.status}`);
+        }
+
+        const compiledCode = await response.text();
+        
+        console.log(`[DEBUG] Fetching component ${componentName}...`);
+        console.log(`[DEBUG] Code length: ${compiledCode.length}`);
+        console.log(`[DEBUG] First 300 chars:`, compiledCode.substring(0, 300));
+        
+        let Component;
+        
+        // Usar Blob URL para crear un módulo que el navegador pueda importar
+        // Esto permite que los imports estáticos funcionen si están correctamente resueltos
+        const blob = new Blob([compiledCode], { type: 'application/javascript' });
+        const blobUrl = URL.createObjectURL(blob);
+        
+        try {
+          // Intentar importar el módulo usando Blob URL
+          // Los imports dentro del código deberían resolverse automáticamente
+          const module = await import(blobUrl);
+          
+          // Limpiar el Blob URL después de importar
+          URL.revokeObjectURL(blobUrl);
+          
+          console.log(`[DEBUG] Module imported:`, module);
+          console.log(`[DEBUG] Module keys:`, Object.keys(module));
+          console.log(`[DEBUG] Module.default:`, module.default);
+          
+          // Obtener el componente (puede estar en default o en exports)
+          Component = module.default || module;
+          
+          if (!Component) {
+            // Intentar acceder directamente a las propiedades del módulo
+            Component = Object.values(module).find(v => v && typeof v === 'object' && (v.render || v.setup || v.__name));
+            console.log(`[DEBUG] Component found in module values:`, Component);
+          }
+          
+          // Verificar que el componente tenga las propiedades necesarias
+          if (Component) {
+            console.log(`[DEBUG] Component structure:`, {
+              hasRender: !!Component.render,
+              hasSetup: !!Component.setup,
+              hasTemplate: !!Component.template,
+              __name: Component.__name
+            });
+          }
+        } catch (importError) {
+          console.error("Blob URL import failed:", importError);
+          console.error("Import error details:", importError.message, importError.stack);
+          URL.revokeObjectURL(blobUrl);
+          
+          // Fallback: usar Function constructor para código sin imports complejos
+          try {
+            console.log(`[DEBUG] Trying Function constructor fallback...`);
+            const moduleExports = {};
+            const module = { exports: moduleExports };
+            const exports = moduleExports;
+            
+            // Ejecutar el código compilado
+            const moduleFunction = new Function('module', 'exports', compiledCode);
+            moduleFunction(module, exports);
+            
+            Component = module.exports.default || module.exports;
+            
+            console.log(`[DEBUG] Component from Function constructor:`, Component);
+            console.log(`[DEBUG] Component structure:`, {
+              hasRender: Component?.render ? 'yes' : 'no',
+              hasSetup: Component?.setup ? 'yes' : 'no',
+              __name: Component?.__name
+            });
+          } catch (functionError) {
+            console.error("Function constructor also failed:", functionError);
+            console.error("Function error details:", functionError.message, functionError.stack);
+            throw new Error(`Failed to load component ${componentName}: ${functionError.message}`);
+          }
+        }
+        
+        if (!Component) {
+          console.error(`[ERROR] Component ${componentName} not found. Module structure:`, Object.keys(module || {}));
+          throw new Error(`Component ${componentName} not found in module exports`);
+        }
+        
+        console.log(`[DEBUG] Component found:`, Component);
+
+        // Verificar que el componente sea válido
+        if (typeof Component !== 'object' || !Component) {
+          throw new Error(`Invalid component: ${Component}`);
+        }
+
+        // Verificar que el componente tenga render o setup
+        if (!Component.render && !Component.setup && !Component.template) {
+          console.warn(`[WARN] Component ${componentName} doesn't have render, setup, or template`);
+        }
+
+        // Extraer props de atributos data-*
+        const props = {};
+        for (let i = 0; i < element.attributes.length; i++) {
+          const attr = element.attributes[i];
+          if (attr.name.startsWith('data-prop-')) {
+            const propName = attr.name.replace('data-prop-', '');
+            try {
+              // Intentar parsear como JSON, si falla usar el valor directo
+              props[propName] = JSON.parse(attr.value);
+            } catch (e) {
+              props[propName] = attr.value;
+            }
+          }
+        }
+
+        // Guardar las clases y estilos del elemento original para preservarlos
+        const originalClasses = element.className;
+        const originalId = element.id;
+        const originalStyles = element.getAttribute('style') || '';
+        
+        // Limpiar completamente el contenido del elemento antes de montar
+        // Esto asegura que Vue tenga control completo
+        element.innerHTML = '';
+        
+        // Remover atributos de hidratación para evitar conflictos
+        element.removeAttribute('data-hydrate');
+        element.removeAttribute('data-hydrate-event');
+
+        // Crea una nueva instancia de la aplicación Vue para el cliente
+        // Usar createApp en lugar de createSSRApp para el cliente
+        const app = createApp(Component, props);
+
+        // Montar el componente directamente en el elemento
+        // Vue reemplazará el contenido del elemento con el componente
+        const instance = app.mount(element);
+        
+        // Después de montar, verificar si hay un doble contenedor
+        // Si el elemento tiene un solo hijo que es un div sin atributos importantes,
+        // extraer su contenido para evitar el doble contenedor
+        if (element.children.length === 1) {
+          const wrapperDiv = element.firstElementChild;
+          if (wrapperDiv && 
+              wrapperDiv.tagName === 'DIV' && 
+              !wrapperDiv.id &&
+              !wrapperDiv.getAttribute('data-hydrate') &&
+              !wrapperDiv.getAttribute('data-hydrate-event')) {
+            // Contar atributos no importantes (solo class y style son aceptables)
+            const importantAttrs = Array.from(wrapperDiv.attributes).filter(attr => 
+              attr.name !== 'class' && attr.name !== 'style'
+            );
+            
+            // Si solo tiene class/style o ningún atributo, podemos aplanarlo
+            if (importantAttrs.length === 0) {
+              // Preservar las clases del wrapper si las tiene
+              if (wrapperDiv.className && !originalClasses) {
+                element.className = wrapperDiv.className;
+              } else if (wrapperDiv.className && originalClasses) {
+                element.className = originalClasses + ' ' + wrapperDiv.className;
+              }
+              
+              // Mover todos los hijos del div wrapper al elemento original
+              const fragment = document.createDocumentFragment();
+              while (wrapperDiv.firstChild) {
+                fragment.appendChild(wrapperDiv.firstChild);
+              }
+              element.removeChild(wrapperDiv);
+              element.appendChild(fragment);
+            }
+          }
+        }
+        
+        // Restaurar clases, id y estilos si es necesario (solo si no se restauraron arriba)
+        if (originalClasses && !element.className.includes(originalClasses)) {
+          element.className = originalClasses + (element.className ? ' ' + element.className : '');
+        }
+        if (originalId) {
+          element.id = originalId;
+        }
+        if (originalStyles) {
+          const currentStyle = element.getAttribute('style') || '';
+          element.setAttribute('style', originalStyles + (currentStyle ? '; ' + currentStyle : ''));
+        }
+
+        console.log("hydrated:", componentName);
+        console.log(`[DEBUG] Component mounted, instance:`, instance);
+        
+        // Verificar que el componente se montó correctamente
+        if (!instance) {
+          console.warn(`[WARN] Component ${componentName} mounted but instance is null`);
+        }
+      } catch (error) {
+        console.error("Error hydrating component:", error);
+      }
+    };
+
+    // Variable para rastrear si ya se hidrató este elemento
+    let isHydrated = false;
+    
+    const doHydrate = async () => {
+      if (isHydrated) {
+        console.log(`[DEBUG] Component ${componentName} already hydrated, skipping`);
+        return;
+      }
+      isHydrated = true;
+      await hydrate();
+    };
+
+    switch (eventType) {
+      case "load":
+        // Para load, verificar si la página ya cargó
+        if (document.readyState === 'complete') {
+          // Si ya cargó, hidratar inmediatamente
+          doHydrate();
+        } else {
+          // Si no, esperar al evento load
+          window.addEventListener("load", doHydrate, { once: true });
+        }
+        break;
+      case "click":
+        // Para click, prevenir la propagación y solo hidratar una vez
+        element.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          doHydrate();
+        }, { once: true });
+        break;
+      case "mouseover":
+        element.addEventListener("mouseover", doHydrate, { once: true });
+        break;
+      default:
+        console.warn(`Unknown event type: ${eventType}`);
+        break;
+    }
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  hydrateComponents();
+});

package/vueloFramework/interfaces/vueloConfig.ts

@@ -0,0 +1,5 @@
+export interface VueloConfig {
+  port?: number;
+  flavor?: "bun" | "deno" | "node";
+  mode?: "SSR" | "SSRIslands" | "static";
+}

package/vueloFramework/router.ts

@@ -0,0 +1,7 @@
+export function resolveRouteComponent(components: any[], url: URL) {
+  const route = components.find((c) => c.route.route === url.pathname); // Encuentra la ruta correspondiente
+  if (!route) {
+    return null; // Retornar null si no se encuentra la ruta
+  }
+  return route.component; // Retornar el componente si se encontró la ruta
+}

package/vueloFramework/server.ts

@@ -0,0 +1,23 @@
+import { createServer } from "vite";
+import { getImports, islandsComponents, pagesComponents } from "./autoImport";
+import { type VueloConfig } from "./interfaces/vueloConfig";
+import BunServer from "./servers/bun";
+
+export async function vuelo(config: VueloConfig = {}) {
+  const defaultConfig: VueloConfig = {
+    port: 9876,
+    flavor: "bun",
+    mode: "SSR",
+  };
+  const finalConfig = { ...defaultConfig, ...config };
+  const vite = await createServer({
+    server: { middlewareMode: true },
+  });
+  const autoImports = await getImports();
+  const components = {
+    pages: await pagesComponents(vite, autoImports.manifest.pages),
+    islands: await islandsComponents(vite, autoImports.manifest.islands),
+  };
+  const server = BunServer(vite, finalConfig, components);
+  return server;
+}

package/vueloFramework/servers/bun.ts

@@ -0,0 +1,131 @@
+import type { ViteDevServer } from "vite";
+import { createVueloApp } from "../createVueloApp";
+import { resolveRouteComponent } from "../router";
+import getTemplate from "../utils/template";
+import type { VueloConfig } from "../interfaces/vueloConfig";
+import fs from "fs"; // Asegúrate de importar el módulo fs para trabajar con el sistema de archivos
+import path from "path"; // Asegúrate de importar el módulo path para manejar rutas
+import { compileVueComponent } from "../utils/compile";
+
+export default function BunServer(
+  vite: ViteDevServer,
+  config: VueloConfig,
+  components: any,
+) {
+  return Bun.serve({
+    async fetch(req) {
+      const url = new URL(req.url);
+      
+      // Manejar requests de /@fs/ para imports de archivos del sistema
+      if (url.pathname.startsWith("/@fs/")) {
+        try {
+          const filePath = url.pathname.replace("/@fs/", "");
+          
+          // Si es un archivo Vue, compilarlo usando nuestra función
+          if (filePath.endsWith(".vue")) {
+            const compiledCode = await compileVueComponent(vite, filePath);
+            return new Response(compiledCode, {
+              headers: { "Content-Type": "application/javascript" },
+            });
+          }
+          
+          // Para otros archivos, leer y servir directamente
+          const fileContent = await fs.promises.readFile(filePath, "utf-8");
+          return new Response(fileContent, {
+            headers: { "Content-Type": "application/javascript" },
+          });
+        } catch (error) {
+          console.error("Error serving /@fs/ file:", error);
+          return new Response("Not Found", { status: 404 });
+        }
+      }
+      
+      // Servir hydrateClientComponents.js de forma estática
+      if (url.pathname === "/vuelo/hydrateClientComponents.js") {
+        const filePath = path.join(__dirname, "../hydrateClientComponents.js"); // Ajusta la ruta al archivo
+        try {
+          // Leer el archivo de forma asíncrona
+          const fileContent = await fs.promises.readFile(filePath, "utf-8");
+          return new Response(fileContent, {
+            headers: { "Content-Type": "application/javascript" }, // Especifica el tipo MIME para JavaScript
+          });
+        } catch (error) {
+          console.error("Error reading hydrateClientComponents.js:", error);
+          return new Response("Internal Server Error", { status: 500 });
+        }
+      }
+      // manejar rutas de islas - servir componentes compilados como módulos ES
+      if (url.pathname.startsWith("/api/islands/")) {
+        for (const island of components.islands) {
+          const name = "/api/islands/" + island.name.toLowerCase();
+          // Resolver la ruta correctamente
+          let absolutePath = island.path;
+          
+          // Si la ruta empieza con /src/, es una ruta absoluta incorrecta
+          // Necesitamos resolverla desde el directorio del proyecto
+          if (absolutePath.startsWith("/src/")) {
+            absolutePath = path.resolve(process.cwd(), absolutePath.slice(1));
+          } else if (!path.isAbsolute(absolutePath)) {
+            // Si es relativa, resolverla desde el directorio del proyecto
+            absolutePath = path.resolve(process.cwd(), absolutePath);
+          }
+
+          if (url.pathname === name) {
+            try {
+              // Verificar que el archivo existe
+              if (!fs.existsSync(absolutePath)) {
+                console.error(`File not found: ${absolutePath} (original: ${island.path})`);
+                return new Response("Component file not found", { status: 404 });
+              }
+              
+              // Compilar el componente usando Vite
+              const compiledCode = await compileVueComponent(vite, absolutePath);
+
+              return new Response(compiledCode, {
+                headers: {
+                  "Content-Type": "application/javascript",
+                },
+              });
+            } catch (error) {
+              console.error("Error compiling component:", error);
+              return new Response("Internal Server Error", { status: 500 });
+            }
+          }
+        }
+        // Si ninguna ruta de isla coincide, puedes retornar un 404 o un mensaje
+        return new Response("Not Found", { status: 404 });
+      } else {
+        // manejar páginas del frontend
+        try {
+          let template = getTemplate();
+          template = await vite.transformIndexHtml(url.origin, template)
+          const rcomponent = resolveRouteComponent(components.pages, url);
+          const appHtml = await createVueloApp(vite, rcomponent);
+          let script = `
+            <script type="module" src="/vuelo/hydrateClientComponents.js"></script>
+          `;
+          if (config.mode === "SSR") {
+            script = `
+            <script type="module" src="/vueloFramework/client.js"></script>
+          `;
+          }
+
+          const html = template
+            .replace(`<!--vuelo-app-html-->`, appHtml)
+            .replace(`</body>`, `${script}</body>`);
+
+          return new Response(html, {
+            headers: { "Content-Type": "text/html" },
+          });
+        } catch (error) {
+          console.error("Error during rendering:", error);
+          return new Response("Internal Server Error", { status: 500 });
+        }
+      }
+
+      // No debería llegar aquí, pero en caso de que sí, puedes retornar un 404 o un mensaje
+      return new Response("Not Found", { status: 404 });
+    },
+    port: config.port,
+  });
+}

package/vueloFramework/utils/compile.ts

@@ -0,0 +1,177 @@
+import type { ViteDevServer } from "vite";
+import fs from "fs";
+import path from "path";
+
+// Función para compilar un componente Vue usando Vite para el cliente
+export async function compileVueComponent(
+  vite: ViteDevServer,
+  filePath: string,
+): Promise<string> {
+  // Leer el contenido del archivo
+  const fileContent = await fs.promises.readFile(filePath, "utf-8");
+  
+  // Usar el pluginContainer de Vite para transformar el componente SFC
+  // Esto transforma <script setup> y otros a código JavaScript válido
+  // Necesitamos usar la URL del módulo en formato Vite
+  const moduleId = `/@fs/${filePath}`;
+  
+  // Primero resolver el ID del módulo
+  const resolved = await vite.pluginContainer.resolveId(moduleId);
+  const id = resolved?.id || moduleId;
+  
+  // Transformar el código usando el pluginContainer
+  const result = await vite.pluginContainer.transform(fileContent, id, { ssr: false });
+  
+  if (!result || !result.code) {
+    throw new Error(`Failed to transform component at ${filePath}`);
+  }
+  
+  let code = result.code;
+  
+  // Reemplazar imports de Vite HMR (no necesarios en el cliente)
+  code = code.replace(
+    /import\s+.*from\s+['"]\/@vite\/client['"];?/g,
+    '// HMR removed for client'
+  );
+  code = code.replace(
+    /import\.meta\.hot\s*=.*;?/g,
+    '// HMR removed for client'
+  );
+  
+  // Reemplazar TODOS los imports de vue desde node_modules/.vite/deps/ con el CDN
+  // Esto incluye imports con query strings como ?v=c407c0a3
+  code = code.replace(
+    /from\s+['"]\/node_modules\/\.vite\/deps\/vue\.js[^'"]*['"]/g,
+    'from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"'
+  );
+  
+  // Reemplazar imports de 'vue' para usar el CDN
+  code = code.replace(
+    /from\s+['"]vue['"]/g,
+    'from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"'
+  );
+  
+  // Verificar si el código usa funciones de Vue pero no tiene imports válidos
+  // Si usa ref, reactive, etc. sin import, necesitamos agregarlo
+  const usesRef = /\bref\s*\(/.test(code);
+  const hasValidVueImport = /import\s+.*\{[^}]*ref[^}]*\}\s+from\s+['"]https:\/\/unpkg\.com\/vue@3\/dist\/vue\.esm-browser\.prod\.js['"]/.test(code) ||
+                             /import\s+\*\s+as\s+Vue\s+from\s+['"]https:\/\/unpkg\.com\/vue@3\/dist\/vue\.esm-browser\.prod\.js['"]/.test(code);
+  
+  if (usesRef && !hasValidVueImport) {
+    // Agregar import de ref y otras funciones comunes de Vue al inicio
+    // Primero, encontrar qué funciones de Vue se están usando
+    const vueImports = [];
+    if (/\bref\s*\(/.test(code)) vueImports.push('ref');
+    if (/\breactive\s*\(/.test(code)) vueImports.push('reactive');
+    if (/\bcomputed\s*\(/.test(code)) vueImports.push('computed');
+    if (/\bwatch\s*\(/.test(code)) vueImports.push('watch');
+    
+    // Agregar el import al inicio del código
+    if (vueImports.length > 0) {
+      code = `import { ${vueImports.join(', ')} } from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js";\n${code}`;
+    }
+  }
+  
+  // Reemplazar imports relativos con rutas absolutas usando /@fs/
+  // Esto permite que Vite resuelva los imports cuando se sirven
+  code = code.replace(
+    /from\s+['"]\.\/([^'"]+)['"]/g,
+    (match, importPath) => {
+      const resolvedPath = path.resolve(path.dirname(filePath), importPath);
+      return `from "/@fs/${resolvedPath}"`;
+    }
+  );
+  
+  // También manejar imports de '../'
+  code = code.replace(
+    /from\s+['"]\.\.\/([^'"]+)['"]/g,
+    (match, importPath) => {
+      const resolvedPath = path.resolve(path.dirname(filePath), "..", importPath);
+      return `from "/@fs/${resolvedPath}"`;
+    }
+  );
+  
+  // Asegurarse de que el componente se exporte como default
+  // El código compilado crea _sfc_main, necesitamos exportarlo
+  if (code.includes('const _sfc_main') || code.includes('var _sfc_main')) {
+    // Buscar si ya hay un export default
+    if (!code.match(/export\s+default\s+_sfc_main/)) {
+      // Agregar el export al final del código
+      code += '\nexport default _sfc_main;';
+    }
+  }
+  
+  // Asegurarse de que el código exporte el componente correctamente
+  // El código compilado por Vite para SFC con <script setup> ya debería tener export default
+  // Pero verificamos que esté presente
+  if (!code.includes('export default') && !code.includes('export {')) {
+    console.warn(`[WARN] Compiled code for ${filePath} doesn't seem to have exports`);
+  }
+  
+  // Eliminar código de HMR que no funciona en el cliente
+  code = code.replace(/if\s*\(import\.meta\.hot\)\s*\{[\s\S]*?\}/g, '// HMR removed');
+  code = code.replace(/__VUE_HMR_RUNTIME__[^}]*\}/g, '// HMR removed');
+  code = code.replace(/typeof\s+[^=]*=\s*mod[\s\S]*?\}/g, '// HMR removed');
+  code = code.replace(/_sfc_main\.__hmrId\s*=\s*[^;]+;?/g, '// HMR removed');
+  
+  // Eliminar import de _export_sfc que no funciona en el cliente
+  code = code.replace(/import\s+_export_sfc\s+from\s+['"][^'"]*export-helper['"];?/g, '');
+  
+  // Buscar la función render (probablemente _sfc_render)
+  const renderMatch = code.match(/function\s+(_sfc_render[^\s(]*)\s*\(/);
+  if (renderMatch) {
+    const renderFnName = renderMatch[1];
+    
+    // Primero, eliminar cualquier asignación incorrecta que esté dentro del setup
+    code = code.replace(/_sfc_main\.render\s*=\s*_sfc_render\s*;?\s*\n/g, '');
+    
+    // Buscar donde termina la definición de _sfc_main (el cierre del objeto, no del setup)
+    // El patrón es: const _sfc_main = { setup(...) { ... } } seguido de un salto de línea o import
+    // Necesitamos encontrar el cierre del objeto _sfc_main, no el cierre de setup
+    const sfcMainEndMatch = code.match(/(const _sfc_main = \{[\s\S]*?setup\([^)]*\)\s*\{[\s\S]*?\}\s*\n\})\s*(?=\n|import|function|const|let|var|export)/);
+    
+    if (sfcMainEndMatch) {
+      // Insertar la asignación del render justo después de la definición completa de _sfc_main
+      code = code.replace(sfcMainEndMatch[0], sfcMainEndMatch[1] + `\n_sfc_main.render = ${renderFnName};\n`);
+    } else {
+      // Fallback: buscar el patrón más simple - después del cierre del objeto _sfc_main
+      // Buscar: const _sfc_main = { ... } seguido de algo que no sea parte del objeto
+      const simpleMatch = code.match(/(const _sfc_main = \{[\s\S]*?\n\})\s*(?=\n|import|function|const|let|var|export)/);
+      if (simpleMatch) {
+        code = code.replace(simpleMatch[0], simpleMatch[1] + `\n_sfc_main.render = ${renderFnName};\n`);
+      }
+    }
+  }
+  
+  // Reemplazar _export_sfc con asignación directa del render si existe
+  const exportSfcMatch = code.match(/export\s+default\s+[^_]*_export_sfc\s*\(\s*_sfc_main\s*,\s*\[\s*\[\s*['"]render['"]\s*,\s*([^,\]]+)\s*\]/);
+  if (exportSfcMatch) {
+    const renderFnName = exportSfcMatch[1].trim();
+    // Asignar el render directamente a _sfc_main si no está ya asignado
+    if (!code.includes('_sfc_main.render =')) {
+      code = code.replace(/(const _sfc_main = \{[\s\S]*?\n\})\s*/, (match) => {
+        return match + `\n_sfc_main.render = ${renderFnName};\n`;
+      });
+    }
+    // Eliminar el export con _export_sfc
+    code = code.replace(/export\s+default\s+[^_]*_export_sfc\s*\([^)]+\)/, '');
+  }
+  
+  // Eliminar todos los export default existentes
+  code = code.replace(/export\s+default\s+[^;]+;?\s*/g, '');
+  
+  // Agregar un solo export default de _sfc_main al final
+  if (code.includes('_sfc_main')) {
+    code += '\nexport default _sfc_main;';
+  }
+  
+  // Log para depuración (mostrar más caracteres para ver el template)
+  console.log(`[DEBUG compile] Compiled code preview (first 1000 chars):`, code.substring(0, 1000));
+  console.log(`[DEBUG compile] Code length: ${code.length}`);
+  console.log(`[DEBUG compile] Has export default: ${code.includes('export default')}`);
+  console.log(`[DEBUG compile] Has _sfc_main: ${code.includes('_sfc_main')}`);
+  console.log(`[DEBUG compile] Has _sfc_main.render: ${code.includes('_sfc_main.render')}`);
+  console.log(`[DEBUG compile] Last 500 chars:`, code.substring(code.length - 500));
+  
+  return code;
+}

package/vueloFramework/utils/template.ts

@@ -0,0 +1,28 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { join } from "path";
+
+function getTemplate() {
+  let template;
+
+  try {
+    // Intenta leer el archivo index.html en la ruta especificada
+    template = readFileSync(resolve("index.html"), "utf-8");
+  } catch (error) {
+    // Si no se encuentra, intenta leerlo desde la carpeta defaults
+    try {
+      const file = join(__dirname, "../defaults/index.html");
+      template = readFileSync(file, "utf-8");
+    } catch (error) {
+      // Maneja el error si tampoco se encuentra el archivo en defaults
+      console.error(
+        "No se pudo encontrar el template en ninguna de las rutas especificadas.",
+      );
+      template = ""; // O alguna otra acción que desees realizar
+    }
+  }
+
+  return template;
+}
+
+export default getTemplate;