Merge pull request #19339 from storybookjs/vite/svelte-docgen-options

Typescript-based svelte components did not generate docs correctly, and svelte-native stories were not possible.

## What I did

In the transition to 7.0, we neglected to load svelte options from `svelte.config.js` (and `svelteOptions` from storybook overrides) and pass them to the svelte docgen plugin, which means that svelte components written with typescript did not work correctly.

Also, while we brought over the `csfPlugin` for svelte, we never actually used it.  So, svelte-native stories would be broken even if `@storybook/addon-svelte-csf` was added.  The fix here is a bit of a temporary one, hopefully.  It uses the same strategy from the 6.5 vite-builder, but it would be better if we could add vite-support to the addon directly, which I've suggested in storybookjs/addon-svelte-csf#64 (comment).

## How to test

Currently we do not have a svelte-vite typescript sandbox, nor do we have any svelte-native stories.  But, I bootstrapped my own project, and copied over the `dist` folder from the `svelte-vite` framework in this branch, and confirmed that both docgen and svelte-native stories do not work without these changes, and do work with them.

code/frameworks/svelte-vite/package.json

@@ -71,6 +71,14 @@
     "typescript": "~4.6.3",
     "vite": "^3.1.3"
   },
+  "peerDependencies": {
+    "@storybook/addon-svelte-csf": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/addon-svelte-csf": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": "^14.18 || >=16"
   },

code/frameworks/svelte-vite/src/plugins/csf-plugin.ts

@@ -5,12 +5,13 @@ import type { Options } from '@sveltejs/vite-plugin-svelte';
 import * as svelte from 'svelte/compiler';
 import MagicString from 'magic-string';
 import { createFilter } from 'vite';
+import type { PluginOption } from 'vite';
 
 const parser = require
   .resolve('@storybook/addon-svelte-csf/dist/esm/parser/collect-stories')
   .replace(/[/\\]/g, '/');
 
-export default function csfPlugin(svelteOptions?: Options) {
+export default function csfPlugin(svelteOptions?: Options): PluginOption {
   const include = /\.stories\.svelte$/;
   const filter = createFilter(include);
 

code/frameworks/svelte-vite/src/preset.ts

@@ -8,17 +8,36 @@ export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
 };
 
-export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
+export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
   const { plugins = [] } = config;
+  const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
+  const svelteOptions: Record<string, any> = await options.presets.apply(
+    'svelteOptions',
+    {},
+    options
+  );
+  const svelteConfig = { ...(await loadSvelteConfig()), ...svelteOptions };
 
   // Add svelte plugin if not present
   if (!hasPlugin(plugins, 'vite-plugin-svelte')) {
-    const { svelte } = await import('@sveltejs/vite-plugin-svelte');
     plugins.push(svelte());
   }
 
   // Add docgen plugin
-  plugins.push(svelteDocgen(config));
+  plugins.push(svelteDocgen(svelteConfig));
+
+  // TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed
+  // Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed
+  try {
+    const { default: svelteCsfPlugin } = await import('./plugins/csf-plugin');
+    plugins.push(svelteCsfPlugin(svelteConfig));
+  } catch (err) {
+    // Not all projects use `.stories.svelte` for stories, and by default 6.5+ does not auto-install @storybook/addon-svelte-csf.
+    // If it's any other kind of error, re-throw.
+    if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {
+      throw err;
+    }
+  }
 
   return {
     ...config,

code/yarn.lock

@@ -8895,6 +8895,11 @@ __metadata:
     sveltedoc-parser: ^4.2.1
     typescript: ~4.6.3
     vite: ^3.1.3
+  peerDependencies:
+    "@storybook/addon-svelte-csf": ^2.0.0
+  peerDependenciesMeta:
+    "@storybook/addon-svelte-csf":
+      optional: true
   languageName: unknown
   linkType: soft