versacompiler 2.1.0 → 2.3.0

package/dist/compiler/vuejs.js

@@ -1,37 +1,396 @@
-import{createHash as e}from"node:crypto";import t from"node:path";import*as n from"vue/compiler-sfc";const r=n;import{logger as i}from"../servicios/logger.js";import{parser as a}from"./parser.js";let o;async function s(){return o||(o=(await import(`chalk`)).default),o}class c{static instance;cache=new Map;MAX_CACHE_SIZE=100;CACHE_TTL=300*1e3;static getInstance(){return c.instance||(c.instance=new c),c.instance}generateContentHash(t){return e(`md5`).update(t).digest(`hex`)}getOrGenerateHMRInjection(e,t){let n=this.generateContentHash(e),r=`${t}:${n}`,i=this.cache.get(r);if(i&&Date.now()-i.timestamp<this.CACHE_TTL)return{injectedData:i.injectedCode,cached:!0};let a=/import\s*\{[^}]*\bref\b[^}]*\}\s*from\s*['"]vue['"]/.test(e),o=`
-            ${a?``:`import { ref } from "/node_modules/vue/dist/vue.esm-browser.js";`}
-            const versaComponentKey = ref(0);
-            `,s;return s=e.includes(`<script`)?e.replace(/(<script.*?>)/,`$1${o}`):`<script setup lang="ts">${o}<\/script>/n`+e,s=s.replace(/(<template[^>]*>[\s\S]*?)(<(\w+)([^>]*?))(\/?>)/,(e,t,n,r,i,a)=>i.includes(`:key=`)||i.includes(`key=`)?e:a===`/>`?`${t}<${r}${i} :key="versaComponentKey" />`:`${t}<${r}${i} :key="versaComponentKey">`),this.cache.set(r,{contentHash:n,injectedCode:s,hasRefImport:a,timestamp:Date.now()}),this.evictIfNeeded(),{injectedData:s,cached:!1}}evictIfNeeded(){if(this.cache.size<=this.MAX_CACHE_SIZE)return;let e=Array.from(this.cache.entries());e.sort((e,t)=>e[1].timestamp-t[1].timestamp),e.slice(0,e.length-this.MAX_CACHE_SIZE).forEach(([e])=>this.cache.delete(e))}cleanExpired(){let e=Date.now();for(let[t,n]of this.cache.entries())e-n.timestamp>this.CACHE_TTL&&this.cache.delete(t)}getStats(){return{size:this.cache.size,maxSize:this.MAX_CACHE_SIZE,ttl:this.CACHE_TTL}}clear(){this.cache.clear()}}const l=c.getInstance(),u=async e=>{let t=[],n=e?.module?.staticImports;return n&&(t=n.filter(e=>e.moduleRequest.value.endsWith(`.vue`)).map(e=>e.entries.map(e=>e.localName.value)),t=t.flat()),t};export const preCompileVue=async(e,n,o=!1)=>{try{let c=t.basename(n).replace(`.vue`,``);if(!e||e.trim().length===0)return{error:null,data:`export default {};`,lang:`js`};if(!o){let{injectedData:t}=l.getOrGenerateHMRInjection(e,c);e=t}let{descriptor:d,errors:f}=r.parse(e,{filename:c,sourceMap:!o,sourceRoot:t.dirname(n)});if(f.length)throw Error(`Error al analizar el componente Vue ${n}:\n${f.map(e=>e.message).join(`
-`)}`);let p=Math.random().toString(36).slice(2,12),m=d.styles.some(e=>e.scoped)?`data-v-${p}`:null,h,g=`js`,_,v;if(d.script||d.scriptSetup){v=d.script?`script`:`scriptSetup`;let e=d.script||d.scriptSetup,t={id:p,isProd:o,sourceMap:!o,inlineTemplate:!1,propsDestructure:!0,templateOptions:{compilerOptions:{mode:`module`,scopeId:m,prefixIdentifiers:!0,hoistStatic:o,cacheHandlers:o,nodeTransforms:[],directiveTransforms:{}},transformAssetUrls:!0},customElement:!1},n=r.compileScript(d,t);h=n.content,g=e.lang?.toLowerCase()===`ts`||e.lang?.toLowerCase()===`typescript`?`ts`:`js`,_=n.bindings}else h=`export default {};`,g=`js`;let y=await a(`temp.${g}`,h,g);if(y?.errors.length>0)throw Error(`Error al analizar el script del componente Vue ${n}:\n${y.errors.map(e=>e.message).join(`
-`)}`);let b=await u(y);_&&Object.keys(_).forEach(e=>{b.includes(e)&&delete _[e]});let x=``;if(d.template){let e={source:d.template.content,filename:`${c}.vue`,id:p,scoped:!!m,slotted:d.slotted,isProd:o,compilerOptions:{scopeId:m,mode:`module`,bindingMetadata:_,prefixIdentifiers:!0,hoistStatic:o,cacheHandlers:o,runtimeGlobalName:`Vue`,runtimeModuleName:`/node_modules/vue/dist/vue.esm-browser.js`,whitespace:`condense`,ssr:!1,nodeTransforms:[],directiveTransforms:{}}},t=r.compileTemplate(e);t.errors?.length>0&&i.error(`Template compilation errors:`,t.errors),x=t.code}else{let e=await s();i.warn(e.yellow(`Advertencia: El componente Vue ${n} no tiene una sección de plantilla.`))}let S={content:h,lang:g,type:v},C={code:x},w=``;d.customBlocks.length>0&&(w=d.customBlocks[0]?.content.slice(0,-1)??``);let T=d.styles.map(e=>{let t=e.lang?.toLowerCase(),n;return(t===`scss`||t===`sass`||t===`less`||t===`styl`||t===`stylus`)&&(n=t),r.compileStyle({id:p,source:e.content,scoped:e.scoped,preprocessLang:n,isProd:o,trim:!0,filename:`${c}.vue`})}),E=`
-            ${T.length?`(function(){
-                    let styleTag = document.createElement('style');
-                    styleTag.setAttribute('data-v-${p}', '');
-                    styleTag.innerHTML = html\`${T.map(e=>e.code).join(`
-`)}\`;
-                    document.head.appendChild(styleTag);
-                })();`:``}
-            ${S.content}
-            ${C.code}
-        `,D=`${c.replace(/[^a-zA-Z0-9_$]/g,``).replace(/^[0-9]/,`_$&`)||`component`}_component`,O=/name\s*:\s*['"`]/.test(E),k=/components\s*:\s*\{/.test(E),A=`
-                __file: '${n}',
-                __name: '${c}',
-                ${O?``:`name: '${c}',`}
-                ${k?``:`components: {
-                    ${b.map(e=>`${e}`).join(`,
-                    `)}
-                },`}
-            `;E.includes(`export default {`)?E=E.replace(`export default {`,`const ${D} = {
-                \n${A}
-                `):E.includes(`export default defineComponent({`)?E=E.replace(`export default defineComponent({`,`const ${D} = defineComponent({
-                \n${A}
-                `):E.includes(`const default = /*@__PURE__*/_defineComponent({`)?E=E.replace(`const default = /*@__PURE__*/_defineComponent({`,`const ${D} = /*@__PURE__*/_defineComponent({
-                \n${A}
-                `):E.includes(`export default /*@__PURE__*/_defineComponent({`)&&(E=E.replace(`export default /*@__PURE__*/_defineComponent({`,`const ${D} = /*@__PURE__*/_defineComponent({
-                \n${A}
-                `)),E.includes(`export function render`)&&(E=E.replace(`export function render`,`function render_${D}`));let j=E.includes(`render_${D}`)||E.includes(`function render(`);!j&&d.template&&i.warn(`Warning: No render function found in compiled output`);let M=`
-            ${j?`${D}.render = render_${D};`:``}
-            ${m?`${D}.__scopeId = '${m}';`:``}
-            ${w}
-
-            export default ${D};        `;return E=`${E}\n${M}`,{lang:S.lang,error:null,data:E}}catch(e){return i.error(`Vue compilation error:`,e),{lang:null,error:e instanceof Error?e:Error(String(e)),data:null}}};export const getVueHMRCacheStats=()=>l.getStats();export const clearVueHMRCache=()=>{l.clear()};export const cleanExpiredVueHMRCache=()=>{l.cleanExpired()};
+import { createHash } from 'node:crypto';
+import path from 'node:path';
+import * as vCompiler from 'vue/compiler-sfc';
+// Type casting para evitar problemas de tipos con Vue SFC
+const vueCompiler = vCompiler;
+import { logger } from '../servicios/logger.js';
+import { parser } from './parser.js';
+// Lazy loading para chalk
+let chalk;
+async function loadChalk() {
+    if (!chalk) {
+        chalk = (await import('chalk')).default;
+    }
+    return chalk;
+}
+class VueHMRInjectionCache {
+    static instance;
+    cache = new Map();
+    MAX_CACHE_SIZE = 100;
+    CACHE_TTL = 5 * 60 * 1000; // 5 minutos
+    static getInstance() {
+        if (!VueHMRInjectionCache.instance) {
+            VueHMRInjectionCache.instance = new VueHMRInjectionCache();
+        }
+        return VueHMRInjectionCache.instance;
+    }
+    /**
+     * Genera un hash del contenido original para detectar cambios
+     */
+    generateContentHash(data) {
+        return createHash('md5').update(data).digest('hex');
+    }
+    /**
+     * Obtiene código HMR inyectado desde cache o lo genera
+     */
+    getOrGenerateHMRInjection(originalData, fileName) {
+        const contentHash = this.generateContentHash(originalData);
+        const cacheKey = `${fileName}:${contentHash}`;
+        // Verificar cache
+        const cached = this.cache.get(cacheKey);
+        if (cached && Date.now() - cached.timestamp < this.CACHE_TTL) {
+            return {
+                injectedData: cached.injectedCode,
+                cached: true,
+            };
+        }
+        // Generar nueva inyección HMR
+        const vueImportPattern = /import\s*\{[^}]*\bref\b[^}]*\}\s*from\s*['"]vue['"]/;
+        const hasRefImport = vueImportPattern.test(originalData);
+        const varContent = `
+            ${hasRefImport ? '' : 'import { ref } from "/node_modules/vue/dist/vue.esm-browser.js";'}
+            const versaComponentKey = ref(0);
+            `;
+        let injectedData;
+        const ifExistScript = originalData.includes('<script');
+        if (!ifExistScript) {
+            injectedData =
+                `<script setup lang="ts">${varContent}</script>/n` +
+                    originalData;
+        }
+        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">`;
+            }
+        });
+        // Cachear resultado
+        this.cache.set(cacheKey, {
+            contentHash,
+            injectedCode: injectedData,
+            hasRefImport,
+            timestamp: Date.now(),
+        });
+        // Limpiar cache si es necesario
+        this.evictIfNeeded();
+        return {
+            injectedData,
+            cached: false,
+        };
+    }
+    /**
+     * Limpia entradas de cache cuando se excede el límite
+     */
+    evictIfNeeded() {
+        if (this.cache.size <= this.MAX_CACHE_SIZE)
+            return;
+        const entries = Array.from(this.cache.entries());
+        entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+        // Eliminar las entradas más antiguas
+        const toDelete = entries.slice(0, entries.length - this.MAX_CACHE_SIZE);
+        toDelete.forEach(([key]) => this.cache.delete(key));
+    }
+    /**
+     * Limpia entradas expiradas
+     */
+    cleanExpired() {
+        const now = Date.now();
+        for (const [key, entry] of this.cache.entries()) {
+            if (now - entry.timestamp > this.CACHE_TTL) {
+                this.cache.delete(key);
+            }
+        }
+    }
+    /**
+     * Obtiene estadísticas del cache
+     */
+    getStats() {
+        return {
+            size: this.cache.size,
+            maxSize: this.MAX_CACHE_SIZE,
+            ttl: this.CACHE_TTL,
+        };
+    }
+    /**
+     * Limpia todo el cache
+     */
+    clear() {
+        this.cache.clear();
+    }
+}
+// Instancia global del cache HMR
+const hmrInjectionCache = VueHMRInjectionCache.getInstance();
+const getComponentsVueMap = async (ast) => {
+    let components = [];
+    const importsStatic = ast?.module?.staticImports;
+    if (importsStatic) {
+        const vueImports = importsStatic.filter((item) => item.moduleRequest.value.endsWith('.vue'));
+        components = vueImports.map((item) => {
+            return item.entries.map((entry) => entry.localName.value);
+        });
+        components = components.flat();
+    }
+    return components;
+};
+/**
+ * Precompila un componente Vue.
+ * @param {string} data - El código del componente Vue.
+ * @param {string} source - La fuente del componente Vue.
+ * @returns {Promise<Object>} - Un objeto con el código precompilado o un error.
+ */
+export const preCompileVue = async (data, source, isProd = false) => {
+    try {
+        const fileName = path.basename(source).replace('.vue', '');
+        if (!data || data.trim().length === 0) {
+            return {
+                error: null,
+                data: 'export default {};',
+                lang: 'js',
+            };
+        }
+        if (!isProd) {
+            const { injectedData } = hmrInjectionCache.getOrGenerateHMRInjection(data, fileName);
+            data = injectedData;
+        }
+        const { descriptor, errors } = vueCompiler.parse(data, {
+            filename: fileName,
+            sourceMap: !isProd,
+            sourceRoot: path.dirname(source),
+            templateParseOptions: {
+                comments: !isProd, // ✨ Eliminar comentarios HTML del template
+            },
+        });
+        if (errors.length) {
+            throw new Error(`Error al analizar el componente Vue ${source}:\n${errors.map((e) => e.message).join('\n')}`);
+        }
+        const id = Math.random().toString(36).slice(2, 12);
+        const scopeId = descriptor.styles.some((s) => s.scoped)
+            ? `data-v-${id}`
+            : null;
+        // --- 1. Compilación del Script ---
+        let scriptContent;
+        let scriptLang = 'js';
+        let scriptBindings;
+        let scriptType;
+        if (descriptor.script || descriptor.scriptSetup) {
+            scriptType = descriptor.script ? 'script' : 'scriptSetup';
+            const scriptToCompile = descriptor.script || descriptor.scriptSetup;
+            const scriptCompileOptions = {
+                id,
+                isProd,
+                sourceMap: !isProd,
+                inlineTemplate: false, // Siempre compilar por separado para tener control
+                propsDestructure: true,
+                templateOptions: {
+                    compilerOptions: {
+                        mode: 'module',
+                        scopeId,
+                        prefixIdentifiers: true,
+                        hoistStatic: isProd,
+                        cacheHandlers: isProd,
+                        nodeTransforms: [],
+                        directiveTransforms: {},
+                    },
+                    transformAssetUrls: true,
+                },
+                customElement: false,
+            };
+            const compiledScriptResult = vueCompiler.compileScript(descriptor, scriptCompileOptions);
+            scriptContent = compiledScriptResult.content;
+            scriptLang =
+                scriptToCompile.lang?.toLowerCase() === 'ts' ||
+                    scriptToCompile.lang?.toLowerCase() === 'typescript'
+                    ? 'ts'
+                    : 'js';
+            scriptBindings = compiledScriptResult.bindings;
+        }
+        else {
+            scriptContent = 'export default {};';
+            scriptLang = 'js';
+        }
+        const ast = await parser(`temp.${scriptLang}`, scriptContent, scriptLang);
+        if (ast?.errors.length > 0) {
+            throw new Error(`Error al analizar el script del componente Vue ${source}:\n${ast.errors
+                .map((e) => e.message)
+                .join('\n')}`);
+        }
+        const components = await getComponentsVueMap(ast);
+        if (scriptBindings) {
+            Object.keys(scriptBindings).forEach(key => {
+                if (components.includes(key)) {
+                    delete scriptBindings[key];
+                }
+            });
+        } // --- 2. Compilación de la Plantilla (CORREGIDA) ---
+        let templateCode = '';
+        if (descriptor.template) {
+            const templateCompileOptions = {
+                source: descriptor.template.content,
+                filename: `${fileName}.vue`,
+                id,
+                scoped: !!scopeId,
+                slotted: descriptor.slotted,
+                isProd,
+                compilerOptions: {
+                    scopeId,
+                    mode: 'module',
+                    bindingMetadata: scriptBindings,
+                    prefixIdentifiers: true,
+                    hoistStatic: isProd,
+                    cacheHandlers: isProd,
+                    runtimeGlobalName: 'Vue',
+                    runtimeModuleName: '/node_modules/vue/dist/vue.esm-browser.js',
+                    whitespace: 'condense',
+                    ssr: false,
+                    comments: !isProd, // ✨ Eliminar comentarios HTML del template
+                    nodeTransforms: [],
+                    directiveTransforms: {},
+                },
+            };
+            const compiledTemplateResult = vueCompiler.compileTemplate(templateCompileOptions);
+            if (compiledTemplateResult.errors?.length > 0) {
+                logger.error('Template compilation errors:', compiledTemplateResult.errors);
+            }
+            templateCode = compiledTemplateResult.code;
+        }
+        else {
+            const chalkInstance = await loadChalk();
+            logger.warn(chalkInstance.yellow(`Advertencia: El componente Vue ${source} no tiene una sección de plantilla.`));
+        }
+        const finalCompiledScript = {
+            content: scriptContent,
+            lang: scriptLang,
+            type: scriptType,
+        };
+        const finalCompiledTemplate = {
+            code: templateCode,
+        };
+        let customBlocks = '';
+        if (descriptor.customBlocks.length > 0) {
+            customBlocks =
+                descriptor.customBlocks[0]?.content.slice(0, -1) ?? '';
+        }
+        // Compile styles
+        const compiledStyles = descriptor.styles.map((style) => {
+            const lang = style.lang?.toLowerCase();
+            let currentPreprocessLang = undefined;
+            if (lang === 'scss' ||
+                lang === 'sass' ||
+                lang === 'less' ||
+                lang === 'styl' ||
+                lang === 'stylus') {
+                currentPreprocessLang = lang;
+            }
+            return vueCompiler.compileStyle({
+                id,
+                source: style.content,
+                scoped: style.scoped,
+                preprocessLang: currentPreprocessLang,
+                isProd,
+                trim: true,
+                filename: `${fileName}.vue`,
+            });
+        });
+        const insertStyles = compiledStyles.length
+            ? `(function(){
+                    let styleTag = document.createElement('style');
+                    styleTag.setAttribute('data-v-${id}', '');
+                    styleTag.innerHTML = \`${compiledStyles.map((s) => s.code).join('\n')}\`;
+                    document.head.appendChild(styleTag);
+                })();`
+            : '';
+        let output = `
+            ${insertStyles}
+            ${finalCompiledScript.content}
+            ${finalCompiledTemplate.code}
+        `; // Sanitizar el nombre del archivo para crear un nombre de variable JavaScript válido
+        const sanitizedFileName = fileName.replace(/[^a-zA-Z0-9_$]/g, '').replace(/^[0-9]/, '_$&') ||
+            'component';
+        const componentName = `${sanitizedFileName}_component`; // Verificar si ya existe una propiedad 'name' en el output
+        const hasNameProperty = /name\s*:\s*['"`]/.test(output);
+        // Verificar si ya existe una propiedad 'components' en el output
+        const hasComponentsProperty = /components\s*:\s*\{/.test(output);
+        const exportComponent = `
+                __file: '${source}',
+                __name: '${fileName}',
+                ${hasNameProperty ? '' : `name: '${fileName}',`}
+                ${hasComponentsProperty
+            ? ''
+            : `components: {
+                    ${components.map(comp => `${comp}`).join(',\n                    ')}
+                },`}
+            `;
+        // MEJORAR: Manejo más robusto de export default
+        if (output.includes('export default {')) {
+            output = output.replace('export default {', `const ${componentName} = {
+                \n${exportComponent}
+                `);
+        }
+        else if (output.includes('export default defineComponent({')) {
+            output = output.replace('export default defineComponent({', `const ${componentName} = defineComponent({
+                \n${exportComponent}
+                `);
+        }
+        else if (output.includes('const default = /*@__PURE__*/_defineComponent({')) {
+            output = output.replace('const default = /*@__PURE__*/_defineComponent({', `const ${componentName} = /*@__PURE__*/_defineComponent({
+                \n${exportComponent}
+                `);
+        }
+        else if (output.includes('export default /*@__PURE__*/_defineComponent({')) {
+            output = output.replace('export default /*@__PURE__*/_defineComponent({', `const ${componentName} = /*@__PURE__*/_defineComponent({
+                \n${exportComponent}
+                `);
+        }
+        // MEJORAR: Manejo más robusto de render function
+        if (output.includes('export function render')) {
+            output = output.replace('export function render', `function render_${componentName}`);
+        }
+        // AÑADIR: Verificar si render fue generado correctamente
+        const hasRenderFunction = output.includes(`render_${componentName}`) ||
+            output.includes('function render(');
+        if (!hasRenderFunction && descriptor.template) {
+            logger.warn('Warning: No render function found in compiled output');
+        }
+        const finishComponent = `
+            ${hasRenderFunction ? `${componentName}.render = render_${componentName};` : ''}
+            ${scopeId ? `${componentName}.__scopeId = '${scopeId}';` : ''}
+            ${customBlocks}
+
+            export default ${componentName};        `;
+        output = `${output}\n${finishComponent}`;
+        return {
+            lang: finalCompiledScript.lang,
+            error: null,
+            data: output,
+        };
+    }
+    catch (error) {
+        logger.error('Vue compilation error:', error);
+        return {
+            lang: null,
+            error: error instanceof Error ? error : new Error(String(error)),
+            data: null,
+        };
+    }
+};
+// ✨ NUEVA FUNCIÓN: Exportar funcionalidades del cache HMR para uso externo
+export const getVueHMRCacheStats = () => {
+    return hmrInjectionCache.getStats();
+};
+export const clearVueHMRCache = () => {
+    hmrInjectionCache.clear();
+};
+export const cleanExpiredVueHMRCache = () => {
+    hmrInjectionCache.cleanExpired();
+};
+//# sourceMappingURL=vuejs.js.map