Create direct-slot-children rule

[colebemis]

Related to primer/react#1690

Some Primer React components use a slots pattern under the hood to render subcomponents in specific places. For example, the PageLayout component renders PageLayout.Header in the header area, and PageLayout.Footer in the footer area. These subcomponents must be direct children of the parent component, and cannot be nested inside other components.

Rule details

This rule enforces that slot components are direct children of their parent component.

👎 Examples of incorrect code for this rule:

/* eslint primer-react/direct-slot-children: "error" */
import {PageLayout} from '@primer/react'

const MyHeader = () => <PageLayout.Header>Header</PageLayout.Header>

const App = () => (
  <PageLayout>
    <MyHeader />
  </PageLayout>
)

👍 Examples of correct code for this rule:

/* eslint primer-react/direct-slot-children: "error" */
import {PageLayout} from '@primer/react'

const MyHeader = () => <div>Header</div>

const App = () => (
  <PageLayout>
    <PageLayout.Header>
      <MyHeader />
    </PageLayout.Header>
  </PageLayout>
)

[changeset-bot]

🦋 Changeset detected

Latest commit: 0bda0ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-primer-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[siddharthkp]

Maybe I'm missing the case here, but I'm not sure if we need to maintain a stack?

[siddharthkp]

I think this can be simpler by the checking parent element?

I tried the suggestion locally and it seems to work, I can push it if you'd like

Suggested change

	create(context) {
	const stack = []
	return {
	JSXOpeningElement(jsxNode) {
	const name = getJSXOpeningElementName(jsxNode)
	// If component is a Primer component and a slot child,
	// check if it's a direct child of the slot parent
	if (isPrimerComponent(jsxNode.name, context.getScope(jsxNode)) && slotChildToParentMap[name]) {
	const parentName = slotChildToParentMap[name]
	const parent = last(stack)
	if (parent !== parentName) {
	context.report({
	node: jsxNode,
	messageId: 'directSlotChildren',
	data: {childName: name, parentName}
	})
	}
	}
	// Push the current element onto the stack
	stack.push(name)
	},
	JSXClosingElement() {
	// Pop the current element off the stack
	stack.pop()
	}
	}
	}
	create(context) {
	return {
	JSXOpeningElement(jsxNode) {
	const name = getJSXOpeningElementName(jsxNode)
	// If component is a Primer component and a slot child,
	// check if it's a direct child of the slot parent
	if (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) {
	context.report({
	node: jsxNode,
	messageId: 'directSlotChildren',
	data: {childName: name, parentName: expectedParentName}
	})
	}
	}
	}
	}
	}