Handle conditional expressions in :is

Author: kddnewton

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## [Unreleased]
 
+### Changed
+
+- When you pass a conditional expression into an `:is`, then `getElementType` would not be able to handle it. It doesn't truly handle it now, as it just ends up returning `null` for the value of the `:is` expression, but at least now it doesn't break.
+
 ## [0.5.0] - 2020-09-05
 
 ### Changed

src/rules/__tests__/interactive-supports-focus.test.js

@@ -60,7 +60,8 @@ makeRuleTester("interactive-supports-focus", rule, {
     "<div role='textbox' tabindex='0' @click='void 0' />",
     "<div role='textbox' aria-disabled='true' @click='void 0' />",
     "<Foo.Bar @click='void 0' aria-hidden='false' />",
-    "<Input @click='void 0' type='hidden' />"
+    "<Input @click='void 0' type='hidden' />",
+    `<component role="button" :is="foo ? 'a' : 'button'" />`
   ],
   invalid: [
     ...rule.interactiveRoles.flatMap((role) =>

src/utils/getAttributeValue.js

@@ -10,7 +10,16 @@ const getAttributeValue = (node) => {
   }
 
   if (key.name.name === "bind" && value.expression) {
-    return value.type === "Literal" ? value.expression.value : value.expression;
+    // <div :height="100" />
+    if (value.expression.type === "Literal") {
+      return value.expression.value;
+    }
+
+    // TODO we're effectively using this as just a placeholder to let rules know
+    // that a value has been passed in for this attribute. We should replace
+    // this with a stronger API to either explicitly handel all of the different
+    // types of values or just return a special symbol or something else.
+    return value.expression;
   }
 
   return null;

src/utils/getElementType.js

@@ -1,7 +1,17 @@
 const getElementAttributeValue = require("./getElementAttributeValue");
 const makeKebabCase = require("./makeKebabCase");
 
-const getElementType = (node) =>
-  makeKebabCase(getElementAttributeValue(node, "is") || node.rawName);
+const getElementType = (node) => {
+  let is = getElementAttributeValue(node, "is");
+
+  // If we could not parse the `is` value into a simple literal, we're going to
+  // have to ignore it because we're not smart enough to handle multiple values
+  // yet.
+  if (typeof is !== "string") {
+    is = null;
+  }
+
+  return makeKebabCase(is || node.rawName);
+};
 
 module.exports = getElementType;