Publicada versión 7.21.0: Modificadores RegExp en línea, TypeScript 5.0 y actualizaciones de Decorators

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

¡Acabamos de publicar Babel 7.21.0!

Babel ahora soporta la propuesta de Modificadores RegExp en línea, la última versión de la propuesta de Decorators, y la nueva sintaxis de TypeScript 5.0.

Puedes consultar el registro de cambios completo en GitHub.

Si tú o tu empresa quieren apoyar a Babel y la evolución de JavaScript, pero no están seguros de cómo, pueden donarnos en nuestro Open Collective y, aún mejor, trabajar directamente con nosotros en la implementación de nuevas propuestas de ECMAScript! Como proyecto impulsado por voluntarios, dependemos del apoyo de la comunidad para financiar nuestros esfuerzos en dar soporte a la amplia variedad de usuarios de JavaScript. ¡Contáctanos en team@babeljs.io si quieres conversar más!

Destacados

Modificadores RegExp en línea

La propuesta en Etapa 3 de Modificadores RegExp en línea permite habilitar o deshabilitar los modificadores i, m y s para partes específicas de una expresión regular, sin afectar otras secciones.

Puedes usar la sintaxis (?enableFlags:subPattern) para activar flags, (?-disableFlags:subPattern) para desactivarlos, y (?enableFlags-disableFlags:subPattern) para combinar ambas acciones simultáneamente. Considera el grupo no capturador (?:subPattern) como un caso especial donde no se modifican flags.

Por ejemplo, /(?i:a)a/ coincide con una a ignorando su capitalización, seguida de una a minúscula:

JavaScript

/(?i:a)a/.test("aa"); // true
/(?i:a)a/.test("Aa"); // true
/(?i:a)a/.test("aA"); // false

/a(?-i:a)/i es equivalente: la expresión regular es insensible a mayúsculas, excepto para la segunda a que debe ser minúscula.

Puedes activar esta propuesta instalando el paquete @babel/plugin-proposal-regexp-modifiers y agregándolo a tu configuración de Babel:

babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    // Add this!
    "@babel/plugin-proposal-regexp-modifiers"
  ]
}

Actualizaciones de Decorators

TC39, el comité que estandariza JavaScript, aprobó recientemente cambios en la propuesta de Decorators basados en retroalimentación del equipo de TypeScript.

• Los decoradores en clases exportadas ahora pueden colocarse antes o después de la palabra clave export, pero no en ambas posiciones simultáneamente:

  JavaScript

  // valid
  @dec
  export class A {}
  
  // valid
  export @dec class B {}
  
  // invalid
  @dec
  export @dec class C {}

  Esta flexibilización busca simplificar la migración desde la versión "legacy" de decoradores, reduciendo las diferencias sintácticas.

• Los métodos del objeto context.access proporcionado a los decoradores ahora esperan el objeto destino como primer parámetro, en lugar de usar el receptor this:

  JavaScript

  let accessX;
  
  function dec(desc, context) {
    accessX = context.access;
    return dec;
  }
  
  class A {
    @dec #x = 1;
  }
  
  // old semantics
  accessX.get.call(new A) === 1;
  
  // new semantics
  accessX.get(new A) === 1;

• context.access incluye un nuevo método .has para verificar si un objeto contiene el elemento correspondiente. Continuando el ejemplo anterior:

  JavaScript

  // #x in new A
  accessX.has(new A) === true;

Puedes habilitar esta nueva versión de la propuesta de decoradores configurando la opción version de "@babel/plugin-proposal-decorators" como "2023-01":

babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-01" }]
  ]
}

También puedes probar la nueva propuesta de decoradores en el REPL online de Babel, activando el preset "Stage 3" (o inferior) en la barra lateral y seleccionando la versión 2023-01 de los decoradores.

TypeScript 5.0

TypeScript 5.0, actualmente en versión beta preliminar, introduce dos nuevas características sintácticas:

• Modificadores const para parámetros de tipo

  TypeScript

  function getName<const T extends { name: string }>(user: T): T["name"] {
      return user.name;
  }
  
  let name = getName({ name: "Babel" });
  //  ^? inferred type: "Babel", instead of just string.

• Declaraciones export type *

  TypeScript

  export type * from "./mod";
  export type * as ns from "./mod";

  Babel utiliza esta nueva sintaxis para eliminar de forma segura la declaración de re-export al compilar de TypeScript a JavaScript.

Adicionalmente, TypeScript 5.0 introduce soporte para la propuesta estándar de Decoradores, que puedes activar en Babel usando @babel/plugin-proposal-decorators.

¡Puedes leer más sobre las nuevas características de TypeScript en su publicación de lanzamiento!

Soporte experimental para archivos de configuración .cts

Si instalaste @babel/preset-typescript o ejecutas Babel usando ts-node, ahora puedes usar babel.config.cts como archivo de configuración de Babel escrito en TypeScript y CommonJS. Puedes leer más sobre esto en la documentación.

Todavía no es posible usar archivos babel.config.ts y babel.config.mts, pendiente de la estabilización de la API del cargador ESM de Node.js.

Mejoras en los source maps

Los source maps generados por Babel ahora admiten Friendly Call Frames, que muestran nombres más legibles para funciones transformadas en las herramientas de desarrollo.

Además, @babel/generator ahora acepta source maps de entrada generados por otras herramientas en el pipeline de compilación: esto permite fusionar correctamente los source maps incluso al usar @babel/generator directamente sin @babel/core, y mejora el rendimiento general de la fusión de source maps cuando se usa Babel.