feat: Add support for preprocessors inside *.stories.svelte

storybookjs/addon-svelte-csf#4
bfanger · Feb 16, 2022 · 4c81b59 · 4c81b59
1 parent a9fcedb
commit 4c81b59
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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(