Merge pull request #205 from AleksandrZhukov/master

Fixes for no-raw-text rule

Author: Intellicode

docs/rules/no-raw-text.md

@@ -24,3 +24,7 @@ The following patterns are not considered warnings:
 const text = 'some text';
 <View><Text>{`${text}`}</Text></View>
 ```
+
+####This rule has an object option:
+
+- "skip" – allow to skip checking for the array of custom components

lib/rules/no-raw-text.js

@@ -6,6 +6,8 @@
 'use strict';
 
 module.exports = (context) => {
+  const options = context.options[0] || {};
+
   const elementName = node => (
     node.openingElement &&
     node.openingElement.name &&
@@ -16,21 +18,29 @@ module.exports = (context) => {
   const report = (node) => {
     const errorValue = node.type === 'TemplateLiteral'
       ? `TemplateLiteral: ${node.expressions[0].name}`
-      : node.value;
+      : node.value.trim();
+
+    const formattedErrorValue = errorValue.length > 0
+      ? `Raw text (${errorValue})`
+      : 'Whitespace(s)';
+
     context.report({
       node,
-      message: `Raw text (${errorValue.trim()}) cannot be used outside of a <Text> tag`,
+      message: `${formattedErrorValue} cannot be used outside of a <Text> tag`,
     });
   };
 
-  const getValidation = node => elementName(node.parent) !== 'Text';
+  const skippedElements = options.skip ? options.skip : [];
+  const allowedElements = ['Text', 'TSpan', 'StyledText'].concat(skippedElements);
+
+  const getValidation = node => !allowedElements.includes(elementName(node.parent));
 
   return {
     Literal(node) {
       const parentType = node.parent.type;
       const onlyFor = ['JSXExpressionContainer', 'JSXElement'];
-      if (/^[\s]+$/.test(node.value) ||
-        typeof node.value !== 'string' ||
+      if (typeof node.value !== 'string' ||
+        /^[\r\n\t\f\v]+$/.test(node.value.replace(/ /g, '')) ||
         !onlyFor.includes(parentType) ||
         (node.parent.parent && node.parent.parent.type === 'JSXAttribute')
       ) return;
@@ -60,4 +70,17 @@ module.exports = (context) => {
   };
 };
 
-module.exports.schema = [];
+module.exports.schema = [
+  {
+    type: 'object',
+    properties: {
+      skip: {
+        type: 'array',
+        items: {
+          type: 'string',
+        },
+      },
+    },
+    additionalProperties: false,
+  },
+];

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

@@ -50,6 +50,53 @@ const tests = {
         }
       `,
     },
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            return (
+              <View>
+                <Text>some text</Text>
+              </View>
+            );
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            return (
+              <Svg>
+                <Text>
+                  <TSpan>some text</TSpan>
+                </Text>
+              </Svg>
+            );
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        const StyledText = styled.Text\`
+          color: red;
+        \`
+        export default class MyComponent extends Component {
+          render() {
+            return (<StyledText>some text</StyledText>);
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        const Title = ({ children }) => (<Text>{children}</Text>);
+        <Title>This is the title</Title>
+      `,
+      options: [{ skip: ['Title'] }],
+    },
   ],
   invalid: [
     {
@@ -89,6 +136,28 @@ const tests = {
         message: 'Raw text (some text) cannot be used outside of a <Text> tag',
       }],
     },
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            return (<View>  </View>);
+          }
+        }
+      `,
+      errors: [{
+        message: 'Whitespace(s) cannot be used outside of a <Text> tag',
+      }],
+    },
+    {
+      code: `
+        const Component = ({ children }) => (<Text>{children}</Text>);
+        <Component>some text</Component>
+      `,
+      options: [{ skip: ['Title'] }],
+      errors: [{
+        message: 'Raw text (some text) cannot be used outside of a <Text> tag',
+      }],
+    },
   ],
 };