Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Decorators in Svelte causes dispatched events to not be logged in Actions #20690

Open
JReinhold opened this issue Jan 19, 2023 · 6 comments · May be fixed by #28247
Open

[Bug]: Decorators in Svelte causes dispatched events to not be logged in Actions #20690

JReinhold opened this issue Jan 19, 2023 · 6 comments · May be fixed by #28247
Assignees
@JReinhold
Labels
bug decorators svelte

Comments

@JReinhold
Copy link
Contributor

JReinhold commented Jan 19, 2023 •
edited
Loading

Describe the bug

Usually, any globally dispatched events in a Svelte component automatically gets inferred and attached to actions.

This works fine for basic components, but as soon as a decorator is decorating a story, it stops attaching any events to actions. Even when manually specifying the argType it still doesn't get logged in the actions panel.

To Reproduce

The default stories from a fresh Svelte project works fine.

Adding a decorator breaks it:


export const Secondary = {
  args: {
    label: 'Button',
  },
  argTypes: {
    // onClick: { action: 'clicked' }, // manually doing it should also work in theory
  },
  decorators: [() => BorderDecoratorRed ]
};

System

No response

Additional context

This is likely a regression introduced in #19987
@JReinhold JReinhold self-assigned this Jan 19, 2023
@Anthony-Jhoiro
Copy link

Anthony-Jhoiro commented Jun 2, 2024 •
edited
Loading

This is really a pain. Has anyone found a workaround for this issue?

I found this code fragment that creates the issue

storybook/code/renderers/svelte/src/components/SlotDecorator.svelte

Lines 13 to 23 in 4bd5ef3

if (on && svelteVersion < 5) {
// Attach Svelte event listeners in Svelte v4
// In Svelte v5 this is not possible anymore as instances are no longer classes with $on() properties, so it will be a no-op
onMount(() => {
Object.entries(on).forEach(([eventName, eventCallback]) => {
// instance can be undefined if a decorator doesn't have <slot/>
const inst = instance ?? decoratorInstance;
inst?.$on?.(eventName, eventCallback)
});
});
}

@heneke
Copy link

heneke commented Jun 12, 2024 •
edited
Loading

@Anthony-Jhoiro

No, it's a bug introduced in 5b2b0b4. EventListeners are only attached when svelteVersion is < 5 here: https://github.com/storybookjs/storybook/blob/next/code/renderers/svelte/src/components/SlotDecorator.svelte#L13

svelteVersion is undefined in https://github.com/storybookjs/storybook/blob/next/code/renderers/svelte/src/decorators.ts#L62, so no events are forwarded when using decorators in Svelte 4.

@JReinhold
Copy link
Contributor Author

@heneke are you sure about that? This issue predates that commit by a year.

@heneke
Copy link

heneke commented Jun 13, 2024

@JReinhold I lost track of the open tabs with issues when answering.

But: Decorators do not work with storybook-svelte 8.1.6 because of the commit mentioned and the missing version in the snippet posted by @Anthony-Jhoiro.

@JReinhold JReinhold linked a pull request Jun 14, 2024 that will close this issue
Open
8 tasks
@JReinhold
Copy link
Contributor Author

@Anthony-Jhoiro, @heneke, PR #28247 is an attempt at fixing this issue. It would be great if you could try out the PR's canary release and see if it fixes it for you, and/or causes other related problems. See the bottom of the PR description for how to (temporarily) "upgrade" your project to that specific canary version.

@heneke
Copy link

heneke commented Jun 17, 2024

@JReinhold I confirm that my decorators work again with the canary release. There seem to be no other issues. I cannot say anything regarding docs (not used in my project)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@JReinhold JReinhold

Labels
bug decorators svelte
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Svelte: Fix events not being logged in Actions when a story has decorators storybookjs/storybook
3 participants
@heneke @JReinhold @Anthony-Jhoiro