Merge pull request Intellicode#247 from Debens/master

feat: adding support for object notation components for no-raw-text exclusion rule

Author: Intellicode

lib/rules/no-raw-text.js

@@ -5,16 +5,27 @@
 
 'use strict';
 
+const { default: traverse } = require('@babel/traverse');
+
+const elementName = (node, scope) => {
+  const identifiers = [];
+
+  traverse(node, {
+    JSXOpeningElement({ node: element }) {
+      traverse(element, {
+        JSXIdentifier({ node: identifier }) {
+          identifiers.push(identifier.name);
+        },
+      }, scope);
+    },
+  }, scope);
+
+  return identifiers.join('.');
+};
+
 module.exports = (context) => {
   const options = context.options[0] || {};
 
-  const elementName = (node) => (
-    node.openingElement
-    && node.openingElement.name
-    && node.openingElement.name.type === 'JSXIdentifier'
-    && node.openingElement.name.name
-  );
-
   const report = (node) => {
     const errorValue = node.type === 'TemplateLiteral'
       ? `TemplateLiteral: ${node.expressions[0].name}`
@@ -35,7 +46,8 @@ module.exports = (context) => {
 
   const hasOnlyLineBreak = (value) => /^[\r\n\t\f\v]+$/.test(value.replace(/ /g, ''));
 
-  const getValidation = (node) => !allowedElements.includes(elementName(node.parent));
+  const scope = context.getScope();
+  const getValidation = (node) => !allowedElements.includes(elementName(node.parent, scope));
 
   return {
     Literal(node) {

package.json

@@ -48,6 +48,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@babel/traverse": "^7.7.4",
     "eslint-plugin-react-native-globals": "^0.1.1"
   }
 }

tests/lib/rules/no-raw-text.js

@@ -97,6 +97,14 @@ const tests = {
       `,
       options: [{ skip: ['Title'] }],
     },
+    {
+      code: `
+        const Title = ({ children }) => (<Title.Text>{children}</Title.Text>);
+        Title.Text = ({ children }) => (<Text>{children}</Text>);
+        <Title.Text>This is the title</Title.Text>
+      `,
+      options: [{ skip: ['Title.Text'] }],
+    },
   ],
   invalid: [
     {
@@ -158,6 +166,16 @@ const tests = {
         message: 'Raw text (some text) cannot be used outside of a <Text> tag',
       }],
     },
+    {
+      code: `
+        const Component = ({ children }) => (<Text>{children}</Text>);
+        <Component>some text</Component>
+      `,
+      options: [{ skip: ['Component.Text'] }],
+      errors: [{
+        message: 'Raw text (some text) cannot be used outside of a <Text> tag',
+      }],
+    },
   ],
 };