feat: treat tag with . as a component, even if lowercase (#12798)

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

* changeset

* consistency

* note breaking change

* oops, wrong place

Author: Rich-Harris

.changeset/gold-students-jump.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: treat tag with `.` as a component, even if lowercase

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

@@ -74,7 +74,7 @@ function parent_is_shadowroot_template(stack) {
 
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
 const regex_closing_comment = /-->/;
-const regex_capital_letter = /[A-Z]/;
+const regex_component_name = /^(?:[A-Z]|[A-Za-z][A-Za-z0-9_$]*\.)/;
 
 /** @param {Parser} parser */
 export default function element(parser) {
@@ -127,7 +127,7 @@ export default function element(parser) {
 
 	const type = meta_tags.has(name)
 		? meta_tags.get(name)
-		: regex_capital_letter.test(name[0])
+		: regex_component_name.test(name)
 			? 'Component'
 			: name === 'title' && parent_is_head(parser.stack)
 				? 'TitleElement'

packages/svelte/tests/runtime-runes/samples/dot-notation-component/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<h1>hello</h1>'
+});

packages/svelte/tests/runtime-runes/samples/dot-notation-component/child.svelte

@@ -0,0 +1 @@
+<h1>hello</h1>

packages/svelte/tests/runtime-runes/samples/dot-notation-component/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import child from './child.svelte';
+
+	const components = { child };
+</script>
+
+<components.child />

sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

@@ -161,6 +161,16 @@ Svelte now use Mutation Observers instead of IFrames to measure dimensions for `
 
 Content inside component tags becomes a [snippet prop](/docs/snippets) called `children`. You cannot have a separate prop by that name.
 
+## Dot notation indicates a component
+
+In Svelte 4, `<foo.bar>` would create an element with a tag name of `"foo.bar"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:
+
+```svelte
+{#each items as item}
+	<item.component {...item.props} />
+{/each}
+```
+
 ## Breaking changes in runes mode
 
 Some breaking changes only apply once your component is in runes mode.