No mention that components must be named starting with an uppercase letter

[handfulofcats]

I'm fairly new to Svelte (and programming, in general) and while working on my first little project I ran into a pretty annoying problem in which my nested components wouldn't run/render when called in the markup. It turns out, as I found out reading #451 and #464 that components' names should start with an uppercase letter, and this was causing the issue.

I would recommend an explicit mention of this is added to the tutorial or the docs, so as to avoid (especially newbies like me) getting hung up on simple things like this.

Playing around I noticed the REPL does throw a warning about this, but for some reason I didn't see that warning in my development environment.

[Conduitry]

https://svelte.dev/docs#Tags says

A lowercase tag, like <div>, denotes a regular HTML element. A capitalised tag, such as <Widget> or <Namespace.Widget>, indicates a component.

[handfulofcats]

My bad! I totally missed that part in the docs.

[benwinding]

Completely agree with the uppercase convention, but the compiler really needs to warn the user about this, as currently it fails silently.... which is sure to frustrate and confuse a lot of people (like myself)

Works

<script>
  import WowIcanNameThisAnything from './MyComponent.svelte';
</script>

<WowIcanNameThisAnything />

Fails silently

<script>
  import thisShouldWarnMe from './MyComponent.svelte';
</script>

<thisShouldWarnMe />

Surely the compiler can detect that a svelte component is being imported with a lowercase first character. And save silly users (like me) from making this error...

[factormystic]

I just found this issue from googling around about if/why svelte components had to start with a capital letter. The docs say this about tags, but I wasn't thinking about it terms of "tags", I was thinking about it in terms of "svelte components that are imported & exported, and also source file names".

[milahu]

todo:
expose a config variable to allow lowercase component names, like

<svelte:options lowercase={true} />

and only show warnings, when names collide with html tags (div, span, ....)

[rchrdnsh]

hi @milahu :-)

has <svelte:options lowercase={true} /> been added to svelte?

[janwillemtulp]

Not sure if this is a bug or a setting I missed, but when I have a line element inside an svg element, I get the component-name-lowercase warning, which is not correct in this case, because a line is a valid svg element.

Did I miss a setting? I assume that since this is standard svg, it should not give a warning about this as a default?

[milahu]

@rchrdnsh nope

@janwillemtulp cannot reproduce with sveltejs/template and

<svg height="5em" viewBox="0 0 100 100">
  <line x1="0" y1="0" x2="100" y2="100" stroke-width="10" stroke="green" />
</svg>

[janwillemtulp]

@milahu hmmm ok, thank you for checking. Let me investigate a bit more then. Thanks!

[dummdidumm]

You get that warning if you have a variable with the same name (in this case line) imported/declared within your script.

[davidcallanan]

I think you should also be able to do:

<lowerCaserVariable.lowerCaseProperty.UppercaseComponent/>

This is because your component could be deep into some data structure hierarchy, and it would be ridiculous to expect the variable names for this hierarchy to be changed just because svelte requires the very first character to be uppercase.

Instead, I think the last segment would have to have the first character be uppercase.

Edit -- I found out how you can achieve this:

<svelte:component this={lowerCaseVariable.lowerCaseProperty.UppercaseComponent}/>