Version 7.21.0 : Modificateurs RegExp inline, TypeScript 5.0 et mises à jour des décorateurs

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Nous venons de publier Babel 7.21.0 !

Babel prend désormais en charge la proposition Inline RegExp modifiers, la dernière version de la proposition Decorators, et la nouvelle syntaxe TypeScript 5.0.

Vous pouvez consulter le journal complet des modifications sur GitHub.

Si vous ou votre entreprise souhaitez soutenir Babel et l'évolution de JavaScript sans savoir comment contribuer, vous pouvez nous faire un don via notre Open Collective ou, mieux encore, collaborer directement avec nous à l'implémentation de nouvelles propositions ECMAScript ! En tant que projet géré par des bénévoles, nous dépendons du soutien communautaire pour financer nos efforts visant à accompagner la diversité des utilisateurs JavaScript. Contactez-nous à team@babeljs.io pour en discuter !

Principales fonctionnalités

Modificateurs RegExp inline

La proposition de Stage 3 Inline RegExp modifiers permet d'activer ou désactiver les drapeaux i, m et s pour une partie d'une expression régulière, sans affecter les autres parties.

Utilisez la syntaxe (?enableFlags:subPattern) pour activer des drapeaux, (?-disableFlags:subPattern) pour les désactiver, et (?enableFlags-disableFlags:subPattern) pour activer certains et en désactiver d'autres simultanément. Considérez le groupe non-capturant (?:subPattern) comme un cas particulier où aucun drapeau n'est modifié.

Par exemple, /(?i:a)a/ correspond à un a indépendamment de sa casse, suivi d'un a minuscule :

JavaScript

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

/a(?-i:a)/i est équivalent : l'expression régulière ignore la casse, sauf pour le second a qui doit être minuscule.

Activez cette proposition en installant le package @babel/plugin-proposal-regexp-modifiers et en l'ajoutant à votre configuration Babel :

babel.config.json

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

Mises à jour des décorateurs

TC39, le comité de standardisation de JavaScript, a récemment approuvé des modifications à la proposition Decorators suite aux retours de l'équipe TypeScript.

• Les décorateurs sur les classes exportées peuvent désormais apparaître avant ou après le mot-clé export, mais pas aux deux endroits simultanément :

  JavaScript

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

  Cette restriction assouplie vise à simplifier la migration depuis la version "legacy" des décorateurs, en réduisant les différences syntaxiques.

• Les méthodes de l'objet context.access fourni aux décorateurs attendent l'objet cible comme premier paramètre, plutôt que comme récepteur 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 dispose d'une nouvelle méthode .has pour vérifier si un objet possède l'élément correspondant. En continuant l'exemple précédent :

  JavaScript

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

Activez cette nouvelle version de la proposition de décorateurs en définissant l'option version de "@babel/plugin-proposal-decorators" sur "2023-01" :

babel.config.json

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

Vous pouvez également tester la nouvelle proposition de décorateurs dans le REPL en ligne de Babel, en activant le preset "Stage 3" (ou inférieur) dans la barre latérale et en choisissant la version 2023-01 pour les décorateurs.

TypeScript 5.0

TypeScript 5.0, actuellement disponible en version bêta préliminaire, introduit deux nouvelles fonctionnalités syntaxiques :

• Modificateurs const pour les paramètres de type

  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.

• Déclarations export type *

  TypeScript

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

  Babel s'appuie sur cette nouvelle syntaxe pour supprimer en toute sécurité la déclaration de ré-export lors de la compilation de TypeScript vers JavaScript.

Par ailleurs, TypeScript 5.0 introduit la prise en charge de la proposition standard des décorateurs, que vous pouvez activer dans Babel via @babel/plugin-proposal-decorators.

Vous pouvez découvrir davantage sur les nouvelles fonctionnalités TypeScript dans leur billet de publication !

Prise en charge expérimentale des fichiers de configuration .cts

Si vous avez installé @babel/preset-typescript ou si vous exécutez Babel via ts-node, vous pouvez désormais utiliser babel.config.cts comme fichier de configuration Babel écrit en TypeScript et CommonJS. Consultez la documentation pour plus de détails.

L'utilisation des fichiers babel.config.ts et babel.config.mts n'est pas encore possible, en attente de la stabilisation de l'API du chargeur ESM de Node.js.

Améliorations des cartes sources (source maps)

Les cartes sources générées par Babel prennent désormais en charge les Friendly Call Frames, affichant des noms plus explicites pour les fonctions transformées dans les outils de développement.

De plus, @babel/generator accepte désormais les cartes sources générées par d'autres outils dans le pipeline de build : cela permet une fusion correcte des cartes sources même lors d'une utilisation directe de @babel/generator sans @babel/core, et améliore les performances globales du traitement des cartes sources dans Babel.