versacompiler 2.0.7 → 2.0.8

package/dist/hrm/VueHRM.js

@@ -1,353 +1 @@
-/**
- * @typedef {Object} TreeNode
- * @property {string} name - Nombre del componente
- * @property {Object} instancia - Instancia del componente Vue
- * @property {TreeNode[]} children - Nodos hijos
- * @property {TreeNode|null} parent - Nodo padre
- * @property {boolean} isRoot - Si es el nodo raíz
- * @property {string} [from] - Origen del nodo
- */
-
-/**
- * @typedef {Object} VNode
- * @property {Object} [type] - Tipo del VNode
- * @property {Object} [component] - Componente asociado
- * @property {VNode[]} [children] - VNodes hijos
- * @property {VNode[]} [dynamicChildren] - VNodes dinámicos
- * @property {Object} [suspense] - Objeto suspense
- */
-
-/**
- * @typedef {Object} ComponentInstance
- * @property {Object} type - Tipo del componente
- * @property {string} [type.name] - Nombre del tipo
- * @property {string} [type.__name] - Nombre alternativo del tipo
- * @property {Object} [components] - Componentes registrados
- * @property {VNode} subTree - Subárbol del componente
- * @property {Object} [proxy] - Proxy del componente
- * @property {Function} [proxy.$forceUpdate] - Función de actualización forzada
- * @property {Function} [update] - Función de actualización
- * @property {Object} [ctx] - Contexto del componente
- * @property {Object} [ctx._] - Contexto interno del componente
- * @property {Object} [ctx._.setupState] - Estado del setup del componente
- * @property {number} [ctx._.setupState.versaComponentKey] - Clave del componente para HMR
- */
-
-/**
- * @typedef {Object} ComponentInfo
- * @property {string} normalizedPath - Ruta normalizada del componente
- * @property {string} nameFile - Nombre del archivo del componente
- */
-
-/**
- * @typedef {Object} VueApp
- * @property {ComponentInstance} _instance - Instancia principal de la aplicación
- */
-
-/**
- * Busca nodos en el árbol por nombre de instancia
- * @param {TreeNode} tree - Árbol de componentes
- * @param {string} instance - Nombre de la instancia a buscar
- * @returns {TreeNode[]} Array de nodos encontrados
- */
-function findNodeByInstance(tree, instance) {
-    const matches = [];
-    /**
-     * @param {TreeNode} node - Nodo a buscar recursivamente
-     */
-    function searchRecursively(node) {
-        if (node.name === instance) {
-            matches.push(node);
-        }
-        for (const child of node.children) {
-            searchRecursively(child);
-        }
-    }
-
-    searchRecursively(tree);
-    return matches;
-}
-/**
- * Obtiene el camino desde un nodo hasta la raíz
- * @param {TreeNode} node - Nodo inicial
- * @returns {TreeNode[]} Camino desde el nodo hasta la raíz
- */
-function getPathToRoot(node) {
-    const path = [];
-    while (node) {
-        path.push(node);
-        node = node.parent;
-    }
-    return path; // Ordenado desde hijo hasta raíz
-}
-
-/**
- * Encuentra componentes recursivamente dentro de un VNode
- * @param {VNode} vnode - VNode a explorar
- * @param {TreeNode} parentTreeNode - Nodo padre en el árbol
- */
-function recursivelyFindComponentsInVNode(vnode, parentTreeNode) {
-    if (!vnode || typeof vnode !== 'object') {
-        return;
-    }
-    if (vnode?.type.name === 'Suspense') {
-        const childComponentInstance = vnode?.suspense.activeBranch;
-        const childTreeNode = {
-            name: vnode?.type.name,
-            instancia: childComponentInstance,
-            children: [],
-            parent: parentTreeNode,
-            isRoot: false,
-        };
-        parentTreeNode.children.push(childTreeNode);
-        recursivelyFindComponentsInVNode(childComponentInstance, childTreeNode);
-    } else 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);
-            });
-        }
-    }
-}
-
-/**
- * Recorre una instancia de componente y construye el árbol
- * @param {ComponentInstance} componentInstance - Instancia del componente
- * @param {TreeNode} currentTreeNode - Nodo actual del árbol
- */
-function traverseComponentInstance(componentInstance, currentTreeNode) {
-    const subTreeVNode = componentInstance.subTree;
-
-    if (!subTreeVNode) {
-        return;
-    }
-
-    recursivelyFindComponentsInVNode(subTreeVNode, currentTreeNode);
-}
-
-/**
- * Construye el árbol de componentes desde una instancia raíz
- * @param {ComponentInstance} componentRootInstance - Instancia raíz del componente
- * @returns {TreeNode|null} Árbol de componentes o null si falla
- */
-export const buildComponentTree = componentRootInstance => {
-    if (!componentRootInstance || !componentRootInstance.type) {
-        console.warn(
-            'No se pudo construir el árbol de componentes: instancia inválida',
-        );
-        return null;
-    }
-    const tree = {
-        name:
-            componentRootInstance.type?.name ||
-            componentRootInstance.type?.__name ||
-            'Anonymous',
-        instancia: componentRootInstance,
-        children: [],
-        parent: null,
-        isRoot: true,
-        from: 'root',
-    };
-    traverseComponentInstance(componentRootInstance, tree);
-
-    return tree;
-};
-
-/**
- * Intenta forzar la actualización de una instancia de componente
- * @param {ComponentInstance} instance - Instancia del componente a actualizar
- * @returns {boolean} True si la actualización fue exitosa, false en caso contrario
- */
-function tryForceUpdate(instance) {
-    if (!instance) {
-        return false;
-    }
-    if (instance.proxy && typeof instance.proxy.$forceUpdate === 'function') {
-        instance.proxy.$forceUpdate();
-        if (typeof instance.update === 'function') {
-            instance.update();
-        }
-        // buscar una variable en el componente que se llame versaComponentKey y sumarle 1
-        if (instance.ctx?._.setupState?.versaComponentKey !== undefined) {
-            instance.ctx._.setupState.versaComponentKey++;
-        }
-        return true;
-    }
-    if (typeof instance.update === 'function') {
-        if (instance.ctx?._.setupState?.versaComponentKey !== undefined) {
-            instance.ctx._.setupState.versaComponentKey++;
-        }
-        instance.update();
-        return true;
-    }
-    return false;
-}
-
-/**
- * Intenta actualizar un componente en el camino del árbol
- * @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
- * @param {VueApp} App - Aplicación Vue
- * @returns {boolean} True si la actualización fue exitosa
- */
-function tryUpdateComponentPath(path, newComponent, componentName, App) {
-    if (!path || !newComponent || !componentName || !App) {
-        console.error('❌ Parámetros inválidos para tryUpdateComponentPath');
-        return false;
-    }
-
-    // Recorrer el path desde el padre hacia la raíz (saltando el primer elemento que es el propio componente)
-    for (let i = 1; i < path.length; i++) {
-        const parent = path[i];
-
-        if (parent.isRoot || parent.name === 'KeepAlive') {
-            window.location.reload();
-            return true;
-        }
-
-        if (!parent || !parent.instancia) {
-            console.error('❌ Nodo padre no válido en el camino:', parent);
-            continue; // Continúa con el siguiente padre en lugar de fallar
-        }
-
-        // Actualizar la instancia del componente
-        const componentsDefinition =
-            parent.instancia?.type?.components || parent.instancia?.components;
-
-        if (componentsDefinition && componentsDefinition[componentName]) {
-            componentsDefinition[componentName] = newComponent;
-
-            // Forzar actualización de la instancia padre
-            return (
-                tryForceUpdate(parent.instancia) ||
-                tryForceUpdate(parent.instancia.proxy)
-            );
-        }
-    }
-
-    return false;
-}
-
-/**
- * Recarga un componente Vue con Hot Module Replacement
- * @param {VueApp} App - Aplicación Vue principal
- * @param {ComponentInfo} Component - Información del componente a recargar
- * @returns {Promise<boolean>} Promise que resuelve a true si la recarga fue exitosa
- */
-export async function reloadComponent(App, Component) {
-    try {
-        const { normalizedPath: relativePath, nameFile: componentName } =
-            Component;
-        if (!App || !App._instance) {
-            console.error('❌ App o App._instance no están definidos');
-            return false;
-        }
-
-        if (!relativePath) {
-            console.error('❌ No se proporcionó relativePath');
-            return false;
-        }
-
-        const baseUrl = window.location.href;
-        const newBaseUrl = new URL(baseUrl);
-        const urlOrigin = `${newBaseUrl.origin}/${relativePath}`;
-        const timestamp = Date.now();
-        const moduleUrl = `${urlOrigin}?t=${timestamp}`;
-
-        const module = await import(moduleUrl);
-
-        if (!module.default) {
-            console.error('❌ El módulo importado no tiene export default');
-            return false;
-        }
-
-        const componentTree = buildComponentTree(App._instance);
-        if (!componentTree) {
-            console.error('❌ No se pudo construir el árbol de componentes');
-            return false;
-        }
-
-        const targetNodes = findNodeByInstance(componentTree, componentName);
-        if (!targetNodes) {
-            console.warn(
-                '⚠️ No se encontró el nodo objetivo para:',
-                componentName,
-            );
-
-            return false;
-        }
-
-        console.log(
-            `🔍 Se encontraron ${targetNodes.length} instancias del componente ${componentName}`,
-        );
-
-        let successfulUpdates = 0; // Procesar TODAS las instancias encontradas
-        for (let i = 0; i < targetNodes.length; i++) {
-            const node = targetNodes[i];
-            if (node) {
-                const path = getPathToRoot(node);
-                const updateResult = await tryUpdateComponentPath(
-                    path,
-                    module.default,
-                    componentName,
-                    App,
-                );
-
-                if (updateResult) {
-                    successfulUpdates++;
-                } else {
-                    console.error(
-                        `❌ No se pudo actualizar la instancia ${i + 1}`,
-                    );
-                }
-            }
-        }
-
-        const hasSuccessfulUpdate = successfulUpdates > 0;
-        console.log(
-            `\n📊 Resultado final: ${successfulUpdates}/${targetNodes.length} instancias actualizadas`,
-        );
-
-        return hasSuccessfulUpdate;
-    } catch (error) {
-        console.error('❌ Error en reloadComponent:', error);
-        return false;
-    }
-}
+import{obtenerInstanciaVue as e}from"./getInstanciaVue.js";function t(e,t){let n=[];function r(e){e.name===t&&n.push(e);for(let t of e.children)r(t)}return r(e),n}function n(e){let t=[];for(;e;)t.push(e),e=e.parent;return t}function r(e,t){if(!(!e||typeof e!=`object`))if(e?.type.name===`Suspense`){let n=e?.suspense.activeBranch,i={name:e?.type.name,instancia:n,children:[],parent:t,isRoot:!1};t.children.push(i),r(n,i)}else if(e.component){let n=e.component,r=`Anonymous`;if(n.type){if(n.type.name)r=n.type.name;else if(n.type.__name)r=n.type.__name;else if(typeof n.type==`function`){let e=n.type.name;e&&e!==`Anonymous function`&&(r=e);let t=n.type.toString();t.includes(`BaseTransition`)?r=`Transition`:t.includes(`KeepAlive`)?r=`KeepAlive`:t.includes(`Suspense`)&&(r=`Suspense`)}}let a={name:r,instancia:n,children:[],parent:t,isRoot:!1};t.children.push(a),i(n,a)}else{let n=e.children||e.dynamicChildren;Array.isArray(n)&&n.forEach(e=>{r(e,t)})}}function i(e,t){let n=e.subTree;n&&r(n,t)}export const buildComponentTree=e=>{if(!e||!e.type)return console.warn(`No se pudo construir el árbol de componentes: instancia inválida`),null;let t={name:e.type?.name||e.type?.__name||`Anonymous`,instancia:e,children:[],parent:null,isRoot:!0,from:`root`};return i(e,t),t};function o(e){return e?e.proxy&&typeof e.proxy.$forceUpdate==`function`?(e.proxy.$forceUpdate(),typeof e.update==`function`&&e.update(),e.ctx?._.setupState?.versaComponentKey!==void 0&&e.ctx._.setupState.versaComponentKey++,!0):typeof e.update==`function`?(e.ctx?._.setupState?.versaComponentKey!==void 0&&e.ctx._.setupState.versaComponentKey++,e.update(),!0):!1:!1}function s(e,t,n,r){if(!e||!t||!n||!r)return console.error(`❌ Parámetros inválidos para tryUpdateComponentPath`),!1;for(let r=1;r<e.length;r++){let i=e[r];if(i.isRoot||i.name===`KeepAlive`)return window.location.reload(),!0;if(!i||!i.instancia){console.error(`❌ Nodo padre no válido en el camino:`,i);continue}let a=i.instancia?.type?.components||i.instancia?.components;if(a&&a[n])return a[n]=t,o(i.instancia)||o(i.instancia.proxy)}return!1}export async function reloadComponent(r,i){try{let{normalizedPath:o,nameFile:c}=i;if(!r||!r._instance){let t=await e();if(!t)return console.error(`❌ No se pudo obtener la instancia de Vue`),!1;r=t}if(!o)return console.error(`❌ No se proporcionó relativePath`),!1;let l=window.location.href,u=new URL(l),d=`${u.origin}/${o}`,f=Date.now(),p=`${d}?t=${f}`,m=await import(p);if(!m.default)return console.error(`❌ El módulo importado no tiene export default`),!1;let h=buildComponentTree(r._instance);if(!h)return console.error(`❌ No se pudo construir el árbol de componentes`),!1;let g=t(h,c);if(!g)return console.warn(`⚠️ No se encontró el nodo objetivo para:`,c),!1;console.log(`🔍 Se encontraron ${g.length} instancias del componente ${c}`);let _=0;for(let e=0;e<g.length;e++){let t=g[e];if(t){let i=n(t),a=await s(i,m.default,c,r);a?_++:console.error(`❌ No se pudo actualizar la instancia ${e+1}`)}}let v=_>0;return console.log(`\n📊 Resultado final: ${_}/${g.length} instancias actualizadas`),v}catch(e){return console.error(`❌ Error en reloadComponent:`,e),!1}}

