Add the {#component} logic block to put multiple components in one file

[Ocean-OS]

Describe the problem

When working on large projects using Svelte, it can often become difficult to manage the amount of files due to the fact that Svelte only supports single-file components. Not to mention that most other frameworks support multiple components in a single file.

Describe the proposed solution

It would be very useful to add a {#component } block. This would separate components that are all stored in a single file. Here's an example:

{#component Counter}
<script>
let count = $state(0);
</script>
<button onclick={()=>count++}>Count is {count}</button>
{/component}
{#component Greeting}
<script>
let {name = "World"} = $props();
</script>
Hello, {name}!
{/component}

The {#component} block would be used to create multiple components in one file. The single parameter of the logic block is used to denote the name of the component.
Importing these components is quite simple, using destructuring:

<script>
import {Greeting, Counter} from "./Components.svelte"
</script>

This would also be very helpful for Svelte component libraries, as this would greatly decrease the file count of the library, which could also speed up installation and compile time.

Importance

would make my life easier

[Ocean-OS]

Please note that this is not a duplicate of sveltejs/kit#12944.

[7nik]

Please note that this is not a duplicate of sveltejs/kit#12944.

Because this is a duplicate of #2940.

[trueadm]

Snippets provide a way of re-using content, and we've looked into this specifically in the past and tried it out. We universally agreed it wasn't right and caused far too many issues around things like scoped styles.