Svelte: Fix generated properties on Svelte event handler

code/renderers/svelte/src/docs/sourceDecorator.test.ts

@@ -7,6 +7,9 @@ expect.addSnapshotSerializer({
   test: (val: unknown) => typeof val === 'string',
 });
 
+const loremIpsum = 'Lorem ipsum dolor sit amet';
+const lotOfProperties = { property1: loremIpsum, property2: loremIpsum, property3: loremIpsum };
+
 function generateForArgs(args: Args, slotProperty: string | null = null) {
   return generateSvelteSource({ name: 'Component' }, args, {}, slotProperty);
 }
@@ -35,14 +38,47 @@ describe('generateSvelteSource', () => {
   test('multiple properties', () => {
     expect(generateForArgs({ a: 1, b: 2 })).toMatchInlineSnapshot(`<Component a={1} b={2}/>`);
   });
+  test('lot of properties', () => {
+    expect(generateForArgs(lotOfProperties)).toMatchInlineSnapshot(`
+      <Component
+        property1="Lorem ipsum dolor sit amet"
+        property2="Lorem ipsum dolor sit amet"
+        property3="Lorem ipsum dolor sit amet"/>
+    `);
+  });
   test('slot property', () => {
     expect(generateForArgs({ content: 'xyz', myProp: 'abc' }, 'content')).toMatchInlineSnapshot(`
       <Component myProp="abc">
           xyz
       </Component>
     `);
   });
+  test('slot property with lot of properties', () => {
+    expect(generateForArgs({ content: 'xyz', ...lotOfProperties }, 'content'))
+      .toMatchInlineSnapshot(`
+      <Component
+        property1="Lorem ipsum dolor sit amet"
+        property2="Lorem ipsum dolor sit amet"
+        property3="Lorem ipsum dolor sit amet">
+          xyz
+      </Component>
+    `);
+  });
   test('component is not set', () => {
     expect(generateSvelteSource(null, {}, {}, null)).toBeNull();
   });
+  test('Skip event property', () => {
+    expect(
+      generateSvelteSource(
+        { name: 'Component' },
+        { event_click: () => {} },
+        { event_click: { action: 'click' } }
+      )
+    ).toMatchInlineSnapshot(`<Component />`);
+  });
+  test('Property value is a function', () => {
+    expect(
+      generateSvelteSource({ name: 'Component' }, { myHandler: () => {} }, {})
+    ).toMatchInlineSnapshot(`<Component myHandler={<handler>}/>`);
+  });
 });

code/renderers/svelte/src/docs/sourceDecorator.ts

@@ -38,8 +38,15 @@ function toSvelteProperty(key: string, value: any, argTypes: ArgTypes): string |
     return null;
   }
 
+  const argType = argTypes[key];
+
   // default value ?
-  if (argTypes[key] && argTypes[key].defaultValue === value) {
+  if (argType && argType.defaultValue === value) {
+    return null;
+  }
+
+  // event should be skipped
+  if (argType && argType.action) {
     return null;
   }
 
@@ -51,6 +58,11 @@ function toSvelteProperty(key: string, value: any, argTypes: ArgTypes): string |
     return `${key}=${JSON.stringify(value)}`;
   }
 
+  // handle function
+  if (typeof value === 'function') {
+    return `${key}={<handler>}`;
+  }
+
   return `${key}={${JSON.stringify(value)}}`;
 }
 
@@ -98,19 +110,21 @@ export function generateSvelteSource(
     return null;
   }
 
-  const props = Object.entries(args)
+  const propsArray = Object.entries(args)
     .filter(([k]) => k !== slotProperty)
     .map(([k, v]) => toSvelteProperty(k, v, argTypes))
-    .filter((p) => p)
-    .join(' ');
+    .filter((p) => p);
 
+  const props = propsArray.join(' ');
+
+  const multiline = props.length > 50;
   const slotValue = slotProperty ? args[slotProperty] : null;
 
+  const srcStart = multiline ? `<${name}\n  ${propsArray.join('\n  ')}` : `<${name} ${props}`;
   if (slotValue) {
-    return `<${name} ${props}>\n    ${slotValue}\n</${name}>`;
+    return `${srcStart}>\n    ${slotValue}\n</${name}>`;
   }
-
-  return `<${name} ${props}/>`;
+  return `${srcStart}/>`;
 }
 
 /**