package/dist/hrm/errorScreen.js

@@ -1,83 +1 @@
-/**
- * Variable global que mantiene la referencia al overlay de error actual
- * @type {HTMLElement|null}
- */
-let errorOverlay;
-
-/**
- * Oculta y remueve el overlay de error actual del DOM
- * @returns {void}
- */
-export function hideErrorOverlay() {
-    const existingOverlay = document.getElementById('versa-hmr-error-overlay');
-    if (existingOverlay) {
-        existingOverlay.remove();
-    }
-    errorOverlay = null;
-}
-
-/**
- * Muestra un overlay de error personalizado para errores de HMR (Hot Module Replacement).
- * @param {string} errorMessage - Mensaje de error principal.
- * @param {string} [errorDetails=''] - Detalles adicionales del error, opcional.
- * @returns {void}
- */
-export function showErrorOverlay(errorMessage, errorDetails = '') {
-    hideErrorOverlay(); // Asegurar que no haya overlays duplicados
-
-    // Crear el contenedor principal del overlay
-    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';
-
-    // Crear el título del overlay
-    const title = document.createElement('h2');
-    title.textContent = 'Versa HMR Error';
-    title.style.color = '#ff4d4d';
-    title.style.fontSize = '24px';
-    title.style.marginBottom = '20px';
-
-    // Crear el contenedor del mensaje principal
-    const messageDiv = document.createElement('div');
-    messageDiv.textContent = errorMessage;
-    messageDiv.style.marginBottom = '15px';
-    messageDiv.style.whiteSpace = 'pre-wrap';
-
-    // Crear el contenedor de detalles del error
-    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';
-
-    // Agregar elementos al overlay
-    errorOverlay.appendChild(title);
-    errorOverlay.appendChild(messageDiv);
-    if (errorDetails) {
-        errorOverlay.appendChild(detailsPre);
-    }
-
-    // Agregar el overlay al DOM
-    document.body.appendChild(errorOverlay);
-}
+let e;export function hideErrorOverlay(){let t=document.getElementById(`versa-hmr-error-overlay`);t&&t.remove(),e=null}export function showErrorOverlay(n,r=``){hideErrorOverlay(),e=document.createElement(`div`),e.id=`versa-hmr-error-overlay`,e.style.position=`fixed`,e.style.top=`0`,e.style.left=`0`,e.style.width=`100vw`,e.style.height=`100vh`,e.style.backgroundColor=`rgba(0, 0, 0, 1.85)`,e.style.color=`#ff8080`,e.style.zIndex=`999999`,e.style.display=`flex`,e.style.flexDirection=`column`,e.style.alignItems=`center`,e.style.justifyContent=`center`,e.style.fontFamily=`monospace`,e.style.fontSize=`16px`,e.style.padding=`20px`,e.style.boxSizing=`border-box`,e.style.textAlign=`left`,e.style.overflow=`auto`;let i=document.createElement(`h2`);i.textContent=`Versa HMR Error`,i.style.color=`#ff4d4d`,i.style.fontSize=`24px`,i.style.marginBottom=`20px`;let a=document.createElement(`div`);a.textContent=n,a.style.marginBottom=`15px`,a.style.whiteSpace=`pre-wrap`;let o=document.createElement(`pre`);o.textContent=r,o.style.backgroundColor=`rgba(255, 255, 255, 0.1)`,o.style.padding=`10px`,o.style.borderRadius=`5px`,o.style.maxHeight=`50vh`,o.style.overflow=`auto`,o.style.width=`100%`,o.style.maxWidth=`800px`,e.appendChild(i),e.appendChild(a),r&&e.appendChild(o),document.body.appendChild(e)}