versacompiler 1.0.0

package/dist/services/acorn.js

@@ -0,0 +1,28 @@
+import * as Parser from 'acorn';
+/**
+ * Parses the given JavaScript code using Acorn and returns the Abstract Syntax Tree (AST).
+ *
+ * @param {string} data - The JavaScript code to be parsed.
+ * @returns {Promise<Object|null>} The parsed AST object if successful, or null if an error occurs.
+ * @throws {Error} If there is an error during parsing, it logs the error details and stack trace.
+ */
+export const checkSintaxysAcorn = async data => {
+    try {
+        const ast = Parser.parse(data, {
+            ecmaVersion: 2020,
+            sourceType: 'module',
+            locations: true,
+            ranges: true,
+        });
+
+        return { ast, error: null };
+    } catch (error) {
+        console.log(
+            chalk.red(
+                `🚩 :Error durante la compilación JS:${error.loc.line}:${error.loc.column}: ${error.message}\n`,
+            ),
+        );
+        console.error(error.stack); // Imprime la pila de llamadas para depuración
+        return { ast: null, error };
+    }
+};

package/dist/services/linter.js

@@ -0,0 +1,55 @@
+import { spawnSync } from 'node:child_process';
+import chalk from 'chalk';
+export const linter = async filePath => {
+    // 1. Calcula la ruta del binario
+    const oxlintExe = 'npx oxlint';
+    const args = filePath ? [filePath] : [];
+    // const args = filePath ? [`${filePath}`] : [];
+    const processOXC = spawnSync(
+        oxlintExe,
+        args, // Ejecuta en lote (ej: ['src/**/*.js', 'lib/*.ts', 'lib/*.vue'])
+        {
+            stdio: 'pipe',
+            encoding: 'utf-8', // Evita .toString()
+            shell: true, // ¡Más rápido sin shell!
+        },
+    );
+    if (processOXC.error) {
+        console.error(
+            chalk.red('🚨 Error ejecutando oxlint:', processOXC.error),
+        );
+        return false;
+    }
+
+    const output = processOXC.stdout.trim();
+    if (!output) {
+        console.log(chalk.green('✅ No se encontraron errores de linting.'));
+        return true;
+    }
+
+    // Regex optimizado (unificado)
+    const LINT_REGEX =
+        /([×x!]|warning)\s+([^:]+):\s+([^\n]+)\n\s+[,╭][-─]\[([^\]]+)\][\s\S]+?help:\s+([^\n]+)/gi;
+    const matches = output.matchAll(LINT_REGEX);
+    let errorFiles = 0; // Reiniciar el contador de archivos con errores
+    const errorList = []; // Lista de errores
+    for (const match of matches) {
+        const [_, severitySymbol, ruleId, message, filePath, help] = match;
+        const normalizedPath = filePath.trim().replace(/\\/g, '/');
+
+        errorFiles++;
+        errorList.push({
+            file: normalizedPath,
+            error: `${ruleId}: ${message.trim()}`,
+            proceso: 'Linting',
+            help: help.trim(),
+            severity: severitySymbol === '!' ? 'warning' : 'error',
+        });
+    }
+
+    return {
+        error: errorFiles > 0,
+        errorFiles,
+        errorList,
+    };
+};

package/dist/services/minify.js

@@ -0,0 +1,31 @@
+import { minify } from 'oxc-minify';
+
+/**
+ * Minifica el codigo JavaScript usando opciones especificas.
+ *
+ * @param {string} data - The JavaScript code to be minified.
+ * @param {string} filename - The name of the file containing the JavaScript code.
+ * @param {boolean} isProd - Indica si está en modo producción.
+ * @returns {Promise<Object>} The result of the minification process.
+ */
+export const minifyJS = async (data, filename, isProd = false) => {
+    try {
+        const options = {
+            compress: {
+                target: 'esnext',
+            },
+            mangle: {
+                toplevel: true,
+                debug: isProd ? false : true,
+            },
+            codegen: {
+                removeWhitespace: true,
+            },
+            sourcemap: false,
+        };
+        const result = await minify(filename, data, options);
+        return { code: result.code, error: null };
+    } catch (error) {
+        return { error, code: '' };
+    }
+};

