diff --git a/.gitignore b/.gitignore index 920d00b5..cfb3b7e4 100644 --- a/.gitignore +++ b/.gitignore @@ -15,5 +15,9 @@ dist build-storybook.log storybook-static +# Nuxt build artificats +.nuxt + # Test artifacts coverage +tsconfig.vitest-temp.json diff --git a/packages/storybook-nuxt/src/preset.ts b/packages/storybook-nuxt/src/preset.ts index d3702a77..f218f13b 100644 --- a/packages/storybook-nuxt/src/preset.ts +++ b/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, diff --git a/packages/storybook-nuxt/src/types.d.ts b/packages/storybook-nuxt/src/types.d.ts index 210a492c..2387e90e 100644 --- a/packages/storybook-nuxt/src/types.d.ts +++ b/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,6 +7,8 @@ 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[] @@ -17,24 +16,29 @@ 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 & { + builder?: + | BuilderName + | { + name: BuilderName + // eslint-disable-next-line @typescript-eslint/no-explicit-any + options?: Record + } + } } + /** * The interface for Storybook configuration in `main.ts` files. */ -export type StorybookConfig = { - viteFinal?: Record -} & StorybookConfigFramework -export interface NuxtOptions {} +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework + export { Meta, StoryFn, StoryObj, Preview, VueRenderer, DecoratorFunction } diff --git a/packages/storybook-nuxt/src/types.test-d.ts b/packages/storybook-nuxt/src/types.test-d.ts new file mode 100644 index 00000000..bd993ced --- /dev/null +++ b/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() + .toHaveProperty('framework') + .extract() + .toEqualTypeOf<'@storybook-vue/nuxt'>() + expectTypeOf() + .toHaveProperty('framework') + .extract<{ name: string }>() + .toHaveProperty('name') + .toEqualTypeOf<'@storybook-vue/nuxt'>() + }) + test('should restrict builder name', () => { + expectTypeOf() + .toHaveProperty('core') + .exclude() + .toHaveProperty('builder') + .extract() + .toEqualTypeOf<'@storybook/builder-vite'>() + + expectTypeOf() + .toHaveProperty('core') + .exclude() + .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'], + } + }) +}) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 95eb5fd0..f9417ca4 100644 --- a/playground/nuxt.config.ts +++ b/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, diff --git a/test/basic.test.ts b/test/playground.test.ts similarity index 100% rename from test/basic.test.ts rename to test/playground.test.ts diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 00000000..d3369d5c --- /dev/null +++ b/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, + }, + }, +})