Added rule option for template literals in refs

jsx-eslint · Feb 18, 2019 · c484491 · c484491
1 parent 66167d5
commit c484491
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 15 deletions.
diff --git a/docs/rules/no-string-refs.md b/docs/rules/no-string-refs.md
@@ -26,32 +26,42 @@ var Hello = createReactClass({
 });
 ```
 
+The following patterns are **not** considered warnings:
+
 ```jsx
 var Hello = createReactClass({
- render: function() {
-  return <div ref={`hello`}>Hello, world.</div>;
- }
+  componentDidMount: function() {
+    var component = this.hello;
+    // ...do something with component
+  },
+  render() {
+    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
+  }
 });
 ```
 
+## Rule Options
+
+```js
+"react/no-string-refs": [<enabled>, {"noTemplateLiterals": <boolean>}]
+```
+### `noTemplateLiterals`
+
+When set to `true`, it will give warning when using template literals for refs.
+The following patterns will be considered warnings:
+
 ```jsx
 var Hello = createReactClass({
  render: function() {
-  return <div ref={`hello${index}`}>Hello, world.</div>;
+  return <div ref={`hello`}>Hello, world.</div>;
  }
 });
 ```
 
-The following patterns are **not** considered warnings:
-
 ```jsx
 var Hello = createReactClass({
-  componentDidMount: function() {
-    var component = this.hello;
-    // ...do something with component
-  },
-  render() {
-    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
-  }
+ render: function() {
+  return <div ref={`hello${index}`}>Hello, world.</div>;
+ }
 });
 ```
diff --git a/lib/rules/no-string-refs.js b/lib/rules/no-string-refs.js
@@ -19,10 +19,19 @@ module.exports = {
       recommended: true,
       url: docsUrl('no-string-refs')
     },
-    schema: []
+    schema: [{
+      type: 'object',
+      properties: {
+        noTemplateLiterals: {
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }]
   },
 
   create: Components.detect((context, components, utils) => {
+    const detectTemplateLiterals = context.options[0] ? context.options[0].noTemplateLiterals : false;
     /**
      * Checks if we are using refs
      * @param {ASTNode} node The AST node being checked.
@@ -76,7 +85,7 @@ module.exports = {
         node.value.type === 'JSXExpressionContainer' &&
         node.value.expression &&
 		((node.value.expression.type === 'Literal' && typeof node.value.expression.value === 'string') ||
-		node.value.expression.type === 'TemplateLiteral')
+		(node.value.expression.type === 'TemplateLiteral' && detectTemplateLiterals))
       );
     }
 

diff --git a/tests/lib/rules/no-string-refs.js b/tests/lib/rules/no-string-refs.js
@@ -38,6 +38,26 @@ ruleTester.run('no-refs', rule, {
       });
     `,
     parser: 'babel-eslint'
+  },
+  {
+    code: [
+      'var Hello = createReactClass({',
+      '  render: function() {',
+      '    return <div ref={`hello`}>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parser: 'babel-eslint'
+  },
+  {
+    code: [
+      'var Hello = createReactClass({',
+      '  render: function() {',
+      '    return <div ref={`hello${index}`}>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parser: 'babel-eslint'
   }
   ],
 
@@ -110,6 +130,7 @@ ruleTester.run('no-refs', rule, {
       '});'
     ].join('\n'),
     parser: 'babel-eslint',
+    options: [{noTemplateLiterals: true}],
     errors: [{
       message: 'Using this.refs is deprecated.'
     }, {
@@ -128,6 +149,7 @@ ruleTester.run('no-refs', rule, {
       '});'
     ].join('\n'),
     parser: 'babel-eslint',
+    options: [{noTemplateLiterals: true}],
     errors: [{
       message: 'Using this.refs is deprecated.'
     }, {