eslint-plugin-primer-react 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 2.0.1
+
+### Patch Changes
+
+- [#43](https://github.com/primer/eslint-plugin-primer-react/pull/43) [`943e49a`](https://github.com/primer/eslint-plugin-primer-react/commit/943e49a62ada544b73320791858398705ed8208e) Thanks [@colebemis](https://github.com/colebemis)! - `direct-slot-children` fixes
+
 ## 2.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/configs/recommended.js

@@ -8,14 +8,15 @@ module.exports = {
   plugins: ['primer-react', 'github'],
   extends: ['plugin:github/react'],
   rules: {
+    'primer-react/direct-slot-children': 'error',
     'primer-react/no-deprecated-colors': 'warn',
     'primer-react/no-system-props': 'warn'
   },
   settings: {
     github: {
       components: {
-        Link: { props: { as: { undefined: 'a', 'a': 'a', 'button': 'button'}}},
-        Button: { default: 'button' },
+        Link: {props: {as: {undefined: 'a', a: 'a', button: 'button'}}},
+        Button: {default: 'button'}
       }
     },
     'jsx-a11y': {

package/src/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   rules: {
+    'direct-slot-children': require('./rules/direct-slot-children'),
     'no-deprecated-colors': require('./rules/no-deprecated-colors'),
     'no-system-props': require('./rules/no-system-props')
   },

package/src/rules/__tests__/direct-slot-children.test.js

@@ -15,6 +15,7 @@ ruleTester.run('direct-slot-children', rule, {
   valid: [
     `import {PageLayout} from '@primer/react'; <PageLayout><PageLayout.Header>Header</PageLayout.Header><PageLayout.Footer>Footer</PageLayout.Footer></PageLayout>`,
     `import {PageLayout} from '@primer/react'; <PageLayout><div><PageLayout.Pane>Header</PageLayout.Pane></div></PageLayout>`,
+    `import {PageLayout} from '@primer/react'; <PageLayout>{true ? <PageLayout.Header>Header</PageLayout.Header> : null}</PageLayout>`,
     `import {PageLayout} from './PageLayout'; <PageLayout.Header>Header</PageLayout.Header>`,
     {
       code: `import {Foo} from './Foo'; <Foo><div><Foo.Bar></Foo.Bar></div></Foo>`,

package/src/rules/direct-slot-children.js

@@ -1,4 +1,5 @@
 const {isPrimerComponent} = require('../utils/is-primer-component')
+const {last} = require('lodash')
 
 const slotParentToChildMap = {
   PageLayout: ['PageLayout.Header', 'PageLayout.Footer'],
@@ -34,6 +35,7 @@ module.exports = {
     }
   },
   create(context) {
+    const stack = []
     return {
       JSXOpeningElement(jsxNode) {
         const name = getJSXOpeningElementName(jsxNode)
@@ -48,11 +50,9 @@ module.exports = {
           (skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) &&
           slotChildToParentMap[name]
         ) {
-          const JSXElement = jsxNode.parent
-          const parent = JSXElement.parent
-
           const expectedParentName = slotChildToParentMap[name]
-          if (parent.type !== 'JSXElement' || getJSXOpeningElementName(parent.openingElement) !== expectedParentName) {
+          const parent = last(stack)
+          if (parent !== expectedParentName) {
             context.report({
               node: jsxNode,
               messageId: 'directSlotChildren',
@@ -60,6 +60,13 @@ module.exports = {
             })
           }
         }
+
+        // Push the current element onto the stack
+        stack.push(name)
+      },
+      JSXClosingElement() {
+        // Pop the current element off the stack
+        stack.pop()
       }
     }
   }