ember-template-lint/lib/rules/no-element-event-actions.js

Linter for Ember or Handlebars templates.

'use strict';

const AstNodeInfo = require('../helpers/ast-node-info');
const Rule = require('./base');

const ERROR_MESSAGE =
  'Do not use HTML element event properties like `onclick`. Instead, use the `on` modifier.';

module.exports = class NoElementEventActions extends Rule {
  visitor() {
    return {
      ElementNode(node) {
        const eventProperties = node.attributes.filter(isEventPropertyWithAction);
        for (const eventProperty of eventProperties) {
          this.log({
            message: ERROR_MESSAGE,
            line: eventProperty.loc && eventProperty.loc.start.line,
            column: eventProperty.loc && eventProperty.loc.start.column,
            source: this.sourceForNode(eventProperty),
          });
        }
      },
    };
  }
};

function isDomEventAttributeName(name) {
  const nameLower = name.toLowerCase();
  return nameLower.startsWith('on') && nameLower !== 'on';
}

function isEventPropertyWithAction(node) {
  return (
    AstNodeInfo.isAttrNode(node) &&
    isDomEventAttributeName(node.name) &&
    AstNodeInfo.isMustacheStatement(node.value) &&
    AstNodeInfo.isPathExpression(node.value.path) &&
    node.value.path.original === 'action'
  );
}

module.exports.ERROR_MESSAGE = ERROR_MESSAGE;