Fix forwarding of actions handlers

README.md

@@ -33,7 +33,10 @@ It supports:
 </script>
 
 <Template let:args>
-  <Button {...args} on:click={handleClick}>
+  <!--👇 'on:click' allows to forward event to addon-actions  -->
+  <Button {...args} 
+    on:click
+    on:click={handleClick}>
     You clicked: {count}
   </Button>
 </Template>
@@ -48,6 +51,9 @@ It supports:
 </Story>
 ```
 
+Actions are automatically registered by Storybook. To be used by this addon, you just have to forward the event (`on:click` in the previous example).
+
+
 ## Getting Started
 
 1. `npm install --save-dev @storybook/addon-svelte-csf` or `yarn add --dev @storybook/addon-svelte-csf`

src/components/RenderContext.svelte

@@ -9,9 +9,25 @@
   export let args = {};
   export let storyContext = {};
 
+  /** @type {import('svelte').SvelteComponent} */
+  let instance;
+
   createRenderContext($$props);
 
+  // events are static and don't need to be reactive
+  const eventsFromArgTypes = Object.fromEntries(
+    Object.entries(storyContext.argTypes)
+      .filter(([k, v]) => v.action && args[k] != null)
+      .map(([k, v]) => [v.action, args[k]])
+  ); 
+
   $: setStoryRenderContext(args, storyContext);
+
+
+  $: if (instance) {
+    Object.entries(eventsFromArgTypes).forEach(([event, handler]) => instance.$on(event, handler));
+  }
+
 </script>
 
-<svelte:component this={Stories} />
+<svelte:component this={Stories} bind:this={instance}/>

stories/button.stories.svelte

@@ -12,7 +12,7 @@
 <Meta component={Button}/>
 
 <Template let:args>
-  <Button {...args} on:click={handleClick}>
+  <Button {...args} on:click={handleClick} on:click>
     You clicked: {count}
   </Button>
 </Template>