Added control autogeneration support for Svelte

mcaj-admin · Sep 1, 2020 · 065023d · 065023d
1 parent f36ce94
commit 065023d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 53 deletions.
diff --git a/addons/docs/src/frameworks/svelte/extractArgTypes.ts b/addons/docs/src/frameworks/svelte/extractArgTypes.ts
@@ -1,12 +1,8 @@
+/* eslint-disable new-cap */
+/* eslint-disable no-underscore-dangle */
 import { ArgTypes } from '@storybook/api';
 
 import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
-import { convert } from '../../lib/convert';
-import { trimQuotes } from '../../lib/convert/utils';
-
-const SECTIONS = ['props', 'events', 'slots'];
-
-const trim = (val: any) => (val && typeof val === 'string' ? trimQuotes(val) : val);
 
 type ComponentWithDocgen = {
   __docgen: {
@@ -32,38 +28,37 @@ type ComponentWithDocgen = {
     name: null;
     refs: [];
     slots: [];
-    version: 3;
+    version: number;
   };
 };
 
 export const extractArgTypes: ArgTypesExtractor = (component) => {
-  const item = new component({ props: {} });
-  console.log(item.__docgen);
-  const results: ArgTypes = {
-    rounded: {
-      control: { type: 'boolean' },
-      name: 'rounded',
-      description: 'round the button',
-      defaultValue: false,
-
+  const comp: ComponentWithDocgen = new component({ props: {} });
+  const docs = comp.__docgen;
+  const results: ArgTypes = {};
+  docs.data.forEach((item) => {
+    results[item.name] = {
+      control: { type: parseType(item.type.type) },
+      name: item.name,
+      description: item.description,
+      type: {},
+      defaultValue: item.defaultValue,
       table: {
         defaultValue: {
-          summary: false,
+          summary: item.defaultValue,
         },
       },
-    },
-    text: {
-      control: { type: 'text' },
-      name: 'text',
-      description: 'descriptive text',
-      defaultValue: 'You Clicked',
-      table: {
-        defaultValue: {
-          summary: 'your text here',
-        },
-      },
-    },
-  };
-
+    };
+  });
   return results;
 };
+
+/**
+ * Function to convert the type from sveltedoc-parser to a storybook type
+ * @param typeName
+ *  @returns string
+ */
+const parseType = (typeName: string) => {
+  if (typeName === 'string') return 'text';
+  return typeName;
+};
diff --git a/addons/docs/src/frameworks/svelte/preset.ts b/addons/docs/src/frameworks/svelte/preset.ts
@@ -6,7 +6,7 @@ export function webpackFinal(webpackConfig: Configuration, options: any = {}) {
   webpackConfig.module.rules.push({
     test: /\.svelte$/,
     loader: path.resolve(`${__dirname}/svelte-docgen-loader`),
-    enforce: 'post',
+    enforce: 'pre',
   });
 
   return webpackConfig;

diff --git a/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts b/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts
@@ -4,38 +4,36 @@ import svelteDoc from 'sveltedoc-parser';
 
 import * as path from 'path';
 
-import * as fs from 'fs';
-import { string } from 'prop-types';
-
-const SVELTE_DOCGEN = {};
 /**
  * webpack loader for sveltedoc-parser
  * @param source raw svelte component
  */
 export default async function svelteDocgen(source: string) {
+  // get filename for source content
   const file = path.basename(this._module.resource);
+
+  // set SvelteDoc options
   const options = {
     fileContent: source,
     version: 3,
   };
 
-  console.log('File: ', file);
   let docgen = '';
 
   try {
     const componentDoc = await svelteDoc.parse(options);
+
+    // populate filename in docgen
+    componentDoc.name = path.basename(file);
+
     docgen = `
     export const __docgen = ${JSON.stringify(componentDoc)};
   `;
   } catch (error) {
     console.error(error);
   }
-
+  // inject __docgen prop in svelte component
   const output = source.replace('</script>', `${docgen}</script>`);
 
   return output;
 }
-
-function insert(str: string, index: number, value: string) {
-  return str.substr(0, index) + value + str.substr(index);
-}
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-controls.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-controls.stories.js
@@ -11,16 +11,5 @@ const Template = (args) => ({
 });
 
 export const Rounded = Template.bind({});
-// Rounded.args = {
-//   rounded: true,
-//   text: 'Rounded text',
-//   bleh: 'ss',
-// };
 
 export const Square = Template.bind({});
-// Square.args = {
-//   rounded: false,
-//   text: 'Squared text',
-// };
-
-export const Test = Template.bind({});