profile
viewpoint

Ask questionsMultiple components in one file

What is this: This is a feature request

Description: Sometimes, putting one component per one file is overkill and hard to maintain, especially when you have a lot of components. Use cases:

  • Styled components.
  • Private component (Component for local use only)

Allow multiple-component declarations in one file would help a lot.

Proposal Example:

design.svelte

{#def Input}
  <input class="input" {...$$props} />

  <style>
    .input {
      background: blue;
    }
  </style>
{/def}

{#def Button}
  <button class="button" {...$$props}>
    <slot></slot>
  </button>

  <style>
    .button {
      background: blue;
    }
  </style>
{/def}

app.svelte

<Button>Hi</Button>

<script>
  import { Button, Input } from './design.svelte'
</script>
sveltejs/svelte

Answer questions PierBover

Personally I think Svelte should support multiple components per file. It's very common to need micro components (buttons, etc) for a single use in a view.

Svelte and Vue both have this single file component concept and personally I've found it quite impractical. What happens in practice is that instead of creating new files for these micro components these become part of the template and then the logic becomes a mess.

The fact there is no official solution for this problem is one of the reasons we won't be adopting Svelte. If this was solved in any way, it should be either included in the official compiler or some sort of official plugin/loader/etc. A third party solution to such a central problem would only introduce fragility.

useful!
source:https://uonfu.com/
answerer
Pier Bover PierBover @plumacloud Mexico pierbover.com Started writing Basic in the 80s. I've worked on all sorts of interactive projects since the late 90s. https://twitter.com/pierb
Github User Rank List