added unit test.

addons/docs/src/frameworks/svelte/extractArgTypes.test.ts

@@ -0,0 +1,46 @@
+import svelteDoc from 'sveltedoc-parser';
+import * as fs from 'fs';
+import { createArgTypes } from './extractArgTypes';
+
+const content = fs.readFileSync(`${__dirname}/sample/MockButton.svelte`, 'utf-8');
+
+describe('Extracting Arguments', () => {
+  it('should create ArgTypes', async () => {
+    const doc = await svelteDoc.parse({ fileContent: content, version: 3 });
+
+    const results = createArgTypes(doc);
+
+    expect(results).toMatchInlineSnapshot(`
+      Object {
+        "rounded": Object {
+          "control": Object {
+            "type": "boolean",
+          },
+          "defaultValue": true,
+          "description": null,
+          "name": "rounded",
+          "table": Object {
+            "defaultValue": Object {
+              "summary": true,
+            },
+          },
+          "type": Object {},
+        },
+        "text": Object {
+          "control": Object {
+            "type": "text",
+          },
+          "defaultValue": "",
+          "description": null,
+          "name": "text",
+          "table": Object {
+            "defaultValue": Object {
+              "summary": "",
+            },
+          },
+          "type": Object {},
+        },
+      }
+    `);
+  });
+});

addons/docs/src/frameworks/svelte/extractArgTypes.ts

@@ -3,31 +3,33 @@ import { ArgTypes } from '@storybook/api';
 import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
 
 type ComponentWithDocgen = {
-  __docgen: {
-    components: [];
-    computed: [];
-    data: [
-      {
-        defaultValue: any;
-        description: string;
-        keywords: [];
-        kind: string;
-        name: string;
-        readonly: boolean;
-        static: boolean;
-        type: { kind: string; text: string; type: string };
-        visibility: string;
-      }
-    ];
-    description: null;
-    events: [];
-    keywords: [];
-    methods: [];
-    name: string;
-    refs: [];
-    slots: [];
-    version: number;
-  };
+  __docgen: Docgen;
+};
+
+type Docgen = {
+  components: [];
+  computed: [];
+  data: [
+    {
+      defaultValue: any;
+      description: string;
+      keywords: [];
+      kind: string;
+      name: string;
+      readonly: boolean;
+      static: boolean;
+      type: { kind: string; text: string; type: string };
+      visibility: string;
+    }
+  ];
+  description: null;
+  events: [];
+  keywords: [];
+  methods: [];
+  name: string;
+  refs: [];
+  slots: [];
+  version: number;
 };
 
 export const extractArgTypes: ArgTypesExtractor = (component) => {
@@ -36,6 +38,12 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
   // eslint-disable-next-line no-underscore-dangle
   const docs = comp.__docgen;
 
+  const results = createArgTypes(docs);
+
+  return results;
+};
+
+export const createArgTypes = (docs: Docgen) => {
   const results: ArgTypes = {};
   docs.data.forEach((item) => {
     results[item.name] = {

addons/docs/src/frameworks/svelte/sample/MockButton.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { createEventDispatcher, afterUpdate } from 'svelte';
+  export let text = '';
+  export let rounded = true;
+
+  const dispatch = createEventDispatcher();
+
+  function onClick(event) {
+    rounded = !rounded;
+
+    dispatch('click', event);
+  }
+
+  afterUpdate(() => {
+    dispatch('afterUpdate');
+  });
+</script>
+
+<style>
+  .rounded {
+    border-radius: 35px;
+  }
+
+  .button {
+    border: 3px solid;
+    padding: 10px 20px;
+    background-color: white;
+    outline: none;
+  }
+</style>
+
+<svelte:options accessors={true} />
+<button class="button" class:rounded on:click={onClick}>
+  <strong>{rounded ? 'Round' : 'Square'} corners</strong>
+  <br />
+  {text}
+  <slot />
+</button>

addons/docs/src/typings.d.ts

@@ -17,3 +17,7 @@ declare module 'react-element-to-jsx-string' {
 
   export default function render(element: React.ReactNode, options: Options): string;
 }
+
+declare module 'sveltedoc-parser' {
+  export function parse(options: any): Promise<any>;
+}

examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-controls.stories.storyshot

@@ -43,6 +43,111 @@ exports[`Storyshots Addon/Controls Rounded 1`] = `
 </section>
 `;
 
+exports[`Storyshots Addon/Controls Show Case 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Control Showcase
+  </h1>
+
+  <button
+    class="button svelte-11vzkcm"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+
+    <br />
+
+
+
+    You clicked
+    : 
+    0
+  </button>
+
+  <h2>
+    Array Range
+  </h2>
+
+  <div>
+    []
+  </div>
+
+  <h2>
+    Progress Bar
+  </h2>
+
+  <progress
+    max="100"
+    min="0"
+    step="1"
+    value={0}
+  />
+
+  <h2>
+    Enum Selectors
+  </h2>
+
+  <h3>
+    inline radio
+  </h3>
+
+  <div>
+    <p>
+      Loading State: 
+      loading
+    </p>
+  </div>
+
+  <h3>
+    inline check
+  </h3>
+
+  <div>
+    <p>
+      Food Items: 
+      []
+    </p>
+  </div>
+
+  <h3>
+    inline select
+  </h3>
+
+  <div>
+    <p>
+      Car choice: 
+      car
+    </p>
+  </div>
+
+  <h2>
+    Color Picker
+  </h2>
+
+  <div>
+    <div
+      class="Box svelte-zg433x"
+      style="background-color: rgb(0, 0, 0);"
+    />
+  </div>
+
+  <h2>
+    Date Picker
+  </h2>
+
+  <div>
+    <p>
+      Date: 
+      Invalid Date
+    </p>
+  </div>
+</section>
+`;
+
 exports[`Storyshots Addon/Controls Square 1`] = `
 <section
   class="storybook-snapshot-container"