Added no-raw-text rule

- added new rule to prevent error of raw text, eg
  facebook/react-native#15870
  react-native-maps/react-native-maps#1791
- added .idea folder to gitignore

Author: AleksandrZhukov

.gitignore

@@ -25,3 +25,5 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+.idea

README.md

@@ -71,6 +71,7 @@ Finally, enable all of the rules that you would like to use.
     "react-native/split-platform-components": 2,
     "react-native/no-inline-styles": 2,
     "react-native/no-color-literals": 2,
+    "react-native/no-raw-text": 2,
   }
 }
 ```
@@ -81,6 +82,7 @@ Finally, enable all of the rules that you would like to use.
 * [split-platform-components](docs/rules/split-platform-components.md): Enforce using platform specific filenames when necessary
 * [no-inline-styles](docs/rules/no-inline-styles.md): Detect JSX components with inline styles that contain literal values
 * [no-color-literals](docs/rules/no-color-literals.md): Detect `StyleSheet` rules and inline styles containing color literals instead of variables
+* [no-raw-text](docs/rules/no-raw-text.md): Detect raw text outside of `Text`  component
 
 [npm-url]: https://npmjs.org/package/eslint-plugin-react-native
 [npm-image]: http://img.shields.io/npm/v/eslint-plugin-react-native.svg?style=flat-square

docs/rules/no-raw-text.md

@@ -0,0 +1,26 @@
+# Detect raw text outside of Text component
+All strings in React Native should be wrapped with a Text component.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+<View>some text</View>
+```
+
+```js
+const text = 'some text';
+<View>{`${text}`}</View>
+```
+
+The following patterns are not considered warnings:
+
+```js
+<View><Text>some text</Text></View>
+```
+
+```js
+const text = 'some text';
+<View><Text>{`${text}`}</Text></View>
+```

index.js

@@ -7,6 +7,7 @@ const allRules = {
   'no-inline-styles': require('./lib/rules/no-inline-styles'),
   'no-color-literals': require('./lib/rules/no-color-literals'),
   'split-platform-components': require('./lib/rules/split-platform-components'),
+  'no-raw-text': require('./lib/rules/no-raw-text'),
 };
 
 function configureAsError(rules) {
@@ -30,6 +31,7 @@ module.exports = {
     'no-inline-styles': 0,
     'no-color-literals': 0,
     'split-platform-components': 0,
+    'no-raw-text': 0,
   },
   environments: {
     'react-native': {

lib/rules/no-raw-text.js

@@ -0,0 +1,63 @@
+/**
+ * @fileoverview Detects raw text outside of Text component
+ * @author Alex Zhukov
+ */
+
+'use strict';
+
+module.exports = (context) => {
+  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}`
+      : node.value;
+    context.report({
+      node,
+      message: `Raw text (${errorValue.trim()}) cannot be used outside of a <Text> tag`,
+    });
+  };
+
+  const getValidation = node => elementName(node.parent) !== 'Text';
+
+  return {
+    Literal(node) {
+      const parentType = node.parent.type;
+      const onlyFor = ['JSXExpressionContainer', 'JSXElement'];
+      if (/^[\s]+$/.test(node.value) ||
+        typeof node.value !== 'string' ||
+        !onlyFor.includes(parentType) ||
+        (node.parent.parent && node.parent.parent.type === 'JSXAttribute')
+      ) return;
+
+      const isStringLiteral = parentType === 'JSXExpressionContainer';
+      if (getValidation(isStringLiteral ? node.parent : node)) {
+        report(node);
+      }
+    },
+
+    JSXText(node) {
+      if (getValidation(node)) {
+        report(node);
+      }
+    },
+
+    TemplateLiteral(node) {
+      if (
+        node.parent.type !== 'JSXExpressionContainer' ||
+        (node.parent.parent && node.parent.parent.type === 'JSXAttribute')
+      ) return;
+
+      if (getValidation(node.parent)) {
+        report(node);
+      }
+    },
+  };
+};
+
+module.exports.schema = [];

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

@@ -0,0 +1,108 @@
+/**
+ * @fileoverview Detects raw text outside of Text component
+ * @author Alex Zhukov
+ */
+
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-raw-text');
+const RuleTester = require('eslint').RuleTester;
+
+require('babel-eslint');
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const tests = {
+  valid: [
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            return (<View><Text>some text</Text></View>);
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            const text = 'some text';
+            return (<View><Text>{\`\${text}\`}</Text></View>);
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            return (<View><Text>{'some text'}</Text></View>);
+          }
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            return (<View>some text</View>);
+          }
+        }
+      `,
+      errors: [{
+        message: 'Raw text (some text) cannot be used outside of a <Text> tag',
+      }],
+    },
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            const text = 'some text';
+            return (<View>{\`\${text}\`}</View>);
+          }
+        }
+      `,
+      errors: [{
+        message: 'Raw text (TemplateLiteral: text) cannot be used outside of a <Text> tag',
+      }],
+    },
+    {
+      code: `
+        export default class MyComponent extends Component {
+          render() {
+            return (<View>{'some text'}</View>);
+          }
+        }
+      `,
+      errors: [{
+        message: 'Raw text (some text) cannot be used outside of a <Text> tag',
+      }],
+    },
+  ],
+};
+
+const config = {
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaFeatures: {
+      classes: true,
+      jsx: true,
+    },
+  },
+};
+
+tests.valid.forEach(t => Object.assign(t, config));
+tests.invalid.forEach(t => Object.assign(t, config));
+
+ruleTester.run('no-raw-text', rule, tests);