versacompiler 2.0.7 → 2.0.8

package/dist/hrm/getInstanciaVue.js

@@ -1,313 +1 @@
-/**
- * Script para obtener la instancia de Vue usando solo JavaScript
- * Compatible con Vue 2 y Vue 3
- */
-
-/**
- * @typedef {Object} VueInstance
- * @property {string} [version] - Versión de Vue
- * @property {Object} [config] - Configuración de Vue
- * @property {Object} [proxy] - Proxy del componente
- * @property {Object} [$options] - Opciones del componente (Vue 2)
- * @property {Object} [$router] - Router de Vue
- * @property {Object} [$store] - Store de Vuex/Pinia
- * @property {Array} [$children] - Componentes hijos (Vue 2)
- * @property {Object} [$data] - Datos del componente (Vue 2)
- */
-
-/**
- * @typedef {Object} VueInstanceInfo
- * @property {string|null} version - Versión de Vue detectada
- * @property {string|null} type - Tipo de instancia de Vue
- * @property {boolean} hasRouter - Indica si tiene Vue Router
- * @property {boolean} hasStore - Indica si tiene Vuex/Pinia
- * @property {Object|number} components - Información de componentes
- * @property {string[]|null} data - Claves de datos del componente
- */
-
-/**
- * Obtiene la instancia de Vue desde un elemento específico del DOM
- * @param {string} [selector='#app'] - Selector CSS del elemento que contiene la aplicación Vue
- * @returns {VueInstance|null} Instancia de Vue o null si no se encuentra
- */
-function getVueInstanceFromElement(selector = '#app') {
-    const element = document.querySelector(selector);
-    if (!element) {
-        return null;
-    }
-
-    // Para Vue 3
-    if (element.__vue_app__) {
-        return element.__vue_app__;
-    }
-
-    // Para Vue 2
-    if (element.__vue__) {
-        return element.__vue__;
-    }
-
-    return null;
-}
-
-/**
- * Busca instancias de Vue en todos los elementos del DOM
- * @returns {VueInstance|null} Primera instancia de Vue encontrada o null si no se encuentra ninguna
- */
-function findVueInstanceInDOM() {
-    const allElements = document.querySelectorAll('*');
-
-    for (const element of allElements) {
-        // Vue 3
-        if (element.__vue_app__) {
-            return element.__vue_app__;
-        }
-
-        // Vue 2
-        if (element.__vue__) {
-            return element.__vue__;
-        }
-    }
-
-    return null;
-}
-
-/**
- * Obtiene la instancia de Vue desde variables globales o herramientas de desarrollo
- * @returns {VueInstance|null} Instancia de Vue desde el contexto global o null si no se encuentra
- */
-function getVueFromGlobal() {
-    // Verificar si Vue está en el objeto global
-    if (typeof window !== 'undefined') {
-        // Vue como variable global
-        if (window.Vue) {
-            return window.Vue;
-        }
-
-        // Instancia específica guardada globalmente
-        if (window.__VUE_APP_INSTANCE__) {
-            return window.__VUE_APP_INSTANCE__;
-        }
-
-        // Vue DevTools
-        if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
-            const apps = window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps;
-            if (apps && apps.length > 0) {
-                return apps[0];
-            }
-        }
-    }
-
-    return null;
-}
-
-/**
- * Obtiene el componente raíz específico de Vue 3
- * @param {string} [selector='#app'] - Selector CSS del elemento que contiene la aplicación Vue
- * @returns {VueInstance|null} Componente raíz de Vue 3 o null si no se encuentra
- */
-function getVue3RootComponent(selector = '#app') {
-    const element = document.querySelector(selector);
-    if (!element) return null;
-
-    // Vue 3 específico
-    if (element._vnode && element._vnode.component) {
-        return element._vnode.component;
-    }
-
-    if (element.__vueParentComponent) {
-        return element.__vueParentComponent;
-    }
-
-    return null;
-}
-
-/**
- * Método principal que intenta obtener la instancia de Vue usando múltiples estrategias
- * @param {string} [selector='#app'] - Selector CSS del elemento que contiene la aplicación Vue
- * @returns {VueInstance|null} Instancia de Vue encontrada o null si no se encuentra
- */
-function getVueInstance(selector = '#app') {
-    let instance = null;
-
-    // Intentar método 1: Desde elemento específico
-    instance = getVueInstanceFromElement(selector);
-    if (instance) {
-        return instance;
-    }
-
-    // Intentar método 2: Buscar en DOM
-    instance = findVueInstanceInDOM();
-    if (instance) {
-        return instance;
-    }
-
-    // Intentar método 3: Desde global
-    instance = getVueFromGlobal();
-    if (instance) {
-        return instance;
-    } // Intentar método 4: Componente raíz Vue 3
-    instance = getVue3RootComponent(selector);
-    if (instance) {
-        return instance;
-    }
-
-    return null;
-}
-
-/**
- * Espera a que una instancia de Vue esté disponible en el DOM
- * @param {string} [selector='#app'] - Selector CSS del elemento que contiene la aplicación Vue
- * @param {number} [timeout=5000] - Tiempo máximo de espera en milisegundos
- * @returns {Promise<VueInstance>} Promise que resuelve con la instancia de Vue o rechaza si hay timeout
- */
-function waitForVue(selector = '#app', timeout = 5000) {
-    return new Promise((resolve, reject) => {
-        const startTime = Date.now();
-
-        function check() {
-            const instance = getVueInstance(selector);
-
-            if (instance) {
-                resolve(instance);
-                return;
-            }
-
-            if (Date.now() - startTime > timeout) {
-                reject(
-                    new Error(
-                        'Timeout: No se pudo encontrar la instancia de Vue',
-                    ),
-                );
-                return;
-            }
-
-            setTimeout(check, 100);
-        }
-
-        check();
-    });
-}
-
-/**
- * Obtiene información detallada sobre una instancia de Vue
- * @param {VueInstance} instance - Instancia de Vue a analizar
- * @returns {VueInstanceInfo|null} Objeto con información detallada de la instancia o null si no es válida
- */
-function getVueInstanceInfo(instance) {
-    if (!instance) return null;
-
-    const info = {
-        version: null,
-        type: null,
-        hasRouter: false,
-        hasStore: false,
-        components: {},
-        data: null,
-    };
-
-    // Detectar versión y tipo
-    if (instance.version) {
-        info.version = instance.version;
-        info.type = 'Vue Constructor';
-    } else if (instance.config && instance.config.globalProperties) {
-        info.type = 'Vue 3 App Instance';
-        info.version = '3.x';
-    } else if (instance.$options) {
-        info.type = 'Vue 2 Component Instance';
-        info.version = '2.x';
-    }
-
-    // Verificar router
-    if (
-        instance.$router ||
-        (instance.config && instance.config.globalProperties.$router)
-    ) {
-        info.hasRouter = true;
-    }
-
-    // Verificar store (Vuex/Pinia)
-    if (
-        instance.$store ||
-        (instance.config && instance.config.globalProperties.$store)
-    ) {
-        info.hasStore = true;
-    }
-
-    // Obtener componentes (Vue 2)
-    if (instance.$children) {
-        info.components = instance.$children.length;
-    }
-
-    // Obtener data (Vue 2)
-    if (instance.$data) {
-        info.data = Object.keys(instance.$data);
-    }
-    return info;
-}
-
-/**
- * Función principal que obtiene la instancia de Vue con toda la lógica integrada
- * @param {string} [selector='#app'] - Selector CSS del elemento que contiene la aplicación Vue
- * @param {number} [timeout=3000] - Tiempo máximo de espera en milisegundos
- * @returns {Promise<VueInstance|null>} Promise que resuelve con la instancia de Vue o null si no se encuentra
- */
-async function obtenerInstanciaVue(selector = '#app', timeout = 3000) {
-    try {
-        // Intentar obtener la instancia inmediatamente
-        let instance = getVueInstance(selector);
-
-        if (instance) {
-            // Obtener información detallada
-            const info = getVueInstanceInfo(instance);
-            console.log('✔️ Instancia Vue encontrada:', {
-                instance,
-                info,
-                version: info?.version || 'Desconocida',
-                type: info?.type || 'Desconocido',
-            });
-            return instance;
-        }
-
-        // Si no se encuentra inmediatamente, esperar
-        console.log('⏳ Esperando instancia Vue...');
-        instance = await waitForVue(selector, timeout);
-
-        if (instance) {
-            const info = getVueInstanceInfo(instance);
-            console.log('✔️ Instancia Vue encontrada después de esperar:', {
-                instance,
-                info,
-                version: info?.version || 'Desconocida',
-                type: info?.type || 'Desconocido',
-            });
-            return instance;
-        }
-
-        console.warn('⚠️ No se pudo encontrar la instancia de Vue');
-        return null;
-    } catch (error) {
-        console.error('❌ Error obteniendo instancia Vue:', error);
-        return null;
-    }
-}
-
-/**
- * Exporta la función principal para obtener instancias de Vue
- * @default obtenerInstanciaVue
- */
-export default obtenerInstanciaVue;
-
-/**
- * Exporta funciones adicionales para uso individual
- * @namespace VueInstanceHelpers
- */
-export {
-    findVueInstanceInDOM,
-    getVue3RootComponent,
-    getVueFromGlobal,
-    getVueInstance,
-    getVueInstanceFromElement,
-    getVueInstanceInfo,
-    obtenerInstanciaVue,
-    waitForVue,
-};
+function e(e=`#app`){let t=document.querySelector(e);return t?t.__vue_app__?t.__vue_app__:t.__vue__?t.__vue__:null:null}function t(){let e=document.querySelectorAll(`*`);for(let t of e){if(t.__vue_app__)return t.__vue_app__;if(t.__vue__)return t.__vue__}return null}function n(){if(typeof window<`u`){if(window.Vue)return window.Vue;if(window.__VUE_APP_INSTANCE__)return window.__VUE_APP_INSTANCE__;if(window.__VUE_DEVTOOLS_GLOBAL_HOOK__){let e=window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps;if(e&&e.length>0)return e[0]}}return null}function r(e=`#app`){let t=document.querySelector(e);return t?t._vnode&&t._vnode.component?t._vnode.component:t.__vueParentComponent?t.__vueParentComponent:null:null}function i(i=`#app`){let a=null;return a=e(i),a||(a=t(),a)||(a=n(),a)||(a=r(i),a)?a:null}function a(e=`#app`,t=5e3){return new Promise((n,r)=>{let a=Date.now();function o(){let s=i(e);if(s){n(s);return}if(Date.now()-a>t){r(Error(`Timeout: No se pudo encontrar la instancia de Vue`));return}setTimeout(o,100)}o()})}function o(e){if(!e)return null;let t={version:null,type:null,hasRouter:!1,hasStore:!1,components:{},data:null};return e.version?(t.version=e.version,t.type=`Vue Constructor`):e.config&&e.config.globalProperties?(t.type=`Vue 3 App Instance`,t.version=`3.x`):e.$options&&(t.type=`Vue 2 Component Instance`,t.version=`2.x`),(e.$router||e.config&&e.config.globalProperties.$router)&&(t.hasRouter=!0),(e.$store||e.config&&e.config.globalProperties.$store)&&(t.hasStore=!0),e.$children&&(t.components=e.$children.length),e.$data&&(t.data=Object.keys(e.$data)),t}async function s(e=`#app`,t=3e3){try{let n=i(e);if(n){let e=o(n);return console.log(`✔️ Instancia Vue encontrada:`,{instance:n,info:e,version:e?.version||`Desconocida`,type:e?.type||`Desconocido`}),n}if(console.log(`⏳ Esperando instancia Vue...`),n=await a(e,t),n){let e=o(n);return console.log(`✔️ Instancia Vue encontrada después de esperar:`,{instance:n,info:e,version:e?.version||`Desconocida`,type:e?.type||`Desconocido`}),n}return console.warn(`⚠️ No se pudo encontrar la instancia de Vue`),null}catch(e){return console.error(`❌ Error obteniendo instancia Vue:`,e),null}}export default s;export{t as findVueInstanceInDOM,r as getVue3RootComponent,n as getVueFromGlobal,i as getVueInstance,e as getVueInstanceFromElement,o as getVueInstanceInfo,s as obtenerInstanciaVue,a as waitForVue};

