eslint-plugin-reblend/lib/rules/self-closing-comp.js

Reblend specific linting rules for ESLint

/**
 * @fileoverview Prevent extra closing tags for components without children
 * @author Yannick Croissant
 */

'use strict';

const docsUrl = require('../util/docsUrl');
const jsxUtil = require('../util/jsx');
const report = require('../util/report');

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

const optionDefaults = { component: true, html: true };

const messages = {
  notSelfClosing: 'Empty components are self-closing',
};

/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
  meta: {
    docs: {
      description:
        'Disallow extra closing tags for components without children',
      category: 'Stylistic Issues',
      recommended: false,
      url: docsUrl('self-closing-comp'),
    },
    fixable: 'code',

    messages,

    schema: [
      {
        type: 'object',
        properties: {
          component: {
            default: optionDefaults.component,
            type: 'boolean',
          },
          html: {
            default: optionDefaults.html,
            type: 'boolean',
          },
        },
        additionalProperties: false,
      },
    ],
  },

  create(context) {
    function isComponent(node) {
      return (
        node.name &&
        (node.name.type === 'JSXIdentifier' ||
          node.name.type === 'JSXMemberExpression') &&
        !jsxUtil.isDOMComponent(node)
      );
    }

    function childrenIsEmpty(node) {
      return node.parent.children.length === 0;
    }

    function childrenIsMultilineSpaces(node) {
      const childrens = node.parent.children;

      return (
        childrens.length === 1 &&
        (childrens[0].type === 'Literal' || childrens[0].type === 'JSXText') &&
        childrens[0].value.indexOf('\n') !== -1 &&
        childrens[0].value.replace(/(?!\xA0)\s/g, '') === ''
      );
    }

    function isShouldBeSelfClosed(node) {
      const configuration = Object.assign(
        {},
        optionDefaults,
        context.options[0]
      );
      return (
        ((configuration.component && isComponent(node)) ||
          (configuration.html && jsxUtil.isDOMComponent(node))) &&
        !node.selfClosing &&
        (childrenIsEmpty(node) || childrenIsMultilineSpaces(node))
      );
    }

    return {
      JSXOpeningElement(node) {
        if (!isShouldBeSelfClosed(node)) {
          return;
        }
        report(context, messages.notSelfClosing, 'notSelfClosing', {
          node,
          fix(fixer) {
            // Represents the last character of the JSXOpeningElement, the '>' character
            const openingElementEnding = node.range[1] - 1;
            // Represents the last character of the JSXClosingElement, the '>' character
            const closingElementEnding = node.parent.closingElement.range[1];

            // Replace />.*<\/.*>/ with '/>'
            const range = [openingElementEnding, closingElementEnding];
            return fixer.replaceTextRange(range, ' />');
          },
        });
      },
    };
  },
};