Merge pull request #284 from github/kh-add-docs-for-component-config

khiga8 · web-flow · commit 55f10dca0dae · 2022-07-22T09:51:24.000-07:00
Update README with component mapping setting
diff --git a/README.md b/README.md
@@ -41,6 +41,35 @@ The available configs are:
 - `typescript`
   - Useful rules when writing TypeScript.
 
+### Component mapping (Experimental)
+
+_Note: This is experimental and subject to change._
+
+The `react` config includes rules which target specific HTML elements. You may provide a mapping of custom components to an HTML element in your `eslintrc` configuration to increase linter coverage.
+
+For each component, you may specify a `default` and/or `props`. `default` may make sense if there's a 1:1 mapping between a component and an HTML element. However, if the HTML output of a component is dependent on a prop value, you can provide a mapping using the `props` key. To minimize conflicts and complexity, this currently only supports the mapping of a single prop type.
+
+```json
+{
+  "settings": {
+    "github": {
+      "components": {
+        "Box": { "default": "p" },
+        "Link": { "props": {"as": { "undefined": "a", "a": "a", "button": "button"}}},
+      }
+    }
+  }
+}
+```
+
+This config will be interpreted in the following way:
+
+- All `<Box>` elements will be treated as a `p` element type.
+- `<Link>` without a defined `as` prop will be treated as a `a`.
+- `<Link as='a'>` will treated as an `a` element type.
+- `<Link as='button'>` will be treated as a `button` element type.
+- `<Link as='summary'>` will be treated as the raw `Link` type because there is no configuration set for `as='summary'`.
+
 ### Rules
 
 - [Array Foreach](./docs/rules/array-foreach.md)
diff --git a/lib/configs/react.js b/lib/configs/react.js
@@ -1,6 +1,9 @@
 module.exports = {
-  env: {
-    browser: true
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
   },
   plugins: ['github', 'jsx-a11y'],
   extends: ['plugin:jsx-a11y/recommended'],
