babel-baseline-preset

Preset de Babel que transpila (y añade polyfills cuando procede) solo para las features que NO están en el baseline del año configurado. Contribute here: https://github.com/RamiroCS-hub/babel-baseline-preset

Características clave

• Baseline por año vía datos de web-features.
• Selección automática de transforms/polyfills con @babel/preset-env + core-js.
• Whitelist dinámica derivada de módulos reales de core-js (evita hardcode).
• Limpieza opcional de polyfills redundantes ya considerados baseline.
• Arquitectura modular (utils) para facilitar mantenimiento.

Uso rápido

En tu .babelrc o configuración de Babel:

{
  "presets": [["./lib", { "year": 2023 }]]
}

Si no se especifica year, se usará el año actual automáticamente.

Instalación

npm install --save-dev babel-baseline-preset @babel/core @babel/preset-env core-js web-features

Opciones del preset

| Opción | Tipo | Default | Descripción | |--------|------|---------|-------------| | year | number | Año actual | Año de referencia para baseline. | | forceInclude | string[] | [] | Lista de claves (ej. es.array.flat) a forzar en include. | | debug | boolean | false | Log adicional (whitelist, conteos). | | stripBaselinePolyfills | boolean | true | Si true, elimina require/import de polyfills cuya feature ya es baseline. |

Flujo interno (resumen)

1. Obtiene features baseline <= year (campo baseline_high_date).
2. Construye baselineSet con sus nombres.
3. Genera/lee whitelist de módulos (es.*) desde core-js (o generated-whitelist.json).
4. Para cada feature NO baseline aplica mapeo heurístico → es.<tipo>.<método>.
5. Filtra las que están en la whitelist → include.
6. Determina si necesita corejs: { version: 3, proposals: true } (si replaceAll, Promise.any, etc. están fuera del baseline).
7. Plugin interno elimina polyfills redundantes si la feature ya es baseline (stripBaselinePolyfills).

Generación dinámica de whitelist

El preset evita hardcodear una lista de features soportadas. En su lugar:

1. Se puede ejecutar: npm run generate:whitelist
2. Ese script (scripts/generate-whitelist.js) cruza:

• Módulos es.* de core-js/modules
• Plugins/mapping internos de @babel/preset-env

3. Genera el archivo generated-whitelist.json (cacheable en CI)
4. En runtime el preset:

• Intenta cargar generated-whitelist.json
• Si no existe, genera una intersección mínima en caliente (fallback)

Polyfills y proposals

Se configura useBuiltIns: "usage" + corejs: 3, por lo que:

• Métodos como String.replaceAll, Array.flat, Promise.any, etc. añaden polyfill si no están en baseline y Babel puede mapearlos.
• Sintaxis (ej: optional chaining) se maneja vía plugins internos.

Ejemplo baseline 2020 vs 2024

Código de entrada (fragmento simplificado):

const str = 'foo-bar';
str.replaceAll('-', '/');
Promise.any([
  Promise.reject('x'),
  Promise.resolve(42)
]).then(console.log);

| Baseline | Resultado clave | |----------|-----------------| | 2020 | Inserta esnext.string.replace-all, esnext.promise.any, esnext.aggregate-error (según uso). | | 2024 | No inserta los polyfills anteriores (limpieza + proposals off). |

Scripts

npm run build               # Copia src -> lib
npm run generate:whitelist  # Genera generated-whitelist.json
npm run test:run            # Ejecuta pruebas de demostración

Estructura de código (simplificada)

src/
  index.js                 # Orquestación del preset
  utils/
    baseline.js            # getBaselineFeatures, buildBaselinePolyfillModules, mapping re-export
    mapping.js             # mapBaselineToPresetEnv heurístico
    whitelist.js           # loadGeneratedWhitelist
    safeRequire.js         # (reservado para cargas opcionales futuras)

Próximos pasos sugeridos

• Añadir pruebas automatizadas (Jest) para baseline diferenciados.
• Mejorar mapeo heurístico (casos adicionales y métodos con punto: Promise.any).
• Cache de whitelist por hash de versión de core-js.
• Reporte JSON con lista exacta de polyfills eliminados por baseline.
• Opción para generar targets browserslist simulados a partir del baseline.

MIT License