Svelte: Statically load docgen info for svelte components

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

@@ -35,10 +35,8 @@ type Docgen = {
 
 export const extractArgTypes: ArgTypesExtractor = (component) => {
   try {
-    // eslint-disable-next-line new-cap
-    const comp: ComponentWithDocgen = new component({ props: {} });
     // eslint-disable-next-line no-underscore-dangle
-    const docgen = comp.__docgen;
+    const docgen = component.__docgen;
     if (docgen) {
       return createArgTypes(docgen);
     }

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: 'pre',
+    enforce: 'post',
   });
 
   return webpackConfig;

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

@@ -7,13 +7,14 @@ import * as path from 'path';
  * @param source raw svelte component
  */
 export default async function svelteDocgen(source: string) {
-  // get filename for source content
   // eslint-disable-next-line no-underscore-dangle
-  const file = path.basename(this._module.resource);
+  const { resource } = this._module;
 
+  // get filename for source content
+  const file = path.basename(resource);
   // set SvelteDoc options
   const options = {
-    fileContent: source,
+    filename: resource,
     version: 3,
   };
 
@@ -25,14 +26,16 @@ export default async function svelteDocgen(source: string) {
     // populate filename in docgen
     componentDoc.name = path.basename(file);
 
+    const componentName = path.parse(resource).name;
+
     docgen = `
-    export const __docgen = ${JSON.stringify(componentDoc)};
+    ${componentName}.__docgen = ${JSON.stringify(componentDoc)};
   `;
   } catch (error) {
     console.error(error);
   }
   // inject __docgen prop in svelte component
-  const output = source.replace('</script>', `${docgen}</script>`);
+  const output = source + docgen;
 
   return output;
 }

examples/svelte-kitchen-sink/src/stories/button.stories.js

@@ -2,20 +2,24 @@ import ButtonView from './views/ButtonView.svelte';
 
 export default {
   title: 'Button',
+  component: ButtonView,
 };
 
-export const Rounded = () => ({
+const Template = (args) => ({
   Component: ButtonView,
   props: {
-    rounded: true,
-    message: 'Rounded text',
+    ...args,
   },
 });
 
-export const Square = () => ({
-  Component: ButtonView,
-  props: {
-    rounded: false,
-    message: 'Squared text',
-  },
-});
+export const Rounded = Template.bind({});
+Rounded.args = {
+  rounded: true,
+  message: 'Squared text',
+};
+
+export const Square = Template.bind({});
+Square.args = {
+  rounded: false,
+  message: 'Squared text',
+};