Lanzamiento de la versión 6.23.0

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 →

En esta versión: múltiples mejoras al plugin react-constant-elements por @STRML, optimizaciones en generación de código y numerosas correcciones de errores. ¡Gracias a @loganfsmyth por el lanzamiento y las revisiones!

¡Reconocimiento especial a @xtina-starr, @finkef, @chitchu, @yongxu, @jwbay, @hex13 por sus primeros PRs! 🎉

Consulta el changelog completo en GitHub.

---

Pronto publicaré un post sobre la versión 7.0 (nuestro progreso actual), ¡mantente atento! Queremos facilitar al máximo la actualización tanto para usuarios finales como autores de plugins/herramientas: ya sea mediante un período beta, una guía de actualización a 7.0, codemods si son necesarios, un bot para actualizar automáticamente tu proyecto OSS de la versión 6 a la 7, ¡o cualquier otra sugerencia que nos puedas dar!

Como no todos lo saben, quiero reiterar que nuestro equipo sigue siendo un pequeño grupo de voluntarios. No hay patrocinio empresarial ni nadie trabajando a tiempo completo.

¡Nos encantaría que contribuyeras (especialmente con aportes no relacionados con código)! Contáctanos: más diseñadores, redactores/editores técnicos y profesores para nuestro sitio web serían fantásticos.

En otras noticias, Babel ha sido aceptado como proyecto para el Rails Girls Summer of Code y está pendiente de confirmación como organización mentora para el Google Summer of Code!

---

🚀 Nueva característica

#5236 transform-es2015-block-scoping: Añadir opción throwIfClosureRequired para lanzar error en código lento. (@spicyj)

babel.config.json

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

En casos como el siguiente, es imposible reescribir let/const sin añadir una función y cierre adicionales durante la transformación:

JavaScript

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

En código extremadamente sensible al rendimiento, esto puede ser indeseable. Si se establece "throwIfClosureRequired": true, Babel lanzará un error al transformar estos patrones en lugar de añadir automáticamente una función adicional.

#4812 transform-react-constant-elements: Soporte para expresiones puras (@STRML)

Añade una verificación path.isPure() al plugin.

La expresión permanecerá en el código elevado (hoisted), aunque podría evaluarse estáticamente. UglifyJS/Babili se encargará de esto en muchos casos.

Entrada

JavaScript

const OFFSET = 3;

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

Salida

JavaScript

const OFFSET = 3;

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

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

Desoptimización

Como se indica en facebook/react#3226, no es seguro reutilizar elementos con props mutables.

JavaScript

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

#5288 babel-preset-flow: Añadir nuevo preset (@thejameskyle)

babel-preset-flow simplemente incluye transform-flow-strip-types.

Antes (válido aún)

babel.config.json

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

Después

babel.config.json

{
  "presets": ["flow"]
}

Nota: El preset React aún incluye el plugin de flow por defecto (podríamos cambiarlo al añadir soporte para TS)

¡Gracias a @simnalamburt por cedernos el nombre del paquete!

#5230 babel-traverse: Añade métodos adicionales para hermanos (@chitchu)

Para autores de plugins: ya existe path.getSibling(number), así que estamos añadiendo algunos métodos auxiliares.

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

🐛 Correcciones de errores

Dado que casi cada corrección de errores puede ser una oportunidad para aprender más sobre JavaScript y cómo funciona la herramienta que utilizas, ¡recomiendo revisar algunas de las PRs!

#5298 Corrección del modo loose en transform-es2015-for-of con etiquetas. (@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: Correcciones en el hoisting (@STRML)

Mejor hoisting dentro de declaraciones de variables

Entrada

JavaScript

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

  return renderFoo();
}

Salida

JavaScript

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

  return renderFoo();
}

Hoisting con Componentes de Orden Superior

Entrada

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);

Salida

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: Corrige el PathHoister en el hoisting de expresiones miembro JSX en this (@STRML)

<this.component /> se elevaba previamente fuera de su propia función (no tiene sentido porque de lo contrario this sería 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: Evita múltiples declaraciones return en bucles al reemplazar expresiones. (@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: Corrige TypeError relacionado con la caché. (@xtuc)

#5206 babel-traverse: Desactiva evaluación de undefined con binding local (@boopathi)

Si undefined, NaN, Infinity están redefinidos, desactiva la optimización.

#5195 babel-plugin-transform-runtime: Evita compilar ciertas propiedades de Symbol. (@taion)

Evita incluir polyfills individuales para Symbol.asyncIterator/Symbol.observable e incluye el polyfill completo de Symbol en su lugar.

#5258 babel: Verifica si está instalado globalmente y muestra el mensaje CLI correcto. (@xtina-starr)

Ahora si instalas babel, el mensaje de error indicará si usaste -g o no.

#5270 babel-generator: Emite paréntesis para await de expresiones ternarias. (@erikdesjardins)

JavaScript

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

#5193 babel-generator: Corrige paréntesis faltantes cuando FunctionExpression es etiqueta en template string. (@existentialism)

JavaScript

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

#5235 transform-es2015-modules-commonjs: Limita el tamaño de pila en asignaciones default de nodos exportados #4323. (@mattste)

¡Un problema interesante al importar/exportar en gran cantidad!

JavaScript

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

Parte del código generado se ve así:

JavaScript

exports.Foo6 = exports.Foo5 = ...

Por lo tanto, con un archivo que exporta muchos módulos, se crean tantos nodos de asignación anidados en el AST que el generador de código falla con Maximum call stack size exceeded.

La solución es dividir la expresión en grupos de 100.

Salida

JavaScript

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

#5255 babel-generator: Usar trim en lugar de lodash/trimEnd para mejorar el rendimiento del generador de código (@jwbay)

lodash/trimEnd ejecuta una expresión regular contra cadenas potencialmente enormes que puede bloquear Node. (106ms vs. 5ms)

#5050 babel-traverse: Reescribir Hub como interfaz (@yongxu)

Esto se revirtió debido a un cambio incompatible en babel-core

Hay algunos casos donde babel-traverse no se puede usar de forma independiente, por lo que esto elimina código que vinculaba babel-traverse a la implementación de babel-core.

---

🌏 Colaboradores: 20

• Andres Suarez (zertosh)

• Ben Alpert (spicyj)

• Boopathi Rajaa (boopathi)

• Brian Ng (existentialism)

• Christina (xtina-starr) ¡Primera PR!

• Erik Desjardins (erikdesjardins)

• Fabian Finke (finkef) ¡Primera PR!

• 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) ¡Primera PR!

• Yongxu Ren (yongxu) ¡Primera PR!

• jwbay ¡Primera PR!

• james kyle (thejameskyle)

• Łukasz Lityński (hex13) ¡Primera PR!

¡Consulta GitHub para ver el registro de cambios completo!