versacompiler 2.5.0 → 2.6.0

package/dist/compiler/vuejs.js

@@ -1,3 +1,15 @@
+/* VersaCompiler HMR shim [dev] */
+if (typeof window !== 'undefined' && window.__versaHMR) {
+  (() => {
+    const _id = new URL(import.meta.url).pathname;
+    import.meta.hot = {
+      accept(cb) { window.__versaHMR.accept(_id, typeof cb === 'function' ? cb : () => {}); },
+      invalidate() { window.__versaHMR._invalidate?.(_id); },
+      dispose(cb) { window.__versaHMR._onDispose?.(_id, cb); },
+      get data() { return window.__versaHMR._getHotData?.(_id) ?? {}; },
+    };
+  })();
+}
 import { createHash } from 'node:crypto';
 import path from 'node:path';
 import * as vCompiler from 'vue/compiler-sfc';
@@ -63,19 +75,30 @@ class VueHMRInjectionCache {
         else {
             injectedData = originalData.replace(/(<script.*?>)/, `$1${varContent}`);
         }
-        // Inyectar :key en el template
-        injectedData = injectedData.replace(/(<template[^>]*>[\s\S]*?)(<(\w+)([^>]*?))(\/?>)/, (match, p1, p2, p3, p4, p5) => {
-            if (p4.includes(':key=') || p4.includes('key=')) {
-                return match;
-            }
-            const isSelfClosing = p5 === '/>';
-            if (isSelfClosing) {
-                return `${p1}<${p3}${p4} :key="versaComponentKey" />`;
-            }
-            else {
-                return `${p1}<${p3}${p4} :key="versaComponentKey">`;
+        // Inyectar :key en el primer elemento hijo del template.
+        // Dos pasos para evitar backtracking catastrófico (ReDoS) que ocurría con
+        // el pattern combinado /(<template[^>]*>[\s\S]*?)(<(\w+)([^>]*?))(\/?>)/
+        const templateTagMatch = /(<template[^>]*>)/.exec(injectedData);
+        if (templateTagMatch) {
+            const templateEnd = templateTagMatch.index + templateTagMatch[0].length;
+            const afterTemplate = injectedData.slice(templateEnd);
+            // Buscar el primer tag de elemento (ignora espacios/comentarios) justo después del <template>
+            const firstChildMatch = /^(\s*)(<(\w+)([^>]*?)(\/?>))/.exec(afterTemplate);
+            if (firstChildMatch) {
+                const [, whitespace = '', fullTag = '', tagName, attrs = '', closing,] = firstChildMatch;
+                if (!attrs.includes(':key=') && !attrs.includes('key=')) {
+                    const isSelfClosing = closing === '/>';
+                    const newTag = isSelfClosing
+                        ? `<${tagName}${attrs} :key="versaComponentKey" />`
+                        : `<${tagName}${attrs} :key="versaComponentKey">`;
+                    injectedData =
+                        injectedData.slice(0, templateEnd) +
+                            whitespace +
+                            newTag +
+                            afterTemplate.slice(whitespace.length + fullTag.length);
+                }
             }
-        });
+        }
         // Cachear resultado
         this.cache.set(cacheKey, {
             contentHash,
@@ -167,8 +190,6 @@ export const preCompileVue = async (data, source, isProd = false) => {
                 scriptInfo: undefined,
             };
         }
-        // Guardar el código original antes de inyectar HMR
-        const originalData = data;
         if (!isProd) {
             const { injectedData } = hmrInjectionCache.getOrGenerateHMRInjection(data, fileName);
             data = injectedData;
@@ -312,10 +333,14 @@ export const preCompileVue = async (data, source, isProd = false) => {
                 filename: `${fileName}.vue`,
             });
         });
+        // data-versa-hmr-component permite a VueHRM.js eliminar style tags
+        // de ciclos HMR anteriores para evitar acumulación de estilos duplicados.
+        const sanitizedForAttr = fileName.replace(/[^a-zA-Z0-9_-]/g, '');
         const insertStyles = compiledStyles.length
             ? `(function(){
                     let styleTag = document.createElement('style');
                     styleTag.setAttribute('data-v-${id}', '');
+                    styleTag.setAttribute('data-versa-hmr-component', '${sanitizedForAttr}');
                     styleTag.innerHTML = \`${compiledStyles.map((s) => s.code).join('\n')}\`;
                     document.head.appendChild(styleTag);
                 })();`
@@ -380,6 +405,8 @@ export const preCompileVue = async (data, source, isProd = false) => {
             export default ${componentName};        `;
         output = `${output}\n${finishComponent}`;
         // 🚀 OPTIMIZACIÓN CRÍTICA: Evitar crear scriptInfo si no hay script
+        // originalData NO se incluye en scriptInfo para evitar retener la cadena completa
+        // del .vue en memoria. Se pasa por separado como sourceCode en parseTypeScriptErrors.
         const result = {
             lang: finalCompiledScript.lang,
             error: null,
@@ -391,7 +418,6 @@ export const preCompileVue = async (data, source, isProd = false) => {
                 startLine: (descriptor.script || descriptor.scriptSetup).loc?.start
                     .line || 1,
                 content: (descriptor.script || descriptor.scriptSetup).content,
-                originalData: originalData, // String directa, no closure
             };
         }
         return result;

package/dist/config.js

@@ -1,2 +1,14 @@
+/* VersaCompiler HMR shim [dev] */
+if (typeof window !== 'undefined' && window.__versaHMR) {
+  (() => {
+    const _id = new URL(import.meta.url).pathname;
+    import.meta.hot = {
+      accept(cb) { window.__versaHMR.accept(_id, typeof cb === 'function' ? cb : () => {}); },
+      invalidate() { window.__versaHMR._invalidate?.(_id); },
+      dispose(cb) { window.__versaHMR._onDispose?.(_id, cb); },
+      get data() { return window.__versaHMR._getHotData?.(_id) ?? {}; },
+    };
+  })();
+}
 export { defineConfig, } from './servicios/versacompile.config.types';
 //# sourceMappingURL=config.js.map

package/dist/hrm/VueHRM.js

@@ -1,3 +1,15 @@
+/* VersaCompiler HMR shim [dev] */
+if (typeof window !== 'undefined' && window.__versaHMR) {
+  (() => {
+    const _id = new URL(import.meta.url).pathname;
+    import.meta.hot = {
+      accept(cb) { window.__versaHMR.accept(_id, typeof cb === 'function' ? cb : () => {}); },
+      invalidate() { window.__versaHMR._invalidate?.(_id); },
+      dispose(cb) { window.__versaHMR._onDispose?.(_id, cb); },
+      get data() { return window.__versaHMR._getHotData?.(_id) ?? {}; },
+    };
+  })();
+}
 /**
  * @typedef {Object} TreeNode
  * @property {string} name - Nombre del componente
@@ -222,7 +234,80 @@ function tryForceUpdate(instance) {
 }
 
 /**
- * Intenta actualizar un componente en el camino del árbol
+ * Limpia los caches internos de Vue para una definición de componente.
+ * Necesario para que Vue detecte el cambio de props/emits/options.
+ * @param {Object} appContext - Contexto de la app Vue (instance.appContext)
+ * @param {Object} componentDef - Definición del componente
+ */
+function clearVueCaches(appContext, componentDef) {
+    if (!appContext || !componentDef) return;
+    try {
+        appContext.propsCache?.delete(componentDef);
+        appContext.emitsCache?.delete(componentDef);
+        appContext.optionsCache?.delete(componentDef);
+    } catch {
+        // Los caches pueden no existir en todas las versiones de Vue
+    }
+}
+
+/**
+ * Actualiza una instancia de componente Vue en-place con la nueva definición.
+ * Muta el objeto `instance.type` directamente para que TODAS las referencias
+ * a la definición (incluidas las capturadas en closures de render functions
+ * de componentes padre que hacen import estático) vean la nueva versión.
+ *
+ * @param {Object} instance - Instancia Vue del componente a actualizar
+ * @param {Object} newComponentDef - Nueva definición del componente
+ * @returns {boolean} true si la actualización fue exitosa
+ */
+function updateInstanceInPlace(instance, newComponentDef) {
+    if (!instance || !newComponentDef) return false;
+
+    const oldDef = instance.type;
+    if (!oldDef || typeof oldDef !== 'object') return false;
+
+    // 1. Mutar la definición existente en-place.
+    //    Object.assign copia propiedades enumerables; copiamos render/setup
+    //    explícitamente porque pueden no ser enumerables en algunos builds.
+    Object.assign(oldDef, newComponentDef);
+    if (newComponentDef.render) oldDef.render = newComponentDef.render;
+    if (newComponentDef.setup) oldDef.setup = newComponentDef.setup;
+    if (newComponentDef.ssrRender) oldDef.ssrRender = newComponentDef.ssrRender;
+
+    // 2. Actualizar instance.render directamente.
+    //    Vue almacena la referencia a la render function en instance.render durante
+    //    el mount (handleSetupResult), y es ESA la que llama en cada patch.
+    //    Cambiar solo instance.type.render NO es suficiente — hay que actualizar
+    //    también instance.render para que el próximo update use la nueva template.
+    if (newComponentDef.render && typeof instance.render !== 'undefined') {
+        instance.render = newComponentDef.render;
+    }
+
+    // 3. Limpiar caches internos de Vue para que re-evalúe props/emits/options.
+    clearVueCaches(instance.appContext, oldDef);
+
+    // 4. Forzar actualización de ESTA instancia directamente (no solo del padre).
+    //    Incrementar versaComponentKey para triggear el :key del template.
+    if (instance.ctx?._.setupState?.versaComponentKey !== undefined) {
+        instance.ctx._.setupState.versaComponentKey++;
+    }
+    if (typeof instance.update === 'function') {
+        instance.update();
+        return true;
+    }
+    if (instance.proxy && typeof instance.proxy.$forceUpdate === 'function') {
+        instance.proxy.$forceUpdate();
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ * Intenta actualizar un componente en el camino del árbol.
+ * Ahora usa mutación in-place de la definición + limpieza de caches Vue,
+ * en lugar de reemplazar la referencia en el mapa de components del padre.
+ *
  * @param {TreeNode[]} path - Camino de nodos desde el componente hasta la raíz
  * @param {Object} newComponent - Nuevo componente a usar
  * @param {string} componentName - Nombre del componente
@@ -235,7 +320,25 @@ function tryUpdateComponentPath(path, newComponent, componentName, App) {
         return false;
     }
 
-    // Recorrer el path desde el padre hacia la raíz (saltando el primer elemento que es el propio componente)
+    // path[0] es el nodo del propio componente a actualizar.
+    // Intentar actualización directa en la instancia del componente.
+    const targetNode = path[0];
+    if (targetNode?.instancia) {
+        const updated = updateInstanceInPlace(
+            targetNode.instancia,
+            newComponent,
+        );
+        if (updated) {
+            // También forzar actualización del padre para que el vdom se reconcilie.
+            const parentNode = path[1];
+            if (parentNode?.instancia && !parentNode.isRoot) {
+                tryForceUpdate(parentNode.instancia);
+            }
+            return true;
+        }
+    }
+
+    // Fallback: recorrer hacia el padre si el nodo propio no es accesible.
     for (let i = 1; i < path.length; i++) {
         const parent = path[i];
 
@@ -244,19 +347,29 @@ function tryUpdateComponentPath(path, newComponent, componentName, App) {
             return true;
         }
 
-        if (!parent || !parent.instancia) {
+        if (!parent?.instancia) {
             console.error('❌ Nodo padre no válido en el camino:', parent);
-            continue; // Continúa con el siguiente padre en lugar de fallar
+            continue;
         }
 
-        // Actualizar la instancia del componente
         const componentsDefinition =
             parent.instancia?.type?.components || parent.instancia?.components;
 
         if (componentsDefinition && componentsDefinition[componentName]) {
-            componentsDefinition[componentName] = newComponent;
+            // Mutar la definición existente en el mapa del padre también,
+            // para que nuevas instancias del componente creadas después se usen
+            // con la definición actualizada.
+            const existingDef = componentsDefinition[componentName];
+            if (existingDef && typeof existingDef === 'object') {
+                Object.assign(existingDef, newComponent);
+                if (newComponent.render)
+                    existingDef.render = newComponent.render;
+                if (newComponent.setup) existingDef.setup = newComponent.setup;
+                clearVueCaches(parent.instancia.appContext, existingDef);
+            } else {
+                componentsDefinition[componentName] = newComponent;
+            }
 
-            // Forzar actualización de la instancia padre
             return (
                 tryForceUpdate(parent.instancia) ||
                 tryForceUpdate(parent.instancia.proxy)
@@ -297,6 +410,18 @@ export async function reloadComponent(App, Component) {
         const timestamp = Date.now();
         const moduleUrl = `${urlOrigin}?t=${timestamp}`;
 
+        // Eliminar style tags del ciclo HMR anterior para este componente
+        // para evitar acumulación de estilos duplicados en el documento.
+        const componentName_clean = componentName.replace(
+            /[^a-zA-Z0-9_-]/g,
+            '',
+        );
+        document
+            .querySelectorAll(
+                `[data-versa-hmr-component="${componentName_clean}"]`,
+            )
+            .forEach(el => el.remove());
+
         const module = await import(moduleUrl);
 
         if (!module.default) {

package/dist/hrm/errorScreen.js

@@ -1,3 +1,15 @@
+/* VersaCompiler HMR shim [dev] */
+if (typeof window !== 'undefined' && window.__versaHMR) {
+  (() => {
+    const _id = new URL(import.meta.url).pathname;
+    import.meta.hot = {
+      accept(cb) { window.__versaHMR.accept(_id, typeof cb === 'function' ? cb : () => {}); },
+      invalidate() { window.__versaHMR._invalidate?.(_id); },
+      dispose(cb) { window.__versaHMR._onDispose?.(_id, cb); },
+      get data() { return window.__versaHMR._getHotData?.(_id) ?? {}; },
+    };
+  })();
+}
 /**
  * Variable global que mantiene la referencia al overlay de error actual
  * @type {HTMLElement|null}

package/dist/hrm/getInstanciaVue.js

@@ -1,3 +1,15 @@
+/* VersaCompiler HMR shim [dev] */
+if (typeof window !== 'undefined' && window.__versaHMR) {
+  (() => {
+    const _id = new URL(import.meta.url).pathname;
+    import.meta.hot = {
+      accept(cb) { window.__versaHMR.accept(_id, typeof cb === 'function' ? cb : () => {}); },
+      invalidate() { window.__versaHMR._invalidate?.(_id); },
+      dispose(cb) { window.__versaHMR._onDispose?.(_id, cb); },
+      get data() { return window.__versaHMR._getHotData?.(_id) ?? {}; },
+    };
+  })();
+}
 /**
  * Script para obtener la instancia de Vue usando solo JavaScript
  * Compatible con Vue 2 y Vue 3

package/dist/hrm/initHRM.js

@@ -1,3 +1,15 @@
+/* VersaCompiler HMR shim [dev] */
+if (typeof window !== 'undefined' && window.__versaHMR) {
+  (() => {
+    const _id = new URL(import.meta.url).pathname;
+    import.meta.hot = {
+      accept(cb) { window.__versaHMR.accept(_id, typeof cb === 'function' ? cb : () => {}); },
+      invalidate() { window.__versaHMR._invalidate?.(_id); },
+      dispose(cb) { window.__versaHMR._onDispose?.(_id, cb); },
+      get data() { return window.__versaHMR._getHotData?.(_id) ?? {}; },
+    };
+  })();
+}
 /**
  * @fileoverview Inicialización del sistema Hot Module Replacement (HMR) para VersaCompiler
  * Este archivo maneja la conexión con BrowserSync y configura los listeners para HMR de Vue
@@ -11,6 +23,9 @@
 
 import { hideErrorOverlay, showErrorOverlay } from './errorScreen.js';
 import { obtenerInstanciaVue } from './getInstanciaVue.js';
+
+// oxlint-disable-next-line import/no-unassigned-import -- side-effect: inicializa window.__versaHMR
+import './versaHMR.js';
 import { reloadComponent } from './VueHRM.js';
 
 /**
@@ -343,6 +358,27 @@ async function initSocket(retries = 0) {
         socket.on('reloadFull', () => window.location.reload()); // Obtener la instancia de Vue con toda la lógica integrada
         let vueInstance = await obtenerInstanciaVue();
 
+        // Exponer función de recarga Vue por path para que los shims de módulos
+        // puedan disparar una actualización de instancia Vue cuando una dependencia
+        // (sampleFile.js, etc.) se actualiza vía HMR propagation.
+        if (window.__versaHMR) {
+            window.__versaHMR._reloadVueByPath = async path => {
+                try {
+                    vueInstance = window.__VUE_APP__ || vueInstance;
+                    // normalizedPath sin slash inicial (reloadComponent usa origin + '/' + path)
+                    const normalizedPath = path.replace(/^\//, '');
+                    const nameFile =
+                        path.split('/').pop()?.replace('.js', '') ?? '';
+                    await reloadComponent(vueInstance, {
+                        normalizedPath,
+                        nameFile,
+                    });
+                } catch (err) {
+                    console.error('❌ _reloadVueByPath failed:', err);
+                }
+            };
+        }
+
         // Configurar listener para HMR de componentes Vue
         socket.on('HRMVue', async (/** @type {ComponentInfo} */ data) => {
             try {
@@ -372,12 +408,31 @@ async function initSocket(retries = 0) {
             console.log('🔄 HRMHelper recibido:', data);
             console.log('📋 Archivo modificado:', data.filePath);
 
+            // moduleId: identificador canónico del módulo en el registry
+            // El servidor lo envía como el path del output (ej: /public/utils/math.js)
+            const moduleId = data.moduleId || data.filePath;
+
             if (data?.strategy) {
                 switch (data.strategy) {
                     case 'self-accept': {
+                        // El módulo acepta su propio reemplazo (import.meta.hot.accept)
                         try {
                             const timestamp = Date.now();
-                            await import(`${data.filePath}?t=${timestamp}`);
+                            // Usar moduleId (path absoluto con /) en lugar de data.filePath (relativo)
+                            // data.filePath relativo resuelve mal desde /__versa/initHRM.js
+                            const newModule = await import(
+                                `${moduleId}?t=${timestamp}`
+                            );
+                            // También notificar al registry por si hay consumers adicionales
+                            const registry = window.__versaHMR;
+                            if (registry && registry.hasObservers(moduleId)) {
+                                const exportedValue =
+                                    newModule.default !== undefined
+                                        ? newModule.default
+                                        : newModule;
+                                registry.notifyUpdate(moduleId, exportedValue);
+                            }
+                            console.log(`✅ Self-accept HMR: ${moduleId}`);
                             return;
                         } catch (error) {
                             reportErrorToServer(
@@ -391,9 +446,48 @@ async function initSocket(retries = 0) {
                         break;
                     }
                     case 'propagate': {
+                        // Re-importar el módulo con cache-bust y notificar al registry
                         try {
                             const timestamp = Date.now();
-                            await import(`${data.filePath}?t=${timestamp}`);
+                            // Usar moduleId (path absoluto con /) en lugar de data.filePath (relativo)
+                            // data.filePath relativo resuelve mal desde /__versa/initHRM.js
+                            const newModule = await import(
+                                `${moduleId}?t=${timestamp}`
+                            );
+
+                            // Extraer el valor exportado (default o namespace)
+                            const exportedValue =
+                                newModule.default !== undefined
+                                    ? newModule.default
+                                    : newModule;
+
+                            // Notificar al registry de VersaHMR si hay observers registrados
+                            const registry = window.__versaHMR;
+                            if (registry && registry.hasObservers(moduleId)) {
+                                const notified = registry.notifyUpdate(
+                                    moduleId,
+                                    exportedValue,
+                                );
+                                if (notified) {
+                                    console.log(
+                                        `✅ HMR sin recarga: ${moduleId} actualizado via registry`,
+                                    );
+                                    return;
+                                }
+                                // Si los callbacks fallaron, hacer full-reload como safety net
+                                console.warn(
+                                    `⚠️ Callbacks del registry fallaron para ${moduleId}, haciendo full-reload`,
+                                );
+                                window.location.reload();
+                                return;
+                            }
+
+                            // Sin observers en registry → la re-importación ya actualizó
+                            // el módulo en el scope de ES modules del browser.
+                            // Los consumers que hicieron import dinámico obtendrán la nueva versión.
+                            console.log(
+                                `✅ HMR propagado: ${moduleId} (sin observers en registry, re-import completado)`,
+                            );
                             return;
                         } catch (error) {
                             reportErrorToServer(
@@ -403,8 +497,10 @@ async function initSocket(retries = 0) {
                                     : new Error(String(error)),
                                 data,
                             );
+                            // Fallback a full-reload en caso de error
+                            window.location.reload();
+                            return;
                         }
-                        break;
                     }
                     case 'full-reload':
                     default: {
@@ -453,18 +549,30 @@ async function initSocket(retries = 0) {
                         break;
 
                     case 'propagate':
-                        // Propagar la actualización a los importadores
+                        // Propagar la actualización: re-importar y notificar al registry
                         console.log(
                             '🔄 Propagando actualización a importadores',
                         );
                         try {
-                            // Invalidar el módulo en el cache del navegador
-                            // y dejar que los importadores se actualicen
                             const timestamp = Date.now();
-                            await import(`${data.filePath}?t=${timestamp}`);
-                            console.log(
-                                '✅ Actualización propagada exitosamente',
+                            const newModule = await import(
+                                `${data.filePath}?t=${timestamp}`
                             );
+                            const exportedValue =
+                                newModule.default !== undefined
+                                    ? newModule.default
+                                    : newModule;
+                            const registry = window.__versaHMR;
+                            if (registry && registry.hasObservers(moduleId)) {
+                                registry.notifyUpdate(moduleId, exportedValue);
+                                console.log(
+                                    '✅ Actualización propagada via registry',
+                                );
+                            } else {
+                                console.log(
+                                    '✅ Re-import completado (sin observers en registry)',
+                                );
+                            }
                             return;
                         } catch (error) {
                             console.error(