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

[JReinhold]

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

[Anthony-Jhoiro]

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]

@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]

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

[heneke]

@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]

@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]

@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)