diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fee76add26..c0f09fedf02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,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 diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 119e1879540..df0e649122a 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/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, `. 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`)); diff --git a/src/shared/utils/names.ts b/src/shared/utils/names.ts index 5e13e6cd877..eaecac60f13 100644 --- a/src/shared/utils/names.ts +++ b/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 ommitted because they blong 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); +} diff --git a/test/validator/samples/component-name-lowercase/input.svelte b/test/validator/samples/component-name-lowercase/input.svelte index ebd7cf34814..bfca8cc4713 100644 --- a/test/validator/samples/component-name-lowercase/input.svelte +++ b/test/validator/samples/component-name-lowercase/input.svelte @@ -1,7 +1,10 @@ - \ No newline at end of file + +
diff --git a/test/validator/samples/component-name-lowercase/warnings.json b/test/validator/samples/component-name-lowercase/warnings.json index 37765b423db..57aac0c2a5c 100644 --- a/test/validator/samples/component-name-lowercase/warnings.json +++ b/test/validator/samples/component-name-lowercase/warnings.json @@ -2,16 +2,16 @@ { "code": "component-name-lowercase", "message": " 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 } } ]