Add svelte csf addon for svelte-native stories

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

@@ -19,6 +19,19 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
   const svelteConfig = { ...(await loadSvelteConfig()), ...svelteOptions };
   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,
     plugins,