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

storybookjs/addon-svelte-csf#4
storybookjs · Feb 12, 2022 · e2b27a7 · e2b27a7
1 parent a9fcedb
commit e2b27a7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
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,12 @@ export default {
       };
     }
   },
+}
 };
+
+// dedent`${codeWithoutDefaultExport}
+//     const { default: parser } = require('${parser}');
+//     const __storiesMetaData = parser(${componentName}, ${JSON.stringify(storiesDef)});
+//     export default __storiesMetaData.meta;
+//     ${storyDef};
+//   `);
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(