/**
* @fileoverview Prevent void elements (e.g. ,
) from receiving
* children
* @author Joe Lencioni
*/
'use strict';
const has = require('hasown');
const docsUrl = require('../util/docsUrl');
const isCreateElement = require('../util/isCreateElement');
const report = require('../util/report');
// ------------------------------------------------------------------------------
// Helpers
// ------------------------------------------------------------------------------
// Using an object here to avoid array scan. We should switch to Set once
// support is good enough.
const VOID_DOM_ELEMENTS = {
area: true,
base: true,
br: true,
col: true,
embed: true,
hr: true,
img: true,
input: true,
keygen: true,
link: true,
menuitem: true,
meta: true,
param: true,
source: true,
track: true,
wbr: true,
};
function isVoidDOMElement(elementName) {
return has(VOID_DOM_ELEMENTS, elementName);
}
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
const noChildrenInVoidEl = 'Void DOM element <{{element}} /> cannot receive children.';
/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
docs: {
description: 'Disallow void DOM elements (e.g. ``, `
`) from receiving children',
category: 'Best Practices',
recommended: false,
url: docsUrl('void-dom-elements-no-children'),
},
messages: {
noChildrenInVoidEl,
},
schema: [],
},
create: (context) => ({
JSXElement(node) {
const elementName = node.openingElement.name.name;
if (!isVoidDOMElement(elementName)) {
// e.g.