Svelte Docs

Describe the bug This is really more of a suggestion then a bug, but I think it’s worth considering for dev ux sake… Use Case: You want to use Svelte DOM event forwarding syntax which is nice and minimal (as opposed to wiring up event dispatchers needlessly).

To Reproduce Steps to reproduce the behavior:

1. Create a component that leverages Svelte’s DOM event forwarding syntax
2. Create a story using actions and look at docs for how to wire those up Result

You will likely land on the Svelte tutorial and possibly the kitchen sink examples

From these, you will believe you must wire up an event dispatcher to get actions to work when using Storybook <–> Svelte.

Expected behavior I think the docs and tutorials should be updated to either mention that you can and should leverage DOM event forwarding, and perhaps also show how you can intercept and use the dispatcher. Really, it’s an unnecessary layer of indirection if you’re just trying to bubble events back to parent.

Code snippets Here’s an example input component with just the svelte template part and simplified for brevity:

    <input
      id={uniqueId}
      on:blur
      on:change
      on:input
      on:click
      on:focus
 />

With that, any consumer / parent can just listen for those events…no dispatch wiring up needed.

It turns out, you can nicely do the same with storybook but you have to omit the on: part:

import { action } from '@storybook/addon-actions';

const actionsData = {
  'click': action('click'),
  'blur': action('blur'),
  'change': action('change'),
  'input': action('input'),
  'focus': action('focus'),
}

Then you just spread actionsData exactly as your Svelte tutorial suggests. Works great and is much more idiomatic for such use case in Svelte. It took me a bit to figure this out hence the recommendation to document it.

[jonniebigodes]

@roblevintennis no worries. I’ve primed the tutorial for svelte and it should be up shortly. Take care of what needs to be taken care of and when you have time we’ll circle back to this and work on it.

Stay safe

[shilman]

nice one! cc @jonniebigodes