Aller au contenu principal

7.17.0 est disponible : mode 'v' pour les RegExp et ... 🥁 les décorateurs !

· 6 min de lecture
Babel Team
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.17.0 !

Après des années d'itérations, de réécritures et d'ajustements, il semble que la proposition de décorateurs ait finalement à nouveau abouti à une nouvelle conception ! Cette version inclut à la fois le support du parsing et de la transformation pour cette nouvelle proposition.

Nous avons également implémenté la proposition du drapeau v pour les RegExp et ajouté le support du parsing pour la déstructuration des champs privés, toutes deux actuellement au Stage 2. Enfin, une nouvelle implémentation expérimentale de @babel/register.

Vous pouvez lire le changelog complet sur GitHub.

Si vous ou votre entreprise souhaitez soutenir Babel et l'évolution de JavaScript, mais ne savez pas comment, vous pouvez nous faire un don via notre Open Collective ou GitHub Sponsors et, mieux encore, travailler directement avec nous sur l'implémentation de nouvelles propositions ECMAScript ! En tant que projet géré par des bénévoles, nous comptons sur le soutien de la communauté pour financer nos efforts afin de répondre aux besoins de la grande diversité des utilisateurs de JavaScript. Contactez-nous à team@babeljs.io si vous souhaitez en discuter davantage !

Principales fonctionnalités​

Décorateurs (#14004, #13681)​

Après avoir reçu des retours de développeurs JavaScript, de développeurs de moteurs et d'experts du langage, la proposition de décorateurs a été réécrite pour prendre en compte de multiples contraintes et désirs. Nous avons collaboré avec l'auteur actuel de la proposition, @pzuraq, pour implémenter la nouvelle proposition au Stage 2 dans Babel.

La nouvelle implémentation prend également en charge la décoration d'éléments de classe privés, ainsi que la nouvelle syntaxe des "class auto accessors" :

JavaScript
@defineElement("button")
class Button {
  @reactive accessor enabled = true; // class auto accessors

  @event("onClick") #handleClick() { // decorator on a private method
    console.log("clicked!");
  }
}

Vous pouvez activer la nouvelle proposition en passant l'option "version": "2021-12" à @babel/plugin-proposal-decorators :

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
        "version": "2021-12"
    }]
  ]
}
attention

Bien que la nouvelle syntaxe des décorateurs soit compatible avec l'ancienne proposition, la sémantique est différente : les décorateurs déjà écrits pour Babel "legacy", Babel older-but-not-legacy ou TypeScript ne fonctionneront pas avec la nouvelle proposition.

Si vous voulez aider à faire avancer la proposition, vous pouvez l'essayer et laisser vos retours dans leur dépôt GitHub.

Notation ensembliste pour les RegExp et propriétés des chaînes (#14125)​

Babel prend désormais en charge la proposition de notation ensembliste pour les RegExp et propriétés des chaînes, qui introduit trois nouvelles fonctionnalités pour les expressions rationnelles derrière un nouveau drapeau v :

  • Notation ensembliste étendue, qui permet de calculer la différence, l'intersection et l'union d'ensembles de caractères ou de chaînes

    JavaScript
    /[\p{Decimal_Number}--[0-9]]/v; // Non-ASCII decimal digits
    /[\p{ASCII}&&\p{Letter}]/v; // ASCII letters
    /[[\p{ASCII}&&\p{Letter}]\p{Number}]/v; // ASCII letters, or any digit

  • Propriétés de chaînes, qui autorisent l'utilisation d'échappements \p avec des propriétés multi-points de code

    JavaScript
    "Did you see the 👩🏿‍❤️‍💋‍👩🏾 emoji?".match(/\p{RGI_Emoji}/v). // ["👩🏿‍❤️‍💋‍👩🏾"]

  • Chaînes multi-points de code dans les ensembles, via un nouvel échappement \q

    JavaScript
    /[\r\n\q{\r\n|NEWLINE}]/v; // Matches \r, \n, \r\n or NEWLINE

Vous pouvez activer cette proposition via le plugin @babel/plugin-proposal-unicode-sets-regex :

babel.config.json
{
  "plugins": ["@babel/plugin-proposal-unicode-sets-regex"]
}

Babel s'appuie sur différents packages tiers pour transformer les expressions régulières : nous remercions les mainteneurs de regjsparser, regjsgen et regexpu-core qui ont pris le temps de relire nos pull requests !

Tokens thématiques @@ et ^^ pour les pipelines de style Hack (#13973)​

Nous continuons d'aider les auteurs de la proposition à évaluer différents tokens pour l'opérateur pipeline : l'un des champions, J. S. Choi, a ajouté la prise en charge de deux nouveaux tokens que vous pouvez tester via l'option topicToken :

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", {
      "proposal": "hack",
      "topicToken": "^^" // or "@@"
    }]
  ]
}

Vous pouvez en savoir plus sur les variations supportées dans la documentation de @babel/plugin-proposal-pipeline-operator.

Réécriture expérimentale de @babel/register (#13782)​

Nous prévoyons de publier Babel 8 sous forme de module ESM. Cependant, cela pose un problème majeur : comment le charger et l'exécuter de manière synchrone dans des packages CommonJS ?

Habituellement, la plupart des utilisateurs de Babel peuvent l'exécuter de manière asynchrone, ou au moins le charger de façon asynchrone. Ce n'est pas le cas pour @babel/eslint-parser (qui intègre le parseur de Babel à ESLint) et @babel/register (qui permet de transpiler des fichiers Node.js à la volée), où nous devons déplacer l'analyse et la transformation vers un worker séparé.

Babel 7.16.0 expose la nouvelle implémentation expérimentale de @babel/register via @babel/register/experimental-worker : elle exécute Babel de manière asynchrone en interne, ce qui la rend compatible avec les fichiers de configuration .mjs et les plugins Babel .mjs. Elle sera activée par défaut dans Babel 8, et vous pouvez déjà l'utiliser en remplacement de @babel/register avec quelques mises en garde :

  • Si vous spécifiez programmatiquement les options de @babel/register (via require("@babel/register")({ /* ... options */ })), assurez-vous qu'elles sont sérialisables. Vous ne pouvez donc pas passer de fonctions de plugin définies inline, mais devez les déplacer dans un fichier séparé ./my-plugin.js ou dans un babel.config.js.

  • La nouvelle implémentation reste expérimentale : elle devrait offrir les mêmes fonctionnalités que l'actuelle, mais nous explorons certaines améliorations.

Nous avons déjà publié la nouvelle implémentation expérimentale de @babel/eslint-parser dans Babel 7.15.0, accessible via @babel/eslint-parser/experimental-worker.