[new] - Integrate with latest jsx-ast-utils propName API

more robust name extraction

Author: beefancohen

src/rules/aria-props.js

@@ -9,6 +9,7 @@
 
 import ariaAttributes from '../util/attributes/ARIA';
 import getSuggestion from '../util/getSuggestion';
+import { propName } from 'jsx-ast-utils';
 
 const errorMessage = name => {
   const dictionary = Object.keys(ariaAttributes).map(aria => aria.toLowerCase());
@@ -24,8 +25,8 @@ const errorMessage = name => {
 
 module.exports = context => ({
   JSXAttribute: attribute => {
-    const name = attribute.name.name;
-    const normalizedName = name.toUpperCase();
+    const name = propName(attribute);
+    const normalizedName = name ? name.toUpperCase() : '';
 
     // `aria` needs to be prefix of property.
     if (normalizedName.indexOf('ARIA-') !== 0) {

src/rules/aria-proptypes.js

@@ -8,7 +8,7 @@
 // ----------------------------------------------------------------------------
 
 import ariaAttributes from '../util/attributes/ARIA';
-import { getLiteralPropValue } from 'jsx-ast-utils';
+import { getLiteralPropValue, propName } from 'jsx-ast-utils';
 
 const errorMessage = (name, type, permittedValues) => {
   switch (type) {
@@ -52,8 +52,8 @@ const validityCheck = (value, expectedType, permittedValues) => {
 
 module.exports = context => ({
   JSXAttribute: attribute => {
-    const name = attribute.name.name;
-    const normalizedName = name.toUpperCase();
+    const name = propName(attribute);
+    const normalizedName = name ? name.toUpperCase() : '';
 
     // Not a valid aria-* state or property.
     if (normalizedName.indexOf('ARIA-') !== 0 || ariaAttributes[normalizedName] === undefined) {

src/rules/aria-role.js

@@ -8,13 +8,15 @@
 // ----------------------------------------------------------------------------
 
 import roles from '../util/attributes/role';
-import { getLiteralPropValue } from 'jsx-ast-utils';
+import { getLiteralPropValue, propName } from 'jsx-ast-utils';
 
 const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
 
 module.exports = context => ({
   JSXAttribute: attribute => {
-    const normalizedName = attribute.name.name.toUpperCase();
+    const name = propName(attribute);
+    const normalizedName = name ? name.toUpperCase() : '';
+
     if (normalizedName !== 'ROLE') {
       return;
     }

src/rules/aria-unsupported-elements.js

@@ -10,7 +10,7 @@
 
 import DOM from '../util/attributes/DOM';
 import ARIA from '../util/attributes/ARIA';
-import { elementType } from 'jsx-ast-utils';
+import { elementType, propName } from 'jsx-ast-utils';
 
 const errorMessage = invalidProp =>
   `This element does not support ARIA roles, states and properties. \
@@ -34,10 +34,13 @@ module.exports = context => ({
         return;
       }
 
-      if (invalidAttributes.indexOf(prop.name.name.toUpperCase()) > -1) {
+      const name = propName(prop);
+      const normalizedName = name ? name.toUpperCase() : '';
+
+      if (invalidAttributes.indexOf(normalizedName) > -1) {
         context.report({
           node,
-          message: errorMessage(prop.name.name),
+          message: errorMessage(name),
         });
       }
     });

src/rules/role-has-required-aria-props.js

@@ -9,7 +9,7 @@
 // ----------------------------------------------------------------------------
 
 import validRoleTypes from '../util/attributes/role';
-import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
+import { getProp, getLiteralPropValue, propName } from 'jsx-ast-utils';
 
 
 const errorMessage = (role, requiredProps) =>
@@ -18,7 +18,9 @@ const errorMessage = (role, requiredProps) =>
 
 module.exports = context => ({
   JSXAttribute: attribute => {
-    const normalizedName = attribute.name.name.toUpperCase();
+    const name = propName(attribute);
+    const normalizedName = name ? name.toUpperCase() : '';
+
     if (normalizedName !== 'ROLE') {
       return;
     }

src/rules/role-supports-aria-props.js

@@ -11,7 +11,7 @@
 import ROLES from '../util/attributes/role';
 import ARIA from '../util/attributes/ARIA';
 import getImplicitRole from '../util/getImplicitRole';
-import { getProp, getLiteralPropValue, elementType } from 'jsx-ast-utils';
+import { getProp, getLiteralPropValue, elementType, propName } from 'jsx-ast-utils';
 
 const errorMessage = (attr, role, tag, isImplicit) => {
   if (isImplicit) {
@@ -47,10 +47,13 @@ module.exports = context => ({
         return;
       }
 
-      if (invalidAriaPropsForRole.indexOf(prop.name.name.toUpperCase()) > -1) {
+      const name = propName(prop);
+      const normalizedName = name ? name.toUpperCase() : '';
+
+      if (invalidAriaPropsForRole.indexOf(normalizedName) > -1) {
         context.report({
           node,
-          message: errorMessage(prop.name.name, roleValue, type, isImplicit),
+          message: errorMessage(name, roleValue, type, isImplicit),
         });
       }
     });

src/rules/tabindex-no-positive.js

@@ -7,14 +7,14 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { getLiteralPropValue } from 'jsx-ast-utils';
+import { getLiteralPropValue, propName } from 'jsx-ast-utils';
 
 const errorMessage = 'Avoid positive integer values for tabIndex.';
 
 module.exports = context => ({
   JSXAttribute: attribute => {
-    const name = attribute.name.name;
-    const normalizedName = name.toUpperCase();
+    const name = propName(attribute);
+    const normalizedName = name ? name.toUpperCase() : '';
 
     // Check if tabIndex is the attribute
     if (normalizedName !== 'TABINDEX') {