Components inside components

[cristovao-trevisan]

Sometimes there's a need to reuse small bits of html, but I (and many others I hope) found it not worth to create a new file. In React I would create a small const variable (aka component) in the same file, and I think this should be possible in svelte too.

In React it would look something like this:

const ImageWithTitle = ({ title, src }) => (
  <div>
    <h1> {title} </h1>
    <img src={src} alt={title} />
  </div>
)

export default () => (
  <div>
    <ImageWithTitle src="/image-1.png" title="Image 1" />
    <ImageWithTitle src="/image-2.png" title="Image 2" />
  </div>
)

I propose something like:

<defs>
  <ImageWithTitle let:title let:src>
      <h1> {title} </h1>
      <img src={src} alt={title} />
  </ImageWithTitle>
</defs>

...

<ImageWithTitle src="/image-1.png" title="Image 1" />
<ImageWithTitle src="/image-2.png" title="Image 2" />

Another way to do this would be with something like <div component="ImageWithTitle">...</div>.

[Conduitry]

Similar issues: #2858 and #2940.

[cristovao-trevisan]

I will close this as there's already some discussion about the problem.
Maybe some preprocessor would be ideal, as said in #2858
I'll try to implement it

[raythurnvoid]

This feature is going to be implemented with this RFC: sveltejs/rfcs#34