[fix] Only show lowercase component warning for non-html/svg elements (#7826)

Fixes #5712

Author: dummdidumm

CHANGELOG.md

@@ -16,6 +16,7 @@
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
 * Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
 * Improve parsing speed when encountering large blocks of whitespace [#7675](https://github.com/sveltejs/svelte/issues/7675)
+* Only show lowercase component warning for non-html/svg elements [#5712](https://github.com/sveltejs/svelte/issues/5712)
 
 ## 3.49.0
 

src/compiler/compile/nodes/Element.ts

@@ -1,4 +1,4 @@
-import { is_void } from '../../../shared/utils/names';
+import { is_html, is_svg, is_void } from '../../../shared/utils/names';
 import Node from './shared/Node';
 import Attribute from './Attribute';
 import Binding from './Binding';
@@ -26,8 +26,6 @@ import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
 import { is_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y';
 
-const svg = /^(?: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)$/;
-
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
 
@@ -166,13 +164,13 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st
 	const parent_element = parent.find_nearest(/^Element/);
 
 	if (!parent_element) {
-		return explicit_namespace || (svg.test(element.name)
+		return explicit_namespace || (is_svg(element.name)
 			? namespaces.svg
 			: null);
 	}
 
 	if (parent_element.namespace !== namespaces.foreign) {
-		if (svg.test(element.name.toLowerCase())) return namespaces.svg;
+		if (is_svg(element.name.toLowerCase())) return namespaces.svg;
 		if (parent_element.name.toLowerCase() === 'foreignobject') return null;
 	}
 
@@ -373,7 +371,7 @@ export default class Element extends Node {
 	}
 
 	validate() {
-		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) {
+		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported && !is_svg(this.name) && !is_html(this.name)) {
 			this.component.warn(this, compiler_warnings.component_name_lowercase(this.name));
 		}
 
@@ -827,7 +825,7 @@ export default class Element extends Node {
 			} else if (dimensions.test(name)) {
 				if (this.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `<svg>. Use '${name.replace('offset', 'client')}' instead`));
-				} else if (svg.test(this.name)) {
+				} else if (is_svg(this.name)) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, 'SVG elements'));
 				} else if (is_void(this.name)) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `void elements like <${this.name}>. Use a wrapper element instead`));

src/shared/utils/names.ts

@@ -1,5 +1,18 @@
+/** regex of all html void element names */
 const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
+/** regex of all html element names. svg and math are omitted because they belong to the svg elements namespace */
+const html_element_names = /^(?:a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)$/;
+/** regex of all svg element names */
+const svg = /^(?: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 function is_void(name: string) {
 	return void_element_names.test(name) || name.toLowerCase() === '!doctype';
 }
+
+export function is_html(name: string) {
+	return html_element_names.test(name);
+}
+
+export function is_svg(name: string) {
+	return svg.test(name);
+}

test/validator/samples/component-name-lowercase/input.svelte

@@ -1,7 +1,10 @@
 <script>
 	import thisShouldWarnMe from './MyComponent.svelte';
+	import { form } from './form';
 	let i;
+	form;
 </script>
 
 <thisShouldWarnMe />
-<i />
+<i />
+<form />

test/validator/samples/component-name-lowercase/warnings.json

@@ -2,16 +2,16 @@
 	{
 		"code": "component-name-lowercase",
 		"message": "<thisShouldWarnMe> will be treated as an HTML element unless it begins with a capital letter",
-		"pos": 82,
+		"pos": 121,
 		"start": {
-			"character": 82,
+			"character": 121,
 			"column": 0,
-			"line": 6
+			"line": 8
 		},
 		"end": {
-			"character": 102,
+			"character": 141,
 			"column": 20,
-			"line": 6
+			"line": 8
 		}
 	}
 ]