versacompiler 2.0.8 → 2.2.0

package/dist/hrm/VueHRM.js

@@ -1 +1,359 @@
-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}}
+/**
+ * @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
+ */
+
+import { obtenerInstanciaVue } from './getInstanciaVue.js';
+
+/**
+ * @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) {
+            const vueInstance = await obtenerInstanciaVue();
+            if (!vueInstance) {
+                console.error('❌ No se pudo obtener la instancia de Vue');
+                return false;
+            }
+            App = vueInstance;
+        }
+
+        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;
+    }
+}

package/dist/hrm/errorScreen.js

@@ -1 +1,83 @@
-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)}
+/**
+ * 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);
+}