versacompiler 1.0.3 → 1.0.5

package/dist/hrm/devMode.js

@@ -0,0 +1,346 @@
+let currentComponentTree = null;
+
+function findNodeByInstance(tree, instance) {
+    if (tree.name === instance) return tree;
+    for (const child of tree.children) {
+        const found = findNodeByInstance(child, instance);
+        if (found) return found;
+    }
+    return null;
+}
+
+function getPathToRoot(node) {
+    const path = [];
+    while (node) {
+        path.push(node);
+        node = node.parent;
+    }
+    return path; // Ordenado desde hijo hasta raíz
+}
+
+// Función auxiliar para encontrar componentes recursivamente dentro de un VNode genérico
+function recursivelyFindComponentsInVNode(vnode, parentTreeNode) {
+    if (!vnode || typeof vnode !== 'object') {
+        return;
+    }
+
+    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);
+            });
+        }
+    }
+}
+
+// Función principal de recorrido, ahora llamada traverseComponentInstance
+function traverseComponentInstance(componentInstance, currentTreeNode) {
+    const subTreeVNode = componentInstance.subTree;
+
+    if (!subTreeVNode) {
+        return;
+    }
+
+    recursivelyFindComponentsInVNode(subTreeVNode, currentTreeNode);
+}
+
+export const buildComponentTree = componentRootInstance => {
+    const tree = {
+        name:
+            componentRootInstance.type?.name ||
+            componentRootInstance.type?.__name ||
+            'Anonymous',
+        instancia: componentRootInstance,
+        children: [],
+        parent: null,
+        isRoot: true,
+    };
+    traverseComponentInstance(componentRootInstance, tree);
+    return tree;
+};
+
+// Nueva función auxiliar para intentar forzar la actualización de una instancia
+function tryForceUpdate(instance) {
+    if (!instance) {
+        return false;
+    }
+    if (instance.proxy && typeof instance.proxy.$forceUpdate === 'function') {
+        instance.proxy.$forceUpdate();
+        instance.update();
+        // buscar una varible en el componente que se llame versaComponentKey y sumarle 1
+        instance.ctx._.setupState.versaComponentKey++;
+        return true;
+    }
+    if (typeof instance.update === 'function') {
+        if (instance.ctx._.setupState.versaComponentKey) {
+            instance.ctx._.setupState.versaComponentKey++;
+        }
+        instance.update();
+        return true;
+    }
+    return false;
+}
+
+export async function reloadComponent(
+    app,
+    componentName,
+    relativePath,
+    _extension,
+    _type,
+) {
+    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()}`);
+        currentComponentTree = buildComponentTree(app._instance);
+
+        const targetNode = findNodeByInstance(
+            currentComponentTree,
+            componentName,
+        );
+        const path = getPathToRoot(targetNode);
+        for (const instanciaParent of path) {
+            if (
+                instanciaParent.isRoot ||
+                instanciaParent.name === 'KeepAlive'
+            ) {
+                window.location.reload();
+                return;
+            }
+            if (instanciaParent.name !== componentName) {
+                if (
+                    instanciaParent.name !== 'BaseTransition' &&
+                    instanciaParent.name !== 'Transition' &&
+                    instanciaParent.name !== 'Suspense'
+                ) {
+                    const componentsDefinition =
+                        instanciaParent.instancia?.type?.components ||
+                        instanciaParent.instancia?.components;
+
+                    if (
+                        componentsDefinition &&
+                        componentsDefinition[componentName]
+                    ) {
+                        componentsDefinition[componentName] = module.default;
+                        if (tryForceUpdate(instanciaParent.instancia)) {
+                            console.log(
+                                `✔️ Versa HMR: Component updated successfully`,
+                            );
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+        return null;
+    } catch (error) {
+        console.log(error.stack);
+        return {
+            msg: `Error al recargar ${componentName}: ${error}`,
+            error,
+        };
+    }
+}
+
+// Función Debounce
+export function debounce(func, waitFor) {
+    let timeout = null;
+
+    const debounced = (...args) => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => func(...args), waitFor);
+    };
+
+    return debounced;
+}
+
+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;
+        // Configura el observer para actualizar el árbol de componentes en cada mutación relevante
+        if (app && app._container) {
+            currentComponentTree = buildComponentTree(app._instance);
+            initializeMutationObserver(app._container, () => {
+                if (app._instance) {
+                    currentComponentTree = buildComponentTree(app._instance);
+                }
+            });
+        }
+        // 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}`);
+        //     }
+        // });
+    } else {
+        setTimeout(() => {
+            window.location.reload();
+        }, 5000);
+    }
+}
+
+function initializeMutationObserver(targetNode, callback, options) {
+    const observerInstance = new MutationObserver(callback);
+    const defaultOptions = {
+        childList: true,
+        subtree: true,
+        attributes: false,
+    };
+    observerInstance.observe(targetNode, { ...defaultOptions, ...options });
+    return observerInstance;
+}

