Merge pull request #3 from BlackFenix2/svelte-docgen

Svelte docgen

addons/docs/package.json

@@ -71,6 +71,7 @@
     "js-string-escape": "^1.0.1",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
+    "sveltedoc-parser": "^3.0.4",
     "react-element-to-jsx-string": "^14.3.1",
     "regenerator-runtime": "^0.13.3",
     "remark-external-links": "^6.0.0",

addons/docs/src/frameworks/svelte/HOC.svelte

@@ -15,4 +15,5 @@
   });
 </script>
 
+<svelte:options accessors={true} />
 <div id={hash} />

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

@@ -1,8 +1,12 @@
+import { extractArgTypes } from './extractArgTypes';
+import { extractComponentDescription } from '../../lib/docgen';
 import { prepareForInline } from './prepareForInline';
 
 export const parameters = {
   docs: {
     inlineStories: true,
     prepareForInline,
+    extractArgTypes,
+    extractComponentDescription,
   },
 };

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

@@ -0,0 +1,69 @@
+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: {
+    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: null;
+    refs: [];
+    slots: [];
+    version: 3;
+  };
+};
+
+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,
+
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    text: {
+      control: { type: 'text' },
+      name: 'text',
+      description: 'descriptive text',
+      defaultValue: 'You Clicked',
+      table: {
+        defaultValue: {
+          summary: 'your text here',
+        },
+      },
+    },
+  };
+
+  return results;
+};

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

@@ -0,0 +1,13 @@
+import path from 'path';
+
+import { Configuration } from 'webpack';
+
+export function webpackFinal(webpackConfig: Configuration, options: any = {}) {
+  webpackConfig.module.rules.push({
+    test: /\.svelte$/,
+    loader: path.resolve(`${__dirname}/svelte-docgen-loader`),
+    enforce: 'post',
+  });
+
+  return webpackConfig;
+}

addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts

@@ -0,0 +1,41 @@
+/* eslint-disable no-param-reassign */
+// @ts-ignore
+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) {
+  const file = path.basename(this._module.resource);
+  const options = {
+    fileContent: source,
+    version: 3,
+  };
+
+  console.log('File: ', file);
+  let docgen = '';
+
+  try {
+    const componentDoc = await svelteDoc.parse(options);
+    docgen = `
+    export const __docgen = ${JSON.stringify(componentDoc)};
+  `;
+  } catch (error) {
+    console.error(error);
+  }
+
+  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);
+}

examples/svelte-kitchen-sink/src/stories/addon-controls.stories.js

@@ -2,10 +2,7 @@ import ButtonView from './views/ButtonView.svelte';
 
 export default {
   title: 'Addon/Controls',
-  argTypes: {
-    rounded: { type: { name: 'boolean' } },
-    text: { type: { name: 'string' } },
-  },
+  component: ButtonView,
 };
 
 const Template = (args) => ({
@@ -14,13 +11,16 @@ const Template = (args) => ({
 });
 
 export const Rounded = Template.bind({});
-Rounded.args = {
-  rounded: true,
-  text: 'Rounded text',
-};
+// Rounded.args = {
+//   rounded: true,
+//   text: 'Rounded text',
+//   bleh: 'ss',
+// };
 
 export const Square = Template.bind({});
-Square.args = {
-  rounded: false,
-  text: 'Squared text',
-};
+// Square.args = {
+//   rounded: false,
+//   text: 'Squared text',
+// };
+
+export const Test = Template.bind({});