Peter Meier
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import type { StorybookConfig } from '@storybook/svelte-vite';
|
||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||
import tailwindcss from '@tailwindcss/vite';
|
||
|
||
const config: StorybookConfig = {
|
||
stories: ['../src/lib/ui/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
|
||
framework: {
|
||
name: '@storybook/svelte-vite',
|
||
options: {},
|
||
},
|
||
docs: {
|
||
/** Name der automatisch erzeugten Docs-Seite pro Komponente */
|
||
defaultName: 'Dokumentation',
|
||
},
|
||
viteFinal: async (config) => {
|
||
config.plugins = config.plugins || [];
|
||
// Svelte-Plugin explizit vorn einfügen, damit .svelte-Dateien (auch aus node_modules/@storybook/svelte)
|
||
// vor dem Vite-Import-Analysis-Plugin transformiert werden – nötig für Astro-Projekte ohne eigene vite.config
|
||
const sveltePlugins = svelte({
|
||
compilerOptions: {
|
||
runes: true,
|
||
},
|
||
include: ['**/*.svelte', '**/node_modules/@storybook/svelte/**/*.svelte'],
|
||
});
|
||
config.plugins.unshift(...sveltePlugins);
|
||
config.plugins.push(tailwindcss());
|
||
config.optimizeDeps = config.optimizeDeps ?? {};
|
||
config.optimizeDeps.exclude = [...(config.optimizeDeps.exclude ?? []), '@storybook/svelte'];
|
||
config.ssr = config.ssr ?? {};
|
||
const existing = config.ssr.noExternal;
|
||
const noExternalList = Array.isArray(existing)
|
||
? existing
|
||
: existing
|
||
? [existing]
|
||
: [];
|
||
const normalized = noExternalList.filter(
|
||
(x): x is string | RegExp => typeof x === 'string' || x instanceof RegExp
|
||
);
|
||
config.ssr.noExternal = [...normalized, '@storybook/svelte'];
|
||
return config;
|
||
},
|
||
};
|
||
|
||
export default config;
|