Отрешите класс на функциональный компонент Babel Plugin

Мне интересно, как инструменты, которые анализируют и изменяют ваш код Вавилон , Eslint и Красивее Работа. Я подумал про себя, почему бы не сделать Вавилон плагин? Так я и сделал.

Это Вавилон плагин ищет Variableclaration S и преобразует их в функциональные компоненты. Из -за ограничений и таких компонентов не могут использовать классы ES6 или JSX.

Демо

Этот:

import React from "react";

const Hey = React.createClass({
  componentDidMount() {
    console.log("a");
    console.log("b");
  },

  render() {
    return React.createElement("div", null, "Hey!");
  },
});

export default Hey;

становится этим:

import React from "react";

function Hey(props) {
  function componentDidMount() {
    console.log("a");
    console.log("b");
  }

  useEffect(componentDidMount);
  return React.createElement(
    "div",
    null,
    "Hey!"
  );
}

export default Hey;

Запросы на тягу приветствуются, если они добавляют новые функции или интегрируют больше крючков.

GitHub Npm

Оригинал: “https://dev.to/shadowtime2000/react-class-to-functional-component-babel-plugin-698”