package/dist/hrm/initHRM.js

@@ -1,141 +1 @@
-/**
- * @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
- */
-
-/**
- * @typedef {Object} ComponentInfo
- * @property {string} normalizedPath - Ruta normalizada del componente
- * @property {string} nameFile - Nombre del archivo del componente
- */
-
-import { hideErrorOverlay, showErrorOverlay } from './errorScreen.js';
-import { obtenerInstanciaVue } from './getInstanciaVue.js';
-import { reloadComponent } from './VueHRM.js';
-
-/**
- * Inicializa la conexión socket con BrowserSync y configura los listeners para HMR
- * @param {number} [retries=0] - Número de reintentos realizados
- * @returns {Promise<void>} Promise que se resuelve cuando la conexión está configurada
- */
-async function initSocket(retries = 0) {
-    const maxRetries = 10;
-    const retryDelay = Math.min(2000 * (retries + 1), 10000); // Backoff exponencial hasta 10s
-
-    // Verificar si BrowserSync está disponible y tiene socket
-    if (window.___browserSync___ && window.___browserSync___.socket) {
-        const socket = window.___browserSync___.socket;
-        let connected = socket.connected; // Verificar estado inicial de conexión
-
-        // Limpiar listeners previos para evitar duplicados
-        socket.off('connect');
-        socket.off('disconnect');
-        socket.off('reloadFull');
-        socket.off('HRMVue');
-        socket.off('HRMHelper');
-        socket.off('error');
-
-        // Configurar listener para eventos de conexión
-        socket.on('connect', async () => {
-            connected = true;
-            hideErrorOverlay();
-            console.log('✔️ Versa HMR: Socket conectado');
-        });
-
-        // Configurar listener para eventos de desconexión
-        socket.on('disconnect', () => {
-            connected = false;
-            console.log('❌ Versa HMR: Socket desconectado, reintentando...');
-            // Lógica de reintentos para desconexión
-            setTimeout(() => {
-                if (!socket.connected && retries < maxRetries) {
-                    initSocket(retries + 1);
-                } else if (!socket.connected) {
-                    console.error(
-                        `❌ Versa HMR: Socket no conectado después de ${maxRetries} reintentos tras desconexión.`,
-                    );
-                    showErrorOverlay(
-                        'HMR Desconectado',
-                        'No se pudo reconectar a BrowserSync después de múltiples reintentos.',
-                    );
-                }
-            }, retryDelay);
-        });
-
-        // Configurar listener para recarga completa
-        socket.on('reloadFull', () => window.location.reload()); // Obtener la instancia de Vue con toda la lógica integrada
-        let vueInstance = await obtenerInstanciaVue();
-
-        // Configurar listener para HMR de componentes Vue
-        socket.on('HRMVue', async (/** @type {ComponentInfo} */ data) => {
-            hideErrorOverlay();
-            vueInstance = window.__VUE_APP__ || vueInstance;
-            if (vueInstance) {
-                console.log('🔥 Preparando HMR para Vue...');
-                await reloadComponent(vueInstance, data);
-            } else {
-                console.log('🔄 Usando método fallback:', vueInstance);
-            }
-        });
-
-        // Configurar listener para datos auxiliares de HMR
-        socket.on('HRMHelper', data => {
-            //TODO: Implementar lógica de HMRHelper
-            window.location.reload();
-            console.log('🔄 Recargando página por HMRHelper:', data);
-        });
-
-        // Configurar listener para errores de socket
-        socket.on('error', err => {
-            console.error('❌ Versa HMR: Error en el socket:', err);
-            showErrorOverlay(
-                'Error de Socket',
-                'Se produjo un error en la conexión de BrowserSync.',
-            );
-        }); // Watchdog para verificar 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.`,
-                    );
-                    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 {
-        // BrowserSync no está disponible, intentar reinicializar
-        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.`,
-            );
-            showErrorOverlay(
-                'Falló HMR de BrowserSync',
-                'Socket o cliente de BrowserSync no encontrado después de múltiples reintentos.',
-            );
-        }
-    }
-}
-
-// Inicializar el sistema HMR al cargar el script
-initSocket();
+import{hideErrorOverlay as e,showErrorOverlay as t}from"./errorScreen.js";import{obtenerInstanciaVue as n}from"./getInstanciaVue.js";import{reloadComponent as r}from"./VueHRM.js";async function i(a=0){let o=10,s=Math.min(2e3*(a+1),1e4);if(window.___browserSync___&&window.___browserSync___.socket){let o=window.___browserSync___.socket,c=o.connected;o.off(`connect`),o.off(`disconnect`),o.off(`reloadFull`),o.off(`HRMVue`),o.off(`HRMHelper`),o.off(`error`),o.on(`connect`,async()=>{c=!0,e(),console.log(`✔️ Versa HMR: Socket conectado`)}),o.on(`disconnect`,()=>{c=!1,console.log(`❌ Versa HMR: Socket desconectado, reintentando...`),setTimeout(()=>{!o.connected&&a<10?i(a+1):o.connected||(console.error(`❌ Versa HMR: Socket no conectado después de 10 reintentos tras desconexión.`),t(`HMR Desconectado`,`No se pudo reconectar a BrowserSync después de múltiples reintentos.`))},s)}),o.on(`reloadFull`,()=>window.location.reload());let l=await n();o.on(`HRMVue`,async t=>{e(),l=window.__VUE_APP__||l,l?(console.log(`🔥 Preparando HMR para Vue...`),await r(l,t)):console.log(`🔄 Usando método fallback:`,l)}),o.on(`HRMHelper`,e=>{window.location.reload(),console.log(`🔄 Recargando página por HMRHelper:`,e)}),o.on(`error`,e=>{console.error(`❌ Versa HMR: Error en el socket:`,e),t(`Error de Socket`,`Se produjo un error en la conexión de BrowserSync.`)}),c||(console.log(`Versa HMR: Objeto socket encontrado, intentando conexión (Intento ${a+1}/10)`),setTimeout(()=>{!o.connected&&a<=10?(console.warn(`Versa HMR: Sin conexión de socket después del tiempo de espera inicial, reintentando initSocket...`),i(a+1)):o.connected||(console.error(`❌ Versa HMR: Socket aún no conectado después de 10 intentos iniciales.`),t(`Falló HMR de BrowserSync`,`No se pudo conectar al socket de BrowserSync después de intentos iniciales.`))},5e3))}else console.warn(`[HMR] Socket de BrowserSync no encontrado o BrowserSync no completamente inicializado. Reintentando initSocket... (${a+1}/10)`),a<10?setTimeout(()=>i(a+1),s):(console.error(`❌ Versa HMR: Socket de BrowserSync no encontrado después de 10 reintentos.`),t(`Falló HMR de BrowserSync`,`Socket o cliente de BrowserSync no encontrado después de múltiples reintentos.`))}i();