feat: add config option for foreign elements in `svelte/html-self-clo…

…sing` rule (#841)

This PR adds separate configuration option for foreign (SVG and MathML)
elements to `svelte/html-self-closing` rule.

According to HTML spec
(https://html.spec.whatwg.org/multipage/syntax.html#elements-2):
> Raw text, escapable raw text, and normal elements have a start tag to
indicate where they begin, and an end tag to indicate where they end.
The start and end tags of certain normal elements can be omitted, as
described below in the section on optional tags. Those that cannot be
omitted must not be omitted. Void elements only have a start tag; end
tags must not be specified for void elements. Foreign elements must
either have a start tag and an end tag, or a start tag that is marked as
self-closing, in which case they must not have an end tag.

This means that `<div/>` is invalid, while `<path/>` (which is a SVG
element) is OK. This configuration option would allow users to take
advantage of the terser SVG syntax, while still using correct HTML
syntax for normal elements (like `div`).

Closes #837.

.changeset/rotten-news-swim.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: add config option for foreign elements in `svelte/html-self-closing` rule

docs/rules/html-self-closing.md

@@ -70,6 +70,7 @@ config object:
     {
       "void": "always", // or "never" or "ignore"
       "normal": "always", // or "never" or "ignore"
+      "foreign": "always", // or "never" or "ignore"
       "component": "always", // or "never" or "ignore"
       "svelte": "always" // or "never" or "ignore"
     }
@@ -86,6 +87,7 @@ presets:
 config object:
 
 - `void` (`"always"` in default preset)... Style of HTML void elements
+- `foreign` (`"always"` in default preset)... Style of foreign elements (SVG and MathML)
 - `component` (`"always"` in default preset)... Style of svelte components
 - `svelte` (`"always"` in default preset)... Style of svelte special elements (`<svelte:head>`, `<svelte:self>`)
 - `normal` (`"always"` in default preset)... Style of other elements

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -379,6 +379,7 @@ type SvelteHtmlQuotes = []|[{
 type SvelteHtmlSelfClosing = []|[({
   void?: ("never" | "always" | "ignore")
   normal?: ("never" | "always" | "ignore")
+  foreign?: ("never" | "always" | "ignore")
   component?: ("never" | "always" | "ignore")
   svelte?: ("never" | "always" | "ignore")
 } | ("all" | "html" | "none"))]

packages/eslint-plugin-svelte/src/rules/html-self-closing.ts

@@ -1,16 +1,17 @@
 import type { AST } from 'svelte-eslint-parser';
 import { createRule } from '../utils';
-import { getNodeName, isVoidHtmlElement } from '../utils/ast-utils';
+import { getNodeName, isVoidHtmlElement, isForeignElement } from '../utils/ast-utils';
 import { getSourceCode } from '../utils/compat';
 
 const TYPE_MESSAGES = {
 	normal: 'HTML elements',
 	void: 'HTML void elements',
+	foreign: 'foreign (SVG or MathML) elements',
 	component: 'Svelte custom components',
 	svelte: 'Svelte special elements'
 };
 
-type ElementTypes = 'normal' | 'void' | 'component' | 'svelte';
+type ElementTypes = 'normal' | 'void' | 'foreign' | 'component' | 'svelte';
 
 export default createRule('html-self-closing', {
 	meta: {
@@ -37,6 +38,9 @@ export default createRule('html-self-closing', {
 							normal: {
 								enum: ['never', 'always', 'ignore']
 							},
+							foreign: {
+								enum: ['never', 'always', 'ignore']
+							},
 							component: {
 								enum: ['never', 'always', 'ignore']
 							},
@@ -57,6 +61,7 @@ export default createRule('html-self-closing', {
 		let options = {
 			void: 'always',
 			normal: 'always',
+			foreign: 'always',
 			component: 'always',
 			svelte: 'always'
 		};
@@ -67,6 +72,7 @@ export default createRule('html-self-closing', {
 				options = {
 					void: 'never',
 					normal: 'never',
+					foreign: 'never',
 					component: 'never',
 					svelte: 'never'
 				};
@@ -75,6 +81,7 @@ export default createRule('html-self-closing', {
 				options = {
 					void: 'always',
 					normal: 'never',
+					foreign: 'always',
 					component: 'never',
 					svelte: 'always'
 				};
@@ -101,6 +108,7 @@ export default createRule('html-self-closing', {
 			if (node.kind === 'component') return 'component';
 			if (node.kind === 'special') return 'svelte';
 			if (isVoidHtmlElement(node)) return 'void';
+			if (isForeignElement(node)) return 'foreign';
 			return 'normal';
 		}
 

packages/eslint-plugin-svelte/src/utils/ast-utils.ts

@@ -3,7 +3,7 @@ import type { TSESTree } from '@typescript-eslint/types';
 import type { Scope, Variable } from '@typescript-eslint/scope-manager';
 import type { AST as SvAST } from 'svelte-eslint-parser';
 import * as eslintUtils from '@eslint-community/eslint-utils';
-import voidElements from './void-elements';
+import { voidElements, svgElements, mathmlElements } from './element-types';
 import { getSourceCode } from './compat';
 
 /**
@@ -560,6 +560,13 @@ export function isVoidHtmlElement(node: SvAST.SvelteElement): boolean {
 	return voidElements.includes(getNodeName(node));
 }
 
+/**
+ * Returns true if element is known foreign (SVG or MathML) element
+ */
+export function isForeignElement(node: SvAST.SvelteElement): boolean {
+	return svgElements.includes(getNodeName(node)) || mathmlElements.includes(getNodeName(node));
+}
+
 /** Checks whether the given identifier node is used as an expression. */
 export function isExpressionIdentifier(node: TSESTree.Identifier): boolean {
 	const parent = node.parent;

packages/eslint-plugin-svelte/src/utils/element-types.ts

@@ -0,0 +1,140 @@
+export const voidElements = [
+	'area',
+	'base',
+	'br',
+	'col',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'menuitem',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr'
+];
+
+export const svgElements = [
+	'altGlyph',
+	'altGlyphDef',
+	'altGlyphItem',
+	'animate',
+	'animateColor',
+	'animateMotion',
+	'animateTransform',
+	'circle',
+	'clipPath',
+	'color-profile',
+	'cursor',
+	'defs',
+	'desc',
+	'discard',
+	'ellipse',
+	'feBlend',
+	'feColorMatrix',
+	'feComponentTransfer',
+	'feComposite',
+	'feConvolveMatrix',
+	'feDiffuseLighting',
+	'feDisplacementMap',
+	'feDistantLight',
+	'feDropShadow',
+	'feFlood',
+	'feFuncA',
+	'feFuncB',
+	'feFuncG',
+	'feFuncR',
+	'feGaussianBlur',
+	'feImage',
+	'feMerge',
+	'feMergeNode',
+	'feMorphology',
+	'feOffset',
+	'fePointLight',
+	'feSpecularLighting',
+	'feSpotLight',
+	'feTile',
+	'feTurbulence',
+	'filter',
+	'font',
+	'font-face',
+	'font-face-format',
+	'font-face-name',
+	'font-face-src',
+	'font-face-uri',
+	'foreignObject',
+	'g',
+	'glyph',
+	'glyphRef',
+	'hatch',
+	'hatchpath',
+	'hkern',
+	'image',
+	'line',
+	'linearGradient',
+	'marker',
+	'mask',
+	'mesh',
+	'meshgradient',
+	'meshpatch',
+	'meshrow',
+	'metadata',
+	'missing-glyph',
+	'mpath',
+	'path',
+	'pattern',
+	'polygon',
+	'polyline',
+	'radialGradient',
+	'rect',
+	'set',
+	'solidcolor',
+	'stop',
+	'svg',
+	'switch',
+	'symbol',
+	'text',
+	'textPath',
+	'tref',
+	'tspan',
+	'unknown',
+	'use',
+	'view',
+	'vkern'
+];
+
+export const mathmlElements = [
+	'annotation',
+	'annotation-xml',
+	'maction',
+	'math',
+	'merror',
+	'mfrac',
+	'mi',
+	'mmultiscripts',
+	'mn',
+	'mo',
+	'mover',
+	'mpadded',
+	'mphantom',
+	'mprescripts',
+	'mroot',
+	'mrow',
+	'ms',
+	'mspace',
+	'msqrt',
+	'mstyle',
+	'msub',
+	'msubsup',
+	'msup',
+	'mtable',
+	'mtd',
+	'mtext',
+	'mtr',
+	'munder',
+	'munderover',
+	'semantics'
+];

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/foreign-never/_config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"foreign": "never"
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/foreign-never/svelte-never-errors.yaml

@@ -0,0 +1,8 @@
+- message: Disallow self-closing on foreign (SVG or MathML) elements.
+  line: 2
+  column: 12
+  suggestions: null
+- message: Disallow self-closing on foreign (SVG or MathML) elements.
+  line: 3
+  column: 13
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/foreign-never/svelte-never-input.svelte

@@ -0,0 +1,3 @@
+<!-- prettier-ignore -->
+<svg><path /></svg>
+<math><msup /></math>

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/foreign-never/svelte-never-output.svelte

@@ -0,0 +1,3 @@
+<!-- prettier-ignore -->
+<svg><path ></path></svg>
+<math><msup ></msup></math>

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/presets/html/preset-html-errors.yaml

@@ -10,7 +10,15 @@
   line: 5
   column: 18
   suggestions: null
+- message: Require self-closing on foreign (SVG or MathML) elements.
+  line: 6
+  column: 13
+  suggestions: null
+- message: Require self-closing on foreign (SVG or MathML) elements.
+  line: 7
+  column: 14
+  suggestions: null
 - message: Require self-closing on Svelte special elements.
-  line: 8
+  line: 10
   column: 13
   suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/presets/html/preset-html-input.svelte

@@ -3,6 +3,8 @@
   <div />
   <img>
   <TestComponent />
+  <svg><path></path></svg>
+  <math><msup></msup></math>
 </div>
 <!-- prettier-ignore -->
 <svelte:head></svelte:head>

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/presets/html/preset-html-output.svelte

@@ -3,6 +3,8 @@
   <div ></div>
   <img/>
   <TestComponent ></TestComponent>
+  <svg><path/></svg>
+  <math><msup/></math>
 </div>
 <!-- prettier-ignore -->
 <svelte:head/>

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/presets/none/preset-none-errors.yaml

@@ -10,7 +10,15 @@
   line: 5
   column: 8
   suggestions: null
+- message: Disallow self-closing on foreign (SVG or MathML) elements.
+  line: 6
+  column: 14
+  suggestions: null
+- message: Disallow self-closing on foreign (SVG or MathML) elements.
+  line: 7
+  column: 15
+  suggestions: null
 - message: Disallow self-closing on Svelte special elements.
-  line: 8
+  line: 10
   column: 14
   suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/presets/none/preset-none-input.svelte

@@ -3,6 +3,8 @@
   <div />
   <TestComponent />
   <img />
+  <svg><path /></svg>
+  <math><msup /></math>
 </div>
 <!-- prettier-ignore -->
 <svelte:head />

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/presets/none/preset-none-output.svelte

@@ -3,6 +3,8 @@
   <div ></div>
   <TestComponent ></TestComponent>
   <img >
+  <svg><path ></path></svg>
+  <math><msup ></msup></math>
 </div>
 <!-- prettier-ignore -->
 <svelte:head ></svelte:head>

packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/valid/test01-input.svelte

@@ -2,6 +2,8 @@
 	<div />
 	<div>hello</div>
 	<img />
+	<svg><path /></svg>
+	<math><msup /></math>
 	{#if true}
 		<svelte:self />
 	{/if}