versacompiler 1.0.2 → 1.0.4

package/dist/hrm/devMode.js

@@ -0,0 +1,249 @@
+let currentComponentTree = null;
+
+function findNodeByInstance(tree, instance) {
+    if (tree.name === instance) return tree;
+    for (const child of tree.children) {
+        const found = findNodeByInstance(child, instance);
+        if (found) return found;
+    }
+    return null;
+}
+
+function getPathToRoot(node) {
+    const path = [];
+    while (node) {
+        path.push(node);
+        node = node.parent;
+    }
+    return path; // Ordenado desde hijo hasta raíz
+}
+
+// Función auxiliar para encontrar componentes recursivamente dentro de un VNode genérico
+function recursivelyFindComponentsInVNode(vnode, parentTreeNode) {
+    if (!vnode || typeof vnode !== 'object') {
+        return;
+    }
+
+    if (vnode.component) {
+        const childComponentInstance = vnode.component;
+
+        let componentName = 'Anonymous';
+        if (childComponentInstance.type) {
+            if (childComponentInstance.type.name) {
+                componentName = childComponentInstance.type.name;
+            } else if (childComponentInstance.type.__name) {
+                componentName = childComponentInstance.type.__name;
+            } else if (typeof childComponentInstance.type === 'function') {
+                const funcName = childComponentInstance.type.name;
+                if (funcName && funcName !== 'Anonymous function') {
+                    componentName = funcName;
+                }
+                // Heurísticas para componentes comunes de Vue
+                const typeStr = childComponentInstance.type.toString();
+                if (typeStr.includes('BaseTransition')) {
+                    componentName = 'Transition';
+                } else if (typeStr.includes('KeepAlive')) {
+                    componentName = 'KeepAlive';
+                } else if (typeStr.includes('Suspense')) {
+                    componentName = 'Suspense';
+                }
+            }
+        }
+
+        const childTreeNode = {
+            name: componentName,
+            instancia: childComponentInstance,
+            children: [],
+            parent: parentTreeNode,
+            isRoot: false,
+        };
+        parentTreeNode.children.push(childTreeNode);
+        traverseComponentInstance(childComponentInstance, childTreeNode);
+    } else {
+        const childrenToExplore = vnode.children || vnode.dynamicChildren;
+        if (Array.isArray(childrenToExplore)) {
+            childrenToExplore.forEach(childVNode => {
+                recursivelyFindComponentsInVNode(childVNode, parentTreeNode);
+            });
+        }
+    }
+}
+
+// Función principal de recorrido, ahora llamada traverseComponentInstance
+function traverseComponentInstance(componentInstance, currentTreeNode) {
+    const subTreeVNode = componentInstance.subTree;
+
+    if (!subTreeVNode) {
+        return;
+    }
+
+    recursivelyFindComponentsInVNode(subTreeVNode, currentTreeNode);
+}
+
+export const buildComponentTree = componentRootInstance => {
+    const tree = {
+        name:
+            componentRootInstance.type?.name ||
+            componentRootInstance.type?.__name ||
+            'Anonymous',
+        instancia: componentRootInstance,
+        children: [],
+        parent: null,
+        isRoot: true,
+    };
+    traverseComponentInstance(componentRootInstance, tree);
+    return tree;
+};
+
+// Nueva función auxiliar para intentar forzar la actualización de una instancia
+function tryForceUpdate(instance) {
+    if (!instance) {
+        return false;
+    }
+    if (instance.proxy && typeof instance.proxy.$forceUpdate === 'function') {
+        instance.proxy.$forceUpdate();
+        instance.update();
+        // buscar una varible en el componente que se llame versaComponentKey y sumarle 1
+        instance.ctx._.setupState.versaComponentKey++;
+        return true;
+    }
+    if (typeof instance.update === 'function') {
+        if (instance.ctx._.setupState.versaComponentKey) {
+            instance.ctx._.setupState.versaComponentKey++;
+        }
+        instance.update();
+        return true;
+    }
+    return false;
+}
+
+export async function reloadComponent(
+    app,
+    componentName,
+    relativePath,
+    _extension,
+    _type,
+) {
+    try {
+        const baseUrl = window.location.href;
+        const newBaseUrl = new URL(baseUrl);
+        const urlOrigin = `${newBaseUrl.origin}/${relativePath}`;
+        const module = await import(`${urlOrigin}?t=${Date.now()}`);
+        currentComponentTree = buildComponentTree(app._instance);
+
+        const targetNode = findNodeByInstance(
+            currentComponentTree,
+            componentName,
+        );
+        const path = getPathToRoot(targetNode);
+        for (const instanciaParent of path) {
+            if (
+                instanciaParent.isRoot ||
+                instanciaParent.name === 'KeepAlive'
+            ) {
+                window.location.reload();
+                return;
+            }
+            if (instanciaParent.name !== componentName) {
+                if (
+                    instanciaParent.name !== 'BaseTransition' &&
+                    instanciaParent.name !== 'Transition' &&
+                    instanciaParent.name !== 'Suspense'
+                ) {
+                    const componentsDefinition =
+                        instanciaParent.instancia?.type?.components ||
+                        instanciaParent.instancia?.components;
+
+                    if (
+                        componentsDefinition &&
+                        componentsDefinition[componentName]
+                    ) {
+                        componentsDefinition[componentName] = module.default;
+                        if (tryForceUpdate(instanciaParent.instancia)) {
+                            console.log(
+                                `✔️ Versa HMR: Component updated successfully`,
+                            );
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+        return null;
+    } catch (error) {
+        console.log(error.stack);
+        return {
+            msg: `Error al recargar ${componentName}: ${error}`,
+            error,
+        };
+    }
+}
+
+// Función Debounce
+export function debounce(func, waitFor) {
+    let timeout = null;
+
+    const debounced = (...args) => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => func(...args), waitFor);
+    };
+
+    return debounced;
+}
+
+export async function reloadJS(_relativePath) {
+    location.reload();
+}
+
+export function socketReload(app) {
+    if (window.___browserSync___?.socket) {
+        const socket = window.___browserSync___.socket;
+        // Configura el observer para actualizar el árbol de componentes en cada mutación relevante
+        if (app && app._container) {
+            currentComponentTree = buildComponentTree(app._instance);
+            initializeMutationObserver(app._container, () => {
+                if (app._instance) {
+                    currentComponentTree = buildComponentTree(app._instance);
+                }
+            });
+        }
+        socket.on('vue:update', data => {
+            console.log('pasa');
+            if (document.querySelector('#versa-hmr-error-overlay')) {
+                window.location.reload();
+                return;
+            }
+
+            const { component, relativePath, extension, type, timestamp } =
+                data;
+            if (extension === 'vue') {
+                reloadComponent(
+                    app,
+                    component,
+                    `/${relativePath}`,
+                    type,
+                    extension,
+                );
+            } else {
+                reloadJS(`/${relativePath}?t=${timestamp}`);
+            }
+        });
+    } else {
+        setTimeout(() => {
+            window.location.reload();
+        }, 5000);
+    }
+}
+
+function initializeMutationObserver(targetNode, callback, options) {
+    const observerInstance = new MutationObserver(callback);
+    const defaultOptions = {
+        childList: true,
+        subtree: true,
+        attributes: false,
+    };
+    observerInstance.observe(targetNode, { ...defaultOptions, ...options });
+    return observerInstance;
+}

package/dist/hrm/errorScreen.js

@@ -0,0 +1,61 @@
+let errorOverlay;
+export function hideErrorOverlay() {
+    const existingOverlay = document.getElementById('versa-hmr-error-overlay');
+    if (existingOverlay) {
+        existingOverlay.remove();
+    }
+    errorOverlay = null;
+}
+export function showErrorOverlay(errorMessage, errorDetails = '') {
+    hideErrorOverlay(); // Ensure no duplicate overlays
+
+    errorOverlay = document.createElement('div');
+    errorOverlay.id = 'versa-hmr-error-overlay';
+    errorOverlay.style.position = 'fixed';
+    errorOverlay.style.top = '0';
+    errorOverlay.style.left = '0';
+    errorOverlay.style.width = '100vw';
+    errorOverlay.style.height = '100vh';
+    errorOverlay.style.backgroundColor = 'rgba(0, 0, 0, 1.85)';
+    errorOverlay.style.color = '#ff8080';
+    errorOverlay.style.zIndex = '999999';
+    errorOverlay.style.display = 'flex';
+    errorOverlay.style.flexDirection = 'column';
+    errorOverlay.style.alignItems = 'center';
+    errorOverlay.style.justifyContent = 'center';
+    errorOverlay.style.fontFamily = 'monospace';
+    errorOverlay.style.fontSize = '16px';
+    errorOverlay.style.padding = '20px';
+    errorOverlay.style.boxSizing = 'border-box';
+    errorOverlay.style.textAlign = 'left';
+    errorOverlay.style.overflow = 'auto';
+
+    const title = document.createElement('h2');
+    title.textContent = 'Versa HMR Error';
+    title.style.color = '#ff4d4d';
+    title.style.fontSize = '24px';
+    title.style.marginBottom = '20px';
+
+    const messageDiv = document.createElement('div');
+    messageDiv.textContent = errorMessage;
+    messageDiv.style.marginBottom = '15px';
+    messageDiv.style.whiteSpace = 'pre-wrap';
+
+    const detailsPre = document.createElement('pre');
+    detailsPre.textContent = errorDetails;
+    detailsPre.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+    detailsPre.style.padding = '10px';
+    detailsPre.style.borderRadius = '5px';
+    detailsPre.style.maxHeight = '50vh';
+    detailsPre.style.overflow = 'auto';
+    detailsPre.style.width = '100%';
+    detailsPre.style.maxWidth = '800px';
+
+    errorOverlay.appendChild(title);
+    errorOverlay.appendChild(messageDiv);
+    if (errorDetails) {
+        errorOverlay.appendChild(detailsPre);
+    }
+
+    document.body.appendChild(errorOverlay);
+}

package/dist/hrm/instanciaVue.js

@@ -0,0 +1,35 @@
+// Store for the Vue app instance
+let vueAppInstance = null;
+
+// Exponer la instancia en window para acceso global
+if (typeof window !== 'undefined') {
+    window.__VUE_APP_INSTANCE__ = {
+        set: function(instance) {
+            vueAppInstance = instance;
+            console.log('Vue app instance stored successfully in window.__VUE_APP_INSTANCE__');
+            return instance;
+        },
+        get: function() {
+            return vueAppInstance;
+        }
+    };
+}
+
+export default {
+    methods: {
+        // Set the Vue app instance
+        set(instance) {
+            vueAppInstance = instance;
+            // También lo guardamos en window para acceso global
+            if (typeof window !== 'undefined') {
+                window.__VUE_APP_INSTANCE__.set(instance);
+            }
+            console.log('Vue app instance stored successfully');
+            return instance;
+        },
+        // Get the Vue app instance
+        get() {
+            return vueAppInstance;
+        },
+    },
+};

package/dist/hrm/setupHMR.js

@@ -0,0 +1,57 @@
+// setupHMR.js - Helper to set up Hot Module Reloading for Vue
+import instanciaVue from './instanciaVue.js';
+
+/**
+ * Set up Hot Module Reloading for a Vue application
+ * @param {Object} app - The Vue application instance
+ * @returns {Object} - The same Vue application instance
+ */
+export function setupHMR(app) {
+    // Store the Vue app instance in our instanciaVue module
+    instanciaVue.methods.set(app);
+
+    // También lo guardamos directamente en window para mayor accesibilidad
+    if (typeof window !== 'undefined') {
+        window.__VUE_APP__ = app;
+        console.log('Vue app instance stored directly in window.__VUE_APP__');
+    }
+
+    console.log('HMR setup complete - Vue instance stored for hot reloading');
+
+    return app;
+}
+
+/**
+ * Helper function to wrap your Vue app creation with HMR support
+ * @param {Function} createAppFn - Function that creates and returns your Vue app
+ * @returns {Object} - The Vue application instance with HMR support
+ */
+export function createAppWithHMR(createAppFn) {
+    const app = createAppFn();
+    return setupHMR(app);
+}
+
+/**
+ * Función para obtener la instancia de Vue desde cualquier parte de la aplicación
+ * @returns {Object|null} - La instancia de Vue o null si no está disponible
+ */
+export function getVueInstance() {
+    // Intentar obtener la instancia desde diferentes fuentes
+    if (typeof window !== 'undefined') {
+        // Primero intentar desde window.__VUE_APP__
+        if (window.__VUE_APP__) {
+            return window.__VUE_APP__;
+        }
+
+        // Luego intentar desde window.__VUE_APP_INSTANCE__
+        if (
+            window.__VUE_APP_INSTANCE__ &&
+            typeof window.__VUE_APP_INSTANCE__.get === 'function'
+        ) {
+            return window.__VUE_APP_INSTANCE__.get();
+        }
+    }
+
+    // Finalmente intentar desde instanciaVue
+    return instanciaVue.methods.get();
+}

package/dist/index.js

@@ -15,6 +15,10 @@ import {
     writeFile,
 } from 'node:fs/promises';
 import path from 'node:path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 import { checkSintaxysAcorn } from './services/acorn.js';
 import { linter } from './services/linter.js';
@@ -22,7 +26,7 @@ import { minifyJS } from './services/minify.js';
 import { preCompileTS } from './services/typescript.js';
 import { preCompileVue } from './services/vuejs.js';
 
-import { mapRuta, showTimingForHumans } from './utils/utils.js';
+import { addImportEndJs, mapRuta, showTimingForHumans } from './utils/utils.js';
 
 const log = console.log.bind(console);
 const error = console.error.bind(console);
@@ -161,16 +165,17 @@ const deleteFile = async ruta => {
         )
     ).toString();
     try {
-        log(chalk.yellow(`🗑️ :Eliminando ${newPath}`));
+        log(chalk.yellow(`🗑️ :Intentando eliminar ${newPath}`));
+
+        const stats = await stat(newPath).catch(() => null);
 
-        const stats = await stat(newPath).catch(() => null); // Verificar si el archivo existe
         if (!stats) {
             log(
                 chalk.yellow(
                     `⚠️ :El archivo o directorio no existe: ${newPath}`,
                 ),
             );
-            return { extension: null, normalizedPath: null, fileName: null }; // Devolver un objeto válido
+            return { extension: null, normalizedPath: null, fileName: null };
         }
 
         if (stats.isDirectory()) {
@@ -195,9 +200,10 @@ const deleteFile = async ruta => {
     } catch (errora) {
         error(
             chalk.red(
-                `🚩 :Error al eliminar el archivo/directorio ${newPath}: ${errora}\n`,
+                `🚩 :Error al eliminar el archivo/directorio ${newPath}: ${errora.message}\n`,
             ),
         );
+        return { extension: null, normalizedPath: null, fileName: null }; // Asegurar que se devuelve un objeto en caso de otros errores
     }
 };
 
@@ -305,40 +311,6 @@ const removeCodeTagImport = async data => {
     return data;
 };
 
-/**
- * Agrega la extensión .js a las importaciones en la cadena de datos proporcionada.
- * @param {string} data - La cadena de entrada que contiene el código JavaScript.
- * @returns {Promise<string>} - Una promesa que se resuelve con la cadena modificada con las importaciones actualizadas.
- */
-const addImportEndJs = async data => {
-    const importRegExp = /import\s+[\s\S]*?\s+from\s+['"](.*)['"]/g;
-
-    return data.replace(importRegExp, match => {
-        const ruta = match.match(/from\s+['"](.*)['"]/)[1];
-
-        if (ruta.startsWith('@/')) {
-            // Manejar alias de ruta como @/
-            return match.replace(ruta, `${ruta}.js`);
-        } else if (ruta.endsWith('.vue')) {
-            const resultVue = match.match(/from\s+['"](.+\/(\w+))\.vue['"]/);
-            if (resultVue) {
-                const fullPath = resultVue[1].replace('.vue', '');
-                const fileName = resultVue[2];
-                return `import ${fileName} from '${fullPath}.js';`;
-            }
-        } else if (
-            !ruta.endsWith('.js') &&
-            !ruta.endsWith('.mjs') &&
-            !ruta.endsWith('.css') &&
-            ruta.includes('/')
-        ) {
-            return match.replace(ruta, `${ruta}.js`);
-        }
-
-        return match; // Devolver el match original si no se cumple ninguna condición
-    });
-};
-
 /**
  * Elimina los comentarios con la etiqueta @preserve de la cadena de datos proporcionada.
  * @param {string} data - La cadena de entrada que contiene el código JavaScript.
@@ -740,13 +712,20 @@ const initChokidar = async () => {
                 port: uiPort, // Puerto aleatorio para la interfaz de usuario
             },
             socket: {
-                domain: `localhost:${port}`, // Mismo puerto que arriba
+                // domain: `localhost:${port}`, // Dominio para la conexión de socket
                 path: '/browser-sync/socket.io', // Ruta correcta para socket.io
             },
             snippetOptions: {
                 rule: {
                     match: /<\/body>/i,
-                    fn: (snippet, match) => `${snippet}${match}`,
+                    fn: (snippet, match) => {
+                        console.log(
+                            '🟢 Inyectando snippet de BrowserSync y vueLoader.js en el HTML',
+                        );
+                        return `${snippet}${match}
+                        <script type="module" src="/__versa/vueLoader.js"></script>
+                        `;
+                    },
                 },
             },
             logLevel: 'debug',
@@ -756,12 +735,68 @@ const initChokidar = async () => {
             watchEvents: ['change', 'add', 'unlink', 'addDir', 'unlinkDir'],
             reloadDelay: 500,
             reloadDebounce: 500,
+            reloadOnRestart: true,
             notify: true,
             watchOptions: {
                 ignoreInitial: true,
                 ignored: ['node_modules', '.git'],
             },
-            middleware: function (req, res, next) {
+            middleware: async function (req, res, next) {
+                // para evitar el error de CORS
+                res.setHeader('Access-Control-Allow-Origin', '*');
+                res.setHeader('Access-Control-Allow-Methods', '*');
+                res.setHeader('Access-Control-Allow-Headers', '*');
+                res.setHeader('Access-Control-Allow-Credentials', 'true');
+                res.setHeader('Access-Control-Max-Age', '3600');
+
+                //para redigir a la ubicación correcta
+                if (req.url === '/__versa/vueLoader.js') {
+                    // Busca vueLoader.js en la carpeta de salida configurada
+                    const vueLoaderPath = path.join(
+                        __dirname,
+                        'services/vueLoader.js',
+                    );
+                    res.setHeader('Content-Type', 'application/javascript');
+                    try {
+                        const fileContent = await readFile(
+                            vueLoaderPath,
+                            'utf-8',
+                        );
+                        res.end(fileContent);
+                    } catch (error) {
+                        console.error(
+                            chalk.red(
+                                `🚩 :Error al leer el archivo ${vueLoaderPath}: ${error.message}`,
+                            ),
+                        );
+                        res.statusCode = 404;
+                        res.end('// vueLoader.js not found');
+                    }
+                    return;
+                }
+                // Si la URL comienza con /__versa/hrm/, sirve los archivos de dist/hrm
+                if (req.url.startsWith('/__versa/hrm/')) {
+                    // Sirve archivos de dist/hrm como /__versa/hrm/*
+                    const filePath = path.join(
+                        __dirname,
+                        req.url.replace('/__versa/', ''),
+                    );
+                    res.setHeader('Content-Type', 'application/javascript');
+                    try {
+                        const fileContent = await readFile(filePath, 'utf-8');
+                        res.end(fileContent);
+                    } catch (error) {
+                        console.error(
+                            chalk.red(
+                                `🚩 :Error al leer el archivo ${filePath}: ${error.message}`,
+                            ),
+                        );
+                        res.statusCode = 404;
+                        res.end('// Not found');
+                    }
+                    return;
+                }
+
                 // detectar si es un archivo estático, puede que contenga un . y alguna extensión o dashUsers.js?v=1746559083866
                 const isAssets = req.url.match(
                     /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot|map|webp|avif|json|html|xml|txt|pdf|zip|mp4|mp3|wav|ogg)(\?.*)?$/i,
@@ -818,6 +853,9 @@ const initChokidar = async () => {
                 next();
             },
         });
+        console.log(
+            '🟢 BrowserSync inicializado. Esperando conexiones de socket...',
+        );
     } catch (error) {
         console.error(
             chalk.red('🚩 :Error al iniciar:'),

package/dist/services/acorn.js

@@ -1,4 +1,5 @@
 import * as Parser from 'acorn';
+import chalk from 'chalk';
 /**
  * Parses the given JavaScript code using Acorn and returns the Abstract Syntax Tree (AST).
  *
@@ -8,7 +9,7 @@ import * as Parser from 'acorn';
  */
 export const checkSintaxysAcorn = async data => {
     try {
-        const ast = Parser.parse(data, {
+        const ast = await Parser.parse(data, {
             ecmaVersion: 2020,
             sourceType: 'module',
             locations: true,

package/dist/services/vueLoader.js

@@ -0,0 +1,324 @@
+let socketReload,
+    getInstancia,
+    getVueInstance,
+    showErrorOverlay,
+    hideErrorOverlay,
+    reloadComponent,
+    reloadJS;
+
+// En navegador: usar rutas relativas estáticas
+(async () => {
+    try {
+        // Importa todas las dependencias HMR necesarias aquí
+        // CORREGIR RUTA DE IMPORTACIÓN PARA devMode.js
+        const devModeModule = await import('./hrm/devMode.js');
+        socketReload = devModeModule.socketReload;
+        reloadComponent = devModeModule.reloadComponent;
+        reloadJS = devModeModule.reloadJS;
+
+        // Log para verificar la carga de reloadComponent
+        if (typeof reloadComponent === 'function') {
+            console.log(
+                '[HMR] La función reloadComponent se cargó correctamente.',
+            );
+        } else {
+            console.error(
+                '[HMR] ERROR: La función reloadComponent NO se cargó o no es una función después de la importación.',
+                devModeModule,
+            );
+        }
+
+        getInstancia = (await import('./hrm/instanciaVue.js')).default; // Asumiendo que está en dist/hrm/
+        getVueInstance = (await import('./hrm/setupHMR.js')).getVueInstance; // Asumiendo que está en dist/hrm/
+
+        const errorScreenModule = await import('./hrm/errorScreen.js'); // Asumiendo que está en dist/hrm/
+        showErrorOverlay = errorScreenModule.showErrorOverlay;
+        hideErrorOverlay = errorScreenModule.hideErrorOverlay;
+
+        // Esperar a que BrowserSync client esté listo y haya definido ___browserSync___
+        let bsReadyRetries = 0;
+        const maxBsReadyRetries = 30; // 30 * 500ms = 15 segundos de espera máxima
+        const bsReadyCheckInterval = 500;
+
+        while (
+            !window.___browserSync___ &&
+            bsReadyRetries < maxBsReadyRetries
+        ) {
+            console.warn(
+                `[HMR] Esperando a que el script cliente de BrowserSync se inicialice... (${
+                    bsReadyRetries + 1
+                }/${maxBsReadyRetries})`,
+            );
+            await new Promise(resolve =>
+                setTimeout(resolve, bsReadyCheckInterval),
+            );
+            bsReadyRetries++;
+        }
+
+        if (!window.___browserSync___) {
+            console.error(
+                '❌ Versa HMR: El script cliente de BrowserSync no se inicializó después de múltiples reintentos. HMR no funcionará.',
+            );
+            if (showErrorOverlay) {
+                // Verificar si showErrorOverlay se cargó
+                showErrorOverlay(
+                    'Falló la inicialización de HMR',
+                    'El cliente de BrowserSync no se inicializó. Revisa la consola y el servidor de BrowserSync.',
+                );
+            }
+            return; // Detener la ejecución si BrowserSync no está listo
+        }
+
+        console.log(
+            '✔️ Versa HMR: Cliente de BrowserSync detectado. Procediendo con la configuración de HMR.',
+        );
+        await initSocket(); // Llama a initSocket DESPUÉS de que las importaciones y la espera de BS hayan terminado
+    } catch (error) {
+        console.error(
+            '❌ Versa HMR: Error durante la carga dinámica de módulos o initSocket:',
+            error,
+        );
+        if (showErrorOverlay) {
+            showErrorOverlay(
+                'Falló la inicialización de HMR',
+                error.stack || error.message,
+            );
+        } else {
+            const errDiv = document.createElement('div');
+            errDiv.textContent =
+                'Falló la inicialización de HMR: ' + error.message;
+            errDiv.style.cssText =
+                'position:fixed;top:10px;left:10px;padding:10px;background:red;color:white;z-index:1000000;';
+            document.body.appendChild(errDiv);
+        }
+    }
+})();
+
+// Obtención robusta de la instancia de Vue
+const getInstanceVue = async () => {
+    let instance = getVueInstance && getVueInstance();
+    if (instance) return instance;
+    if (typeof window !== 'undefined') {
+        if (window.__VUE_APP__) return window.__VUE_APP__;
+        if (
+            window.__VUE_APP_INSTANCE__ &&
+            typeof window.__VUE_APP_INSTANCE__.get === 'function'
+        ) {
+            const winInstance = window.__VUE_APP_INSTANCE__.get();
+            if (winInstance) return winInstance;
+        }
+    }
+    instance = getInstancia && getInstancia.methods.get();
+    if (instance) return instance;
+    return null;
+};
+
+// Reintentos con backoff exponencial para obtener la instancia
+async function waitForVueInstance(maxTries = 5, delay = 300) {
+    let tries = 0;
+    while (tries < maxTries) {
+        const instance = await getInstanceVue();
+        if (instance) return instance;
+        await new Promise(resolve =>
+            globalThis.setTimeout(resolve, delay * 2 ** tries),
+        );
+        tries++;
+    }
+    // Si no se encuentra, muestra overlay y no recarga
+    const errorMsg =
+        'Instancia de Vue no encontrada después de múltiples reintentos.';
+    const detailMsg =
+        'La aplicación no pudo iniciarse. Esperando una corrección para recargar.';
+    if (typeof showErrorOverlay === 'function') {
+        showErrorOverlay(errorMsg, detailMsg);
+    } else {
+        console.error(
+            '[HMR] showErrorOverlay no disponible, pero la instancia de Vue no se encontró.',
+        );
+    }
+    console.error(errorMsg);
+    return null; // Indica que falló
+}
+
+// Initialize socket connection and HMR con reconexión automática
+const initSocket = async (retries = 0) => {
+    const maxRetries = 10;
+    const retryDelay = Math.min(2000 * (retries + 1), 10000); // backoff hasta 10s
+
+    // Se asume que window.___browserSync___ ya existe debido a la espera en la IIFE
+    // Pero se verifica window.___browserSync___.socket
+    if (window.___browserSync___ && window.___browserSync___.socket) {
+        const socket = window.___browserSync___.socket;
+        let connected = socket.connected; // Verificar estado inicial
+
+        // Listener para conexión
+        socket.on('connect', async () => {
+            connected = true;
+            if (typeof hideErrorOverlay === 'function') {
+                hideErrorOverlay();
+            } else {
+                console.warn(
+                    '[HMR] hideErrorOverlay no es una función al momento de la conexión',
+                );
+            }
+            const vueAppInstance = await waitForVueInstance();
+            if (vueAppInstance && vueAppInstance._instance) {
+                if (typeof socketReload === 'function') {
+                    socketReload(vueAppInstance);
+                } else {
+                    console.warn(
+                        '[HMR] socketReload no es una función al momento de la conexión',
+                    );
+                }
+            } else {
+                console.error(
+                    '❌ Versa HMR: Instancia de Vue no encontrada después de la conexión del socket',
+                );
+            }
+            console.log('✔️ Versa HMR: Socket conectado');
+        });
+
+        // Listener para desconexión
+        socket.on('disconnect', () => {
+            connected = false;
+            console.log('❌ Versa HMR: Socket desconectado, reintentando...');
+            // La lógica de reintentos original para desconexión
+            setTimeout(() => {
+                if (!socket.connected && retries < maxRetries) {
+                    // Usar socket.connected aquí
+                    initSocket(retries + 1);
+                } else if (!socket.connected) {
+                    console.error(
+                        `❌ Versa HMR: Socket no conectado después de ${maxRetries} reintentos tras desconexión.`,
+                    );
+                    if (typeof showErrorOverlay === 'function') {
+                        showErrorOverlay(
+                            'HMR Desconectado',
+                            'No se pudo reconectar a BrowserSync después de múltiples reintentos.',
+                        );
+                    }
+                }
+            }, retryDelay);
+        });
+
+        socket.on('vue:update', async data => {
+            // Log para verificar reloadComponent al inicio del evento
+            if (typeof reloadComponent !== 'function') {
+                console.error(
+                    '[HMR] ERROR en vue:update: reloadComponent no es una función.',
+                );
+                if (typeof showErrorOverlay === 'function') {
+                    showErrorOverlay(
+                        'Error Crítico de HMR',
+                        'reloadComponent no está disponible. Verifique la consola para errores de carga.',
+                    );
+                }
+                return;
+            }
+
+            if (typeof hideErrorOverlay === 'function') hideErrorOverlay();
+            else
+                console.warn(
+                    '[HMR] hideErrorOverlay no disponible en vue:update',
+                );
+
+            const { component, relativePath, extension, type, timestamp } =
+                data;
+            const appInstance = await getInstanceVue();
+
+            if (!appInstance) {
+                // Si la instancia de Vue no existe, la carga inicial probablemente falló.
+                // Una actualización de módulo (presumiblemente la corrección del error) ha llegado.
+                // Recargar la página completa para permitir que vue-loader.ts intente de nuevo.
+                console.log(
+                    '[HMR] La instancia de Vue no existe (posible fallo en la carga inicial). Se recibió una actualización de módulo. Recargando la página...',
+                );
+                window.location.reload();
+                return; // Detener la ejecución adicional de HMR para esta actualización.
+            }
+
+            try {
+                if (extension === 'vue') {
+                    const result = await reloadComponent(
+                        appInstance,
+                        component,
+                        `${relativePath}`,
+                        type,
+                        extension,
+                    );
+                    if (result && result.msg) {
+                        throw new Error(result.msg);
+                    }
+                } else {
+                    // Asumiendo que reloadJS existe
+                    await reloadJS(`/${relativePath}?t=${timestamp}`);
+                }
+            } catch (hmrError) {
+                const errorMsg = `HMR falló para ${relativePath}`;
+                const errorStack =
+                    hmrError.stack ||
+                    (hmrError.toString
+                        ? hmrError.toString()
+                        : 'No hay stack disponible');
+                if (typeof showErrorOverlay === 'function') {
+                    showErrorOverlay(errorMsg, errorStack);
+                } else {
+                    console.error(
+                        '[HMR] showErrorOverlay no disponible. Error HMR:',
+                        errorMsg,
+                        hmrError,
+                    );
+                }
+                console.error(errorMsg, hmrError);
+            }
+        });
+
+        // Watchdog para la conexión inicial si el socket existe pero no está conectado
+        if (!connected) {
+            console.log(
+                `Versa HMR: Objeto socket encontrado, intentando conexión (Intento ${
+                    retries + 1
+                }/${maxRetries})`,
+            );
+            setTimeout(() => {
+                if (!socket.connected && retries < maxRetries) {
+                    console.warn(
+                        'Versa HMR: Sin conexión de socket después del tiempo de espera inicial, reintentando initSocket...',
+                    );
+                    initSocket(retries + 1);
+                } else if (!socket.connected) {
+                    console.error(
+                        `❌ Versa HMR: Socket aún no conectado después de ${maxRetries} intentos iniciales.`,
+                    );
+                    if (typeof showErrorOverlay === 'function') {
+                        showErrorOverlay(
+                            'Falló HMR de BrowserSync',
+                            'No se pudo conectar al socket de BrowserSync después de intentos iniciales.',
+                        );
+                    }
+                }
+            }, 5000); // Timeout de 5s para el watchdog inicial
+        }
+    } else {
+        // Este bloque se ejecuta si window.___browserSync___ existe pero window.___browserSync___.socket no,
+        // o si window.___browserSync___ no existe (aunque la IIFE debería haberlo esperado).
+        console.warn(
+            `[HMR] Socket de BrowserSync no encontrado o BrowserSync no completamente inicializado. Reintentando initSocket... (${
+                retries + 1
+            }/${maxRetries})`,
+        );
+        if (retries < maxRetries) {
+            setTimeout(() => initSocket(retries + 1), retryDelay);
+        } else {
+            console.error(
+                `❌ Versa HMR: Socket de BrowserSync no encontrado después de ${maxRetries} reintentos.`,
+            );
+            if (typeof showErrorOverlay === 'function') {
+                showErrorOverlay(
+                    'Falló HMR de BrowserSync',
+                    'Socket o cliente de BrowserSync no encontrado después de múltiples reintentos.',
+                );
+            }
+        }
+    }
+};

package/dist/services/vuejs.js

@@ -1,5 +1,5 @@
-import * as vCompiler from 'vue/compiler-sfc';
 import path from 'node:path';
+import * as vCompiler from 'vue/compiler-sfc';
 
 const getComponentsVue = async data => {
     let components = [];
@@ -40,6 +40,34 @@ const _compileCustomBlock = async (_block, _source) => {};
 export const preCompileVue = async (data, source, isProd = false) => {
     try {
         const fileName = path.basename(source).replace('.vue', '');
+
+        if (!isProd) {
+            const ifExistsref = data.includes('ref(');
+
+            // esto es para HMR re re forzado
+            const varContent = `
+            ${ifExistsref ? '' : 'import { ref } from "vue";'};
+            const versaComponentKey = ref(0);
+        `;
+            const ifExistScript = data.includes('<script');
+            if (!ifExistScript) {
+                data = `<script setup>${varContent}</script>` + data;
+            } else {
+                data = data.replace(/(<script.*?>)/, `$1${varContent}`);
+            }
+
+            data = data.replace(
+                /(<template>[\s\S]*?)(<\w+)([^>]*)(\/?>)/,
+                (match, p1, p2, p3, p4) => {
+                    // Si es self-closing (termina con '/>'), no agregar key
+                    const existeSlash = p3.trim().slice(-1) === '/';
+
+                    return `${p1} ${p2} ${existeSlash ? p3.trim().slice(0, -1) : p3} :key="versaComponentKey" ${existeSlash ? '/' : ''}${p4}`;
+                },
+            );
+            // console.log(data);
+        }
+
         const { descriptor, errors } = vCompiler.parse(data, {
             filename: fileName,
             sourceMap: false,
@@ -163,9 +191,6 @@ export const preCompileVue = async (data, source, isProd = false) => {
             ${compiledScript.content}
             ${compiledTemplate.code}
         `;
-        //añardir instancia de app
-
-        // output = `${appImport}${output}`;
 
         const componentName = `${fileName}_component`;
         const components = await getComponentsVue(data);
@@ -173,7 +198,9 @@ export const preCompileVue = async (data, source, isProd = false) => {
                 __file: '${source}',
                 __name: '${fileName}',
                 name: '${fileName}',
-                components: { ${components.join(', ')} },
+                components: {
+                    ${components}
+                },
             `;
 
         // quitamos export default y añadimos el nombre del archivo
@@ -198,12 +225,16 @@ export const preCompileVue = async (data, source, isProd = false) => {
             output = output.replaceAll(/_ctx\.(?!\$)/g, '$setup.');
             output = output.replace(
                 'export function render(_ctx, _cache) {',
-                `function render(_ctx, _cache, $props, $setup, $data, $options) {`,
+                `
+                function render(_ctx, _cache, $props, $setup, $data, $options) {
+                `,
             );
         } else {
             output = output.replace(
                 'export function render(_ctx, _cache) {',
-                `function render(_ctx, _cache, $props, $setup, $data, $options) {`,
+                `
+                function render(_ctx, _cache, $props, $setup, $data, $options) {
+                `,
             );
         }
 
@@ -217,13 +248,6 @@ export const preCompileVue = async (data, source, isProd = false) => {
 
         output = `${output}\n${finishComponent}`;
 
-        // await writeFile(
-        //     `./public/dashboard/js/${fileName}-temp.js`,
-        //     output,
-        //     'utf-8',
-        // );
-        // await unlink(`./public/dashboard/js/${fileName}-temp.js`);
-
         return {
             lang: compiledScript.lang,
             error: null,

package/dist/utils/utils.js

@@ -24,3 +24,25 @@ export const showTimingForHumans = timing => {
  */
 export const mapRuta = async (ruta, PATH_DIST, PATH_SOURCE) =>
     path.join(PATH_DIST, path.relative(PATH_SOURCE, ruta));
+
+/**
+ * Agrega la extensión .js a las importaciones en la cadena de datos proporcionada.
+ * @param {string} data - La cadena de entrada que contiene el código JavaScript.
+ * @returns {Promise<string>} - Una promesa que se resuelve con la cadena modificada con las importaciones actualizadas.
+ */
+export const addImportEndJs = async data => {
+    const importRegExp =
+        /(?:import\s+.*?from\s+['"](.*?)['"]|import\(['"](.*?)['"]\))/g; // Manejar importaciones estáticas y dinámicas
+
+    return data.replace(importRegExp, (match, ruta1, ruta2) => {
+        const ruta = ruta1 || ruta2; // Usar la ruta capturada, ya sea estática o dinámica
+        if (ruta.endsWith('.vue') || ruta.endsWith('.ts')) {
+            const fullPath = ruta.replace(/\.(vue|ts)$/, '.js');
+            return match.replace(ruta, fullPath);
+        } else if (!ruta.match(/\/.*\.(js|mjs|css)$/) && ruta.includes('/')) {
+            return match.replace(ruta, `${ruta}.js`);
+        }
+
+        return match; // Devolver el match original si no se cumple ninguna condición
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "versacompiler",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "Una herramienta para compilar y minificar archivos .vue, .js y .ts para proyectos de Vue 3 con soporte para TypeScript.",
     "main": "dist/index.js",
     "bin": {
@@ -32,19 +32,21 @@
     "author": "Jorge Jara H (kriollone@gmail.com)",
     "license": "MIT",
     "dependencies": {
+        "acorn": "^8.14.1",
+        "browser-sync": "^3.0.4",
         "chalk": "5.4.1",
         "chokidar": "^4.0.3",
-        "oxc-minify": "^0.68.1",
-        "acorn": "^8.14.1",
-        "vue": "3.5.13",
         "get-port": "^7.1.0",
+        "oxc-minify": "^0.69.0",
         "typescript": "^5.8.3",
-        "oxlint": "^0.16.10",
-        "browser-sync": "^3.0.4"
+        "vue": "3.5.13"
     },
     "devDependencies": {
-        "prettier": "3.5.3",
+        "@tailwindcss/cli": "^4.1.6",
         "@types/node": "^22.15.17",
-        "code-tag": "^1.2.0"
+        "code-tag": "^1.2.0",
+        "oxlint": "^0.16.10",
+        "prettier": "3.5.3",
+        "tailwindcss": "^4.1.6"
     }
 }