fix: extend storybook config types from vue3-vite framework (#649)

Allows for type-safe usage of the new `docgen` setting added in
Storybook v8 -
https://storybook.js.org/docs/8.0/get-started/vue3-vite#using-vue-component-meta

Fixes storybook-vue/storybook-nuxt#103.

---------

Signed-off-by: Ryan Leckey <ryan@calaxy.com>
Co-authored-by: Tobias Diez <code@tobiasdiez.de>

.gitignore

@@ -15,5 +15,9 @@ dist
 build-storybook.log
 storybook-static
 
+# Nuxt build artificats
+.nuxt
+
 # Test artifacts
 coverage
+tsconfig.vitest-temp.json

packages/storybook-nuxt/src/preset.ts

@@ -166,7 +166,6 @@ export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (
   return [...entry, resolve(packageDir, 'preview')]
 }
 
-// @ts-expect-error: viteFinal can be a function, but it's not typed as such
 export const viteFinal: StorybookConfig['viteFinal'] = async (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   config: Record<string, any>,

packages/storybook-nuxt/src/types.d.ts

@@ -1,7 +1,4 @@
-import type {
-  BuilderOptions,
-  StorybookConfig as StorybookConfigBase,
-} from '@storybook/types'
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'
 import type {
   Preview,
   StoryFn,
@@ -10,31 +7,38 @@ import type {
   Meta,
   DecoratorFunction,
 } from '@storybook/vue3'
+import type { FrameworkOptions as FrameworkOptionsVue } from '@storybook/vue3-vite'
+import type { StorybookConfigVite } 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'
 
-export type FrameworkOptions = NuxtOptions & {
-  builder?: BuilderOptions
-}
-
 type StorybookConfigFramework = {
-  framework: FrameworkName | { name: FrameworkName; options: FrameworkOptions }
-  core?: StorybookConfigBase['core'] & { builder?: BuilderName }
-  typescript?: StorybookConfigBase['typescript']
-  previewAnnotations?: StorybookConfigBase['previewAnnotations']
-  stories?: StorybookConfigBase['stories']
-  addons?: StorybookConfigBase['addons']
-  docs?: StorybookConfigBase['docs']
+  framework:
+    | FrameworkName
+    | { name: FrameworkName; options: FrameworkOptionsVue }
+  core?: Omit<StorybookConfigBase['core'], 'builder'> & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          options?: Record<string, any>
+        }
+  }
 }
+
 /**
  * The interface for Storybook configuration in `main.ts` files.
  */
-export type StorybookConfig = {
-  viteFinal?: Record<string, unknown>
-} & StorybookConfigFramework
-export interface NuxtOptions {}
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework
+
 export { Meta, StoryFn, StoryObj, Preview, VueRenderer, DecoratorFunction }

packages/storybook-nuxt/src/types.test-d.ts

@@ -0,0 +1,50 @@
+import { describe, expectTypeOf, test } from 'vitest'
+import type { StorybookConfig } from './types'
+
+describe('StorybookConfig', () => {
+  test('should restrict framework name', () => {
+    expectTypeOf<StorybookConfig>()
+      .toHaveProperty('framework')
+      .extract<string>()
+      .toEqualTypeOf<'@storybook-vue/nuxt'>()
+    expectTypeOf<StorybookConfig>()
+      .toHaveProperty('framework')
+      .extract<{ name: string }>()
+      .toHaveProperty('name')
+      .toEqualTypeOf<'@storybook-vue/nuxt'>()
+  })
+  test('should restrict builder name', () => {
+    expectTypeOf<StorybookConfig>()
+      .toHaveProperty('core')
+      .exclude<undefined>()
+      .toHaveProperty('builder')
+      .extract<string>()
+      .toEqualTypeOf<'@storybook/builder-vite'>()
+
+    expectTypeOf<StorybookConfig>()
+      .toHaveProperty('core')
+      .exclude<undefined>()
+      .toHaveProperty('builder')
+      .extract<{ name: string }>()
+      .toHaveProperty('name')
+      .toEqualTypeOf<'@storybook/builder-vite'>()
+  })
+  test('should allow setting docgen option', () => {
+    const _config: StorybookConfig = {
+      stories: [],
+      framework: {
+        name: '@storybook-vue/nuxt',
+        options: {
+          docgen: 'vue-component-meta',
+        },
+      },
+    }
+  })
+  test('should allow setting staticDirs', () => {
+    const _config: StorybookConfig = {
+      stories: [],
+      framework: '@storybook-vue/nuxt',
+      staticDirs: ['public'],
+    }
+  })
+})

playground/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['../src/module'],
+  modules: ['../src/module', '@nuxt/test-utils/module'],
   storybook: {
     // Very verbose logs for debugging
     logLevel: Number.POSITIVE_INFINITY,

vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  test: {
+    typecheck: {
+      enabled: true,
+      // Don't fail the test if typecheck of source files fails for the moment
+      ignoreSourceErrors: true,
+    },
+  },
+})