From 4c81b59c097d65c042225a6fd369aa54908b0eb4 Mon Sep 17 00:00:00 2001
From: Bob Fanger <bfanger@gmail.com>
Date: Sat, 12 Feb 2022 15:20:55 +0100
Subject: [PATCH] feat: Add support for preprocessors inside *.stories.svelte

https://github.com/storybookjs/addon-svelte-csf/issues/4
---
 packages/storybook-builder-vite/optimizeDeps.ts     |  1 +
 .../storybook-builder-vite/svelte/csf-plugin.ts     | 13 ++++++++++---
 packages/storybook-builder-vite/vite-config.ts      |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/storybook-builder-vite/optimizeDeps.ts b/packages/storybook-builder-vite/optimizeDeps.ts
index 7fffb166..96a66e93 100644
--- a/packages/storybook-builder-vite/optimizeDeps.ts
+++ b/packages/storybook-builder-vite/optimizeDeps.ts
@@ -29,6 +29,7 @@ export async function getOptimizeDeps(root: string, options: ExtendedOptions) {
       '@storybook/csf',
       '@storybook/preview-web',
       '@storybook/react',
+      '@storybook/svelte',
       '@storybook/vue3',
       'acorn-jsx',
       'acorn-walk',
diff --git a/packages/storybook-builder-vite/svelte/csf-plugin.ts b/packages/storybook-builder-vite/svelte/csf-plugin.ts
index 51c69c26..9fc4e9c4 100644
--- a/packages/storybook-builder-vite/svelte/csf-plugin.ts
+++ b/packages/storybook-builder-vite/svelte/csf-plugin.ts
@@ -2,14 +2,20 @@ import { getNameFromFilename } from '@storybook/addon-svelte-csf/dist/cjs/parser
 import { readFileSync } from 'fs';
 import { extractStories } from '@storybook/addon-svelte-csf/dist/cjs/parser/extract-stories';
 const parser = require.resolve('@storybook/addon-svelte-csf/dist/esm/parser/collect-stories').replace(/[/\\]/g, '/');
+import type { Options } from "@sveltejs/vite-plugin-svelte"
+import * as svelte from "svelte/compiler"
 
-export default {
+export default function csfPlugin(svelteOptions?: Options) {
+  return {
   name: 'storybook-addon-svelte-csf',
   enforce: 'post',
-  transform(code: string, id: string) {
+   async transform(code: string, id: string) {
     if (/.stories.svelte/.test(id)) {
       const component = getNameFromFilename(id);
-      const source = readFileSync(id).toString();
+      let source = readFileSync(id).toString();
+      if (svelteOptions && svelteOptions.preprocess) {
+        source = (await svelte.preprocess(source, svelteOptions.preprocess)).code
+      }
       const all = extractStories(source);
       const { stories } = all;
       const storyDef = Object.entries<any>(stories)
@@ -36,4 +42,5 @@ export default {
       };
     }
   },
+}
 };
diff --git a/packages/storybook-builder-vite/vite-config.ts b/packages/storybook-builder-vite/vite-config.ts
index 114b19f1..05906b85 100644
--- a/packages/storybook-builder-vite/vite-config.ts
+++ b/packages/storybook-builder-vite/vite-config.ts
@@ -77,7 +77,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
 
     try {
       const csfPlugin = require('./svelte/csf-plugin').default;
-      plugins.push(csfPlugin);
+      plugins.push(csfPlugin(svelteOptions));
     } catch (err) {
       if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {
         throw new Error(