babel-plugin-log-deprecated

babel-plugin-log-deprecated copied to clipboard

Thanks for the execellent idea and implementation. Unfortunately it does not seem with class methods in ES2015 classes. I am not sure whether this is related to the es2015 preset which is changing classes beforehand.

Example code:

/**
 * @deprecated
 */
function oldMethod() {}

class About extends React.Component {
  /**
   * @deprecated
   */
  oldMethod() {}

  render() {
    return (
      <p>
        <button className={Styles.button} onClick={oldMethod}>Deprecated Test - Works</button>
        <button className={Styles.button} onClick={this.oldMethod}>Deprecated Test - Does not work</button>
      </p>
    )
  }
}

Testing like

babel --presets es2015,react --plugins log-deprecated test.js

Output:

/**
 * @deprecated
 */
function oldMethod() {
  console.warn("Deprecated: Function \"oldMethod\" is deprecated in test.js on line 4", {
    functionName: "oldMethod",
    message: null,
    packageName: "advanced-boilerplate",
    packageVersion: "0.14.11",
    scriptColumn: 0,
    scriptLine: 4,
    scriptPath: "test.js"
  })
}

var About = function (_React$Component) {
  _inherits(About, _React$Component);

  function About() {
    _classCallCheck(this, About);

    return _possibleConstructorReturn(this, (About.__proto__ || Object.getPrototypeOf(About)).apply(this, arguments));
  }

  _createClass(About, [{
    key: "oldMethod",

    /**
     * @deprecated
     */
    value: function oldMethod() {}
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "p",
        null,
        React.createElement(
          "button",
          { className: Styles.button, onClick: oldMethod },
          "Deprecated Test - Works"
        ),
        React.createElement(
          "button",
          { className: Styles.button, onClick: this.oldMethod },
          "Deprecated Test - Does not work"
        )
      );
    }
  }]);

  return About;
}(React.Component);

Babel seems to move the output to the "parent" value key for the function.

Interestingly this is broken without the ES2015 preset as well. Okay probably there is just missing support for classes in general:

babel --plugins log-deprecated --presets react test.js

Output:

/**
 * @deprecated
 */
function oldMethod() {
  console.warn("Deprecated: Function \"oldMethod\" is deprecated in test.js on line 4", {
    functionName: "oldMethod",
    message: null,
    packageName: "advanced-boilerplate",
    packageVersion: "0.14.11",
    scriptColumn: 0,
    scriptLine: 4,
    scriptPath: "test.js"
  })
}

class About extends React.Component {
  /**
   * @deprecated
   */
  oldMethod() {}

  render() {
    return React.createElement(
      "p",
      null,
      React.createElement(
        "button",
        { className: Styles.button, onClick: oldMethod },
        "Deprecated Test - Works"
      ),
      React.createElement(
        "button",
        { className: Styles.button, onClick: this.oldMethod },
        "Deprecated Test - Does not work"
      )
    );
  }
}