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!

Related questions

Javascript Interpolation in Styles via CSS Variables? hot 2
Svelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev hot 1
Uncaught TypeError: y.fragment.l is not a function hot 1
Increase elements when using a combination of await block and transition hot 1
Svelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev hot 1
Change body class via &lt;svelte:body /&gt; hot 1
Site: Svelte Cookbook/ Examples hot 1
Missing dependencies in svelte/compiler type definitions hot 1
onMount Error: Function called outside component initialization hot 1
A way to see if slot prop is present hot 1
slot inside #if inside #each : TypeError cannot read property 'd' of null hot 1
unclear / difficult to import uuidv4 hot 1
Use <script type="application/ld+json"> in <svelte:head> hot 1
Error: 'default' is not exported when using babel + moment hot 1
Outros undefined when transitioning to another page hot 1
Github User Rank List