package/dist/hrm/errorScreen.js

@@ -0,0 +1,61 @@
+let errorOverlay;
+export function hideErrorOverlay() {
+    const existingOverlay = document.getElementById('versa-hmr-error-overlay');
+    if (existingOverlay) {
+        existingOverlay.remove();
+    }
+    errorOverlay = null;
+}
+export function showErrorOverlay(errorMessage, errorDetails = '') {
+    hideErrorOverlay(); // Ensure no duplicate overlays
+
+    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';
+
+    const title = document.createElement('h2');
+    title.textContent = 'Versa HMR Error';
+    title.style.color = '#ff4d4d';
+    title.style.fontSize = '24px';
+    title.style.marginBottom = '20px';
+
+    const messageDiv = document.createElement('div');
+    messageDiv.textContent = errorMessage;
+    messageDiv.style.marginBottom = '15px';
+    messageDiv.style.whiteSpace = 'pre-wrap';
+
+    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';
+
+    errorOverlay.appendChild(title);
+    errorOverlay.appendChild(messageDiv);
+    if (errorDetails) {
+        errorOverlay.appendChild(detailsPre);
+    }
+
+    document.body.appendChild(errorOverlay);
+}

package/dist/hrm/instanciaVue.js

@@ -0,0 +1,35 @@
+// Store for the Vue app instance
+let vueAppInstance = null;
+
+// Exponer la instancia en window para acceso global
+if (typeof window !== 'undefined') {
+    window.__VUE_APP_INSTANCE__ = {
+        set: function(instance) {
+            vueAppInstance = instance;
+            console.log('Vue app instance stored successfully in window.__VUE_APP_INSTANCE__');
+            return instance;
+        },
+        get: function() {
+            return vueAppInstance;
+        }
+    };
+}
+
+export default {
+    methods: {
+        // Set the Vue app instance
+        set(instance) {
+            vueAppInstance = instance;
+            // También lo guardamos en window para acceso global
+            if (typeof window !== 'undefined') {
+                window.__VUE_APP_INSTANCE__.set(instance);
+            }
+            console.log('Vue app instance stored successfully');
+            return instance;
+        },
+        // Get the Vue app instance
+        get() {
+            return vueAppInstance;
+        },
+    },
+};

package/dist/hrm/setupHMR.js

@@ -0,0 +1,57 @@
+// setupHMR.js - Helper to set up Hot Module Reloading for Vue
+import instanciaVue from './instanciaVue.js';
+
+/**
+ * Set up Hot Module Reloading for a Vue application
+ * @param {Object} app - The Vue application instance
+ * @returns {Object} - The same Vue application instance
+ */
+export function setupHMR(app) {
+    // Store the Vue app instance in our instanciaVue module
+    instanciaVue.methods.set(app);
+
+    // También lo guardamos directamente en window para mayor accesibilidad
+    if (typeof window !== 'undefined') {
+        window.__VUE_APP__ = app;
+        console.log('Vue app instance stored directly in window.__VUE_APP__');
+    }
+
+    console.log('HMR setup complete - Vue instance stored for hot reloading');
+
+    return app;
+}
+
+/**
+ * Helper function to wrap your Vue app creation with HMR support
+ * @param {Function} createAppFn - Function that creates and returns your Vue app
+ * @returns {Object} - The Vue application instance with HMR support
+ */
+export function createAppWithHMR(createAppFn) {
+    const app = createAppFn();
+    return setupHMR(app);
+}
+
+/**
+ * Función para obtener la instancia de Vue desde cualquier parte de la aplicación
+ * @returns {Object|null} - La instancia de Vue o null si no está disponible
+ */
+export function getVueInstance() {
+    // Intentar obtener la instancia desde diferentes fuentes
+    if (typeof window !== 'undefined') {
+        // Primero intentar desde window.__VUE_APP__
+        if (window.__VUE_APP__) {
+            return window.__VUE_APP__;
+        }
+
+        // Luego intentar desde window.__VUE_APP_INSTANCE__
+        if (
+            window.__VUE_APP_INSTANCE__ &&
+            typeof window.__VUE_APP_INSTANCE__.get === 'function'
+        ) {
+            return window.__VUE_APP_INSTANCE__.get();
+        }
+    }
+
+    // Finalmente intentar desde instanciaVue
+    return instanciaVue.methods.get();
+}