vanilla-builder 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-builder",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Zero-config bundler, minifier and obfuscator for vanilla HTML, CSS and JavaScript sites. Detects every dependency, verifies the output and never loses a file.",
   "type": "module",
   "main": "src/index.js",
@@ -24,7 +24,8 @@
     "test:browser": "node --test test/browser.test.js",
     "test:node16": "node test/unit.test.js && node test/build.test.js",
     "check": "node --test test/unit.test.js test/build.test.js test/browser.test.js",
-    "prepublishOnly": "npm test"
+    "prepublishOnly": "npm test",
+    "bench": "node bench/run.mjs"
   },
   "keywords": [
     "bundler",
@@ -36,7 +37,13 @@
     "css",
     "javascript",
     "build",
-    "esbuild"
+    "esbuild",
+    "typescript",
+    "obfuscation",
+    "minifier",
+    "browserslist",
+    "image-optimization",
+    "github-action"
   ],
   "author": "MarioACo",
   "license": "MIT",
@@ -59,8 +66,10 @@
     "picomatch": "4.0.7"
   },
   "peerDependencies": {
+    "browserslist": "^4.21.0",
     "javascript-obfuscator": ">=4.1.1 <6",
-    "terser": "^5.31.0"
+    "terser": "^5.31.0",
+    "sharp": ">=0.33.0"
   },
   "peerDependenciesMeta": {
     "javascript-obfuscator": {
@@ -68,11 +77,19 @@
     },
     "terser": {
       "optional": true
+    },
+    "browserslist": {
+      "optional": true
+    },
+    "sharp": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "browserslist": "4.29.4",
     "javascript-obfuscator": "5.9.0",
     "playwright-core": "1.63.0",
+    "sharp": "0.35.5",
     "terser": "5.51.2"
   },
   "overrides": {

package/src/browsers.js

@@ -0,0 +1,128 @@
+// Navegadores objetivo: lee la consulta de browserslist del proyecto y la convierte en "targets" de esbuild.
+// Con ellos esbuild añade los prefijos CSS necesarios (-webkit-…) y adapta la sintaxis moderna de CSS y JS.
+import fs from 'node:fs';
+import path from 'node:path';
+import { importOptional } from './optional.js';
+import { BuildError } from './util.js';
+import { L } from './i18n.js';
+
+// Nombres de browserslist → motores de esbuild. Los navegadores móviles usan el motor de su versión de escritorio.
+const ENGINES = {
+  chrome: 'chrome',
+  and_chr: 'chrome',
+  edge: 'edge',
+  firefox: 'firefox',
+  and_ff: 'firefox',
+  safari: 'safari',
+  ios_saf: 'ios',
+  opera: 'opera',
+};
+
+/** .browserslistrc: las líneas sin sección, o la sección [production] si existe (una compilación es para producción). */
+function readRc(file) {
+  const sections = new Map([['', []]]);
+  let current = '';
+  for (const raw of fs.readFileSync(file, 'utf8').split(/\r?\n/)) {
+    const line = raw.replace(/#.*/, '').trim();
+    if (!line) continue;
+    const header = /^\[(.+)\]$/.exec(line);
+    if (header) {
+      // Una cabecera puede nombrar varios entornos: [production staging]
+      current = header[1].split(/\s+/).includes('production') ? 'production' : header[1];
+      if (!sections.has(current)) sections.set(current, []);
+      continue;
+    }
+    sections.get(current).push(line);
+  }
+  const chosen = sections.get('production')?.length ? sections.get('production') : sections.get('');
+  return chosen.join(', ');
+}
+
+function fromPackageField(value) {
+  if (typeof value === 'string' || Array.isArray(value)) return value;
+  if (value && typeof value === 'object') return value.production ?? value.defaults ?? null;
+  return null;
+}
+
+/**
+ * Busca la consulta de navegadores: la opción "browsers", un .browserslistrc o el campo "browserslist"
+ * del package.json más cercano (sin salir del proyecto que contiene ese package.json).
+ * @returns {{query: string|string[], from: string}|null}
+ */
+export function findBrowsersQuery(root, setting) {
+  if (setting === false) return null;
+  if ((typeof setting === 'string' && setting !== 'auto') || Array.isArray(setting)) return { query: setting, from: 'browsers' };
+  for (let dir = root, i = 0; i < 20; i++) {
+    const rc = path.join(dir, '.browserslistrc');
+    if (fs.existsSync(rc)) return { query: readRc(rc), from: path.relative(root, rc) || '.browserslistrc' };
+    const pkgFile = path.join(dir, 'package.json');
+    if (fs.existsSync(pkgFile)) {
+      try {
+        const query = fromPackageField(JSON.parse(fs.readFileSync(pkgFile, 'utf8')).browserslist);
+        if (query) return { query, from: `${path.relative(root, pkgFile) || 'package.json'} (browserslist)` };
+      } catch {
+        // package.json ilegible: sin pistas
+      }
+      return null; // el package.json marca el límite del proyecto
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+
+const cmpVersion = (a, b) => {
+  const pa = a.split('.').map(Number);
+  const pb = b.split('.').map(Number);
+  for (let i = 0; i < Math.max(pa.length, pb.length); i++) {
+    const d = (pa[i] ?? 0) - (pb[i] ?? 0);
+    if (d) return d;
+  }
+  return 0;
+};
+
+/** Convierte la lista de browserslist ("chrome 109", "ios_saf 18.5-18.7"…) en targets de esbuild (versión mínima por motor). */
+export function toEsbuildTargets(list) {
+  const min = new Map();
+  const ignored = new Set();
+  for (const item of list) {
+    const [name, version = ''] = item.split(' ');
+    const engine = ENGINES[name];
+    const v = version.split('-')[0];
+    if (!engine || !/^\d+(\.\d+)*$/.test(v)) {
+      ignored.add(name);
+      continue;
+    }
+    if (!min.has(engine) || cmpVersion(v, min.get(engine)) < 0) min.set(engine, v);
+  }
+  return { targets: [...min].map(([engine, v]) => `${engine}${v}`).sort(), ignored: [...ignored].sort() };
+}
+
+/**
+ * Resuelve los navegadores del proyecto.
+ * @returns {Promise<null | {targets: string[], from: string, ignored: string[]} | {missing: true, from: string}>}
+ */
+export async function resolveBrowsers(root, setting) {
+  const found = findBrowsersQuery(root, setting);
+  if (!found) return null;
+  let browserslist;
+  try {
+    const mod = await importOptional('browserslist', root, L('para usar los navegadores objetivo', 'to use target browsers'));
+    browserslist = mod.default ?? mod;
+  } catch (err) {
+    // Pedido a propósito en la configuración: es un error. Encontrado en el proyecto: se avisa y se sigue como antes.
+    if (found.from === 'browsers') throw err;
+    return { missing: true, from: found.from };
+  }
+  let list;
+  try {
+    list = browserslist(found.query, { path: root });
+  } catch (err) {
+    throw new BuildError(
+      L(`Consulta de navegadores no válida en ${found.from}: ${err.message}`, `Invalid browsers query in ${found.from}: ${err.message}`),
+    );
+  }
+  const { targets, ignored } = toEsbuildTargets(list);
+  return { targets, from: found.from, ignored };
+}

package/src/budgets.js

@@ -0,0 +1,77 @@
+// Presupuestos de tamaño: límites por archivo de salida (por patrón) o para el total.
+//   "budgets": { "js/**/*.js": "50 KB", "css/app.css": "20 KB gzip", "total": "1 MB brotli" }
+// Si algo se pasa, la compilación falla antes de tocar outDir (como la verificación).
+import picomatch from 'picomatch';
+import { formatBytes } from './util.js';
+import { L } from './i18n.js';
+
+const UNITS = { b: 1, kb: 1024, mb: 1024 * 1024 };
+const SIZE = /^\s*(\d+(?:\.\d+)?)\s*(b|kb|mb)?\s*(gzip|brotli)?\s*$/i;
+
+/** "50 KB gzip" → { bytes: 51200, measure: 'gzip' }; un número se toma en bytes. Devuelve null si no es válido. */
+export function parseBudget(value) {
+  if (typeof value === 'number' && value > 0) return { bytes: Math.floor(value), measure: 'size' };
+  const m = typeof value === 'string' ? SIZE.exec(value) : null;
+  if (!m) return null;
+  return { bytes: Math.round(Number(m[1]) * UNITS[(m[2] ?? 'b').toLowerCase()]), measure: (m[3] ?? 'size').toLowerCase() };
+}
+
+/** Errores de validación de la opción "budgets" (lista vacía si es correcta). */
+export function validateBudgets(budgets) {
+  if (budgets === false || budgets == null) return [];
+  if (typeof budgets !== 'object' || Array.isArray(budgets))
+    return [L('"budgets" debe ser un objeto { "patrón": "50 KB" }.', '"budgets" must be an object { "pattern": "50 KB" }.')];
+  return Object.entries(budgets)
+    .filter(([, v]) => !parseBudget(v))
+    .map(([k, v]) =>
+      L(
+        `"budgets.${k}": ${JSON.stringify(v)} no es un tamaño válido (ej. "50 KB", "20 KB gzip", "1 MB brotli").`,
+        `"budgets.${k}": ${JSON.stringify(v)} is not a valid size (e.g. "50 KB", "20 KB gzip", "1 MB brotli").`,
+      ),
+    );
+}
+
+const label = (m) => (m === 'size' ? '' : ` ${m}`);
+
+/**
+ * Comprueba los presupuestos contra las filas del informe de tamaños.
+ * @returns {{violations: string[], unmatched: string[], checked: number}}
+ */
+export function checkBudgets(budgets, report) {
+  const violations = [];
+  const unmatched = [];
+  let checked = 0;
+  if (!budgets) return { violations, unmatched, checked };
+  const rows = report.rows;
+  const measureOf = (row, measure) => (measure === 'size' ? row.size : (row[measure] ?? row.size));
+  for (const [pattern, value] of Object.entries(budgets)) {
+    const b = parseBudget(value);
+    if (pattern === 'total') {
+      checked++;
+      const total = rows.reduce((sum, r) => sum + measureOf(r, b.measure), 0);
+      if (total > b.bytes)
+        violations.push(
+          L(
+            `total${label(b.measure)}: ${formatBytes(total)} supera el presupuesto de ${formatBytes(b.bytes)}`,
+            `total${label(b.measure)}: ${formatBytes(total)} exceeds the budget of ${formatBytes(b.bytes)}`,
+          ),
+        );
+      continue;
+    }
+    const isMatch = picomatch(pattern.replace(/^\.\//, ''), { dot: true, nocase: true });
+    const matched = rows.filter((r) => isMatch(r.file));
+    if (!matched.length) unmatched.push(pattern);
+    for (const r of matched) {
+      checked++;
+      const size = measureOf(r, b.measure);
+      if (size > b.bytes)
+        violations.push(
+          L(
+            `${r.file}${label(b.measure)}: ${formatBytes(size)} supera el presupuesto de ${formatBytes(b.bytes)} ("${pattern}")`,
+            `${r.file}${label(b.measure)}: ${formatBytes(size)} exceeds the budget of ${formatBytes(b.bytes)} ("${pattern}")`,
+          ),
+        );
+    }
+  }
+  return { violations, unmatched, checked };
+}