Svelte: support using svelte templates (v3) in stories

[rixo]

Is your feature request related to a problem? Please describe.

There are 2 ways a Svelte component can be created. Either the compiled component can be manually created and added to the DOM, or the component can be included in another Svelte component.

Current Svelte support in Storybook uses the first approach. Unfortunately, some important features (e.g. slots, bindings...) are only available when a component is used in Svelte context (i.e. second approach).

This is acknowledged in current Storybook for Svelte guide, that further suggest creating stories specific components when access to said features is needed in stories:

Svelte storybooks don’t support using templates in a story yet. Instead, you can create a .svelte file to compose components together, or simply to access all normal Svelte functionality, like slots.

While this works, this is not very practical to have to create multiple files to support a single kind of stories. This does not match the usual workflow for writing stories in other supported frameworks (at least React that I know of). And it does not align nicely with Svelte's own stated accent on conciseness.

Also, current Storybook support does not include Svelte v3, though that could easily be fixed independently.

Describe the solution you'd like

I would like to be able to write stories using Svelte v3 templates, which would give access to all Svelte features directly from the stories.

Describe alternatives you've considered

Just updating the current code to support Svelte v3 would be far easier, but would not address the stories authoring issue.

Are you able to assist bring the feature to reality?

I have hacked together a POC that works for what I want. I'd be glad to work this into a PR but I would need guidance on how to best integrate this code with Storybook, and maybe some discussion on how to best expose this to end users.

Additional context

Here's the custom syntax I came with in my POC:

<!-- writing.stories.svelte -->

<script>
  // This is an actual Svelte v3 component, so everything Svelte (slots,
  // bindings, scoped <style>, <script>, etc.) is available here.

  import { Story, storiesOf } from '@storybook/svelte'

  import Example from './Example.svelte'

  // Custom Svelte specific storiesOf, that allows a more concise syntax to
  // pass module (see next example for verbose alternative)
  storiesOf('stories|storiesOf', module)
</script>

<style>
* { color: red; }
</style>

<Story name="first story">
  <p>Additional markup around the component being storied.</p>
  <Example value="Value 1" />
</Story>

<Story name="second story">
  <Example value="Value 2">
    <p>SLOT</p>
  </Example>
</Story>

<div>
  <hr>

  <p>Extra markup outside of `Story` components will be rendered on every
    story's "page".</p>

  <p>This is not an intended design goal, but a side effect of the way
    Svelte templates support is implemented. IMO this is not a bad thing and,
    in any event, I have no idea if/how this could be prevented, especially
    in a clean and simple way.</p>
</div>

Here's how I currently support multiple kinds (i.e. multiple storiesOf) of stories in a single file.

I am not a fan of the way module is exposed to the template, and the error prone repetition of module={mod} that ensue. Maybe this use case would deserve additional work to find a better alternative. Or maybe this use case is not idiomatic to Storybook and should not be supported at all?

<!-- StoriesOf.stories.svelte -->

<script>
  // NOTE using StoriesOf component, instead of storiesOf function
  import { Story, StoriesOf } from '@storybook/svelte'

  import Example from './Example.svelte'

  // `module` is not directly accessible in the HTML part, so we need to expose it :(
  const mod = module
</script>

<StoriesOf kind="stories|StoriesOf (multiple)" module={mod}>

  <Story name="story with slot">
    <Example value="A1">
      <span>Slot</span>
    </Example>
  </Story>

  <Story name="another story">
    <Example value="A2" />
  </Story>

</StoriesOf>

<StoriesOf kind="stories|StoriesOf (multiple)/other kind" module={mod}>

  <Story name="whatever">
    <div>Whatever</div>
  </Story>

</StoriesOf>

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

This was fixed in #6698 and released in 5.1.0-alpha.40. Closing & pls comment if it's not working for you or open a new issue.

[colinbate]

I don't think the core of this issue is resolved. While Svelte 3 support has been added (fantastic), the goal of this issue was to allow for more idiomatic Svelte usage by turning story definitions into Svelte components themselves.

As to your examples @rixo I think the first one is probably the best idea. Granted I'm just beginning with Storybook, it feels more appropriate. Just like you don't have more than one component per file, I wouldn't expect to have stories for multiple components in a single file.

[shilman]

@colinbate Any interest in trying to tackle this?

[rixo]

I've got something already. I'm wrapping it up a bit, and I'll send a PR.

[phated]

Further work on this is happening at storybookjs/addon-svelte-csf#1

[shilman]

Closing this in favor of https://github.com/storybookjs/addon-svelte-csf/, which looks promising and like it should be available soon.