fix: use storybook vitest config as base (#740)

- Removed `any` from `types.d.ts` - Used `storybookConfig` over the bare `config` when merging Should fix #756 and fix #799 --------- Signed-off-by: Ryan Leckey <[email protected]> Co-authored-by: Tobias Diez <[email protected]>
nuxt-modules · Dec 9, 2024 · d8f4ca8 · d8f4ca8
1 parent 6d2df38
commit d8f4ca8
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git 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
@@ -159,7 +159,18 @@ function mergeViteConfig(
     plugins.unshift(vuePlugin())
   }
 
+  // Remove the 'storybook:vue-template-compilation' plugin because it yields out-of-memory issues
+  const templatePluginIndex = plugins?.findIndex(
+    (plugin) =>
+      plugin &&
+      'name' in plugin &&
+      plugin.name === 'storybook:vue-template-compilation',
+  )
+  if (templatePluginIndex !== -1) {
+    plugins.splice(templatePluginIndex, 1)
+  }
   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 || {}
@@ -305,42 +316,50 @@ export const previewAnnotations = async (
 }
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  config: Record<string, any>,
-  // 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<string, any>, 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 (!ViteFile) throw new Error('ViteFile not found')
-    return ViteFile(c, o)
+    if (!vueViteFinal) {
+      throw new Error(
+        'unexpected contents in package @storybook/vue3-vite: viteFinal not found',
+      )
+    }
+
+    return (vueViteFinal as NonNullable<StorybookConfig['viteFinal']>)(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
@@ -1,13 +1,20 @@
 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[]
 
 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<string, any>
+          options?: BuilderOptions
         }
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,9 +22,5 @@ export default defineNuxtConfig({ @@
         },
       },
-      vue: {
-        runtimeCompiler: true,
-      },
       compatibilityDate: '2024-08-03',
     })