New Rule: `svelte/no-dupe-slot-name` rule

[ota-meshi]

Motivation

I would like a new rule to warn when using the same slot name multiple times.

<ContactCard>
  <span slot="name">
    Foo
  </span>
  <span slot="name">
    Bar
  </span>
</ContactCard>

Description

The same slot name cannot be used multiple times. It gives an error in Svelte's compiler. If Svelte warns you, you might think you don't need ESLint rule. I checked it and it seems to be the render (generate) phase that errors out on duplicate slot names. Since the error is not detected at the time of compilation on language server, there is a possibility that we will notice it late.

So I think we need a rule to check for duplicate slot names.

Examples

<!-- ✓ GOOD -->
<Foo>
  <span></span>
  <span></span>
</Foo>
<Foo>
  <span slot="firstName">John</span>
  <span slot="lastName">Smith</span>
</Foo>
<Foo>
  <span slot="default"></span>
</Foo>

<!-- ✗ BAD -->
<Foo>
  <span></span>
  <span slot="default"></span>
</Foo>
<Foo>
  <span slot="name">John</span>
  <span slot="name">Smith</span>
</Foo>
<Foo>
  text
  <span slot="default"></span>
</Foo>

Additional comments

No response

[baseballyama]

I got a compile error.

https://svelte.dev/repl/ed634ccfee984a8cab06235cc48ddd06?version=3.53.1

[ota-meshi]

You're right, but the problem is that we can't catch warnings when using compile() with the "generate: false" option and when using parse().

• compiler.parse(code) ... can't catch the error.
• compiler.compile(code, { generate: false }) ... can't catch the error.
• compiler.compile(code) ... catch the error.

https://stackblitz.com/edit/sveltejs-kit-template-default-i68vml?file=src%2Froutes%2F%2Bpage.server.js

Language servers and this eslint-plugin-svelte and eslint-plugin-svelte3 use them, so they can't currently catch the problem. Therefore, the user may notice the problem a little later. Users will notice the problem when compiling with vite or rollup. I want the user to be notified of the problem while writing the code.

[baseballyama]

Ah, now I got it. Thank you for your explanation. My next question is that, if a user runs npm run dev, immediately the user can see the console error on VSCode right? So I think that even now, users can know this error while writing the code.

And according to the docs, there is no concrete spec regarding this error. So I'm worried that we need to follow such unclear specs in the future. (For instance, possibly in the future, slot can use inside {#if} statement.)

And at least we need to consider <svelte:fragment>.

[ota-meshi]

Thank you for letting me know. If there is a possibility that the slot name limit will be changed, I think this rule has a very low priority. I would like to keep this issue open and see how it progresses 😉.