Fix bug in getElementType logic

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   extends: [require.resolve('./lib/configs/recommended'), 'plugin:eslint-plugin/all'],
   plugins: ['eslint-plugin'],
   rules: {
+    'import/extensions': 'off',
     'import/no-commonjs': 'off',
     'filenames/match-regex': 'off',
     'i18n-text/no-en': 'off',

.github/workflows/nodejs.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14, 16, 18]
+        node-version: [18]
 
     steps:
       - uses: actions/checkout@v4

lib/utils/get-element-type.js

@@ -16,15 +16,22 @@ function getElementType(context, node, lazyElementCheck = false) {
 
   // check if the node contains a polymorphic prop
   const polymorphicPropName = settings?.github?.polymorphicPropName ?? 'as'
+
+  const prop = getProp(node.attributes, polymorphicPropName)
+  const literalPropValue = getLiteralPropValue(getProp(node.attributes, polymorphicPropName))
+  let checkConditionalMap = true
+
+  // If the prop is not a literal and we cannot determine it, don't fall back to the conditional map value, if it exists
+  if (prop && !literalPropValue) {
+    checkConditionalMap = false
+  }
   const rawElement = getLiteralPropValue(getProp(node.attributes, polymorphicPropName)) ?? elementType(node)
 
   // if a component configuration does not exists, return the raw element
   if (!settings?.github?.components?.[rawElement]) return rawElement
 
-  const defaultComponent = settings.github.components[rawElement]
-
   // check if the default component is also defined in the configuration
-  return defaultComponent ? defaultComponent : defaultComponent
+  return checkConditionalMap ? settings.github.components[rawElement] : rawElement
 }
 
 module.exports = {getElementType}

package.json

@@ -15,7 +15,7 @@
     "lint:eslint-docs": "npm run update:eslint-docs -- --check",
     "lint:js": "eslint .",
     "pretest": "mkdir -p node_modules/ && ln -fs $(pwd) node_modules/",
-    "test": "npm run eslint-check && npm run lint && mocha tests/**/*.js tests/",
+    "test": "npm run eslint-check && npm run lint && mocha tests/**/*.js tests/**/*.mjs",
     "update:eslint-docs": "eslint-doc-generator"
   },
   "repository": {

tests/utils/get-element-type.mjs

@@ -1,10 +1,7 @@
 import {expect} from 'chai'
-import {getElementType} from '../../lib/utils/get-element-type'
-import {mockJSXAttribute, mockJSXConditionalAttribute, mockJSXOpeningElement} from './mocks'
-
-const mocha = require('mocha')
-const describe = mocha.describe
-const it = mocha.it
+import {getElementType} from '../../lib/utils/get-element-type.js'
+import {mockJSXAttribute, mockJSXConditionalAttribute, mockJSXOpeningElement} from './mocks.js'
+import {describe, it} from 'mocha'
 
 function mockSetting(componentSetting = {}) {
   return {
@@ -63,4 +60,15 @@ describe('getElementType', function () {
     ])
     expect(getElementType({}, node)).to.equal('Box')
   })
+
+  it('returns raw type when polymorphic prop is set to non-literal expression even with component setting', function () {
+    // <Box as={isNavigationOpen ? 'generic' : 'navigation'} />
+    const setting = mockSetting({
+      Box: 'div',
+    })
+    const node = mockJSXOpeningElement('Box', [
+      mockJSXConditionalAttribute('as', 'isNavigationOpen', 'generic', 'navigation'),
+    ])
+    expect(getElementType(setting, node)).to.equal('Box')
+  })
 })

tests/utils/get-role.mjs

@@ -1,6 +1,6 @@
 import {expect} from 'chai'
-import {getRole} from '../../lib/utils/get-role'
-import {mockJSXAttribute, mockJSXConditionalAttribute, mockJSXOpeningElement} from './mocks'
+import {getRole} from '../../lib/utils/get-role.js'
+import {mockJSXAttribute, mockJSXConditionalAttribute, mockJSXOpeningElement} from './mocks.js'
 import {describe, it} from 'mocha'
 
 describe('getRole', function () {

tests/utils/object-map.mjs

@@ -1,6 +1,6 @@
 // @ts-check
 import {expect} from 'chai'
-import ObjectMap from '../../lib/utils/object-map'
+import ObjectMap from '../../lib/utils/object-map.js'
 import {describe, it} from 'mocha'
 
 describe('ObjectMap', function () {