versacompiler 2.0.7 → 2.0.8

package/dist/compiler/vuejs.js

@@ -1,392 +1,37 @@
-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),
-        });
-        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,
-                    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
+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||=(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||=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['"]/,o=a.test(e),s=`
+            ${o?``:`import { ref } from "/node_modules/vue/dist/vue.esm-browser.js";`}
+            const versaComponentKey = ref(0);
+            `,c,l=e.includes(`<script`);return c=l?e.replace(/(<script.*?>)/,`$1${s}`):`<script setup lang="ts">${s}<\/script>/n`+e,c=c.replace(/(<template[^>]*>[\s\S]*?)(<(\w+)([^>]*?))(\/?>)/,(e,t,n,r,i,a)=>{if(i.includes(`:key=`)||i.includes(`key=`))return e;let o=a===`/>`;return o?`${t}<${r}${i} :key="versaComponentKey" />`:`${t}<${r}${i} :key="versaComponentKey">`}),this.cache.set(r,{contentHash:n,injectedCode:c,hasRefImport:o,timestamp:Date.now()}),this.evictIfNeeded(),{injectedData:c,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);let t=e.slice(0,e.length-this.MAX_CACHE_SIZE);t.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;if(n){let e=n.filter(e=>e.moduleRequest.value.endsWith(`.vue`));t=e.map(e=>e.entries.map(e=>e.localName.value)),t=t.flat()}return 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 = \`${T.map(e=>e.code).join(`
+`)}\`;
+                    document.head.appendChild(styleTag);
+                })();`:``,D=`
+            ${E}
+            ${S.content}
+            ${C.code}
+        `,O=c.replace(/[^a-zA-Z0-9_$]/g,``).replace(/^[0-9]/,`_$&`)||`component`,k=`${O}_component`,A=/name\s*:\s*['"`]/.test(D),j=/components\s*:\s*\{/.test(D),M=`
+                __file: '${n}',
+                __name: '${c}',
+                ${A?``:`name: '${c}',`}
+                ${j?``:`components: {
+                    ${b.map(e=>`${e}`).join(`,
+                    `)}
+                },`}
+            `;D.includes(`export default {`)?D=D.replace(`export default {`,`const ${k} = {
+                \n${M}
+                `):D.includes(`export default defineComponent({`)?D=D.replace(`export default defineComponent({`,`const ${k} = defineComponent({
+                \n${M}
+                `):D.includes(`const default = /*@__PURE__*/_defineComponent({`)?D=D.replace(`const default = /*@__PURE__*/_defineComponent({`,`const ${k} = /*@__PURE__*/_defineComponent({
+                \n${M}
+                `):D.includes(`export default /*@__PURE__*/_defineComponent({`)&&(D=D.replace(`export default /*@__PURE__*/_defineComponent({`,`const ${k} = /*@__PURE__*/_defineComponent({
+                \n${M}
+                `)),D.includes(`export function render`)&&(D=D.replace(`export function render`,`function render_${k}`));let N=D.includes(`render_${k}`)||D.includes(`function render(`);!N&&d.template&&i.warn(`Warning: No render function found in compiled output`);let P=`
+            ${N?`${k}.render = render_${k};`:``}
+            ${m?`${k}.__scopeId = '${m}';`:``}
+            ${w}
+
+            export default ${k};        `;return D=`${D}\n${P}`,{lang:S.lang,error:null,data:D}}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()};