Version 6.23.0 publiée

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 →

Cette version inclut : plusieurs améliorations du plugin react-constant-elements par @STRML, des optimisations de codegen et de nombreuses corrections de bogues ! Merci à @loganfsmyth pour la publication et les relectures !

Félicitations à @xtina-starr, @finkef, @chitchu, @yongxu, @jwbay, @hex13 pour leurs premières PRs ! 🎉

Consultez GitHub pour le journal complet des modifications.

---

Je publierai bientôt un article sur la version 7.0 (notre progression actuelle) - restez à l'écoute ! Nous voulons faciliter au maximum la migration pour les utilisateurs finaux et les auteurs de plugins/outils : que ce soit via une période bêta, un guide de mise à jour 7.0, des codemods si nécessaire, un bot pour migrer automatiquement vos projets open source de la 6 à la 7, ou toute autre suggestion !

Je tenais à rappeler que notre équipe reste un petit groupe de bénévoles. Aucun sponsor commercial ni personne travaillant à plein temps sur le projet.

Nous adorerions que vous contribuiez (surtout sans code !) - contactez-nous ! Des designers, rédacteurs/éditeurs techniques et formateurs pour notre site seraient fantastiques.

Autre actualité : Babel a été accepté comme projet Rails Girls Summer of Code et attend une réponse en tant qu'organisation mentor pour Google Summer of Code !

---

🚀 Nouvelle fonctionnalité

#5236 transform-es2015-block-scoping : Ajout de l'option throwIfClosureRequired pour générer une erreur sur du code lent. (@spicyj)

babel.config.json

{
  "plugins": [
    ["transform-es2015-block-scoping", {
      "throwIfClosureRequired": true
    }]
  ]
}

Dans des cas comme ci-dessous, il est impossible de réécrire let/const sans ajouter une fonction et fermeture supplémentaires lors de la transformation :

JavaScript

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1);
}

Dans du code extrêmement sensible aux performances, cela peut être indésirable. Si "throwIfClosureRequired": true est défini, Babel générera une erreur lors de la transformation de ces motifs plutôt que d'ajouter automatiquement une fonction supplémentaire.

#4812 transform-react-constant-elements : Prise en charge des expressions pures (@STRML)

Ajoute une vérification path.isPure() au plugin.

L'expression restera dans le code remonté (hoisted) bien qu'évaluable statiquement. UglifyJS/Babili gérera cela dans de nombreux cas.

Entrée

JavaScript

const OFFSET = 3;

var Foo = React.createClass({
  render: function () {
    return (
      <div tabIndex={OFFSET + 1} />
    );
  }
});

Sortie

JavaScript

const OFFSET = 3;

var _ref = <div tabIndex={OFFSET + 1} />;

var Foo = React.createClass({
  render: function () {
    return _ref;
  }
});

Deopt

Comme noté dans facebook/react#3226, réutiliser des éléments avec des props mutables n'est pas sûr.

JavaScript

<div style={
  { width: 100 }
} />

#5288 babel-preset-flow : Ajout d'un nouveau preset (@thejameskyle)

babel-preset-flow inclut simplement transform-flow-strip-types.

Avant (toujours valide)

babel.config.json

{
  "plugins": ["transform-flow-strip-types"]
}

Après

babel.config.json

{
  "presets": ["flow"]
}

