versacompiler 1.0.4 → 1.0.5

package/dist/hrm/devMode.js

@@ -126,6 +126,7 @@ export async function reloadComponent(
 ) {
     try {
         const baseUrl = window.location.href;
+        // console.log(relativePath);
         const newBaseUrl = new URL(baseUrl);
         const urlOrigin = `${newBaseUrl.origin}/${relativePath}`;
         const module = await import(`${urlOrigin}?t=${Date.now()}`);
@@ -193,13 +194,109 @@ export function debounce(func, waitFor) {
     return debounced;
 }
 
-export async function reloadJS(_relativePath) {
-    location.reload();
+export async function reloadJS(pathWithTimestamp) {
+    // Extraer la ruta base sin el timestamp
+    const pathParts = pathWithTimestamp.split('?');
+    const basePath = pathParts[0];
+
+    const contenidoArchivo = await fetch(pathWithTimestamp).then(res =>
+        res.text(),
+    );
+
+    // Verificar la marca para recarga completa
+    if (contenidoArchivo.startsWith('//versaHRM-reloadFILE')) {
+        console.log(
+            `[HMR] Marca //versaHRM-reloadFILE detectada en ${basePath}. Recargando página completa.`,
+        );
+        window.location.reload();
+        return; // Detener procesamiento adicional para este archivo
+    }
+
+    /* La lógica anterior para createApp/mount ya no es necesaria aquí, la marca la cubre.
+    if (
+        contenidoArchivo.includes('createApp') ||
+        contenidoArchivo.includes('.mount')
+    ) {
+        window.location.reload();
+        return;
+    }
+    */
+
+    // Verificar si tenemos una función de recarga registrada para este módulo
+    if (
+        window.__VERSA_HMR &&
+        window.__VERSA_HMR.modules &&
+        window.__VERSA_HMR.modules[basePath]
+    ) {
+        console.log(
+            `[HMR] Usando sistema HMR interno para recargar: ${basePath}`,
+        );
+        try {
+            const result = await window.__VERSA_HMR.modules[basePath]();
+            return result;
+        } catch (error) {
+            console.error(
+                `[HMR] Error al recargar el módulo usando sistema HMR interno:`,
+                error,
+            );
+            // Si falla el sistema interno, intentamos el enfoque tradicional
+        }
+    }
+
+    // Si no hay una función específica, usar la lógica existente
+    try {
+        console.log(`[HMR] Intentando re-importar JS: ${pathWithTimestamp}`);
+        // La URL ya está completa y lista para usar.
+        // El `import()` dinámico usa la URL base del script actual si la ruta es relativa,
+        // o la URL tal cual si es absoluta (comenzando con / o http/https).
+        // Como pathWithTimestamp comienza con '/', se resolverá desde la raíz del host.
+        const newModule = await import(pathWithTimestamp);
+        console.log(
+            `[HMR] Módulo JS ${pathWithTimestamp} re-importado exitosamente.`,
+        );
+
+        // Lógica de ejemplo: si el módulo exporta una función 'onHotUpdate' o 'init', llamarla.
+        // Esto es una convención que tus módulos JS tendrían que seguir.
+        if (newModule && typeof newModule.onHotUpdate === 'function') {
+            console.log(
+                `[HMR] Llamando a onHotUpdate() para el módulo ${pathWithTimestamp}`,
+            );
+            newModule.onHotUpdate();
+        } else if (newModule && typeof newModule.init === 'function') {
+            // Alternativamente, una función 'init' si es más genérico
+            console.log(
+                `[HMR] Llamando a init() para el módulo ${pathWithTimestamp}`,
+            );
+            newModule.init();
+        } else if (newModule && typeof newModule.main === 'function') {
+            // O una función 'main'
+            console.log(
+                `[HMR] Llamando a main() para el módulo ${pathWithTimestamp}`,
+            );
+            newModule.main();
+        }
+        // Si no hay una función específica, la simple re-importación podría ser suficiente
+        // si el módulo se auto-ejecuta (ej. añade event listeners, modifica el DOM globalmente).
+        // ¡CUIDADO con efectos secundarios duplicados en este caso!
+
+        return null; // Indicar éxito
+    } catch (error) {
+        console.error(
+            `[HMR] Error al re-importar el módulo JS ${pathWithTimestamp}:`,
+            error,
+        );
+        // Aquí podrías decidir si mostrar un error en el overlay o, como último recurso, recargar.
+        // Por ahora, solo retornamos false para que el llamador (vueLoader.js) decida.
+        return {
+            msg: `Error al re-importar el módulo JS ${pathWithTimestamp}:`,
+            error,
+        }; // Indicar fallo
+    }
 }
 
 export function socketReload(app) {
     if (window.___browserSync___?.socket) {
-        const socket = 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);
@@ -209,27 +306,27 @@ export function socketReload(app) {
                 }
             });
         }
-        socket.on('vue:update', data => {
-            console.log('pasa');
-            if (document.querySelector('#versa-hmr-error-overlay')) {
-                window.location.reload();
-                return;
-            }
+        // 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}`);
-            }
-        });
+        //     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();

