diff --git a/examples/showcase/nuxt.config.ts b/examples/showcase/nuxt.config.ts index 849b9f78..c197a48d 100644 --- a/examples/showcase/nuxt.config.ts +++ b/examples/showcase/nuxt.config.ts @@ -22,9 +22,5 @@ export default defineNuxtConfig({ }, }, - vue: { - runtimeCompiler: true, - }, - compatibilityDate: '2024-08-03', }) diff --git a/packages/storybook-addon/src/preset.ts b/packages/storybook-addon/src/preset.ts index 37a7fcef..bfb2e5e0 100644 --- a/packages/storybook-addon/src/preset.ts +++ b/packages/storybook-addon/src/preset.ts @@ -160,6 +160,7 @@ function mergeViteConfig( } extendedConfig.plugins = plugins + // Storybook adds 'vue' as dependency that should be optimized, but nuxt explicitly excludes it from pre-bundling // Prioritize `optimizeDeps.exclude`. If same dep is in `include` and `exclude`, remove it from `include` extendedConfig.optimizeDeps = extendedConfig.optimizeDeps || {} @@ -303,42 +304,50 @@ export const previewAnnotations = async ( } export const viteFinal: StorybookConfig['viteFinal'] = async ( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - config: Record, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - options: any, + config, + options, ) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const getStorybookViteConfig = async (c: Record, o: any) => { const presetURL = pathToFileURL( join(await getPackageDir('@storybook/vue3-vite'), 'preset.js'), ) - const { viteFinal: ViteFile } = await import(presetURL.href) + const { viteFinal: vueViteFinal } = await import(presetURL.href) + + if (!vueViteFinal) { + throw new Error( + 'unexpected contents in package @storybook/vue3-vite: viteFinal not found', + ) + } - if (!ViteFile) throw new Error('ViteFile not found') - return ViteFile(c, o) + return (vueViteFinal as NonNullable)(c, o) } + const storybookViteConfig = await getStorybookViteConfig(config, options) const { viteConfig: nuxtConfig, nuxt } = await loadNuxtViteConfig( storybookViteConfig.root, ) - const finalViteConfig = mergeViteConfig(config, nuxtConfig, nuxt) - // Write all vite configs to logs - const fs = await import('node:fs') - fs.mkdirSync(join(options.outputDir, 'logs'), { recursive: true }) - console.debug(`Writing Vite configs to ${options.outputDir}/logs/...`) - fs.writeFileSync( - join(options.outputDir, 'logs', 'vite-storybook.config.json'), - stringify(storybookViteConfig, { space: ' ' }), - ) - fs.writeFileSync( - join(options.outputDir, 'logs', 'vite-nuxt.config.json'), - stringify(nuxtConfig, { space: ' ' }), - ) - fs.writeFileSync( - join(options.outputDir, 'logs', 'vite-final.config.json'), - stringify(finalViteConfig, { space: ' ' }), - ) + + const finalViteConfig = mergeViteConfig(storybookViteConfig, nuxtConfig, nuxt) + + if (options.outputDir != null) { + // Write all vite configs to logs + const fs = await import('node:fs') + fs.mkdirSync(join(options.outputDir, 'logs'), { recursive: true }) + console.debug(`Writing Vite configs to ${options.outputDir}/logs/...`) + fs.writeFileSync( + join(options.outputDir, 'logs', 'vite-storybook.config.json'), + stringify(storybookViteConfig, { space: ' ' }), + ) + fs.writeFileSync( + join(options.outputDir, 'logs', 'vite-nuxt.config.json'), + stringify(nuxtConfig, { space: ' ' }), + ) + fs.writeFileSync( + join(options.outputDir, 'logs', 'vite-final.config.json'), + stringify(finalViteConfig, { space: ' ' }), + ) + } return finalViteConfig } diff --git a/packages/storybook-addon/src/types.d.ts b/packages/storybook-addon/src/types.d.ts index 9a610abf..76d4ce0a 100644 --- a/packages/storybook-addon/src/types.d.ts +++ b/packages/storybook-addon/src/types.d.ts @@ -1,6 +1,9 @@ import type { StorybookConfig as StorybookConfigBase } from '@storybook/types' import type { FrameworkOptions as FrameworkOptionsVue } from '@storybook/vue3-vite' -import type { StorybookConfigVite } from '@storybook/builder-vite' +import type { + StorybookConfigVite, + BuilderOptions as BuilderOptionsVite, +} from '@storybook/builder-vite' declare let STORYBOOK_VUE_GLOBAL_PLUGINS: string[] declare let STORYBOOK_VUE_GLOBAL_MIXINS: string[] @@ -8,6 +11,10 @@ declare let STORYBOOK_VUE_GLOBAL_MIXINS: string[] type FrameworkName = '@storybook-vue/nuxt' type BuilderName = '@storybook/builder-vite' +type BuilderOptions = BuilderOptionsVite & { + outputDir?: string +} + type StorybookConfigFramework = { framework: | FrameworkName @@ -17,8 +24,7 @@ type StorybookConfigFramework = { | BuilderName | { name: BuilderName - // eslint-disable-next-line @typescript-eslint/no-explicit-any - options?: Record + options?: BuilderOptions } } } diff --git a/playground/.storybook/main.ts b/playground/.storybook/main.ts index 5d094702..0cfe9879 100644 --- a/playground/.storybook/main.ts +++ b/playground/.storybook/main.ts @@ -15,9 +15,6 @@ const config: StorybookConfig = { name: '@storybook-vue/nuxt', options: {}, }, - docs: { - autodocs: 'tag', - }, viteFinal: (config) => { // For debugging purposes // View intermediate state of Vite plugins at http://localhost:6006/__inspect