package/dist/services/typescript.js

@@ -0,0 +1,89 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import * as ts from 'typescript';
+/**
+ * Precompila el código TypeScript proporcionado.
+ * @param {string} data - El código TypeScript a precompilar.
+ * @param {string} fileName - El nombre del archivo que contiene el código TypeScript.
+ *
+ * @returns {Promise<Object>} - Un objeto con el código precompilado o un error.
+ */
+export const preCompileTS = async (data, fileName, PATH_CONFIG_FILE) => {
+    try {
+        // Leer tsconfig.json
+        const tsConfigContent = await readFile(PATH_CONFIG_FILE, 'utf-8');
+        if (!tsConfigContent) {
+            throw new Error(
+                `No se pudo leer el archivo tsconfig.json en: ${PATH_CONFIG_FILE}`,
+            );
+        }
+
+        const tsConfig = JSON.parse(tsConfigContent);
+
+        // Obtener las opciones del compilador
+        const { compilerOptions } = tsConfig;
+
+        if (!compilerOptions) {
+            throw new Error(
+                'No se encontraron compilerOptions en tsconfig.json',
+            );
+        }
+
+        // Crear host de configuración de parseo
+        const parseConfigHost = {
+            useCaseSensitiveFileNames: ts.sys.useCaseSensitiveFileNames,
+            readDirectory: ts.sys.readDirectory,
+            fileExists: ts.sys.fileExists,
+            readFile: ts.sys.readFile,
+            onUnRecoverableConfigFileDiagnostic: diagnostic => {
+                throw new Error(
+                    ts.flattenDiagnosticMessageText(
+                        diagnostic.messageText,
+                        '\n',
+                    ),
+                );
+            },
+        };
+
+        // Parsear la configuración para que TS la entienda
+        const parsedConfig = ts.parseJsonConfigFileContent(
+            tsConfig,
+            parseConfigHost,
+            path.dirname(PATH_CONFIG_FILE),
+        );
+        if (parsedConfig.errors.length) {
+            const errors = parsedConfig.errors.map(diagnostic =>
+                ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'),
+            );
+            throw new Error(
+                `Error al parsear tsconfig.json:\n${errors.join('\n')}`,
+            );
+        }
+
+        // Transpilar el código
+        const result = ts.transpileModule(data, {
+            compilerOptions: parsedConfig.options,
+            reportDiagnostics: true,
+            fileName,
+        });
+        if (result.diagnostics && result.diagnostics.length > 0) {
+            const errors = result.diagnostics.map(diagnostic => {
+                if (diagnostic.file) {
+                    const { line, character } =
+                        diagnostic.file.getLineAndCharacterOfPosition(
+                            diagnostic.start,
+                        );
+                    return `${ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n')} - ${diagnostic.file.fileName} (${line + 1},${character + 1})`;
+                } else {
+                    return `${ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n')}`;
+                }
+            });
+
+            throw new Error(`${errors.join('\n')}`);
+        }
+
+        return { error: null, data: result.outputText };
+    } catch (error) {
+        return { error, data: null };
+    }
+};

package/dist/services/vuejs.js