package/dist/index.js

@@ -25,6 +25,7 @@ import { linter } from './services/linter.js';
 import { minifyJS } from './services/minify.js';
 import { preCompileTS } from './services/typescript.js';
 import { preCompileVue } from './services/vuejs.js';
+import { transformModuleWithAcorn } from './utils/transformWithAcorn.js';
 
 import { addImportEndJs, mapRuta, showTimingForHumans } from './utils/utils.js';
 
@@ -340,6 +341,10 @@ const estandarizaData = async data => {
     data = await replaceAliasImportsAsync(data);
     data = await addImportEndJs(data);
 
+    if (!isProd) {
+        data = await transformModuleWithAcorn(data);
+    }
+
     return data;
 };
 
@@ -348,26 +353,38 @@ const estandarizaData = async data => {
  * @param {string} source - La ruta del archivo fuente.
  * @param {string} destination - La ruta del archivo de destino.
  *
- * @returns {Promise<void>} - Una promesa que se resuelve después de la compilación.
+ * @returns {Promise<Object>} - Un objeto con información sobre la compilación.
  */
 const compileJS = async (source, destination) => {
     try {
-        const startTime = Date.now(); // optener la hora actual
+        const startTime = Date.now();
+        const originalExtension = source.split('.').pop();
+        const baseName = path.basename(destination, path.extname(destination));
+        const finalFileName = baseName.endsWith('.js')
+            ? baseName.slice(0, -3)
+            : baseName;
 
-        const filename = path.basename(source);
-        await log(chalk.blue(`🪄  :start compilation`));
+        await log(chalk.blue(`🪄  :Iniciando compilación de ${source}`));
 
         let data = await readFile(source, 'utf-8');
-        if (!data) {
-            await error(chalk.yellow('⚠️ :Archivo vacío\n'));
-            return;
+        if (!data || data.trim().length === 0) {
+            await error(
+                chalk.yellow(
+                    `⚠️ :Archivo fuente ${source} está vacío. No se procesará.`,
+                ),
+            );
+            return {
+                contentWasWritten: false,
+                extension: originalExtension,
+                normalizedPath: destination,
+                fileName: finalFileName,
+            };
         }
 
-        const extension = source.split('.').pop();
         let resultVue = null;
-        if (extension === 'vue') {
+        if (originalExtension === 'vue') {
             vueFiles++;
-            await log(chalk.green(`💚 :Pre Compile VUE`));
+            await log(chalk.green(`💚 :Precompilando VUE: ${source}`));
             resultVue = await preCompileVue(data, source, isProd);
             data = resultVue.data;
             if (resultVue.error !== null) {
@@ -379,20 +396,25 @@ const compileJS = async (source, destination) => {
                 });
                 await error(
                     chalk.red(
-                        `🚩 :Error durante la compilación Vue :${resultVue.error}\n`,
+                        `🚩 :Error durante la compilación Vue para ${source} :${resultVue.error}\n`,
                     ),
                 );
-                return;
+                return {
+                    contentWasWritten: false,
+                    extension: originalExtension,
+                    normalizedPath: destination,
+                    fileName: finalFileName,
+                };
             }
             destination = destination.replace('.vue', '.js');
         }
 
-        if (extension === 'ts' || resultVue?.lang === 'ts') {
+        if (originalExtension === 'ts' || resultVue?.lang === 'ts') {
             tsFiles++;
-            await log(chalk.blue(`🔄️ :Pre Compilando TS`));
+            await log(chalk.blue(`🔄️ :Precompilando TS: ${source}`));
             const Resultdata = await preCompileTS(
                 data,
-                filename,
+                path.basename(source),
                 PATH_CONFIG_FILE,
             );
             if (Resultdata.error !== null) {
@@ -404,10 +426,15 @@ const compileJS = async (source, destination) => {
                 });
                 await error(
                     chalk.red(
-                        `🚩 :Error durante la compilación TS: ${Resultdata.error}\n`,
+                        `🚩 :Error durante la compilación TS para ${source}: ${Resultdata.error}\n`,
                     ),
                 );
-                return;
+                return {
+                    contentWasWritten: false,
+                    extension: originalExtension,
+                    normalizedPath: destination,
+                    fileName: finalFileName,
+                };
             }
             destination = destination.replace('.ts', '.js');
             data = Resultdata.data;
@@ -415,9 +442,11 @@ const compileJS = async (source, destination) => {
 
         data = await estandarizaData(data);
 
-        // await writeFile(`${destination}-temp.js`, data, 'utf-8');
+        // const destinationDir = path.dirname(destination);
+        // await mkdir(destinationDir, { recursive: true });
+        // await writeFile(destination, data, 'utf-8');
 
-        await log(chalk.green(`🔍 :Validando Sintaxis`));
+        await log(chalk.green(`🔍 :Validando Sintaxis para ${source}`));
         const resultAcorn = await checkSintaxysAcorn(data);
         if (resultAcorn.error !== null) {
             errorFiles++;
@@ -426,30 +455,44 @@ const compileJS = async (source, destination) => {
                 error: resultAcorn.error.message,
                 proceso: 'Validación Sintaxis',
             });
-            return;
+            await error(
+                chalk.red(
+                    `🚩 :Error de sintaxis Acorn para ${source}: ${resultAcorn.error.message}\n`,
+                ),
+            );
+            return {
+                contentWasWritten: false,
+                extension: originalExtension,
+                normalizedPath: destination,
+                fileName: finalFileName,
+            };
         }
         acornFiles++;
 
         let result = null;
         if (isProd) {
-            await log(chalk.blue(`🤖 :minifying`));
-            result = await minifyJS(data, filename, isProd);
+            await log(chalk.blue(`🤖 :Minificando ${source}`));
+            result = await minifyJS(data, path.basename(source), isProd);
         } else {
             result = { code: data };
         }
-        await log(chalk.green(`📝 :Escribiendo ${destination}`));
+        await log(chalk.green(`📝 :Intentando escribir ${destination}`));
 
-        if (result.code.length === 0) {
+        if (!result.code || result.code.trim().length === 0) {
             await error(
                 chalk.yellow(
-                    '⚠️ :Warning al compilar JS: El archivo está vacío\n',
+                    `⚠️ :Advertencia al compilar JS para ${source}: El archivo resultante está vacío. No se escribirá en disco.\n`,
                 ),
             );
-            await unlink(destination);
+            return {
+                contentWasWritten: false,
+                extension: originalExtension,
+                normalizedPath: destination,
+                fileName: finalFileName,
+            };
         } else {
             if (!isProd) {
                 result.code = result.code.replaceAll('*/export', '*/\nexport');
-                result.code = result.code.replaceAll('*/export', '*/\nexport');
             }
             const destinationDir = path.dirname(destination);
             await mkdir(destinationDir, { recursive: true });
@@ -458,24 +501,128 @@ const compileJS = async (source, destination) => {
             const endTime = Date.now();
             const elapsedTime = showTimingForHumans(endTime - startTime);
             await log(
-                chalk.gray(`✅ :Compilación exitosa (${elapsedTime}) \n`),
+                chalk.gray(
+                    `✅ :Compilación exitosa para ${finalFileName} (${elapsedTime}) \n`,
+                ),
             );
             successfulFiles++;
+            return {
+                contentWasWritten: true,
+                extension: originalExtension,
+                normalizedPath: destination,
+                fileName: finalFileName,
+            };
         }
     } catch (errora) {
         errorFiles++;
+        const ext = source.split('.').pop() || 'unknown';
+        const fName = path.basename(source, path.extname(source));
         errorList.push({
             file: source,
             error: errora.message,
-            proceso: 'Compilación JS',
+            proceso: 'Compilación JS (Catch General)',
         });
         await error(
-            chalk.red(`🚩 :Error durante la compilación JS: ${errora}\n`),
-            errora,
+            chalk.red(
+                `🚩 :Error catastrófico durante la compilación JS para ${source}: ${errora.message}\n`,
+            ),
+            errora.stack,
+        );
+        return {
+            contentWasWritten: false,
+            extension: ext,
+            normalizedPath: destination || source,
+            fileName: fName,
+        };
+    }
+};
+
+/**
+ * Compila un archivo dado su ruta.
+ * @param {string} path - La ruta del archivo a compilar.
+ * @returns {Promise<Object>} - Un objeto con información sobre la compilación.
+ */
+const compile = async filePath => {
+    if (!filePath || typeof filePath !== 'string') {
+        console.error(
+            chalk.red('⚠️ :Ruta inválida proporcionada a compile():', filePath),
         );
+        return {
+            contentWasWritten: false,
+            extension: null,
+            normalizedPath: filePath,
+            fileName: null,
+        };
+    }
+    if (filePath.includes('.d.ts')) {
+        return {
+            contentWasWritten: false,
+            extension: 'd.ts',
+            normalizedPath: filePath,
+            fileName: path.basename(filePath),
+        };
+    }
+
+    const normalizedPathSource = path.normalize(filePath).replace(/\\/g, '/');
+    const sourceForDist = normalizedPathSource.startsWith('./')
+        ? normalizedPathSource
+        : `./${normalizedPathSource}`;
+    const outputPath = sourceForDist.replace(PATH_SOURCE, PATH_DIST);
+    const finalOutputJsPath = outputPath.replace(/\.(vue|ts)$/, '.js');
+
+    console.log(
+        chalk.green(`🔜 :Fuente para compilar: ${normalizedPathSource}`),
+    );
+    console.log(chalk.green(`🔚 :Destino potencial: ${finalOutputJsPath}`));
+
+    if (outputPath) {
+        return await compileJS(normalizedPathSource, finalOutputJsPath);
+    } else {
+        const ext = normalizedPathSource.split('.').pop() || null;
+        const fName = path.basename(
+            normalizedPathSource,
+            path.extname(normalizedPathSource),
+        );
+        await log(
+            chalk.yellow(
+                `⚠️ :Tipo de archivo no reconocido o ruta de salida no determinada para: ${normalizedPathSource}, extensión: ${ext}`,
+            ),
+        );
+        return {
+            contentWasWritten: false,
+            extension: ext,
+            normalizedPath: finalOutputJsPath,
+            fileName: fName,
+        };
     }
 };
 
+/**
+ * Emite cambios a través de BrowserSync.
+ * @param {Object} bs - Instancia de BrowserSync.
+ * @param {string} extension - Extensión del archivo.
+ * @param {string} normalizedPath - Ruta normalizada del archivo.
+ * @param {string} fileName - Nombre del archivo.
+ * @param {string} type - Tipo de cambio (add, change, delete).
+ */
+const emitirCambios = async (bs, extension, normalizedPath, fileName, type) => {
+    const serverRelativePath = path
+        .normalize(normalizedPath)
+        .replace(/^\\|^\//, '')
+        .replace(/\\/g, '/');
+
+    bs.sockets.emit('vue:update', {
+        component: fileName,
+        timestamp: Date.now(),
+        relativePath: serverRelativePath,
+        extension,
+        type,
+    });
+    console.log(
+        `📡 : Emitiendo evento 'vue:update' para ${fileName} (${type}) -> ${serverRelativePath} \n`,
+    );
+};
+
 async function generateTailwindCSS(_filePath = null) {
     if (!tailwindcss) {
         return;
@@ -496,42 +643,6 @@ async function generateTailwindCSS(_filePath = null) {
     });
 }
 
-/**
- * Compila un archivo dado su ruta.
- * @param {string} path - La ruta del archivo a compilar.
- */
-const compile = async filePath => {
-    if (!filePath || typeof filePath !== 'string') {
-        console.error(chalk.red('⚠️ :Ruta inválida:', filePath));
-        return;
-    }
-    if (filePath.includes('.d.ts')) {
-        return;
-    }
-    const normalizedPath = path.normalize(filePath).replace(/\\/g, '/'); // Normalizar la ruta para que use barras inclinadas hacia adelante
-    const filePathForReplate = `./${normalizedPath}`;
-    const outputPath = filePathForReplate.replace(PATH_SOURCE, PATH_DIST);
-    const outFileJs = outputPath.replace('.ts', '.js').replace('.vue', '.js');
-
-    console.log(chalk.green(`🔜 :Source ${filePathForReplate}`));
-    console.log(chalk.green(`🔚 :destination ${outFileJs}`));
-
-    const extension = normalizedPath.split('.').pop();
-    //sólo el filename sin extesion
-    const fileName = path
-        .basename(normalizedPath)
-        .replace('.vue', '')
-        .replace('.ts', '')
-        .replace('.js', '');
-
-    if (outputPath) {
-        await compileJS(normalizedPath, outputPath);
-    } else {
-        await log(chalk.yellow(`⚠️ :Tipo no reconocido: ${extension}`));
-    }
-    return { extension, normalizedPath: path.normalize(outFileJs), fileName };
-};
-
 /**
  * Compila todos los archivos en los directorios de origen.
  */
@@ -616,17 +727,6 @@ const compileAll = async () => {
     }
 };
 
-const emitirCambios = async (bs, extension, normalizedPath, fileName, type) => {
-    bs.sockets.emit('vue:update', {
-        component: fileName,
-        timestamp: Date.now(),
-        relativePath: normalizedPath,
-        extension,
-        type,
-    });
-    console.log(`📡 : Emitiendo evento 'vue:update' para ${fileName} \n`);
-};
-
 /**
  * Inicializa el proceso de compilación y observación de archivos.
  */
@@ -652,19 +752,47 @@ const initChokidar = async () => {
         // Evento cuando se añade un archivo
         watcher.on('add', async filePath => {
             await generateTailwindCSS(filePath);
-            const { extension, normalizedPath, fileName } = await compile(
+            const result = await compile(
                 path.normalize(filePath).replace(/\\/g, '/'),
             );
-            emitirCambios(bs, extension, normalizedPath, fileName, 'add');
+            if (result && result.contentWasWritten) {
+                emitirCambios(
+                    bs,
+                    result.extension,
+                    result.normalizedPath,
+                    result.fileName,
+                    'add',
+                );
+            } else {
+                console.log(
+                    chalk.yellow(
+                        `[HMR] No se emite evento para archivo nuevo no escrito o vacío: ${filePath}. Razón: contentWasWritten es false o resultado inválido.`,
+                    ),
+                );
+            }
         });
 
         // Evento cuando se modifica un archivo
         watcher.on('change', async filePath => {
             await generateTailwindCSS(filePath);
-            const { extension, normalizedPath, fileName } = await compile(
+            const result = await compile(
                 path.normalize(filePath).replace(/\\/g, '/'),
             );
-            emitirCambios(bs, extension, normalizedPath, fileName, 'change');
+            if (result && result.contentWasWritten) {
+                emitirCambios(
+                    bs,
+                    result.extension,
+                    result.normalizedPath,
+                    result.fileName,
+                    'change',
+                );
+            } else {
+                console.log(
+                    chalk.yellow(
+                        `[HMR] No se emite evento para archivo modificado a vacío, con errores, o no escrito: ${filePath}. Razón: contentWasWritten es false o resultado inválido.`,
+                    ),
+                );
+            }
         });
 
         // Evento cuando se elimina un archivo
@@ -749,6 +877,15 @@ const initChokidar = async () => {
                 res.setHeader('Access-Control-Allow-Credentials', 'true');
                 res.setHeader('Access-Control-Max-Age', '3600');
 
+                if (req.url.endsWith('.js')) {
+                    res.setHeader(
+                        'Cache-Control',
+                        'no-cache, no-store, must-revalidate',
+                    );
+                    res.setHeader('Pragma', 'no-cache');
+                    res.setHeader('Expires', '0');
+                }
+
                 //para redigir a la ubicación correcta
                 if (req.url === '/__versa/vueLoader.js') {
                     // Busca vueLoader.js en la carpeta de salida configurada

package/dist/services/vueLoader.js

@@ -1,5 +1,4 @@
-let socketReload,
-    getInstancia,
+let getInstancia,
     getVueInstance,
     showErrorOverlay,
     hideErrorOverlay,
@@ -12,7 +11,6 @@ let socketReload,
         // 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;
 
@@ -161,20 +159,20 @@ const initSocket = async (retries = 0) => {
                     '[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',
-                );
-            }
+            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');
         });
 
@@ -238,8 +236,9 @@ const initSocket = async (retries = 0) => {
             }
 
             try {
+                let result;
                 if (extension === 'vue') {
-                    const result = await reloadComponent(
+                    result = await reloadComponent(
                         appInstance,
                         component,
                         `${relativePath}`,
@@ -251,7 +250,10 @@ const initSocket = async (retries = 0) => {
                     }
                 } else {
                     // Asumiendo que reloadJS existe
-                    await reloadJS(`/${relativePath}?t=${timestamp}`);
+                    result = await reloadJS(`/${relativePath}?t=${timestamp}`);
+                    if (result && result.msg) {
+                        throw new Error(result.msg);
+                    }
                 }
             } catch (hmrError) {
                 const errorMsg = `HMR falló para ${relativePath}`;

package/dist/utils/transformWithAcorn.js

@@ -0,0 +1,316 @@
+import * as acorn from 'acorn';
+
+function generateHMRBlock(imports) {
+    let moduleRegistrationBlocks = [];
+
+    imports.default.forEach(imp => {
+        moduleRegistrationBlocks.push(
+            `window.__VERSA_HMR.modules['${imp.filePath}'] = async () => {\n` +
+                `        try {\n` +
+                `            ${imp.varName} = (await importWithTimestamp('${imp.filePath}')).default;\n` +
+                `            console.log('[HMR] Módulo ${imp.filePath} (default) recargado');\n` +
+                `            return true;\n` +
+                `        } catch (e) {\n` +
+                `            console.error('[HMR] Error recargando ${imp.filePath}', e);\n` +
+                `            return false;\n` +
+                `        }\n` +
+                `    };`,
+        );
+    });
+
+    imports.namespace.forEach(imp => {
+        moduleRegistrationBlocks.push(
+            `window.__VERSA_HMR.modules['${imp.filePath}'] = async () => {\n` +
+                `        try {\n` +
+                `            ${imp.varName} = await importWithTimestamp('${imp.filePath}');\n` +
+                `            console.log('[HMR] Módulo ${imp.filePath} (namespace) recargado');\n` +
+                `            return true;\n` +
+                `        } catch (e) {\n` +
+                `            console.error('[HMR] Error recargando ${imp.filePath}', e);\n` +
+                `            return false;\n` +
+                `        }\n` +
+                `    };`,
+        );
+    });
+
+    imports.named.forEach(imp => {
+        moduleRegistrationBlocks.push(
+            `window.__VERSA_HMR.modules['${imp.filePath}'] = async () => {\n` +
+                `        try {\n` +
+                `            ({ ${imp.namedExports} } = await importWithTimestamp('${imp.filePath}'));\n` +
+                `            console.log('[HMR] Módulo ${imp.filePath} (named) recargado');\n` +
+                `            return true;\n` +
+                `        } catch (e) {\n` +
+                `            console.error('[HMR] Error recargando ${imp.filePath}', e);\n` +
+                `            return false;\n` +
+                `        }\n` +
+                `    };`,
+        );
+    });
+
+    if (moduleRegistrationBlocks.length === 0) return '';
+
+    // Se incluye la definición de importWithTimestamp y la inicialización de __VERSA_HMR
+    // solo si hay módulos que registrar.
+    return `
+            const importWithTimestamp = (path) => import(path);
+            window.__VERSA_HMR = window.__VERSA_HMR || {};
+            window.__VERSA_HMR.modules = window.__VERSA_HMR.modules || {};
+        ${moduleRegistrationBlocks.join('\n    ')}`;
+}
+
+// Función auxiliar para obtener nombres de _resolveComponent
+const getResolvedComponents = codeString => {
+    const resolved = new Set();
+    const resolveComponentRegex =
+        /_resolveComponent\s*\(\s*["']([^"']+)["']\s*\)/g;
+    let match;
+    while ((match = resolveComponentRegex.exec(codeString)) !== null) {
+        resolved.add(match[1]);
+    }
+    return resolved;
+};
+
+/**
+ * Transforma código fuente JS/TS usando Acorn AST.
+ * Reconstruye el código separando imports, exports, funciones y bloques ejecutables.
+ * - Convierte imports estáticos en dinámicos
+ * - Preserva exports y estructura
+ * - Inserta bloque HMR solo si hay defineComponent y imports dinámicos
+ *
+ * @param {string} code - El código fuente a analizar.
+ * @returns {string} - El nuevo código transformado.
+ *
+ * Ejemplo de uso:
+ *   const nuevoCodigo = transformModuleWithAcorn(codigoFuente);
+ */
+export function transformModuleWithAcorn(code) {
+    const ast = acorn.parse(code, {
+        sourceType: 'module',
+        ecmaVersion: 'latest',
+        locations: true,
+        onComment: [],
+    });
+
+    const getCode = node => code.slice(node.start, node.end);
+    const resolvedComponents = getResolvedComponents(code);
+    const isFileAComponent = code.includes('defineComponent'); // Detectar si el archivo es un componente Vue
+    const isVueInitializationFile =
+        code.includes('mount') || code.includes('createApp'); // Detectar si es un archivo de inicialización de Vue
+
+    // Heurística para isExternalImport (debe estar definida antes de usarse en isCoreDefinitionFile)
+    const isExternalImport = src => {
+        if (src.startsWith('vue') || src.startsWith('react')) {
+            return true;
+        }
+        if (!src.endsWith('.js')) {
+            return true;
+        }
+        return false;
+    };
+
+    // Nueva detección generalizada para archivos de definición central
+    let isCoreDefinitionFile = false;
+    try {
+        if (!isFileAComponent && !isVueInitializationFile) {
+            let importExportNodeCount = 0;
+            let hasLocalJsImport = false;
+            let totalTopLevelNodes = 0;
+
+            if (ast.body && ast.body.length > 0) {
+                totalTopLevelNodes = ast.body.length;
+                for (const node of ast.body) {
+                    if (node.type === 'ImportDeclaration') {
+                        importExportNodeCount++;
+                        const sourceValue = node.source.value;
+                        if (
+                            sourceValue.endsWith('.js') &&
+                            !isExternalImport(sourceValue)
+                        ) {
+                            hasLocalJsImport = true;
+                        }
+                    } else if (
+                        node.type === 'ExportNamedDeclaration' ||
+                        node.type === 'ExportDefaultDeclaration'
+                    ) {
+                        importExportNodeCount++;
+                    }
+                }
+
+                if (hasLocalJsImport && totalTopLevelNodes >= 2) {
+                    // Mínimo 2 nodos para aplicar ratio
+                    const ratio = importExportNodeCount / totalTopLevelNodes;
+                    if (ratio >= 0.7) {
+                        // Umbral ajustable (70%)
+                        isCoreDefinitionFile = true;
+                    }
+                }
+            }
+        }
+    } catch (e) {
+        console.error(
+            'Error during isCoreDefinitionFile (ratio-based) check:',
+            e,
+        );
+    }
+
+    let nonDynamicImportStatements = [];
+    let hmrImports = { default: [], namespace: [], named: [] };
+    let importVarDecls = new Set();
+
+    // Primera pasada: clasificar imports
+    ast.body.forEach(node => {
+        if (node.type === 'ImportDeclaration') {
+            const sourceValue = node.source.value;
+            const importedLocalNames = node.specifiers.map(
+                spec => spec.local.name,
+            );
+
+            let isResolvedCompImport = false;
+            for (const localName of importedLocalNames) {
+                if (resolvedComponents.has(localName)) {
+                    isResolvedCompImport = true;
+                    break;
+                }
+            }
+
+            // Condición actualizada para mantener el import estático
+            if (
+                isFileAComponent ||
+                isVueInitializationFile ||
+                isCoreDefinitionFile || // Usando la nueva heurística de ratio
+                isExternalImport(sourceValue) ||
+                isResolvedCompImport
+            ) {
+                nonDynamicImportStatements.push(getCode(node));
+            } else {
+                // .js local, no es componente resuelto, y el archivo no cumple ninguna de las condiciones de exclusión -> transformar
+                node.specifiers.forEach(spec => {
+                    const localName = spec.local.name;
+                    importVarDecls.add(`let ${localName};`); // Declarar variable
+
+                    if (spec.type === 'ImportDefaultSpecifier') {
+                        hmrImports.default.push({
+                            varName: localName,
+                            filePath: sourceValue,
+                        });
+                    } else if (spec.type === 'ImportNamespaceSpecifier') {
+                        hmrImports.namespace.push({
+                            varName: localName,
+                            filePath: sourceValue,
+                        });
+                    } else if (spec.type === 'ImportSpecifier') {
+                        let namedEntry = hmrImports.named.find(
+                            e => e.filePath === sourceValue,
+                        );
+                        if (!namedEntry) {
+                            namedEntry = {
+                                filePath: sourceValue,
+                                namedExports: [],
+                                variables: [],
+                            };
+                            hmrImports.named.push(namedEntry);
+                        }
+                        const exportString =
+                            spec.imported.name === localName
+                                ? localName
+                                : `${spec.imported.name} as ${localName}`;
+                        if (!namedEntry.namedExports.includes(exportString)) {
+                            namedEntry.namedExports.push(exportString);
+                        }
+                        if (!namedEntry.variables.includes(localName)) {
+                            namedEntry.variables.push(localName);
+                        }
+                    }
+                });
+            }
+        }
+    });
+
+    // Construir dynamicImportInitialLoadLines a partir de hmrImports consolidados
+    let dynamicImportInitialLoadLines = [];
+    hmrImports.default.forEach(imp => {
+        dynamicImportInitialLoadLines.push(
+            `${imp.varName} = (await import('${imp.filePath}')).default;`,
+        );
+    });
+    hmrImports.namespace.forEach(imp => {
+        dynamicImportInitialLoadLines.push(
+            `${imp.varName} = await import('${imp.filePath}');`,
+        );
+    });
+    hmrImports.named.forEach(imp => {
+        if (imp.namedExports.length > 0) {
+            dynamicImportInitialLoadLines.push(
+                `({ ${imp.namedExports.join(', ')} } = await import('${imp.filePath}'));`,
+            );
+        }
+    });
+
+    let exportStatements = [];
+    ast.body.forEach(node => {
+        if (
+            node.type === 'ExportNamedDeclaration' ||
+            node.type === 'ExportDefaultDeclaration'
+        ) {
+            exportStatements.push(getCode(node));
+        }
+    });
+
+    const bodyNodes = ast.body.filter(
+        n =>
+            n.type !== 'ImportDeclaration' &&
+            n.type !== 'ExportNamedDeclaration' &&
+            n.type !== 'ExportDefaultDeclaration',
+    );
+    const bodyNodesCode = bodyNodes.map(getCode).join('\n');
+
+    let result = nonDynamicImportStatements.join('\n');
+    if (importVarDecls.size > 0) {
+        result += '\n' + Array.from(importVarDecls).join('\n') + '\n';
+    }
+
+    const hasDynamicImports =
+        hmrImports.default.length > 0 ||
+        hmrImports.namespace.length > 0 ||
+        hmrImports.named.some(e => e.namedExports.length > 0);
+
+    if (hasDynamicImports) {
+        let hmrBlock = hasDynamicImports ? generateHMRBlock(hmrImports) : '';
+        const indentedHMRBlock = hmrBlock
+            .split('\n')
+            .map(line => '    ' + line)
+            .join('\n')
+            .trimStart();
+
+        // Indentar todo el bodyNodesCode si se mueve al IIFE
+        const indentedBodyNodesCode = bodyNodesCode
+            .split('\n')
+            .map(line => '    ' + line)
+            .join('\n')
+            .trimStart();
+
+        result += `\n(async () => {\n    ${dynamicImportInitialLoadLines.join('\n    ')}`;
+        if (indentedHMRBlock) result += `\n${indentedHMRBlock}`;
+        if (indentedBodyNodesCode) result += `\n    ${indentedBodyNodesCode}`;
+        result += `\n})();\n`;
+    } else {
+        // Si no hay imports dinámicos, añadir bodyNodesCode directamente
+        result += '\n' + bodyNodesCode + '\n';
+    }
+
+    result += '\n' + exportStatements.join('\n');
+
+    let finalOutput = result.trim(); // Limpiar espacios extra del ensamblaje
+
+    const shouldBeMarkedForReload =
+        isFileAComponent || isVueInitializationFile || isCoreDefinitionFile;
+
+    if (shouldBeMarkedForReload) {
+        // Asegurarse de no duplicar la marca
+        if (!finalOutput.startsWith('//versaHRM-reloadFILE')) {
+            finalOutput = '//versaHRM-reloadFILE\n' + finalOutput;
+        }
+    }
+    return finalOutput;
+}

package/dist/utils/utils.js

@@ -1,48 +1,48 @@
-import path from 'node:path';
-/**
- * Converts a 24-hour time string to a 12-hour time string with AM/PM.
- *
- * @param {number} timing - The value of the timing en miliseconds.
- * @returns {string} the timing in ms, seconds, minutes or hours.
- */
-export const showTimingForHumans = timing => {
-    if (timing < 1000) {
-        return `${timing} ms`;
-    } else if (timing < 60000) {
-        return `${timing / 1000} s`;
-    } else if (timing < 3600000) {
-        return `${timing / 60000} min`;
-    } else {
-        return `${timing / 3600000} h`;
-    }
-};
-
-/**
- * Mapea una ruta de origen a una ruta de destino en el directorio de distribución.
- * @param {string} ruta - La ruta de origen.
- * @returns {Promise<string>} - La ruta mapeada en el directorio de distribución.
- */
-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
-    });
-};
+import path from 'node:path';
+/**
+ * Converts a 24-hour time string to a 12-hour time string with AM/PM.
+ *
+ * @param {number} timing - The value of the timing en miliseconds.
+ * @returns {string} the timing in ms, seconds, minutes or hours.
+ */
+export const showTimingForHumans = timing => {
+    if (timing < 1000) {
+        return `${timing} ms`;
+    } else if (timing < 60000) {
+        return `${timing / 1000} s`;
+    } else if (timing < 3600000) {
+        return `${timing / 60000} min`;
+    } else {
+        return `${timing / 3600000} h`;
+    }
+};
+
+/**
+ * Mapea una ruta de origen a una ruta de destino en el directorio de distribución.
+ * @param {string} ruta - La ruta de origen.
+ * @returns {Promise<string>} - La ruta mapeada en el directorio de distribución.
+ */
+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.4",
+    "version": "1.0.5",
     "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": {
@@ -19,7 +19,8 @@
         "dev": "node --watch dist/index.js",
         "compile": "node dist/index.js",
         "compile-dev": "node dist/index.js --all",
-        "compile-prod": "node dist/index.js --all --prod"
+        "compile-prod": "node dist/index.js --all --prod",
+        "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
     },
     "keywords": [
         "vue",
@@ -37,9 +38,9 @@
         "chalk": "5.4.1",
         "chokidar": "^4.0.3",
         "get-port": "^7.1.0",
-        "oxc-minify": "^0.69.0",
+        "oxc-minify": "^0.70.0",
         "typescript": "^5.8.3",
-        "vue": "3.5.13"
+        "vue": "3.5.14"
     },
     "devDependencies": {
         "@tailwindcss/cli": "^4.1.6",
@@ -47,6 +48,7 @@
         "code-tag": "^1.2.0",
         "oxlint": "^0.16.10",
         "prettier": "3.5.3",
-        "tailwindcss": "^4.1.6"
+        "tailwindcss": "^4.1.6",
+        "jest": "^29.7.0"
     }
 }