Component Compositions

When you're prototyping and documentation needs go beyond simply passing props and context you can use Compositions. From any Kitbook page documenting a Svelte component, you can click the "Add Composition" button to create a new composition file. This will create a new file with the same name as the component you're documenting, but with the composition extension instead of svelte. For example, if you're documenting MyComponent.svelte, the first composition file will be MyComponent.composition. If you want to create further compositions, click the button again and provide a name. If you choose foo, the file will be MyComponent.foo.composition. Here's a really plain example:

This Kitbook's [SearchResult] page also has a simple Composition.

To get these files with the .composition extension to work like Svelte files, you'll need to update the extensions property in your svelte config:

svelte.config.js
js
const config = {
  extensions: ['.svelte', '.composition'],
  // ...
}
 
export default config

And add this VSCode setting:

.vscode/settings.json
json
{
  "files.associations": {
    "*.composition": "svelte"
  }
}

You can also create a Composition beside a corresponding markdown documentation page as you see in [Advanced Composition Use Cases] (look at the source code) - just click the Add Composition button when viewing your markdown page.

Now that you have a composition in place, learn how to [document your components], including sprinkling in compositions where helpful.