Merge pull request #1497 from Vydia/new-rule-one-element-per-line

New rule: jsx-one-expression-per-line

Author: ljharb

index.js

@@ -23,6 +23,7 @@ const allRules = {
   'jsx-indent-props': require('./lib/rules/jsx-indent-props'),
   'jsx-key': require('./lib/rules/jsx-key'),
   'jsx-max-props-per-line': require('./lib/rules/jsx-max-props-per-line'),
+  'jsx-one-expression-per-line': require('./lib/rules/jsx-one-expression-per-line'),
   'jsx-no-bind': require('./lib/rules/jsx-no-bind'),
   'jsx-no-comment-textnodes': require('./lib/rules/jsx-no-comment-textnodes'),
   'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),

lib/rules/jsx-one-expression-per-line.js

@@ -0,0 +1,181 @@
+/**
+ * @fileoverview Limit to one element tag per line in JSX
+ * @author Mark Ivan Allen <Vydia.com>
+ */
+
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Limit to one element tag per line in JSX',
+      category: 'Stylistic Issues',
+      recommended: false
+    },
+    fixable: 'whitespace',
+    schema: []
+  },
+
+  create: function (context) {
+    const sourceCode = context.getSourceCode();
+
+    function nodeKey (node) {
+      return `${node.loc.start.line},${node.loc.start.column}`;
+    }
+
+    function nodeDescriptor (n) {
+      return n.openingElement ? n.openingElement.name.name : sourceCode.getText(n).replace(/\n/g, '');
+    }
+
+    return {
+      JSXElement: function (node) {
+        const children = node.children;
+
+        if (!children || !children.length) {
+          return;
+        }
+
+        const openingElement = node.openingElement;
+        const closingElement = node.closingElement;
+        const openingElementEndLine = openingElement.loc.end.line;
+        const closingElementStartLine = closingElement.loc.start.line;
+
+        const childrenGroupedByLine = {};
+        const fixDetailsByNode = {};
+
+        children.forEach(child => {
+          let countNewLinesBeforeContent = 0;
+          let countNewLinesAfterContent = 0;
+
+          if (child.type === 'Literal') {
+            if (/^\s*$/.test(child.raw)) {
+              return;
+            }
+
+            countNewLinesBeforeContent = (child.raw.match(/^ *\n/g) || []).length;
+            countNewLinesAfterContent = (child.raw.match(/\n *$/g) || []).length;
+          }
+
+          const startLine = child.loc.start.line + countNewLinesBeforeContent;
+          const endLine = child.loc.end.line - countNewLinesAfterContent;
+
+          if (startLine === endLine) {
+            if (!childrenGroupedByLine[startLine]) {
+              childrenGroupedByLine[startLine] = [];
+            }
+            childrenGroupedByLine[startLine].push(child);
+          } else {
+            if (!childrenGroupedByLine[startLine]) {
+              childrenGroupedByLine[startLine] = [];
+            }
+            childrenGroupedByLine[startLine].push(child);
+            if (!childrenGroupedByLine[endLine]) {
+              childrenGroupedByLine[endLine] = [];
+            }
+            childrenGroupedByLine[endLine].push(child);
+          }
+        });
+
+        Object.keys(childrenGroupedByLine).forEach(_line => {
+          const line = parseInt(_line, 10);
+          const firstIndex = 0;
+          const lastIndex = childrenGroupedByLine[line].length - 1;
+
+          childrenGroupedByLine[line].forEach((child, i) => {
+            let prevChild;
+            let nextChild;
+
+            if (i === firstIndex) {
+              if (line === openingElementEndLine) {
+                prevChild = openingElement;
+              }
+            } else {
+              prevChild = childrenGroupedByLine[line][i - 1];
+            }
+
+            if (i === lastIndex) {
+              if (line === closingElementStartLine) {
+                nextChild = closingElement;
+              }
+            } else {
+              // We don't need to append a trailing because the next child will prepend a leading.
+              // nextChild = childrenGroupedByLine[line][i + 1];
+            }
+
+            function spaceBetweenPrev () {
+              return (prevChild.type === 'Literal' && / $/.test(prevChild.raw)) ||
+                (child.type === 'Literal' && /^ /.test(child.raw)) ||
+                sourceCode.isSpaceBetweenTokens(prevChild, child);
+            }
+
+            function spaceBetweenNext () {
+              return (nextChild.type === 'Literal' && /^ /.test(nextChild.raw)) ||
+                (child.type === 'Literal' && / $/.test(child.raw)) ||
+                sourceCode.isSpaceBetweenTokens(child, nextChild);
+            }
+
+            if (!prevChild && !nextChild) {
+              return;
+            }
+
+            const source = sourceCode.getText(child);
+            const leadingSpace = !!(prevChild && spaceBetweenPrev());
+            const trailingSpace = !!(nextChild && spaceBetweenNext());
+            const leadingNewLine = !!prevChild;
+            const trailingNewLine = !!nextChild;
+
+            const key = nodeKey(child);
+
+            if (!fixDetailsByNode[key]) {
+              fixDetailsByNode[key] = {
+                node: child,
+                source: source,
+                descriptor: nodeDescriptor(child)
+              };
+            }
+
+            if (leadingSpace) {
+              fixDetailsByNode[key].leadingSpace = true;
+            }
+            if (leadingNewLine) {
+              fixDetailsByNode[key].leadingNewLine = true;
+            }
+            if (trailingNewLine) {
+              fixDetailsByNode[key].trailingNewLine = true;
+            }
+            if (trailingSpace) {
+              fixDetailsByNode[key].trailingSpace = true;
+            }
+          });
+        });
+
+        Object.keys(fixDetailsByNode).forEach(key => {
+          const details = fixDetailsByNode[key];
+
+          const nodeToReport = details.node;
+          const descriptor = details.descriptor;
+          const source = details.source.replace(/(^ +| +(?=\n)*$)/g, '');
+
+          const leadingSpaceString = details.leadingSpace ? '\n{\' \'}' : '';
+          const trailingSpaceString = details.trailingSpace ? '{\' \'}\n' : '';
+          const leadingNewLineString = details.leadingNewLine ? '\n' : '';
+          const trailingNewLineString = details.trailingNewLine ? '\n' : '';
+
+          const replaceText = `${leadingSpaceString}${leadingNewLineString}${source}${trailingNewLineString}${trailingSpaceString}`;
+
+          context.report({
+            node: nodeToReport,
+            message: `\`${descriptor}\` must be placed on a new line`,
+            fix: function (fixer) {
+              return fixer.replaceText(nodeToReport, replaceText);
+            }
+          });
+        });
+      }
+    };
+  }
+};