Merge pull request #43 from primer/fix-direct-slot-children

`direct-slot-children` hot fixes

Author: colebemis

.changeset/real-rules-count.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+`direct-slot-children` fixes

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': {

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')
   },

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>`,

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,18 +50,23 @@ 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',
               data: {childName: name, parentName: expectedParentName}
             })
           }
         }
+
+        // Push the current element onto the stack
+        stack.push(name)
+      },
+      JSXClosingElement() {
+        // Pop the current element off the stack
+        stack.pop()
       }
     }
   }