Merge pull request #18174 from j3rem1e/svelte-action

Svelte: Supports action auto configuration

app/svelte/src/client/docs/extractArgTypes.test.ts

@@ -66,26 +66,22 @@ describe('Extracting Arguments', () => {
     expect(results).toMatchInlineSnapshot(`
       Object {
         "event_afterUpdate": Object {
+          "action": "afterUpdate",
+          "control": false,
           "description": "After Update",
           "name": "afterUpdate",
           "table": Object {
             "category": "events",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "event_click": Object {
+          "action": "click",
+          "control": false,
           "description": "Click Event",
           "name": "click",
           "table": Object {
             "category": "events",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "rounded": Object {
           "control": Object {
@@ -108,6 +104,7 @@ describe('Extracting Arguments', () => {
           },
         },
         "slot_default": Object {
+          "control": false,
           "description": "Default Slot
 
       \`{rounded}\`",
@@ -115,10 +112,6 @@ describe('Extracting Arguments', () => {
           "table": Object {
             "category": "slots",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "text": Object {
           "control": Object {

app/svelte/src/client/docs/extractArgTypes.ts

@@ -56,8 +56,9 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
   docgen.events.forEach((item) => {
     results[`event_${item.name}`] = {
       name: item.name,
+      action: item.name,
+      control: false,
       description: item.description,
-      type: { name: 'other', value: 'void' },
       table: {
         category: 'events',
       },
@@ -67,10 +68,10 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
   docgen.slots.forEach((item) => {
     results[`slot_${item.name}`] = {
       name: item.name,
+      control: false,
       description: [item.description, item.params?.map((p) => `\`${p.name}\``).join(' ')]
         .filter((p) => p)
         .join('\n\n'),
-      type: { name: 'other', value: 'void' },
       table: {
         category: 'slots',
       },

app/svelte/src/client/preview/render.ts

@@ -18,7 +18,7 @@ function cleanUpPreviousStory() {
 }
 
 export function renderToDOM(
-  { storyFn, kind, name, showMain, showError }: RenderContext<SvelteFramework>,
+  { storyFn, kind, name, storyContext, showMain, showError }: RenderContext<SvelteFramework>,
   domElement: HTMLElement
 ) {
   cleanUpPreviousStory();
@@ -31,6 +31,7 @@ export function renderToDOM(
     target,
     props: {
       storyFn,
+      storyContext,
       name,
       kind,
       showError,

app/svelte/templates/PreviewRender.svelte

@@ -6,6 +6,7 @@
   export let kind;
   export let storyFn;
   export let showError;
+  export let storyContext;
 
   const {
     /** @type {SvelteComponent} */
@@ -18,6 +19,12 @@
     WrapperData = {},
   } = storyFn(); 
 
+   const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
+      .filter(([k, v]) => v.action && props[k] != null)
+      .map(([k, v]) => [v.action, props[k]]));
+    
+  const events = {...eventsFromArgTypes, ...on};
+
   if (!Component) {
     showError({
       title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`,
@@ -34,4 +41,4 @@
   decoratorProps={WrapperData}
   component={Component}
   props={props}
-  {on}/>
+  on={events}/>

examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte

@@ -28,7 +28,7 @@
 </script>
 
 <h1>Button view</h1>
-<Button {rounded} on:click={handleClick}>{text}: {count}</Button>
+<Button {rounded} on:click on:click={handleClick}>{text}: {count}</Button>
 <p>A little text to show this is a view.</p>
 <p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
 <p>then wrapping the component up in a view</p>