Svelte Docs

[roblevintennis]

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.

[shilman]

nice one! cc @jonniebigodes

[jonniebigodes]

@roblevintennis sorry for the late response for this issue. And we can work with this, i'm more than ok with the updates to the docs to factor in what you've mentioned in the description. We can start small and tackle the tutorial first and move from there. If you're ok, create a repo as the one used by Andre in here, you let me know either here or in Discord (same username) and we can start tackling Svelte.

Let me know what you think.

Stay safe

[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!

[roblevintennis]

Sorry for the late reply but some life circumstances have limited my time to stay up to date. Unfortunately, I cannot help with this at the moment.

[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