diff --git a/packages/storybook-builder-vite/svelte/csf-plugin.ts b/packages/storybook-builder-vite/svelte/csf-plugin.ts index 51c69c26..ebc0a922 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(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}; +// `); \ No newline at end of file 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(