@@ -0,0 +1,235 @@
+import * as vCompiler from 'vue/compiler-sfc';
+import path from 'node:path';
+
+const getComponentsVue = async data => {
+    let components = [];
+
+    const importRegExp = /import\s+[\s\S]*?\s+from\s+['"].*['"];/g;
+
+    const _a = data.replace(importRegExp, match => {
+        const ruta = match.match(/from\s+['"](.*)['"];/)[1];
+
+        if (ruta.endsWith('.vue')) {
+            const resultVue = match.match(/from\s+['"](.+\/(\w+))\.vue['"];/);
+            if (resultVue) {
+                const fullPath = resultVue[1].replace('.vue', '');
+                const fileName = resultVue[2];
+                components.push(fileName);
+                return `import ${fileName} from '${fullPath}.js';`;
+            }
+        }
+        return match; // Devolver el match original si no se cumple ninguna condición
+    });
+
+    return components;
+};
+
+/**
+ * Compila un bloque personalizado.
+ * @param {Object} block - El bloque personalizado a compilar.
+ * @param {string} source - La fuente del bloque.
+ */
+const _compileCustomBlock = async (_block, _source) => {};
+
+/**
+ * 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', '');
+        const { descriptor, errors } = vCompiler.parse(data, {
+            filename: fileName,
+            sourceMap: false,
+            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;
+        const templateOptions = {
+            sourceMap: false,
+            filename: `${fileName}.vue`,
+            id,
+            scoped: !!scopeId,
+            slotted: descriptor.slotted,
+            source: descriptor.template?.content,
+            comments: isProd ? false : 'all',
+            isProd,
+            compilerOptions: {
+                scopeId,
+                mode: 'module',
+                isProd,
+                inlineTemplate: true,
+                prefixIdentifiers: true,
+                hoistStatic: true,
+                cacheHandlers: true,
+                runtimeGlobalName: 'Vue',
+                runtimeModuleName: 'vue',
+                optimizeBindings: true,
+                runtimeContextBuiltins: true,
+                runtimeDirectives: true,
+                runtimeVNode: true,
+                runtimeProps: true,
+                runtimeSlots: true,
+                runtimeComponents: true,
+                runtimeCompiledRender: true,
+                whitespace: 'condense',
+                ssrCssExternal: true,
+                ssr: false,
+                nodeTransforms: [],
+                directiveTransforms: {},
+            },
+        };
+
+        // Compile script
+        let compiledScript;
+        if (descriptor.script || descriptor.scriptSetup) {
+            const scriptDescriptor =
+                descriptor.script || descriptor.scriptSetup;
+
+            compiledScript = {
+                content: descriptor.script
+                    ? scriptDescriptor.content
+                    : vCompiler.compileScript(descriptor, {
+                          id,
+                          templateOptions,
+                      }).content,
+                lang:
+                    scriptDescriptor.lang === 'ts' ||
+                    scriptDescriptor.lang === 'typescript'
+                        ? 'ts'
+                        : 'js',
+            };
+        } else {
+            compiledScript = { content: `export default {}`, lang: 'js' };
+        }
+
+        // Compile template y obtener el contenido del template
+        const compiledTemplate = descriptor.template?.content // Usar optional chaining
+            ? vCompiler.compileTemplate({
+                  ...templateOptions,
+              })
+            : { code: '' }; // Manejar caso sin template
+        if (!descriptor.template?.content) {
+            console.warn(
+                chalk.yellow(
+                    `Advertencia: El componente Vue ${source} no tiene una sección de plantilla.`,
+                ),
+            );
+        }
+
+        let customBlocks = '';
+        if (descriptor.customBlocks.length > 0) {
+            // eliminar el ultimo caracter que es un punto y coma
+            customBlocks =
+                descriptor?.customBlocks[0].content.slice(0, -1) ?? '';
+        }
+
+        // Compile styles Y obtener el contenido de los estilos
+        const compiledStyles = descriptor.styles.map(style =>
+            vCompiler.compileStyle({
+                id,
+                source: style.content,
+                scoped: style.scoped,
+                preprocessLang: style.lang,
+                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);
+                })();`
+            : '';
+
+        // Combine all parts into a single module
+        let output = `
+            ${insertStyles}
+            ${compiledScript.content}
+            ${compiledTemplate.code}
+        `;
+        //añardir instancia de app
+
+        // output = `${appImport}${output}`;
+
+        const componentName = `${fileName}_component`;
+        const components = await getComponentsVue(data);
+        const exportComponent = `
+                __file: '${source}',
+                __name: '${fileName}',
+                name: '${fileName}',
+                components: { ${components.join(', ')} },
+            `;
+
+        // quitamos export default y añadimos el nombre del archivo
+        if (output.includes('export default {')) {
+            output = output.replace(
+                'export default {',
+                `const ${componentName} = {
+                \n${exportComponent}
+                `,
+            );
+        } else {
+            output = output.replace(
+                'export default /*@__PURE__*/_defineComponent({',
+                `const ${componentName} = /*@__PURE__*/_defineComponent({
+                \n${exportComponent}
+                `,
+            );
+        }
+
+        // reemplazamos cuando usamos script setup
+        if (descriptor.scriptSetup) {
+            output = output.replaceAll(/_ctx\.(?!\$)/g, '$setup.');
+            output = output.replace(
+                'export function render(_ctx, _cache) {',
+                `function render(_ctx, _cache, $props, $setup, $data, $options) {`,
+            );
+        } else {
+            output = output.replace(
+                'export function render(_ctx, _cache) {',
+                `function render(_ctx, _cache, $props, $setup, $data, $options) {`,
+            );
+        }
+
+        const finishComponent = `
+            ${componentName}.render = render;
+            ${scopeId ? `${componentName}.__scopeId = '${scopeId}';` : ''}
+            ${customBlocks}
+
+            export default ${componentName};
+        `;
+
+        output = `${output}\n${finishComponent}`;
+
+        // await writeFile(
+        //     `./public/dashboard/js/${fileName}-temp.js`,
+        //     output,
+        //     'utf-8',
+        // );
+        // await unlink(`./public/dashboard/js/${fileName}-temp.js`);
+
+        return {
+            lang: compiledScript.lang,
+            error: null,
+            data: output,
+        };
+    } catch (error) {
+        return { lang: null, error, data: null }; // Devolver error en objeto
+    }
+};

package/dist/utils/utils.js

@@ -0,0 +1,26 @@
+import path from 'node:path';
+/**
+ * Converts a 24-hour time string to a 12-hour time string with AM/PM.
+ *
+ * @param {number} timing - The value of the timing en miliseconds.
+ * @returns {string} the timing in ms, seconds, minutes or hours.
+ */
+export const showTimingForHumans = timing => {
+    if (timing < 1000) {
+        return `${timing} ms`;
+    } else if (timing < 60000) {
+        return `${timing / 1000} s`;
+    } else if (timing < 3600000) {
+        return `${timing / 60000} min`;
+    } else {
+        return `${timing / 3600000} h`;
+    }
+};
+
+/**
+ * Mapea una ruta de origen a una ruta de destino en el directorio de distribución.
+ * @param {string} ruta - La ruta de origen.
+ * @returns {Promise<string>} - La ruta mapeada en el directorio de distribución.
+ */
+export const mapRuta = async (ruta, PATH_DIST) =>
+    path.join(PATH_DIST, path.relative(PATH_SOURCE, ruta));

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "versacompiler",
+    "version": "1.0.0",
+    "description": "Una herramienta para compilar y minificar archivos .vue, .js y .ts para proyectos de Vue 3 con soporte para TypeScript.",
+    "main": "dist/index.js",
+    "bin": {
+        "versacompiler": "dist/index.js"
+    },
+    "files": [
+        "dist",
+        "LICENSE",
+        "README.md"
+    ],
+    "type": "module",
+    "scripts": {
+        "dev": "node --watch dist/index.js",
+        "compile": "node dist/index.js",
+        "compile-dev": "node dist/index.js --all",
+        "compile-prod": "node dist/index.js --all --prod"
+    },
+    "keywords": [
+        "vue",
+        "compiler",
+        "minifier",
+        "vue3",
+        "versacompiler",
+        "typescript"
+    ],
+    "author": "Jorge Jara H (kriollone@gmail.com)",
+    "license": "MIT",
+    "dependencies": {
+        "chalk": "5.4.1",
+        "chokidar": "^4.0.3",
+        "oxc-minify": "^0.67.0",
+        "acorn": "^8.14.1",
+        "vue": "3.5.13",
+        "get-port": "^7.1.0",
+        "typescript": "^5.8.3",
+        "oxlint": "^0.16.9",
+        "browser-sync": "^3.0.4"
+    },
+    "devDependencies": {
+        "prettier": "3.5.3",
+        "@types/node": "^22.15.3",
+        "code-tag": "^1.2.0"
+    }
+}