feat: error on invalid component name (#12821)

* feat: treat tag with `[` as a component, even if lowercase

* chore: simpler regex

Co-authored-by: Conduitry <[email protected]>

* feat: error on invalid component name

* fix: fully revert dot notation test

* tweak error message

---------

Co-authored-by: Conduitry <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 3 people

.changeset/tender-bats-switch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: error on invalid component name

packages/svelte/messages/compile-errors/template.md

@@ -100,6 +100,10 @@
 
 > This type of directive is not valid on components
 
+## component_invalid_name
+
+> Component name must be a valid variable name or dot notation expression
+
 ## const_tag_cycle
 
 > Cyclical dependency detected: %cycle%

packages/svelte/src/compiler/errors.js

@@ -786,6 +786,15 @@ export function component_invalid_directive(node) {
 	e(node, "component_invalid_directive", "This type of directive is not valid on components");
 }
 
+/**
+ * Component name must be a valid variable name or dot notation expression
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function component_invalid_name(node) {
+	e(node, "component_invalid_name", "Component name must be a valid variable name or dot notation expression");
+}
+
 /**
  * Cyclical dependency detected: %cycle%
  * @param {null | number | NodeLike} node

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -75,6 +75,8 @@ function parent_is_shadowroot_template(stack) {
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
 const regex_closing_comment = /-->/;
 const regex_component_name = /^(?:[A-Z]|[A-Za-z][A-Za-z0-9_$]*\.)/;
+const regex_valid_component_name =
+	/^(?:[A-Z][A-Za-z0-9_$.]*|[a-z][A-Za-z0-9_$]*\.[A-Za-z0-9_$])[A-Za-z0-9_$.]*$/;
 
 /** @param {Parser} parser */
 export default function element(parser) {
@@ -136,6 +138,10 @@ export default function element(parser) {
 					? 'SlotElement'
 					: 'RegularElement';
 
+	if (type === 'Component' && !regex_valid_component_name.test(name)) {
+		e.component_invalid_name({ start: start + 1, end: start + name.length + 1 });
+	}
+
 	/** @type {Compiler.ElementLike} */
 	const element =
 		type === 'RegularElement'

packages/svelte/tests/compiler-errors/samples/component-invalid-name/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'component_invalid_name',
+		message: 'Component name must be a valid variable name or dot notation expression',
+		position: [1, 14]
+	}
+});

packages/svelte/tests/compiler-errors/samples/component-invalid-name/main.svelte

@@ -0,0 +1 @@
+<Components[1] />