Note : le preset React inclut toujours le plugin Flow par défaut (nous pourrions le modifier lors de l'ajout du support TS)

Un grand merci à @simnalamburt pour nous avoir fourni le nom du package !

#5230 babel-traverse: Ajout de méthodes supplémentaires pour les nœuds frères (@chitchu)

Pour les auteurs de plugins : il existe déjà path.getSibling(number), nous ajoutons donc quelques méthodes utilitaires.

JavaScript

path.getPrevSibling(); // path.getSibling(path.parentPath.key - 1)
path.getNextSibling(); // path.getSibling(path.parentPath.key + 1)
path.getAllPrevSiblings(); // returns Array<NodePath> of previous siblings
path.getAllNextSiblings();// returns Array<NodePath> of next siblings

🐛 Corrections de bogues

Comme chaque correction de bug est une opportunité d'en apprendre plus sur JavaScript et le fonctionnement de vos outils, je vous encourage à consulter certaines des PRs !

#5298 Correction du mode loose dans transform-es2015-for-of avec label. (@jridgewell)

JavaScript

b: for (let c of d()) { // previously, the label was completely dropped
  for (let e of f()) {
    continue b;
  }
}

#5153 transform-react-constant-elements: Améliorations de l'élévation (@STRML)

Meilleure gestion de l'élévation dans les déclarations de variables

Entrée

JavaScript

function render() {
  const bar = "bar", renderFoo = () => <foo bar={bar} baz={baz} />, baz = "baz";

  return renderFoo();
}

Sortie

JavaScript

function render() {
  const bar = "bar",
        renderFoo = () => _ref2,
        baz = "baz",
        _ref2 = <foo bar={bar} baz={baz} />;

  return renderFoo();
}

Élévation avec les composants d'ordre supérieur (HOC)

Entrée

JavaScript

const HOC = component => component;

const Parent = () => (
  <div className="parent">
    <Child/>
  </div>
);

export default Parent;

let Child = () => (
  <div className="child">
    ChildTextContent
  </div>
);
Child = HOC(Child);

Sortie

JavaScript

const HOC = component => component;

const Parent = () => _ref;

export default Parent;

var _ref2 = <div className="child">
    ChildTextContent
  </div>;

let Child = () => _ref2;
Child = HOC(Child);

var _ref = <div className="parent">
    <Child />
  </div>;

#5143 transform-react-constant-elements: Correction de PathHoister pour l'élévation des expressions membres JSX sur this (@STRML)

<this.component /> était précédemment élevé en dehors de sa propre fonction (ce qui n'a pas de sens car this serait alors undefined)

JavaScript

function render() {
  this.component = "div";
  return () => <this.component />;
}

JavaScript

function render() {
  this.component = "div";

  var _ref = <this.component />;

  return () => _ref;
}

#5030 transform-do-expressions: Empêche les déclarations multiples de retour dans une boucle lors du remplacement d'expressions. (@existentialism)

JavaScript

let p
let a = do {
  while (p = p.parentPath) {
    if (a) {
      'a'
    } else {
      'b'
    }
  }
};

JavaScript

let p;
let a = function () {
  var _ret;

  while (p = p.parentPath) {
    if (a) {
      _ret = 'a';
    } else {
      _ret = 'b';
    }
  }
  return _ret; // previously had an extra return
}();

#5260 babel-register: Correction d'une TypeError avec le cache. (@xtuc)

#5206 babel-traverse: Désactivation de l'évaluation de undefined avec une liaison locale (@boopathi)

Si undefined, NaN, Infinity sont redéfinis, désactiver l'évaluation.

#5195 babel-plugin-transform-runtime: Ne pas compiler certaines propriétés de symboles. (@taion)

Ne pas importer individuellement les polyfills Symbol.asyncIterator/Symbol.observable mais utiliser plutôt le polyfill complet de Symbol.

#5258 babel: Vérification de l'installation globale et affichage du bon message CLI. (@xtina-starr)

Maintenant, si vous installez babel, le message d'erreur indiquera correctement l'option -g ou non.

#5270 babel-generator: Ajout de parenthèses pour await avec expressions ternaires. (@erikdesjardins)

JavaScript

async function asdf() {
  await (1 ? 2 : 3);
}

#5193 babel-generator: Correction des parenthèses manquantes quand FunctionExpression est un tag dans un template string. (@existentialism)

JavaScript

(() => {})``;
(function(){}``);

#5235 transform-es2015-modules-commonjs: Limitation de la taille de la pile d'assignation par défaut des nœuds d'export #4323. (@mattste)

Un problème intéressant lors de l'import/export massif !

JavaScript

import { foo, foo1, foo2 ... } from "foo"; // assume ... is 100 imports/exports
export { foo, foo1, foo2 ... }

Une partie du code généré ressemble à :

JavaScript

exports.Foo6 = exports.Foo5 = ...

Ainsi, avec un fichier qui exporte de nombreux modules, cela crée tellement de nœuds d'assignation imbriqués dans l'AST que le générateur de code échoue avec Maximum call stack size exceeded.

La solution consiste à diviser l'expression en groupes de 100.

Sortie

JavaScript

exports.foo100 = undefined; // split by 100
exports.foo99 = exports.foo98 = ... exports.foo1 = exports.foo = undefined

#5255 babel-generator: Utilisation de trim au lieu de lodash/trimEnd pour optimiser les performances du codegen (@jwbay)

lodash/trimEnd exécute une regex sur des chaînes potentiellement énormes, ce qui peut bloquer Node. (106ms vs. 5ms)

#5050 babel-traverse: Réécriture de Hub en tant qu'interface (@yongxu)

Ce changement avait été annulé en raison d'une incompatibilité avec babel-core

Certains cas empêchent l'utilisation autonome de babel-traverse, cette modification supprime donc du code qui liait babel-traverse à l'implémentation de babel-core.

---

🌏 Contributeurs : 20

• Andres Suarez (zertosh)

• Ben Alpert (spicyj)

• Boopathi Rajaa (boopathi)

• Brian Ng (existentialism)

• Christina (xtina-starr) Première contribution !

• Erik Desjardins (erikdesjardins)

• Fabian Finke (finkef) Première contribution !

• Henry Zhu (hzoo)

• Jimmy Jia (taion)

• Justin Ridgewell (jridgewell)

• Logan Smyth (loganfsmyth)

• Matt Stewart (mattste)

• Samuel Reed (STRML)

• Sergey Rubanov (chicoxyzzy)

• Sven SAULEAU (xtuc)

• Vicente Jr Yuchitcho (chitchu) Première contribution !

• Yongxu Ren (yongxu) Première contribution !

• jwbay Première contribution !

• james kyle (thejameskyle)

• Łukasz Lityński (hex13) Première PR !

Consultez Github pour le journal des modifications complet !