Merge pull request #283 from github/kh-add-custom-component-support

[spike] Allow custom component to be mapped to element type

lib/rules/a11y-no-generic-link-text.js

@@ -1,4 +1,5 @@
-const {elementType, getProp, getPropValue} = require('jsx-ast-utils')
+const {getProp, getPropValue} = require('jsx-ast-utils')
+const {getElementType} = require('../utils/get-element-type')
 
 const bannedLinkText = ['read more', 'here', 'click here', 'learn more', 'more']
 
@@ -23,7 +24,9 @@ module.exports = {
   create(context) {
     return {
       JSXOpeningElement: node => {
-        if (elementType(node) !== 'a') return
+        const elementType = getElementType(context, node)
+
+        if (elementType !== 'a') return
         if (getProp(node.attributes, 'aria-labelledby')) return
 
         let cleanTextContent // text content we can reliably fetch

lib/utils/get-element-type.js

@@ -0,0 +1,36 @@
+const {elementType, getProp, getPropValue} = require('jsx-ast-utils')
+
+/*
+Allows custom component to be mapped to an element type.
+When a default is set, all instances of the component will be mapped to the default.
+If a prop determines the type, it can be specified with `props`.
+
+For now, we only support the mapping of one prop type to an element type, rather than combinations of props.
+*/
+function getElementType(context, node) {
+  const {settings} = context
+  const rawElement = elementType(node)
+  if (!settings) return rawElement
+
+  const componentMap = settings.github && settings.github.components
+  if (!componentMap) return rawElement
+  const component = componentMap[rawElement]
+  if (!component) return rawElement
+  let element = component.default ? component.default : rawElement
+
+  if (component.props) {
+    const props = Object.entries(component.props)
+    for (const [key, value] of props) {
+      const propMap = value
+      const propValue = getPropValue(getProp(node.attributes, key))
+      const mapValue = propMap[propValue]
+
+      if (mapValue) {
+        element = mapValue
+      }
+    }
+  }
+  return element
+}
+
+module.exports = {getElementType}

package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "pretest": "mkdir -p node_modules/ && ln -fs $(pwd) node_modules/",
     "eslint-check": "eslint-config-prettier .eslintrc.js",
-    "test": "npm run eslint-check && eslint . && mocha tests/"
+    "test": "npm run eslint-check && eslint . && mocha tests/**/*.js tests/"
   },
   "repository": {
     "type": "git",
@@ -51,6 +51,7 @@
   ],
   "devDependencies": {
     "@github/prettier-config": "0.0.4",
+    "chai": "^4.3.6",
     "eslint": "^8.0.1",
     "eslint-plugin-eslint-plugin": "^5.0.0",
     "mocha": "^10.0.0"